ng-blatui 1.3.0 → 1.5.0

package/fesm2022/ng-blatui.mjs

@@ -70,7 +70,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 const BASE = 'inline-flex items-center justify-center rounded-md border font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden';
-const SIZES = {
+const SIZES$1 = {
     sm: 'px-1.5 py-px text-[0.625rem]',
     default: 'px-2 py-0.5 text-xs',
     lg: 'px-3 py-1 text-sm [&>svg]:size-3.5',
@@ -81,7 +81,7 @@ const VARIANTS = {
     destructive: 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
     outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
 };
-const TONES = {
+const TONES$1 = {
     success: {
         soft: 'border-transparent bg-success/10 text-success dark:bg-success/15',
         solid: 'border-transparent bg-success text-success-foreground',
@@ -143,8 +143,8 @@ class BuiBadge {
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     computedClass = computed(() => {
         const tone = this.tone();
-        const toneOrVariant = tone === null ? brandClass(this.variant()) : TONES[tone][intensityFor(this.variant())];
-        return cn(BASE, SIZES[this.size()], toneOrVariant, this.userClass());
+        const toneOrVariant = tone === null ? brandClass(this.variant()) : TONES$1[tone][intensityFor(this.variant())];
+        return cn(BASE, SIZES$1[this.size()], toneOrVariant, this.userClass());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiBadge, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -2250,6 +2250,665 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+/** Empty-state container. */
+class BuiEmpty {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border border-dashed p-6 text-center text-balance md:p-12', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiEmpty, isStandalone: true, selector: "[buiEmpty]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "empty" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiEmpty, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiEmpty]',
+                    host: { 'data-slot': 'empty', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiEmptyHeader {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('flex max-w-sm flex-col items-center gap-2 text-center', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiEmptyHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiEmptyHeader, isStandalone: true, selector: "[buiEmptyHeader]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "empty-header" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiEmptyHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiEmptyHeader]',
+                    host: { 'data-slot': 'empty-header', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiEmptyMedia {
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('mb-2 flex shrink-0 items-center justify-center', this.variant() === 'icon' &&
+        "size-10 rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6", this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiEmptyMedia, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiEmptyMedia, isStandalone: true, selector: "[buiEmptyMedia]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "empty-media" }, properties: { "attr.data-variant": "variant()", "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiEmptyMedia, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiEmptyMedia]',
+                    host: {
+                        'data-slot': 'empty-media',
+                        '[attr.data-variant]': 'variant()',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiEmptyTitle {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('text-lg font-medium tracking-tight', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiEmptyTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiEmptyTitle, isStandalone: true, selector: "[buiEmptyTitle]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "empty-title" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiEmptyTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiEmptyTitle]',
+                    host: { 'data-slot': 'empty-title', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiEmptyDescription {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiEmptyDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiEmptyDescription, isStandalone: true, selector: "[buiEmptyDescription]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "empty-description" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiEmptyDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiEmptyDescription]',
+                    host: { 'data-slot': 'empty-description', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiEmptyContent {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiEmptyContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiEmptyContent, isStandalone: true, selector: "[buiEmptyContent]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "empty-content" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiEmptyContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiEmptyContent]',
+                    host: { 'data-slot': 'empty-content', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const SIZES = {
+    sm: 'max-w-3xl',
+    md: 'max-w-5xl',
+    lg: 'max-w-6xl',
+    xl: 'max-w-7xl',
+    prose: 'max-w-prose',
+    full: 'max-w-full',
+};
+/** Centered, padded page container with a max-width scale. */
+class BuiContainer {
+    size = input('lg', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('mx-auto w-full px-4 sm:px-6 lg:px-8', SIZES[this.size()], this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiContainer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiContainer, isStandalone: true, selector: "[buiContainer]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "container" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiContainer, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiContainer]',
+                    host: { 'data-slot': 'container', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const FIELD_ORIENT = {
+    vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto',
+    horizontal: 'flex-row items-center [&>[data-slot=field-label]]:flex-auto',
+    responsive: 'flex-col [&>*]:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
+};
+/** A form field row grouping a label, control, description and error. */
+class BuiField {
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('group/field flex w-full gap-2 data-[invalid=true]:text-destructive', FIELD_ORIENT[this.orientation()], this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiField, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiField, isStandalone: true, selector: "[buiField]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group", "data-slot": "field" }, properties: { "attr.data-orientation": "orientation()", "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiField, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiField]',
+                    host: {
+                        role: 'group',
+                        'data-slot': 'field',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiFieldSet {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('flex flex-col gap-6 has-[>[data-slot=radio-group]]:gap-3', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiFieldSet, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiFieldSet, isStandalone: true, selector: "fieldset[buiFieldSet]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "field-set" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiFieldSet, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'fieldset[buiFieldSet]',
+                    host: { 'data-slot': 'field-set', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiFieldLegend {
+    variant = input('legend', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiFieldLegend, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiFieldLegend, isStandalone: true, selector: "legend[buiFieldLegend]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "field-legend" }, properties: { "attr.data-variant": "variant()", "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiFieldLegend, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'legend[buiFieldLegend]',
+                    host: {
+                        'data-slot': 'field-legend',
+                        '[attr.data-variant]': 'variant()',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiFieldGroup {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('group/field-group @container/field-group flex w-full flex-col gap-7', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiFieldGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiFieldGroup, isStandalone: true, selector: "[buiFieldGroup]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "field-group" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiFieldGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiFieldGroup]',
+                    host: { 'data-slot': 'field-group', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiFieldLabel {
+    forId = input(undefined, { ...(ngDevMode ? { debugName: "forId" } : /* istanbul ignore next */ {}), alias: 'for' });
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('flex w-fit gap-2 text-sm leading-snug font-medium select-none group-data-[disabled=true]/field:opacity-50', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiFieldLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiFieldLabel, isStandalone: true, selector: "label[buiFieldLabel]", inputs: { forId: { classPropertyName: "forId", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "field-label" }, properties: { "attr.for": "forId()", "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiFieldLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'label[buiFieldLabel]',
+                    host: { 'data-slot': 'field-label', '[attr.for]': 'forId()', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { forId: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiFieldTitle {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiFieldTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiFieldTitle, isStandalone: true, selector: "[buiFieldTitle]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "field-title" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiFieldTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiFieldTitle]',
+                    host: { 'data-slot': 'field-title', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiFieldDescription {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('text-sm leading-normal font-normal text-muted-foreground', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiFieldDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiFieldDescription, isStandalone: true, selector: "p[buiFieldDescription]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "field-description" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiFieldDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'p[buiFieldDescription]',
+                    host: { 'data-slot': 'field-description', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiFieldContent {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('group/field-content flex flex-1 flex-col gap-1.5 leading-snug', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiFieldContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiFieldContent, isStandalone: true, selector: "[buiFieldContent]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "field-content" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiFieldContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiFieldContent]',
+                    host: { 'data-slot': 'field-content', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+/** Field validation message (`role="alert"`). */
+class BuiFieldError {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('text-sm font-normal text-destructive', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiFieldError, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiFieldError, isStandalone: true, selector: "[buiFieldError]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "alert", "data-slot": "field-error" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiFieldError, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiFieldError]',
+                    host: { role: 'alert', 'data-slot': 'field-error', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+/** Labelled divider between fields. */
+class BuiFieldSeparator {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('relative -my-2 block h-5 text-sm', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiFieldSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiFieldSeparator, isStandalone: true, selector: "bui-field-separator", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "field-separator" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    <div class="absolute inset-0 top-1/2 h-px bg-border"></div>
+    <span class="relative mx-auto block w-fit bg-background px-2 text-muted-foreground">
+      <ng-content />
+    </span>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiFieldSeparator, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-field-separator',
+                    host: { 'data-slot': 'field-separator', '[class]': 'computedClass()' },
+                    template: `
+    <div class="absolute inset-0 top-1/2 h-px bg-border"></div>
+    <span class="relative mx-auto block w-fit bg-background px-2 text-muted-foreground">
+      <ng-content />
+    </span>
+  `,
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/** Accessible disclosure: a trigger toggles the visibility of its content. */
+class BuiCollapsible {
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    contentId = inject(_IdGenerator).getId('bui-collapsible-');
+    toggle() {
+        this.open.update((value) => !value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCollapsible, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiCollapsible, isStandalone: true, selector: "[buiCollapsible]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { attributes: { "data-slot": "collapsible" } }, exportAs: ["buiCollapsible"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCollapsible, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiCollapsible]',
+                    exportAs: 'buiCollapsible',
+                    host: { 'data-slot': 'collapsible' },
+                }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
+class BuiCollapsibleTrigger {
+    collapsible = inject(BuiCollapsible);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCollapsibleTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: BuiCollapsibleTrigger, isStandalone: true, selector: "button[buiCollapsibleTrigger]", host: { attributes: { "type": "button", "data-slot": "collapsible-trigger" }, listeners: { "click": "collapsible.toggle()" }, properties: { "attr.aria-expanded": "collapsible.open()", "attr.aria-controls": "collapsible.contentId", "attr.data-state": "collapsible.open() ? 'open' : 'closed'" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCollapsibleTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[buiCollapsibleTrigger]',
+                    host: {
+                        type: 'button',
+                        'data-slot': 'collapsible-trigger',
+                        '[attr.aria-expanded]': 'collapsible.open()',
+                        '[attr.aria-controls]': 'collapsible.contentId',
+                        '[attr.data-state]': "collapsible.open() ? 'open' : 'closed'",
+                        '(click)': 'collapsible.toggle()',
+                    },
+                }]
+        }] });
+class BuiCollapsibleContent {
+    collapsible = inject(BuiCollapsible);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCollapsibleContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: BuiCollapsibleContent, isStandalone: true, selector: "[buiCollapsibleContent]", host: { attributes: { "data-slot": "collapsible-content" }, properties: { "id": "collapsible.contentId", "hidden": "!collapsible.open()", "attr.data-state": "collapsible.open() ? 'open' : 'closed'" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCollapsibleContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiCollapsibleContent]',
+                    host: {
+                        'data-slot': 'collapsible-content',
+                        '[id]': 'collapsible.contentId',
+                        '[hidden]': '!collapsible.open()',
+                        '[attr.data-state]': "collapsible.open() ? 'open' : 'closed'",
+                    },
+                }]
+        }] });
+
+const toggleVariants = cva("inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: 'bg-transparent',
+            outline: 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+        },
+        size: {
+            default: 'h-9 min-w-9 px-2',
+            sm: 'h-8 min-w-8 px-1.5',
+            lg: 'h-10 min-w-10 px-2.5',
+        },
+    },
+    defaultVariants: { variant: 'default', size: 'default' },
+});
+/** A two-state toggle button (`aria-pressed`). */
+class BuiToggle {
+    pressed = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []));
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn(toggleVariants({ variant: this.variant(), size: this.size() }), this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    toggle() {
+        this.pressed.update((value) => !value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiToggle, isStandalone: true, selector: "button[buiToggle]", inputs: { pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressedChange" }, host: { attributes: { "type": "button", "data-slot": "toggle" }, listeners: { "click": "toggle()" }, properties: { "attr.aria-pressed": "pressed()", "attr.data-state": "pressed() ? 'on' : 'off'", "class": "computedClass()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiToggle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[buiToggle]',
+                    host: {
+                        type: 'button',
+                        'data-slot': 'toggle',
+                        '[attr.aria-pressed]': 'pressed()',
+                        '[attr.data-state]': "pressed() ? 'on' : 'off'",
+                        '[class]': 'computedClass()',
+                        '(click)': 'toggle()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }, { type: i0.Output, args: ["pressedChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/** A spinning loading indicator (`role="status"`). */
+class BuiSpinner {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('inline-block size-4 animate-spin', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiSpinner, isStandalone: true, selector: "bui-spinner", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "spinner", "role": "status", "aria-label": "Loading" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      class="size-full"
+    >
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSpinner, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-spinner',
+                    host: {
+                        'data-slot': 'spinner',
+                        role: 'status',
+                        'aria-label': 'Loading',
+                        '[class]': 'computedClass()',
+                    },
+                    template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      class="size-full"
+    >
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  `,
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/** Copy-to-clipboard button: copies `value`, flips to a check, announces "Copied". */
+class BuiCopyButton {
+    value = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    label = input('Copy', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    copied = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('inline-flex h-8 items-center justify-center gap-1.5 rounded-md px-2 text-sm font-medium text-muted-foreground transition-colors outline-none hover:bg-accent hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    async copy() {
+        try {
+            await navigator.clipboard.writeText(this.value());
+            this.copied.set(true);
+            setTimeout(() => {
+                this.copied.set(false);
+            }, 1500);
+        }
+        catch {
+            // Clipboard unavailable — ignore.
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCopyButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiCopyButton, isStandalone: true, selector: "button[buiCopyButton]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "data-slot": "copy-button" }, listeners: { "click": "copy()" }, properties: { "attr.aria-label": "copied() ? 'Copied' : label()", "class": "computedClass()" } }, ngImport: i0, template: `
+    <span class="grid size-4 place-items-center *:col-start-1 *:row-start-1">
+      @if (copied()) {
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          class="size-4 text-success"
+        >
+          <path d="M20 6 9 17l-5-5" />
+        </svg>
+      } @else {
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          class="size-4"
+        >
+          <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+          <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+        </svg>
+      }
+    </span>
+    <ng-content />
+    <span class="sr-only" aria-live="polite">{{ copied() ? 'Copied' : '' }}</span>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCopyButton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[buiCopyButton]',
+                    host: {
+                        type: 'button',
+                        'data-slot': 'copy-button',
+                        '[attr.aria-label]': "copied() ? 'Copied' : label()",
+                        '[class]': 'computedClass()',
+                        '(click)': 'copy()',
+                    },
+                    template: `
+    <span class="grid size-4 place-items-center *:col-start-1 *:row-start-1">
+      @if (copied()) {
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          class="size-4 text-success"
+        >
+          <path d="M20 6 9 17l-5-5" />
+        </svg>
+      } @else {
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          class="size-4"
+        >
+          <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+          <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+        </svg>
+      }
+    </span>
+    <ng-content />
+    <span class="sr-only" aria-live="polite">{{ copied() ? 'Copied' : '' }}</span>
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const TONES = {
+    default: 'bg-muted text-foreground border-border',
+    primary: 'bg-primary text-primary-foreground border-transparent',
+    info: 'bg-info/10 text-info border-info/25',
+    success: 'bg-success/10 text-success border-success/25',
+    warning: 'bg-warning/10 text-warning border-warning/25',
+    danger: 'bg-destructive/10 text-destructive border-destructive/25',
+};
+/**
+ * Full-width announcement bar. Optionally dismissible and (with `persistKey`) remembers
+ * the dismissal in localStorage. SSR-safe — localStorage is only touched in the browser.
+ */
+class BuiBanner {
+    tone = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    dismissible = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+    persistKey = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "persistKey" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    show = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "show" }] : /* istanbul ignore next */ []));
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    computedClass = computed(() => cn('relative flex w-full items-center gap-3 border-b px-4 py-2.5 text-sm', TONES[this.tone()], this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        const key = this.persistKey();
+        if (this.isBrowser && key && localStorage.getItem(`bui-banner-${key}`) === '1') {
+            this.show.set(false);
+        }
+    }
+    dismiss() {
+        this.show.set(false);
+        const key = this.persistKey();
+        if (this.isBrowser && key) {
+            localStorage.setItem(`bui-banner-${key}`, '1');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiBanner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiBanner, isStandalone: true, selector: "bui-banner", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, persistKey: { classPropertyName: "persistKey", publicName: "persistKey", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "banner", "role": "region", "aria-label": "Announcement" }, properties: { "hidden": "!show()", "class": "computedClass()" } }, ngImport: i0, template: `
+    <div class="flex flex-1 flex-wrap items-center justify-center gap-x-3 gap-y-1">
+      <ng-content />
+    </div>
+    @if (dismissible()) {
+      <button
+        type="button"
+        aria-label="Dismiss"
+        class="shrink-0 rounded-md p-1 opacity-70 transition-opacity outline-none hover:opacity-100 focus-visible:ring-2 focus-visible:ring-current/40"
+        (click)="dismiss()"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          class="size-4"
+        >
+          <path d="M18 6 6 18" />
+          <path d="m6 6 12 12" />
+        </svg>
+      </button>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiBanner, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-banner',
+                    host: {
+                        'data-slot': 'banner',
+                        role: 'region',
+                        'aria-label': 'Announcement',
+                        '[hidden]': '!show()',
+                        '[class]': 'computedClass()',
+                    },
+                    template: `
+    <div class="flex flex-1 flex-wrap items-center justify-center gap-x-3 gap-y-1">
+      <ng-content />
+    </div>
+    @if (dismissible()) {
+      <button
+        type="button"
+        aria-label="Dismiss"
+        class="shrink-0 rounded-md p-1 opacity-70 transition-opacity outline-none hover:opacity-100 focus-visible:ring-2 focus-visible:ring-current/40"
+        (click)="dismiss()"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          class="size-4"
+        >
+          <path d="M18 6 6 18" />
+          <path d="m6 6 12 12" />
+        </svg>
+      </button>
+    }
+  `,
+                }]
+        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], persistKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "persistKey", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
 /*
  * Public API Surface of ng-blatui
  */
@@ -2258,5 +2917,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BuiAccordion, BuiAccordionContent, BuiAccordionItem, BuiAccordionTrigger, BuiAlert, BuiAlertDescription, BuiAlertTitle, BuiAspectRatio, BuiAvatar, BuiBadge, BuiBreadcrumb, BuiBreadcrumbEllipsis, BuiBreadcrumbItem, BuiBreadcrumbLink, BuiBreadcrumbList, BuiBreadcrumbPage, BuiBreadcrumbSeparator, BuiButton, BuiButtonGroup, BuiButtonGroupText, BuiCard, BuiCardAction, BuiCardContent, BuiCardDescription, BuiCardFooter, BuiCardHeader, BuiCardTitle, BuiCheckbox, BuiDialogContent, BuiDialogDescription, BuiDialogFooter, BuiDialogHeader, BuiDialogTitle, BuiInput, BuiKbd, BuiLabel, BuiProgress, BuiRadioGroup, BuiRadioGroupItem, BuiSeparator, BuiSkeleton, BuiSwitch, BuiTabList, BuiTabPanel, BuiTabTrigger, BuiTabs, BuiTextarea, BuiThemeCustomizer, BuiTooltip, BuiTooltipContent, THEME_TOKENS, ThemeStore, buttonVariants, cn };
+export { BuiAccordion, BuiAccordionContent, BuiAccordionItem, BuiAccordionTrigger, BuiAlert, BuiAlertDescription, BuiAlertTitle, BuiAspectRatio, BuiAvatar, BuiBadge, BuiBanner, BuiBreadcrumb, BuiBreadcrumbEllipsis, BuiBreadcrumbItem, BuiBreadcrumbLink, BuiBreadcrumbList, BuiBreadcrumbPage, BuiBreadcrumbSeparator, BuiButton, BuiButtonGroup, BuiButtonGroupText, BuiCard, BuiCardAction, BuiCardContent, BuiCardDescription, BuiCardFooter, BuiCardHeader, BuiCardTitle, BuiCheckbox, BuiCollapsible, BuiCollapsibleContent, BuiCollapsibleTrigger, BuiContainer, BuiCopyButton, BuiDialogContent, BuiDialogDescription, BuiDialogFooter, BuiDialogHeader, BuiDialogTitle, BuiEmpty, BuiEmptyContent, BuiEmptyDescription, BuiEmptyHeader, BuiEmptyMedia, BuiEmptyTitle, BuiField, BuiFieldContent, BuiFieldDescription, BuiFieldError, BuiFieldGroup, BuiFieldLabel, BuiFieldLegend, BuiFieldSeparator, BuiFieldSet, BuiFieldTitle, BuiInput, BuiKbd, BuiLabel, BuiProgress, BuiRadioGroup, BuiRadioGroupItem, BuiSeparator, BuiSkeleton, BuiSpinner, BuiSwitch, BuiTabList, BuiTabPanel, BuiTabTrigger, BuiTabs, BuiTextarea, BuiThemeCustomizer, BuiToggle, BuiTooltip, BuiTooltipContent, THEME_TOKENS, ThemeStore, buttonVariants, cn, toggleVariants };
 //# sourceMappingURL=ng-blatui.mjs.map