@jolly-pixel/ui 1.0.1

package/dist/controls/Button.styles.js

@@ -0,0 +1,86 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+// Import Internal Dependencies
+import { kFallback } from "../theme/styles/fallbacks.js";
+import { fillTransition } from "../theme/styles/mixins.js";
+export const buttonStyles = css `
+  :host {
+    display: inline-flex;
+    font-family: var(--jolly-font-family, ui-monospace, monospace);
+    font-size: var(--jolly-font-size, 11px);
+  }
+
+  button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--jolly-space-1, 4px);
+    width: 100%;
+    height: var(--jolly-control-height, 20px);
+    padding: 0 var(--jolly-space-2, 8px);
+    border: 0;
+    border-radius: var(--jolly-radius-sm, 2px);
+    background: var(--jolly-control-bg, ${kFallback.controlBg});
+    color: var(--jolly-text, ${kFallback.text});
+    font: inherit;
+    white-space: nowrap;
+    cursor: pointer;
+    ${fillTransition}
+  }
+
+  button:hover:not(:disabled) {
+    background: var(--jolly-control-bg-hover);
+  }
+
+  button:active:not(:disabled) {
+    background: var(--jolly-control-bg-active);
+  }
+
+  /* Focus is a fill step, which has to beat hover because they share a channel. */
+  button:focus-visible {
+    background: var(--jolly-control-bg-focus);
+    outline: none;
+  }
+
+  :host([variant="accent"]) button {
+    background: var(--jolly-accent-fill);
+    color: var(--jolly-text-on-fill);
+  }
+
+  :host([variant="accent"]) button:hover:not(:disabled) {
+    background: var(--jolly-accent-fill-hover);
+  }
+
+  :host([variant="accent"]) button:focus-visible,
+  :host([variant="accent"]) button:active:not(:disabled) {
+    background: var(--jolly-accent-fill-focus);
+  }
+
+  :host([variant="danger"]) button {
+    background: var(--jolly-invalid-bg);
+    color: var(--jolly-danger);
+  }
+
+  :host([variant="danger"]) button:hover:not(:disabled) {
+    background: var(--jolly-invalid-bg-hover);
+  }
+
+  :host([variant="danger"]) button:focus-visible,
+  :host([variant="danger"]) button:active:not(:disabled) {
+    background: var(--jolly-invalid-bg-focus);
+  }
+
+  :host([disabled]) button {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  /*
+   * Icon-only buttons use a square target.
+   */
+  :host([icon-only]) button {
+    width: var(--jolly-icon-button-size, 32px);
+    padding: 0;
+  }
+`;
+//# sourceMappingURL=Button.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styles.js","sourceRoot":"","sources":["../../src/controls/Button.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,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;0CAiBW,SAAS,CAAC,SAAS;+BAC9B,SAAS,CAAC,IAAI;;;;MAIvC,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDnB,CAAC"}

package/dist/controls/ButtonGroup.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 ButtonGroupDefaults {
+    layout: "segmented" | "grid";
+    columns: number;
+}
+/**
+ * Segmented or grid selector with roving tab navigation.
+ */
+export declare class ButtonGroup<TValue> extends JollyField<TValue> {
+    #private;
+    static readonly Defaults: ButtonGroupDefaults;
+    static styles: import("lit").CSSResult[];
+    options: JollyOption<TValue>[];
+    layout: "segmented" | "grid";
+    columns: number;
+    constructor();
+    protected renderValue(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "jolly-button-group": ButtonGroup<unknown>;
+    }
+}
+//# sourceMappingURL=ButtonGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/controls/ButtonGroup.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAGpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;CACjB;AAeD;;GAEG;AACH,qBACa,WAAW,CAAC,MAAM,CAAE,SAAQ,UAAU,CAAC,MAAM,CAAC;;IACzD,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,mBAAmB,CAM3C;IAEF,OAAgB,MAAM,4BAGpB;IAGM,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC;IAG/B,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC;IAG7B,OAAO,EAAE,MAAM,CAAC;;IAUxB,SAAS,CAAC,WAAW,IAAI,cAAc;CA+HxC;AAQD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;KAC5C;CACF"}

package/dist/controls/ButtonGroup.js

@@ -0,0 +1,159 @@
+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 ButtonGroup_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 { buttonGroupStyles } from "./ButtonGroup.styles.js";
+import { nextEnabledIndex } from "./roving.js";
+// CONSTANTS
+const kArrowSteps = {
+    ArrowRight: 1,
+    ArrowDown: 1,
+    ArrowLeft: -1,
+    ArrowUp: -1
+};
+/**
+ * Sentinel for keys outside arrow-key navigation.
+ */
+const kNoStep = 0;
+/**
+ * Segmented or grid selector with roving tab navigation.
+ */
+let ButtonGroup = class ButtonGroup extends JollyField {
+    static { ButtonGroup_1 = this; }
+    static Defaults = {
+        layout: "segmented",
+        /**
+         * Zero columns uses the intrinsic grid layout.
+         */
+        columns: 0
+    };
+    static styles = [
+        ...JollyField.styles,
+        buttonGroupStyles
+    ];
+    constructor() {
+        super();
+        this.options = [];
+        this.layout = ButtonGroup_1.Defaults.layout;
+        this.columns = ButtonGroup_1.Defaults.columns;
+    }
+    renderValue() {
+        const columns = this.layout === "grid" && this.columns > 0
+            ? `grid-template-columns: repeat(${this.columns}, 1fr)`
+            : nothing;
+        return html `
+      <div
+        class="group"
+        role="radiogroup"
+        aria-label=${this.label || this.getAttribute("aria-label") || nothing}
+        aria-readonly=${this.readonlyAria}
+        aria-disabled=${this.lockedAria}
+        aria-description=${this.lockDescription}
+        style=${columns}
+        @keydown=${this.#onKeyDown}
+      >
+        ${this.options.map((option, index) => this.#renderOption(option, index))}
+      </div>
+    `;
+    }
+    #renderOption(option, index) {
+        const selected = this.#selectedIndex === index;
+        return html `
+      <button
+        type="button"
+        role="radio"
+        class="segment"
+        data-index=${index}
+        aria-checked=${selected ? "true" : "false"}
+        title=${option.label}
+        tabindex=${this.#tabIndexFor(index)}
+        ?disabled=${this.disabled || option.disabled === true}
+        @click=${() => this.#select(index)}
+      >
+        ${option.icon === undefined
+            ? nothing
+            : html `<jolly-icon name=${option.icon}></jolly-icon>`}
+        <span class="segment-label">${option.label}</span>
+      </button>
+    `;
+    }
+    get #selectedIndex() {
+        const current = this.concreteValue;
+        if (current === undefined) {
+            return -1;
+        }
+        return this.options.findIndex((option) => this.valuesEqual(option.value, current));
+    }
+    #tabIndexFor(index) {
+        const selected = this.#selectedIndex;
+        if (selected !== -1) {
+            return selected === index ? 0 : -1;
+        }
+        const first = this.options.findIndex((option) => option.disabled !== true);
+        return first === index ? 0 : -1;
+    }
+    #onKeyDown(event) {
+        const step = arrowStep(event.key);
+        if (step === kNoStep) {
+            return;
+        }
+        const from = this.#selectedIndex === -1 ? 0 : this.#selectedIndex;
+        const next = nextEnabledIndex(this.options.map((option) => option.disabled !== true), from, step);
+        if (next === -1) {
+            return;
+        }
+        event.preventDefault();
+        this.#select(next);
+        this.#focusSegment(next);
+    }
+    #focusSegment(index) {
+        // Wait for the target's roving tabindex to render.
+        void this.updateComplete.then(() => {
+            const segment = this.renderRoot.querySelector(`.segment[data-index="${index}"]`);
+            if (segment instanceof HTMLElement) {
+                segment.focus();
+            }
+        });
+    }
+    #select(index) {
+        const option = this.options[index];
+        if (option === undefined ||
+            option.disabled === true ||
+            !this.editable) {
+            return;
+        }
+        this.emitChange(option.value);
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Array)
+], ButtonGroup.prototype, "options", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], ButtonGroup.prototype, "layout", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], ButtonGroup.prototype, "columns", void 0);
+ButtonGroup = ButtonGroup_1 = __decorate([
+    customElement("jolly-button-group"),
+    __metadata("design:paramtypes", [])
+], ButtonGroup);
+export { ButtonGroup };
+function arrowStep(key) {
+    return kArrowSteps[key] ?? kNoStep;
+}
+//# sourceMappingURL=ButtonGroup.js.map

package/dist/controls/ButtonGroup.js.map

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.styles.d.ts","sourceRoot":"","sources":["../../src/controls/ButtonGroup.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,iBAAiB,yBAkG7B,CAAC"}

package/dist/controls/ButtonGroup.styles.js

@@ -0,0 +1,104 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+// Import Internal Dependencies
+import { fillTransition, truncate, visuallyHidden } from "../theme/styles/mixins.js";
+export const buttonGroupStyles = css `
+  /*
+   * Segments used to be joined by shared borders. Without them a hairline gap
+   * does the same job: the fills read as one strip, still visibly divided.
+   */
+  .group {
+    display: flex;
+    flex: 1 1 auto;
+    gap: 1px;
+    min-width: 0;
+  }
+
+  :host([layout="grid"]) .group {
+    display: grid;
+    gap: var(--jolly-space-1, 4px);
+  }
+
+  .segment {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1 1 0;
+    gap: 4px;
+    min-width: 0;
+    height: var(--jolly-control-height, 20px);
+    padding: 0 var(--jolly-space-1, 4px);
+    border: 0;
+    background: var(--jolly-control-bg);
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    ${fillTransition}
+  }
+
+  /*
+   * Round only the outer edges of joined segments.
+   */
+  :host(:not([layout="grid"])) .segment:first-child {
+    border-radius: var(--jolly-radius-sm, 2px) 0 0 var(--jolly-radius-sm, 2px);
+  }
+
+  :host(:not([layout="grid"])) .segment:last-child {
+    border-radius: 0 var(--jolly-radius-sm, 2px) var(--jolly-radius-sm, 2px) 0;
+  }
+
+  :host(:not([layout="grid"])) .segment:only-child {
+    border-radius: var(--jolly-radius-sm, 2px);
+  }
+
+  :host([layout="grid"]) .segment {
+    border-radius: var(--jolly-radius-sm, 2px);
+  }
+
+  .segment:hover:not(:disabled) {
+    background: var(--jolly-control-bg-hover);
+  }
+
+  .segment:active:not(:disabled) {
+    background: var(--jolly-control-bg-active);
+  }
+
+  .segment:focus-visible {
+    background: var(--jolly-control-bg-focus);
+    outline: none;
+  }
+
+  .segment[aria-checked="true"] {
+    background: var(--jolly-accent-fill);
+    color: var(--jolly-text-on-fill);
+  }
+
+  .segment[aria-checked="true"]:hover:not(:disabled) {
+    background: var(--jolly-accent-fill-hover);
+  }
+
+  /*
+   * A checked segment is already filled, so its focus step lightens the accent
+   * rather than tinting over it.
+   */
+  .segment[aria-checked="true"]:focus-visible {
+    background: var(--jolly-accent-fill-focus);
+  }
+
+  .segment:disabled {
+    cursor: default;
+    opacity: 0.5;
+  }
+
+  .segment-label {
+    ${truncate}
+  }
+
+  /*
+   * Hide visible labels while keeping their accessible names.
+   */
+  :host([icons-only]) .segment-label {
+    ${visuallyHidden}
+  }
+`;
+//# sourceMappingURL=ButtonGroup.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.styles.js","sourceRoot":"","sources":["../../src/controls/ButtonGroup.styles.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,+BAA+B;AAC/B,OAAO,EACL,cAAc,EACd,QAAQ,EACR,cAAc,EACf,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA+B9B,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA0Dd,QAAQ;;;;;;;MAOR,cAAc;;CAEnB,CAAC"}

package/dist/controls/Checkbox.d.ts

@@ -0,0 +1,20 @@
+import { type TemplateResult } from "lit";
+import { JollyField } from "../field/JollyField.ts";
+/**
+ * Wraps a native checkbox and its indeterminate state.
+ */
+export declare class Checkbox extends JollyField<boolean> {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /** Expands the native label across the value background. */
+    clickableBackground: boolean;
+    constructor();
+    /** Keeps the native checkbox on the standard control-sized hit target. */
+    protected renderValue(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "jolly-checkbox": Checkbox;
+    }
+}
+//# sourceMappingURL=Checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/controls/Checkbox.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAIpD;;GAEG;AACH,qBACa,QAAS,SAAQ,UAAU,CAAC,OAAO,CAAC;;IAC/C,OAAgB,MAAM,4BAGpB;IAEF,4DAA4D;IAEpD,mBAAmB,EAAE,OAAO,CAAC;;IASrC,0EAA0E;IAC1E,SAAS,CAAC,WAAW,IAAI,cAAc;CAuCxC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,QAAQ,CAAC;KAC5B;CACF"}

package/dist/controls/Checkbox.js

@@ -0,0 +1,73 @@
+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 { checkboxStyles } from "./Checkbox.styles.js";
+import { isInputElement } from "../dom.js";
+/**
+ * Wraps a native checkbox and its indeterminate state.
+ */
+let Checkbox = class Checkbox extends JollyField {
+    static styles = [
+        ...JollyField.styles,
+        checkboxStyles
+    ];
+    constructor() {
+        super();
+        this.value = false;
+        this.clickableBackground = false;
+    }
+    /** Keeps the native checkbox on the standard control-sized hit target. */
+    renderValue() {
+        return html `
+      <label class="checkbox">
+        <input
+          type="checkbox"
+          .checked=${this.concreteValue ?? false}
+          .indeterminate=${this.mixed}
+          ?disabled=${this.disabled}
+          aria-readonly=${this.readonlyAria}
+          aria-disabled=${this.lockedAria}
+          aria-description=${this.lockDescription}
+          aria-invalid=${this.displayError === null ? nothing : "true"}
+          @click=${this.#onClick}
+        >
+      </label>
+    `;
+    }
+    /**
+     * Cancel clicks on readonly controls without removing them from tab order.
+     */
+    #onClick(event) {
+        if (!this.editable ||
+            !isInputElement(event.currentTarget)) {
+            event.preventDefault();
+            return;
+        }
+        /*
+         * Native activation has already updated `checked` before this handler runs.
+         */
+        const next = this.mixed ? true : event.currentTarget.checked;
+        this.emitChange(next);
+    }
+};
+__decorate([
+    property({ type: Boolean, attribute: "clickable-background", reflect: true }),
+    __metadata("design:type", Boolean)
+], Checkbox.prototype, "clickableBackground", void 0);
+Checkbox = __decorate([
+    customElement("jolly-checkbox"),
+    __metadata("design:paramtypes", [])
+], Checkbox);
+export { Checkbox };
+//# sourceMappingURL=Checkbox.js.map

package/dist/controls/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/controls/Checkbox.ts"],"names":[],"mappings":";;;;;;;;;AAAA,kCAAkC;AAClC,OAAO,EACL,IAAI,EACJ,OAAO,EAER,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,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAE3C;;GAEG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAmB;IAC/C,MAAM,CAAU,MAAM,GAAG;QACvB,GAAG,UAAU,CAAC,MAAM;QACpB,cAAc;KACf,CAAC;IAMF;QACE,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;IACnC,CAAC;IAED,0EAA0E;IAChE,WAAW;QACnB,OAAO,IAAI,CAAA;;;;qBAIM,IAAI,CAAC,aAAa,IAAI,KAAK;2BACrB,IAAI,CAAC,KAAK;sBACf,IAAI,CAAC,QAAQ;0BACT,IAAI,CAAC,YAAY;0BACjB,IAAI,CAAC,UAAU;6BACZ,IAAI,CAAC,eAAe;yBACxB,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;mBACnD,IAAI,CAAC,QAAQ;;;KAG3B,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,QAAQ,CACN,KAAiB;QAEjB,IACE,CAAC,IAAI,CAAC,QAAQ;YACd,CAAC,cAAc,CAAC,KAAK,CAAC,aAAa,CAAC,EACpC,CAAC;YACD,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,OAAO;QACT,CAAC;QAED;;WAEG;QACH,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC;QAC7D,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC;;AAhDO;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,sBAAsB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;qDACzC;AAR1B,QAAQ;IADpB,aAAa,CAAC,gBAAgB,CAAC;;GACnB,QAAQ,CAyDpB"}

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

@@ -0,0 +1,3 @@
+/** Keeps checkboxes fixed-size and aligned to the requested logical edge. */
+export declare const checkboxStyles: import("lit").CSSResult;
+//# sourceMappingURL=Checkbox.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.styles.d.ts","sourceRoot":"","sources":["../../src/controls/Checkbox.styles.ts"],"names":[],"mappings":"AAGA,6EAA6E;AAC7E,eAAO,MAAM,cAAc,yBA+G1B,CAAC"}

package/dist/controls/Checkbox.styles.js

@@ -0,0 +1,116 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+/** Keeps checkboxes fixed-size and aligned to the requested logical edge. */
+export const checkboxStyles = css `
+  .value {
+    justify-content: flex-start;
+  }
+
+  :host([align="end"]) .value,
+  :host([align="end"]) .checkbox {
+    justify-content: flex-end;
+  }
+
+  /* Keep the native control on the same hit target as the other fields. */
+  .checkbox {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex: 0 0 auto;
+    width: var(--jolly-control-height, 20px);
+    height: var(--jolly-control-height, 20px);
+  }
+
+  :host([clickable-background]) .checkbox {
+    position: relative;
+    isolation: isolate;
+    flex: 1 1 auto;
+    width: auto;
+    cursor: pointer;
+  }
+
+  :host([clickable-background]) .checkbox::before {
+    --jolly-checkbox-gradient-direction: to right;
+
+    content: "";
+    position: absolute;
+    inset-block: calc(var(--jolly-space-1, 4px) / 2);
+    inset-inline: 0;
+    z-index: -1;
+    border-start-start-radius: var(--jolly-radius-sm, 2px);
+    border-end-start-radius: var(--jolly-radius-sm, 2px);
+    background-image: linear-gradient(
+      var(--jolly-checkbox-gradient-direction),
+      var(--jolly-control-bg),
+      transparent 72%
+    );
+  }
+
+  :host([clickable-background][align="end"]) .checkbox::before,
+  :host([clickable-background]:dir(rtl)) .checkbox::before {
+    --jolly-checkbox-gradient-direction: to left;
+  }
+
+  :host([clickable-background][align="end"]:dir(rtl)) .checkbox::before {
+    --jolly-checkbox-gradient-direction: to right;
+  }
+
+  :host([clickable-background][align="end"]) .checkbox::before {
+    border-start-start-radius: 0;
+    border-start-end-radius: var(--jolly-radius-sm, 2px);
+    border-end-start-radius: 0;
+    border-end-end-radius: var(--jolly-radius-sm, 2px);
+  }
+
+  :host(
+    [clickable-background]:not([disabled]):not([readonly]):not([locked])
+  ) .checkbox:hover::before {
+    background-image: linear-gradient(
+      var(--jolly-checkbox-gradient-direction),
+      var(--jolly-control-bg-hover),
+      transparent 72%
+    );
+  }
+
+  :host(
+    [clickable-background]:not([disabled]):not([readonly]):not([locked])
+  ) .checkbox:has(input:focus-visible)::before {
+    background-image: linear-gradient(
+      var(--jolly-checkbox-gradient-direction),
+      var(--jolly-control-bg-focus),
+      transparent 72%
+    );
+  }
+
+  .value input[type="checkbox"] {
+    flex: 0 0 auto;
+    width: 14px;
+    height: 14px;
+    margin: 0;
+    accent-color: var(--jolly-field-active-color);
+    cursor: pointer;
+  }
+
+  :host([clickable-background]) .value input[type="checkbox"] {
+    margin-inline: var(--jolly-space-1, 4px) 0;
+  }
+
+  :host([clickable-background][align="end"]) .value input[type="checkbox"] {
+    margin-inline: 0 var(--jolly-space-1, 4px);
+  }
+
+  .value input[type="checkbox"]:focus-visible {
+    outline: none;
+  }
+
+  :host([disabled]) .value input[type="checkbox"] {
+    cursor: default;
+  }
+
+  :host([clickable-background][disabled]) .checkbox,
+  :host([clickable-background][readonly]) .checkbox,
+  :host([clickable-background][locked]) .checkbox {
+    cursor: default;
+  }
+`;
+//# sourceMappingURL=Checkbox.styles.js.map

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

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

package/dist/controls/Color.d.ts

@@ -0,0 +1,35 @@
+import { type TemplateResult } from "lit";
+import { JollyField } from "../field/JollyField.ts";
+import { ColorPicker } from "./ColorPicker.ts";
+export interface ColorDefaults {
+    value: string;
+}
+/**
+ * Colour field with a swatch popover and draftable hex input.
+ * Escape restores the value held when the popover opened.
+ */
+export declare class Color extends JollyField<string> {
+    #private;
+    static readonly Defaults: ColorDefaults;
+    static styles: import("lit").CSSResult[];
+    /**
+     * Enables alpha controls and `#rrggbbaa` output.
+     */
+    alpha: boolean;
+    _swatch: HTMLButtonElement;
+    _popover: HTMLElement;
+    _picker: ColorPicker;
+    _hex: HTMLInputElement;
+    constructor();
+    /**
+     * Compares normalized colour values.
+     */
+    protected valuesEqual(a: string, b: string): boolean;
+    protected renderValue(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "jolly-color": Color;
+    }
+}
+//# sourceMappingURL=Color.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Color.d.ts","sourceRoot":"","sources":["../../src/controls/Color.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAQb,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAYpD,OAAO,EACL,WAAW,EACZ,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,qBACa,KAAM,SAAQ,UAAU,CAAC,MAAM,CAAC;;IAC3C,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAErC;IAEF,OAAgB,MAAM,4BAGpB;IAEF;;OAEG;IAEK,KAAK,EAAE,OAAO,CAAC;IAGf,OAAO,EAAE,iBAAiB,CAAC;IAG3B,QAAQ,EAAE,WAAW,CAAC;IAGtB,OAAO,EAAE,WAAW,CAAC;IAGrB,IAAI,EAAE,gBAAgB,CAAC;;IA8B/B;;OAEG;cACgB,WAAW,CAC5B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,GACR,OAAO;IAcV,SAAS,CAAC,WAAW,IAAI,cAAc;CA2JxC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,KAAK,CAAC;KACtB;CACF"}