ng-blatui 1.23.0 → 1.25.0

package/fesm2022/ng-blatui.mjs

@@ -479,6 +479,15 @@ class BuiProgress {
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     indeterminate = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    /** Render a circular ring instead of a linear bar. */
+    circular = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "circular" }] : /* istanbul ignore next */ []));
+    /** Diameter of the circular ring, in pixels. */
+    size = input(40, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Stroke width of the circular ring, in pixels. */
+    thickness = input(4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "thickness" }] : /* istanbul ignore next */ []));
     ariaLabel = input('Progress', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
@@ -490,11 +499,48 @@ class BuiProgress {
     ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
     indicatorTransform = computed(() => `translateX(-${100 - this.pct()}%)`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "indicatorTransform" }] : /* istanbul ignore next */ []));
-    computedClass = computed(() => cn('relative block h-2 w-full overflow-hidden rounded-full bg-primary/20', this.userClass()), /* @ts-ignore */
+    radius = computed(() => (this.size() - this.thickness()) / 2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    circumference = computed(() => 2 * Math.PI * this.radius(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "circumference" }] : /* istanbul ignore next */ []));
+    dashOffset = computed(() => this.circumference() * (1 - this.pct() / 100), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dashOffset" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn(this.circular()
+        ? 'inline-block'
+        : 'relative block h-2 w-full overflow-hidden rounded-full bg-primary/20', 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: BuiProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiProgress, isStandalone: true, selector: "bui-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "progress", "role": "progressbar", "aria-valuemin": "0", "aria-valuemax": "100" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-valuenow": "indeterminate() ? null : rounded()", "attr.aria-valuetext": "indeterminate() ? null : valueText()", "class": "computedClass()" } }, ngImport: i0, template: `
-    @if (indeterminate()) {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiProgress, isStandalone: true, selector: "bui-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, circular: { classPropertyName: "circular", publicName: "circular", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "progress", "role": "progressbar", "aria-valuemin": "0", "aria-valuemax": "100" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-valuenow": "indeterminate() ? null : rounded()", "attr.aria-valuetext": "indeterminate() ? null : valueText()", "class": "computedClass()" } }, ngImport: i0, template: `
+    @if (circular()) {
+      <svg
+        [attr.width]="size()"
+        [attr.height]="size()"
+        [attr.viewBox]="'0 0 ' + size() + ' ' + size()"
+        class="-rotate-90"
+        aria-hidden="true"
+      >
+        <circle
+          [attr.cx]="size() / 2"
+          [attr.cy]="size() / 2"
+          [attr.r]="radius()"
+          [attr.stroke-width]="thickness()"
+          fill="none"
+          class="stroke-primary/20"
+        />
+        <circle
+          data-slot="progress-indicator"
+          [attr.cx]="size() / 2"
+          [attr.cy]="size() / 2"
+          [attr.r]="radius()"
+          [attr.stroke-width]="thickness()"
+          [attr.stroke-dasharray]="circumference()"
+          [attr.stroke-dashoffset]="dashOffset()"
+          fill="none"
+          stroke-linecap="round"
+          class="stroke-primary transition-all"
+        />
+      </svg>
+    } @else if (indeterminate()) {
       <span
         data-slot="progress-indicator"
         class="absolute inset-y-0 w-2/5 animate-progress-indeterminate rounded-full bg-primary"
@@ -523,7 +569,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[class]': 'computedClass()',
                     },
                     template: `
-    @if (indeterminate()) {
+    @if (circular()) {
+      <svg
+        [attr.width]="size()"
+        [attr.height]="size()"
+        [attr.viewBox]="'0 0 ' + size() + ' ' + size()"
+        class="-rotate-90"
+        aria-hidden="true"
+      >
+        <circle
+          [attr.cx]="size() / 2"
+          [attr.cy]="size() / 2"
+          [attr.r]="radius()"
+          [attr.stroke-width]="thickness()"
+          fill="none"
+          class="stroke-primary/20"
+        />
+        <circle
+          data-slot="progress-indicator"
+          [attr.cx]="size() / 2"
+          [attr.cy]="size() / 2"
+          [attr.r]="radius()"
+          [attr.stroke-width]="thickness()"
+          [attr.stroke-dasharray]="circumference()"
+          [attr.stroke-dashoffset]="dashOffset()"
+          fill="none"
+          stroke-linecap="round"
+          class="stroke-primary transition-all"
+        />
+      </svg>
+    } @else if (indeterminate()) {
       <span
         data-slot="progress-indicator"
         class="absolute inset-y-0 w-2/5 animate-progress-indeterminate rounded-full bg-primary"
@@ -537,7 +612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], circular: [{ type: i0.Input, args: [{ isSignal: true, alias: "circular", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
  * BlatUI avatar. Renders the image when `src` is set and loads; otherwise shows
@@ -750,12 +825,20 @@ class BuiSwitch {
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     size = input('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Optional SVG path `d` shown inside the thumb when checked. */
+    iconOn = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconOn" }] : /* istanbul ignore next */ []));
+    /** Optional SVG path `d` shown inside the thumb when unchecked. */
+    iconOff = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconOff" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     state = computed(() => (this.checked() ? 'checked' : 'unchecked'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    activeIcon = computed(() => (this.checked() ? this.iconOn() : this.iconOff()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIcon" }] : /* istanbul ignore next */ []));
     computedClass = computed(() => cn(SWITCH_BASE, SWITCH_TRACK[this.size()], this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
-    thumbClass = computed(() => cn(THUMB_BASE, SWITCH_THUMB[this.size()]), /* @ts-ignore */
+    thumbClass = computed(() => cn(THUMB_BASE, 'grid place-items-center', SWITCH_THUMB[this.size()]), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "thumbClass" }] : /* istanbul ignore next */ []));
     toggle() {
         if (this.disabled()) {
@@ -764,8 +847,23 @@ class BuiSwitch {
         this.checked.update((value) => !value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiSwitch, isStandalone: true, selector: "button[buiSwitch]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { attributes: { "type": "button", "role": "switch", "data-slot": "switch" }, listeners: { "click": "toggle()" }, properties: { "attr.aria-checked": "checked()", "attr.data-state": "state()", "disabled": "disabled()", "class": "computedClass()" } }, ngImport: i0, template: `
-    <span data-slot="switch-thumb" [attr.data-state]="state()" [class]="thumbClass()"></span>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiSwitch, isStandalone: true, selector: "button[buiSwitch]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconOn: { classPropertyName: "iconOn", publicName: "iconOn", isSignal: true, isRequired: false, transformFunction: null }, iconOff: { classPropertyName: "iconOff", publicName: "iconOff", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { attributes: { "type": "button", "role": "switch", "data-slot": "switch" }, listeners: { "click": "toggle()" }, properties: { "attr.aria-checked": "checked()", "attr.data-state": "state()", "disabled": "disabled()", "class": "computedClass()" } }, ngImport: i0, template: `
+    <span data-slot="switch-thumb" [attr.data-state]="state()" [class]="thumbClass()">
+      @if (activeIcon(); as icon) {
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          class="size-full p-[3px] text-muted-foreground"
+        >
+          <path [attr.d]="icon" />
+        </svg>
+      }
+    </span>
   `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSwitch, decorators: [{
@@ -783,10 +881,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '(click)': 'toggle()',
                     },
                     template: `
-    <span data-slot="switch-thumb" [attr.data-state]="state()" [class]="thumbClass()"></span>
+    <span data-slot="switch-thumb" [attr.data-state]="state()" [class]="thumbClass()">
+      @if (activeIcon(); as icon) {
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          class="size-full p-[3px] text-muted-foreground"
+        >
+          <path [attr.d]="icon" />
+        </svg>
+      }
+    </span>
   `,
                 }]
-        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], 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"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOn", required: false }] }], iconOff: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOff", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 const TRIGGER = 'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&>svg]:text-muted-foreground [&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:translate-y-0.5 [&>svg]:transition-transform [&>svg]:duration-200 [&[aria-expanded=true]>svg]:rotate-180';
 class BuiAccordion {
@@ -1930,62 +2043,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], 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 }] }] } });
 
+const CONTENT_BASE = 'z-50 w-fit max-w-xs rounded-md px-3 py-1.5 text-xs shadow-md bg-primary text-primary-foreground';
 /** Floating tooltip bubble rendered into a CDK overlay. */
 class BuiTooltipContent {
     text = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /** Extra classes (e.g. a colour override) merged over the base bubble styles. */
+    extraClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "extraClass" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn(CONTENT_BASE, this.extraClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* 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 });
+    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 }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "class": "computedClass()" } }, 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',
-                    },
+                    host: { role: 'tooltip', '[class]': 'computedClass()' },
                     template: `{{ text() }}`,
                 }]
-        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], extraClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraClass", required: false }] }] } });
+const POSITIONS = {
+    top: { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -6 },
+    bottom: { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 6 },
+    left: { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -6 },
+    right: { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 6 },
+};
+const FALLBACK = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left',
+};
 /**
  * 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).
+ * is only created in the browser, on interaction). Configure the placement with `side`,
+ * a hover delay with `delay`, and the bubble colour with `tooltipClass`.
  */
 class BuiTooltip {
     text = input.required({ ...(ngDevMode ? { debugName: "text" } : /* istanbul ignore next */ {}), alias: 'buiTooltip' });
+    side = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    /** Delay in milliseconds before the tooltip appears on hover/focus. */
+    delay = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "delay" }] : /* istanbul ignore next */ []));
+    /** Extra classes applied to the tooltip bubble (e.g. a semantic colour). */
+    tooltipClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltipClass" }] : /* istanbul ignore next */ []));
     overlay = inject(Overlay);
     idGenerator = inject(_IdGenerator);
     host = inject(ElementRef);
     overlayRef = null;
+    timer = null;
     describedBy = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
     show() {
         if (this.overlayRef || !this.text()) {
             return;
         }
+        const open = () => {
+            this.open();
+        };
+        if (this.delay() > 0) {
+            this.timer = setTimeout(open, this.delay());
+        }
+        else {
+            open();
+        }
+    }
+    open() {
+        if (this.overlayRef) {
+            return;
+        }
+        const side = this.side();
         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 },
-        ]);
+            .withPositions([POSITIONS[side], POSITIONS[FALLBACK[side]]]);
         this.overlayRef = this.overlay.create({ positionStrategy });
         const reference = this.overlayRef.attach(new ComponentPortal(BuiTooltipContent));
         reference.setInput('text', this.text());
+        reference.setInput('extraClass', this.tooltipClass());
         const id = this.idGenerator.getId('bui-tooltip-');
         reference.location.nativeElement.id = id;
         this.describedBy.set(id);
     }
     hide() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+            this.timer = null;
+        }
         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 });
+    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 }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, tooltipClass: { classPropertyName: "tooltipClass", publicName: "tooltipClass", isSignal: true, isRequired: false, 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,
@@ -1999,7 +2154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '(focusout)': 'hide()',
                     },
                 }]
-        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "buiTooltip", required: true }] }] } });
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "buiTooltip", required: true }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], tooltipClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipClass", required: false }] }] } });
 
 /** Breadcrumb navigation landmark (`<nav aria-label="breadcrumb">`). */
 class BuiBreadcrumb {
@@ -3262,6 +3417,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+const POPOVER_POSITIONS = {
+    bottom: { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 4 },
+    top: { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -4 },
+    right: { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 4 },
+    left: { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -4 },
+};
+const POPOVER_FALLBACK = {
+    bottom: 'top',
+    top: 'bottom',
+    right: 'left',
+    left: 'right',
+};
 /**
  * Click-triggered popover on the Angular CDK overlay. Bind the content template:
  * `<button [buiPopover]="tpl">…</button>` with `<ng-template #tpl><div buiPopoverContent>…`.
@@ -3269,6 +3436,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  */
 class BuiPopover {
     content = input.required({ ...(ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {}), alias: 'buiPopover' });
+    side = input('bottom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
     overlay = inject(Overlay);
     host = inject(ElementRef);
     viewContainerRef = inject(ViewContainerRef);
@@ -3284,13 +3453,11 @@ class BuiPopover {
         }
     }
     open() {
+        const side = this.side();
         const positionStrategy = this.overlay
             .position()
             .flexibleConnectedTo(this.host)
-            .withPositions([
-            { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 4 },
-            { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -4 },
-        ]);
+            .withPositions([POPOVER_POSITIONS[side], POPOVER_POSITIONS[POPOVER_FALLBACK[side]]]);
         const overlayReference = this.overlay.create({
             positionStrategy,
             scrollStrategy: this.overlay.scrollStrategies.reposition(),
@@ -3318,7 +3485,7 @@ class BuiPopover {
         this.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiPopover, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiPopover, isStandalone: true, selector: "[buiPopover]", inputs: { content: { classPropertyName: "content", publicName: "buiPopover", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-haspopup": "dialog" }, listeners: { "click": "toggle()" }, properties: { "attr.aria-expanded": "isOpen()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiPopover, isStandalone: true, selector: "[buiPopover]", inputs: { content: { classPropertyName: "content", publicName: "buiPopover", isSignal: true, isRequired: true, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-haspopup": "dialog" }, listeners: { "click": "toggle()" }, properties: { "attr.aria-expanded": "isOpen()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiPopover, decorators: [{
             type: Directive,
@@ -3330,11 +3497,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '(click)': 'toggle()',
                     },
                 }]
-        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "buiPopover", required: true }] }] } });
+        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "buiPopover", required: true }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }] } });
 /** Styling + role for the popover content root (inside the bound template). */
 class BuiPopoverContent {
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
-    computedClass = computed(() => cn('z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none', this.userClass()), /* @ts-ignore */
+    computedClass = computed(() => cn('z-50 w-72 max-w-[calc(100vw-2rem)] rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-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: BuiPopoverContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiPopoverContent, isStandalone: true, selector: "[buiPopoverContent]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "popover-content", "role": "dialog", "tabindex": "-1" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
@@ -3654,6 +3821,9 @@ class BuiMeter {
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     tone = input('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Auto-pick the fill tone by value: the highest threshold whose `at` ≤ value wins. */
+    thresholds = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "thresholds" }] : /* istanbul ignore next */ []));
     showValue = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
     unit = input('%', /* @ts-ignore */
@@ -3668,12 +3838,24 @@ class BuiMeter {
     ...(ngDevMode ? [{ debugName: "pct" }] : /* istanbul ignore next */ []));
     valueText = computed(() => `${this.value()}${this.unit()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
-    fillClass = computed(() => TONES[this.tone()], /* @ts-ignore */
+    fillClass = computed(() => {
+        const value = this.clamped();
+        let tone = this.tone();
+        let best = -Infinity;
+        for (const threshold of this.thresholds()) {
+            if (value < threshold.at || threshold.at < best) {
+                continue;
+            }
+            best = threshold.at;
+            tone = threshold.tone;
+        }
+        return TONES[tone];
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fillClass" }] : /* istanbul ignore next */ []));
     computedClass = computed(() => cn('grid w-full 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: BuiMeter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiMeter, isStandalone: true, selector: "bui-meter", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "meter" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiMeter, isStandalone: true, selector: "bui-meter", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, thresholds: { classPropertyName: "thresholds", publicName: "thresholds", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "meter" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
     @if (label() || showValue()) {
       <div class="flex items-center justify-between gap-2 text-sm">
         @if (label()) {
@@ -3738,7 +3920,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     </div>
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], thresholds: [{ type: i0.Input, args: [{ isSignal: true, alias: "thresholds", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 const TREND_CLASS = {
     up: 'text-emerald-600 font-medium',
@@ -3757,7 +3939,24 @@ class BuiStat {
     ...(ngDevMode ? [{ debugName: "trend" }] : /* istanbul ignore next */ []));
     caption = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
+    /** Optional inline sparkline drawn from a series of numbers. */
+    sparkline = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sparkline" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    sparkPoints = computed(() => {
+        const values = this.sparkline();
+        if (values.length < 2) {
+            return '';
+        }
+        const min = Math.min(...values);
+        const max = Math.max(...values);
+        const span = max - min || 1;
+        const step = 100 / (values.length - 1);
+        return values
+            .map((value, index) => `${index * step},${30 - ((value - min) / span) * 28}`)
+            .join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sparkPoints" }] : /* istanbul ignore next */ []));
     resolvedTrend = computed(() => {
         const explicit = this.trend();
         if (explicit) {
@@ -3778,7 +3977,7 @@ class BuiStat {
     computedClass = computed(() => cn('flex flex-col gap-1 rounded-lg border bg-card p-4', 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: BuiStat, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiStat, isStandalone: true, selector: "bui-stat", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, change: { classPropertyName: "change", publicName: "change", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "stat" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiStat, isStandalone: true, selector: "bui-stat", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, change: { classPropertyName: "change", publicName: "change", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, sparkline: { classPropertyName: "sparkline", publicName: "sparkline", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "stat" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
     @if (label()) {
       <span class="text-sm font-medium text-muted-foreground">{{ label() }}</span>
     }
@@ -3791,6 +3990,24 @@ class BuiStat {
         }
       </span>
     }
+    @if (sparkPoints()) {
+      <svg
+        viewBox="0 0 100 32"
+        preserveAspectRatio="none"
+        aria-hidden="true"
+        [class]="'mt-2 h-8 w-full ' + trendClass()"
+      >
+        <polyline
+          [attr.points]="sparkPoints()"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linejoin="round"
+          stroke-linecap="round"
+          vector-effect="non-scaling-stroke"
+        />
+      </svg>
+    }
   `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiStat, decorators: [{
@@ -3811,9 +4028,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         }
       </span>
     }
+    @if (sparkPoints()) {
+      <svg
+        viewBox="0 0 100 32"
+        preserveAspectRatio="none"
+        aria-hidden="true"
+        [class]="'mt-2 h-8 w-full ' + trendClass()"
+      >
+        <polyline
+          [attr.points]="sparkPoints()"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linejoin="round"
+          stroke-linecap="round"
+          vector-effect="non-scaling-stroke"
+        />
+      </svg>
+    }
   `,
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], change: [{ type: i0.Input, args: [{ isSignal: true, alias: "change", required: false }] }], trend: [{ type: i0.Input, args: [{ isSignal: true, alias: "trend", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], change: [{ type: i0.Input, args: [{ isSignal: true, alias: "change", required: false }] }], trend: [{ type: i0.Input, args: [{ isSignal: true, alias: "trend", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], sparkline: [{ type: i0.Input, args: [{ isSignal: true, alias: "sparkline", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
  * Hover-triggered card on the Angular CDK overlay. Opens on hover/focus after a delay
@@ -4000,13 +4235,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         }], propDecorators: { code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: false }] }], filename: [{ type: i0.Input, args: [{ isSignal: true, alias: "filename", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
- * A single-value slider (`role="slider"`) with pointer drag and full keyboard support
- * (arrows, Home/End, PageUp/PageDown). Horizontal or vertical. SSR-safe — geometry is
+ * A slider (`role="slider"`) with pointer drag and full keyboard support
+ * (arrows, Home/End, PageUp/PageDown). Single value, or a two-thumb `range`
+ * (binds `value` + `endValue`). Horizontal or vertical. SSR-safe — geometry is
  * only read inside browser event handlers.
  */
 class BuiSlider {
     value = model(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Enable a second thumb; binds `endValue` as the upper handle. */
+    range = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    endValue = model(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endValue" }] : /* istanbul ignore next */ []));
     min = input(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
     max = input(100, /* @ts-ignore */
@@ -4021,12 +4262,21 @@ class BuiSlider {
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     track = viewChild.required('track');
+    active = signal('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     dragging = false;
-    pct = computed(() => {
-        const range = this.max() - this.min() || 1;
-        return ((this.value() - this.min()) / range) * 100;
-    }, /* @ts-ignore */
+    pct = computed(() => this.toPct(this.value()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pct" }] : /* istanbul ignore next */ []));
+    endPct = computed(() => this.toPct(this.endValue()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endPct" }] : /* istanbul ignore next */ []));
+    fillStart = computed(() => this.range() ? Math.min(this.pct(), this.endPct()) : 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fillStart" }] : /* istanbul ignore next */ []));
+    fillSize = computed(() => this.range() ? Math.abs(this.endPct() - this.pct()) : this.pct(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fillSize" }] : /* istanbul ignore next */ []));
+    thumbClass = computed(() => cn('absolute block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm ring-ring/50 transition-[color,box-shadow] outline-none hover:ring-4 focus-visible:ring-4', this.orientation() === 'vertical'
+        ? 'left-1/2 -translate-x-1/2 translate-y-1/2'
+        : 'top-1/2 -translate-x-1/2 -translate-y-1/2'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "thumbClass" }] : /* istanbul ignore next */ []));
     computedClass = computed(() => cn('relative flex touch-none items-center select-none data-disabled:pointer-events-none data-disabled:opacity-50', this.orientation() === 'vertical' ? 'h-40 w-fit flex-col' : 'w-full', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     onPointerDown(event) {
@@ -4034,31 +4284,38 @@ class BuiSlider {
             return;
         }
         this.dragging = true;
-        this.value.set(this.valueFromPointer(event));
+        const next = this.valueFromPointer(event);
+        if (this.range()) {
+            const toStart = Math.abs(next - this.value());
+            const toEnd = Math.abs(next - this.endValue());
+            this.active.set(toEnd < toStart ? 'end' : 'start');
+        }
+        this.setThumb(next);
     }
     onMove(event) {
         if (this.dragging) {
-            this.value.set(this.valueFromPointer(event));
+            this.setThumb(this.valueFromPointer(event));
         }
     }
     onUp() {
         this.dragging = false;
     }
-    onKeydown(event) {
+    onKeydown(event, thumb) {
         if (this.disabled()) {
             return;
         }
+        const current = thumb === 'end' ? this.endValue() : this.value();
         const big = Math.max(this.step(), (this.max() - this.min()) / 10);
         let next;
         switch (event.key) {
             case 'ArrowRight':
             case 'ArrowUp': {
-                next = this.value() + this.step();
+                next = current + this.step();
                 break;
             }
             case 'ArrowLeft':
             case 'ArrowDown': {
-                next = this.value() - this.step();
+                next = current - this.step();
                 break;
             }
             case 'Home': {
@@ -4070,11 +4327,11 @@ class BuiSlider {
                 break;
             }
             case 'PageUp': {
-                next = this.value() + big;
+                next = current + big;
                 break;
             }
             case 'PageDown': {
-                next = this.value() - big;
+                next = current - big;
                 break;
             }
             default: {
@@ -4082,7 +4339,22 @@ class BuiSlider {
             }
         }
         event.preventDefault();
-        this.value.set(this.clamp(next));
+        this.writeThumb(thumb, this.clamp(next));
+    }
+    setThumb(next) {
+        this.writeThumb(this.range() ? this.active() : 'start', next);
+    }
+    writeThumb(thumb, next) {
+        if (thumb === 'end') {
+            this.endValue.set(next);
+        }
+        else {
+            this.value.set(next);
+        }
+    }
+    toPct(value) {
+        const range = this.max() - this.min() || 1;
+        return ((value - this.min()) / range) * 100;
     }
     valueFromPointer(event) {
         const rect = this.track().nativeElement.getBoundingClientRect();
@@ -4099,7 +4371,7 @@ class BuiSlider {
         return Math.max(this.min(), Math.min(this.max(), value));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: BuiSlider, isStandalone: true, selector: "bui-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "slider" }, listeners: { "document:pointermove": "onMove($event)", "document:pointerup": "onUp()" }, properties: { "attr.data-orientation": "orientation()", "attr.data-disabled": "disabled() ? '' : null", "class": "computedClass()" } }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiSlider, isStandalone: true, selector: "bui-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, endValue: { classPropertyName: "endValue", publicName: "endValue", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", endValue: "endValueChange" }, host: { attributes: { "data-slot": "slider" }, listeners: { "document:pointermove": "onMove($event)", "document:pointerup": "onUp()" }, properties: { "attr.data-orientation": "orientation()", "attr.data-disabled": "disabled() ? '' : null", "class": "computedClass()" } }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <span
       #track
       data-slot="slider-track"
@@ -4110,31 +4382,45 @@ class BuiSlider {
       <span
         data-slot="slider-range"
         class="absolute bg-primary"
-        [class]="orientation() === 'vertical' ? 'bottom-0 w-full' : 'left-0 h-full'"
-        [style.height.%]="orientation() === 'vertical' ? pct() : null"
-        [style.width.%]="orientation() === 'vertical' ? null : pct()"
+        [class]="orientation() === 'vertical' ? 'w-full' : 'h-full'"
+        [style.bottom.%]="orientation() === 'vertical' ? fillStart() : null"
+        [style.height.%]="orientation() === 'vertical' ? fillSize() : null"
+        [style.left.%]="orientation() === 'vertical' ? null : fillStart()"
+        [style.width.%]="orientation() === 'vertical' ? null : fillSize()"
       ></span>
     </span>
     <span
       data-slot="slider-thumb"
       role="slider"
       [attr.aria-orientation]="orientation()"
-      [attr.aria-label]="ariaLabel()"
+      [attr.aria-label]="range() ? ariaLabel() + ' minimum' : ariaLabel()"
       [attr.aria-valuemin]="min()"
-      [attr.aria-valuemax]="max()"
+      [attr.aria-valuemax]="range() ? endValue() : max()"
       [attr.aria-valuenow]="value()"
       [attr.aria-disabled]="disabled()"
       [attr.tabindex]="disabled() ? -1 : 0"
-      class="absolute block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm ring-ring/50 transition-[color,box-shadow] outline-none hover:ring-4 focus-visible:ring-4"
-      [class]="
-        orientation() === 'vertical'
-          ? 'left-1/2 -translate-x-1/2 translate-y-1/2'
-          : 'top-1/2 -translate-x-1/2 -translate-y-1/2'
-      "
+      [class]="thumbClass()"
       [style.bottom.%]="orientation() === 'vertical' ? pct() : null"
       [style.left.%]="orientation() === 'vertical' ? null : pct()"
-      (keydown)="onKeydown($event)"
+      (keydown)="onKeydown($event, 'start')"
     ></span>
+    @if (range()) {
+      <span
+        data-slot="slider-thumb"
+        role="slider"
+        [attr.aria-orientation]="orientation()"
+        [attr.aria-label]="ariaLabel() + ' maximum'"
+        [attr.aria-valuemin]="value()"
+        [attr.aria-valuemax]="max()"
+        [attr.aria-valuenow]="endValue()"
+        [attr.aria-disabled]="disabled()"
+        [attr.tabindex]="disabled() ? -1 : 0"
+        [class]="thumbClass()"
+        [style.bottom.%]="orientation() === 'vertical' ? endPct() : null"
+        [style.left.%]="orientation() === 'vertical' ? null : endPct()"
+        (keydown)="onKeydown($event, 'end')"
+      ></span>
+    }
   `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSlider, decorators: [{
@@ -4160,34 +4446,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       <span
         data-slot="slider-range"
         class="absolute bg-primary"
-        [class]="orientation() === 'vertical' ? 'bottom-0 w-full' : 'left-0 h-full'"
-        [style.height.%]="orientation() === 'vertical' ? pct() : null"
-        [style.width.%]="orientation() === 'vertical' ? null : pct()"
+        [class]="orientation() === 'vertical' ? 'w-full' : 'h-full'"
+        [style.bottom.%]="orientation() === 'vertical' ? fillStart() : null"
+        [style.height.%]="orientation() === 'vertical' ? fillSize() : null"
+        [style.left.%]="orientation() === 'vertical' ? null : fillStart()"
+        [style.width.%]="orientation() === 'vertical' ? null : fillSize()"
       ></span>
     </span>
     <span
       data-slot="slider-thumb"
       role="slider"
       [attr.aria-orientation]="orientation()"
-      [attr.aria-label]="ariaLabel()"
+      [attr.aria-label]="range() ? ariaLabel() + ' minimum' : ariaLabel()"
       [attr.aria-valuemin]="min()"
-      [attr.aria-valuemax]="max()"
+      [attr.aria-valuemax]="range() ? endValue() : max()"
       [attr.aria-valuenow]="value()"
       [attr.aria-disabled]="disabled()"
       [attr.tabindex]="disabled() ? -1 : 0"
-      class="absolute block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm ring-ring/50 transition-[color,box-shadow] outline-none hover:ring-4 focus-visible:ring-4"
-      [class]="
-        orientation() === 'vertical'
-          ? 'left-1/2 -translate-x-1/2 translate-y-1/2'
-          : 'top-1/2 -translate-x-1/2 -translate-y-1/2'
-      "
+      [class]="thumbClass()"
       [style.bottom.%]="orientation() === 'vertical' ? pct() : null"
       [style.left.%]="orientation() === 'vertical' ? null : pct()"
-      (keydown)="onKeydown($event)"
+      (keydown)="onKeydown($event, 'start')"
     ></span>
+    @if (range()) {
+      <span
+        data-slot="slider-thumb"
+        role="slider"
+        [attr.aria-orientation]="orientation()"
+        [attr.aria-label]="ariaLabel() + ' maximum'"
+        [attr.aria-valuemin]="value()"
+        [attr.aria-valuemax]="max()"
+        [attr.aria-valuenow]="endValue()"
+        [attr.aria-disabled]="disabled()"
+        [attr.tabindex]="disabled() ? -1 : 0"
+        [class]="thumbClass()"
+        [style.bottom.%]="orientation() === 'vertical' ? endPct() : null"
+        [style.left.%]="orientation() === 'vertical' ? null : endPct()"
+        (keydown)="onKeydown($event, 'end')"
+      ></span>
+    }
   `,
                 }]
-        }], 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], endValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "endValue", required: false }] }, { type: i0.Output, args: ["endValueChange"] }], 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
 
 const STAR_SIZE = { sm: 'size-4', default: 'size-5', lg: 'size-6' };
 /** A star rating (`role="radiogroup"`) with hover preview and keyboard support. */
@@ -4326,7 +4626,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"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 const FIELD_HEIGHT = { sm: 'h-7 text-xs', default: 'h-8 text-sm', lg: 'h-9 text-base' };
-const BTN_SIZE = {
+const BTN_SIZE$1 = {
     sm: 'w-7 [&_svg]:size-3',
     default: 'w-8 [&_svg]:size-3.5',
     lg: 'w-9 [&_svg]:size-4',
@@ -4359,7 +4659,7 @@ class BuiQuantitySelector {
     computedClass = computed(() => cn('inline-flex items-stretch overflow-hidden rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50 dark:bg-input/30', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     btnClass(side) {
-        return cn('flex shrink-0 items-center justify-center text-muted-foreground transition-colors outline-none not-disabled:cursor-pointer hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50', side === 'e' ? 'border-e' : 'border-s', 'border-input', BTN_SIZE[this.size()], FIELD_HEIGHT[this.size()]);
+        return cn('flex shrink-0 items-center justify-center text-muted-foreground transition-colors outline-none not-disabled:cursor-pointer hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50', side === 'e' ? 'border-e' : 'border-s', 'border-input', BTN_SIZE$1[this.size()], FIELD_HEIGHT[this.size()]);
     }
     fieldClass() {
         return cn('min-w-0 border-0 bg-transparent text-center font-medium tabular-nums outline-none', FIELD_HEIGHT[this.size()], FIELD_WIDTH[this.size()]);
@@ -5435,6 +5735,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 class BuiSelect {
     value = model('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Select several options; binds `values` instead of `value`. */
+    multiple = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    values = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
     options = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     placeholder = input('Select…', /* @ts-ignore */
@@ -5448,10 +5753,24 @@ class BuiSelect {
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     active = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-    selectedLabel = computed(() => this.options().find((option) => option.value === this.value())?.label ?? '', /* @ts-ignore */
+    selectedOption = computed(() => this.options().find((option) => option.value === this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
+    selectedLabel = computed(() => {
+        if (this.multiple()) {
+            const chosen = this.values();
+            return this.options()
+                .filter((option) => chosen.includes(option.value))
+                .map((option) => option.label)
+                .join(', ');
+        }
+        return this.selectedOption()?.label ?? '';
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
     computedClass = computed(() => cn('relative block', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    isSelected(value) {
+        return this.multiple() ? this.values().includes(value) : value === this.value();
+    }
     toggle() {
         if (this.open()) {
             this.close();
@@ -5464,6 +5783,17 @@ class BuiSelect {
         if (option.disabled) {
             return;
         }
+        if (this.multiple()) {
+            const next = new Set(this.values());
+            if (next.has(option.value)) {
+                next.delete(option.value);
+            }
+            else {
+                next.add(option.value);
+            }
+            this.values.set([...next]);
+            return;
+        }
         this.value.set(option.value);
         this.close();
     }
@@ -5532,7 +5862,7 @@ class BuiSelect {
         this.open.set(false);
     }
     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 }, 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" }, host: { attributes: { "data-slot": "select" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    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" }, host: { attributes: { "data-slot": "select" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
     <button
       type="button"
       role="combobox"
@@ -5546,7 +5876,23 @@ class BuiSelect {
       (click)="toggle()"
       (keydown)="onKeydown($event)"
     >
-      <span class="truncate">{{ selectedLabel() || placeholder() }}</span>
+      <span class="flex min-w-0 items-center gap-2 truncate">
+        @if (selectedOption()?.icon; as icon) {
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+            class="size-4 shrink-0"
+          >
+            <path [attr.d]="icon" />
+          </svg>
+        }
+        {{ selectedLabel() || placeholder() }}
+      </span>
       <svg
         viewBox="0 0 24 24"
         fill="none"
@@ -5564,21 +5910,43 @@ class BuiSelect {
       <ul
         [id]="listId"
         role="listbox"
+        [attr.aria-multiselectable]="multiple() ? true : null"
         class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
       >
         @for (option of options(); track option.value; let i = $index) {
+          @if (option.group && option.group !== options()[i - 1]?.group) {
+            <li role="presentation" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+              {{ option.group }}
+            </li>
+          }
           <li
             [id]="listId + '-' + i"
             role="option"
-            [attr.aria-selected]="option.value === value()"
+            [attr.aria-selected]="isSelected(option.value)"
             [attr.aria-disabled]="option.disabled ? true : null"
             class="relative flex cursor-default items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none"
             [class]="i === active() ? 'bg-accent text-accent-foreground' : ''"
             (click)="select(option)"
             (mouseenter)="active.set(i)"
           >
-            <span class="truncate">{{ option.label }}</span>
-            @if (option.value === value()) {
+            <span class="flex min-w-0 items-center gap-2 truncate">
+              @if (option.icon; as icon) {
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                  class="size-4 shrink-0"
+                >
+                  <path [attr.d]="icon" />
+                </svg>
+              }
+              {{ option.label }}
+            </span>
+            @if (isSelected(option.value)) {
               <svg
                 viewBox="0 0 24 24"
                 fill="none"
@@ -5621,7 +5989,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       (click)="toggle()"
       (keydown)="onKeydown($event)"
     >
-      <span class="truncate">{{ selectedLabel() || placeholder() }}</span>
+      <span class="flex min-w-0 items-center gap-2 truncate">
+        @if (selectedOption()?.icon; as icon) {
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+            class="size-4 shrink-0"
+          >
+            <path [attr.d]="icon" />
+          </svg>
+        }
+        {{ selectedLabel() || placeholder() }}
+      </span>
       <svg
         viewBox="0 0 24 24"
         fill="none"
@@ -5639,21 +6023,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       <ul
         [id]="listId"
         role="listbox"
+        [attr.aria-multiselectable]="multiple() ? true : null"
         class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
       >
         @for (option of options(); track option.value; let i = $index) {
+          @if (option.group && option.group !== options()[i - 1]?.group) {
+            <li role="presentation" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+              {{ option.group }}
+            </li>
+          }
           <li
             [id]="listId + '-' + i"
             role="option"
-            [attr.aria-selected]="option.value === value()"
+            [attr.aria-selected]="isSelected(option.value)"
             [attr.aria-disabled]="option.disabled ? true : null"
             class="relative flex cursor-default items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none"
             [class]="i === active() ? 'bg-accent text-accent-foreground' : ''"
             (click)="select(option)"
             (mouseenter)="active.set(i)"
           >
-            <span class="truncate">{{ option.label }}</span>
-            @if (option.value === value()) {
+            <span class="flex min-w-0 items-center gap-2 truncate">
+              @if (option.icon; as icon) {
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                  class="size-4 shrink-0"
+                >
+                  <path [attr.d]="icon" />
+                </svg>
+              }
+              {{ option.label }}
+            </span>
+            @if (isSelected(option.value)) {
               <svg
                 viewBox="0 0 24 24"
                 fill="none"
@@ -5673,7 +6079,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"] }], 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 }] }], 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 }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 const VARIANTS$1 = {
     primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
@@ -5774,12 +6180,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 class BuiCombobox {
     value = model('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Select several options; binds `values` instead of `value`. */
+    multiple = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    values = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
     options = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     placeholder = input('Search…', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     disabled = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** When false, the field can't be typed in — it just opens the full list (select-like). */
+    searchable = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     listId = inject(_IdGenerator).getId('bui-combobox-');
     host = inject(ElementRef);
@@ -5789,11 +6203,23 @@ class BuiCombobox {
     ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     query = signal('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
-    selectedLabel = computed(() => this.options().find((option) => option.value === this.value())?.label ?? '', /* @ts-ignore */
+    selectedLabel = computed(() => {
+        if (this.multiple()) {
+            const chosen = this.values();
+            return this.options()
+                .filter((option) => chosen.includes(option.value))
+                .map((option) => option.label)
+                .join(', ');
+        }
+        return this.options().find((option) => option.value === this.value())?.label ?? '';
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
     display = computed(() => (this.open() ? this.query() : this.selectedLabel()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
     filtered = computed(() => {
+        if (!this.searchable()) {
+            return this.options();
+        }
         const query = this.query().trim().toLowerCase();
         return query === ''
             ? this.options()
@@ -5803,6 +6229,9 @@ class BuiCombobox {
     computedClass = computed(() => cn('relative block', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     onInput(event) {
+        if (!this.searchable()) {
+            return;
+        }
         this.query.set(event.target.value);
         this.active.set(0);
         this.open.set(true);
@@ -5812,7 +6241,22 @@ class BuiCombobox {
         this.active.set(0);
         this.open.set(true);
     }
+    isSelected(value) {
+        return this.multiple() ? this.values().includes(value) : value === this.value();
+    }
     select(option) {
+        if (this.multiple()) {
+            const next = new Set(this.values());
+            if (next.has(option.value)) {
+                next.delete(option.value);
+            }
+            else {
+                next.add(option.value);
+            }
+            this.values.set([...next]);
+            this.query.set('');
+            return;
+        }
         this.value.set(option.value);
         this.query.set('');
         this.open.set(false);
@@ -5862,7 +6306,7 @@ class BuiCombobox {
         this.query.set('');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCombobox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiCombobox, isStandalone: true, selector: "bui-combobox", inputs: { value: { classPropertyName: "value", publicName: "value", 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" }, host: { attributes: { "data-slot": "combobox" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiCombobox, isStandalone: true, selector: "bui-combobox", 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 }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange" }, host: { attributes: { "data-slot": "combobox" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
     <input
       type="text"
       role="combobox"
@@ -5873,6 +6317,8 @@ class BuiCombobox {
       [value]="display()"
       [placeholder]="placeholder()"
       [disabled]="disabled()"
+      [readonly]="!searchable()"
+      [class.cursor-pointer]="!searchable()"
       class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
       (input)="onInput($event)"
       (focus)="openList()"
@@ -5882,19 +6328,50 @@ class BuiCombobox {
       <ul
         [id]="listId"
         role="listbox"
+        [attr.aria-multiselectable]="multiple() ? true : null"
         class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
       >
         @for (option of filtered(); track option.value; let i = $index) {
           <li
             [id]="listId + '-' + i"
             role="option"
-            [attr.aria-selected]="option.value === value()"
-            class="relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none"
+            [attr.aria-selected]="isSelected(option.value)"
+            class="relative flex cursor-default items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none"
             [class]="i === active() ? 'bg-accent text-accent-foreground' : ''"
             (click)="select(option)"
             (mouseenter)="active.set(i)"
           >
-            {{ option.label }}
+            <span class="flex min-w-0 items-center truncate">
+              @if (option.icon; as icon) {
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                  class="mr-2 size-4 shrink-0"
+                >
+                  <path [attr.d]="icon" />
+                </svg>
+              }
+              {{ option.label }}
+            </span>
+            @if (isSelected(option.value)) {
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+                class="size-4 shrink-0"
+              >
+                <path d="M20 6 9 17l-5-5" />
+              </svg>
+            }
           </li>
         }
       </ul>
@@ -5921,6 +6398,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       [value]="display()"
       [placeholder]="placeholder()"
       [disabled]="disabled()"
+      [readonly]="!searchable()"
+      [class.cursor-pointer]="!searchable()"
       class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
       (input)="onInput($event)"
       (focus)="openList()"
@@ -5930,26 +6409,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       <ul
         [id]="listId"
         role="listbox"
+        [attr.aria-multiselectable]="multiple() ? true : null"
         class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
       >
         @for (option of filtered(); track option.value; let i = $index) {
           <li
             [id]="listId + '-' + i"
             role="option"
-            [attr.aria-selected]="option.value === value()"
-            class="relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none"
+            [attr.aria-selected]="isSelected(option.value)"
+            class="relative flex cursor-default items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none"
             [class]="i === active() ? 'bg-accent text-accent-foreground' : ''"
             (click)="select(option)"
             (mouseenter)="active.set(i)"
           >
-            {{ option.label }}
+            <span class="flex min-w-0 items-center truncate">
+              @if (option.icon; as icon) {
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                  class="mr-2 size-4 shrink-0"
+                >
+                  <path [attr.d]="icon" />
+                </svg>
+              }
+              {{ option.label }}
+            </span>
+            @if (isSelected(option.value)) {
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+                class="size-4 shrink-0"
+              >
+                <path d="M20 6 9 17l-5-5" />
+              </svg>
+            }
           </li>
         }
       </ul>
     }
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], 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 }] }], 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 }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /** A live countdown to a target time (`role="timer"`). SSR-safe — ticks only in the browser. */
 class BuiCountdown {
@@ -6981,7 +7491,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], blur: [{ type: i0.Input, args: [{ isSignal: true, alias: "blur", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-const BTN = 'border-input text-foreground hover:bg-accent inline-flex h-9 w-9 items-center justify-center border bg-transparent outline-none transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4';
+const BTN = 'border-input text-foreground hover:bg-accent inline-flex items-center justify-center border bg-transparent outline-none transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4';
+const INPUT = 'w-16 [appearance:textfield] border-y border-input bg-transparent text-center tabular-nums outline-none focus-visible:relative focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-50 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none';
+const BTN_SIZE = {
+    sm: 'size-8',
+    default: 'size-9',
+    lg: 'size-10',
+};
+const INPUT_SIZE = {
+    sm: 'h-8 text-xs',
+    default: 'h-9 text-sm',
+    lg: 'h-10 text-base',
+};
 /** A numeric stepper: − / + buttons around a number field, with min/max/step clamping. */
 class BuiNumberInput {
     value = model(0, /* @ts-ignore */
@@ -6993,10 +7514,15 @@ class BuiNumberInput {
     stepBy = input(1, { ...(ngDevMode ? { debugName: "stepBy" } : /* istanbul ignore next */ {}), alias: 'step' });
     disabled = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     ariaLabel = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
-    BTN = BTN;
+    btnClass = computed(() => cn(BTN, BTN_SIZE[this.size()]), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "btnClass" }] : /* istanbul ignore next */ []));
+    inputClass = computed(() => cn(INPUT, INPUT_SIZE[this.size()]), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
     atMin = computed(() => {
         const min = this.min();
         return min !== null && this.value() <= min;
@@ -7029,10 +7555,10 @@ class BuiNumberInput {
         this.value.set(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiNumberInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiNumberInput, isStandalone: true, selector: "bui-number-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, stepBy: { classPropertyName: "stepBy", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "number-input" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiNumberInput, isStandalone: true, selector: "bui-number-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, stepBy: { classPropertyName: "stepBy", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "number-input" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
     <button
       type="button"
-      [class]="BTN + ' rounded-l-md'"
+      [class]="btnClass() + ' rounded-l-md'"
       (click)="step(-1)"
       [disabled]="disabled() || atMin()"
       aria-label="Decrease"
@@ -7058,13 +7584,13 @@ class BuiNumberInput {
       [step]="stepBy()"
       [disabled]="disabled()"
       [attr.aria-label]="ariaLabel() || null"
-      class="h-9 w-16 [appearance:textfield] border-y border-input bg-transparent text-center text-sm tabular-nums outline-none focus-visible:relative focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-50 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+      [class]="inputClass()"
       (input)="onInput($event)"
       (change)="onInput($event)"
     />
     <button
       type="button"
-      [class]="BTN + ' rounded-r-md'"
+      [class]="btnClass() + ' rounded-r-md'"
       (click)="step(1)"
       [disabled]="disabled() || atMax()"
       aria-label="Increase"
@@ -7092,7 +7618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                     template: `
     <button
       type="button"
-      [class]="BTN + ' rounded-l-md'"
+      [class]="btnClass() + ' rounded-l-md'"
       (click)="step(-1)"
       [disabled]="disabled() || atMin()"
       aria-label="Decrease"
@@ -7118,13 +7644,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       [step]="stepBy()"
       [disabled]="disabled()"
       [attr.aria-label]="ariaLabel() || null"
-      class="h-9 w-16 [appearance:textfield] border-y border-input bg-transparent text-center text-sm tabular-nums outline-none focus-visible:relative focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-50 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+      [class]="inputClass()"
       (input)="onInput($event)"
       (change)="onInput($event)"
     />
     <button
       type="button"
-      [class]="BTN + ' rounded-r-md'"
+      [class]="btnClass() + ' rounded-r-md'"
       (click)="step(1)"
       [disabled]="disabled() || atMax()"
       aria-label="Increase"
@@ -7144,7 +7670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     </button>
   `,
                 }]
-        }], 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 }] }], stepBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], 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"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], stepBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /** A radio-group of product variants, rendered as pills or colour swatches. */
 class BuiVariantSelector {
@@ -8641,7 +9167,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-/** A styled native time input (`<input type="time">`). */
+const SELECT_CLASS = 'h-9 rounded-md border border-input bg-background px-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50';
+/** A styled time field: a native `<input type="time">`, or hour/minute selects in `select` mode. */
 class BuiTimeField {
     value = model('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -8657,53 +9184,133 @@ class BuiTimeField {
     ...(ngDevMode ? [{ debugName: "seconds" }] : /* istanbul ignore next */ []));
     disabled = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** `select` renders hour + minute dropdowns instead of a native time input. */
+    mode = input('input', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Minute step used in `select` mode. */
+    minuteStep = input(5, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
     ariaLabel = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    selectClass = SELECT_CLASS;
+    hourPart = computed(() => (this.value().split(':', 1)[0] || '12').padStart(2, '0'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourPart" }] : /* istanbul ignore next */ []));
+    minutePart = computed(() => (this.value().split(':', 2)[1] || '00').padStart(2, '0'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minutePart" }] : /* istanbul ignore next */ []));
+    hours = computed(() => Array.from({ length: 24 }, (_, hour) => String(hour).padStart(2, '0')), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hours" }] : /* istanbul ignore next */ []));
+    minutes = computed(() => {
+        const step = Math.max(1, this.minuteStep());
+        return Array.from({ length: Math.ceil(60 / step) }, (_, index) => String(index * step).padStart(2, '0'));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minutes" }] : /* istanbul ignore next */ []));
     computedClass = computed(() => cn('inline-block', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     onInput(event) {
         this.value.set(event.target.value);
     }
+    setHour(event) {
+        this.value.set(`${event.target.value}:${this.minutePart()}`);
+    }
+    setMinute(event) {
+        this.value.set(`${this.hourPart()}:${event.target.value}`);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTimeField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiTimeField, isStandalone: true, selector: "bui-time-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, seconds: { classPropertyName: "seconds", publicName: "seconds", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "time-field" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
-    <input
-      type="time"
-      [value]="value()"
-      [attr.name]="name() || null"
-      [attr.id]="id() || null"
-      [attr.min]="min() || null"
-      [attr.max]="max() || null"
-      [attr.step]="seconds() ? 1 : null"
-      [disabled]="disabled()"
-      [attr.aria-label]="ariaLabel() || null"
-      class="h-9 rounded-md border border-input bg-background px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50"
-      (input)="onInput($event)"
-    />
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTimeField, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'bui-time-field',
-                    host: { 'data-slot': 'time-field', '[class]': 'computedClass()' },
-                    template: `
-    <input
-      type="time"
-      [value]="value()"
-      [attr.name]="name() || null"
-      [attr.id]="id() || null"
-      [attr.min]="min() || null"
-      [attr.max]="max() || null"
-      [attr.step]="seconds() ? 1 : null"
-      [disabled]="disabled()"
-      [attr.aria-label]="ariaLabel() || null"
-      class="h-9 rounded-md border border-input bg-background px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50"
-      (input)="onInput($event)"
-    />
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiTimeField, isStandalone: true, selector: "bui-time-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, seconds: { classPropertyName: "seconds", publicName: "seconds", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "time-field" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    @if (mode() === 'select') {
+      <div class="inline-flex items-center gap-1">
+        <select
+          [class]="selectClass"
+          [value]="hourPart()"
+          [disabled]="disabled()"
+          [attr.aria-label]="(ariaLabel() || 'Time') + ' hours'"
+          (change)="setHour($event)"
+        >
+          @for (hour of hours(); track hour) {
+            <option [value]="hour">{{ hour }}</option>
+          }
+        </select>
+        <span aria-hidden="true" class="text-muted-foreground">:</span>
+        <select
+          [class]="selectClass"
+          [value]="minutePart()"
+          [disabled]="disabled()"
+          [attr.aria-label]="(ariaLabel() || 'Time') + ' minutes'"
+          (change)="setMinute($event)"
+        >
+          @for (minute of minutes(); track minute) {
+            <option [value]="minute">{{ minute }}</option>
+          }
+        </select>
+      </div>
+    } @else {
+      <input
+        type="time"
+        [value]="value()"
+        [attr.name]="name() || null"
+        [attr.id]="id() || null"
+        [attr.min]="min() || null"
+        [attr.max]="max() || null"
+        [attr.step]="seconds() ? 1 : null"
+        [disabled]="disabled()"
+        [attr.aria-label]="ariaLabel() || null"
+        class="h-9 rounded-md border border-input bg-background px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50"
+        (input)="onInput($event)"
+      />
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTimeField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-time-field',
+                    host: { 'data-slot': 'time-field', '[class]': 'computedClass()' },
+                    template: `
+    @if (mode() === 'select') {
+      <div class="inline-flex items-center gap-1">
+        <select
+          [class]="selectClass"
+          [value]="hourPart()"
+          [disabled]="disabled()"
+          [attr.aria-label]="(ariaLabel() || 'Time') + ' hours'"
+          (change)="setHour($event)"
+        >
+          @for (hour of hours(); track hour) {
+            <option [value]="hour">{{ hour }}</option>
+          }
+        </select>
+        <span aria-hidden="true" class="text-muted-foreground">:</span>
+        <select
+          [class]="selectClass"
+          [value]="minutePart()"
+          [disabled]="disabled()"
+          [attr.aria-label]="(ariaLabel() || 'Time') + ' minutes'"
+          (change)="setMinute($event)"
+        >
+          @for (minute of minutes(); track minute) {
+            <option [value]="minute">{{ minute }}</option>
+          }
+        </select>
+      </div>
+    } @else {
+      <input
+        type="time"
+        [value]="value()"
+        [attr.name]="name() || null"
+        [attr.id]="id() || null"
+        [attr.min]="min() || null"
+        [attr.max]="max() || null"
+        [attr.step]="seconds() ? 1 : null"
+        [disabled]="disabled()"
+        [attr.aria-label]="ariaLabel() || null"
+        class="h-9 rounded-md border border-input bg-background px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50"
+        (input)="onInput($event)"
+      />
+    }
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], seconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "seconds", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], 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"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], seconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "seconds", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /** A group of toggle buttons (single or multiple selection). Use `button[buiToggleGroupItem]`. */
 class BuiToggleGroup {
@@ -8902,6 +9509,9 @@ class BuiEditable {
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     label = input('value', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Edit in a multi-line textarea instead of a single-line input. */
+    multiline = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiline" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     editing = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []));
@@ -8936,19 +9546,33 @@ class BuiEditable {
         this.draft.set(event.target.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiEditable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiEditable, isStandalone: true, selector: "bui-editable", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "editable" }, properties: { "class": "computedClass()" } }, viewQueries: [{ propertyName: "field", first: true, predicate: ["field"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiEditable, isStandalone: true, selector: "bui-editable", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "editable" }, properties: { "class": "computedClass()" } }, viewQueries: [{ propertyName: "field", first: true, predicate: ["field"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (editing()) {
-      <input
-        #field
-        [value]="draft()"
-        [placeholder]="placeholder()"
-        [attr.aria-label]="'Edit ' + label()"
-        class="h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
-        (input)="onInput($event)"
-        (blur)="commit()"
-        (keydown.enter)="commit()"
-        (keydown.escape)="cancel()"
-      />
+      @if (multiline()) {
+        <textarea
+          #field
+          [value]="draft()"
+          [placeholder]="placeholder()"
+          [attr.aria-label]="'Edit ' + label()"
+          rows="3"
+          class="w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
+          (input)="onInput($event)"
+          (blur)="commit()"
+          (keydown.escape)="cancel()"
+        ></textarea>
+      } @else {
+        <input
+          #field
+          [value]="draft()"
+          [placeholder]="placeholder()"
+          [attr.aria-label]="'Edit ' + label()"
+          class="h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
+          (input)="onInput($event)"
+          (blur)="commit()"
+          (keydown.enter)="commit()"
+          (keydown.escape)="cancel()"
+        />
+      }
     } @else {
       <button
         type="button"
@@ -8968,17 +9592,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                     host: { 'data-slot': 'editable', '[class]': 'computedClass()' },
                     template: `
     @if (editing()) {
-      <input
-        #field
-        [value]="draft()"
-        [placeholder]="placeholder()"
-        [attr.aria-label]="'Edit ' + label()"
-        class="h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
-        (input)="onInput($event)"
-        (blur)="commit()"
-        (keydown.enter)="commit()"
-        (keydown.escape)="cancel()"
-      />
+      @if (multiline()) {
+        <textarea
+          #field
+          [value]="draft()"
+          [placeholder]="placeholder()"
+          [attr.aria-label]="'Edit ' + label()"
+          rows="3"
+          class="w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
+          (input)="onInput($event)"
+          (blur)="commit()"
+          (keydown.escape)="cancel()"
+        ></textarea>
+      } @else {
+        <input
+          #field
+          [value]="draft()"
+          [placeholder]="placeholder()"
+          [attr.aria-label]="'Edit ' + label()"
+          class="h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
+          (input)="onInput($event)"
+          (blur)="commit()"
+          (keydown.enter)="commit()"
+          (keydown.escape)="cancel()"
+        />
+      }
     } @else {
       <button
         type="button"
@@ -8991,7 +9629,7 @@ 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 }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
+        }], 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 }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
 
 /** A floating action button that expands to a stack of actions. Closes on Escape / outside click. */
 class BuiSpeedDial {
@@ -9266,7 +9904,7 @@ class BuiKnob {
       (wheel)="onWheel($event)"
       (keydown)="onKeydown($event)"
     >
-      <svg viewBox="0 0 100 100" class="size-full">
+      <svg viewBox="0 0 100 100" class="size-full" aria-hidden="true">
         <circle
           cx="50"
           cy="50"
@@ -9325,7 +9963,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       (wheel)="onWheel($event)"
       (keydown)="onKeydown($event)"
     >
-      <svg viewBox="0 0 100 100" class="size-full">
+      <svg viewBox="0 0 100 100" class="size-full" aria-hidden="true">
         <circle
           cx="50"
           cy="50"
@@ -9865,7 +10503,7 @@ class BuiConfetti {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiConfetti, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiConfetti, isStandalone: true, selector: "bui-confetti", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, spread: { classPropertyName: "spread", publicName: "spread", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "confetti" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
-    <span (click)="fire()">
+    <span (click)="fire()" (keydown.enter)="fire()" (keydown.space)="fire()">
       <ng-content>
         <button
           type="button"
@@ -9888,7 +10526,7 @@ class BuiConfetti {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiConfetti, decorators: [{
             type: Component,
             args: [{ selector: 'bui-confetti', host: { 'data-slot': 'confetti', '[class]': 'computedClass()' }, template: `
-    <span (click)="fire()">
+    <span (click)="fire()" (keydown.enter)="fire()" (keydown.space)="fire()">
       <ng-content>
         <button
           type="button"
@@ -10058,6 +10696,9 @@ class BuiInputOtp {
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     alphanumeric = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "alphanumeric" }] : /* istanbul ignore next */ []));
+    /** Insert a visual separator after every N boxes (0 = none). */
+    groupSize = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupSize" }] : /* istanbul ignore next */ []));
     ariaLabel = input('One-time password', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
@@ -10069,6 +10710,10 @@ class BuiInputOtp {
     charAt(index) {
         return this.value().charAt(index);
     }
+    isSeparator(index) {
+        const size = this.groupSize();
+        return size > 0 && (index + 1) % size === 0 && index < this.maxlength() - 1;
+    }
     onInput(index, event) {
         const element = event.target;
         const char = this.sanitize(element.value).slice(-1);
@@ -10109,7 +10754,7 @@ class BuiInputOtp {
         boxes.item(index).focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiInputOtp, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiInputOtp, isStandalone: true, selector: "bui-input-otp", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, alphanumeric: { classPropertyName: "alphanumeric", publicName: "alphanumeric", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "input-otp" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiInputOtp, isStandalone: true, selector: "bui-input-otp", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, alphanumeric: { classPropertyName: "alphanumeric", publicName: "alphanumeric", isSignal: true, isRequired: false, transformFunction: null }, groupSize: { classPropertyName: "groupSize", publicName: "groupSize", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "input-otp" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
     @for (slot of slots(); track slot) {
       <input
         type="text"
@@ -10125,6 +10770,9 @@ class BuiInputOtp {
         (paste)="onPaste($event)"
         (focus)="onFocus($event)"
       />
+      @if (isSeparator(slot)) {
+        <span aria-hidden="true" class="text-muted-foreground select-none">-</span>
+      }
     }
   `, isInline: true });
 }
@@ -10149,10 +10797,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         (paste)="onPaste($event)"
         (focus)="onFocus($event)"
       />
+      @if (isSeparator(slot)) {
+        <span aria-hidden="true" class="text-muted-foreground select-none">-</span>
+      }
     }
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], alphanumeric: [{ type: i0.Input, args: [{ isSignal: true, alias: "alphanumeric", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], 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"] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], alphanumeric: [{ type: i0.Input, args: [{ isSignal: true, alias: "alphanumeric", required: false }] }], groupSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSize", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 const COUNTRIES = [
     { code: 'US', name: 'United States', dial: '+1', flag: '🇺🇸' },
@@ -10423,7 +11074,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 class BuiHeatmap {
     data = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    /** Smaller cells + tighter gaps. */
+    compact = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    gridClass = computed(() => cn('grid grid-flow-col grid-rows-7', this.compact() ? 'gap-0.5' : 'gap-1'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridClass" }] : /* istanbul ignore next */ []));
     cells = computed(() => {
         const data = this.data();
         if (data.length > 0) {
@@ -10439,6 +11095,9 @@ class BuiHeatmap {
     ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
     computedClass = computed(() => cn('inline-block', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    cellClass(count) {
+        return cn(this.compact() ? 'size-2' : 'size-3', this.levelClass(count));
+    }
     levelClass(count) {
         if (count <= 0) {
             return 'bg-muted';
@@ -10456,12 +11115,12 @@ class BuiHeatmap {
         return 'bg-emerald-500 dark:bg-emerald-400';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiHeatmap, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiHeatmap, isStandalone: true, selector: "bui-heatmap", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "heatmap" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
-    <div class="grid grid-flow-col grid-rows-7 gap-1">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiHeatmap, isStandalone: true, selector: "bui-heatmap", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "heatmap" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    <div [class]="gridClass()">
       @for (cell of cells(); track $index) {
         <span
-          class="size-3 rounded-[2px]"
-          [class]="levelClass(cell)"
+          class="rounded-[2px]"
+          [class]="cellClass(cell)"
           [attr.title]="cell + ' contributions'"
         ></span>
       }
@@ -10474,18 +11133,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                     selector: 'bui-heatmap',
                     host: { 'data-slot': 'heatmap', '[class]': 'computedClass()' },
                     template: `
-    <div class="grid grid-flow-col grid-rows-7 gap-1">
+    <div [class]="gridClass()">
       @for (cell of cells(); track $index) {
         <span
-          class="size-3 rounded-[2px]"
-          [class]="levelClass(cell)"
+          class="rounded-[2px]"
+          [class]="cellClass(cell)"
           [attr.title]="cell + ' contributions'"
         ></span>
       }
     </div>
   `,
                 }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /** An inline citation marker that reveals a source popover on hover / focus / click. */
 class BuiCitation {
@@ -11217,6 +11876,9 @@ class BuiAudioPlayer {
     ...(ngDevMode ? [{ debugName: "artist" }] : /* istanbul ignore next */ []));
     autoplay = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "autoplay" }] : /* istanbul ignore next */ []));
+    /** Condensed layout: hides the title block and mute button. */
+    compact = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     a = viewChild('a', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "a" }] : /* istanbul ignore next */ []));
@@ -11277,7 +11939,7 @@ class BuiAudioPlayer {
         return `${minutes}:${rest.toString().padStart(2, '0')}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAudioPlayer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiAudioPlayer, isStandalone: true, selector: "bui-audio-player", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, artist: { classPropertyName: "artist", publicName: "artist", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "audio-player" }, properties: { "class": "computedClass()" } }, viewQueries: [{ propertyName: "a", first: true, predicate: ["a"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiAudioPlayer, isStandalone: true, selector: "bui-audio-player", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, artist: { classPropertyName: "artist", publicName: "artist", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "audio-player" }, properties: { "class": "computedClass()" } }, viewQueries: [{ propertyName: "a", first: true, predicate: ["a"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <audio
       #a
       [src]="src() || null"
@@ -11304,7 +11966,7 @@ class BuiAudioPlayer {
         }
       </svg>
     </button>
-    @if (title()) {
+    @if (title() && !compact()) {
       <div class="min-w-0">
         <div class="truncate text-sm font-medium">{{ title() }}</div>
         @if (artist()) {
@@ -11324,22 +11986,24 @@ class BuiAudioPlayer {
       (input)="seek($event)"
     />
     <span class="text-xs text-muted-foreground tabular-nums">{{ format(duration()) }}</span>
-    <button
-      type="button"
-      class="shrink-0 text-muted-foreground hover:text-foreground"
-      [attr.aria-label]="muted() ? 'Unmute' : 'Mute'"
-      (click)="toggleMute()"
-    >
-      <svg class="size-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-        @if (muted()) {
-          <path
-            d="M3 9v6h4l5 5V4L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v2.2l2.45 2.45c.03-.21.05-.43.05-.65z"
-          />
-        } @else {
-          <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4z" />
-        }
-      </svg>
-    </button>
+    @if (!compact()) {
+      <button
+        type="button"
+        class="shrink-0 text-muted-foreground hover:text-foreground"
+        [attr.aria-label]="muted() ? 'Unmute' : 'Mute'"
+        (click)="toggleMute()"
+      >
+        <svg class="size-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+          @if (muted()) {
+            <path
+              d="M3 9v6h4l5 5V4L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v2.2l2.45 2.45c.03-.21.05-.43.05-.65z"
+            />
+          } @else {
+            <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4z" />
+          }
+        </svg>
+      </button>
+    }
   `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAudioPlayer, decorators: [{
@@ -11374,7 +12038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         }
       </svg>
     </button>
-    @if (title()) {
+    @if (title() && !compact()) {
       <div class="min-w-0">
         <div class="truncate text-sm font-medium">{{ title() }}</div>
         @if (artist()) {
@@ -11394,25 +12058,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       (input)="seek($event)"
     />
     <span class="text-xs text-muted-foreground tabular-nums">{{ format(duration()) }}</span>
-    <button
-      type="button"
-      class="shrink-0 text-muted-foreground hover:text-foreground"
-      [attr.aria-label]="muted() ? 'Unmute' : 'Mute'"
-      (click)="toggleMute()"
-    >
-      <svg class="size-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-        @if (muted()) {
-          <path
-            d="M3 9v6h4l5 5V4L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v2.2l2.45 2.45c.03-.21.05-.43.05-.65z"
-          />
-        } @else {
-          <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4z" />
-        }
-      </svg>
-    </button>
+    @if (!compact()) {
+      <button
+        type="button"
+        class="shrink-0 text-muted-foreground hover:text-foreground"
+        [attr.aria-label]="muted() ? 'Unmute' : 'Mute'"
+        (click)="toggleMute()"
+      >
+        <svg class="size-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+          @if (muted()) {
+            <path
+              d="M3 9v6h4l5 5V4L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v2.2l2.45 2.45c.03-.21.05-.43.05-.65z"
+            />
+          } @else {
+            <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4z" />
+          }
+        </svg>
+      </button>
+    }
   `,
                 }]
-        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], artist: [{ type: i0.Input, args: [{ isSignal: true, alias: "artist", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], a: [{ type: i0.ViewChild, args: ['a', { isSignal: true }] }] } });
+        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], artist: [{ type: i0.Input, args: [{ isSignal: true, alias: "artist", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], a: [{ type: i0.ViewChild, args: ['a', { isSignal: true }] }] } });
 
 /** A canvas signature pad with draw, undo and clear. SSR-safe (canvas set up in the browser). */
 class BuiSignaturePad {
@@ -13180,16 +13846,46 @@ function pad(value) {
 function isoOf(date) {
     return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
 }
-/** A single-month date calendar. Pick a day; navigate months. SSR-safe. */
+/**
+ * A date calendar. Modes: `single` (one day), `range` (start–end), `multiple` (a set of days).
+ * Render several months side by side with `months`. SSR-safe.
+ */
 class BuiCalendar {
     value = model('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Selection mode: `single` | `range` | `multiple`. */
+    mode = input('single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Selected range (mode="range"). */
+    range = model({ start: '', end: '' }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    /** Selected days (mode="multiple"). */
+    values = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
+    /** Number of month grids to render side by side. */
+    months = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
     weekStart = input(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "weekStart" }] : /* istanbul ignore next */ []));
     minDate = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
     maxDate = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    /** Specific ISO dates (yyyy-mm-dd) to disable. */
+    disabledDates = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
+    /** Disable Saturdays and Sundays. */
+    disableWeekends = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disableWeekends" }] : /* istanbul ignore next */ []));
+    /** Show an ISO week-number column on the left. */
+    showWeekNumbers = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showWeekNumbers" }] : /* istanbul ignore next */ []));
+    /** `dropdown` swaps the month label for month + year selects (single month only). */
+    captionLayout = input('label', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "captionLayout" }] : /* istanbul ignore next */ []));
+    /** Hide days that fall outside the current month. */
+    hideOutsideDays = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideOutsideDays" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     view = signal(new Date(new Date().getFullYear(), new Date().getMonth(), 1), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
@@ -13200,47 +13896,149 @@ class BuiCalendar {
     ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
     monthLabel = computed(() => this.view().toLocaleDateString('en-US', { month: 'long', year: 'numeric' }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "monthLabel" }] : /* istanbul ignore next */ []));
-    weeks = computed(() => {
+    viewMonth = computed(() => this.view().getMonth(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewMonth" }] : /* istanbul ignore next */ []));
+    viewYear = computed(() => this.view().getFullYear(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewYear" }] : /* istanbul ignore next */ []));
+    monthOptions = computed(() => Array.from({ length: 12 }, (_, index) => ({
+        value: index,
+        label: new Date(2000, index, 1).toLocaleDateString('en-US', { month: 'long' }),
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthOptions" }] : /* istanbul ignore next */ []));
+    years = computed(() => {
+        const current = this.viewYear();
+        return Array.from({ length: 21 }, (_, index) => current - 10 + index);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "years" }] : /* istanbul ignore next */ []));
+    monthGrids = computed(() => {
         const view = this.view();
-        const year = view.getFullYear();
-        const month = view.getMonth();
-        const offset = (((new Date(year, month, 1).getDay() - this.weekStart()) % 7) + 7) % 7;
-        const today = isoOf(new Date());
-        return Array.from({ length: 6 }, (_, w) => Array.from({ length: 7 }, (_, d) => {
-            const date = new Date(year, month, 1 - offset + w * 7 + d);
-            const iso = isoOf(date);
+        return Array.from({ length: Math.max(1, this.months()) }, (_, index) => {
+            const base = new Date(view.getFullYear(), view.getMonth() + index, 1);
             return {
-                iso,
-                num: date.getDate(),
-                inMonth: date.getMonth() === month,
-                isToday: iso === today,
-                disabled: this.isDisabled(iso),
+                key: `${base.getFullYear()}-${base.getMonth()}`,
+                label: base.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }),
+                weeks: this.weeksFor(base),
             };
-        }));
+        });
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
+    ...(ngDevMode ? [{ debugName: "monthGrids" }] : /* istanbul ignore next */ []));
     computedClass = computed(() => cn('inline-block rounded-lg bg-card p-3', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    weekNum(iso) {
+        const [year, month, day] = iso.split('-').map(Number);
+        const date = new Date(Date.UTC(year, month - 1, day));
+        const dayNumber = (date.getUTCDay() + 6) % 7;
+        date.setUTCDate(date.getUTCDate() - dayNumber + 3);
+        const firstThursday = new Date(Date.UTC(date.getUTCFullYear(), 0, 4));
+        return 1 + Math.round((date.getTime() - firstThursday.getTime()) / (7 * 24 * 3600 * 1000));
+    }
     changeMonth(delta) {
         const view = this.view();
         this.view.set(new Date(view.getFullYear(), view.getMonth() + delta, 1));
     }
+    setMonth(event) {
+        const month = Number(event.target.value);
+        this.view.set(new Date(this.viewYear(), month, 1));
+    }
+    setYear(event) {
+        const year = Number(event.target.value);
+        this.view.set(new Date(year, this.viewMonth(), 1));
+    }
     select(iso) {
+        const mode = this.mode();
+        if (mode === 'range') {
+            const { start, end } = this.range();
+            if (start === '' || end !== '') {
+                this.range.set({ start: iso, end: '' });
+            }
+            else if (iso < start) {
+                this.range.set({ start: iso, end: start });
+            }
+            else {
+                this.range.set({ start, end: iso });
+            }
+            return;
+        }
+        if (mode === 'multiple') {
+            const next = new Set(this.values());
+            if (next.has(iso)) {
+                next.delete(iso);
+            }
+            else {
+                next.add(iso);
+            }
+            this.values.set([...next]);
+            return;
+        }
         this.value.set(iso);
     }
+    isSelected(iso) {
+        if (iso === '') {
+            return false;
+        }
+        switch (this.mode()) {
+            case 'range': {
+                const { start, end } = this.range();
+                return iso === start || iso === end;
+            }
+            case 'multiple': {
+                return this.values().includes(iso);
+            }
+            default: {
+                return iso === this.value();
+            }
+        }
+    }
+    inRangeMiddle(iso) {
+        if (this.mode() !== 'range') {
+            return false;
+        }
+        const { start, end } = this.range();
+        return start !== '' && end !== '' && iso > start && iso < end;
+    }
     dayClass(day) {
-        if (day.iso === this.value()) {
-            return 'bg-primary text-primary-foreground font-medium';
+        if (this.isSelected(day.iso)) {
+            return 'rounded-md bg-primary text-primary-foreground font-medium';
         }
-        return cn('hover:bg-accent disabled:pointer-events-none disabled:opacity-40', day.inMonth ? '' : 'text-muted-foreground/50', day.isToday ? 'border border-primary' : '');
+        if (this.inRangeMiddle(day.iso)) {
+            return 'bg-accent text-accent-foreground';
+        }
+        return cn('rounded-md hover:bg-accent disabled:pointer-events-none disabled:opacity-40', day.inMonth ? '' : 'text-muted-foreground/50', day.isToday ? 'border border-primary' : '');
+    }
+    weeksFor(base) {
+        const year = base.getFullYear();
+        const month = base.getMonth();
+        const offset = (((new Date(year, month, 1).getDay() - this.weekStart()) % 7) + 7) % 7;
+        const today = isoOf(new Date());
+        return Array.from({ length: 6 }, (_, w) => Array.from({ length: 7 }, (_, d) => {
+            const date = new Date(year, month, 1 - offset + w * 7 + d);
+            const iso = isoOf(date);
+            return {
+                iso,
+                num: date.getDate(),
+                inMonth: date.getMonth() === month,
+                isToday: iso === today,
+                disabled: this.isDisabled(iso, date),
+            };
+        }));
     }
-    isDisabled(iso) {
+    isDisabled(iso, date) {
         const min = this.minDate();
         const max = this.maxDate();
-        return (min !== '' && iso < min) || (max !== '' && iso > max);
+        if ((min !== '' && iso < min) || (max !== '' && iso > max)) {
+            return true;
+        }
+        if (this.disabledDates().includes(iso)) {
+            return true;
+        }
+        if (this.disableWeekends()) {
+            const day = date.getDay();
+            return day === 0 || day === 6;
+        }
+        return false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiCalendar, isStandalone: true, selector: "bui-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, weekStart: { classPropertyName: "weekStart", publicName: "weekStart", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "calendar" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiCalendar, isStandalone: true, selector: "bui-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, weekStart: { classPropertyName: "weekStart", publicName: "weekStart", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, disableWeekends: { classPropertyName: "disableWeekends", publicName: "disableWeekends", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, hideOutsideDays: { classPropertyName: "hideOutsideDays", publicName: "hideOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", range: "rangeChange", values: "valuesChange" }, host: { attributes: { "data-slot": "calendar" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
     <div class="flex items-center justify-between pb-2">
       <button
         type="button"
@@ -13261,7 +14059,34 @@ class BuiCalendar {
           <path d="m15 18-6-6 6-6" />
         </svg>
       </button>
-      <div class="text-sm font-medium" aria-live="polite">{{ monthLabel() }}</div>
+      @if (months() === 1 && captionLayout() === 'dropdown') {
+        <div class="flex items-center gap-1">
+          <select
+            aria-label="Month"
+            class="rounded-md border-0 bg-transparent py-1 text-sm font-medium outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
+            [value]="viewMonth()"
+            (change)="setMonth($event)"
+          >
+            @for (month of monthOptions(); track month.value) {
+              <option [value]="month.value">{{ month.label }}</option>
+            }
+          </select>
+          <select
+            aria-label="Year"
+            class="rounded-md border-0 bg-transparent py-1 text-sm font-medium outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
+            [value]="viewYear()"
+            (change)="setYear($event)"
+          >
+            @for (year of years(); track year) {
+              <option [value]="year">{{ year }}</option>
+            }
+          </select>
+        </div>
+      } @else if (months() === 1) {
+        <div class="text-sm font-medium" aria-live="polite">{{ monthLabel() }}</div>
+      } @else {
+        <span aria-hidden="true"></span>
+      }
       <button
         type="button"
         class="inline-flex size-7 items-center justify-center rounded-md hover:bg-accent"
@@ -13282,38 +14107,61 @@ class BuiCalendar {
         </svg>
       </button>
     </div>
-    <table role="grid" class="w-full border-collapse">
-      <thead>
-        <tr>
-          @for (weekday of weekdays(); track weekday) {
-            <th scope="col" class="size-9 text-xs font-normal text-muted-foreground">
-              {{ weekday }}
-            </th>
+    <div class="flex flex-col gap-4 sm:flex-row">
+      @for (grid of monthGrids(); track grid.key) {
+        <div>
+          @if (months() > 1) {
+            <div class="pb-2 text-center text-sm font-medium" aria-live="polite">
+              {{ grid.label }}
+            </div>
           }
-        </tr>
-      </thead>
-      <tbody>
-        @for (week of weeks(); track $index) {
-          <tr>
-            @for (day of week; track day.iso) {
-              <td class="p-0 text-center">
-                <button
-                  type="button"
-                  class="size-9 rounded-md text-sm"
-                  [class]="dayClass(day)"
-                  [attr.aria-pressed]="day.iso === value()"
-                  [attr.aria-current]="day.isToday ? 'date' : null"
-                  [disabled]="day.disabled"
-                  (click)="select(day.iso)"
-                >
-                  {{ day.num }}
-                </button>
-              </td>
-            }
-          </tr>
-        }
-      </tbody>
-    </table>
+          <table role="grid" class="w-full border-collapse">
+            <thead>
+              <tr>
+                @if (showWeekNumbers()) {
+                  <th scope="col" class="size-9 text-xs font-normal text-muted-foreground">#</th>
+                }
+                @for (weekday of weekdays(); track weekday) {
+                  <th scope="col" class="size-9 text-xs font-normal text-muted-foreground">
+                    {{ weekday }}
+                  </th>
+                }
+              </tr>
+            </thead>
+            <tbody>
+              @for (week of grid.weeks; track $index) {
+                <tr>
+                  @if (showWeekNumbers()) {
+                    <td class="size-9 text-center text-xs text-muted-foreground/70 tabular-nums">
+                      {{ weekNum(week[0].iso) }}
+                    </td>
+                  }
+                  @for (day of week; track day.iso) {
+                    <td class="p-0 text-center">
+                      @if (day.inMonth || !hideOutsideDays()) {
+                        <button
+                          type="button"
+                          class="size-9 text-sm"
+                          [class]="dayClass(day)"
+                          [attr.aria-pressed]="isSelected(day.iso)"
+                          [attr.aria-current]="day.isToday ? 'date' : null"
+                          [disabled]="day.disabled"
+                          (click)="select(day.iso)"
+                        >
+                          {{ day.num }}
+                        </button>
+                      } @else {
+                        <span class="block size-9"></span>
+                      }
+                    </td>
+                  }
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      }
+    </div>
   `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCalendar, decorators: [{
@@ -13342,7 +14190,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
           <path d="m15 18-6-6 6-6" />
         </svg>
       </button>
-      <div class="text-sm font-medium" aria-live="polite">{{ monthLabel() }}</div>
+      @if (months() === 1 && captionLayout() === 'dropdown') {
+        <div class="flex items-center gap-1">
+          <select
+            aria-label="Month"
+            class="rounded-md border-0 bg-transparent py-1 text-sm font-medium outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
+            [value]="viewMonth()"
+            (change)="setMonth($event)"
+          >
+            @for (month of monthOptions(); track month.value) {
+              <option [value]="month.value">{{ month.label }}</option>
+            }
+          </select>
+          <select
+            aria-label="Year"
+            class="rounded-md border-0 bg-transparent py-1 text-sm font-medium outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
+            [value]="viewYear()"
+            (change)="setYear($event)"
+          >
+            @for (year of years(); track year) {
+              <option [value]="year">{{ year }}</option>
+            }
+          </select>
+        </div>
+      } @else if (months() === 1) {
+        <div class="text-sm font-medium" aria-live="polite">{{ monthLabel() }}</div>
+      } @else {
+        <span aria-hidden="true"></span>
+      }
       <button
         type="button"
         class="inline-flex size-7 items-center justify-center rounded-md hover:bg-accent"
@@ -13363,66 +14238,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         </svg>
       </button>
     </div>
-    <table role="grid" class="w-full border-collapse">
-      <thead>
-        <tr>
-          @for (weekday of weekdays(); track weekday) {
-            <th scope="col" class="size-9 text-xs font-normal text-muted-foreground">
-              {{ weekday }}
-            </th>
+    <div class="flex flex-col gap-4 sm:flex-row">
+      @for (grid of monthGrids(); track grid.key) {
+        <div>
+          @if (months() > 1) {
+            <div class="pb-2 text-center text-sm font-medium" aria-live="polite">
+              {{ grid.label }}
+            </div>
           }
-        </tr>
-      </thead>
-      <tbody>
-        @for (week of weeks(); track $index) {
-          <tr>
-            @for (day of week; track day.iso) {
-              <td class="p-0 text-center">
-                <button
-                  type="button"
-                  class="size-9 rounded-md text-sm"
-                  [class]="dayClass(day)"
-                  [attr.aria-pressed]="day.iso === value()"
-                  [attr.aria-current]="day.isToday ? 'date' : null"
-                  [disabled]="day.disabled"
-                  (click)="select(day.iso)"
-                >
-                  {{ day.num }}
-                </button>
-              </td>
-            }
-          </tr>
-        }
-      </tbody>
-    </table>
+          <table role="grid" class="w-full border-collapse">
+            <thead>
+              <tr>
+                @if (showWeekNumbers()) {
+                  <th scope="col" class="size-9 text-xs font-normal text-muted-foreground">#</th>
+                }
+                @for (weekday of weekdays(); track weekday) {
+                  <th scope="col" class="size-9 text-xs font-normal text-muted-foreground">
+                    {{ weekday }}
+                  </th>
+                }
+              </tr>
+            </thead>
+            <tbody>
+              @for (week of grid.weeks; track $index) {
+                <tr>
+                  @if (showWeekNumbers()) {
+                    <td class="size-9 text-center text-xs text-muted-foreground/70 tabular-nums">
+                      {{ weekNum(week[0].iso) }}
+                    </td>
+                  }
+                  @for (day of week; track day.iso) {
+                    <td class="p-0 text-center">
+                      @if (day.inMonth || !hideOutsideDays()) {
+                        <button
+                          type="button"
+                          class="size-9 text-sm"
+                          [class]="dayClass(day)"
+                          [attr.aria-pressed]="isSelected(day.iso)"
+                          [attr.aria-current]="day.isToday ? 'date' : null"
+                          [disabled]="day.disabled"
+                          (click)="select(day.iso)"
+                        >
+                          {{ day.num }}
+                        </button>
+                      } @else {
+                        <span class="block size-9"></span>
+                      }
+                    </td>
+                  }
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      }
+    </div>
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], weekStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStart", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], 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"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }, { type: i0.Output, args: ["rangeChange"] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], weekStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStart", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], disableWeekends: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableWeekends", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], hideOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOutsideDays", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /** A date input that opens a calendar popover. */
 class BuiDatePicker {
     value = model('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** `single` (default) or `range`. */
+    mode = input('single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Selected range when mode="range". */
+    range = model({ start: '', end: '' }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    /** Month grids shown in the popover (handy for range). */
+    months = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
     placeholder = input('Pick a date', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     minDate = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
     maxDate = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    weekStart = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekStart" }] : /* istanbul ignore next */ []));
+    disabledDates = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
+    disableWeekends = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disableWeekends" }] : /* istanbul ignore next */ []));
+    showWeekNumbers = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showWeekNumbers" }] : /* istanbul ignore next */ []));
+    captionLayout = input('label', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "captionLayout" }] : /* istanbul ignore next */ []));
+    hideOutsideDays = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideOutsideDays" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     host = inject(ElementRef);
     open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    hasValue = computed(() => (this.mode() === 'range' ? this.range().start : this.value()) !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
     display = computed(() => {
-        const value = this.value();
-        if (value === '') {
-            return this.placeholder();
+        if (this.mode() === 'range') {
+            const { start, end } = this.range();
+            if (start === '') {
+                return this.placeholder();
+            }
+            return end === '' ? `${this.fmt(start)} – …` : `${this.fmt(start)} – ${this.fmt(end)}`;
         }
-        return new Date(`${value}T00:00:00`).toLocaleDateString('en-US', {
-            month: 'short',
-            day: 'numeric',
-            year: 'numeric',
-        });
+        const value = this.value();
+        return value === '' ? this.placeholder() : this.fmt(value);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
     computedClass = computed(() => cn('relative inline-block', this.userClass()), /* @ts-ignore */
@@ -13431,13 +14352,26 @@ class BuiDatePicker {
         this.value.set(iso);
         this.open.set(false);
     }
+    onRange(range) {
+        this.range.set(range);
+        if (range.start !== '' && range.end !== '') {
+            this.open.set(false);
+        }
+    }
+    fmt(iso) {
+        return new Date(`${iso}T00:00:00`).toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+        });
+    }
     onDocumentClick(event) {
         if (this.open() && !this.host.nativeElement.contains(event.target)) {
             this.open.set(false);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiDatePicker, isStandalone: true, selector: "bui-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "date-picker" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiDatePicker, isStandalone: true, selector: "bui-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, weekStart: { classPropertyName: "weekStart", publicName: "weekStart", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, disableWeekends: { classPropertyName: "disableWeekends", publicName: "disableWeekends", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, hideOutsideDays: { classPropertyName: "hideOutsideDays", publicName: "hideOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", range: "rangeChange" }, host: { attributes: { "data-slot": "date-picker" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
     <button
       type="button"
       class="flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
@@ -13457,19 +14391,29 @@ class BuiDatePicker {
         <path d="M8 2v4M16 2v4M3 10h18" />
         <rect width="18" height="18" x="3" y="4" rx="2" />
       </svg>
-      <span [class]="value() ? '' : 'text-muted-foreground'">{{ display() }}</span>
+      <span [class]="hasValue() ? '' : 'text-muted-foreground'">{{ display() }}</span>
     </button>
     @if (open()) {
       <div class="absolute z-50 mt-1 rounded-lg border bg-popover shadow-md">
         <bui-calendar
+          [mode]="mode()"
+          [months]="months()"
           [value]="value()"
+          [range]="range()"
           [minDate]="minDate()"
           [maxDate]="maxDate()"
+          [weekStart]="weekStart()"
+          [disabledDates]="disabledDates()"
+          [disableWeekends]="disableWeekends()"
+          [showWeekNumbers]="showWeekNumbers()"
+          [captionLayout]="captionLayout()"
+          [hideOutsideDays]="hideOutsideDays()"
           (valueChange)="onPick($event)"
+          (rangeChange)="onRange($event)"
         />
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: BuiCalendar, selector: "bui-calendar", inputs: ["value", "weekStart", "minDate", "maxDate", "class"], outputs: ["valueChange"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: BuiCalendar, selector: "bui-calendar", inputs: ["value", "mode", "range", "values", "months", "weekStart", "minDate", "maxDate", "disabledDates", "disableWeekends", "showWeekNumbers", "captionLayout", "hideOutsideDays", "class"], outputs: ["valueChange", "rangeChange", "valuesChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDatePicker, decorators: [{
             type: Component,
@@ -13501,35 +14445,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         <path d="M8 2v4M16 2v4M3 10h18" />
         <rect width="18" height="18" x="3" y="4" rx="2" />
       </svg>
-      <span [class]="value() ? '' : 'text-muted-foreground'">{{ display() }}</span>
+      <span [class]="hasValue() ? '' : 'text-muted-foreground'">{{ display() }}</span>
     </button>
     @if (open()) {
       <div class="absolute z-50 mt-1 rounded-lg border bg-popover shadow-md">
         <bui-calendar
+          [mode]="mode()"
+          [months]="months()"
           [value]="value()"
+          [range]="range()"
           [minDate]="minDate()"
           [maxDate]="maxDate()"
+          [weekStart]="weekStart()"
+          [disabledDates]="disabledDates()"
+          [disableWeekends]="disableWeekends()"
+          [showWeekNumbers]="showWeekNumbers()"
+          [captionLayout]="captionLayout()"
+          [hideOutsideDays]="hideOutsideDays()"
           (valueChange)="onPick($event)"
+          (rangeChange)="onRange($event)"
         />
       </div>
     }
   `,
                 }]
-        }], 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 }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], 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"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }, { type: i0.Output, args: ["rangeChange"] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], weekStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStart", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], disableWeekends: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableWeekends", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], hideOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOutsideDays", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /** A slide carousel. Project slides as direct children; arrows + dots navigate. SSR-safe. */
 class BuiCarousel {
     index = model(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Slides visible at once (e.g. 2 or 3 for a multi-item carousel). */
+    perView = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "perView" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     track = viewChild('track', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "track" }] : /* istanbul ignore next */ []));
     count = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
-    dots = computed(() => Array.from({ length: this.count() }, (_, index) => index), /* @ts-ignore */
+    vertical = computed(() => this.orientation() === 'vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "vertical" }] : /* istanbul ignore next */ []));
+    maxIndex = computed(() => Math.max(0, this.count() - this.perView()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxIndex" }] : /* istanbul ignore next */ []));
+    dots = computed(() => Array.from({ length: this.maxIndex() + 1 }, (_, index) => index), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dots" }] : /* istanbul ignore next */ []));
     computedClass = computed(() => cn('relative block', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    viewportClass = computed(() => cn('overflow-hidden rounded-lg', this.vertical() && 'h-full'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportClass" }] : /* istanbul ignore next */ []));
+    trackClass = computed(() => cn('flex transition-transform duration-300 [&>*]:shrink-0 [&>*]:grow-0', this.vertical()
+        ? 'h-full flex-col [&>*]:h-[calc(100%/var(--bui-per,1))] [&>*]:w-full'
+        : '[&>*]:w-[calc(100%/var(--bui-per,1))]'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackClass" }] : /* istanbul ignore next */ []));
+    trackTransform = computed(() => {
+        const offset = this.index() * (100 / this.perView());
+        return this.vertical() ? `translateY(-${offset}%)` : `translateX(-${offset}%)`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackTransform" }] : /* istanbul ignore next */ []));
+    prevClass = computed(() => cn('absolute inline-flex size-8 items-center justify-center rounded-full border bg-background shadow-sm disabled:opacity-40', this.vertical() ? 'top-2 left-1/2 -translate-x-1/2' : 'start-2 top-1/2 -translate-y-1/2'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prevClass" }] : /* istanbul ignore next */ []));
+    nextClass = computed(() => cn('absolute inline-flex size-8 items-center justify-center rounded-full border bg-background shadow-sm disabled:opacity-40', this.vertical() ? 'bottom-2 left-1/2 -translate-x-1/2' : 'end-2 top-1/2 -translate-y-1/2'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextClass" }] : /* istanbul ignore next */ []));
     constructor() {
         afterNextRender(() => {
             this.count.set(this.track()?.nativeElement.children.length ?? 0);
@@ -13539,22 +14517,23 @@ class BuiCarousel {
         this.index.set(Math.max(0, this.index() - 1));
     }
     next() {
-        this.index.set(Math.min(this.count() - 1, this.index() + 1));
+        this.index.set(Math.min(this.maxIndex(), this.index() + 1));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCarousel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiCarousel, isStandalone: true, selector: "bui-carousel", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange" }, host: { attributes: { "data-slot": "carousel", "role": "region", "aria-roledescription": "carousel" }, properties: { "class": "computedClass()" } }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="overflow-hidden rounded-lg">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiCarousel, isStandalone: true, selector: "bui-carousel", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, perView: { classPropertyName: "perView", publicName: "perView", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange" }, host: { attributes: { "data-slot": "carousel", "role": "region", "aria-roledescription": "carousel" }, properties: { "class": "computedClass()" } }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div [class]="viewportClass()">
       <div
         #track
-        class="flex transition-transform duration-300 [&>*]:w-full [&>*]:shrink-0 [&>*]:grow-0"
-        [style.transform]="'translateX(-' + index() * 100 + '%)'"
+        [class]="trackClass()"
+        [style.--bui-per]="perView()"
+        [style.transform]="trackTransform()"
       >
         <ng-content />
       </div>
     </div>
     <button
       type="button"
-      class="absolute start-2 top-1/2 inline-flex size-8 -translate-y-1/2 items-center justify-center rounded-full border bg-background shadow-sm disabled:opacity-40"
+      [class]="prevClass()"
       [disabled]="index() === 0"
       aria-label="Previous slide"
       (click)="prev()"
@@ -13569,13 +14548,13 @@ class BuiCarousel {
         stroke-linejoin="round"
         aria-hidden="true"
       >
-        <path d="m15 18-6-6 6-6" />
+        <path [attr.d]="vertical() ? 'm18 15-6-6-6 6' : 'm15 18-6-6 6-6'" />
       </svg>
     </button>
     <button
       type="button"
-      class="absolute end-2 top-1/2 inline-flex size-8 -translate-y-1/2 items-center justify-center rounded-full border bg-background shadow-sm disabled:opacity-40"
-      [disabled]="index() >= count() - 1"
+      [class]="nextClass()"
+      [disabled]="index() >= maxIndex()"
       aria-label="Next slide"
       (click)="next()"
     >
@@ -13589,10 +14568,10 @@ class BuiCarousel {
         stroke-linejoin="round"
         aria-hidden="true"
       >
-        <path d="m9 18 6-6-6-6" />
+        <path [attr.d]="vertical() ? 'm6 9 6 6 6-6' : 'm9 18 6-6-6-6'" />
       </svg>
     </button>
-    @if (count() > 1) {
+    @if (maxIndex() > 0) {
       <div class="mt-3 flex justify-center gap-1.5">
         @for (dot of dots(); track dot) {
           <button
@@ -13619,18 +14598,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[class]': 'computedClass()',
                     },
                     template: `
-    <div class="overflow-hidden rounded-lg">
+    <div [class]="viewportClass()">
       <div
         #track
-        class="flex transition-transform duration-300 [&>*]:w-full [&>*]:shrink-0 [&>*]:grow-0"
-        [style.transform]="'translateX(-' + index() * 100 + '%)'"
+        [class]="trackClass()"
+        [style.--bui-per]="perView()"
+        [style.transform]="trackTransform()"
       >
         <ng-content />
       </div>
     </div>
     <button
       type="button"
-      class="absolute start-2 top-1/2 inline-flex size-8 -translate-y-1/2 items-center justify-center rounded-full border bg-background shadow-sm disabled:opacity-40"
+      [class]="prevClass()"
       [disabled]="index() === 0"
       aria-label="Previous slide"
       (click)="prev()"
@@ -13645,13 +14625,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         stroke-linejoin="round"
         aria-hidden="true"
       >
-        <path d="m15 18-6-6 6-6" />
+        <path [attr.d]="vertical() ? 'm18 15-6-6-6 6' : 'm15 18-6-6 6-6'" />
       </svg>
     </button>
     <button
       type="button"
-      class="absolute end-2 top-1/2 inline-flex size-8 -translate-y-1/2 items-center justify-center rounded-full border bg-background shadow-sm disabled:opacity-40"
-      [disabled]="index() >= count() - 1"
+      [class]="nextClass()"
+      [disabled]="index() >= maxIndex()"
       aria-label="Next slide"
       (click)="next()"
     >
@@ -13665,10 +14645,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         stroke-linejoin="round"
         aria-hidden="true"
       >
-        <path d="m9 18 6-6-6-6" />
+        <path [attr.d]="vertical() ? 'm6 9 6 6 6-6' : 'm9 18 6-6-6-6'" />
       </svg>
     </button>
-    @if (count() > 1) {
+    @if (maxIndex() > 0) {
       <div class="mt-3 flex justify-center gap-1.5">
         @for (dot of dots(); track dot) {
           <button
@@ -13684,7 +14664,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     }
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }, { type: i0.Output, args: ["indexChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }, { type: i0.Output, args: ["indexChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], perView: [{ type: i0.Input, args: [{ isSignal: true, alias: "perView", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
 
 /** A command palette: a filterable, keyboard-navigable list of grouped actions. */
 class BuiCommand {
@@ -13692,8 +14672,16 @@ class BuiCommand {
     ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
     placeholder = input('Type a command or search…', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Render a checkmark column; activating an item toggles its checked state. */
+    checkable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checkable" }] : /* istanbul ignore next */ []));
     selected = output();
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    checkedValues = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checkedValues" }] : /* istanbul ignore next */ []));
+    isChecked(item) {
+        return this.checkedValues().has(item.value ?? item.label);
+    }
     listId = inject(_IdGenerator).getId('bui-command-');
     query = signal('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
@@ -13752,10 +14740,21 @@ class BuiCommand {
         }
     }
     choose(item) {
-        this.selected.emit(item);
+        if (this.checkable()) {
+            const key = item.value ?? item.label;
+            const next = new Set(this.checkedValues());
+            if (next.has(key)) {
+                next.delete(key);
+            }
+            else {
+                next.add(key);
+            }
+            this.checkedValues.set(next);
+        }
+        this.selected.emit(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCommand, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiCommand, isStandalone: true, selector: "bui-command", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { attributes: { "data-slot": "command" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiCommand, isStandalone: true, selector: "bui-command", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, checkable: { classPropertyName: "checkable", publicName: "checkable", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { attributes: { "data-slot": "command" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
     <div class="flex items-center gap-2 border-b px-3">
       <svg
         class="size-4 shrink-0 text-muted-foreground"
@@ -13799,6 +14798,24 @@ class BuiCommand {
             (click)="choose(row.item!)"
             (mouseenter)="active.set(row.itemIndex)"
           >
+            @if (checkable()) {
+              <span class="flex w-4 shrink-0 justify-center">
+                @if (isChecked(row.item!)) {
+                  <svg
+                    class="size-4"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                  >
+                    <path d="M20 6 9 17l-5-5" />
+                  </svg>
+                }
+              </span>
+            }
             <span>{{ row.label }}</span>
             @if (row.item?.shortcut) {
               <kbd class="ms-auto text-xs text-muted-foreground">{{ row.item?.shortcut }}</kbd>
@@ -13863,6 +14880,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
             (click)="choose(row.item!)"
             (mouseenter)="active.set(row.itemIndex)"
           >
+            @if (checkable()) {
+              <span class="flex w-4 shrink-0 justify-center">
+                @if (isChecked(row.item!)) {
+                  <svg
+                    class="size-4"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                  >
+                    <path d="M20 6 9 17l-5-5" />
+                  </svg>
+                }
+              </span>
+            }
             <span>{{ row.label }}</span>
             @if (row.item?.shortcut) {
               <kbd class="ms-auto text-xs text-muted-foreground">{{ row.item?.shortcut }}</kbd>
@@ -13878,7 +14913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     </ul>
   `,
                 }]
-        }], propDecorators: { groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], checkable: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkable", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /** A right-click context menu. Project the target; pass menu `items`. */
 class BuiContextMenu {
@@ -13917,6 +14952,64 @@ class BuiContextMenu {
         @for (item of items(); track $index) {
           @if (item.separator) {
             <div role="separator" class="-mx-1 my-1 h-px bg-border"></div>
+          } @else if (item.children && item.children.length > 0) {
+            <div class="group/sub relative">
+              <button
+                type="button"
+                role="menuitem"
+                aria-haspopup="menu"
+                class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent focus-visible:bg-accent"
+              >
+                @if (item.icon) {
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                    class="size-4 shrink-0"
+                  >
+                    <path [attr.d]="item.icon" />
+                  </svg>
+                }
+                <span>{{ item.label }}</span>
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                  class="ms-auto size-4 opacity-60"
+                >
+                  <path d="m9 18 6-6-6-6" />
+                </svg>
+              </button>
+              <div
+                role="menu"
+                class="absolute top-0 left-full z-50 ml-1 hidden min-w-44 rounded-md border bg-popover p-1 text-popover-foreground shadow-md group-hover/sub:block"
+              >
+                @for (child of item.children; track $index) {
+                  <button
+                    type="button"
+                    role="menuitem"
+                    class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent focus-visible:bg-accent"
+                    [class.text-destructive]="child.danger"
+                    (click)="select(child)"
+                  >
+                    <span>{{ child.label }}</span>
+                    @if (child.shortcut) {
+                      <span class="ms-auto text-xs text-muted-foreground">{{
+                        child.shortcut
+                      }}</span>
+                    }
+                  </button>
+                }
+              </div>
+            </div>
           } @else {
             <button
               type="button"
@@ -13925,6 +15018,20 @@ class BuiContextMenu {
               [class.text-destructive]="item.danger"
               (click)="select(item)"
             >
+              @if (item.icon) {
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                  class="size-4 shrink-0"
+                >
+                  <path [attr.d]="item.icon" />
+                </svg>
+              }
               <span>{{ item.label }}</span>
               @if (item.shortcut) {
                 <span class="ms-auto text-xs text-muted-foreground">{{ item.shortcut }}</span>
@@ -13959,6 +15066,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         @for (item of items(); track $index) {
           @if (item.separator) {
             <div role="separator" class="-mx-1 my-1 h-px bg-border"></div>
+          } @else if (item.children && item.children.length > 0) {
+            <div class="group/sub relative">
+              <button
+                type="button"
+                role="menuitem"
+                aria-haspopup="menu"
+                class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent focus-visible:bg-accent"
+              >
+                @if (item.icon) {
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                    class="size-4 shrink-0"
+                  >
+                    <path [attr.d]="item.icon" />
+                  </svg>
+                }
+                <span>{{ item.label }}</span>
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                  class="ms-auto size-4 opacity-60"
+                >
+                  <path d="m9 18 6-6-6-6" />
+                </svg>
+              </button>
+              <div
+                role="menu"
+                class="absolute top-0 left-full z-50 ml-1 hidden min-w-44 rounded-md border bg-popover p-1 text-popover-foreground shadow-md group-hover/sub:block"
+              >
+                @for (child of item.children; track $index) {
+                  <button
+                    type="button"
+                    role="menuitem"
+                    class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent focus-visible:bg-accent"
+                    [class.text-destructive]="child.danger"
+                    (click)="select(child)"
+                  >
+                    <span>{{ child.label }}</span>
+                    @if (child.shortcut) {
+                      <span class="ms-auto text-xs text-muted-foreground">{{
+                        child.shortcut
+                      }}</span>
+                    }
+                  </button>
+                }
+              </div>
+            </div>
           } @else {
             <button
               type="button"
@@ -13967,6 +15132,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
               [class.text-destructive]="item.danger"
               (click)="select(item)"
             >
+              @if (item.icon) {
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                  class="size-4 shrink-0"
+                >
+                  <path [attr.d]="item.icon" />
+                </svg>
+              }
               <span>{{ item.label }}</span>
               @if (item.shortcut) {
                 <span class="ms-auto text-xs text-muted-foreground">{{ item.shortcut }}</span>
@@ -14472,28 +15651,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 class BuiDatetimePicker {
     value = model('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** `single` (default) or `range`. */
+    mode = input('single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Selected range when mode="range" — start/end as `YYYY-MM-DDTHH:mm`, sharing one time. */
+    range = model({ start: '', end: '' }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    /** Month grids shown in the popover (handy for range). */
+    months = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
     placeholder = input('Pick date & time', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    minDate = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    maxDate = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    captionLayout = input('label', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "captionLayout" }] : /* istanbul ignore next */ []));
+    seconds = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seconds" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     host = inject(ElementRef);
     open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     datePart = computed(() => this.value().split('T', 1).at(0) ?? '', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "datePart" }] : /* istanbul ignore next */ []));
-    timePart = computed(() => this.value().split('T', 2).at(1) ?? '12:00', /* @ts-ignore */
+    timePart = computed(() => {
+        const source = this.mode() === 'range' ? this.range().start : this.value();
+        return source.split('T', 2).at(1) ?? '12:00';
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "timePart" }] : /* istanbul ignore next */ []));
+    calRange = computed(() => {
+        const { start, end } = this.range();
+        return { start: start.split('T', 1).at(0) ?? '', end: end.split('T', 1).at(0) ?? '' };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calRange" }] : /* istanbul ignore next */ []));
+    hasValue = computed(() => (this.mode() === 'range' ? this.range().start : this.value()) !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
     display = computed(() => {
-        const value = this.value();
-        if (value === '') {
-            return this.placeholder();
+        if (this.mode() === 'range') {
+            const { start, end } = this.range();
+            if (start === '') {
+                return this.placeholder();
+            }
+            return end === '' ? `${this.fmt(start)} – …` : `${this.fmt(start)} – ${this.fmt(end)}`;
         }
-        return new Date(value).toLocaleString('en-US', {
-            month: 'short',
-            day: 'numeric',
-            year: 'numeric',
-            hour: 'numeric',
-            minute: '2-digit',
-        });
+        const value = this.value();
+        return value === '' ? this.placeholder() : this.fmt(value);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
     computedClass = computed(() => cn('relative inline-block', this.userClass()), /* @ts-ignore */
@@ -14501,10 +15705,33 @@ class BuiDatetimePicker {
     onDate(iso) {
         this.value.set(`${iso}T${this.timePart()}`);
     }
+    onRange(range) {
+        const time = this.timePart();
+        this.range.set({
+            start: range.start === '' ? '' : `${range.start}T${time}`,
+            end: range.end === '' ? '' : `${range.end}T${time}`,
+        });
+    }
     onTime(time) {
+        if (this.mode() === 'range') {
+            const { start, end } = this.calRange();
+            this.range.set({
+                start: start === '' ? '' : `${start}T${time}`,
+                end: end === '' ? '' : `${end}T${time}`,
+            });
+            return;
+        }
         const date = this.datePart();
         this.value.set(`${date === '' ? this.todayIso() : date}T${time}`);
     }
+    fmt(value) {
+        return new Date(value).toLocaleString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            hour: 'numeric',
+            minute: '2-digit',
+        });
+    }
     onDocumentClick(event) {
         if (this.open() && !this.host.nativeElement.contains(event.target)) {
             this.open.set(false);
@@ -14515,7 +15742,7 @@ class BuiDatetimePicker {
         return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDatetimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiDatetimePicker, isStandalone: true, selector: "bui-datetime-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "datetime-picker" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiDatetimePicker, isStandalone: true, selector: "bui-datetime-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, seconds: { classPropertyName: "seconds", publicName: "seconds", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", range: "rangeChange" }, host: { attributes: { "data-slot": "datetime-picker" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
     <button
       type="button"
       class="flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
@@ -14535,18 +15762,40 @@ class BuiDatetimePicker {
         <path d="M8 2v4M16 2v4M3 10h18" />
         <rect width="18" height="18" x="3" y="4" rx="2" />
       </svg>
-      <span [class]="value() ? '' : 'text-muted-foreground'">{{ display() }}</span>
+      <span [class]="hasValue() ? '' : 'text-muted-foreground'">{{ display() }}</span>
     </button>
     @if (open()) {
       <div class="absolute z-50 mt-1 rounded-lg border bg-popover shadow-md">
-        <bui-calendar [value]="datePart()" (valueChange)="onDate($event)" />
+        @if (mode() === 'range') {
+          <bui-calendar
+            mode="range"
+            [months]="months()"
+            [range]="calRange()"
+            [minDate]="minDate()"
+            [maxDate]="maxDate()"
+            [captionLayout]="captionLayout()"
+            (rangeChange)="onRange($event)"
+          />
+        } @else {
+          <bui-calendar
+            [value]="datePart()"
+            [minDate]="minDate()"
+            [maxDate]="maxDate()"
+            [captionLayout]="captionLayout()"
+            (valueChange)="onDate($event)"
+          />
+        }
         <div class="flex items-center gap-2 border-t p-2">
           <span class="text-xs text-muted-foreground">Time</span>
-          <bui-time-field [value]="timePart()" (valueChange)="onTime($event)" />
+          <bui-time-field
+            [value]="timePart()"
+            [seconds]="seconds()"
+            (valueChange)="onTime($event)"
+          />
         </div>
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: BuiCalendar, selector: "bui-calendar", inputs: ["value", "weekStart", "minDate", "maxDate", "class"], outputs: ["valueChange"] }, { kind: "component", type: BuiTimeField, selector: "bui-time-field", inputs: ["value", "name", "id", "min", "max", "seconds", "disabled", "ariaLabel", "class"], outputs: ["valueChange"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: BuiCalendar, selector: "bui-calendar", inputs: ["value", "mode", "range", "values", "months", "weekStart", "minDate", "maxDate", "disabledDates", "disableWeekends", "showWeekNumbers", "captionLayout", "hideOutsideDays", "class"], outputs: ["valueChange", "rangeChange", "valuesChange"] }, { kind: "component", type: BuiTimeField, selector: "bui-time-field", inputs: ["value", "name", "id", "min", "max", "seconds", "disabled", "mode", "minuteStep", "ariaLabel", "class"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDatetimePicker, decorators: [{
             type: Component,
@@ -14578,25 +15827,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         <path d="M8 2v4M16 2v4M3 10h18" />
         <rect width="18" height="18" x="3" y="4" rx="2" />
       </svg>
-      <span [class]="value() ? '' : 'text-muted-foreground'">{{ display() }}</span>
+      <span [class]="hasValue() ? '' : 'text-muted-foreground'">{{ display() }}</span>
     </button>
     @if (open()) {
       <div class="absolute z-50 mt-1 rounded-lg border bg-popover shadow-md">
-        <bui-calendar [value]="datePart()" (valueChange)="onDate($event)" />
+        @if (mode() === 'range') {
+          <bui-calendar
+            mode="range"
+            [months]="months()"
+            [range]="calRange()"
+            [minDate]="minDate()"
+            [maxDate]="maxDate()"
+            [captionLayout]="captionLayout()"
+            (rangeChange)="onRange($event)"
+          />
+        } @else {
+          <bui-calendar
+            [value]="datePart()"
+            [minDate]="minDate()"
+            [maxDate]="maxDate()"
+            [captionLayout]="captionLayout()"
+            (valueChange)="onDate($event)"
+          />
+        }
         <div class="flex items-center gap-2 border-t p-2">
           <span class="text-xs text-muted-foreground">Time</span>
-          <bui-time-field [value]="timePart()" (valueChange)="onTime($event)" />
+          <bui-time-field
+            [value]="timePart()"
+            [seconds]="seconds()"
+            (valueChange)="onTime($event)"
+          />
         </div>
       </div>
     }
   `,
                 }]
-        }], 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 }] }], 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"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }, { type: i0.Output, args: ["rangeChange"] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], seconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "seconds", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+const AC_SIZE = {
+    sm: 'h-8 text-xs',
+    default: 'h-9 text-sm',
+    lg: 'h-11 text-base',
+};
 /** A free-text input with a filtered suggestion list. */
 class BuiAutocomplete {
     value = model('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Pick several values, shown as removable chips; binds `values`. */
+    multiple = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    values = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
     options = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     placeholder = input('Search...', /* @ts-ignore */
@@ -14607,7 +15888,16 @@ class BuiAutocomplete {
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     name = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Optional leading icon, given as an SVG path `d` string. */
+    icon = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    inputClass = computed(() => cn('w-full rounded-md border border-input bg-transparent shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50', AC_SIZE[this.size()], this.icon() ? 'pr-3 pl-9' : 'px-3'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
+    boxClass = computed(() => cn('flex min-h-9 w-full flex-wrap items-center gap-1 rounded-md border border-input bg-transparent px-2 py-1 shadow-xs focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "boxClass" }] : /* istanbul ignore next */ []));
     host = inject(ElementRef);
     listId = inject(_IdGenerator).getId('bui-autocomplete-');
     open = signal(false, /* @ts-ignore */
@@ -14616,10 +15906,14 @@ class BuiAutocomplete {
     ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     filtered = computed(() => {
         const query = this.value().trim().toLowerCase();
+        const picked = this.values();
+        const pool = this.multiple()
+            ? this.options().filter((option) => !picked.includes(option))
+            : this.options();
         if (query === '') {
-            return this.options();
+            return pool;
         }
-        return this.options().filter((option) => option.toLowerCase().includes(query));
+        return pool.filter((option) => option.toLowerCase().includes(query));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
     computedClass = computed(() => cn('relative block', this.userClass()), /* @ts-ignore */
@@ -14647,37 +15941,114 @@ class BuiAutocomplete {
         else if (event.key === 'Escape') {
             this.open.set(false);
         }
+        else if (event.key === 'Backspace' && this.multiple() && this.value() === '') {
+            const picked = this.values();
+            if (picked.length > 0) {
+                this.values.set(picked.slice(0, -1));
+            }
+        }
     }
     choose(option) {
+        if (this.multiple()) {
+            if (!this.values().includes(option)) {
+                this.values.set([...this.values(), option]);
+            }
+            this.value.set('');
+            this.active.set(0);
+            return;
+        }
         this.value.set(option);
         this.open.set(false);
     }
+    removeChip(chip) {
+        this.values.set(this.values().filter((value) => value !== chip));
+    }
     onDocumentClick(event) {
         if (this.open() && !this.host.nativeElement.contains(event.target)) {
             this.open.set(false);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiAutocomplete, isStandalone: true, selector: "bui-autocomplete", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "autocomplete" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
-    <input
-      type="text"
-      role="combobox"
-      aria-autocomplete="list"
-      [attr.aria-expanded]="open()"
-      [attr.aria-controls]="listId"
-      [value]="value()"
-      [placeholder]="placeholder()"
-      [disabled]="disabled()"
-      [attr.name]="name() || null"
-      class="h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
-      (input)="onInput($event)"
-      (focus)="open.set(true)"
-      (keydown)="onKeydown($event)"
-    />
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiAutocomplete, isStandalone: true, selector: "bui-autocomplete", 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 }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange" }, host: { attributes: { "data-slot": "autocomplete" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    @if (multiple()) {
+      <div [class]="boxClass()">
+        @for (chip of values(); track chip) {
+          <span
+            class="inline-flex items-center gap-1 rounded bg-secondary px-1.5 py-0.5 text-xs text-secondary-foreground"
+          >
+            {{ chip }}
+            <button
+              type="button"
+              class="text-muted-foreground hover:text-foreground"
+              [attr.aria-label]="'Remove ' + chip"
+              (click)="removeChip(chip); $event.stopPropagation()"
+            >
+              <svg
+                class="size-3"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2.5"
+                stroke-linecap="round"
+                aria-hidden="true"
+              >
+                <path d="M18 6 6 18M6 6l12 12" />
+              </svg>
+            </button>
+          </span>
+        }
+        <input
+          type="text"
+          role="combobox"
+          aria-autocomplete="list"
+          [attr.aria-expanded]="open()"
+          [attr.aria-controls]="listId"
+          [value]="value()"
+          [placeholder]="values().length > 0 ? '' : placeholder()"
+          [disabled]="disabled()"
+          [attr.name]="name() || null"
+          class="min-w-24 flex-1 bg-transparent text-sm outline-none disabled:cursor-not-allowed"
+          (input)="onInput($event)"
+          (focus)="open.set(true)"
+          (keydown)="onKeydown($event)"
+        />
+      </div>
+    } @else {
+      @if (icon(); as icon) {
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          class="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground"
+        >
+          <path [attr.d]="icon" />
+        </svg>
+      }
+      <input
+        type="text"
+        role="combobox"
+        aria-autocomplete="list"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="listId"
+        [value]="value()"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [attr.name]="name() || null"
+        [class]="inputClass()"
+        (input)="onInput($event)"
+        (focus)="open.set(true)"
+        (keydown)="onKeydown($event)"
+      />
+    }
     @if (open() && filtered().length > 0) {
       <ul
         [id]="listId"
         role="listbox"
+        [attr.aria-multiselectable]="multiple() ? true : null"
         class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border bg-popover p-1 shadow-md"
       >
         @for (option of filtered(); track option; let i = $index) {
@@ -14712,25 +16083,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '(document:click)': 'onDocumentClick($event)',
                     },
                     template: `
-    <input
-      type="text"
-      role="combobox"
-      aria-autocomplete="list"
-      [attr.aria-expanded]="open()"
-      [attr.aria-controls]="listId"
-      [value]="value()"
-      [placeholder]="placeholder()"
-      [disabled]="disabled()"
-      [attr.name]="name() || null"
-      class="h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
-      (input)="onInput($event)"
-      (focus)="open.set(true)"
-      (keydown)="onKeydown($event)"
-    />
+    @if (multiple()) {
+      <div [class]="boxClass()">
+        @for (chip of values(); track chip) {
+          <span
+            class="inline-flex items-center gap-1 rounded bg-secondary px-1.5 py-0.5 text-xs text-secondary-foreground"
+          >
+            {{ chip }}
+            <button
+              type="button"
+              class="text-muted-foreground hover:text-foreground"
+              [attr.aria-label]="'Remove ' + chip"
+              (click)="removeChip(chip); $event.stopPropagation()"
+            >
+              <svg
+                class="size-3"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2.5"
+                stroke-linecap="round"
+                aria-hidden="true"
+              >
+                <path d="M18 6 6 18M6 6l12 12" />
+              </svg>
+            </button>
+          </span>
+        }
+        <input
+          type="text"
+          role="combobox"
+          aria-autocomplete="list"
+          [attr.aria-expanded]="open()"
+          [attr.aria-controls]="listId"
+          [value]="value()"
+          [placeholder]="values().length > 0 ? '' : placeholder()"
+          [disabled]="disabled()"
+          [attr.name]="name() || null"
+          class="min-w-24 flex-1 bg-transparent text-sm outline-none disabled:cursor-not-allowed"
+          (input)="onInput($event)"
+          (focus)="open.set(true)"
+          (keydown)="onKeydown($event)"
+        />
+      </div>
+    } @else {
+      @if (icon(); as icon) {
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          class="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground"
+        >
+          <path [attr.d]="icon" />
+        </svg>
+      }
+      <input
+        type="text"
+        role="combobox"
+        aria-autocomplete="list"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="listId"
+        [value]="value()"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [attr.name]="name() || null"
+        [class]="inputClass()"
+        (input)="onInput($event)"
+        (focus)="open.set(true)"
+        (keydown)="onKeydown($event)"
+      />
+    }
     @if (open() && filtered().length > 0) {
       <ul
         [id]="listId"
         role="listbox"
+        [attr.aria-multiselectable]="multiple() ? true : null"
         class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border bg-popover p-1 shadow-md"
       >
         @for (option of filtered(); track option; let i = $index) {
@@ -14755,7 +16186,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"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], 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 }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /** A before/after image comparison with a draggable, keyboard-operable divider. */
 class BuiComparisonSlider {
@@ -15191,18 +16622,20 @@ class BuiDrawer {
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     direction = input('bottom', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Drawer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     panelClass = computed(() => cn('fixed z-50 flex flex-col gap-3 border bg-background p-4 shadow-lg', POSITION$1[this.direction()], this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiDrawer, isStandalone: true, selector: "bui-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { attributes: { "data-slot": "drawer" }, listeners: { "document:keydown.escape": "open.set(false)" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiDrawer, isStandalone: true, selector: "bui-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { attributes: { "data-slot": "drawer" }, listeners: { "document:keydown.escape": "open.set(false)" } }, ngImport: i0, template: `
     @if (open()) {
       <div
         class="fixed inset-0 z-50 bg-black/50"
         (click)="open.set(false)"
         aria-hidden="true"
       ></div>
-      <div role="dialog" aria-modal="true" [class]="panelClass()">
+      <div role="dialog" aria-modal="true" [attr.aria-label]="ariaLabel()" [class]="panelClass()">
         <ng-content />
       </div>
     }
@@ -15220,13 +16653,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         (click)="open.set(false)"
         aria-hidden="true"
       ></div>
-      <div role="dialog" aria-modal="true" [class]="panelClass()">
+      <div role="dialog" aria-modal="true" [attr.aria-label]="ariaLabel()" [class]="panelClass()">
         <ng-content />
       </div>
     }
   `,
                 }]
-        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 const PLACEHOLDERS = new Set(['9', 'a', '*']);
 function isTokenChar(char, token) {
@@ -15332,18 +16765,20 @@ class BuiSheet {
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     side = input('right', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Sheet', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     panelClass = computed(() => cn('fixed z-50 flex flex-col gap-4 border bg-background p-6 shadow-lg', SIDE[this.side()], this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiSheet, isStandalone: true, selector: "bui-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { attributes: { "data-slot": "sheet" }, listeners: { "document:keydown.escape": "open.set(false)" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiSheet, isStandalone: true, selector: "bui-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { attributes: { "data-slot": "sheet" }, listeners: { "document:keydown.escape": "open.set(false)" } }, ngImport: i0, template: `
     @if (open()) {
       <div
         class="fixed inset-0 z-50 bg-black/50"
         (click)="open.set(false)"
         aria-hidden="true"
       ></div>
-      <div role="dialog" aria-modal="true" [class]="panelClass()">
+      <div role="dialog" aria-modal="true" [attr.aria-label]="ariaLabel()" [class]="panelClass()">
         <ng-content />
       </div>
     }
@@ -15361,13 +16796,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         (click)="open.set(false)"
         aria-hidden="true"
       ></div>
-      <div role="dialog" aria-modal="true" [class]="panelClass()">
+      <div role="dialog" aria-modal="true" [attr.aria-label]="ariaLabel()" [class]="panelClass()">
         <ng-content />
       </div>
     }
   `,
                 }]
-        }], 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 }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], 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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /** Imperative toast store. Inject it and call `show(...)`; render a `<bui-sonner />` once. */
 class BuiToaster {
@@ -15424,6 +16859,10 @@ class BuiSonner {
     toneClass(tone) {
         return TONE[tone ?? 'default'];
     }
+    runAction(toast) {
+        toast.action?.onClick?.();
+        this.toaster.dismiss(toast.id);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSonner, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiSonner, isStandalone: true, selector: "bui-sonner", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "sonner" } }, ngImport: i0, template: `
     <div role="region" aria-label="Notifications" [class]="regionClass()">
@@ -15439,6 +16878,15 @@ class BuiSonner {
             @if (toast.description) {
               <p class="text-sm opacity-90">{{ toast.description }}</p>
             }
+            @if (toast.action) {
+              <button
+                type="button"
+                class="mt-2 text-sm font-medium underline underline-offset-4 hover:opacity-80"
+                (click)="runAction(toast)"
+              >
+                {{ toast.action.label }}
+              </button>
+            }
           </div>
           <button
             type="button"
@@ -15482,6 +16930,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
             @if (toast.description) {
               <p class="text-sm opacity-90">{{ toast.description }}</p>
             }
+            @if (toast.action) {
+              <button
+                type="button"
+                class="mt-2 text-sm font-medium underline underline-offset-4 hover:opacity-80"
+                (click)="runAction(toast)"
+              >
+                {{ toast.action.label }}
+              </button>
+            }
           </div>
           <button
             type="button"
@@ -15559,6 +17016,19 @@ class BuiNavigationMenu {
               <div
                 class="absolute start-0 top-full z-50 mt-1.5 w-64 rounded-lg border bg-popover p-2 shadow-md"
               >
+                @if (item.featured; as featured) {
+                  <a
+                    [href]="href(featured.href)"
+                    class="mb-1 block rounded-md bg-accent/50 p-3 hover:bg-accent"
+                  >
+                    <span class="text-sm font-semibold">{{ featured.label }}</span>
+                    @if (featured.description) {
+                      <span class="mt-0.5 block text-xs text-muted-foreground">{{
+                        featured.description
+                      }}</span>
+                    }
+                  </a>
+                }
                 <ul class="space-y-1">
                   @for (link of item.links; track link.label) {
                     <li>
@@ -15626,6 +17096,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
               <div
                 class="absolute start-0 top-full z-50 mt-1.5 w-64 rounded-lg border bg-popover p-2 shadow-md"
               >
+                @if (item.featured; as featured) {
+                  <a
+                    [href]="href(featured.href)"
+                    class="mb-1 block rounded-md bg-accent/50 p-3 hover:bg-accent"
+                  >
+                    <span class="text-sm font-semibold">{{ featured.label }}</span>
+                    @if (featured.description) {
+                      <span class="mt-0.5 block text-xs text-muted-foreground">{{
+                        featured.description
+                      }}</span>
+                    }
+                  </a>
+                }
                 <ul class="space-y-1">
                   @for (link of item.links; track link.label) {
                     <li>
@@ -15927,11 +17410,23 @@ function label(iso) {
 class BuiGantt {
     tasks = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tasks" }] : /* istanbul ignore next */ []));
+    milestones = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "milestones" }] : /* istanbul ignore next */ []));
     start = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "start" }] : /* istanbul ignore next */ []));
     end = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "end" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    milestoneRows = computed(() => {
+        const { min, span } = this.bounds();
+        return this.milestones()
+            .filter((milestone) => milestone.date !== '')
+            .map((milestone) => ({
+            name: milestone.name,
+            left: ((toDay(milestone.date) - min) / span) * 100,
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "milestoneRows" }] : /* istanbul ignore next */ []));
     bounds = computed(() => {
         const tasks = this.tasks().filter((task) => task.start !== '' && task.end !== '');
         const starts = tasks.map((task) => toDay(task.start));
@@ -15975,7 +17470,7 @@ class BuiGantt {
     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: BuiGantt, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiGantt, isStandalone: true, selector: "bui-gantt", inputs: { tasks: { classPropertyName: "tasks", publicName: "tasks", isSignal: true, isRequired: false, transformFunction: null }, start: { classPropertyName: "start", publicName: "start", isSignal: true, isRequired: false, transformFunction: null }, end: { classPropertyName: "end", publicName: "end", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "gantt" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiGantt, isStandalone: true, selector: "bui-gantt", inputs: { tasks: { classPropertyName: "tasks", publicName: "tasks", isSignal: true, isRequired: false, transformFunction: null }, milestones: { classPropertyName: "milestones", publicName: "milestones", isSignal: true, isRequired: false, transformFunction: null }, start: { classPropertyName: "start", publicName: "start", isSignal: true, isRequired: false, transformFunction: null }, end: { classPropertyName: "end", publicName: "end", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "gantt" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
     <div class="space-y-2">
       @for (row of rows(); track row.name) {
         <div class="grid grid-cols-[8rem_1fr] items-center gap-3">
@@ -15996,6 +17491,18 @@ class BuiGantt {
       } @empty {
         <p class="text-sm text-muted-foreground">No tasks.</p>
       }
+      @for (milestone of milestoneRows(); track milestone.name) {
+        <div class="grid grid-cols-[8rem_1fr] items-center gap-3">
+          <span class="truncate text-sm text-muted-foreground">{{ milestone.name }}</span>
+          <div class="relative h-6">
+            <span
+              class="absolute top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-[2px] bg-amber-500"
+              [style.left.%]="milestone.left"
+              [attr.title]="milestone.name"
+            ></span>
+          </div>
+        </div>
+      }
     </div>
     @if (rows().length > 0) {
       <div class="mt-2 grid grid-cols-[8rem_1fr] gap-3 text-xs text-muted-foreground">
@@ -16034,6 +17541,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       } @empty {
         <p class="text-sm text-muted-foreground">No tasks.</p>
       }
+      @for (milestone of milestoneRows(); track milestone.name) {
+        <div class="grid grid-cols-[8rem_1fr] items-center gap-3">
+          <span class="truncate text-sm text-muted-foreground">{{ milestone.name }}</span>
+          <div class="relative h-6">
+            <span
+              class="absolute top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-[2px] bg-amber-500"
+              [style.left.%]="milestone.left"
+              [attr.title]="milestone.name"
+            ></span>
+          </div>
+        </div>
+      }
     </div>
     @if (rows().length > 0) {
       <div class="mt-2 grid grid-cols-[8rem_1fr] gap-3 text-xs text-muted-foreground">
@@ -16046,7 +17565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { tasks: [{ type: i0.Input, args: [{ isSignal: true, alias: "tasks", required: false }] }], start: [{ type: i0.Input, args: [{ isSignal: true, alias: "start", required: false }] }], end: [{ type: i0.Input, args: [{ isSignal: true, alias: "end", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { tasks: [{ type: i0.Input, args: [{ isSignal: true, alias: "tasks", required: false }] }], milestones: [{ type: i0.Input, args: [{ isSignal: true, alias: "milestones", required: false }] }], start: [{ type: i0.Input, args: [{ isSignal: true, alias: "start", required: false }] }], end: [{ type: i0.Input, args: [{ isSignal: true, alias: "end", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 const WEEK = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 function toMinutes(value) {