ng-blatui 1.32.2 → 1.33.0

package/fesm2022/ng-blatui.mjs

@@ -189,6 +189,11 @@ const VARIANTS$2 = {
     outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
 };
 const TONES$2 = {
+    primary: {
+        soft: 'border-transparent bg-primary/10 text-primary dark:bg-primary/15',
+        solid: 'border-transparent bg-primary text-primary-foreground',
+        outline: 'text-primary border-primary/40',
+    },
     success: {
         soft: 'border-transparent bg-success/10 text-success dark:bg-success/15',
         solid: 'border-transparent bg-success text-success-foreground',
@@ -236,7 +241,7 @@ function intensityFor(variant) {
 }
 /**
  * BlatUI badge. Brand variants (`default | secondary | destructive | outline`)
- * or semantic `tone` (`success | warning | danger | info | neutral`) where
+ * or semantic `tone` (`primary | success | warning | danger | info | neutral`) where
  * `variant` then selects intensity (`soft | solid | outline`). Built on a native
  * element so it stays in the document flow and screen-reader friendly.
  */
@@ -819,7 +824,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop$i = () => { };
-const CHECKBOX_BASE = 'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 flex items-center justify-center';
+const CHECKBOX_BASE = 'peer border-input 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 size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 flex items-center justify-center';
+/** Per-tone checked/indeterminate fill colors. `primary` is the default (unchanged) look. */
+const CHECKBOX_TONES = {
+    primary: 'data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary',
+    success: 'data-[state=checked]:bg-success data-[state=checked]:text-success-foreground data-[state=checked]:border-success data-[state=indeterminate]:bg-success data-[state=indeterminate]:text-success-foreground data-[state=indeterminate]:border-success',
+    warning: 'data-[state=checked]:bg-warning data-[state=checked]:text-warning-foreground data-[state=checked]:border-warning data-[state=indeterminate]:bg-warning data-[state=indeterminate]:text-warning-foreground data-[state=indeterminate]:border-warning',
+    danger: 'data-[state=checked]:bg-destructive data-[state=checked]:text-white data-[state=checked]:border-destructive data-[state=indeterminate]:bg-destructive data-[state=indeterminate]:text-white data-[state=indeterminate]:border-destructive',
+    info: 'data-[state=checked]:bg-info data-[state=checked]:text-info-foreground data-[state=checked]:border-info data-[state=indeterminate]:bg-info data-[state=indeterminate]:text-info-foreground data-[state=indeterminate]:border-info',
+};
 /**
  * BlatUI checkbox. A native `<button role="checkbox">` (Space/Enter toggle for free)
  * with `[(checked)]` two-way binding and tri-state `[(indeterminate)]`.
@@ -834,6 +847,9 @@ class BuiCheckbox {
     /** Whether the checkbox is disabled. Two-way bindable with `[(disabled)]`. */
     disabled = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Semantic color of the checked/indeterminate fill. */
+    tone = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     onChange = noop$i;
     onTouched = noop$i;
@@ -846,7 +862,7 @@ class BuiCheckbox {
     ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
     ariaChecked = computed(() => this.indeterminate() ? 'mixed' : String(this.checked()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaChecked" }] : /* istanbul ignore next */ []));
-    computedClass = computed(() => cn(CHECKBOX_BASE, this.userClass()), /* @ts-ignore */
+    computedClass = computed(() => cn(CHECKBOX_BASE, CHECKBOX_TONES[this.tone()], this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     toggle() {
         if (this.disabled()) {
@@ -875,7 +891,7 @@ class BuiCheckbox {
         this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiCheckbox, isStandalone: true, selector: "button[buiCheckbox]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", indeterminate: "indeterminateChange", disabled: "disabledChange" }, host: { attributes: { "type": "button", "role": "checkbox", "data-slot": "checkbox" }, listeners: { "click": "toggle()", "blur": "onTouched()" }, properties: { "attr.aria-checked": "ariaChecked()", "attr.data-state": "state()", "disabled": "disabled()", "class": "computedClass()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiCheckbox, isStandalone: true, selector: "button[buiCheckbox]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", indeterminate: "indeterminateChange", disabled: "disabledChange" }, host: { attributes: { "type": "button", "role": "checkbox", "data-slot": "checkbox" }, listeners: { "click": "toggle()", "blur": "onTouched()" }, properties: { "attr.aria-checked": "ariaChecked()", "attr.data-state": "state()", "disabled": "disabled()", "class": "computedClass()" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiCheckbox), multi: true },
         ], ngImport: i0, template: `
     @if (checked() || indeterminate()) {
@@ -967,7 +983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop$h = () => { };
@@ -6215,6 +6231,12 @@ class BuiSelect {
     /** Whether the select is disabled. Two-way bindable with `[(disabled)]`. */
     disabled = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible name for the combobox. Bound from a plain `aria-label="…"` on the host
+     * (consumed as an input, so it's applied to the inner combobox button rather than left
+     * as a prohibited ARIA attribute on the custom element).
+     */
+    ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     onChange = noop$b;
     onTouched = noop$b;
@@ -6355,12 +6377,13 @@ class BuiSelect {
         this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiSelect, isStandalone: true, selector: "bui-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "select" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "computedClass()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiSelect, isStandalone: true, selector: "bui-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "select" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "computedClass()" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiSelect), multi: true },
         ], ngImport: i0, template: `
     <button
       type="button"
       role="combobox"
+      [attr.aria-label]="ariaLabel() || placeholder()"
       [attr.aria-expanded]="open()"
       aria-haspopup="listbox"
       [attr.aria-controls]="listId"
@@ -6477,6 +6500,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     <button
       type="button"
       role="combobox"
+      [attr.aria-label]="ariaLabel() || placeholder()"
       [attr.aria-expanded]="open()"
       aria-haspopup="listbox"
       [attr.aria-controls]="listId"
@@ -6577,7 +6601,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 const VARIANTS$1 = {
     primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
@@ -10838,6 +10862,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], 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 }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+const ICON_TILE_TONES = {
+    primary: 'bg-primary/10 text-primary',
+    success: 'bg-success/10 text-success dark:bg-success/15',
+    warning: 'bg-warning/10 text-warning dark:bg-warning/15',
+    info: 'bg-info/10 text-info dark:bg-info/15',
+    destructive: 'bg-destructive/10 text-destructive dark:bg-destructive/15',
+    muted: 'bg-muted text-foreground',
+    'chart-1': 'bg-chart-1/10 text-chart-1',
+    'chart-2': 'bg-chart-2/10 text-chart-2',
+    'chart-3': 'bg-chart-3/10 text-chart-3',
+    'chart-4': 'bg-chart-4/10 text-chart-4',
+    'chart-5': 'bg-chart-5/10 text-chart-5',
+};
+const ICON_TILE_SIZES = {
+    sm: 'size-8 [&_svg]:size-4',
+    default: 'size-10 [&_svg]:size-5',
+    lg: 'size-12 [&_svg]:size-6',
+};
+const ICON_TILE_SHAPES = {
+    sm: 'rounded-md',
+    default: 'rounded-lg',
+    lg: 'rounded-xl',
+};
+/**
+ * A tinted rounded square that frames a projected icon — the small "tile" used
+ * across dashboards for stat-card leading icons, list-row markers, feature
+ * bullets, etc. Project an icon (e.g. an inline `<svg>`) as its content; the
+ * tile sizes it automatically.
+ */
+class BuiIconTile {
+    /** Colour tone (semantic or chart palette). */
+    tone = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Square size preset. */
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Tile shape — a rounded square (default) or a full circle. */
+    shape = input('square', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('inline-flex shrink-0 items-center justify-center', ICON_TILE_SIZES[this.size()], this.shape() === 'circle' ? 'rounded-full' : ICON_TILE_SHAPES[this.size()], ICON_TILE_TONES[this.tone()], 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: BuiIconTile, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiIconTile, isStandalone: true, selector: "bui-icon-tile", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "icon-tile" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiIconTile, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-icon-tile',
+                    host: { 'data-slot': 'icon-tile', '[class]': 'computedClass()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
 /** A lazy image with a blurred placeholder / skeleton and a graceful error state. */
 class BuiImage {
     /** Source URL of the full image to load. */
@@ -16881,56 +16959,185 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 const PALETTE = ['#6366f1', '#22c55e', '#f59e0b', '#ec4899', '#06b6d4'];
 const WIDTH = 600;
 const PAD = 8;
-/** A lightweight SVG chart (line / area / bar). Pure + SSR-safe. */
+/** Circumference of the donut ring (2·π·r with r = 40 in the 100×100 viewBox). */
+const DONUT_C = 251.33;
+/** A lightweight SVG chart (line / area / bar / donut). Pure + SSR-safe. */
 class BuiChart {
-    /** Chart render style: line, bar, or filled area. */
+    /** Chart render style: line, bar, filled area, a donut ring, or a half-ring gauge. */
     type = input('line', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-    /** Series to plot; bar charts use only the first series. */
+    /** Series to plot; bar/donut use only the first series. */
     series = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
     /** X-axis tick labels rendered below the chart. */
     labels = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
-    /** Chart height in pixels (SVG viewBox height). */
+    /** Chart height in pixels (SVG viewBox height / donut diameter). */
     height = input(220, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /**
+     * Override for the value the chart scales against. For a donut it defines the
+     * full ring (e.g. `max=100` with data `[62]` fills 62%); otherwise the max of
+     * the series data is used.
+     */
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Donut ring thickness, in the 100×100 viewBox units. */
+    thickness = input(12, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "thickness" }] : /* istanbul ignore next */ []));
+    /**
+     * Index of the highlighted bar (bar charts). When set, the active bar renders
+     * solid and the rest are tinted; when `null` every bar renders solid.
+     */
+    activeIndex = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    /** Value text shown above each bar (bar charts); pass one entry per data point. */
+    barLabels = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "barLabels" }] : /* istanbul ignore next */ []));
+    /** Stack every series into one bar per data point, bottom-to-top (bar charts). */
+    stacked = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stacked" }] : /* istanbul ignore next */ []));
+    /** Render every series side-by-side within each data slot (grouped bar charts). */
+    grouped = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "grouped" }] : /* istanbul ignore next */ []));
+    /** Per-bar fill colors (bar charts); index-aligned with the first series' data. Overrides the series color. */
+    barColors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "barColors" }] : /* istanbul ignore next */ []));
+    /** Draw a faint full-height track behind each bar (bar charts). */
+    track = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "track" }] : /* istanbul ignore next */ []));
+    /** Render a dot marker at each data point (line/area charts). */
+    dots = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dots" }] : /* istanbul ignore next */ []));
+    /** Number of evenly-spaced vertical grid lines (line/area charts; 0 hides them). */
+    gridX = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridX" }] : /* istanbul ignore next */ []));
     /** Accessible label for the chart's `aria-label`. */
     label = input('Chart', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     width = WIDTH;
-    max = computed(() => Math.max(1, ...this.series().flatMap((s) => s.data)), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
-    bars = computed(() => {
-        const series = this.series().at(0);
-        if (!series) {
+    donutC = DONUT_C;
+    scaleMax = computed(() => this.max() ?? Math.max(1, ...this.series().flatMap((s) => s.data)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scaleMax" }] : /* istanbul ignore next */ []));
+    /**
+     * HTML bar columns. Each column has an overall height (`pct`, scaled against the
+     * max) plus one or more stacked `segments` (a single segment in the common case,
+     * several when `stacked`). Inactive bars are tinted when `activeIndex` is set.
+     */
+    barColumns = computed(() => {
+        const seriesList = this.series();
+        const first = seriesList.at(0);
+        if (!first || first.data.length === 0) {
             return [];
         }
-        const height = this.height();
-        const count = series.data.length;
-        const gap = 8;
-        const barWidth = (WIDTH - gap * (count + 1)) / Math.max(1, count);
-        return series.data.map((value, index) => {
-            const barHeight = (value / this.max()) * (height - PAD * 2);
+        const axisLabels = this.labels();
+        const count = first.data.length;
+        if (this.stacked() && seriesList.length > 1) {
+            const totals = Array.from({ length: count }, (_, index) => seriesList.reduce((sum, s) => sum + Math.max(0, s.data[index] ?? 0), 0));
+            const max = this.max() ?? Math.max(1, ...totals);
+            return Array.from({ length: count }, (_, index) => ({
+                id: index,
+                pct: (totals[index] / max) * 100,
+                segments: seriesList
+                    .map((s, si) => ({
+                    id: si,
+                    share: totals[index] > 0 ? (Math.max(0, s.data[index] ?? 0) / totals[index]) * 100 : 0,
+                    fill: s.color ?? PALETTE[si % PALETTE.length],
+                }))
+                    .filter((seg) => seg.share > 0),
+                value: '',
+                label: axisLabels[index] ?? '',
+            }));
+        }
+        const total = this.scaleMax();
+        const active = this.activeIndex();
+        const valueLabels = this.barLabels();
+        const perBar = this.barColors();
+        const color = first.color ?? PALETTE[0];
+        return first.data.map((value, index) => {
+            const base = perBar[index] ?? color;
+            const isDimmed = active !== null && active !== index;
+            const fill = isDimmed ? `color-mix(in oklab, ${base} 20%, transparent)` : base;
             return {
                 id: index,
-                x: gap + index * (barWidth + gap),
-                y: height - PAD - barHeight,
-                w: barWidth,
-                h: barHeight,
-                color: series.color ?? PALETTE[0],
+                pct: Math.max(0, (Math.max(0, value) / total) * 100),
+                segments: [{ id: 0, share: 100, fill }],
+                value: valueLabels[index] ?? '',
+                label: axisLabels[index] ?? '',
             };
         });
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
+    ...(ngDevMode ? [{ debugName: "barColumns" }] : /* istanbul ignore next */ []));
+    /** Grouped bars: one slot per data point, each holding a side-by-side sub-bar per series. */
+    barGroups = computed(() => {
+        const seriesList = this.series();
+        const first = seriesList.at(0);
+        if (!first || first.data.length === 0) {
+            return [];
+        }
+        const axisLabels = this.labels();
+        const total = this.scaleMax();
+        return first.data.map((_, index) => ({
+            id: index,
+            label: axisLabels[index] ?? '',
+            bars: seriesList.map((s, si) => ({
+                id: si,
+                pct: Math.max(0, (Math.max(0, s.data[index] ?? 0) / total) * 100),
+                fill: s.color ?? PALETTE[si % PALETTE.length],
+            })),
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "barGroups" }] : /* istanbul ignore next */ []));
+    /** Half-ring gauge geometry: a 180° arc filled to the first value's share of `max`. */
+    gauge = computed(() => {
+        const value = this.series().at(0)?.data.at(0) ?? 0;
+        const total = this.max() ?? 100;
+        const fraction = Math.min(1, Math.max(0, value / total));
+        // Semicircle path length for r=40 in the 100×60 viewBox (π·r).
+        const arc = Math.PI * 40;
+        return {
+            dash: (fraction * arc).toFixed(2),
+            gap: arc.toFixed(2),
+            color: this.series().at(0)?.color,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gauge" }] : /* istanbul ignore next */ []));
+    /** Dot markers (line/area) as viewBox-relative percentages, immune to the non-uniform SVG scale. */
+    lineDots = computed(() => {
+        const series = this.series().at(0);
+        if (!series || !this.dots()) {
+            return [];
+        }
+        const height = this.height();
+        const data = series.data;
+        const step = data.length > 1 ? (WIDTH - PAD * 2) / (data.length - 1) : 0;
+        const color = series.color ?? PALETTE[0];
+        return data.map((value, index) => ({
+            id: index,
+            x: ((PAD + index * step) / WIDTH) * 100,
+            y: ((height - PAD - (value / this.scaleMax()) * (height - PAD * 2)) / height) * 100,
+            color,
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lineDots" }] : /* istanbul ignore next */ []));
+    /** Evenly-spaced vertical grid line x-positions (in viewBox units). */
+    gridLines = computed(() => {
+        const n = this.gridX();
+        if (n <= 0) {
+            return [];
+        }
+        const span = WIDTH - PAD * 2;
+        return Array.from({ length: n }, (_, index) => PAD + ((index + 1) / (n + 1)) * span);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridLines" }] : /* istanbul ignore next */ []));
     paths = computed(() => this.series().map((series, seriesIndex) => {
         const data = series.data;
         const height = this.height();
         const step = data.length > 1 ? (WIDTH - PAD * 2) / (data.length - 1) : 0;
         const points = data.map((value, index) => ({
             x: PAD + index * step,
-            y: height - PAD - (value / this.max()) * (height - PAD * 2),
+            y: height - PAD - (value / this.scaleMax()) * (height - PAD * 2),
         }));
         const coords = points
             .map((point) => `${point.x.toFixed(1)},${point.y.toFixed(1)}`)
@@ -16948,51 +17155,198 @@ class BuiChart {
         };
     }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "paths" }] : /* istanbul ignore next */ []));
+    /** Donut arcs: each value in the first series becomes a ring segment. */
+    donutSegments = computed(() => {
+        const series = this.series().at(0);
+        if (!series) {
+            return [];
+        }
+        const total = this.scaleMax();
+        let accumulated = 0;
+        return series.data.map((value, index) => {
+            const fraction = Math.max(0, value) / total;
+            const segment = {
+                id: index,
+                dash: (fraction * DONUT_C).toFixed(2),
+                offset: (-accumulated * DONUT_C).toFixed(2),
+                color: series.color ?? PALETTE[index % PALETTE.length],
+            };
+            accumulated += fraction;
+            return segment;
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "donutSegments" }] : /* istanbul ignore next */ []));
     computedClass = computed(() => cn('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: BuiChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiChart, isStandalone: true, selector: "bui-chart", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", 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: { "data-slot": "chart" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
-    <svg
-      [attr.viewBox]="'0 0 ' + width + ' ' + height()"
-      [attr.height]="height()"
-      class="w-full"
-      role="img"
-      [attr.aria-label]="label()"
-      preserveAspectRatio="none"
-    >
-      @if (type() === 'bar') {
-        @for (bar of bars(); track bar.id) {
-          <rect
-            [attr.x]="bar.x"
-            [attr.y]="bar.y"
-            [attr.width]="bar.w"
-            [attr.height]="bar.h"
-            [attr.fill]="bar.color"
-            rx="3"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiChart, isStandalone: true, selector: "bui-chart", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, barLabels: { classPropertyName: "barLabels", publicName: "barLabels", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, grouped: { classPropertyName: "grouped", publicName: "grouped", isSignal: true, isRequired: false, transformFunction: null }, barColors: { classPropertyName: "barColors", publicName: "barColors", isSignal: true, isRequired: false, transformFunction: null }, track: { classPropertyName: "track", publicName: "track", isSignal: true, isRequired: false, transformFunction: null }, dots: { classPropertyName: "dots", publicName: "dots", isSignal: true, isRequired: false, transformFunction: null }, gridX: { classPropertyName: "gridX", publicName: "gridX", 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: { "data-slot": "chart" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    @if (type() === 'donut') {
+      <div class="relative mx-auto aspect-square" [style.height.px]="height()">
+        <svg
+          viewBox="0 0 100 100"
+          class="size-full -rotate-90"
+          role="img"
+          [attr.aria-label]="label()"
+        >
+          <circle
+            cx="50"
+            cy="50"
+            r="40"
+            fill="none"
+            class="stroke-muted"
+            [attr.stroke-width]="thickness()"
           />
-        }
-      } @else {
-        @for (path of paths(); track path.id) {
-          @if (type() === 'area') {
-            <path [attr.d]="path.area" [attr.fill]="path.color" fill-opacity="0.12" />
+          @for (seg of donutSegments(); track seg.id) {
+            <circle
+              cx="50"
+              cy="50"
+              r="40"
+              fill="none"
+              stroke-linecap="round"
+              [attr.stroke]="seg.color"
+              [attr.stroke-width]="thickness()"
+              [attr.stroke-dasharray]="seg.dash + ' ' + donutC"
+              [attr.stroke-dashoffset]="seg.offset"
+            />
           }
+        </svg>
+        <div class="absolute inset-0 flex flex-col items-center justify-center leading-none">
+          <ng-content />
+        </div>
+      </div>
+    } @else if (type() === 'gauge') {
+      <div class="relative mx-auto w-full" [style.maxWidth.px]="height() * 1.9">
+        <svg viewBox="0 0 100 56" class="w-full" role="img" [attr.aria-label]="label()">
           <path
-            [attr.d]="path.line"
+            d="M10,50 A40,40 0 0 1 90,50"
             fill="none"
-            [attr.stroke]="path.color"
-            stroke-width="2"
-            stroke-linejoin="round"
+            class="stroke-muted"
             stroke-linecap="round"
+            [attr.stroke-width]="thickness()"
           />
+          <path
+            d="M10,50 A40,40 0 0 1 90,50"
+            fill="none"
+            stroke-linecap="round"
+            [attr.stroke]="gauge().color"
+            [attr.stroke-width]="thickness()"
+            [attr.stroke-dasharray]="gauge().dash + ' ' + gauge().gap"
+          />
+        </svg>
+        <div class="absolute inset-x-0 bottom-0 flex flex-col items-center leading-none">
+          <ng-content />
+        </div>
+      </div>
+    } @else if (type() === 'bar' && grouped()) {
+      <div
+        class="flex items-end gap-2"
+        [style.height.px]="height()"
+        role="img"
+        [attr.aria-label]="label()"
+      >
+        @for (group of barGroups(); track group.id) {
+          <div class="flex h-full flex-1 flex-col items-center justify-end gap-2">
+            <div class="flex w-full flex-1 items-end justify-center gap-1">
+              @for (sub of group.bars; track sub.id) {
+                <div
+                  class="min-h-1 w-2 max-w-3 rounded-t-[4px] rounded-b-[2px] transition-[height]"
+                  [style.height.%]="sub.pct"
+                  [style.background]="sub.fill"
+                ></div>
+              }
+            </div>
+            @if (group.label) {
+              <span class="text-xs text-muted-foreground">{{ group.label }}</span>
+            }
+          </div>
         }
-      }
-    </svg>
-    @if (labels().length > 0) {
-      <div class="mt-1 flex justify-between text-xs text-muted-foreground">
-        @for (tick of labels(); track $index) {
-          <span>{{ tick }}</span>
+      </div>
+    } @else if (type() === 'bar') {
+      <div
+        class="flex items-end gap-1"
+        [style.height.px]="height()"
+        role="img"
+        [attr.aria-label]="label()"
+      >
+        @for (bar of barColumns(); track bar.id) {
+          <div class="flex h-full flex-1 flex-col items-center justify-end gap-2">
+            <div class="relative flex w-full flex-1 items-end justify-center">
+              @if (track()) {
+                <div class="absolute inset-y-0 w-[70%] max-w-9 rounded-[6px] bg-muted"></div>
+              }
+              <div
+                class="relative flex min-h-1 w-[70%] max-w-9 flex-col-reverse overflow-hidden rounded-t-[10px] rounded-b-[4px] transition-[height]"
+                [style.height.%]="bar.pct"
+              >
+                @for (seg of bar.segments; track seg.id) {
+                  <div [style.height.%]="seg.share" [style.background]="seg.fill"></div>
+                }
+                @if (bar.value) {
+                  <span
+                    class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm font-semibold whitespace-nowrap text-foreground"
+                    >{{ bar.value }}</span
+                  >
+                }
+              </div>
+            </div>
+            @if (bar.label) {
+              <span class="text-xs text-muted-foreground">{{ bar.label }}</span>
+            }
+          </div>
+        }
+      </div>
+    } @else {
+      <div class="relative w-full" [style.height.px]="height()">
+        <svg
+          [attr.viewBox]="'0 0 ' + width + ' ' + height()"
+          [attr.height]="height()"
+          class="w-full"
+          role="img"
+          [attr.aria-label]="label()"
+          preserveAspectRatio="none"
+        >
+          @for (x of gridLines(); track x) {
+            <line
+              [attr.x1]="x"
+              y1="2"
+              [attr.x2]="x"
+              [attr.y2]="height() - 2"
+              class="stroke-border"
+              stroke-width="1"
+              stroke-dasharray="2 3"
+              vector-effect="non-scaling-stroke"
+            />
+          }
+          @for (path of paths(); track path.id) {
+            @if (type() === 'area') {
+              <path [attr.d]="path.area" [attr.fill]="path.color" fill-opacity="0.12" />
+            }
+            <path
+              [attr.d]="path.line"
+              fill="none"
+              [attr.stroke]="path.color"
+              stroke-width="2"
+              stroke-linejoin="round"
+              stroke-linecap="round"
+            />
+          }
+        </svg>
+        @for (dot of lineDots(); track dot.id) {
+          <span
+            class="absolute size-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 bg-background"
+            [style.left.%]="dot.x"
+            [style.top.%]="dot.y"
+            [style.border-color]="dot.color"
+          ></span>
         }
       </div>
+      @if (labels().length > 0) {
+        <div class="mt-1 flex justify-between text-xs text-muted-foreground">
+          @for (tick of labels(); track $index) {
+            <span>{{ tick }}</span>
+          }
+        </div>
+      }
     }
   `, isInline: true });
 }
@@ -17002,51 +17356,177 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                     selector: 'bui-chart',
                     host: { 'data-slot': 'chart', '[class]': 'computedClass()' },
                     template: `
-    <svg
-      [attr.viewBox]="'0 0 ' + width + ' ' + height()"
-      [attr.height]="height()"
-      class="w-full"
-      role="img"
-      [attr.aria-label]="label()"
-      preserveAspectRatio="none"
-    >
-      @if (type() === 'bar') {
-        @for (bar of bars(); track bar.id) {
-          <rect
-            [attr.x]="bar.x"
-            [attr.y]="bar.y"
-            [attr.width]="bar.w"
-            [attr.height]="bar.h"
-            [attr.fill]="bar.color"
-            rx="3"
+    @if (type() === 'donut') {
+      <div class="relative mx-auto aspect-square" [style.height.px]="height()">
+        <svg
+          viewBox="0 0 100 100"
+          class="size-full -rotate-90"
+          role="img"
+          [attr.aria-label]="label()"
+        >
+          <circle
+            cx="50"
+            cy="50"
+            r="40"
+            fill="none"
+            class="stroke-muted"
+            [attr.stroke-width]="thickness()"
           />
-        }
-      } @else {
-        @for (path of paths(); track path.id) {
-          @if (type() === 'area') {
-            <path [attr.d]="path.area" [attr.fill]="path.color" fill-opacity="0.12" />
+          @for (seg of donutSegments(); track seg.id) {
+            <circle
+              cx="50"
+              cy="50"
+              r="40"
+              fill="none"
+              stroke-linecap="round"
+              [attr.stroke]="seg.color"
+              [attr.stroke-width]="thickness()"
+              [attr.stroke-dasharray]="seg.dash + ' ' + donutC"
+              [attr.stroke-dashoffset]="seg.offset"
+            />
           }
+        </svg>
+        <div class="absolute inset-0 flex flex-col items-center justify-center leading-none">
+          <ng-content />
+        </div>
+      </div>
+    } @else if (type() === 'gauge') {
+      <div class="relative mx-auto w-full" [style.maxWidth.px]="height() * 1.9">
+        <svg viewBox="0 0 100 56" class="w-full" role="img" [attr.aria-label]="label()">
           <path
-            [attr.d]="path.line"
+            d="M10,50 A40,40 0 0 1 90,50"
             fill="none"
-            [attr.stroke]="path.color"
-            stroke-width="2"
-            stroke-linejoin="round"
+            class="stroke-muted"
             stroke-linecap="round"
+            [attr.stroke-width]="thickness()"
           />
+          <path
+            d="M10,50 A40,40 0 0 1 90,50"
+            fill="none"
+            stroke-linecap="round"
+            [attr.stroke]="gauge().color"
+            [attr.stroke-width]="thickness()"
+            [attr.stroke-dasharray]="gauge().dash + ' ' + gauge().gap"
+          />
+        </svg>
+        <div class="absolute inset-x-0 bottom-0 flex flex-col items-center leading-none">
+          <ng-content />
+        </div>
+      </div>
+    } @else if (type() === 'bar' && grouped()) {
+      <div
+        class="flex items-end gap-2"
+        [style.height.px]="height()"
+        role="img"
+        [attr.aria-label]="label()"
+      >
+        @for (group of barGroups(); track group.id) {
+          <div class="flex h-full flex-1 flex-col items-center justify-end gap-2">
+            <div class="flex w-full flex-1 items-end justify-center gap-1">
+              @for (sub of group.bars; track sub.id) {
+                <div
+                  class="min-h-1 w-2 max-w-3 rounded-t-[4px] rounded-b-[2px] transition-[height]"
+                  [style.height.%]="sub.pct"
+                  [style.background]="sub.fill"
+                ></div>
+              }
+            </div>
+            @if (group.label) {
+              <span class="text-xs text-muted-foreground">{{ group.label }}</span>
+            }
+          </div>
         }
-      }
-    </svg>
-    @if (labels().length > 0) {
-      <div class="mt-1 flex justify-between text-xs text-muted-foreground">
-        @for (tick of labels(); track $index) {
-          <span>{{ tick }}</span>
+      </div>
+    } @else if (type() === 'bar') {
+      <div
+        class="flex items-end gap-1"
+        [style.height.px]="height()"
+        role="img"
+        [attr.aria-label]="label()"
+      >
+        @for (bar of barColumns(); track bar.id) {
+          <div class="flex h-full flex-1 flex-col items-center justify-end gap-2">
+            <div class="relative flex w-full flex-1 items-end justify-center">
+              @if (track()) {
+                <div class="absolute inset-y-0 w-[70%] max-w-9 rounded-[6px] bg-muted"></div>
+              }
+              <div
+                class="relative flex min-h-1 w-[70%] max-w-9 flex-col-reverse overflow-hidden rounded-t-[10px] rounded-b-[4px] transition-[height]"
+                [style.height.%]="bar.pct"
+              >
+                @for (seg of bar.segments; track seg.id) {
+                  <div [style.height.%]="seg.share" [style.background]="seg.fill"></div>
+                }
+                @if (bar.value) {
+                  <span
+                    class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm font-semibold whitespace-nowrap text-foreground"
+                    >{{ bar.value }}</span
+                  >
+                }
+              </div>
+            </div>
+            @if (bar.label) {
+              <span class="text-xs text-muted-foreground">{{ bar.label }}</span>
+            }
+          </div>
+        }
+      </div>
+    } @else {
+      <div class="relative w-full" [style.height.px]="height()">
+        <svg
+          [attr.viewBox]="'0 0 ' + width + ' ' + height()"
+          [attr.height]="height()"
+          class="w-full"
+          role="img"
+          [attr.aria-label]="label()"
+          preserveAspectRatio="none"
+        >
+          @for (x of gridLines(); track x) {
+            <line
+              [attr.x1]="x"
+              y1="2"
+              [attr.x2]="x"
+              [attr.y2]="height() - 2"
+              class="stroke-border"
+              stroke-width="1"
+              stroke-dasharray="2 3"
+              vector-effect="non-scaling-stroke"
+            />
+          }
+          @for (path of paths(); track path.id) {
+            @if (type() === 'area') {
+              <path [attr.d]="path.area" [attr.fill]="path.color" fill-opacity="0.12" />
+            }
+            <path
+              [attr.d]="path.line"
+              fill="none"
+              [attr.stroke]="path.color"
+              stroke-width="2"
+              stroke-linejoin="round"
+              stroke-linecap="round"
+            />
+          }
+        </svg>
+        @for (dot of lineDots(); track dot.id) {
+          <span
+            class="absolute size-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 bg-background"
+            [style.left.%]="dot.x"
+            [style.top.%]="dot.y"
+            [style.border-color]="dot.color"
+          ></span>
         }
       </div>
+      @if (labels().length > 0) {
+        <div class="mt-1 flex justify-between text-xs text-muted-foreground">
+          @for (tick of labels(); track $index) {
+            <span>{{ tick }}</span>
+          }
+        </div>
+      }
     }
   `,
                 }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], barLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "barLabels", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], grouped: [{ type: i0.Input, args: [{ isSignal: true, alias: "grouped", required: false }] }], barColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "barColors", required: false }] }], track: [{ type: i0.Input, args: [{ isSignal: true, alias: "track", required: false }] }], dots: [{ type: i0.Input, args: [{ isSignal: true, alias: "dots", required: false }] }], gridX: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridX", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop$2 = () => { };
@@ -19544,9 +20024,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], formattingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "formattingLabel", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], editor: [{ type: i0.ViewChild, args: ['editor', { isSignal: true }] }] } });
 
-/** A collapsible vertical navigation sidebar. Toggle width with the `open` model. */
+/**
+ * Shared state for an inset sidebar layout, owned by {@link BuiSidebarProvider} and
+ * injected by the sidebar, trigger and inset. Tracks the desktop expanded/rail state,
+ * the mobile off-canvas drawer, and a `matchMedia` breakpoint (SSR-safe).
+ */
+class BuiSidebarState {
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /** Desktop: whether the sidebar is expanded (vs. an icon rail / hidden). */
+    open = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Mobile: whether the off-canvas drawer is open. */
+    mobileOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobileOpen" }] : /* istanbul ignore next */ []));
+    /** Whether the viewport is below the `md` breakpoint. */
+    isMobile = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (!this.isBrowser || typeof globalThis.matchMedia !== 'function') {
+            return;
+        }
+        const mql = globalThis.matchMedia('(max-width: 767px)');
+        this.isMobile.set(mql.matches);
+        mql.addEventListener('change', (event) => {
+            this.isMobile.set(event.matches);
+        });
+    }
+    /** Toggle the drawer on mobile, otherwise the desktop expanded state. */
+    toggle() {
+        if (this.isMobile()) {
+            this.mobileOpen.update((value) => !value);
+        }
+        else {
+            this.open.update((value) => !value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSidebarState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSidebarState });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSidebarState, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+/**
+ * Layout wrapper for an inset sidebar shell. Provides {@link BuiSidebarState} to a
+ * {@link BuiSidebar} + {@link BuiSidebarInset}, lays them out in a row, and renders the
+ * mobile backdrop. Wrap a dashboard's sidebar and main content in this provider.
+ */
+class BuiSidebarProvider {
+    /** Shared sidebar state; exposed (via `exportAs="buiSidebar"`) for template access. */
+    state = inject(BuiSidebarState);
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('flex min-h-svh w-full', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    /** Close the mobile drawer (e.g. after a nav item is chosen). */
+    closeMobile() {
+        this.state.mobileOpen.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSidebarProvider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiSidebarProvider, isStandalone: true, selector: "bui-sidebar-provider", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "sidebar-provider" }, properties: { "class": "computedClass()" } }, providers: [BuiSidebarState], exportAs: ["buiSidebar"], ngImport: i0, template: `
+    <ng-content />
+    @if (state.isMobile() && state.mobileOpen()) {
+      <button
+        type="button"
+        aria-label="Close sidebar"
+        class="fixed inset-0 z-40 bg-black/50 md:hidden"
+        (click)="state.mobileOpen.set(false)"
+      ></button>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSidebarProvider, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-sidebar-provider',
+                    exportAs: 'buiSidebar',
+                    providers: [BuiSidebarState],
+                    host: { 'data-slot': 'sidebar-provider', '[class]': 'computedClass()' },
+                    template: `
+    <ng-content />
+    @if (state.isMobile() && state.mobileOpen()) {
+      <button
+        type="button"
+        aria-label="Close sidebar"
+        class="fixed inset-0 z-40 bg-black/50 md:hidden"
+        (click)="state.mobileOpen.set(false)"
+      ></button>
+    }
+  `,
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+/**
+ * A collapsible vertical navigation sidebar. Standalone it toggles via the `open` model;
+ * inside a {@link BuiSidebarProvider} it reads shared state and becomes a mobile off-canvas
+ * drawer + desktop icon-rail automatically.
+ */
 class BuiSidebar {
-    /** Whether the sidebar is expanded. Two-way bindable with `[(open)]`. */
+    state = inject(BuiSidebarState, { optional: true });
+    /** Whether the sidebar is expanded. Two-way bindable with `[(open)]` (standalone use). */
     open = model(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     /** Edge the sidebar is docked to, which sets its border side. */
@@ -19556,12 +20130,30 @@ class BuiSidebar {
     collapsible = input('offcanvas', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    /** Effective expanded state — provider-driven when present, else the local `open` model. */
+    expanded = computed(() => this.state?.open() ?? this.open(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
     collapsedWidth = computed(() => this.collapsible() === 'icon' ? 'w-14' : 'w-0 border-0 p-0', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "collapsedWidth" }] : /* istanbul ignore next */ []));
-    computedClass = computed(() => cn('flex h-full flex-col gap-2 overflow-hidden bg-card p-2 text-card-foreground transition-[width] duration-200', this.side() === 'left' ? 'border-r' : 'border-l', this.open() ? 'w-64' : this.collapsedWidth(), this.userClass()), /* @ts-ignore */
+    computedClass = computed(() => {
+        const base = 'group/sidebar flex flex-col gap-2 overflow-hidden bg-card p-2 text-card-foreground transition-[width,transform] duration-200';
+        const border = this.side() === 'left' ? 'border-r' : 'border-l';
+        if (this.state) {
+            // Inset shell mode: mobile off-canvas drawer, desktop sticky expand/icon-rail.
+            // All Tailwind classes are literals so the JIT scanner can see them.
+            const dock = this.side() === 'left'
+                ? 'left-0 -translate-x-full md:translate-x-0'
+                : 'right-0 translate-x-full md:translate-x-0';
+            const drawer = this.state.mobileOpen() ? 'max-md:translate-x-0' : '';
+            const collapsedDesktop = this.collapsible() === 'icon' ? 'md:w-14' : 'md:w-0 md:border-0 md:p-0';
+            const desktop = this.state.open() ? 'md:w-64' : collapsedDesktop;
+            return cn(base, border, 'fixed inset-y-0 z-50 h-svh w-64 md:sticky md:top-0 md:z-auto md:h-svh', dock, drawer, desktop, this.userClass());
+        }
+        return cn(base, border, 'h-full', this.expanded() ? 'w-64' : this.collapsedWidth(), 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: BuiSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiSidebar, isStandalone: true, selector: "bui-sidebar", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { attributes: { "data-slot": "sidebar" }, properties: { "attr.data-state": "open() ? 'expanded' : 'collapsed'", "attr.data-side": "side()", "class": "computedClass()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiSidebar, isStandalone: true, selector: "bui-sidebar", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { attributes: { "data-slot": "sidebar" }, properties: { "attr.data-state": "expanded() ? 'expanded' : 'collapsed'", "attr.data-side": "side()", "class": "computedClass()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSidebar, decorators: [{
             type: Component,
@@ -19569,13 +20161,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                     selector: 'bui-sidebar',
                     host: {
                         'data-slot': 'sidebar',
-                        '[attr.data-state]': "open() ? 'expanded' : 'collapsed'",
+                        '[attr.data-state]': "expanded() ? 'expanded' : 'collapsed'",
                         '[attr.data-side]': 'side()',
                         '[class]': 'computedClass()',
                     },
                     template: `<ng-content />`,
                 }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+/** The main content panel that sits beside a {@link BuiSidebar} inside a {@link BuiSidebarProvider}. */
+class BuiSidebarInset {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('flex min-w-0 flex-1 flex-col', 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: BuiSidebarInset, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiSidebarInset, isStandalone: true, selector: "[buiSidebarInset]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "sidebar-inset" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSidebarInset, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiSidebarInset]',
+                    host: { 'data-slot': 'sidebar-inset', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+/** A button that toggles the sidebar (desktop rail / mobile drawer) via {@link BuiSidebarState}. */
+class BuiSidebarTrigger {
+    state = inject(BuiSidebarState, { optional: true });
+    toggle() {
+        this.state?.toggle();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSidebarTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: BuiSidebarTrigger, isStandalone: true, selector: "[buiSidebarTrigger]", host: { attributes: { "data-slot": "sidebar-trigger", "type": "button" }, listeners: { "click": "toggle()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSidebarTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiSidebarTrigger]',
+                    host: { 'data-slot': 'sidebar-trigger', type: 'button', '(click)': 'toggle()' },
+                }]
+        }] });
 /** A styled, accessible item button for a {@link BuiSidebar} menu. */
 class BuiSidebarMenuButton {
     /** Whether this item is the current page; sets active styling and `aria-current`. */
@@ -20296,5 +20919,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BUI_DEFAULT_LABELS, BUI_LABELS, BuiAccent, BuiAccordion, BuiAccordionContent, BuiAccordionItem, BuiAccordionTrigger, BuiAddToCart, BuiAlert, BuiAlertDescription, BuiAlertDialogAction, BuiAlertDialogCancel, BuiAlertDialogContent, BuiAlertDialogDescription, BuiAlertDialogFooter, BuiAlertDialogHeader, BuiAlertDialogTitle, BuiAlertTitle, BuiAnimatedBeam, BuiAspectRatio, BuiAudioPlayer, BuiAurora, BuiAutocomplete, BuiAutosizeTextarea, BuiAvatar, BuiAvatarGroup, BuiBackToTop, BuiBadge, BuiBanner, BuiBentoGrid, BuiBentoItem, BuiBorderBeam, BuiBottomNavigation, BuiBottomNavigationItem, BuiBreadcrumb, BuiBreadcrumbEllipsis, BuiBreadcrumbItem, BuiBreadcrumbLink, BuiBreadcrumbList, BuiBreadcrumbPage, BuiBreadcrumbSeparator, BuiButton, BuiButtonGroup, BuiButtonGroupText, BuiCalendar, BuiCard, BuiCardAction, BuiCardContent, BuiCardDescription, BuiCardFooter, BuiCardHeader, BuiCardTitle, BuiCarousel, BuiChart, BuiChat, BuiChatMessage, BuiCheckbox, BuiCitation, BuiCodeBlock, BuiCollapsible, BuiCollapsibleContent, BuiCollapsibleTrigger, BuiColorPicker, BuiCombobox, BuiCommand, BuiComparisonSlider, BuiComparisonTable, BuiConfetti, BuiContainer, BuiContextMenu, BuiCookieConsent, BuiCopyButton, BuiCountdown, BuiDataTable, BuiDatePicker, BuiDatetimePicker, BuiDescriptionItem, BuiDescriptionList, BuiDialogContent, BuiDialogDescription, BuiDialogFooter, BuiDialogHeader, BuiDialogTitle, BuiDiffViewer, BuiDock, BuiDockItem, BuiDotPattern, BuiDrawer, BuiDropdownMenu, BuiDropdownMenuItem, BuiDropdownMenuLabel, BuiDropdownMenuSeparator, BuiEditable, BuiEmpty, BuiEmptyContent, BuiEmptyDescription, BuiEmptyHeader, BuiEmptyMedia, BuiEmptyTitle, BuiField, BuiFieldContent, BuiFieldDescription, BuiFieldError, BuiFieldGroup, BuiFieldLabel, BuiFieldLegend, BuiFieldSeparator, BuiFieldSet, BuiFieldTitle, BuiFileUpload, BuiFlipCard, BuiGallery, BuiGantt, BuiGradientText, BuiGridPattern, BuiHeatmap, BuiHoverCard, BuiHoverCardContent, BuiImage, BuiInfiniteScroll, BuiInput, BuiInputGroup, BuiInputGroupAddon, BuiInputGroupButton, BuiInputGroupInput, BuiInputGroupText, BuiInputMask, BuiInputOtp, BuiItem, BuiItemActions, BuiItemContent, BuiItemDescription, BuiItemGroup, BuiItemMedia, BuiItemTitle, BuiJsonViewer, BuiJsonViewerNode, BuiKanban, BuiKbd, BuiKbdGroup, BuiKnob, BuiLabel, BuiLink, BuiLoadingOverlay, BuiMap, BuiMarkdownEditor, BuiMarquee, BuiMasonry, BuiMentionInput, BuiMenubar, BuiMenubarTrigger, BuiMeteors, BuiMeter, BuiMiniCart, BuiNavigationMenu, BuiNotificationCenter, BuiNumberInput, BuiNumberTicker, BuiOnboardingTour, BuiOrgChart, BuiOrgChartNode, BuiPageHeader, BuiPagination, BuiPaginationContent, BuiPaginationEllipsis, BuiPaginationItem, BuiPaginationLink, BuiParallax, BuiPasswordStrength, BuiPhoneInput, BuiPopover, BuiPopoverContent, BuiPresence, BuiPrice, BuiProductCard, BuiProgress, BuiPromptInput, BuiQrCode, BuiQuantitySelector, BuiQuote, BuiRadioGroup, BuiRadioGroupItem, BuiRating, BuiReasoning, BuiRepeater, BuiResizableHandle, BuiResizablePanel, BuiResizablePanelGroup, BuiRichTextEditor, BuiScheduler, BuiScrollArea, BuiScrollspy, BuiSegmentedControl, BuiSelect, BuiSeparator, BuiSheet, BuiSidebar, BuiSidebarMenuButton, BuiSignaturePad, BuiSkeleton, BuiSlider, BuiSonner, BuiSparkline, BuiSpeedDial, BuiSpinner, BuiSpotlightCard, BuiStack, BuiStat, BuiStepper, BuiStepperItem, BuiStreamingText, BuiSwitch, BuiTabList, BuiTabPanel, BuiTabTrigger, BuiTable, BuiTableBody, BuiTableCaption, BuiTableCell, BuiTableContainer, BuiTableFooter, BuiTableHead, BuiTableHeader, BuiTableRow, BuiTabs, BuiTagsInput, BuiTerminal, BuiTextReveal, BuiTextarea, BuiThemeCustomizer, BuiTiltCard, BuiTimeField, BuiTimeline, BuiTimelineItem, BuiToaster, BuiToggle, BuiToggleGroup, BuiToggleGroupItem, BuiToolCall, BuiTooltip, BuiTooltipContent, BuiTopProgress, BuiTree, BuiTreeNode, BuiTreeTable, BuiTypewriter, BuiTypography, BuiVariantSelector, BuiVideo, BuiVisuallyHidden, THEME_TOKENS, ThemeStore, buiLabel, buttonVariants, cn, encodeQr, provideBuiLabels, toggleVariants };
+export { BUI_DEFAULT_LABELS, BUI_LABELS, BuiAccent, BuiAccordion, BuiAccordionContent, BuiAccordionItem, BuiAccordionTrigger, BuiAddToCart, BuiAlert, BuiAlertDescription, BuiAlertDialogAction, BuiAlertDialogCancel, BuiAlertDialogContent, BuiAlertDialogDescription, BuiAlertDialogFooter, BuiAlertDialogHeader, BuiAlertDialogTitle, BuiAlertTitle, BuiAnimatedBeam, BuiAspectRatio, BuiAudioPlayer, BuiAurora, BuiAutocomplete, BuiAutosizeTextarea, BuiAvatar, BuiAvatarGroup, BuiBackToTop, BuiBadge, BuiBanner, BuiBentoGrid, BuiBentoItem, BuiBorderBeam, BuiBottomNavigation, BuiBottomNavigationItem, BuiBreadcrumb, BuiBreadcrumbEllipsis, BuiBreadcrumbItem, BuiBreadcrumbLink, BuiBreadcrumbList, BuiBreadcrumbPage, BuiBreadcrumbSeparator, BuiButton, BuiButtonGroup, BuiButtonGroupText, BuiCalendar, BuiCard, BuiCardAction, BuiCardContent, BuiCardDescription, BuiCardFooter, BuiCardHeader, BuiCardTitle, BuiCarousel, BuiChart, BuiChat, BuiChatMessage, BuiCheckbox, BuiCitation, BuiCodeBlock, BuiCollapsible, BuiCollapsibleContent, BuiCollapsibleTrigger, BuiColorPicker, BuiCombobox, BuiCommand, BuiComparisonSlider, BuiComparisonTable, BuiConfetti, BuiContainer, BuiContextMenu, BuiCookieConsent, BuiCopyButton, BuiCountdown, BuiDataTable, BuiDatePicker, BuiDatetimePicker, BuiDescriptionItem, BuiDescriptionList, BuiDialogContent, BuiDialogDescription, BuiDialogFooter, BuiDialogHeader, BuiDialogTitle, BuiDiffViewer, BuiDock, BuiDockItem, BuiDotPattern, BuiDrawer, BuiDropdownMenu, BuiDropdownMenuItem, BuiDropdownMenuLabel, BuiDropdownMenuSeparator, BuiEditable, BuiEmpty, BuiEmptyContent, BuiEmptyDescription, BuiEmptyHeader, BuiEmptyMedia, BuiEmptyTitle, BuiField, BuiFieldContent, BuiFieldDescription, BuiFieldError, BuiFieldGroup, BuiFieldLabel, BuiFieldLegend, BuiFieldSeparator, BuiFieldSet, BuiFieldTitle, BuiFileUpload, BuiFlipCard, BuiGallery, BuiGantt, BuiGradientText, BuiGridPattern, BuiHeatmap, BuiHoverCard, BuiHoverCardContent, BuiIconTile, BuiImage, BuiInfiniteScroll, BuiInput, BuiInputGroup, BuiInputGroupAddon, BuiInputGroupButton, BuiInputGroupInput, BuiInputGroupText, BuiInputMask, BuiInputOtp, BuiItem, BuiItemActions, BuiItemContent, BuiItemDescription, BuiItemGroup, BuiItemMedia, BuiItemTitle, BuiJsonViewer, BuiJsonViewerNode, BuiKanban, BuiKbd, BuiKbdGroup, BuiKnob, BuiLabel, BuiLink, BuiLoadingOverlay, BuiMap, BuiMarkdownEditor, BuiMarquee, BuiMasonry, BuiMentionInput, BuiMenubar, BuiMenubarTrigger, BuiMeteors, BuiMeter, BuiMiniCart, BuiNavigationMenu, BuiNotificationCenter, BuiNumberInput, BuiNumberTicker, BuiOnboardingTour, BuiOrgChart, BuiOrgChartNode, BuiPageHeader, BuiPagination, BuiPaginationContent, BuiPaginationEllipsis, BuiPaginationItem, BuiPaginationLink, BuiParallax, BuiPasswordStrength, BuiPhoneInput, BuiPopover, BuiPopoverContent, BuiPresence, BuiPrice, BuiProductCard, BuiProgress, BuiPromptInput, BuiQrCode, BuiQuantitySelector, BuiQuote, BuiRadioGroup, BuiRadioGroupItem, BuiRating, BuiReasoning, BuiRepeater, BuiResizableHandle, BuiResizablePanel, BuiResizablePanelGroup, BuiRichTextEditor, BuiScheduler, BuiScrollArea, BuiScrollspy, BuiSegmentedControl, BuiSelect, BuiSeparator, BuiSheet, BuiSidebar, BuiSidebarInset, BuiSidebarMenuButton, BuiSidebarProvider, BuiSidebarState, BuiSidebarTrigger, BuiSignaturePad, BuiSkeleton, BuiSlider, BuiSonner, BuiSparkline, BuiSpeedDial, BuiSpinner, BuiSpotlightCard, BuiStack, BuiStat, BuiStepper, BuiStepperItem, BuiStreamingText, BuiSwitch, BuiTabList, BuiTabPanel, BuiTabTrigger, BuiTable, BuiTableBody, BuiTableCaption, BuiTableCell, BuiTableContainer, BuiTableFooter, BuiTableHead, BuiTableHeader, BuiTableRow, BuiTabs, BuiTagsInput, BuiTerminal, BuiTextReveal, BuiTextarea, BuiThemeCustomizer, BuiTiltCard, BuiTimeField, BuiTimeline, BuiTimelineItem, BuiToaster, BuiToggle, BuiToggleGroup, BuiToggleGroupItem, BuiToolCall, BuiTooltip, BuiTooltipContent, BuiTopProgress, BuiTree, BuiTreeNode, BuiTreeTable, BuiTypewriter, BuiTypography, BuiVariantSelector, BuiVideo, BuiVisuallyHidden, THEME_TOKENS, ThemeStore, buiLabel, buttonVariants, cn, encodeQr, provideBuiLabels, toggleVariants };
 //# sourceMappingURL=ng-blatui.mjs.map