fold-ng 0.5.1 → 0.5.2

package/CHANGELOG.md

@@ -8,6 +8,34 @@ All notable changes to **fold-ng** are documented here. The format follows
 
 _Nothing yet._
 
+## [0.5.2] - 2026-07-27
+
+### Added
+
+- **`fold-listbox` gains a `selectionChange: T` output** — fires when the user
+  picks an option, carrying the chosen value and **never `null`**. Use it for
+  the common "do X on selection" case to skip the `T | null` narrowing that
+  `[(value)]` / `valueChange` force on every handler. Clearing the value (the ×
+  affordance) does not fire it — observe `value` / `valueChange` for that.
+- **`fold-range-slider` gains a `rangeChange: FoldRangeValue` output** — the same
+  ergonomics for ranges: fires on a thumb drag with the resolved `{ min, max }`,
+  never `undefined`.
+
+### Changed
+
+- **`fold-card` `separators` / `raisedBands` accept a boolean shorthand.** On top
+  of the `FoldCardBandChrome` enum (`none`/`header`/`footer`/`both`), a bare
+  attribute (`<fold-card separators>`) or `[separators]="true"` now means `both`,
+  and `false` means `none` — the idiomatic Angular boolean-attribute ergonomics,
+  while the enum stays for per-band control. Exposes `foldCardBandChrome` (the
+  coercion fn) and `FoldCardBandChromeInput`.
+- **`pnpm release` gates the full suite (incl. `test:e2e`) locally before
+  tagging.** Release tags are protected/immutable, so a tag pushed for a build
+  that then fails CI burns that version number (how `0.5.0` was lost). The
+  release script now runs `lint · tsc · strictTemplates · vitest · test:e2e`
+  (installing Chromium first) up front — a red build aborts with nothing bumped
+  or tagged.
+
 ## [0.5.1] - 2026-07-27
 
 First published 0.5.x — same tree as the (unpublished, e2e-gated) v0.5.0 tag with the release e2e locator scoped to the first control.
@@ -505,7 +533,8 @@ design-token stylesheet.
   `currentColor`; `prefers-reduced-motion` + `forced-colors` are respected;
   strings localise via inputs / providers (`provideFoldPanelLabels`).
 
-[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.5.1...HEAD
+[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.5.2...HEAD
+[0.5.2]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.5.2
 [0.5.1]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.5.1
 [0.5.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.5.0
 [0.4.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.4.0

package/fesm2022/fold-ng.mjs

@@ -2456,6 +2456,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             args: [{ selector: "fold-inline-confirm", standalone: true, imports: [FoldButtonComponent, FoldButtonIconComponent, FoldInputComponent], host: { "[class.is-open]": "open()" }, template: "@if (!open()) {\n  <!-- Idle: the host's projected trigger. A click anywhere in it starts the\n       flow; the trigger itself stays a real focusable control (button / anchor),\n       so keyboard activation is native (Enter/Space \u2192 click) \u2014 no extra\n       role/tabindex, and no keydown handler that would double-fire. -->\n  <span #triggerWrap class=\"fic-trigger\" (click)=\"activate()\">\n    <ng-content />\n  </span>\n} @else {\n  <div\n    #groupEl\n    class=\"fic-confirm\"\n    role=\"group\"\n    [attr.aria-label]=\"l().group\"\n    (keydown.escape)=\"cancel(); $event.stopPropagation()\"\n  >\n    @if (message(); as text) {\n      <p class=\"fic-message\" [id]=\"msgId\">{{ text }}</p>\n    }\n\n    @if (needsInput()) {\n      <fold-input\n        class=\"fic-field\"\n        [label]=\"prompt()\"\n        [type]=\"fieldType()\"\n        [size]=\"size() === 'lg' ? 'lg' : 'sm'\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [autocomplete]=\"password() ? 'current-password' : 'off'\"\n        [(value)]=\"typed\"\n        (keydown.enter)=\"confirm()\"\n      />\n    }\n\n    <div class=\"fic-actions\">\n      <button\n        foldButton\n        emphasis=\"solid\"\n        [intent]=\"intent()\"\n        [size]=\"size()\"\n        [icon]=\"confirmIcon()\"\n        [disabled]=\"!canConfirm()\"\n        [attr.aria-describedby]=\"message() ? msgId : null\"\n        (click)=\"confirm()\"\n      >\n        {{ loading() ? l().busy : l().confirm }}\n      </button>\n\n      @if (cancelIcon(); as icon) {\n        <fold-button-icon\n          [icon]=\"icon\"\n          tone=\"ghost\"\n          [size]=\"size()\"\n          [disabled]=\"loading()\"\n          [tooltip]=\"l().cancelAria\"\n          (clicked)=\"cancel()\"\n        />\n      } @else {\n        <button\n          foldButton\n          emphasis=\"soft\"\n          intent=\"neutral\"\n          [size]=\"size()\"\n          [disabled]=\"loading()\"\n          (click)=\"cancel()\"\n        >\n          {{ l().cancel }}\n        </button>\n      }\n    </div>\n  </div>\n}\n", styles: [":host{display:inline-flex;align-items:center;min-width:0}.fic-trigger{display:contents}.fic-confirm{display:inline-flex;flex-direction:column;gap:var(--fold-space-sm);min-width:0;animation:fic-in var(--fold-motion-fast)}.fic-message{margin:0;font-size:var(--fold-text-xs);line-height:1.5;color:var(--fold-color-text-secondary)}.fic-field{display:block;width:15rem;max-width:100%}.fic-actions{display:inline-flex;align-items:center;gap:var(--fold-space-xs)}@keyframes fic-in{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.fic-confirm{animation:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { intent: [{ type: i0.Input, args: [{ isSignal: true, alias: "intent", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], match: [{ type: i0.Input, args: [{ isSignal: true, alias: "match", required: false }] }], password: [{ type: i0.Input, args: [{ isSignal: true, alias: "password", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], confirmIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmIcon", required: false }] }], cancelIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelIcon", required: false }] }], keepOpenOnConfirm: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepOpenOnConfirm", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], triggerEl: [{ type: i0.ViewChild, args: ["triggerWrap", { isSignal: true }] }], groupEl: [{ type: i0.ViewChild, args: ["groupEl", { isSignal: true }] }] } });
 
+/** Coerce the band-chrome shorthand: bare attribute / `true` → `"both"`,
+ *  `false` → `"none"`, an explicit enum value passes through unchanged. */
+function foldCardBandChrome(value) {
+    if (value === "" || value === true) {
+        return "both";
+    }
+    if (value === false) {
+        return "none";
+    }
+    return value;
+}
 /**
  * `<fold-card>` — the canonical raised content surface: a solid
  * `surface-card` background, a hairline border and a consistent radius. Use it
@@ -2543,13 +2554,13 @@ class FoldCardComponent {
     ariaLabel = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     /** Which bands get a hairline against the body — `none` (default), `header`,
-     *  `footer`, or `both`. */
-    separators = input("none", /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "separators" }] : /* istanbul ignore next */ []));
+     *  `footer`, or `both`. Accepts a boolean shorthand: a bare `separators` (or
+     *  `[separators]="true"`) means `both`; `false` means `none`. */
+    separators = input("none", { ...(ngDevMode ? { debugName: "separators" } : /* istanbul ignore next */ {}), transform: foldCardBandChrome });
     /** Which bands are lifted with a subtle raised tint over the card surface
-     *  (fainter on `sunken`) — `none` (default), `header`, `footer`, or `both`. */
-    raisedBands = input("none", /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "raisedBands" }] : /* istanbul ignore next */ []));
+     *  (fainter on `sunken`) — `none` (default), `header`, `footer`, or `both`.
+     *  Accepts the same boolean shorthand as {@link separators}. */
+    raisedBands = input("none", { ...(ngDevMode ? { debugName: "raisedBands" } : /* istanbul ignore next */ {}), transform: foldCardBandChrome });
     /** Fires when an `interactive` card is activated (click, Enter, or Space). */
     activated = output();
     /** Whether a per-band chrome value applies to the given band. */
@@ -5622,6 +5633,12 @@ class FoldListboxComponent {
     /** Two-way open state of the popup. */
     open = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Fires when the **user picks an option** — carries the chosen value, never
+     *  `null`. Use it for the common "do X on selection" case to skip the
+     *  `T | null` narrowing that `[(value)]` / `valueChange` require. Clearing the
+     *  value (the × button) does **not** fire this; observe `value`/`valueChange`
+     *  for that. */
+    selectionChange = output();
     /** Size preset — see {@link FoldInputComponent.size}. @default 'md' */
     size = input("md", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -5815,12 +5832,14 @@ class FoldListboxComponent {
         }
     }
     commit(option) {
-        this.value.set(option.value());
+        const picked = option.value();
+        this.value.set(picked);
+        this.selectionChange.emit(picked);
         this.touched.set(true);
         this.open.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldListboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldListboxComponent, isStandalone: true, selector: "fold-listbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", open: "openChange" }, host: { properties: { "class": "size() + \" \" + variant()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldListboxComponent, isStandalone: true, selector: "fold-listbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", open: "openChange", selectionChange: "selectionChange" }, host: { properties: { "class": "size() + \" \" + variant()" } }, providers: [
             { provide: FOLD_LISTBOX_OWNER, useExisting: FoldListboxComponent },
         ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true, isSignal: true }, { propertyName: "projectedOptions", predicate: FoldOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "renderedOptions", predicate: FoldOptionComponent, descendants: true, isSignal: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<fold-input-base\n  [label]=\"label()\"\n  [for]=\"inputId\"\n  [required]=\"required()\"\n  [optional]=\"optional()\"\n  [optionalLabel]=\"optionalLabel()\"\n  [hint]=\"hint()\"\n  [error]=\"errorMessage()\"\n>\n  <fold-popover\n    [(open)]=\"open\"\n    [autoFocus]=\"false\"\n    [ariaControls]=\"listId\"\n    [placement]=\"placement()\"\n    [fallbackPlacements]=\"['top-start', 'bottom-end', 'top-end']\"\n  >\n    <div class=\"lb-field\">\n      <button\n        type=\"button\"\n        class=\"lb-trigger\"\n        [class.has-clear]=\"showClear()\"\n        [id]=\"inputId\"\n        foldPopoverTrigger=\"listbox\"\n        [disabled]=\"disabled()\"\n        [attr.aria-invalid]=\"errorMessage() ? true : null\"\n        [attr.aria-describedby]=\"describedBy()\"\n        (keydown)=\"onTriggerKeydown($event)\"\n      >\n        @if (selectedLabel(); as lbl) {\n          <span class=\"lb-value\">{{ lbl }}</span>\n        } @else {\n          <span class=\"lb-placeholder\">{{ placeholder() }}</span>\n        }\n        <fold-icon\n          name=\"chevron-down\"\n          size=\"sm\"\n          class=\"lb-caret\"\n          aria-hidden=\"true\"\n        />\n      </button>\n      @if (showClear()) {\n        <button\n          type=\"button\"\n          class=\"lb-clear\"\n          [attr.aria-label]=\"clearLabel()\"\n          (click)=\"clear($event)\"\n        >\n          <fold-icon name=\"close\" size=\"sm\" aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <div\n      #list\n      foldPopoverPanel\n      class=\"lb-list\"\n      role=\"listbox\"\n      tabindex=\"-1\"\n      [id]=\"listId\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-activedescendant]=\"activeId()\"\n      (keydown)=\"onListKeydown($event)\"\n      (click)=\"onListClick($event)\"\n      (pointermove)=\"onListPointermove($event)\"\n    >\n      @if (options(); as opts) {\n        @for (o of opts; track o.value) {\n          <fold-option [value]=\"o.value\" [disabled]=\"o.disabled ?? false\">\n            @if (optionTemplate(); as tpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: o }\"\n              />\n            } @else {\n              {{ o.label }}\n            }\n          </fold-option>\n        }\n      } @else {\n        <ng-content />\n      }\n    </div>\n  </fold-popover>\n</fold-input-base>\n", styles: [":host{display:block}.lb-trigger{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:.5rem;width:100%;font-family:inherit;color:var(--fold-color-text);background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border-subtle);cursor:pointer;transition:border-color var(--fold-motion-fast),box-shadow var(--fold-motion-fast)}@media(prefers-reduced-motion:reduce){.lb-trigger{transition:none}}.lb-trigger:hover:not(:disabled){border-color:var(--fold-color-border)}.lb-trigger:focus-visible{border-color:var(--fold-color-primary);box-shadow:0 0 0 2px var(--fold-color-primary-border)}.lb-trigger:disabled{opacity:.4;cursor:not-allowed}.lb-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-placeholder{color:var(--fold-color-text-faded)}.lb-caret{margin-inline-start:auto;color:var(--fold-color-text-muted)}.lb-field{position:relative}.lb-trigger.has-clear .lb-caret{visibility:hidden}.lb-clear{all:unset;position:absolute;inset-inline-end:.4rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;padding:.15rem;border-radius:var(--fold-radius-xs);color:var(--fold-color-text-muted);cursor:pointer}.lb-clear:hover,.lb-clear:focus-visible{color:var(--fold-color-text);background:var(--fold-color-surface-hover)}:host(.sm) .lb-trigger{height:1.75rem;font-size:var(--fold-text-sm);padding:.25rem .5rem;border-radius:var(--fold-radius-xs)}:host(.md) .lb-trigger{height:2.25rem;font-size:var(--fold-text-md);padding:.4rem .65rem;border-radius:var(--fold-radius-sm)}:host(.lg) .lb-trigger{height:2.75rem;font-size:var(--fold-text-lg);padding:.5rem .75rem;border-radius:var(--fold-radius-sm)}:host(.panel) .lb-trigger{height:auto;padding:7px 10px;border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-raised)}:host(.panel) .lb-trigger:focus-visible{box-shadow:none}.lb-list{display:flex;flex-direction:column;gap:1px;min-width:var(--fold-popover-anchor-width, 11rem);outline:none}\n"], dependencies: [{ kind: "component", type: FoldInputBaseComponent, selector: "fold-input-base", inputs: ["label", "for", "required", "optional", "optionalLabel", "hint", "error"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "title"] }, { kind: "component", type: FoldOptionComponent, selector: "fold-option", inputs: ["value", "disabled"] }, { kind: "component", type: FoldPopoverComponent, selector: "fold-popover", inputs: ["placement", "fallbackPlacements", "offset", "padding", "autoFocus", "arrow", "open", "ariaControls"], outputs: ["openChange"] }, { kind: "directive", type: FoldPopoverTriggerDirective, selector: "[foldPopoverTrigger]", inputs: ["foldPopoverTrigger"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
@@ -5836,7 +5855,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     ], host: { "[class]": 'size() + " " + variant()' }, providers: [
                         { provide: FOLD_LISTBOX_OWNER, useExisting: FoldListboxComponent },
                     ], template: "<fold-input-base\n  [label]=\"label()\"\n  [for]=\"inputId\"\n  [required]=\"required()\"\n  [optional]=\"optional()\"\n  [optionalLabel]=\"optionalLabel()\"\n  [hint]=\"hint()\"\n  [error]=\"errorMessage()\"\n>\n  <fold-popover\n    [(open)]=\"open\"\n    [autoFocus]=\"false\"\n    [ariaControls]=\"listId\"\n    [placement]=\"placement()\"\n    [fallbackPlacements]=\"['top-start', 'bottom-end', 'top-end']\"\n  >\n    <div class=\"lb-field\">\n      <button\n        type=\"button\"\n        class=\"lb-trigger\"\n        [class.has-clear]=\"showClear()\"\n        [id]=\"inputId\"\n        foldPopoverTrigger=\"listbox\"\n        [disabled]=\"disabled()\"\n        [attr.aria-invalid]=\"errorMessage() ? true : null\"\n        [attr.aria-describedby]=\"describedBy()\"\n        (keydown)=\"onTriggerKeydown($event)\"\n      >\n        @if (selectedLabel(); as lbl) {\n          <span class=\"lb-value\">{{ lbl }}</span>\n        } @else {\n          <span class=\"lb-placeholder\">{{ placeholder() }}</span>\n        }\n        <fold-icon\n          name=\"chevron-down\"\n          size=\"sm\"\n          class=\"lb-caret\"\n          aria-hidden=\"true\"\n        />\n      </button>\n      @if (showClear()) {\n        <button\n          type=\"button\"\n          class=\"lb-clear\"\n          [attr.aria-label]=\"clearLabel()\"\n          (click)=\"clear($event)\"\n        >\n          <fold-icon name=\"close\" size=\"sm\" aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <div\n      #list\n      foldPopoverPanel\n      class=\"lb-list\"\n      role=\"listbox\"\n      tabindex=\"-1\"\n      [id]=\"listId\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-activedescendant]=\"activeId()\"\n      (keydown)=\"onListKeydown($event)\"\n      (click)=\"onListClick($event)\"\n      (pointermove)=\"onListPointermove($event)\"\n    >\n      @if (options(); as opts) {\n        @for (o of opts; track o.value) {\n          <fold-option [value]=\"o.value\" [disabled]=\"o.disabled ?? false\">\n            @if (optionTemplate(); as tpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: o }\"\n              />\n            } @else {\n              {{ o.label }}\n            }\n          </fold-option>\n        }\n      } @else {\n        <ng-content />\n      }\n    </div>\n  </fold-popover>\n</fold-input-base>\n", styles: [":host{display:block}.lb-trigger{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:.5rem;width:100%;font-family:inherit;color:var(--fold-color-text);background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border-subtle);cursor:pointer;transition:border-color var(--fold-motion-fast),box-shadow var(--fold-motion-fast)}@media(prefers-reduced-motion:reduce){.lb-trigger{transition:none}}.lb-trigger:hover:not(:disabled){border-color:var(--fold-color-border)}.lb-trigger:focus-visible{border-color:var(--fold-color-primary);box-shadow:0 0 0 2px var(--fold-color-primary-border)}.lb-trigger:disabled{opacity:.4;cursor:not-allowed}.lb-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-placeholder{color:var(--fold-color-text-faded)}.lb-caret{margin-inline-start:auto;color:var(--fold-color-text-muted)}.lb-field{position:relative}.lb-trigger.has-clear .lb-caret{visibility:hidden}.lb-clear{all:unset;position:absolute;inset-inline-end:.4rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;padding:.15rem;border-radius:var(--fold-radius-xs);color:var(--fold-color-text-muted);cursor:pointer}.lb-clear:hover,.lb-clear:focus-visible{color:var(--fold-color-text);background:var(--fold-color-surface-hover)}:host(.sm) .lb-trigger{height:1.75rem;font-size:var(--fold-text-sm);padding:.25rem .5rem;border-radius:var(--fold-radius-xs)}:host(.md) .lb-trigger{height:2.25rem;font-size:var(--fold-text-md);padding:.4rem .65rem;border-radius:var(--fold-radius-sm)}:host(.lg) .lb-trigger{height:2.75rem;font-size:var(--fold-text-lg);padding:.5rem .75rem;border-radius:var(--fold-radius-sm)}:host(.panel) .lb-trigger{height:auto;padding:7px 10px;border-radius:var(--fold-radius-sm);background:var(--fold-color-surface-raised)}:host(.panel) .lb-trigger:focus-visible{box-shadow:none}.lb-list{display:flex;flex-direction:column;gap:1px;min-width:var(--fold-popover-anchor-width, 11rem);outline:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], optionalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], allowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClear", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], optionTemplate: [{ type: i0.ContentChild, args: ["option", { isSignal: true }] }], projectedOptions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FoldOptionComponent), { isSignal: true }] }], renderedOptions: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => FoldOptionComponent), { isSignal: true }] }], list: [{ type: i0.ViewChild, args: ["list", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], optionalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], allowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClear", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], optionTemplate: [{ type: i0.ContentChild, args: ["option", { isSignal: true }] }], projectedOptions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FoldOptionComponent), { isSignal: true }] }], renderedOptions: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => FoldOptionComponent), { isSignal: true }] }], list: [{ type: i0.ViewChild, args: ["list", { isSignal: true }] }] } });
 
 /** Labels beyond this count collapse to a "+N" tail on the trigger summary. */
 const SUMMARY_MAX = 3;
@@ -6470,6 +6489,11 @@ class FoldRangeSliderComponent {
      *  A `model()`, so `[(value)]` and `(valueChange)` both work. */
     value = model(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Fires when the **user drags a thumb** — carries the resolved `{ min, max }`,
+     *  never `undefined`. Use it for the common "filter on change" case to skip the
+     *  `FoldRangeValue | undefined` narrowing that `[(value)]` / `valueChange`
+     *  require. */
+    rangeChange = output();
     /** How the values are formatted for display + `aria-valuetext`. @default 'number' */
     unit = input("number", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
@@ -6510,25 +6534,29 @@ class FoldRangeSliderComponent {
     }
     onMinChange(event) {
         const val = Number(readInputValue(event));
-        this.value.set({
+        this.commit({
             min: Math.min(val, this.currentMax()),
             max: this.currentMax(),
         });
     }
     onMaxChange(event) {
         const val = Number(readInputValue(event));
-        this.value.set({
+        this.commit({
             min: this.currentMin(),
             max: Math.max(val, this.currentMin()),
         });
     }
+    commit(next) {
+        this.value.set(next);
+        this.rangeChange.emit(next);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldRangeSliderComponent, isStandalone: true, selector: "fold-range-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minLabel: { classPropertyName: "minLabel", publicName: "minLabel", isSignal: true, isRequired: false, transformFunction: null }, maxLabel: { classPropertyName: "maxLabel", publicName: "maxLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div class=\"rs\" role=\"group\" [attr.aria-labelledby]=\"labelId\">\n  <span class=\"rs-label\" [id]=\"labelId\">{{ label() }}</span>\n  <div class=\"rs-track-wrap\">\n    <div class=\"rs-track\">\n      <div\n        class=\"rs-fill\"\n        [style.left.%]=\"fillLeft()\"\n        [style.width.%]=\"fillWidth()\"\n      ></div>\n    </div>\n    <input\n      type=\"range\"\n      class=\"rs-thumb rs-thumb--min\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [value]=\"currentMin()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"label() + ' ' + minLabel()\"\n      [attr.aria-valuetext]=\"formatValue(currentMin())\"\n      (input)=\"onMinChange($event)\"\n    />\n    <input\n      type=\"range\"\n      class=\"rs-thumb rs-thumb--max\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [value]=\"currentMax()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"label() + ' ' + maxLabel()\"\n      [attr.aria-valuetext]=\"formatValue(currentMax())\"\n      (input)=\"onMaxChange($event)\"\n    />\n  </div>\n  <span class=\"rs-values\"\n    >{{ formatValue(currentMin()) }} \u2013 {{ formatValue(currentMax()) }}</span\n  >\n</div>\n", styles: [":host{display:block}.rs{display:flex;flex-direction:column;gap:var(--fold-space-xs)}.rs-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--fold-color-text-muted)}.rs-track-wrap{position:relative;height:20px}.rs-track{position:absolute;top:50%;left:0;right:0;height:4px;transform:translateY(-50%);background:var(--fold-color-border-subtle);border-radius:2px}.rs-fill{position:absolute;height:100%;background:var(--fold-color-primary);border-radius:2px}.rs-thumb{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;-webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;outline:none}.rs-thumb::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--fold-color-primary);border:2px solid var(--fold-color-surface-card);cursor:pointer;pointer-events:auto;transition:transform var(--fold-motion-fast)}.rs-thumb::-webkit-slider-thumb:hover{transform:scale(1.2)}.rs-thumb::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--fold-color-primary);border:2px solid var(--fold-color-surface-card);cursor:pointer;pointer-events:auto}.rs-thumb:focus-visible{outline:none}.rs-thumb:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--fold-color-primary) 30%,transparent)}.rs-thumb:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--fold-color-primary) 30%,transparent)}@media(prefers-reduced-motion:reduce){.rs-thumb::-webkit-slider-thumb{transition:none}.rs-thumb::-webkit-slider-thumb:hover{transform:none}}@media(forced-colors:active){.rs-thumb::-webkit-slider-thumb{background:ButtonText;border-color:Canvas}.rs-thumb::-moz-range-thumb{background:ButtonText;border-color:Canvas}.rs-thumb:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px CanvasText}}.rs-thumb:disabled{cursor:not-allowed}.rs-track-wrap:has(.rs-thumb:disabled){opacity:.5}.rs-values{font-size:10px;font-weight:500;color:var(--fold-color-text-muted);text-align:center;font-variant-numeric:tabular-nums}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldRangeSliderComponent, isStandalone: true, selector: "fold-range-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minLabel: { classPropertyName: "minLabel", publicName: "minLabel", isSignal: true, isRequired: false, transformFunction: null }, maxLabel: { classPropertyName: "maxLabel", publicName: "maxLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", rangeChange: "rangeChange" }, ngImport: i0, template: "<div class=\"rs\" role=\"group\" [attr.aria-labelledby]=\"labelId\">\n  <span class=\"rs-label\" [id]=\"labelId\">{{ label() }}</span>\n  <div class=\"rs-track-wrap\">\n    <div class=\"rs-track\">\n      <div\n        class=\"rs-fill\"\n        [style.left.%]=\"fillLeft()\"\n        [style.width.%]=\"fillWidth()\"\n      ></div>\n    </div>\n    <input\n      type=\"range\"\n      class=\"rs-thumb rs-thumb--min\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [value]=\"currentMin()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"label() + ' ' + minLabel()\"\n      [attr.aria-valuetext]=\"formatValue(currentMin())\"\n      (input)=\"onMinChange($event)\"\n    />\n    <input\n      type=\"range\"\n      class=\"rs-thumb rs-thumb--max\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [value]=\"currentMax()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"label() + ' ' + maxLabel()\"\n      [attr.aria-valuetext]=\"formatValue(currentMax())\"\n      (input)=\"onMaxChange($event)\"\n    />\n  </div>\n  <span class=\"rs-values\"\n    >{{ formatValue(currentMin()) }} \u2013 {{ formatValue(currentMax()) }}</span\n  >\n</div>\n", styles: [":host{display:block}.rs{display:flex;flex-direction:column;gap:var(--fold-space-xs)}.rs-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--fold-color-text-muted)}.rs-track-wrap{position:relative;height:20px}.rs-track{position:absolute;top:50%;left:0;right:0;height:4px;transform:translateY(-50%);background:var(--fold-color-border-subtle);border-radius:2px}.rs-fill{position:absolute;height:100%;background:var(--fold-color-primary);border-radius:2px}.rs-thumb{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;-webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;outline:none}.rs-thumb::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--fold-color-primary);border:2px solid var(--fold-color-surface-card);cursor:pointer;pointer-events:auto;transition:transform var(--fold-motion-fast)}.rs-thumb::-webkit-slider-thumb:hover{transform:scale(1.2)}.rs-thumb::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--fold-color-primary);border:2px solid var(--fold-color-surface-card);cursor:pointer;pointer-events:auto}.rs-thumb:focus-visible{outline:none}.rs-thumb:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--fold-color-primary) 30%,transparent)}.rs-thumb:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--fold-color-primary) 30%,transparent)}@media(prefers-reduced-motion:reduce){.rs-thumb::-webkit-slider-thumb{transition:none}.rs-thumb::-webkit-slider-thumb:hover{transform:none}}@media(forced-colors:active){.rs-thumb::-webkit-slider-thumb{background:ButtonText;border-color:Canvas}.rs-thumb::-moz-range-thumb{background:ButtonText;border-color:Canvas}.rs-thumb:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px CanvasText}}.rs-thumb:disabled{cursor:not-allowed}.rs-track-wrap:has(.rs-thumb:disabled){opacity:.5}.rs-values{font-size:10px;font-weight:500;color:var(--fold-color-text-muted);text-align:center;font-variant-numeric:tabular-nums}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldRangeSliderComponent, decorators: [{
             type: Component,
             args: [{ selector: "fold-range-slider", standalone: true, template: "<div class=\"rs\" role=\"group\" [attr.aria-labelledby]=\"labelId\">\n  <span class=\"rs-label\" [id]=\"labelId\">{{ label() }}</span>\n  <div class=\"rs-track-wrap\">\n    <div class=\"rs-track\">\n      <div\n        class=\"rs-fill\"\n        [style.left.%]=\"fillLeft()\"\n        [style.width.%]=\"fillWidth()\"\n      ></div>\n    </div>\n    <input\n      type=\"range\"\n      class=\"rs-thumb rs-thumb--min\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [value]=\"currentMin()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"label() + ' ' + minLabel()\"\n      [attr.aria-valuetext]=\"formatValue(currentMin())\"\n      (input)=\"onMinChange($event)\"\n    />\n    <input\n      type=\"range\"\n      class=\"rs-thumb rs-thumb--max\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [value]=\"currentMax()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"label() + ' ' + maxLabel()\"\n      [attr.aria-valuetext]=\"formatValue(currentMax())\"\n      (input)=\"onMaxChange($event)\"\n    />\n  </div>\n  <span class=\"rs-values\"\n    >{{ formatValue(currentMin()) }} \u2013 {{ formatValue(currentMax()) }}</span\n  >\n</div>\n", styles: [":host{display:block}.rs{display:flex;flex-direction:column;gap:var(--fold-space-xs)}.rs-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--fold-color-text-muted)}.rs-track-wrap{position:relative;height:20px}.rs-track{position:absolute;top:50%;left:0;right:0;height:4px;transform:translateY(-50%);background:var(--fold-color-border-subtle);border-radius:2px}.rs-fill{position:absolute;height:100%;background:var(--fold-color-primary);border-radius:2px}.rs-thumb{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;-webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;outline:none}.rs-thumb::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--fold-color-primary);border:2px solid var(--fold-color-surface-card);cursor:pointer;pointer-events:auto;transition:transform var(--fold-motion-fast)}.rs-thumb::-webkit-slider-thumb:hover{transform:scale(1.2)}.rs-thumb::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--fold-color-primary);border:2px solid var(--fold-color-surface-card);cursor:pointer;pointer-events:auto}.rs-thumb:focus-visible{outline:none}.rs-thumb:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--fold-color-primary) 30%,transparent)}.rs-thumb:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--fold-color-primary) 30%,transparent)}@media(prefers-reduced-motion:reduce){.rs-thumb::-webkit-slider-thumb{transition:none}.rs-thumb::-webkit-slider-thumb:hover{transform:none}}@media(forced-colors:active){.rs-thumb::-webkit-slider-thumb{background:ButtonText;border-color:Canvas}.rs-thumb::-moz-range-thumb{background:ButtonText;border-color:Canvas}.rs-thumb:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px CanvasText}}.rs-thumb:disabled{cursor:not-allowed}.rs-track-wrap:has(.rs-thumb:disabled){opacity:.5}.rs-values{font-size:10px;font-weight:500;color:var(--fold-color-text-muted);text-align:center;font-variant-numeric:tabular-nums}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], 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 }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], minLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLabel", required: false }] }], maxLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLabel", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], 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 }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], minLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLabel", required: false }] }], maxLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLabel", required: false }] }] } });
 
 /** Default glyph per variant — overridable with the `icon` input. */
 const DEFAULT_ICON = {
@@ -8819,5 +8847,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FOLD_AUTO_PALETTES, FOLD_BLUR_TOKENS, FOLD_BUILTIN_ICONS, FOLD_DATA_TABLE_DEFAULT_LABELS, FOLD_DATA_TABLE_LABELS, FOLD_INLINE_CONFIRM_DEFAULT_LABELS, FOLD_INLINE_CONFIRM_LABELS, FOLD_MOTION_TOKENS, FOLD_PAGINATOR_DEFAULT_LABELS, FOLD_PAGINATOR_LABELS, FOLD_PALETTE_DEFAULT, FOLD_PANEL_CLOSE_LABEL, FOLD_RADIUS_TOKENS, FOLD_SEMANTIC_COLOR_TOKENS, FOLD_SHADOW_TOKENS, FOLD_SPACE_TOKENS, FOLD_TEXT_TOKENS, FOLD_TOAST_CONFIG, FoldAppShellComponent, FoldAsideLayoutComponent, FoldAvatarComponent, FoldAvatarDetailComponent, FoldAvatarListComponent, FoldBadgeComponent, FoldButtonComponent, FoldButtonIconComponent, FoldCalloutComponent, FoldCardComponent, FoldCheckboxComponent, FoldChoiceRowComponent, FoldContextCardComponent, FoldDataTableCellDirective, FoldDataTableComponent, FoldDataTableRowCardDirective, FoldDisclosureComponent, FoldDropdownComponent, FoldDropdownItemComponent, FoldElementTitleComponent, FoldElevatedDirective, FoldEmptyStateComponent, FoldFieldComponent, FoldFieldIdDirective, FoldFieldListComponent, FoldFileDropzoneComponent, FoldHeroCardComponent, FoldHeroSectionComponent, FoldIconComponent, FoldIconRegistry, FoldIdService, FoldInlineConfirmComponent, FoldInputComponent, FoldLinkComponent, FoldListboxComponent, FoldLoadingStateComponent, FoldMenuComponent, FoldMenuItemComponent, FoldMenuSectionComponent, FoldMenuSeparatorComponent, FoldMultiselectComponent, FoldNavLauncherComponent, FoldNavLayoutComponent, FoldNavTileComponent, FoldNumberInputComponent, FoldOptionComponent, FoldPageLayoutComponent, FoldPageSectionComponent, FoldPageTitleDirective, FoldPaginatorComponent, FoldPaletteRegistry, FoldPanelComponentOutletDirective, FoldPanelHeaderComponent, FoldPanelHostComponent, FoldPanelHostService, FoldPanelRef, FoldPanelToggle, FoldPasswordFieldComponent, FoldPopoverComponent, FoldPopoverTriggerDirective, FoldRangeSliderComponent, FoldRepeatPressDirective, FoldSearchComponent, FoldSelectComponent, FoldSliderComponent, FoldSpinnerComponent, FoldStatusBadgeComponent, FoldStickyColumnDirective, FoldSurfaceDirective, FoldTabPanelComponent, FoldTabsComponent, FoldTimelineComponent, FoldToastComponent, FoldToastContainerComponent, FoldToastService, FoldToggleIconComponent, FoldViewNavComponent, FoldViewToggleComponent, autoUpdate, computePlacement, foldBlurVar, foldColorProperty, foldColorVar, foldDefaultPasswordRules, foldHashSeed, foldMotionVar, foldRadiusVar, foldRegexRule, foldResolvePalette, foldShadowVar, foldSpaceVar, foldTextVar, observeElementWidth, provideFoldDataTableLabels, provideFoldIcons, provideFoldInlineConfirmLabels, provideFoldPaginatorLabels, provideFoldPalette, provideFoldPanelLabels, provideFoldToasts };
+export { FOLD_AUTO_PALETTES, FOLD_BLUR_TOKENS, FOLD_BUILTIN_ICONS, FOLD_DATA_TABLE_DEFAULT_LABELS, FOLD_DATA_TABLE_LABELS, FOLD_INLINE_CONFIRM_DEFAULT_LABELS, FOLD_INLINE_CONFIRM_LABELS, FOLD_MOTION_TOKENS, FOLD_PAGINATOR_DEFAULT_LABELS, FOLD_PAGINATOR_LABELS, FOLD_PALETTE_DEFAULT, FOLD_PANEL_CLOSE_LABEL, FOLD_RADIUS_TOKENS, FOLD_SEMANTIC_COLOR_TOKENS, FOLD_SHADOW_TOKENS, FOLD_SPACE_TOKENS, FOLD_TEXT_TOKENS, FOLD_TOAST_CONFIG, FoldAppShellComponent, FoldAsideLayoutComponent, FoldAvatarComponent, FoldAvatarDetailComponent, FoldAvatarListComponent, FoldBadgeComponent, FoldButtonComponent, FoldButtonIconComponent, FoldCalloutComponent, FoldCardComponent, FoldCheckboxComponent, FoldChoiceRowComponent, FoldContextCardComponent, FoldDataTableCellDirective, FoldDataTableComponent, FoldDataTableRowCardDirective, FoldDisclosureComponent, FoldDropdownComponent, FoldDropdownItemComponent, FoldElementTitleComponent, FoldElevatedDirective, FoldEmptyStateComponent, FoldFieldComponent, FoldFieldIdDirective, FoldFieldListComponent, FoldFileDropzoneComponent, FoldHeroCardComponent, FoldHeroSectionComponent, FoldIconComponent, FoldIconRegistry, FoldIdService, FoldInlineConfirmComponent, FoldInputComponent, FoldLinkComponent, FoldListboxComponent, FoldLoadingStateComponent, FoldMenuComponent, FoldMenuItemComponent, FoldMenuSectionComponent, FoldMenuSeparatorComponent, FoldMultiselectComponent, FoldNavLauncherComponent, FoldNavLayoutComponent, FoldNavTileComponent, FoldNumberInputComponent, FoldOptionComponent, FoldPageLayoutComponent, FoldPageSectionComponent, FoldPageTitleDirective, FoldPaginatorComponent, FoldPaletteRegistry, FoldPanelComponentOutletDirective, FoldPanelHeaderComponent, FoldPanelHostComponent, FoldPanelHostService, FoldPanelRef, FoldPanelToggle, FoldPasswordFieldComponent, FoldPopoverComponent, FoldPopoverTriggerDirective, FoldRangeSliderComponent, FoldRepeatPressDirective, FoldSearchComponent, FoldSelectComponent, FoldSliderComponent, FoldSpinnerComponent, FoldStatusBadgeComponent, FoldStickyColumnDirective, FoldSurfaceDirective, FoldTabPanelComponent, FoldTabsComponent, FoldTimelineComponent, FoldToastComponent, FoldToastContainerComponent, FoldToastService, FoldToggleIconComponent, FoldViewNavComponent, FoldViewToggleComponent, autoUpdate, computePlacement, foldBlurVar, foldCardBandChrome, foldColorProperty, foldColorVar, foldDefaultPasswordRules, foldHashSeed, foldMotionVar, foldRadiusVar, foldRegexRule, foldResolvePalette, foldShadowVar, foldSpaceVar, foldTextVar, observeElementWidth, provideFoldDataTableLabels, provideFoldIcons, provideFoldInlineConfirmLabels, provideFoldPaginatorLabels, provideFoldPalette, provideFoldPanelLabels, provideFoldToasts };
 //# sourceMappingURL=fold-ng.mjs.map