ng-blatui 1.1.0 → 1.3.0

package/fesm2022/ng-blatui.mjs

@@ -1,12 +1,15 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { input, computed, Directive, Component, signal, model, inject, PLATFORM_ID, effect, Injectable } from '@angular/core';
+import { input, computed, Directive, Component, signal, model, inject, PLATFORM_ID, effect, Injectable, ElementRef } from '@angular/core';
 import { cva } from 'class-variance-authority';
 export { AccordionContent, AccordionGroup, AccordionPanel, AccordionTrigger, ɵɵDeferredContent, ɵɵDeferredContentAware } from '@angular/aria/accordion';
 export { Tab, TabContent, TabList, TabPanel, Tabs } from '@angular/aria/tabs';
 export { DIALOG_DATA, Dialog, DialogModule, DialogRef } from '@angular/cdk/dialog';
 import { isPlatformBrowser } from '@angular/common';
+import { _IdGenerator } from '@angular/cdk/a11y';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
 
 /**
  * Merge class names with `clsx` semantics and resolve Tailwind conflicts with
@@ -1819,6 +1822,434 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }] });
 
+/**
+ * BlatUI radio group. `role="radiogroup"` with arrow-key roving focus across the
+ * `buiRadioItem` buttons; `[(value)]` two-way binds the selected value.
+ */
+class BuiRadioGroup {
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    host = inject(ElementRef);
+    computedClass = computed(() => cn('grid gap-3', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    select(next) {
+        this.value.set(next);
+    }
+    onKeydown(event) {
+        if (!['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft'].includes(event.key)) {
+            return;
+        }
+        event.preventDefault();
+        const items = [
+            ...this.host.nativeElement.querySelectorAll('[role="radio"]:not([disabled])'),
+        ];
+        if (items.length === 0) {
+            return;
+        }
+        const current = items.indexOf(document.activeElement);
+        const isForward = event.key === 'ArrowDown' || event.key === 'ArrowRight';
+        const next = items[(current + (isForward ? 1 : -1) + items.length) % items.length];
+        next.focus();
+        next.click();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiRadioGroup, isStandalone: true, selector: "[buiRadioGroup]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "radiogroup", "data-slot": "radio-group" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "computedClass()" } }, exportAs: ["buiRadioGroup"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiRadioGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiRadioGroup]',
+                    exportAs: 'buiRadioGroup',
+                    host: {
+                        role: 'radiogroup',
+                        'data-slot': 'radio-group',
+                        '[class]': 'computedClass()',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+const ITEM = 'border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50';
+class BuiRadioGroupItem {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    group = inject(BuiRadioGroup);
+    checked = computed(() => this.group.value() === this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    tabIndex = computed(() => this.checked() || this.group.value() === null ? 0 : -1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn(ITEM, this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    select() {
+        if (!this.disabled()) {
+            this.group.select(this.value());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiRadioGroupItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiRadioGroupItem, isStandalone: true, selector: "button[buiRadioItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "role": "radio", "data-slot": "radio-group-item" }, listeners: { "click": "select()" }, properties: { "attr.aria-checked": "checked()", "attr.data-state": "checked() ? 'checked' : 'unchecked'", "attr.tabindex": "tabIndex()", "disabled": "disabled()", "class": "computedClass()" } }, ngImport: i0, template: `
+    @if (checked()) {
+      <span data-slot="radio-group-indicator" class="flex items-center justify-center">
+        <svg viewBox="0 0 24 24" fill="currentColor" class="size-2" aria-hidden="true">
+          <circle cx="12" cy="12" r="10" />
+        </svg>
+      </span>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiRadioGroupItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[buiRadioItem]',
+                    host: {
+                        type: 'button',
+                        role: 'radio',
+                        'data-slot': 'radio-group-item',
+                        '[attr.aria-checked]': 'checked()',
+                        '[attr.data-state]': "checked() ? 'checked' : 'unchecked'",
+                        '[attr.tabindex]': 'tabIndex()',
+                        '[disabled]': 'disabled()',
+                        '[class]': 'computedClass()',
+                        '(click)': 'select()',
+                    },
+                    template: `
+    @if (checked()) {
+      <span data-slot="radio-group-indicator" class="flex items-center justify-center">
+        <svg viewBox="0 0 24 24" fill="currentColor" class="size-2" aria-hidden="true">
+          <circle cx="12" cy="12" r="10" />
+        </svg>
+      </span>
+    }
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/** Floating tooltip bubble rendered into a CDK overlay. */
+class BuiTooltipContent {
+    text = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTooltipContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiTooltipContent, isStandalone: true, selector: "bui-tooltip-content", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, classAttribute: "bg-primary text-primary-foreground z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs shadow-md" }, ngImport: i0, template: `{{ text() }}`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTooltipContent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-tooltip-content',
+                    host: {
+                        role: 'tooltip',
+                        class: 'bg-primary text-primary-foreground z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs shadow-md',
+                    },
+                    template: `{{ text() }}`,
+                }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
+/**
+ * BlatUI tooltip. Shows an accessible `role="tooltip"` bubble on hover/focus via the
+ * Angular CDK overlay and wires `aria-describedby` on the host. SSR-safe (the overlay
+ * is only created in the browser, on interaction).
+ */
+class BuiTooltip {
+    text = input.required({ ...(ngDevMode ? { debugName: "text" } : /* istanbul ignore next */ {}), alias: 'buiTooltip' });
+    overlay = inject(Overlay);
+    idGenerator = inject(_IdGenerator);
+    host = inject(ElementRef);
+    overlayRef = null;
+    describedBy = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    show() {
+        if (this.overlayRef || !this.text()) {
+            return;
+        }
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.host)
+            .withPositions([
+            { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -6 },
+            { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 6 },
+        ]);
+        this.overlayRef = this.overlay.create({ positionStrategy });
+        const reference = this.overlayRef.attach(new ComponentPortal(BuiTooltipContent));
+        reference.setInput('text', this.text());
+        const id = this.idGenerator.getId('bui-tooltip-');
+        reference.location.nativeElement.id = id;
+        this.describedBy.set(id);
+    }
+    hide() {
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.describedBy.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiTooltip, isStandalone: true, selector: "[buiTooltip]", inputs: { text: { classPropertyName: "text", publicName: "buiTooltip", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()", "focusin": "show()", "focusout": "hide()" }, properties: { "attr.aria-describedby": "describedBy()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTooltip, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiTooltip]',
+                    host: {
+                        '[attr.aria-describedby]': 'describedBy()',
+                        '(mouseenter)': 'show()',
+                        '(mouseleave)': 'hide()',
+                        '(focusin)': 'show()',
+                        '(focusout)': 'hide()',
+                    },
+                }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "buiTooltip", required: true }] }] } });
+
+/** Breadcrumb navigation landmark (`<nav aria-label="breadcrumb">`). */
+class BuiBreadcrumb {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: BuiBreadcrumb, isStandalone: true, selector: "nav[buiBreadcrumb]", host: { attributes: { "aria-label": "breadcrumb", "data-slot": "breadcrumb" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiBreadcrumb, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'nav[buiBreadcrumb]',
+                    host: { 'aria-label': 'breadcrumb', 'data-slot': 'breadcrumb' },
+                }]
+        }] });
+class BuiBreadcrumbList {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5', 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: BuiBreadcrumbList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiBreadcrumbList, isStandalone: true, selector: "ol[buiBreadcrumbList]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "breadcrumb-list" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiBreadcrumbList, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ol[buiBreadcrumbList]',
+                    host: { 'data-slot': 'breadcrumb-list', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiBreadcrumbItem {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('inline-flex items-center gap-1.5', 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: BuiBreadcrumbItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiBreadcrumbItem, isStandalone: true, selector: "li[buiBreadcrumbItem]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "breadcrumb-item" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiBreadcrumbItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'li[buiBreadcrumbItem]',
+                    host: { 'data-slot': 'breadcrumb-item', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiBreadcrumbLink {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('transition-colors hover:text-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: BuiBreadcrumbLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiBreadcrumbLink, isStandalone: true, selector: "a[buiBreadcrumbLink]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "breadcrumb-link" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiBreadcrumbLink, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'a[buiBreadcrumbLink]',
+                    host: { 'data-slot': 'breadcrumb-link', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+/** The current page in a breadcrumb — non-interactive, `aria-current="page"`. */
+class BuiBreadcrumbPage {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('font-normal text-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: BuiBreadcrumbPage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiBreadcrumbPage, isStandalone: true, selector: "[buiBreadcrumbPage]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "breadcrumb-page", "role": "link", "aria-disabled": "true", "aria-current": "page" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiBreadcrumbPage, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiBreadcrumbPage]',
+                    host: {
+                        'data-slot': 'breadcrumb-page',
+                        role: 'link',
+                        'aria-disabled': 'true',
+                        'aria-current': 'page',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+/** Separator between breadcrumb items (defaults to a chevron). */
+class BuiBreadcrumbSeparator {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('[&>svg]:size-3.5', 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: BuiBreadcrumbSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiBreadcrumbSeparator, isStandalone: true, selector: "li[buiBreadcrumbSeparator]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "breadcrumb-separator", "role": "presentation", "aria-hidden": "true" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    <ng-content>
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="size-3.5"
+      >
+        <path d="m9 18 6-6-6-6" />
+      </svg>
+    </ng-content>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiBreadcrumbSeparator, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'li[buiBreadcrumbSeparator]',
+                    host: {
+                        'data-slot': 'breadcrumb-separator',
+                        role: 'presentation',
+                        'aria-hidden': 'true',
+                        '[class]': 'computedClass()',
+                    },
+                    template: `
+    <ng-content>
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="size-3.5"
+      >
+        <path d="m9 18 6-6-6-6" />
+      </svg>
+    </ng-content>
+  `,
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+/** Collapsed breadcrumb indicator (ellipsis). */
+class BuiBreadcrumbEllipsis {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('flex size-9 items-center justify-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: BuiBreadcrumbEllipsis, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiBreadcrumbEllipsis, isStandalone: true, selector: "li[buiBreadcrumbEllipsis]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "breadcrumb-ellipsis", "role": "presentation", "aria-hidden": "true" }, 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"
+      class="size-4"
+    >
+      <circle cx="12" cy="12" r="1" />
+      <circle cx="19" cy="12" r="1" />
+      <circle cx="5" cy="12" r="1" />
+    </svg>
+    <span class="sr-only">More</span>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiBreadcrumbEllipsis, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'li[buiBreadcrumbEllipsis]',
+                    host: {
+                        'data-slot': 'breadcrumb-ellipsis',
+                        role: 'presentation',
+                        'aria-hidden': 'true',
+                        '[class]': 'computedClass()',
+                    },
+                    template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="size-4"
+    >
+      <circle cx="12" cy="12" r="1" />
+      <circle cx="19" cy="12" r="1" />
+      <circle cx="5" cy="12" r="1" />
+    </svg>
+    <span class="sr-only">More</span>
+  `,
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/** Keyboard key styling, applied to a native `<kbd>` element. */
+class BuiKbd {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none', 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: BuiKbd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiKbd, isStandalone: true, selector: "kbd[buiKbd]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "kbd" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiKbd, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kbd[buiKbd]',
+                    host: { 'data-slot': 'kbd', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/** Constrains projected content to a given aspect ratio (e.g. `16 / 9`). */
+class BuiAspectRatio {
+    ratio = input('1 / 1', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ratio" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('relative block', 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: BuiAspectRatio, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiAspectRatio, isStandalone: true, selector: "bui-aspect-ratio", inputs: { ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "aspect-ratio" }, properties: { "style.aspect-ratio": "ratio()", "class": "computedClass()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAspectRatio, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-aspect-ratio',
+                    host: {
+                        'data-slot': 'aspect-ratio',
+                        '[style.aspect-ratio]': 'ratio()',
+                        '[class]': 'computedClass()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/** Groups buttons (and inputs) into a single segmented control. */
+class BuiButtonGroup {
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 data-[orientation=vertical]:flex-col [&>*]:focus-within:z-10 [&>*]:focus-visible:z-10 data-[orientation=horizontal]:[&>*:not(:first-child)]:rounded-l-none data-[orientation=horizontal]:[&>*:not(:first-child)]:border-l-0 data-[orientation=vertical]:[&>*:not(:first-child)]:rounded-t-none data-[orientation=vertical]:[&>*:not(:first-child)]:border-t-0 data-[orientation=horizontal]:[&>*:not(:last-child)]:rounded-r-none data-[orientation=vertical]:[&>*:not(:last-child)]:rounded-b-none', 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: BuiButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiButtonGroup, isStandalone: true, selector: "[buiButtonGroup]", 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": "button-group" }, properties: { "attr.data-orientation": "orientation()", "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiButtonGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiButtonGroup]',
+                    host: {
+                        role: 'group',
+                        'data-slot': 'button-group',
+                        '[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 }] }] } });
+/** A non-button text segment inside a button group. */
+class BuiButtonGroupText {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium shadow-xs', 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: BuiButtonGroupText, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiButtonGroupText, isStandalone: true, selector: "[buiButtonGroupText]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "button-group-text" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiButtonGroupText, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiButtonGroupText]',
+                    host: { 'data-slot': 'button-group-text', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
 /*
  * Public API Surface of ng-blatui
  */
@@ -1827,5 +2258,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, BuiAvatar, BuiBadge, BuiButton, BuiCard, BuiCardAction, BuiCardContent, BuiCardDescription, BuiCardFooter, BuiCardHeader, BuiCardTitle, BuiCheckbox, BuiDialogContent, BuiDialogDescription, BuiDialogFooter, BuiDialogHeader, BuiDialogTitle, BuiInput, BuiLabel, BuiProgress, BuiSeparator, BuiSkeleton, BuiSwitch, BuiTabList, BuiTabPanel, BuiTabTrigger, BuiTabs, BuiTextarea, BuiThemeCustomizer, THEME_TOKENS, ThemeStore, buttonVariants, cn };
+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 };
 //# sourceMappingURL=ng-blatui.mjs.map