@jolly-pixel/ui 1.0.1 → 2.0.0

package/dist/controls/Separator.styles.js

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

package/dist/controls/Slider.js

@@ -43,42 +43,42 @@ let Slider = class Slider extends JollyField {
     }
     renderValue() {
         const value = this.concreteValue;
-        return html `
-      <div class="lane" style="--jolly-slider-progress:${this.#progress}">
-        <input
-          type="range"
-          min=${this.min}
-          max=${this.max}
-          step=${this.step}
-          .value=${String(value ?? this.min)}
-          ?disabled=${this.disabled}
-          aria-label=${this.label === "" ? nothing : this.label}
-          aria-readonly=${this.readonlyAria}
-          aria-disabled=${this.lockedAria}
-          aria-description=${this.lockDescription}
-          aria-valuetext=${this.mixed ? "Mixed" : nothing}
-          @input=${this.#onInput}
-          @change=${this.#onChange}
-        >
-      </div>
-      <input
-        class="readout"
-        type="text"
-        inputmode="decimal"
-        .value=${this.draft ?? this.#displayed}
-        placeholder=${this.mixed ? MIXED_PLACEHOLDER : ""}
-        ?disabled=${this.disabled}
-        ?readonly=${this.inputReadonly}
-        ?data-pointer-focus=${this.#pointerFocus.active}
-        aria-label=${this.label === "" ? "Value" : `${this.label} value`}
-        aria-readonly=${this.readonlyAria}
-        aria-disabled=${this.lockedAria}
-        aria-invalid=${this.displayError === null ? nothing : "true"}
-        @input=${this.onDraftInput}
-        @focus=${this.#pointerFocus.onFocus}
-        @keydown=${this.#onKeyDown}
-        @blur=${this.#onBlur}
-      >
+        return html `
+      <div class="lane" style="--jolly-slider-progress:${this.#progress}">
+        <input
+          type="range"
+          min=${this.min}
+          max=${this.max}
+          step=${this.step}
+          .value=${String(value ?? this.min)}
+          ?disabled=${this.disabled}
+          aria-label=${this.label === "" ? nothing : this.label}
+          aria-readonly=${this.readonlyAria}
+          aria-disabled=${this.lockedAria}
+          aria-description=${this.lockDescription}
+          aria-valuetext=${this.mixed ? "Mixed" : nothing}
+          @input=${this.#onInput}
+          @change=${this.#onChange}
+        >
+      </div>
+      <input
+        class="readout"
+        type="text"
+        inputmode="decimal"
+        .value=${this.draft ?? this.#displayed}
+        placeholder=${this.mixed ? MIXED_PLACEHOLDER : ""}
+        ?disabled=${this.disabled}
+        ?readonly=${this.inputReadonly}
+        ?data-pointer-focus=${this.#pointerFocus.active}
+        aria-label=${this.label === "" ? "Value" : `${this.label} value`}
+        aria-readonly=${this.readonlyAria}
+        aria-disabled=${this.lockedAria}
+        aria-invalid=${this.displayError === null ? nothing : "true"}
+        @input=${this.onDraftInput}
+        @focus=${this.#pointerFocus.onFocus}
+        @keydown=${this.#onKeyDown}
+        @blur=${this.#onBlur}
+      >
     `;
     }
     /**

package/dist/controls/Slider.styles.js

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

package/dist/controls/Text.js

@@ -26,23 +26,23 @@ let Text = class Text extends JollyField {
         this.value = "";
     }
     renderValue() {
-        return html `
-      <input
-        type="text"
-        .value=${this.draft ?? this.#displayed}
-        placeholder=${this.mixed ? MIXED_PLACEHOLDER : this.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.#onType}
-        @focus=${this.#pointerFocus.onFocus}
-        @keydown=${this.#onKeyDown}
-        @blur=${this.#onBlur}
-      >
+        return html `
+      <input
+        type="text"
+        .value=${this.draft ?? this.#displayed}
+        placeholder=${this.mixed ? MIXED_PLACEHOLDER : this.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.#onType}
+        @focus=${this.#pointerFocus.onFocus}
+        @keydown=${this.#onKeyDown}
+        @blur=${this.#onBlur}
+      >
     `;
     }
     /**

package/dist/data/Tree.d.ts

@@ -1,16 +1,6 @@
 import { LitElement, type TemplateResult } from "lit";
 import type { TreeDropAccept, TreeNode } from "./Tree.types.ts";
 import "../icon/Icon.ts";
-/**
- * A generic tree of `{ id, label, children }` rows, with drag and drop
- * reparenting, keyboard navigation and optional visibility/lock toggles.
- * Knows nothing about what a row represents.
- *
- * Fully controlled: `nodes`, `selected` and `expanded` are consumer owned,
- * the same as `value` on a field. A drop, a toggle or a selection change
- * emits an intent event; the element repaints only once the consumer writes
- * the new value back. See `docs/api/data/tree.md`.
- */
 export declare class Tree<TData = unknown> extends LitElement {
     #private;
     static styles: import("lit").CSSResult;
@@ -22,10 +12,6 @@ export declare class Tree<TData = unknown> extends LitElement {
     rowDrag: boolean;
     renamable: boolean;
     indentGuides: boolean;
-    /**
-     * Domain veto for a candidate drop. Consulted while dragging as well as on
-     * commit, so a move this rejects never paints a drop indicator.
-     */
     acceptDrop: TreeDropAccept | null;
     private _renamingId;
     private _anchorId;

package/dist/data/Tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["../../src/data/Tree.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EAGV,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAwBb,OAAO,KAAK,EACV,cAAc,EAEd,QAAQ,EACT,MAAM,iBAAiB,CAAC;AAGzB,OAAO,iBAAiB,CAAC;AAkBzB;;;;;;;;;GASG;AACH,qBACa,IAAI,CAAC,KAAK,GAAG,OAAO,CAAE,SAAQ,UAAU;;IACnD,OAAgB,MAAM,0BAAc;IAG5B,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;IAGzB,QAAQ,EAAE,MAAM,EAAE,CAAC;IAGnB,QAAQ,EAAE,MAAM,EAAE,CAAC;IAGnB,QAAQ,EAAE,OAAO,CAAC;IAGlB,WAAW,EAAE,OAAO,CAAC;IAOrB,OAAO,EAAE,OAAO,CAAC;IAGjB,SAAS,EAAE,OAAO,CAAC;IAOnB,YAAY,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IAEK,UAAU,EAAE,cAAc,GAAG,IAAI,CAAC;IAE1C,QACgB,WAAW,CAAgB;IAE3C,QACgB,SAAS,CAAgB;IAEzC,QACgB,YAAY,CAAqB;IAEjD,QACgB,aAAa,CAAkB;IAE/C,QACgB,UAAU,CAAmB;;IAuBpC,MAAM,IAAI,cAAc;cAmJd,OAAO,CACxB,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAC5B,IAAI;CA0hBR;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,IAAI,CAAC;KACpB;CACF"}
+{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["../../src/data/Tree.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EAGV,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAwBb,OAAO,KAAK,EACV,cAAc,EAEd,QAAQ,EACT,MAAM,iBAAiB,CAAC;AAGzB,OAAO,iBAAiB,CAAC;AAkBzB,qBACa,IAAI,CAAC,KAAK,GAAG,OAAO,CAAE,SAAQ,UAAU;;IACnD,OAAgB,MAAM,0BAAc;IAG5B,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;IAGzB,QAAQ,EAAE,MAAM,EAAE,CAAC;IAGnB,QAAQ,EAAE,MAAM,EAAE,CAAC;IAGnB,QAAQ,EAAE,OAAO,CAAC;IAGlB,WAAW,EAAE,OAAO,CAAC;IAOrB,OAAO,EAAE,OAAO,CAAC;IAGjB,SAAS,EAAE,OAAO,CAAC;IAOnB,YAAY,EAAE,OAAO,CAAC;IAGtB,UAAU,EAAE,cAAc,GAAG,IAAI,CAAC;IAE1C,QACgB,WAAW,CAAgB;IAE3C,QACgB,SAAS,CAAgB;IAEzC,QACgB,YAAY,CAAqB;IAEjD,QACgB,aAAa,CAAkB;IAE/C,QACgB,UAAU,CAAmB;;IAuBpC,MAAM,IAAI,cAAc;cA6Id,OAAO,CACxB,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAC5B,IAAI;CA4gBR;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,IAAI,CAAC;KACpB;CACF"}