@jolly-pixel/ui 1.0.1

package/dist/controls/ColorPicker.styles.js

@@ -0,0 +1,305 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+// Import Internal Dependencies
+import { focusRing } from "../theme/styles/mixins.js";
+/**
+ * Renders picker surfaces with gradients driven by custom properties.
+ */
+export const colorPickerStyles = css `
+  :host {
+    --jolly-picker-width: 180px;
+    --jolly-picker-area-height: 110px;
+    --jolly-picker-track-height: 12px;
+    /* Centers a narrow ramp within the pointer hit area. */
+    --jolly-picker-ramp-height: 4px;
+    --jolly-picker-knob: 10px;
+    --jolly-picker-checker: color-mix(in oklab, var(--jolly-ink) 18%, transparent);
+    /* Hosts can set this to 0 when clipping the panel to their radius. */
+    --jolly-picker-radius: var(--jolly-radius-md, 6px);
+
+    display: block;
+    width: var(--jolly-picker-width);
+    color: var(--jolly-text, CanvasText);
+    font-family: inherit;
+    font-size: inherit;
+  }
+
+  :host([disabled]) {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .panel {
+    display: flex;
+    flex-direction: column;
+    gap: var(--jolly-space-1, 4px);
+  }
+
+  /* Checkerboard reveals alpha independently of the surface colour. */
+  .checker {
+    background-color: var(--jolly-surface-raised, Canvas);
+    background-image: conic-gradient(
+      var(--jolly-picker-checker) 25%,
+      transparent 0 50%,
+      var(--jolly-picker-checker) 0 75%,
+      transparent 0
+    );
+    background-size: 8px 8px;
+  }
+
+  /*
+   * Saturation runs left to right and value bottom to top. Resolve the hue here;
+   * resolving it on :host before assignment paints every hue red.
+   */
+  .area {
+    position: relative;
+    height: var(--jolly-picker-area-height);
+    border-radius: var(--jolly-picker-radius);
+    background-image:
+      linear-gradient(to top, #000, transparent),
+      linear-gradient(
+        to right,
+        #fff,
+        hsl(calc(var(--jolly-picker-hue, 0) * 1deg) 100% 50%)
+      );
+    cursor: crosshair;
+    touch-action: none;
+  }
+
+  .area-cursor {
+    position: absolute;
+    left: calc(var(--jolly-picker-x, 0) * 100%);
+    top: calc(var(--jolly-picker-y, 0) * 100%);
+    width: var(--jolly-picker-knob);
+    height: var(--jolly-picker-knob);
+    box-sizing: border-box;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
+
+  /*
+   * Hidden native ranges provide keyboard and screen-reader control for both
+   * axes. Keep them focusable; display and visibility cannot hide them.
+   */
+  .axis {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /* Provides a large hit area around the narrow ramp. */
+  .track {
+    position: relative;
+    height: var(--jolly-picker-track-height);
+    touch-action: none;
+  }
+
+  .track::before {
+    content: "";
+    position: absolute;
+    inset-inline: 0;
+    top: 50%;
+    height: var(--jolly-picker-ramp-height);
+    border-radius: calc(var(--jolly-picker-ramp-height) / 2);
+    transform: translateY(-50%);
+    pointer-events: none;
+    transition: height var(--jolly-duration-fast, 100ms) var(--jolly-easing, ease);
+  }
+
+  .track.hue::before {
+    background-image: linear-gradient(
+      to right,
+      hsl(0 100% 50%),
+      hsl(60 100% 50%),
+      hsl(120 100% 50%),
+      hsl(180 100% 50%),
+      hsl(240 100% 50%),
+      hsl(300 100% 50%),
+      hsl(360 100% 50%)
+    );
+  }
+
+  /* Composites the alpha ramp over the checkerboard on one element. */
+  .track.alpha::before {
+    background-color: var(--jolly-surface-raised, Canvas);
+    background-image:
+      linear-gradient(
+        to right,
+        transparent,
+        var(--jolly-picker-opaque, #000)
+      ),
+      conic-gradient(
+        var(--jolly-picker-checker) 25%,
+        transparent 0 50%,
+        var(--jolly-picker-checker) 0 75%,
+        transparent 0
+      );
+    background-size: auto, 6px 6px;
+  }
+
+  .track:has(input:focus-visible) {
+    --jolly-picker-ramp-height: 6px;
+    --jolly-picker-knob: 12px;
+  }
+
+  .track input[type="range"] {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    appearance: none;
+    cursor: pointer;
+  }
+
+  .track input[type="range"]::-webkit-slider-runnable-track {
+    height: 100%;
+    background: none;
+  }
+
+  .track input[type="range"]::-moz-range-track {
+    height: 100%;
+    background: none;
+  }
+
+  /* Matches slider sizing; white remains visible across all hues. */
+  .track input[type="range"]::-webkit-slider-thumb {
+    appearance: none;
+    width: var(--jolly-picker-knob);
+    height: var(--jolly-picker-knob);
+    box-sizing: border-box;
+    margin-top: calc(
+      (var(--jolly-picker-track-height) - var(--jolly-picker-knob)) / 2
+    );
+    border: none;
+    border-radius: var(--jolly-radius-sm, 2px);
+    background: #fff;
+    box-shadow: 0 1px 3px rgb(0 0 0 / 0.45);
+    transition:
+      width var(--jolly-duration-fast, 100ms) var(--jolly-easing, ease),
+      height var(--jolly-duration-fast, 100ms) var(--jolly-easing, ease);
+  }
+
+  .track input[type="range"]::-moz-range-thumb {
+    width: var(--jolly-picker-knob);
+    height: var(--jolly-picker-knob);
+    box-sizing: border-box;
+    border: none;
+    border-radius: var(--jolly-radius-sm, 2px);
+    background: #fff;
+    box-shadow: 0 1px 3px rgb(0 0 0 / 0.45);
+    transition:
+      width var(--jolly-duration-fast, 100ms) var(--jolly-easing, ease),
+      height var(--jolly-duration-fast, 100ms) var(--jolly-easing, ease);
+  }
+
+  /* Aligns the alpha readout with the slider value column. */
+  .lane {
+    display: flex;
+    align-items: center;
+    gap: var(--jolly-space-1, 4px);
+  }
+
+  .lane .track {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  /* Outline focus without altering the represented colour. */
+  .area:has(input:focus-visible),
+  .track:has(input:focus-visible) {
+    ${focusRing}
+    outline-offset: 1px;
+  }
+
+  .footer {
+    display: flex;
+    align-items: center;
+    gap: var(--jolly-space-1, 4px);
+  }
+
+  .preview {
+    flex: 0 0 auto;
+    width: var(--jolly-control-height, 20px);
+    height: var(--jolly-control-height, 20px);
+    border-radius: var(--jolly-radius-sm, 2px);
+  }
+
+  .preview-face {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background: var(--jolly-picker-color, transparent);
+  }
+
+  .hex,
+  .readout {
+    height: var(--jolly-control-height, 20px);
+    padding: 0 var(--jolly-space-1, 4px);
+    border: none;
+    border-radius: var(--jolly-radius-sm, 2px);
+    background: var(--jolly-control-bg, ButtonFace);
+    color: inherit;
+    font: inherit;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .hex {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  /* Prevents ramp movement as the readout width changes. */
+  .readout {
+    flex: 0 0 auto;
+    width: 4ch;
+    text-align: right;
+  }
+
+  .hex:hover:not(:disabled),
+  .readout:hover:not(:disabled) {
+    background: var(--jolly-control-bg-hover);
+  }
+
+  .hex:focus-visible,
+  .readout:focus-visible {
+    background: var(--jolly-control-bg-focus);
+    outline: none;
+  }
+
+  .hex[aria-invalid="true"] {
+    background: var(--jolly-invalid-bg);
+    color: var(--jolly-danger, inherit);
+  }
+
+  :host([readonly]) .area,
+  :host([readonly]) .track {
+    cursor: default;
+  }
+
+  @media (forced-colors: active) {
+    .area,
+    .track {
+      forced-color-adjust: none;
+    }
+
+    /* The surfaces opt out of substitution, so the ring names the system colour. */
+    .area:has(input:focus-visible),
+    .track:has(input:focus-visible) {
+      outline-color: Highlight;
+    }
+  }
+`;
+//# sourceMappingURL=ColorPicker.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.styles.js","sourceRoot":"","sources":["../../src/controls/ColorPicker.styles.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,+BAA+B;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAsN9B,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFd,CAAC"}

package/dist/controls/Control.d.ts

@@ -0,0 +1,21 @@
+import { LitElement, type TemplateResult } from "lit";
+import "../icon/Icon.ts";
+/**
+ * A declarative key hint inside `jolly-controls`.
+ */
+export declare class Control extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult;
+    description: string;
+    details: string;
+    _detailsButton: HTMLButtonElement | null;
+    _details: HTMLElement | null;
+    constructor();
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "jolly-control": Control;
+    }
+}
+//# sourceMappingURL=Control.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Control.d.ts","sourceRoot":"","sources":["../../src/controls/Control.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EAGV,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAYb,OAAO,iBAAiB,CAAC;AAIzB;;GAEG;AACH,qBACa,OAAQ,SAAQ,UAAU;;IACrC,OAAgB,MAAM,0BAAiB;IAG/B,WAAW,EAAE,MAAM,CAAC;IAGpB,OAAO,EAAE,MAAM,CAAC;IAGhB,cAAc,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAGzC,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;;IA0B5B,MAAM,IAAI,cAAc;CAwFlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,OAAO,CAAC;KAC1B;CACF"}

package/dist/controls/Control.js

@@ -0,0 +1,137 @@
+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, query } from "lit/decorators.js";
+// Import Internal Dependencies
+import { controlStyles } from "./Control.styles.js";
+import { PopoverController } from "../field/PopoverController.js";
+// Side-effect import: details use the shared information icon.
+import "../icon/Icon.js";
+let nextDetailsId = 0;
+/**
+ * A declarative key hint inside `jolly-controls`.
+ */
+let Control = class Control extends LitElement {
+    static styles = controlStyles;
+    #detailsId = `jolly-control-details-${nextDetailsId++}`;
+    #pointerFocus = false;
+    #popup = new PopoverController(this, {
+        anchor: () => this._detailsButton,
+        popover: () => this._details,
+        side: "above",
+        align: "center",
+        onOpen: () => {
+            this._details?.style.setProperty("visibility", "visible");
+        }
+    });
+    constructor() {
+        super();
+        this.description = "";
+        this.details = "";
+        this.setAttribute("role", "listitem");
+    }
+    render() {
+        return html `
+      <div class="keys"><slot></slot></div>
+      <span class="description">${this.description}</span>
+      ${this.details === "" ? nothing : this.#renderDetails()}
+    `;
+    }
+    #renderDetails() {
+        return html `
+      <button
+        class="details-button"
+        type="button"
+        aria-label=${`More information about ${this.description}`}
+        aria-describedby=${this.#detailsId}
+        aria-expanded=${this.#popup.open}
+        aria-haspopup="true"
+        @click=${this.#toggleDetails}
+        @mouseenter=${this.#showDetails}
+        @mouseleave=${this.#hideDetails}
+        @pointerdown=${this.#onPointerDown}
+        @pointerup=${this.#onPointerUp}
+        @pointercancel=${this.#onPointerUp}
+        @focus=${this.#onFocus}
+        @blur=${this.#hideDetails}
+      >
+        <jolly-icon name="info"></jolly-icon>
+      </button>
+      <div
+        class="details"
+        id=${this.#detailsId}
+        popover="auto"
+        role="tooltip"
+        @beforetoggle=${this.#popup.onBeforeToggle}
+        @toggle=${this.#popup.onToggle}
+      >
+        ${this.details}
+      </div>
+    `;
+    }
+    #showDetails() {
+        if (!this.#popup.open) {
+            const details = this._details;
+            if (details === null) {
+                return;
+            }
+            details.style.setProperty("visibility", "hidden");
+            details.showPopover();
+        }
+    }
+    #onPointerDown() {
+        this.#pointerFocus = true;
+    }
+    #onPointerUp() {
+        this.#pointerFocus = false;
+    }
+    #onFocus() {
+        if (!this.#pointerFocus) {
+            this.#showDetails();
+        }
+    }
+    #hideDetails() {
+        if (this.#popup.open) {
+            this._details?.style.setProperty("visibility", "hidden");
+            this.#popup.hide();
+        }
+    }
+    #toggleDetails() {
+        if (this.#popup.open) {
+            this.#hideDetails();
+        }
+        else {
+            this.#showDetails();
+        }
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Control.prototype, "description", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Control.prototype, "details", void 0);
+__decorate([
+    query(".details-button"),
+    __metadata("design:type", Object)
+], Control.prototype, "_detailsButton", void 0);
+__decorate([
+    query(".details"),
+    __metadata("design:type", Object)
+], Control.prototype, "_details", void 0);
+Control = __decorate([
+    customElement("jolly-control"),
+    __metadata("design:paramtypes", [])
+], Control);
+export { Control };
+//# sourceMappingURL=Control.js.map

package/dist/controls/Control.js.map

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

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

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

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

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

package/dist/controls/Control.styles.js

@@ -0,0 +1,108 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+// Import Internal Dependencies
+import { focusRing, truncate } from "../theme/styles/mixins.js";
+export const controlStyles = css `
+  :host {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    gap: calc(var(--jolly-controls-inset, 10px) / 2);
+    align-items: center;
+    min-inline-size: 0;
+    min-block-size: var(--jolly-control-height);
+  }
+
+  .keys {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 2px;
+  }
+
+  ::slotted(kbd) {
+    box-sizing: border-box;
+    min-inline-size: calc(var(--jolly-control-height) + 2px);
+    min-block-size: calc(var(--jolly-control-height) + 2px);
+    padding: 1px 6px;
+    color: var(--jolly-text);
+    font-family: inherit;
+    font-size: calc(var(--jolly-font-size) + 1px);
+    font-weight: 700;
+    line-height: calc(var(--jolly-control-height) - 2px);
+    text-align: center;
+    letter-spacing: 0.02em;
+    white-space: nowrap;
+    background: color-mix(
+      in oklab,
+      var(--jolly-ink) 18%,
+      var(--jolly-surface-raised)
+    );
+    border: 1px solid var(--jolly-border);
+    border-radius: 3px;
+  }
+
+  .description {
+    min-inline-size: 0;
+    color: var(--jolly-text);
+    ${truncate}
+  }
+
+  .details-button {
+    display: grid;
+    place-items: center;
+    box-sizing: border-box;
+    inline-size: var(--jolly-control-height);
+    block-size: var(--jolly-control-height);
+    padding: 0;
+    color: var(--jolly-text-muted);
+    background: transparent;
+    border: 0;
+    border-radius: 50%;
+    cursor: pointer;
+  }
+
+  .details-button:hover {
+    color: var(--jolly-text);
+    background: var(--jolly-control-bg-hover);
+  }
+
+  .details-button:focus-visible {
+    ${focusRing}
+    outline-offset: 2px;
+  }
+
+  jolly-icon {
+    inline-size: calc(var(--jolly-control-height) - 4px);
+    block-size: calc(var(--jolly-control-height) - 4px);
+  }
+
+  .details {
+    position: fixed;
+    inset: auto;
+    width: max-content;
+    margin: 0;
+    visibility: hidden;
+    box-sizing: border-box;
+    max-inline-size: min(20rem, calc(100vw - 2rem));
+    padding: calc(var(--jolly-controls-inset, 10px) / 1.5);
+    color: var(--jolly-text);
+    font: inherit;
+    line-height: 1.4;
+    background: var(--jolly-surface-raised);
+    border: 0;
+    border-radius: 4px;
+    box-shadow: var(--jolly-shadow-floating);
+  }
+
+  .details::backdrop {
+    background: transparent;
+  }
+
+  @media (forced-colors: active) {
+    ::slotted(kbd),
+    .details {
+      background: Canvas;
+      border-color: CanvasText;
+    }
+  }
+`;
+//# sourceMappingURL=Control.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Control.styles.js","sourceRoot":"","sources":["../../src/controls/Control.styles.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,+BAA+B;AAC/B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAyC1B,QAAQ;;;;;;;;;;;;;;;;;;;;;;;MAuBR,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCd,CAAC"}

package/dist/controls/Controls.d.ts

@@ -0,0 +1,25 @@
+import { LitElement, type TemplateResult } from "lit";
+export type ControlsPosition = "top-left" | "top-middle" | "top-right" | "middle-left" | "middle" | "middle-right" | "bottom-left" | "bottom-middle" | "bottom-right";
+export interface ControlsDefaults {
+    position: ControlsPosition;
+    maxEntriesPerRow: number;
+    heading: string;
+}
+/**
+ * A positioned, declarative HUD card for scene control hints.
+ */
+export declare class Controls extends LitElement {
+    static readonly Defaults: ControlsDefaults;
+    static styles: import("lit").CSSResult;
+    position: ControlsPosition;
+    maxEntriesPerRow: number;
+    heading: string;
+    constructor();
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "jolly-controls": Controls;
+    }
+}
+//# sourceMappingURL=Controls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Controls.d.ts","sourceRoot":"","sources":["../../src/controls/Controls.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EAGV,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AASb,MAAM,MAAM,gBAAgB,GACxB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,QAAQ,GACR,cAAc,GACd,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,gBAAgB,CAIxC;IAEF,OAAgB,MAAM,0BAAkB;IAGhC,QAAQ,EAAE,gBAAgB,CAAC;IAM3B,gBAAgB,EAAE,MAAM,CAAC;IAGzB,OAAO,EAAE,MAAM,CAAC;;IAUf,MAAM,IAAI,cAAc;CAsBlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,QAAQ,CAAC;KAC5B;CACF"}