@wildmason/aegis 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -18,6 +18,56 @@ that 404s.
 
 ## [Unreleased]
 
+## [2.1.0] - 2026-09-20
+
+Minor: one new component and its inputs. Nothing existing changes, so a consumer
+on `^2.0.0` picks this up on its next install and nothing it already names moves.
+
+### Added
+
+- `<wm-slider>` (`WmSlider`) — bounded continuous value selection, exported from
+  `@wildmason/aegis/components` with its `WmSliderTick` type. Built on a native
+  `<input type="range">`, so pointer drag, touch, arrow keys, `Page Up`/`Page
+  Down`, `Home`/`End`, RTL mirroring and the `role="slider"` semantics come from
+  the browser. Every value — two-way `[(value)]` binding, form write, or drag —
+  is clamped into `min`…`max` and snapped onto the step grid measured from
+  `min`, then written back, so the binding, the form control and the thumb never
+  disagree. Implements `ControlValueAccessor`. `ticks` draws labelled stops under
+  the rail; `showValue` renders a readout, and `formatValue` formats it and sets
+  `aria-valuetext`. Host knobs: `--wm-slider-thumb`, `--wm-slider-track`.
+  Documented at the `slider` guide page, served by the MCP, and specified in
+  `DESIGN_LANGUAGE.md` §7.6a.
+- `WmSlider` `track` input — `'rail'` (default) or `'segmented'`. A segmented
+  track breaks the rail into blocks bounded by the resolved tick grid plus the
+  ends of the range, sized by their own spans, with the block holding the value
+  filling partially. Knob: `--wm-slider-gap` (3px). There is no `'auto'`
+  degradation, deliberately.
+- `WmSlider` `ticks` accepts a **number** (a stop every N from `min`), a
+  `WmSliderTick[]`, or a `WmSliderTickFn` of `{ min, max, step }`, all exported.
+  `WmSliderTick` gains `level?: 'major' | 'minor'` for a second grid density.
+  The resolved grid is clamped, sorted and de-duplicated, and it both draws the
+  marks and bounds the segments — one source, two renderings, so a block and the
+  mark on its edge cannot disagree. A numeric interval that would draw over 1000
+  marks draws none rather than truncating or hanging. The grid stays independent
+  of `step`, so a 0–100 slider stepping by 1 can carry an 11-mark grid.
+- `WmSlider` `showValue` reserves its column from the widest string the readout
+  can hold — the formatted endpoints plus every labelled stop — instead of from
+  the current value. The shell is `1fr auto`, so a column that grew with its text
+  took width from the rail and gave it back on the next value; with word labels
+  the bar moved while the user dragged it. Unlabelled stops are ignored, so a
+  101-mark numeric grid reserves two strings rather than 101.
+
+### Fixed
+
+- The MCP server served every guide page with its code samples missing. The
+  extractor decoded HTML entities in its `<pre>` pass, before the document-wide
+  tag strip, so an escaped sample — every Angular template in the docs — became
+  real tags and was deleted as markup. Entities now stay encoded until after the
+  strip and are decoded once at the end, with `&amp;` last so a double-escaped
+  sequence cannot be decoded twice. `&#123;` and `&#125;` are decoded for the
+  first time, so Angular interpolation braces survive. `mcp/` gains its first
+  tests: 8 cases under `node --test`, run by `npm test` in that package.
+
 ## [2.0.0] - 2026-09-15
 
 Major version because two exports go away: the license UI leaves
@@ -411,7 +461,9 @@ a `^1.x` range does not pick this release up by accident.
 Releases before 1.8.0 are in `git log`. See also `wiki/products/Aegis - Health.md`
 for the decisions behind these changes, including the ones decided against.
 
-[Unreleased]: https://github.com/wildmason/aegis/compare/v1.18.0...HEAD
+[Unreleased]: https://github.com/wildmason/aegis/compare/v2.1.0...HEAD
+[2.1.0]: https://github.com/wildmason/aegis/releases/tag/v2.1.0
+[2.0.0]: https://github.com/wildmason/aegis/releases/tag/v2.0.0
 [1.18.0]: https://github.com/wildmason/aegis/releases/tag/v1.18.0
 [1.17.0]: https://github.com/wildmason/aegis/releases/tag/v1.17.0
 [1.16.0]: https://github.com/wildmason/aegis/releases/tag/v1.16.0

package/dist/fesm2022/wildmason-aegis.mjs

@@ -783,6 +783,332 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
             args: [{ selector: 'wm-toggle', template: "<button\n  type=\"button\"\n  role=\"switch\"\n  class=\"wm-toggle\"\n  [class.is-on]=\"checked()\"\n  [class.is-disabled]=\"disabled()\"\n  [attr.aria-checked]=\"checked()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-disabled]=\"disabled() ? true : null\"\n  [disabled]=\"disabled() || null\"\n  (click)=\"toggle()\"\n>\n  <span class=\"wm-toggle-track\" aria-hidden=\"true\">\n    <span class=\"wm-toggle-thumb\"></span>\n  </span>\n</button>\n", styles: [":host{display:inline-flex}.wm-toggle{display:inline-flex;align-items:center;background:none;border:none;padding:2px;margin:-2px;cursor:pointer;border-radius:var(--wm-radius-full);outline:none}.wm-toggle:focus-visible .wm-toggle-track{outline:2px solid var(--wm-color-accent);outline-offset:2px}.wm-toggle.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.wm-toggle-track{position:relative;width:40px;height:22px;background:var(--wm-border-input);border-radius:var(--wm-radius-full);transition:background var(--wm-transition-fast);flex-shrink:0}.wm-toggle.is-on .wm-toggle-track{background:var(--wm-color-accent)}.wm-toggle-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:var(--wm-radius-full);box-shadow:0 1px 3px #00000040;transition:transform var(--wm-transition-fast)}.wm-toggle.is-on .wm-toggle-thumb{transform:translate(18px)}@media(prefers-reduced-motion:reduce){.wm-toggle-track,.wm-toggle-thumb{transition:none}}\n"] }]
         }], 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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
+/**
+ * Upper bound on generated marks. A numeric interval that would exceed it draws
+ * NOTHING rather than a truncated grid or a frozen tab: an empty rail is
+ * obviously wrong to whoever set it, where a silently shortened grid is not.
+ */
+const MAX_TICKS = 1000;
+/**
+ * Upper bound on reserved readout strings. Only labelled stops reach this, so
+ * it is a guard against a pathological grid rather than a limit anyone meets.
+ */
+const MAX_VALUE_CANDIDATES = 64;
+/**
+ * WmSlider — Continuous value selection along a bounded range.
+ *
+ * Built on a native `<input type="range">`. The native control is the whole
+ * interaction: pointer drag, touch, arrow keys, Home/End, Page Up/Page Down,
+ * RTL mirroring and the implicit `role="slider"` with `aria-valuenow` all come
+ * from the browser rather than from hand-written handlers. Aegis styles the
+ * track and thumb through the range pseudo-elements, so there is no invisible
+ * overlay input and no drag maths to get wrong.
+ *
+ * When to use:
+ *  - A bounded value where the approximate position matters more than the exact
+ *    number (volume, opacity, zoom, a brightness or threshold setting)
+ *  - A value the user wants to sweep through and preview as it changes
+ *
+ * When NOT to use:
+ *  - An exact number the user knows before they start typing it → <wm-number-input>
+ *  - Fewer than about five discrete choices → <wm-select> or a pill tab group
+ *  - An unbounded value — a slider has to have a min and a max
+ *
+ * Value pipeline: every value, whether it arrives from a two-way binding, a
+ * form, or a drag, is clamped into min..max and snapped onto the step grid
+ * measured FROM MIN. The snapped value is written back, so the binding, the
+ * form control and the thumb never disagree.
+ *
+ * Accessibility:
+ *  - The native input is the focusable control and carries the slider role.
+ *  - `ariaLabel` is required unless visible surrounding text names the control.
+ *  - `formatValue` also drives `aria-valuetext`, so a screen reader announces
+ *    "40 percent" rather than "40" when the raw number means nothing alone.
+ *  - Ticks and the value readout are decoration; the native value is the truth.
+ *
+ * Form integration:
+ *   <!-- Template-driven -->
+ *   <wm-slider [(ngModel)]="volume" [min]="0" [max]="100" />
+ *
+ *   <!-- Reactive -->
+ *   <wm-slider formControlName="opacity" [min]="0" [max]="1" [step]="0.05" />
+ *
+ *   <!-- Two-way signal binding, no forms -->
+ *   <wm-slider [(value)]="volume" ariaLabel="Volume" />
+ */
+class WmSlider {
+    /** Two-way bindable value. Always reads back clamped and snapped to the step grid. */
+    value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Lower bound, inclusive. */
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Upper bound, inclusive. Values never exceed it, even when it is off the step grid. */
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Grid spacing, measured from `min`. Use 0 for a continuous slider. */
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /** Disables the control from the template. Reactive forms set this independently. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Accessible name. Required unless visible text already names the control. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Shows a live readout beside the rail. */
+    showValue = input(false, ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Renders the value for humans. Also sets `aria-valuetext`, so pass one
+     * whenever the bare number would not be understood on its own.
+     */
+    formatValue = input(null, ...(ngDevMode ? [{ debugName: "formatValue" }] : /* istanbul ignore next */ []));
+    /**
+     * How the track is drawn. `rail` is one continuous bar. `segmented` breaks it
+     * into blocks bounded by the grid stops, and the block holding the value fills
+     * partially — so a segmented track does not have to mean one block per step,
+     * and survives a dense range that one-block-per-step cannot.
+     */
+    track = input('rail', ...(ngDevMode ? [{ debugName: "track" }] : /* istanbul ignore next */ []));
+    /**
+     * The grid, in one of three shapes:
+     *  - a **number** — a stop every N, measured from `min`
+     *  - an **array** of {@link WmSliderTick} — explicit stops, with labels and levels
+     *  - a **{@link WmSliderTickFn}** — computed from the live range
+     *
+     * Whatever the shape, the result is clamped to the range, sorted, and
+     * de-duplicated. The same resolved grid draws the marks AND bounds the blocks
+     * of a segmented track, so the two renderings cannot disagree.
+     *
+     * The grid is deliberately independent of `step`: a 0–100 slider stepping by 1
+     * carries 101 reachable values and should still draw about 11 marks.
+     */
+    ticks = input([], ...(ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []));
+    /** Set by reactive forms through setDisabledState, independent of the input. */
+    formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** Position of the thumb across the span, 0..1, as a CSS-ready string. */
+    fraction = computed(() => trim(this.fractionOf(this.value())), ...(ngDevMode ? [{ debugName: "fraction" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => {
+        const format = this.formatValue();
+        return format ? format(this.value()) : String(this.value());
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Every string the readout can show at a grid stop, de-duplicated.
+     *
+     * The shell is `1fr auto`, so a readout column sized by the CURRENT value
+     * takes its width from the rail and gives it back on the next value — the bar
+     * moves while you drag it. Rendering these hidden in the readout's own grid
+     * cell makes the browser reserve the widest of them once, with no measuring.
+     *
+     * Only LABELLED stops contribute. An unlabelled stop is a position rather
+     * than a word, and a numeric readout is already bounded by tabular numerals
+     * and the two endpoints — so a 101-mark grid reserves two slots, not 101.
+     */
+    valueCandidates = computed(() => {
+        const format = this.formatValue();
+        const render = (value) => (format ? format(value) : String(value));
+        const values = [
+            this.min(),
+            this.max(),
+            ...this.resolvedTicks()
+                .filter(tick => tick.label !== undefined)
+                .map(tick => tick.value),
+        ];
+        const out = new Set();
+        for (const value of values) {
+            out.add(render(value));
+            if (out.size >= MAX_VALUE_CANDIDATES)
+                break;
+        }
+        return [...out];
+    }, ...(ngDevMode ? [{ debugName: "valueCandidates" }] : /* istanbul ignore next */ []));
+    /** Null unless a formatter is set — a valuetext echoing valuenow is noise. */
+    valueText = computed(() => {
+        const format = this.formatValue();
+        return format ? format(this.value()) : null;
+    }, ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
+    /** The declared grid, before it is measured against the range. */
+    declaredTicks = computed(() => {
+        const raw = this.ticks();
+        if (typeof raw === 'number') {
+            return gridEvery(this.min(), this.max(), raw);
+        }
+        if (typeof raw === 'function') {
+            return raw({ min: this.min(), max: this.max(), step: this.step() }) ?? [];
+        }
+        return raw ?? [];
+    }, ...(ngDevMode ? [{ debugName: "declaredTicks" }] : /* istanbul ignore next */ []));
+    resolvedTicks = computed(() => {
+        const min = this.min();
+        const max = this.max();
+        const current = this.value();
+        const seen = new Set();
+        return this.declaredTicks()
+            .filter(tick => tick.value >= min && tick.value <= max)
+            // A duplicate value is not cosmetic — two marks at one value collide on
+            // the @for track key and Angular throws. First declaration wins, so an
+            // explicit label is never dropped in favour of a bare repeat.
+            .filter(tick => {
+            if (seen.has(tick.value))
+                return false;
+            seen.add(tick.value);
+            return true;
+        })
+            .sort((a, b) => a.value - b.value)
+            .map(tick => {
+            const fraction = this.fractionOf(tick.value);
+            return {
+                ...tick,
+                level: tick.level ?? 'major',
+                fraction,
+                left: `calc(var(--wm-slider-thumb) / 2 + ${trim(fraction)} * (100% - var(--wm-slider-thumb)))`,
+                passed: tick.value <= current,
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "resolvedTicks" }] : /* istanbul ignore next */ []));
+    /**
+     * Blocks of a segmented track. The boundaries are the grid stops plus the two
+     * ends of the range, so the blocks are the intervals BETWEEN stops — which is
+     * what a block can honestly represent. Each one is sized by its own span, so
+     * an uneven grid produces uneven blocks rather than lying about the scale.
+     */
+    segments = computed(() => {
+        if (this.track() !== 'segmented')
+            return [];
+        const min = this.min();
+        const max = this.max();
+        if (max <= min)
+            return [];
+        const current = this.value();
+        const bounds = [...new Set([min, ...this.resolvedTicks().map(t => t.value), max])].sort((a, b) => a - b);
+        const out = [];
+        for (let i = 0; i < bounds.length - 1; i++) {
+            const from = bounds[i];
+            const to = bounds[i + 1];
+            const span = to - from;
+            if (span <= 0)
+                continue;
+            const fill = Math.min(Math.max((current - from) / span, 0), 1);
+            out.push({
+                from,
+                to,
+                span,
+                fill,
+                passed: fill >= 1,
+                current: fill > 0 && fill < 1,
+            });
+        }
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []));
+    hasTickLabels = computed(() => this.resolvedTicks().some(tick => tick.label !== undefined), ...(ngDevMode ? [{ debugName: "hasTickLabels" }] : /* istanbul ignore next */ []));
+    onChangeFn = () => { };
+    onTouchedFn = () => { };
+    constructor() {
+        // Normalisation runs on the value itself rather than on a derived signal,
+        // so a caller that binds [(value)] or a form control gets the corrected
+        // number back instead of holding one the thumb does not sit on.
+        effect(() => {
+            const resolved = this.resolve(this.value());
+            if (resolved !== this.value()) {
+                this.value.set(resolved);
+                this.onChangeFn(resolved);
+            }
+        });
+    }
+    writeValue(value) {
+        this.value.set(this.resolve(value ?? this.min()));
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    onRangeInput(event) {
+        const resolved = this.resolve(Number(event.target.value));
+        this.value.set(resolved);
+        this.onChangeFn(resolved);
+    }
+    /** Clamps into min..max, then snaps onto the step grid measured from min. */
+    resolve(raw) {
+        const min = this.min();
+        const max = this.max();
+        if (!Number.isFinite(raw))
+            return min;
+        if (max <= min)
+            return min;
+        const clamped = Math.min(Math.max(raw, min), max);
+        const step = this.step();
+        if (!Number.isFinite(step) || step <= 0)
+            return clamped;
+        // Rounding through a fixed number of decimals keeps a 0.1 grid on 0.3
+        // rather than 0.30000000000000004, which would then render and compare
+        // as a different number than the one the caller asked for.
+        const decimals = decimalsOf(step) + decimalsOf(min);
+        const snapped = round(min + Math.round((clamped - min) / step) * step, decimals);
+        // Snapping up can overshoot a max that is not a whole number of steps
+        // above min; the last reachable stop is one step back.
+        return snapped > max ? round(snapped - step, decimals) : snapped;
+    }
+    fractionOf(value) {
+        const span = this.max() - this.min();
+        if (span <= 0)
+            return 0;
+        return (value - this.min()) / span;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WmSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: WmSlider, isStandalone: true, selector: "wm-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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, formatValue: { classPropertyName: "formatValue", publicName: "formatValue", isSignal: true, isRequired: false, transformFunction: null }, track: { classPropertyName: "track", publicName: "track", isSignal: true, isRequired: false, transformFunction: null }, ticks: { classPropertyName: "ticks", publicName: "ticks", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => WmSlider),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<!--\n  The native <input type=\"range\"> is the control, not a decoration over one:\n  its track and thumb are the styled surfaces. --wm-slider-p carries the thumb\n  position to the CSS so the filled part of the track, every tick and every\n  block are placed from the same number the thumb is.\n-->\n<div\n  class=\"wm-slider\"\n  [attr.data-track]=\"track()\"\n  [class.is-disabled]=\"isDisabled()\"\n  [class.has-ticks]=\"resolvedTicks().length > 0\"\n  [style.--wm-slider-p]=\"fraction()\"\n>\n  <div class=\"wm-slider-rail\">\n    @if (segments().length > 0) {\n      <!--\n        Blocks sit under the transparent native track. They are bounded by the\n        same resolved grid the marks come from, so a block and the mark on its\n        edge can never disagree about where a value falls.\n      -->\n      <div class=\"wm-slider-segments\" aria-hidden=\"true\">\n        @for (segment of segments(); track segment.from) {\n          <span\n            class=\"wm-slider-seg\"\n            [class.is-passed]=\"segment.passed\"\n            [class.is-current]=\"segment.current\"\n            [style.flexGrow]=\"segment.span\"\n            [style.--wm-slider-seg-p]=\"segment.fill\"\n          ></span>\n        }\n      </div>\n    }\n\n    @if (resolvedTicks().length > 0) {\n      <div class=\"wm-slider-ticks\" aria-hidden=\"true\">\n        @for (tick of resolvedTicks(); track tick.value) {\n          <span\n            class=\"wm-slider-tick\"\n            [class.wm-slider-tick--minor]=\"tick.level === 'minor'\"\n            [class.is-passed]=\"tick.passed\"\n            [style.left]=\"tick.left\"\n          ></span>\n        }\n      </div>\n    }\n\n    <input\n      class=\"wm-slider-input\"\n      type=\"range\"\n      [value]=\"value()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step() > 0 ? step() : 'any'\"\n      [disabled]=\"isDisabled() || null\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-valuetext]=\"valueText()\"\n      (input)=\"onRangeInput($event)\"\n      (blur)=\"onTouchedFn()\"\n    />\n  </div>\n\n  @if (showValue()) {\n    <!--\n      The sizers stack on the output in one grid cell, so the column reserves\n      the widest string the readout can hold and stops stealing width from the\n      rail every time the value changes.\n    -->\n    <div class=\"wm-slider-value-cell\">\n      <output class=\"wm-slider-value\">{{ displayValue() }}</output>\n      @for (candidate of valueCandidates(); track candidate) {\n        <span class=\"wm-slider-value-sizer\" aria-hidden=\"true\">{{ candidate }}</span>\n      }\n    </div>\n  }\n\n  @if (hasTickLabels()) {\n    <div class=\"wm-slider-tick-labels\" aria-hidden=\"true\">\n      @for (tick of resolvedTicks(); track tick.value) {\n        @if (tick.label !== undefined) {\n          <span class=\"wm-slider-tick-label\" [style.left]=\"tick.left\">{{ tick.label }}</span>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.wm-slider{--wm-slider-thumb: 16px;--wm-slider-track: 4px;--wm-slider-gap: 3px;--wm-slider-p: 0;--wm-slider-stop: calc( var(--wm-slider-thumb) / 2 + var(--wm-slider-p) * (100% - var(--wm-slider-thumb)) );--wm-slider-fill: linear-gradient( to right, var(--wm-color-accent) 0 var(--wm-slider-stop), var(--wm-border-input) var(--wm-slider-stop) 100% );display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:.75rem;row-gap:.375rem}.wm-slider-rail{position:relative;min-width:0}.wm-slider.has-ticks .wm-slider-rail{margin-bottom:10px}.wm-slider-input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:var(--wm-slider-thumb);margin:0;padding:0;background:transparent;cursor:pointer;position:relative;z-index:1}.wm-slider-input:focus{outline:none}.wm-slider-input::-webkit-slider-runnable-track{height:var(--wm-slider-track);border-radius:var(--wm-radius-full);background:var(--wm-slider-fill)}.wm-slider-input::-webkit-slider-thumb{-webkit-appearance:none;width:var(--wm-slider-thumb);height:var(--wm-slider-thumb);margin-top:calc((var(--wm-slider-track) - var(--wm-slider-thumb)) / 2);border-radius:var(--wm-radius-full);background:var(--wm-color-accent);border:2px solid var(--wm-bg-base);box-shadow:var(--wm-shadow-sm);transition:background var(--wm-transition-fast),transform var(--wm-transition-fast)}.wm-slider-input:hover::-webkit-slider-thumb{background:var(--wm-color-accent-hover);transform:scale(1.12)}.wm-slider-input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--wm-bg-base),0 0 0 4px var(--wm-color-accent)}.wm-slider-input::-moz-range-track{height:var(--wm-slider-track);border-radius:var(--wm-radius-full);background:var(--wm-slider-fill)}.wm-slider-input::-moz-range-thumb{width:var(--wm-slider-thumb);height:var(--wm-slider-thumb);box-sizing:border-box;border-radius:var(--wm-radius-full);background:var(--wm-color-accent);border:2px solid var(--wm-bg-base);box-shadow:var(--wm-shadow-sm);transition:background var(--wm-transition-fast),transform var(--wm-transition-fast)}.wm-slider-input:hover::-moz-range-thumb{background:var(--wm-color-accent-hover);transform:scale(1.12)}.wm-slider-input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--wm-bg-base),0 0 0 4px var(--wm-color-accent)}.wm-slider-ticks{position:absolute;inset-inline:0;top:100%;margin-top:2px;height:6px;pointer-events:none}.wm-slider-tick{position:absolute;top:0;width:2px;height:6px;margin-left:-1px;border-radius:1px;background:var(--wm-border-input);transition:background var(--wm-transition-fast)}.wm-slider-tick.is-passed{background:var(--wm-color-accent)}.wm-slider-tick--minor{height:3px;background:var(--wm-border-subtle)}.wm-slider-tick--minor.is-passed{background:color-mix(in srgb,var(--wm-color-accent) 55%,transparent)}.wm-slider[data-track=segmented]{--wm-slider-fill: none}.wm-slider-segments{position:absolute;inset:0 calc(var(--wm-slider-thumb) / 2);display:flex;align-items:center;gap:var(--wm-slider-gap);pointer-events:none}.wm-slider-seg{flex-basis:0;min-width:0;height:var(--wm-slider-track);border-radius:1px;background:var(--wm-border-input);transition:background var(--wm-transition-fast)}.wm-slider-seg.is-passed{background:var(--wm-color-accent)}.wm-slider-seg.is-current{background-image:linear-gradient(var(--wm-color-accent) 0 0);background-repeat:no-repeat;background-size:calc(var(--wm-slider-seg-p, 0) * 100%) 100%}.wm-slider-tick-labels{position:relative;grid-column:1;height:1rem}.wm-slider-tick-label{position:absolute;top:0;transform:translate(-50%);font-size:.75rem;color:var(--wm-text-muted);white-space:nowrap}.wm-slider-value-cell{grid-area:1 / 2;display:grid;justify-items:end}.wm-slider-value,.wm-slider-value-sizer{grid-area:1 / 1;font-family:var(--wm-font-mono);font-size:.8125rem;font-variant-numeric:tabular-nums;white-space:nowrap}.wm-slider-value{color:var(--wm-text-secondary);min-width:4ch;text-align:right}.wm-slider-value-sizer{visibility:hidden;pointer-events:none}.wm-slider.is-disabled{opacity:.5}.wm-slider-input:disabled{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.wm-slider-input::-webkit-slider-thumb,.wm-slider-input::-moz-range-thumb,.wm-slider-tick{transition:none}.wm-slider-input:hover::-webkit-slider-thumb,.wm-slider-input:hover::-moz-range-thumb{transform:none}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WmSlider, decorators: [{
+            type: Component,
+            args: [{ selector: 'wm-slider', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => WmSlider),
+                            multi: true,
+                        },
+                    ], template: "<!--\n  The native <input type=\"range\"> is the control, not a decoration over one:\n  its track and thumb are the styled surfaces. --wm-slider-p carries the thumb\n  position to the CSS so the filled part of the track, every tick and every\n  block are placed from the same number the thumb is.\n-->\n<div\n  class=\"wm-slider\"\n  [attr.data-track]=\"track()\"\n  [class.is-disabled]=\"isDisabled()\"\n  [class.has-ticks]=\"resolvedTicks().length > 0\"\n  [style.--wm-slider-p]=\"fraction()\"\n>\n  <div class=\"wm-slider-rail\">\n    @if (segments().length > 0) {\n      <!--\n        Blocks sit under the transparent native track. They are bounded by the\n        same resolved grid the marks come from, so a block and the mark on its\n        edge can never disagree about where a value falls.\n      -->\n      <div class=\"wm-slider-segments\" aria-hidden=\"true\">\n        @for (segment of segments(); track segment.from) {\n          <span\n            class=\"wm-slider-seg\"\n            [class.is-passed]=\"segment.passed\"\n            [class.is-current]=\"segment.current\"\n            [style.flexGrow]=\"segment.span\"\n            [style.--wm-slider-seg-p]=\"segment.fill\"\n          ></span>\n        }\n      </div>\n    }\n\n    @if (resolvedTicks().length > 0) {\n      <div class=\"wm-slider-ticks\" aria-hidden=\"true\">\n        @for (tick of resolvedTicks(); track tick.value) {\n          <span\n            class=\"wm-slider-tick\"\n            [class.wm-slider-tick--minor]=\"tick.level === 'minor'\"\n            [class.is-passed]=\"tick.passed\"\n            [style.left]=\"tick.left\"\n          ></span>\n        }\n      </div>\n    }\n\n    <input\n      class=\"wm-slider-input\"\n      type=\"range\"\n      [value]=\"value()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step() > 0 ? step() : 'any'\"\n      [disabled]=\"isDisabled() || null\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-valuetext]=\"valueText()\"\n      (input)=\"onRangeInput($event)\"\n      (blur)=\"onTouchedFn()\"\n    />\n  </div>\n\n  @if (showValue()) {\n    <!--\n      The sizers stack on the output in one grid cell, so the column reserves\n      the widest string the readout can hold and stops stealing width from the\n      rail every time the value changes.\n    -->\n    <div class=\"wm-slider-value-cell\">\n      <output class=\"wm-slider-value\">{{ displayValue() }}</output>\n      @for (candidate of valueCandidates(); track candidate) {\n        <span class=\"wm-slider-value-sizer\" aria-hidden=\"true\">{{ candidate }}</span>\n      }\n    </div>\n  }\n\n  @if (hasTickLabels()) {\n    <div class=\"wm-slider-tick-labels\" aria-hidden=\"true\">\n      @for (tick of resolvedTicks(); track tick.value) {\n        @if (tick.label !== undefined) {\n          <span class=\"wm-slider-tick-label\" [style.left]=\"tick.left\">{{ tick.label }}</span>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.wm-slider{--wm-slider-thumb: 16px;--wm-slider-track: 4px;--wm-slider-gap: 3px;--wm-slider-p: 0;--wm-slider-stop: calc( var(--wm-slider-thumb) / 2 + var(--wm-slider-p) * (100% - var(--wm-slider-thumb)) );--wm-slider-fill: linear-gradient( to right, var(--wm-color-accent) 0 var(--wm-slider-stop), var(--wm-border-input) var(--wm-slider-stop) 100% );display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:.75rem;row-gap:.375rem}.wm-slider-rail{position:relative;min-width:0}.wm-slider.has-ticks .wm-slider-rail{margin-bottom:10px}.wm-slider-input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:var(--wm-slider-thumb);margin:0;padding:0;background:transparent;cursor:pointer;position:relative;z-index:1}.wm-slider-input:focus{outline:none}.wm-slider-input::-webkit-slider-runnable-track{height:var(--wm-slider-track);border-radius:var(--wm-radius-full);background:var(--wm-slider-fill)}.wm-slider-input::-webkit-slider-thumb{-webkit-appearance:none;width:var(--wm-slider-thumb);height:var(--wm-slider-thumb);margin-top:calc((var(--wm-slider-track) - var(--wm-slider-thumb)) / 2);border-radius:var(--wm-radius-full);background:var(--wm-color-accent);border:2px solid var(--wm-bg-base);box-shadow:var(--wm-shadow-sm);transition:background var(--wm-transition-fast),transform var(--wm-transition-fast)}.wm-slider-input:hover::-webkit-slider-thumb{background:var(--wm-color-accent-hover);transform:scale(1.12)}.wm-slider-input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--wm-bg-base),0 0 0 4px var(--wm-color-accent)}.wm-slider-input::-moz-range-track{height:var(--wm-slider-track);border-radius:var(--wm-radius-full);background:var(--wm-slider-fill)}.wm-slider-input::-moz-range-thumb{width:var(--wm-slider-thumb);height:var(--wm-slider-thumb);box-sizing:border-box;border-radius:var(--wm-radius-full);background:var(--wm-color-accent);border:2px solid var(--wm-bg-base);box-shadow:var(--wm-shadow-sm);transition:background var(--wm-transition-fast),transform var(--wm-transition-fast)}.wm-slider-input:hover::-moz-range-thumb{background:var(--wm-color-accent-hover);transform:scale(1.12)}.wm-slider-input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--wm-bg-base),0 0 0 4px var(--wm-color-accent)}.wm-slider-ticks{position:absolute;inset-inline:0;top:100%;margin-top:2px;height:6px;pointer-events:none}.wm-slider-tick{position:absolute;top:0;width:2px;height:6px;margin-left:-1px;border-radius:1px;background:var(--wm-border-input);transition:background var(--wm-transition-fast)}.wm-slider-tick.is-passed{background:var(--wm-color-accent)}.wm-slider-tick--minor{height:3px;background:var(--wm-border-subtle)}.wm-slider-tick--minor.is-passed{background:color-mix(in srgb,var(--wm-color-accent) 55%,transparent)}.wm-slider[data-track=segmented]{--wm-slider-fill: none}.wm-slider-segments{position:absolute;inset:0 calc(var(--wm-slider-thumb) / 2);display:flex;align-items:center;gap:var(--wm-slider-gap);pointer-events:none}.wm-slider-seg{flex-basis:0;min-width:0;height:var(--wm-slider-track);border-radius:1px;background:var(--wm-border-input);transition:background var(--wm-transition-fast)}.wm-slider-seg.is-passed{background:var(--wm-color-accent)}.wm-slider-seg.is-current{background-image:linear-gradient(var(--wm-color-accent) 0 0);background-repeat:no-repeat;background-size:calc(var(--wm-slider-seg-p, 0) * 100%) 100%}.wm-slider-tick-labels{position:relative;grid-column:1;height:1rem}.wm-slider-tick-label{position:absolute;top:0;transform:translate(-50%);font-size:.75rem;color:var(--wm-text-muted);white-space:nowrap}.wm-slider-value-cell{grid-area:1 / 2;display:grid;justify-items:end}.wm-slider-value,.wm-slider-value-sizer{grid-area:1 / 1;font-family:var(--wm-font-mono);font-size:.8125rem;font-variant-numeric:tabular-nums;white-space:nowrap}.wm-slider-value{color:var(--wm-text-secondary);min-width:4ch;text-align:right}.wm-slider-value-sizer{visibility:hidden;pointer-events:none}.wm-slider.is-disabled{opacity:.5}.wm-slider-input:disabled{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.wm-slider-input::-webkit-slider-thumb,.wm-slider-input::-moz-range-thumb,.wm-slider-tick{transition:none}.wm-slider-input:hover::-webkit-slider-thumb,.wm-slider-input:hover::-moz-range-thumb{transform:none}}\n"] }]
+        }], ctorParameters: () => [], 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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], formatValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatValue", required: false }] }], track: [{ type: i0.Input, args: [{ isSignal: true, alias: "track", required: false }] }], ticks: [{ type: i0.Input, args: [{ isSignal: true, alias: "ticks", required: false }] }] } });
+/**
+ * A stop every `interval`, starting at `min` and never passing `max`. Returns
+ * nothing for an interval that is not positive, or one that would draw more
+ * than {@link MAX_TICKS} marks.
+ */
+function gridEvery(min, max, interval) {
+    if (!Number.isFinite(interval) || interval <= 0)
+        return [];
+    const span = max - min;
+    if (!Number.isFinite(span) || span <= 0)
+        return [];
+    const count = Math.floor(span / interval + 1e-9);
+    if (count + 1 > MAX_TICKS)
+        return [];
+    const decimals = decimalsOf(interval) + decimalsOf(min);
+    const out = [];
+    for (let i = 0; i <= count; i++) {
+        out.push({ value: round(min + i * interval, decimals) });
+    }
+    return out;
+}
+/** Decimal places in a number's plain decimal form, capped to what f64 can hold. */
+function decimalsOf(value) {
+    const text = String(value);
+    if (text.includes('e') || text.includes('E'))
+        return 10;
+    const dot = text.indexOf('.');
+    return dot === -1 ? 0 : Math.min(text.length - dot - 1, 10);
+}
+function round(value, decimals) {
+    return Number(value.toFixed(Math.min(decimals, 10)));
+}
+/** A CSS-ready fraction: enough precision to be exact, no trailing noise. */
+function trim(fraction) {
+    return String(round(fraction, 6));
+}
+
 /**
  * GhostField — transparent-until-hover wrapper for inline-editable fields.
  *
@@ -2610,5 +2936,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Checkbox, GhostField, NumberInput, PageHeader, Toggle, WmAnchoredScrollStrategy, WmAutoFocus, WmButton, WmCombobox, WmDialog, WmModal, WmPopover, WmRichTooltip, WmRichTooltipContent, WmRichTooltipTrigger, WmSelect, WmTab, WmTabs, WmToastContainer, WmToastService, WmTooltip, onViewportChange };
+export { Checkbox, GhostField, NumberInput, PageHeader, Toggle, WmAnchoredScrollStrategy, WmAutoFocus, WmButton, WmCombobox, WmDialog, WmModal, WmPopover, WmRichTooltip, WmRichTooltipContent, WmRichTooltipTrigger, WmSelect, WmSlider, WmTab, WmTabs, WmToastContainer, WmToastService, WmTooltip, onViewportChange };
 //# sourceMappingURL=wildmason-aegis.mjs.map