@jolly-pixel/ui 1.0.1

package/dist/controls/Select.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../src/controls/Select.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,yBA+CxB,CAAC"}

package/dist/controls/Select.styles.js

@@ -0,0 +1,51 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+export const selectStyles = css `
+  .value .select-wrap {
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  /*
+   * Replace native chrome with the shared field styling and chevron.
+   */
+  .value select {
+    flex: 1 1 auto;
+    min-width: 0;
+    appearance: none;
+    padding-inline-end: calc(var(--jolly-space-1, 4px) * 2 + 12px);
+    cursor: pointer;
+  }
+
+  /* Native dropdown rows need an opaque themed plane, especially in dark mode. */
+  .value option {
+    background: var(--jolly-surface-raised, Canvas);
+    color: var(--jolly-text, CanvasText);
+  }
+
+  /*
+   * Hide Firefox's inner focus ring without hiding the selected value.
+   */
+  .value select:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 currentColor;
+  }
+
+  .value .chevron {
+    position: absolute;
+    top: 50%;
+    right: var(--jolly-space-1, 4px);
+    width: 10px;
+    height: 10px;
+    color: var(--jolly-text-muted);
+    transform: translateY(-50%) rotate(90deg);
+    pointer-events: none;
+  }
+
+  :host([disabled]) .value select {
+    cursor: default;
+  }
+`;
+//# sourceMappingURL=Select.styles.js.map

package/dist/controls/Select.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.styles.js","sourceRoot":"","sources":["../../src/controls/Select.styles.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+C9B,CAAC"}

package/dist/controls/Separator.d.ts

@@ -0,0 +1,19 @@
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * Optional captioned divider between control groups.
+ */
+export declare class Separator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Caption for the divider; absent captions make it decorative.
+     */
+    label: string;
+    constructor();
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "jolly-separator": Separator;
+    }
+}
+//# sourceMappingURL=Separator.d.ts.map

package/dist/controls/Separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../src/controls/Separator.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EAGV,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAUb;;GAEG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BAGpB;IAEF;;OAEG;IAEK,KAAK,EAAE,MAAM,CAAC;;IAQb,MAAM,IAAI,cAAc;CAkBlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,SAAS,CAAC;KAC9B;CACF"}

package/dist/controls/Separator.js

@@ -0,0 +1,55 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+// Import Third-party Dependencies
+import { LitElement, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+// Import Internal Dependencies
+import { separatorStyles } from "./Separator.styles.js";
+import { hiddenStyles } from "../theme/styles/hiddenStyles.js";
+/**
+ * Optional captioned divider between control groups.
+ */
+let Separator = class Separator extends LitElement {
+    static styles = [
+        separatorStyles,
+        hiddenStyles
+    ];
+    constructor() {
+        super();
+        this.label = "";
+    }
+    render() {
+        if (this.label === "") {
+            return html `
+        <div class="unlabelled" role="separator">
+          <span class="rule" aria-hidden="true"></span>
+        </div>
+      `;
+        }
+        return html `
+      <div class="labelled" role="separator" aria-label=${this.label}>
+        <span class="rule" aria-hidden="true"></span>
+        <span class="caption">${this.label}</span>
+        <span class="rule" aria-hidden="true"></span>
+      </div>
+      ${nothing}
+    `;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Separator.prototype, "label", void 0);
+Separator = __decorate([
+    customElement("jolly-separator"),
+    __metadata("design:paramtypes", [])
+], Separator);
+export { Separator };
+//# sourceMappingURL=Separator.js.map

package/dist/controls/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../../src/controls/Separator.ts"],"names":[],"mappings":";;;;;;;;;AAAA,kCAAkC;AAClC,OAAO,EACL,UAAU,EACV,IAAI,EACJ,OAAO,EAER,MAAM,KAAK,CAAC;AACb,OAAO,EACL,aAAa,EACb,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAE3B,+BAA+B;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAE/D;;GAEG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAU,MAAM,GAAG;QACvB,eAAe;QACf,YAAY;KACb,CAAC;IAQF;QACE,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAClB,CAAC;IAEQ,MAAM;QACb,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE,CAAC;YACtB,OAAO,IAAI,CAAA;;;;OAIV,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAA;0DAC2C,IAAI,CAAC,KAAK;;gCAEpC,IAAI,CAAC,KAAK;;;QAGlC,OAAO;KACV,CAAC;IACJ,CAAC;;AAzBO;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wCACL;AAVX,SAAS;IADrB,aAAa,CAAC,iBAAiB,CAAC;;GACpB,SAAS,CAoCrB"}

package/dist/controls/Separator.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const separatorStyles: import("lit").CSSResult;
+//# sourceMappingURL=Separator.styles.d.ts.map

package/dist/controls/Separator.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.styles.d.ts","sourceRoot":"","sources":["../../src/controls/Separator.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,yBA6C3B,CAAC"}

package/dist/controls/Separator.styles.js

@@ -0,0 +1,49 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+export const separatorStyles = css `
+  :host {
+    display: block;
+    font-family: var(--jolly-font-family, ui-monospace, monospace);
+    font-size: var(--jolly-font-size, 11px);
+  }
+
+  .rule {
+    flex: 1 1 auto;
+    height: 1px;
+    background: var(--jolly-divider);
+  }
+
+  .labelled,
+  .unlabelled {
+    align-items: center;
+    min-height: var(--jolly-row-height, 20px);
+    margin-block-start: calc(var(--jolly-space-1, 4px) / 2);
+  }
+
+  .labelled {
+    display: grid;
+    grid-template-columns:
+      calc(var(--jolly-gutter-width, 0px) + var(--jolly-space-1, 4px))
+      auto
+      minmax(0, 1fr);
+    gap: var(--jolly-space-1, 4px);
+  }
+
+  .unlabelled {
+    display: flex;
+  }
+
+  .labelled .rule {
+    background: var(--jolly-separator-rule);
+  }
+
+  .caption {
+    flex: 0 0 auto;
+    color: var(--jolly-separator-label);
+    font-size: 1em;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    user-select: none;
+  }
+`;
+//# sourceMappingURL=Separator.styles.js.map

package/dist/controls/Separator.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.styles.js","sourceRoot":"","sources":["../../src/controls/Separator.styles.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CjC,CAAC"}

package/dist/controls/Slider.d.ts

@@ -0,0 +1,27 @@
+import { type TemplateResult } from "lit";
+import { JollyField } from "../field/JollyField.ts";
+export interface SliderDefaults {
+    step: number;
+    min: number;
+    max: number;
+    value: number;
+}
+/**
+ * Native range control paired with an editable readout.
+ */
+export declare class Slider extends JollyField<number> {
+    #private;
+    static readonly Defaults: SliderDefaults;
+    static styles: import("lit").CSSResult[];
+    step: number;
+    min: number;
+    max: number;
+    constructor();
+    protected renderValue(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "jolly-slider": Slider;
+    }
+}
+//# sourceMappingURL=Slider.d.ts.map

package/dist/controls/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/controls/Slider.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAWpD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,qBACa,MAAO,SAAQ,UAAU,CAAC,MAAM,CAAC;;IAC5C,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAKtC;IAEF,OAAgB,MAAM,4BAGpB;IAGM,IAAI,EAAE,MAAM,CAAC;IAGb,GAAG,EAAE,MAAM,CAAC;IAGZ,GAAG,EAAE,MAAM,CAAC;;IAapB,SAAS,CAAC,WAAW,IAAI,cAAc;CAwJxC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,MAAM,CAAC;KACxB;CACF"}

package/dist/controls/Slider.js

@@ -0,0 +1,170 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var Slider_1;
+// Import Third-party Dependencies
+import { html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+// Import Internal Dependencies
+import { JollyField } from "../field/JollyField.js";
+import { MIXED_PLACEHOLDER } from "../field/mixed.js";
+import { formatNumber, parseNumeric, quantize } from "../numeric/format.js";
+import { sliderStyles } from "./Slider.styles.js";
+import { isInputElement } from "../dom.js";
+import { PointerFocusController } from "../field/PointerFocusController.js";
+/**
+ * Native range control paired with an editable readout.
+ */
+let Slider = class Slider extends JollyField {
+    static { Slider_1 = this; }
+    static Defaults = {
+        step: 1,
+        min: 0,
+        max: 100,
+        value: 0
+    };
+    static styles = [
+        ...JollyField.styles,
+        sliderStyles
+    ];
+    #pointerFocus = new PointerFocusController(this);
+    constructor() {
+        super();
+        this.step = Slider_1.Defaults.step;
+        this.min = Slider_1.Defaults.min;
+        this.max = Slider_1.Defaults.max;
+        this.value = Slider_1.Defaults.value;
+    }
+    renderValue() {
+        const value = this.concreteValue;
+        return html `
+      <div class="lane" style="--jolly-slider-progress:${this.#progress}">
+        <input
+          type="range"
+          min=${this.min}
+          max=${this.max}
+          step=${this.step}
+          .value=${String(value ?? this.min)}
+          ?disabled=${this.disabled}
+          aria-label=${this.label === "" ? nothing : this.label}
+          aria-readonly=${this.readonlyAria}
+          aria-disabled=${this.lockedAria}
+          aria-description=${this.lockDescription}
+          aria-valuetext=${this.mixed ? "Mixed" : nothing}
+          @input=${this.#onInput}
+          @change=${this.#onChange}
+        >
+      </div>
+      <input
+        class="readout"
+        type="text"
+        inputmode="decimal"
+        .value=${this.draft ?? this.#displayed}
+        placeholder=${this.mixed ? MIXED_PLACEHOLDER : ""}
+        ?disabled=${this.disabled}
+        ?readonly=${this.inputReadonly}
+        ?data-pointer-focus=${this.#pointerFocus.active}
+        aria-label=${this.label === "" ? "Value" : `${this.label} value`}
+        aria-readonly=${this.readonlyAria}
+        aria-disabled=${this.lockedAria}
+        aria-invalid=${this.displayError === null ? nothing : "true"}
+        @input=${this.onDraftInput}
+        @focus=${this.#pointerFocus.onFocus}
+        @keydown=${this.#onKeyDown}
+        @blur=${this.#onBlur}
+      >
+    `;
+    }
+    /**
+     * Fill ratio between 0 and 1. A mixed value has no thumb position, so it
+     * reads as empty rather than as the minimum.
+     */
+    get #progress() {
+        const value = this.concreteValue;
+        const span = this.max - this.min;
+        if (value === undefined || span <= 0) {
+            return 0;
+        }
+        return Math.min(1, Math.max(0, (value - this.min) / span));
+    }
+    /**
+     * Uses the mixed-value placeholder when no thumb position exists.
+     */
+    get #displayed() {
+        const value = this.concreteValue;
+        return value === undefined
+            ? ""
+            : formatNumber(value, this.step);
+    }
+    #onInput(event) {
+        const next = this.#read(event);
+        if (next === null) {
+            return;
+        }
+        this.emitInput(next);
+    }
+    #onChange(event) {
+        const next = this.#read(event);
+        if (next === null) {
+            return;
+        }
+        this.emitChange(next);
+    }
+    #onKeyDown(event) {
+        this.#pointerFocus.onKeyDown();
+        this.onDraftKeyDown(event, () => this.#commit());
+    }
+    #onBlur() {
+        this.#pointerFocus.onBlur();
+        this.#commit();
+    }
+    #commit() {
+        this.commitDraft((draft) => {
+            const result = parseNumeric(draft);
+            if (result === null || !result.ok) {
+                return result;
+            }
+            return {
+                ok: true,
+                value: quantize(result.value, this.step, this.min, this.max)
+            };
+        });
+    }
+    /**
+     * Restore readonly range values without removing the control from tab order.
+     */
+    #read(event) {
+        if (!isInputElement(event.target)) {
+            return null;
+        }
+        if (!this.editable) {
+            event.target.value = String(this.concreteValue ?? this.min);
+            return null;
+        }
+        return quantize(Number(event.target.value), this.step, this.min, this.max);
+    }
+};
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], Slider.prototype, "step", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], Slider.prototype, "min", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], Slider.prototype, "max", void 0);
+Slider = Slider_1 = __decorate([
+    customElement("jolly-slider"),
+    __metadata("design:paramtypes", [])
+], Slider);
+export { Slider };
+//# sourceMappingURL=Slider.js.map

package/dist/controls/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../src/controls/Slider.ts"],"names":[],"mappings":"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"}

package/dist/controls/Slider.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const sliderStyles: import("lit").CSSResult;
+//# sourceMappingURL=Slider.styles.d.ts.map

package/dist/controls/Slider.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.styles.d.ts","sourceRoot":"","sources":["../../src/controls/Slider.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,yBAiKxB,CAAC"}

package/dist/controls/Slider.styles.js

@@ -0,0 +1,165 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+export const sliderStyles = css `
+  /*
+   * The lane paints nothing. It is only the positioning context and the hit
+   * area, so the slider reads as a measurement on the surface rather than as a
+   * filled control.
+   *
+   * The track, the range input and the stop calculation all share the same
+   * horizontal inset, so the fill edge lands under the knob centre.
+   */
+  .lane {
+    --jolly-slider-knob: 10px;
+    --jolly-slider-track-height: 2px;
+    --jolly-slider-inset: var(--jolly-space-1, 4px);
+    --jolly-slider-groove: var(--jolly-groove);
+    --jolly-slider-fill: var(--jolly-field-active-color);
+    --jolly-slider-thumb-fill: var(--jolly-slider-fill);
+    --jolly-slider-stop: calc(
+      var(--jolly-slider-progress, 0) * (100% - var(--jolly-slider-knob)) +
+        (var(--jolly-slider-knob) / 2)
+    );
+
+    position: relative;
+    flex: 1 1 auto;
+    min-width: 0;
+    height: var(--jolly-control-height, 20px);
+    background: none;
+  }
+
+  /*
+   * The track. A 2px groove with the filled portion in the accent, which reads
+   * as a measurement rather than as a second filled control.
+   */
+  .lane::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    inset-inline: var(--jolly-slider-inset);
+    height: var(--jolly-slider-track-height);
+    border-radius: 1px;
+    background: linear-gradient(
+      to right,
+      var(--jolly-slider-fill) 0 var(--jolly-slider-stop),
+      var(--jolly-slider-groove) var(--jolly-slider-stop) 100%
+    );
+    transform: translateY(-50%);
+    pointer-events: none;
+    transition: height var(--jolly-duration-fast, 100ms) var(--jolly-easing, ease);
+  }
+
+  /* Hover changes only the handle color, so the track geometry stays still. */
+  .lane:hover {
+    --jolly-slider-thumb-fill: var(--jolly-field-active-color-hover);
+  }
+
+  /* Focus geometry locates the active slider in a long pane. */
+  .lane:has(input:focus-visible) {
+    --jolly-slider-track-height: 4px;
+    --jolly-slider-knob: 14px;
+  }
+
+  /* An invalid slider recolours the value itself, not just the groove behind it. */
+  :host([invalid]) .lane {
+    --jolly-slider-fill: var(--jolly-danger-border);
+    --jolly-slider-groove: var(--jolly-invalid-bg-focus);
+    --jolly-slider-thumb-fill: var(--jolly-danger-border);
+  }
+
+  :host([readonly]) .lane {
+    --jolly-slider-groove: var(--jolly-control-bg-muted);
+  }
+
+  /*
+   * Override native range track and thumb rendering. The input contributes hit
+   * area and the knob; the lane draws everything else.
+   */
+  .value input[type="range"] {
+    position: absolute;
+    inset: 0 var(--jolly-slider-inset);
+    width: auto;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    appearance: none;
+    cursor: pointer;
+  }
+
+  /*
+   * The shared field rules match "input" generically and outrank a plain
+   * type selector, so the range would otherwise pick up the control fill on
+   * hover, focus, invalid and readonly. The range paints nothing in any state.
+   */
+  .value input[type="range"]:hover:not(:disabled),
+  .value input[type="range"]:focus,
+  .value input[type="range"]:focus-visible,
+  :host([invalid]) .value input[type="range"],
+  :host([readonly]) .value input[type="range"] {
+    background: none;
+    outline: none;
+  }
+
+  .value input[type="range"]::-webkit-slider-runnable-track {
+    height: 100%;
+    background: none;
+  }
+
+  .value input[type="range"]::-moz-range-track {
+    height: 100%;
+    background: none;
+  }
+
+  /* The handle keeps equal dimensions when focus grows its square shape. */
+  .value input[type="range"]::-webkit-slider-thumb {
+    appearance: none;
+    width: var(--jolly-slider-knob, 10px);
+    height: var(--jolly-slider-knob, 10px);
+    margin-top: calc(
+      (var(--jolly-control-height, 20px) - var(--jolly-slider-knob, 10px)) / 2
+    );
+    border-radius: var(--jolly-radius-sm, 2px);
+    background: var(--jolly-slider-thumb-fill);
+    transition:
+      background-color var(--jolly-duration-fast, 100ms) var(--jolly-easing, ease),
+      width var(--jolly-duration-fast, 100ms) var(--jolly-easing, ease),
+      height var(--jolly-duration-fast, 100ms) var(--jolly-easing, ease);
+  }
+
+  .value input[type="range"]::-moz-range-thumb {
+    width: var(--jolly-slider-knob, 10px);
+    height: var(--jolly-slider-knob, 10px);
+    border: none;
+    border-radius: var(--jolly-radius-sm, 2px);
+    background: var(--jolly-slider-thumb-fill);
+    transition:
+      background-color var(--jolly-duration-fast, 100ms) var(--jolly-easing, ease),
+      width var(--jolly-duration-fast, 100ms) var(--jolly-easing, ease),
+      height var(--jolly-duration-fast, 100ms) var(--jolly-easing, ease);
+  }
+
+  /*
+   * Mixed values have no thumb position.
+   */
+  :host([mixed]) .lane {
+    opacity: 0.35;
+    pointer-events: none;
+  }
+
+  /*
+   * A fixed readout column keeps the lane's right edge aligned down the pane.
+   */
+  .value input.readout {
+    flex: 0 0 auto;
+    width: 6ch;
+    min-width: 0;
+    text-align: right;
+  }
+
+  :host([disabled]) .value input[type="range"] {
+    cursor: default;
+  }
+`;
+//# sourceMappingURL=Slider.styles.js.map

package/dist/controls/Slider.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.styles.js","sourceRoot":"","sources":["../../src/controls/Slider.styles.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiK9B,CAAC"}

package/dist/controls/Text.d.ts

@@ -0,0 +1,17 @@
+import { type TemplateResult } from "lit";
+import { JollyField } from "../field/JollyField.ts";
+/**
+ * Text field with streamed input and committed changes.
+ */
+export declare class Text extends JollyField<string> {
+    #private;
+    placeholder: string;
+    constructor();
+    protected renderValue(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "jolly-text": Text;
+    }
+}
+//# sourceMappingURL=Text.d.ts.map

package/dist/controls/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/controls/Text.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAKpD;;GAEG;AACH,qBACa,IAAK,SAAQ,UAAU,CAAC,MAAM,CAAC;;IAElC,WAAW,EAAE,MAAM,CAAC;;IAW5B,SAAS,CAAC,WAAW,IAAI,cAAc;CA8ExC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,IAAI,CAAC;KACpB;CACF"}