@jolly-pixel/ui 1.0.1

package/dist/controls/Controls.js

@@ -0,0 +1,72 @@
+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 Controls_1;
+// Import Third-party Dependencies
+import { LitElement, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+// Import Internal Dependencies
+import { controlsStyles } from "./Controls.styles.js";
+/**
+ * A positioned, declarative HUD card for scene control hints.
+ */
+let Controls = class Controls extends LitElement {
+    static { Controls_1 = this; }
+    static Defaults = {
+        position: "bottom-left",
+        maxEntriesPerRow: 3,
+        heading: ""
+    };
+    static styles = controlsStyles;
+    constructor() {
+        super();
+        this.position = Controls_1.Defaults.position;
+        this.maxEntriesPerRow = Controls_1.Defaults.maxEntriesPerRow;
+        this.heading = Controls_1.Defaults.heading;
+    }
+    render() {
+        const maximum = Math.max(1, Math.floor(this.maxEntriesPerRow));
+        const headingId = "heading";
+        return html `
+      ${this.heading === ""
+            ? nothing
+            : html `<h2 class="heading" id=${headingId}>${this.heading}</h2>`}
+      <div
+        class="entries"
+        role="list"
+        aria-label=${this.heading === "" ? "Controls" : nothing}
+        aria-labelledby=${this.heading === "" ? nothing : headingId}
+        style=${`--jolly-controls-max-entries-per-row:${maximum}`}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Controls.prototype, "position", void 0);
+__decorate([
+    property({
+        type: Number,
+        attribute: "max-entries-per-row"
+    }),
+    __metadata("design:type", Number)
+], Controls.prototype, "maxEntriesPerRow", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Controls.prototype, "heading", void 0);
+Controls = Controls_1 = __decorate([
+    customElement("jolly-controls"),
+    __metadata("design:paramtypes", [])
+], Controls);
+export { Controls };
+//# sourceMappingURL=Controls.js.map

package/dist/controls/Controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Controls.js","sourceRoot":"","sources":["../../src/controls/Controls.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,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAmBtD;;GAEG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;;IACtC,MAAM,CAAU,QAAQ,GAAqB;QAC3C,QAAQ,EAAE,aAAa;QACvB,gBAAgB,EAAE,CAAC;QACnB,OAAO,EAAE,EAAE;KACZ,CAAC;IAEF,MAAM,CAAU,MAAM,GAAG,cAAc,CAAC;IAcxC;QACE,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,QAAQ,GAAG,UAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;QAC3C,IAAI,CAAC,gBAAgB,GAAG,UAAQ,CAAC,QAAQ,CAAC,gBAAgB,CAAC;QAC3D,IAAI,CAAC,OAAO,GAAG,UAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC;IAC3C,CAAC;IAEQ,MAAM;QACb,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CACtB,CAAC,EACD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAClC,CAAC;QACF,MAAM,SAAS,GAAG,SAAS,CAAC;QAE5B,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,OAAO,KAAK,EAAE;YACnB,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA,0BAA0B,SAAS,IAAI,IAAI,CAAC,OAAO,OAAO;;;;qBAInD,IAAI,CAAC,OAAO,KAAK,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO;0BACrC,IAAI,CAAC,OAAO,KAAK,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;gBACnD,wCAAwC,OAAO,EAAE;;;;KAI5D,CAAC;IACJ,CAAC;;AAxCO;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;0CACP;AAM3B;IAJP,QAAQ,CAAC;QACR,IAAI,EAAE,MAAM;QACZ,SAAS,EAAE,qBAAqB;KACjC,CAAC;;kDAC+B;AAGzB;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yCACH;AAnBb,QAAQ;IADpB,aAAa,CAAC,gBAAgB,CAAC;;GACnB,QAAQ,CAmDpB"}

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

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

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

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

package/dist/controls/Controls.styles.js

@@ -0,0 +1,102 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+export const controlsStyles = css `
+  :host {
+    --jolly-controls-inset: calc(var(--jolly-row-height) / 2);
+    --jolly-controls-entry-min-width: 10rem;
+
+    position: absolute;
+    z-index: 1;
+    display: block;
+    box-sizing: border-box;
+    max-inline-size: calc(100% - (var(--jolly-controls-inset) * 2));
+    padding: var(--jolly-controls-inset);
+    color: var(--jolly-text);
+    font-family: var(--jolly-font-family);
+    font-size: var(--jolly-font-size);
+    line-height: 1.35;
+    background: color-mix(in oklab, var(--jolly-surface-raised) 72%, transparent);
+    border-radius: 4px;
+    box-shadow: var(--jolly-shadow-overlay);
+    backdrop-filter: blur(12px);
+  }
+
+  :host([position="top-left"]) {
+    inset: var(--jolly-controls-inset) auto auto var(--jolly-controls-inset);
+  }
+
+  :host([position="top-middle"]) {
+    inset: var(--jolly-controls-inset) auto auto 50%;
+    transform: translateX(-50%);
+  }
+
+  :host([position="top-right"]) {
+    inset: var(--jolly-controls-inset) var(--jolly-controls-inset) auto auto;
+  }
+
+  :host([position="middle-left"]) {
+    inset: 50% auto auto var(--jolly-controls-inset);
+    transform: translateY(-50%);
+  }
+
+  :host([position="middle"]) {
+    inset: 50% auto auto 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  :host([position="middle-right"]) {
+    inset: 50% var(--jolly-controls-inset) auto auto;
+    transform: translateY(-50%);
+  }
+
+  :host([position="bottom-left"]) {
+    inset: auto auto var(--jolly-controls-inset) var(--jolly-controls-inset);
+  }
+
+  :host([position="bottom-middle"]) {
+    inset: auto auto var(--jolly-controls-inset) 50%;
+    transform: translateX(-50%);
+  }
+
+  :host([position="bottom-right"]) {
+    inset: auto var(--jolly-controls-inset) var(--jolly-controls-inset) auto;
+  }
+
+  .heading {
+    margin: 0 0 calc(var(--jolly-controls-inset) / 2);
+    color: var(--jolly-text-muted);
+    font-size: inherit;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  .entries {
+    display: grid;
+    grid-template-columns: repeat(
+      var(--jolly-controls-max-entries-per-row),
+      minmax(var(--jolly-controls-entry-min-width), 1fr)
+    );
+    gap: calc(var(--jolly-controls-inset) / 2);
+  }
+
+  @media (max-width: 32rem) {
+    .entries {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 20rem) {
+    .entries {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      background: Canvas;
+      box-shadow: none;
+    }
+  }
+`;
+//# sourceMappingURL=Controls.styles.js.map

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

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

package/dist/controls/Flags.d.ts

@@ -0,0 +1,26 @@
+import { type TemplateResult } from "lit";
+import { JollyField } from "../field/JollyField.ts";
+import type { JollyOption } from "./types.ts";
+export interface FlagsDefaults {
+    /**
+     * Empty flags use a zero mask.
+     */
+    value: number;
+}
+/**
+ * Edits a bitmask as independent checkboxes.
+ */
+export declare class Flags extends JollyField<number> {
+    #private;
+    static readonly Defaults: FlagsDefaults;
+    static styles: import("lit").CSSResult[];
+    options: JollyOption<number>[];
+    constructor();
+    protected renderValue(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "jolly-flags": Flags;
+    }
+}
+//# sourceMappingURL=Flags.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flags.d.ts","sourceRoot":"","sources":["../../src/controls/Flags.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAOpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,qBACa,KAAM,SAAQ,UAAU,CAAC,MAAM,CAAC;;IAC3C,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAErC;IAEF,OAAgB,MAAM,4BAGpB;IAGM,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC;;IASvC,SAAS,CAAC,WAAW,IAAI,cAAc;CAiExC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,KAAK,CAAC;KACtB;CACF"}

package/dist/controls/Flags.js

@@ -0,0 +1,91 @@
+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 Flags_1;
+// Import Third-party Dependencies
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+// Import Internal Dependencies
+import { JollyField } from "../field/JollyField.js";
+import { flagsStyles } from "./Flags.styles.js";
+import { hasFlag, setFlag } from "./flagMask.js";
+import { isInputElement } from "../dom.js";
+/**
+ * Edits a bitmask as independent checkboxes.
+ */
+let Flags = class Flags extends JollyField {
+    static { Flags_1 = this; }
+    static Defaults = {
+        value: 0
+    };
+    static styles = [
+        ...JollyField.styles,
+        flagsStyles
+    ];
+    constructor() {
+        super();
+        this.options = [];
+        this.value = Flags_1.Defaults.value;
+    }
+    renderValue() {
+        const mask = this.concreteValue;
+        return html `
+      <div class="flags" role="group" aria-label=${this.label}>
+        ${this.options.map((option) => this.#renderFlag(option, mask))}
+      </div>
+    `;
+    }
+    #renderFlag(option, mask) {
+        return html `
+      <label class="flag">
+        <input
+          type="checkbox"
+          .checked=${mask === undefined ? false : hasFlag(mask, option.value)}
+          .indeterminate=${mask === undefined}
+          ?disabled=${this.disabled || option.disabled === true}
+          aria-readonly=${this.readonlyAria}
+          aria-disabled=${this.lockedAria}
+          aria-description=${this.lockDescription}
+          @click=${(event) => this.#onToggle(option, event)}
+        >
+        <span>${option.label}</span>
+      </label>
+    `;
+    }
+    #onToggle(option, event) {
+        if (!isInputElement(event.target)) {
+            return;
+        }
+        if (!this.editable) {
+            // Preserve tab order for locked fields.
+            event.preventDefault();
+            return;
+        }
+        const mask = this.concreteValue;
+        // A mixed value resolves to the clicked bit.
+        if (mask === undefined) {
+            this.emitChange(option.value);
+            return;
+        }
+        /*
+         * Native activation has already updated `checked` before this handler runs.
+         */
+        this.emitChange(setFlag(mask, option.value, event.target.checked));
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Array)
+], Flags.prototype, "options", void 0);
+Flags = Flags_1 = __decorate([
+    customElement("jolly-flags"),
+    __metadata("design:paramtypes", [])
+], Flags);
+export { Flags };
+//# sourceMappingURL=Flags.js.map

package/dist/controls/Flags.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flags.js","sourceRoot":"","sources":["../../src/controls/Flags.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,kCAAkC;AAClC,OAAO,EACL,IAAI,EAEL,MAAM,KAAK,CAAC;AACb,OAAO,EACL,aAAa,EACb,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAE3B,+BAA+B;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EACL,OAAO,EACP,OAAO,EACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAU3C;;GAEG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,UAAkB;;IAC3C,MAAM,CAAU,QAAQ,GAAkB;QACxC,KAAK,EAAE,CAAC;KACT,CAAC;IAEF,MAAM,CAAU,MAAM,GAAG;QACvB,GAAG,UAAU,CAAC,MAAM;QACpB,WAAW;KACZ,CAAC;IAKF;QACE,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,KAAK,GAAG,OAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;IACpC,CAAC;IAES,WAAW;QACnB,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC;QAEhC,OAAO,IAAI,CAAA;mDACoC,IAAI,CAAC,KAAK;UACnD,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;;KAEjE,CAAC;IACJ,CAAC;IAED,WAAW,CACT,MAA2B,EAC3B,IAAwB;QAExB,OAAO,IAAI,CAAA;;;;qBAIM,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC;2BAClD,IAAI,KAAK,SAAS;sBACvB,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,QAAQ,KAAK,IAAI;0BACrC,IAAI,CAAC,YAAY;0BACjB,IAAI,CAAC,UAAU;6BACZ,IAAI,CAAC,eAAe;mBAC9B,CAAC,KAAiB,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,KAAK,CAAC;;gBAEvD,MAAM,CAAC,KAAK;;KAEvB,CAAC;IACJ,CAAC;IAED,SAAS,CACP,MAA2B,EAC3B,KAAiB;QAEjB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;YAClC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,wCAAwC;YACxC,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,OAAO;QACT,CAAC;QAED,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC;QAChC,6CAA6C;QAC7C,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAE9B,OAAO;QACT,CAAC;QAED;;WAEG;QACH,IAAI,CAAC,UAAU,CACb,OAAO,CACL,IAAI,EACJ,MAAM,CAAC,KAAK,EACZ,KAAK,CAAC,MAAM,CAAC,OAAO,CACrB,CACF,CAAC;IACJ,CAAC;;AAzEO;IADP,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;;sCACQ;AAX5B,KAAK;IADjB,aAAa,CAAC,aAAa,CAAC;;GAChB,KAAK,CAqFjB"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flags.styles.d.ts","sourceRoot":"","sources":["../../src/controls/Flags.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,WAAW,yBA2DvB,CAAC"}

package/dist/controls/Flags.styles.js

@@ -0,0 +1,65 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+// Import Internal Dependencies
+import { fillTransition } from "../theme/styles/mixins.js";
+export const flagsStyles = css `
+  .flags {
+    display: flex;
+    flex-wrap: wrap;
+    flex: 1 1 auto;
+    gap: var(--jolly-space-1, 4px);
+    min-width: 0;
+    padding: 2px 0;
+  }
+
+  /*
+   * Each flag is its own filled pill, which gives the checkbox inside it
+   * somewhere to show hover and focus.
+   */
+  .flag {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    height: var(--jolly-control-height, 20px);
+    padding-inline: var(--jolly-space-1, 4px);
+    border-radius: var(--jolly-radius-sm, 2px);
+    background: var(--jolly-control-bg);
+    cursor: pointer;
+    user-select: none;
+    ${fillTransition}
+  }
+
+  .flag:hover {
+    background: var(--jolly-control-bg-hover);
+  }
+
+  .flag:has(input:focus-visible) {
+    background: var(--jolly-control-bg-focus);
+  }
+
+  :host([invalid]) .flag {
+    background: var(--jolly-invalid-bg);
+  }
+
+  :host([readonly]) .flag {
+    background: var(--jolly-control-bg-muted);
+  }
+
+  .value input[type="checkbox"] {
+    flex: 0 0 auto;
+    width: 13px;
+    height: 13px;
+    margin: 0;
+    accent-color: var(--jolly-field-active-color);
+    cursor: inherit;
+  }
+
+  .value input[type="checkbox"]:focus-visible {
+    outline: none;
+  }
+
+  :host([disabled]) .flag {
+    cursor: default;
+  }
+`;
+//# sourceMappingURL=Flags.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flags.styles.js","sourceRoot":"","sources":["../../src/controls/Flags.styles.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,+BAA+B;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;MAwBxB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCnB,CAAC"}

package/dist/controls/Number.d.ts

@@ -0,0 +1,31 @@
+import { type TemplateResult } from "lit";
+import { JollyField } from "../field/JollyField.ts";
+export interface NumberFieldDefaults {
+    step: number;
+    min: number;
+    max: number;
+    value: number;
+}
+/**
+ * Supports expression entry and pointer scrubbing through a text input.
+ */
+export declare class NumberField extends JollyField<number> {
+    #private;
+    static readonly Defaults: NumberFieldDefaults;
+    static styles: import("lit").CSSResult[];
+    step: number;
+    min: number;
+    max: number;
+    constructor();
+    /**
+     * Mixed values cannot be scrubbed.
+     */
+    protected get scrubbable(): boolean;
+    protected renderValue(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "jolly-number": NumberField;
+    }
+}
+//# sourceMappingURL=Number.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Number.d.ts","sourceRoot":"","sources":["../../src/controls/Number.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAapD,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,qBACa,WAAY,SAAQ,UAAU,CAAC,MAAM,CAAC;;IACjD,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,mBAAmB,CAQ3C;IAEF,OAAgB,MAAM,4BAGpB;IAGM,IAAI,EAAE,MAAM,CAAC;IAGb,GAAG,EAAE,MAAM,CAAC;IAGZ,GAAG,EAAE,MAAM,CAAC;;IAuBpB;;OAEG;IACH,cAAuB,UAAU,IAAI,OAAO,CAE3C;IAED,SAAS,CAAC,WAAW,IAAI,cAAc;CA2GxC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/dist/controls/Number.js

@@ -0,0 +1,161 @@
+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 NumberField_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 { ScrubController } from "../interaction/scrub/ScrubController.js";
+import { multiplierFor } from "../numeric/modifierMultiplier.js";
+import { valueFromDelta } from "../numeric/valueFromDelta.js";
+import { numberStyles } from "./Number.styles.js";
+import { PointerFocusController } from "../field/PointerFocusController.js";
+/**
+ * Supports expression entry and pointer scrubbing through a text input.
+ */
+let NumberField = class NumberField extends JollyField {
+    static { NumberField_1 = this; }
+    static Defaults = {
+        step: 1,
+        /**
+         * Number fields are unbounded by default.
+         */
+        min: Number.NEGATIVE_INFINITY,
+        max: Number.POSITIVE_INFINITY,
+        value: 0
+    };
+    static styles = [
+        ...JollyField.styles,
+        numberStyles
+    ];
+    #scrub = new ScrubController(this, {
+        target: () => this.renderRoot.querySelector(".scrub-handle"),
+        step: () => this.step,
+        start: () => (this.editable ? this.concreteValue : undefined),
+        min: () => this.min,
+        max: () => this.max,
+        onInput: (value) => this.emitInput(value),
+        onCommit: (value) => this.emitChange(value)
+    });
+    #pointerFocus = new PointerFocusController(this);
+    constructor() {
+        super();
+        this.step = NumberField_1.Defaults.step;
+        this.min = NumberField_1.Defaults.min;
+        this.max = NumberField_1.Defaults.max;
+        this.value = NumberField_1.Defaults.value;
+    }
+    /**
+     * Mixed values cannot be scrubbed.
+     */
+    get scrubbable() {
+        return this.editable && !this.mixed;
+    }
+    renderValue() {
+        return html `
+      <div class="wrap">
+        <span class="scrub-handle" aria-hidden="true"></span>
+        <input
+          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-readonly=${this.readonlyAria}
+          aria-disabled=${this.lockedAria}
+          aria-description=${this.lockDescription}
+          aria-invalid=${this.displayError === null ? nothing : "true"}
+          @input=${this.onDraftInput}
+          @focus=${this.#pointerFocus.onFocus}
+          @keydown=${this.#onKeyDown}
+          @blur=${this.#onBlur}
+        >
+      </div>
+    `;
+    }
+    get #displayed() {
+        const value = this.concreteValue;
+        return value === undefined ? "" : formatNumber(value, this.step);
+    }
+    #onKeyDown(event) {
+        this.#pointerFocus.onKeyDown();
+        if (event.key === "ArrowUp" ||
+            event.key === "ArrowDown") {
+            this.#step(event);
+        }
+        else {
+            this.onDraftKeyDown(event, () => this.#commit());
+        }
+    }
+    #onBlur() {
+        this.#pointerFocus.onBlur();
+        this.#commit();
+    }
+    /**
+     * Commits one modifier-scaled step from the current value.
+     */
+    #step(event) {
+        const start = this.editable ? this.concreteValue : undefined;
+        if (start === undefined) {
+            return;
+        }
+        // Prevent the input caret from moving.
+        event.preventDefault();
+        const direction = event.key === "ArrowUp" ? 1 : -1;
+        // Scale the step, not the count, so Alt can produce fractional steps.
+        const effectiveStep = this.step * multiplierFor(event);
+        this.emitChange(valueFromDelta({
+            start,
+            deltaPx: direction,
+            step: effectiveStep,
+            pixelsPerStep: 1,
+            min: this.min,
+            max: this.max
+        }));
+    }
+    #commit() {
+        if (this.#scrub.dragging) {
+            return;
+        }
+        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)
+            };
+        });
+    }
+};
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], NumberField.prototype, "step", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], NumberField.prototype, "min", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], NumberField.prototype, "max", void 0);
+NumberField = NumberField_1 = __decorate([
+    customElement("jolly-number"),
+    __metadata("design:paramtypes", [])
+], NumberField);
+export { NumberField };
+//# sourceMappingURL=Number.js.map

package/dist/controls/Number.js.map

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

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

@@ -0,0 +1,5 @@
+/**
+ * The wrapper hosts the scrub handle over the native input.
+ */
+export declare const numberStyles: import("lit").CSSResult;
+//# sourceMappingURL=Number.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Number.styles.d.ts","sourceRoot":"","sources":["../../src/controls/Number.styles.ts"],"names":[],"mappings":"AAMA;;GAEG;AACH,eAAO,MAAM,YAAY,yBA4CxB,CAAC"}

package/dist/controls/Number.styles.js

@@ -0,0 +1,53 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+// Import Internal Dependencies
+import { fillTransition } from "../theme/styles/mixins.js";
+/**
+ * The wrapper hosts the scrub handle over the native input.
+ */
+export const numberStyles = css `
+  .wrap {
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  /*
+   * Match the base selector specificity for the padding override.
+   */
+  .value .wrap input:not([type="color"]) {
+    padding-left: 10px;
+  }
+
+  .scrub-handle {
+    position: absolute;
+    inset-block: 1px;
+    left: 1px;
+    width: 8px;
+    border-radius: var(--jolly-radius-sm, 2px) 0 0 var(--jolly-radius-sm, 2px);
+  }
+
+  :host([scrubbable]) .scrub-handle {
+    cursor: ew-resize;
+    touch-action: none;
+  }
+
+  .scrub-handle::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 3px;
+    width: 2px;
+    height: 55%;
+    border-radius: 1px;
+    background: var(--jolly-groove);
+    transform: translateY(-50%);
+    ${fillTransition}
+  }
+
+  :host([scrubbable]) .scrub-handle:hover::before {
+    background: var(--jolly-accent-fill);
+  }
+`;
+//# sourceMappingURL=Number.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Number.styles.js","sourceRoot":"","sources":["../../src/controls/Number.styles.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,+BAA+B;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAsCzB,cAAc;;;;;;CAMnB,CAAC"}