@jolly-pixel/ui 1.0.1

package/dist/controls/PropertyRow.d.ts

@@ -0,0 +1,26 @@
+import { LitElement, type TemplateResult } from "lit";
+import type { FieldAlign, FieldLabelPosition } from "../field/JollyField.ts";
+import "../icon/Icon.ts";
+/**
+ * Field-aligned layout for custom content.
+ */
+export declare class PropertyRow extends LitElement {
+    static styles: import("lit").CSSResult[];
+    label: string;
+    description: string;
+    /**
+     * Matches the field contract, so a custom row lines up with the controls
+     * around it instead of being the one row that does not.
+     */
+    align: FieldAlign;
+    /** Matches `JollyField`'s label position. */
+    labelPosition: FieldLabelPosition;
+    constructor();
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "jolly-property-row": PropertyRow;
+    }
+}
+//# sourceMappingURL=PropertyRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyRow.d.ts","sourceRoot":"","sources":["../../src/controls/PropertyRow.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EAGV,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AASb,OAAO,KAAK,EACV,UAAU,EACV,kBAAkB,EACnB,MAAM,wBAAwB,CAAC;AAGhC,OAAO,iBAAiB,CAAC;AAEzB;;GAEG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAGpB;IAGM,KAAK,EAAE,MAAM,CAAC;IAGd,WAAW,EAAE,MAAM,CAAC;IAE5B;;;OAGG;IAEK,KAAK,EAAE,UAAU,CAAC;IAE1B,6CAA6C;IAMrC,aAAa,EAAE,kBAAkB,CAAC;;IAWjC,MAAM,IAAI,cAAc;CAkBlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,WAAW,CAAC;KACnC;CACF"}

package/dist/controls/PropertyRow.js

@@ -0,0 +1,77 @@
+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 { propertyRowStyles } from "./PropertyRow.styles.js";
+import { hiddenStyles } from "../theme/styles/hiddenStyles.js";
+// Registers the icon used by descriptions.
+import "../icon/Icon.js";
+/**
+ * Field-aligned layout for custom content.
+ */
+let PropertyRow = class PropertyRow extends LitElement {
+    static styles = [
+        propertyRowStyles,
+        hiddenStyles
+    ];
+    constructor() {
+        super();
+        this.label = "";
+        this.description = "";
+        this.align = "start";
+        this.labelPosition = "inline";
+    }
+    render() {
+        return html `
+      <div class="row">
+        <div class="leading">
+          ${this.label === "" ? nothing : html `<span class="label">${this.label}</span>`}
+        </div>
+        <div class="value"><slot></slot></div>
+      </div>
+      ${this.description === ""
+            ? nothing
+            : html `
+          <p class="description">
+            <jolly-icon name="info"></jolly-icon>
+            <span>${this.description}</span>
+          </p>
+        `}
+    `;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], PropertyRow.prototype, "label", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], PropertyRow.prototype, "description", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], PropertyRow.prototype, "align", void 0);
+__decorate([
+    property({
+        type: String,
+        attribute: "label-position",
+        reflect: true
+    }),
+    __metadata("design:type", String)
+], PropertyRow.prototype, "labelPosition", void 0);
+PropertyRow = __decorate([
+    customElement("jolly-property-row"),
+    __metadata("design:paramtypes", [])
+], PropertyRow);
+export { PropertyRow };
+//# sourceMappingURL=PropertyRow.js.map

package/dist/controls/PropertyRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyRow.js","sourceRoot":"","sources":["../../src/controls/PropertyRow.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,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAM/D,2CAA2C;AAC3C,OAAO,iBAAiB,CAAC;AAEzB;;GAEG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAU,MAAM,GAAG;QACvB,iBAAiB;QACjB,YAAY;KACb,CAAC;IAuBF;QACE,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QACtB,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;QACrB,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;IAChC,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,uBAAuB,IAAI,CAAC,KAAK,SAAS;;;;QAIhF,IAAI,CAAC,WAAW,KAAK,EAAE;YACvB,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;;;oBAGM,IAAI,CAAC,WAAW;;SAE3B;KACJ,CAAC;IACJ,CAAC;;AA9CO;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CACL;AAGd;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gDACC;AAOpB;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;0CAChB;AAQlB;IALP,QAAQ,CAAC;QACR,IAAI,EAAE,MAAM;QACZ,SAAS,EAAE,gBAAgB;QAC3B,OAAO,EAAE,IAAI;KACd,CAAC;;kDACwC;AAzB/B,WAAW;IADvB,aAAa,CAAC,oBAAoB,CAAC;;GACvB,WAAW,CAsDvB"}

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

@@ -0,0 +1,5 @@
+/**
+ * Matches `JollyField` geometry for custom rows.
+ */
+export declare const propertyRowStyles: import("lit").CSSResult;
+//# sourceMappingURL=PropertyRow.styles.d.ts.map

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

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

package/dist/controls/PropertyRow.styles.js

@@ -0,0 +1,115 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+// Import Internal Dependencies
+import { kFallback } from "../theme/styles/fallbacks.js";
+import { truncate } from "../theme/styles/mixins.js";
+/**
+ * Matches `JollyField` geometry for custom rows.
+ */
+export const propertyRowStyles = css `
+  :host {
+    display: block;
+    font-family: var(--jolly-font-family, ui-monospace, monospace);
+    font-size: var(--jolly-font-size, 11px);
+    color: var(--jolly-text, ${kFallback.text});
+  }
+
+  .row {
+    display: flex;
+    align-items: center;
+    gap: var(--jolly-space-1, 4px);
+    min-height: var(--jolly-row-height, 20px);
+    /*
+     * Match the field's leading inset and collapsible gutter.
+     */
+    padding-inline: calc(var(--jolly-gutter-width, 0px) + var(--jolly-space-1, 4px))
+      var(--jolly-field-inset-end, var(--jolly-space-1, 4px));
+  }
+
+  .leading {
+    display: contents;
+  }
+
+  :host([label-position="top"]) .row {
+    flex-direction: column;
+    align-items: stretch;
+    min-height: auto;
+    gap: calc(var(--jolly-space-1, 4px) / 2);
+  }
+
+  :host([label-position="top"]) .leading {
+    display: flex;
+    align-items: center;
+  }
+
+  /*
+   * Use the shared label column when an ancestor sets it.
+   */
+  .label {
+    flex: 0 0 auto;
+    width: var(--jolly-label-width, auto);
+    max-width: var(--jolly-label-max-width, 45%);
+    color: var(--jolly-text-muted);
+    text-align: start;
+    ${truncate}
+    user-select: none;
+  }
+
+  :host([label-position="top"]) .label {
+    width: auto;
+    max-width: none;
+  }
+
+  .value {
+    display: flex;
+    align-items: center;
+    flex: 1 1 auto;
+    gap: var(--jolly-space-1, 4px);
+    min-width: 0;
+  }
+
+  /*
+   * A row holds arbitrary content rather than an input, so the trailing edge is
+   * reached by moving the content, not by setting text-align.
+   */
+  :host([align="end"]) .value {
+    justify-content: flex-end;
+  }
+
+  /* A nested field already carries its own trailing row inset. */
+  :host([align="end"]) ::slotted(jolly-checkbox[align="end"]) {
+    margin-inline-end: calc(var(--jolly-space-1, 4px) * -1);
+  }
+
+  /* Let an opted-in checkbox carry its gradient across the whole value column. */
+  :host([align="end"])
+    ::slotted(jolly-checkbox[align="end"][clickable-background]) {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  /*
+   * Align descriptions with field help text.
+   */
+  .description {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--jolly-space-1, 4px);
+    margin-block: calc(var(--jolly-space-1, 4px) / 2);
+    margin-inline: calc(
+        var(--jolly-gutter-width, 0px) + (var(--jolly-space-1, 4px) * 2)
+      )
+      var(--jolly-space-1, 4px);
+    color: var(--jolly-text-muted);
+    font-size: 0.9em;
+  }
+
+  .description jolly-icon {
+    flex: 0 0 auto;
+    width: 14px;
+    height: 14px;
+    margin-block-start: 0;
+    color: var(--jolly-accent-text);
+  }
+`;
+//# sourceMappingURL=PropertyRow.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyRow.styles.js","sourceRoot":"","sources":["../../src/controls/PropertyRow.styles.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,+BAA+B;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;+BAKL,SAAS,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAwCvC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4Db,CAAC"}

package/dist/controls/Range.d.ts

@@ -0,0 +1,30 @@
+import { type TemplateResult } from "lit";
+import { JollyField } from "../field/JollyField.ts";
+import type { Interval } from "./types.ts";
+export interface RangeDefaults {
+    step: number;
+    min: number;
+    max: number;
+    from: number;
+    to: number;
+}
+/**
+ * Edits a bounded interval whose endpoints cannot cross.
+ */
+export declare class Range extends JollyField<Interval> {
+    #private;
+    static readonly Defaults: RangeDefaults;
+    static styles: import("lit").CSSResult[];
+    step: number;
+    min: number;
+    max: number;
+    constructor();
+    protected valuesEqual(a: Interval, b: Interval): boolean;
+    protected renderValue(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "jolly-range": Range;
+    }
+}
+//# sourceMappingURL=Range.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Range.d.ts","sourceRoot":"","sources":["../../src/controls/Range.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAYpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ;AAED;;GAEG;AACH,qBACa,KAAM,SAAQ,UAAU,CAAC,QAAQ,CAAC;;IAC7C,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAMrC;IAEF,OAAgB,MAAM,4BAGpB;IAGM,IAAI,EAAE,MAAM,CAAC;IAGb,GAAG,EAAE,MAAM,CAAC;IAGZ,GAAG,EAAE,MAAM,CAAC;;cAoBD,WAAW,CAC5B,CAAC,EAAE,QAAQ,EACX,CAAC,EAAE,QAAQ,GACV,OAAO;IAIV,SAAS,CAAC,WAAW,IAAI,cAAc;CA6LxC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,KAAK,CAAC;KACtB;CACF"}

package/dist/controls/Range.js

@@ -0,0 +1,196 @@
+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 Range_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 { MIXED_PLACEHOLDER } from "../field/mixed.js";
+import { formatNumber, parseNumeric, quantize } from "../numeric/format.js";
+import { rangeStyles } from "./Range.styles.js";
+import { multiplierFor } from "../numeric/modifierMultiplier.js";
+import { valueFromDelta } from "../numeric/valueFromDelta.js";
+import { isInputElement } from "../dom.js";
+import { PointerFocusController } from "../field/PointerFocusController.js";
+/**
+ * Edits a bounded interval whose endpoints cannot cross.
+ */
+let Range = class Range extends JollyField {
+    static { Range_1 = this; }
+    static Defaults = {
+        step: 1,
+        min: 0,
+        max: 100,
+        from: 0,
+        to: 100
+    };
+    static styles = [
+        ...JollyField.styles,
+        rangeStyles
+    ];
+    #pointerFocus = new PointerFocusController(this);
+    #drafts = {
+        from: null,
+        to: null
+    };
+    constructor() {
+        super();
+        this.step = Range_1.Defaults.step;
+        this.min = Range_1.Defaults.min;
+        this.max = Range_1.Defaults.max;
+        this.value = {
+            from: Range_1.Defaults.from,
+            to: Range_1.Defaults.to
+        };
+    }
+    valuesEqual(a, b) {
+        return a.from === b.from && a.to === b.to;
+    }
+    renderValue() {
+        const interval = this.concreteValue;
+        return html `
+      ${this.#renderEnd("from", interval?.from)}
+      <span class="separator" aria-hidden="true"></span>
+      ${this.#renderEnd("to", interval?.to)}
+    `;
+    }
+    #renderEnd(end, value) {
+        return html `
+      <input
+        type="text"
+        inputmode="decimal"
+        class="end"
+        data-end=${end}
+        .value=${this.#drafts[end] ??
+            (value === undefined ? "" : formatNumber(value, this.step))}
+        placeholder=${this.mixed ? MIXED_PLACEHOLDER : ""}
+        aria-label=${end === "from" ? "Range start" : "Range end"}
+        ?disabled=${this.disabled}
+        ?readonly=${this.inputReadonly}
+        ?data-pointer-focus=${this.#pointerFocus.active}
+        aria-readonly=${this.readonlyAria}
+        aria-disabled=${this.lockedAria}
+        aria-description=${this.lockDescription}
+        @input=${(event) => this.#onType(end, event)}
+        @focus=${this.#pointerFocus.onFocus}
+        @blur=${() => this.#onBlur(end)}
+        @keydown=${(event) => this.#onKeyDown(end, event)}
+      >
+    `;
+    }
+    /**
+     * Commits one modifier-scaled step from the current endpoint.
+     */
+    #onKeyDown(end, event) {
+        this.#pointerFocus.onKeyDown();
+        if (event.key === "Enter") {
+            this.#commit(end);
+            return;
+        }
+        if (event.key === "Escape") {
+            event.stopPropagation();
+            this.#clearDraft(end);
+            return;
+        }
+        if (event.key !== "ArrowUp" && event.key !== "ArrowDown") {
+            return;
+        }
+        const interval = this.editable ? this.concreteValue : undefined;
+        if (interval === 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);
+        const stepped = valueFromDelta({
+            start: interval[end],
+            deltaPx: direction,
+            step: effectiveStep,
+            pixelsPerStep: 1,
+            min: this.min,
+            max: this.max
+        });
+        this.emitChange(this.#clampToOther(interval, end, stepped));
+    }
+    #onType(end, event) {
+        if (!isInputElement(event.target)) {
+            return;
+        }
+        this.#drafts[end] = event.target.value;
+        this.setParseError(null);
+    }
+    #onBlur(end) {
+        this.#pointerFocus.onBlur();
+        this.#commit(end);
+    }
+    #clearDraft(end) {
+        this.#drafts[end] = null;
+        this.setParseError(null);
+        this.requestUpdate();
+    }
+    #commit(end) {
+        const draft = this.#drafts[end];
+        const interval = this.concreteValue;
+        if (draft === null ||
+            interval === undefined ||
+            !this.editable) {
+            return;
+        }
+        const result = parseNumeric(draft);
+        if (result === null) {
+            this.#clearDraft(end);
+            return;
+        }
+        if (!result.ok) {
+            this.setParseError(result.error);
+            return;
+        }
+        this.#drafts[end] = null;
+        this.requestUpdate();
+        this.emitChange(this.#withEnd(interval, end, result.value));
+    }
+    #withEnd(interval, end, raw) {
+        const value = quantize(raw, this.step, this.min, this.max);
+        return this.#clampToOther(interval, end, value);
+    }
+    #clampToOther(interval, end, value) {
+        if (end === "from") {
+            return {
+                from: Math.min(value, interval.to),
+                to: interval.to
+            };
+        }
+        return {
+            from: interval.from,
+            to: Math.max(value, interval.from)
+        };
+    }
+};
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], Range.prototype, "step", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], Range.prototype, "min", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], Range.prototype, "max", void 0);
+Range = Range_1 = __decorate([
+    customElement("jolly-range"),
+    __metadata("design:paramtypes", [])
+], Range);
+export { Range };
+//# sourceMappingURL=Range.js.map

package/dist/controls/Range.js.map

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

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

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

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

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

package/dist/controls/Range.styles.js

@@ -0,0 +1,29 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+export const rangeStyles = css `
+  .value input.end {
+    flex: 1 1 0;
+    min-width: 0;
+    text-align: right;
+  }
+
+  .separator {
+    position: relative;
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    width: 12px;
+    height: 7px;
+    border-inline: 1px solid currentColor;
+    color: var(--jolly-text-muted);
+  }
+
+  .separator::after {
+    content: "";
+    position: absolute;
+    inset-inline: 0;
+    top: 3px;
+    height: 1px;
+    background: currentColor;
+  }
+`;
+//# sourceMappingURL=Range.styles.js.map

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

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

package/dist/controls/Select.d.ts

@@ -0,0 +1,24 @@
+import { type TemplateResult } from "lit";
+import { JollyField } from "../field/JollyField.ts";
+import type { JollyOption } from "./types.ts";
+/**
+ * Wraps a native select with index-based option matching.
+ */
+export declare class Select<TValue> extends JollyField<TValue> {
+    #private;
+    static styles: import("lit").CSSResult[];
+    options: JollyOption<TValue>[];
+    constructor();
+    protected renderValue(): TemplateResult;
+    /**
+     * Options render after the select's own bindings. Synchronizing here keeps
+     * the native selected option aligned when options and value arrive together.
+     */
+    protected updated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "jolly-select": Select<unknown>;
+    }
+}
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/controls/Select.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAIpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAK9C;;GAEG;AACH,qBACa,MAAM,CAAC,MAAM,CAAE,SAAQ,UAAU,CAAC,MAAM,CAAC;;IACpD,OAAgB,MAAM,4BAGpB;IAGM,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC;;IAUvC,SAAS,CAAC,WAAW,IAAI,cAAc;IA2BvC;;;OAGG;cACgB,OAAO,IAAI,IAAI;CA6CnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;KACjC;CACF"}

package/dist/controls/Select.js

@@ -0,0 +1,104 @@
+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 { html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+// Import Internal Dependencies
+import { JollyField } from "../field/JollyField.js";
+import { selectStyles } from "./Select.styles.js";
+import { isSelectElement } from "../dom.js";
+import { PointerFocusController } from "../field/PointerFocusController.js";
+// CONSTANTS
+const kMixedValue = "__jolly_mixed__";
+/**
+ * Wraps a native select with index-based option matching.
+ */
+let Select = class Select extends JollyField {
+    static styles = [
+        ...JollyField.styles,
+        selectStyles
+    ];
+    #pointerFocus = new PointerFocusController(this);
+    constructor() {
+        super();
+        this.options = [];
+    }
+    renderValue() {
+        return html `
+      <span class="select-wrap">
+        <select
+          ?disabled=${this.disabled}
+          ?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"}
+          @focus=${this.#pointerFocus.onFocus}
+          @blur=${this.#pointerFocus.onBlur}
+          @keydown=${this.#pointerFocus.onKeyDown}
+          @change=${this.#onChange}
+        >
+          ${this.mixed ? html `<option value=${kMixedValue}>—</option>` : nothing}
+          ${this.options.map((option, index) => html `
+            <option value=${String(index)} ?disabled=${option.disabled === true}>
+              ${option.label}
+            </option>
+          `)}
+        </select>
+        <jolly-icon class="chevron" name="chevron"></jolly-icon>
+      </span>
+    `;
+    }
+    /**
+     * Options render after the select's own bindings. Synchronizing here keeps
+     * the native selected option aligned when options and value arrive together.
+     */
+    updated() {
+        const select = this.renderRoot.querySelector("select");
+        if (select !== null) {
+            select.value = this.#selectedKey;
+        }
+    }
+    get #selectedKey() {
+        const current = this.concreteValue;
+        if (current === undefined) {
+            return kMixedValue;
+        }
+        const index = this.options.findIndex((option) => this.valuesEqual(option.value, current));
+        return index === -1 ? "" : String(index);
+    }
+    #onChange(event) {
+        if (!isSelectElement(event.target)) {
+            return;
+        }
+        /*
+         * Restore readonly selections while keeping the control focusable.
+         */
+        if (!this.editable) {
+            event.target.value = this.#selectedKey;
+            return;
+        }
+        const option = this.options[Number(event.target.value)];
+        if (option === undefined) {
+            return;
+        }
+        this.emitChange(option.value);
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Array)
+], Select.prototype, "options", void 0);
+Select = __decorate([
+    customElement("jolly-select"),
+    __metadata("design:paramtypes", [])
+], Select);
+export { Select };
+//# sourceMappingURL=Select.js.map

package/dist/controls/Select.js.map

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

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

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