@jolly-pixel/ui 1.0.1 → 2.0.0

package/dist/math/Transform.styles.js

@@ -1,21 +1,21 @@
 // Import Third-party Dependencies
 import { css } from "lit";
-export const transformStyles = css `
-  :host {
-    /*
-     * Position, rotation and scale lock independently, so any one of them can
-     * grow its gutter for a lock glyph. Reserving it for all three up front is
-     * what keeps their labels aligned regardless of which is locked.
-     */
-    --jolly-gutter-width: 14px;
-
-    display: flex;
-    flex-direction: column;
-    gap: var(--jolly-row-gap, 0px);
-  }
-
-  :host([label-position="top"]) {
-    gap: var(--jolly-space-2, 8px);
-  }
+export const transformStyles = css `
+  :host {
+    /*
+     * Position, rotation and scale lock independently, so any one of them can
+     * grow its gutter for a lock glyph. Reserving it for all three up front is
+     * what keeps their labels aligned regardless of which is locked.
+     */
+    --jolly-gutter-width: 14px;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--jolly-row-gap, 0px);
+  }
+
+  :host([label-position="top"]) {
+    gap: var(--jolly-space-2, 8px);
+  }
 `;
 //# sourceMappingURL=Transform.styles.js.map

package/dist/math/VectorField.js

@@ -51,10 +51,10 @@ export class VectorField extends JollyField {
         return vectorValueEquals(a, b);
     }
     renderValue() {
-        return html `
-      <div class="axes">
-        ${this.getAxisKeys().map((axis) => this.#controllerFor(axis).render())}
-      </div>
+        return html `
+      <div class="axes">
+        ${this.getAxisKeys().map((axis) => this.#controllerFor(axis).render())}
+      </div>
     `;
     }
     #syncAxisKeys() {

package/dist/math/VectorField.styles.js

@@ -5,107 +5,107 @@ import { fillTransition } from "../theme/styles/mixins.js";
 /**
  * Axis-box styles shared by vectors and Quaternion's Euler inputs.
  */
-export const vectorFieldStyles = css `
-  .axes {
-    display: flex;
-    flex: 1 1 auto;
-    gap: var(--jolly-space-1, 4px);
-    min-width: 0;
-  }
-
-  .axis-box {
-    position: relative;
-    display: flex;
-    flex: 1 1 0;
-    align-items: center;
-    min-width: 0;
-  }
-
-  .axis-box input {
-    flex: 1 1 auto;
-    min-width: 0;
-    height: var(--jolly-control-height, 20px);
-    border: 0;
-    border-radius: var(--jolly-radius-sm, 2px);
-    background: var(--jolly-control-bg, transparent);
-    color: inherit;
-    font: inherit;
-    font-variant-numeric: inherit;
-    ${fillTransition}
-  }
-
-  /* Match the shared input rule's specificity to preserve the scrub inset. */
-  .value .axis-box input:not([type="color"]) {
-    padding: 0 var(--jolly-space-1, 4px) 0 10px;
-  }
-
-  .axis-box input:hover:not(:disabled) {
-    background: var(--jolly-control-bg-hover);
-  }
-
-  .axis-box input:focus {
-    background: var(--jolly-control-bg-focus);
-    outline: none;
-  }
-
-  :host([invalid]) .axis-box input {
-    background: var(--jolly-invalid-bg);
-  }
-
-  :host([readonly]) .axis-box input {
-    background: var(--jolly-control-bg-muted);
-  }
-
-  /* Axis color is decorative; aria-label carries the accessible identity. */
-  .axis-tag {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 1;
-    width: 0;
-    height: 0;
-    overflow: hidden;
-    border-width: 6px;
-    border-style: solid;
-    border-color:
-      var(--jolly-axis-color, var(--jolly-border-strong))
-      var(--jolly-axis-color, var(--jolly-border-strong))
-      transparent
-      transparent;
-    color: transparent;
-    font-size: 0;
-    pointer-events: none;
-  }
-
-  .scrub-handle {
-    position: absolute;
-    inset-block: 1px;
-    left: 1px;
-    z-index: 1;
-    width: 8px;
-    border-radius: var(--jolly-radius-sm, 2px) 0 0 var(--jolly-radius-sm, 2px);
-  }
-
-  :host([scrubbable]) .scrub-handle {
-    cursor: ew-resize;
-    touch-action: none;
-  }
-
-  .scrub-handle::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 3px;
-    width: 2px;
-    height: 55%;
-    border-radius: 1px;
-    background: var(--jolly-groove);
-    transform: translateY(-50%);
-    ${fillTransition}
-  }
-
-  :host([scrubbable]) .scrub-handle:hover::before {
-    background: var(--jolly-accent-fill);
-  }
+export const vectorFieldStyles = css `
+  .axes {
+    display: flex;
+    flex: 1 1 auto;
+    gap: var(--jolly-space-1, 4px);
+    min-width: 0;
+  }
+
+  .axis-box {
+    position: relative;
+    display: flex;
+    flex: 1 1 0;
+    align-items: center;
+    min-width: 0;
+  }
+
+  .axis-box input {
+    flex: 1 1 auto;
+    min-width: 0;
+    height: var(--jolly-control-height, 20px);
+    border: 0;
+    border-radius: var(--jolly-radius-sm, 2px);
+    background: var(--jolly-control-bg, transparent);
+    color: inherit;
+    font: inherit;
+    font-variant-numeric: inherit;
+    ${fillTransition}
+  }
+
+  /* Match the shared input rule's specificity to preserve the scrub inset. */
+  .value .axis-box input:not([type="color"]) {
+    padding: 0 var(--jolly-space-1, 4px) 0 10px;
+  }
+
+  .axis-box input:hover:not(:disabled) {
+    background: var(--jolly-control-bg-hover);
+  }
+
+  .axis-box input:focus {
+    background: var(--jolly-control-bg-focus);
+    outline: none;
+  }
+
+  :host([invalid]) .axis-box input {
+    background: var(--jolly-invalid-bg);
+  }
+
+  :host([readonly]) .axis-box input {
+    background: var(--jolly-control-bg-muted);
+  }
+
+  /* Axis color is decorative; aria-label carries the accessible identity. */
+  .axis-tag {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    border-width: 6px;
+    border-style: solid;
+    border-color:
+      var(--jolly-axis-color, var(--jolly-border-strong))
+      var(--jolly-axis-color, var(--jolly-border-strong))
+      transparent
+      transparent;
+    color: transparent;
+    font-size: 0;
+    pointer-events: none;
+  }
+
+  .scrub-handle {
+    position: absolute;
+    inset-block: 1px;
+    left: 1px;
+    z-index: 1;
+    width: 8px;
+    border-radius: var(--jolly-radius-sm, 2px) 0 0 var(--jolly-radius-sm, 2px);
+  }
+
+  :host([scrubbable]) .scrub-handle {
+    cursor: ew-resize;
+    touch-action: none;
+  }
+
+  .scrub-handle::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 3px;
+    width: 2px;
+    height: 55%;
+    border-radius: 1px;
+    background: var(--jolly-groove);
+    transform: translateY(-50%);
+    ${fillTransition}
+  }
+
+  :host([scrubbable]) .scrub-handle:hover::before {
+    background: var(--jolly-accent-fill);
+  }
 `;
 //# sourceMappingURL=VectorField.styles.js.map

package/dist/monitors/Graph.js

@@ -71,14 +71,14 @@ let GraphElement = class GraphElement extends LitElement {
         this.#draw();
     }
     render() {
-        return html `
-      <div class="wrap">
-        ${this.#renderLabel()}
-        <div class="canvas-wrap">
-          <canvas></canvas>
-          <span class="value">${this.#displayed}</span>
-        </div>
-      </div>
+        return html `
+      <div class="wrap">
+        ${this.#renderLabel()}
+        <div class="canvas-wrap">
+          <canvas></canvas>
+          <span class="value">${this.#displayed}</span>
+        </div>
+      </div>
     `;
     }
     #renderLabel() {

package/dist/monitors/Graph.styles.js

@@ -1,46 +1,46 @@
 // Import Third-party Dependencies
 import { css } from "lit";
-export const graphStyles = css `
-  :host {
-    display: block;
-    font-family: var(--jolly-font-family, ui-monospace, monospace);
-    font-size: var(--jolly-font-size, 11px);
-  }
-
-  :host([disabled]) {
-    opacity: 0.5;
-  }
-
-  .wrap {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--jolly-space-1, 4px) / 2);
-  }
-
-  .label {
-    color: var(--jolly-text-muted);
-  }
-
-  .canvas-wrap {
-    position: relative;
-  }
-
-  canvas {
-    display: block;
-    width: 100%;
-    height: calc(var(--jolly-row-height, 20px) * var(--jolly-graph-rows, 3));
-    border-radius: var(--jolly-radius-sm, 2px);
-    background: var(--jolly-control-bg);
-  }
-
-  .value {
-    position: absolute;
-    top: 2px;
-    right: 4px;
-    color: var(--jolly-text);
-    font-variant-numeric: var(--jolly-font-numeric, tabular-nums);
-    text-shadow: 0 1px 2px var(--jolly-surface, transparent);
-    pointer-events: none;
-  }
+export const graphStyles = css `
+  :host {
+    display: block;
+    font-family: var(--jolly-font-family, ui-monospace, monospace);
+    font-size: var(--jolly-font-size, 11px);
+  }
+
+  :host([disabled]) {
+    opacity: 0.5;
+  }
+
+  .wrap {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--jolly-space-1, 4px) / 2);
+  }
+
+  .label {
+    color: var(--jolly-text-muted);
+  }
+
+  .canvas-wrap {
+    position: relative;
+  }
+
+  canvas {
+    display: block;
+    width: 100%;
+    height: calc(var(--jolly-row-height, 20px) * var(--jolly-graph-rows, 3));
+    border-radius: var(--jolly-radius-sm, 2px);
+    background: var(--jolly-control-bg);
+  }
+
+  .value {
+    position: absolute;
+    top: 2px;
+    right: 4px;
+    color: var(--jolly-text);
+    font-variant-numeric: var(--jolly-font-numeric, tabular-nums);
+    text-shadow: 0 1px 2px var(--jolly-surface, transparent);
+    pointer-events: none;
+  }
 `;
 //# sourceMappingURL=Graph.styles.js.map

package/dist/monitors/Monitor.js

@@ -28,11 +28,11 @@ let MonitorElement = class MonitorElement extends LitElement {
         this.format = undefined;
     }
     render() {
-        return html `
-      <div class="row">
-        <span class="label">${this.label}</span>
-        <span class="value">${this.#displayed}</span>
-      </div>
+        return html `
+      <div class="row">
+        <span class="label">${this.label}</span>
+        <span class="value">${this.#displayed}</span>
+      </div>
     `;
     }
     get #displayed() {

package/dist/monitors/Monitor.styles.js

@@ -3,36 +3,36 @@ import { css } from "lit";
 // Import Internal Dependencies
 import { kFallback } from "../theme/styles/fallbacks.js";
 import { truncate } from "../theme/styles/mixins.js";
-export const monitorStyles = 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});
-  }
-
-  :host([disabled]) {
-    opacity: 0.5;
-  }
-
-  .row {
-    display: flex;
-    align-items: center;
-    gap: var(--jolly-space-1, 4px);
-    min-height: var(--jolly-row-height, 20px);
-    padding-inline: var(--jolly-space-1, 4px);
-  }
-
-  .label {
-    flex: 1 1 auto;
-    min-width: 0;
-    color: var(--jolly-text-muted);
-    ${truncate}
-  }
-
-  .value {
-    flex: 0 0 auto;
-    font-variant-numeric: var(--jolly-font-numeric, tabular-nums);
-  }
+export const monitorStyles = 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});
+  }
+
+  :host([disabled]) {
+    opacity: 0.5;
+  }
+
+  .row {
+    display: flex;
+    align-items: center;
+    gap: var(--jolly-space-1, 4px);
+    min-height: var(--jolly-row-height, 20px);
+    padding-inline: var(--jolly-space-1, 4px);
+  }
+
+  .label {
+    flex: 1 1 auto;
+    min-width: 0;
+    color: var(--jolly-text-muted);
+    ${truncate}
+  }
+
+  .value {
+    flex: 0 0 auto;
+    font-variant-numeric: var(--jolly-font-numeric, tabular-nums);
+  }
 `;
 //# sourceMappingURL=Monitor.styles.js.map

package/dist/peer/Presence.js

@@ -69,48 +69,48 @@ let PresenceElement = class PresenceElement extends LitElement {
     render() {
         const visiblePeers = this.#visiblePeers();
         const overflow = this.#peers.length - visiblePeers.length;
-        return html `
-      <div class="summary" part="summary" aria-live="polite">
-        ${formatConnectionCount(this.#peers.length)}
-      </div>
-      <ul class="list" part="list">
-        ${visiblePeers.map((peer) => this.#renderPeer(peer))}
+        return html `
+      <div class="summary" part="summary" aria-live="polite">
+        ${formatConnectionCount(this.#peers.length)}
+      </div>
+      <ul class="list" part="list">
+        ${visiblePeers.map((peer) => this.#renderPeer(peer))}
         ${overflow > 0
-            ? html `
-            <li class="overflow" part="overflow">+${overflow} more</li>
+            ? html `
+            <li class="overflow" part="overflow">+${overflow} more</li>
           `
-            : ""}
-      </ul>
+            : ""}
+      </ul>
     `;
     }
     #renderPeer(peer) {
-        const body = html `
-      <span
-        class="swatch"
-        part="swatch"
-        role="img"
-        aria-label=${`${peer.displayName}'s color`}
-        style=${`background-color: ${peer.color}`}
-      ></span>
-      <span class=${peer.self ? "self" : ""}>
-        ${peer.displayName}${peer.self ? " (you)" : ""}
-      </span>
+        const body = html `
+      <span
+        class="swatch"
+        part="swatch"
+        role="img"
+        aria-label=${`${peer.displayName}'s color`}
+        style=${`background-color: ${peer.color}`}
+      ></span>
+      <span class=${peer.self ? "self" : ""}>
+        ${peer.displayName}${peer.self ? " (you)" : ""}
+      </span>
     `;
         if (!this.#selectable || peer.self) {
-            return html `
-        <li class="peer" part="peer">${body}</li>
+            return html `
+        <li class="peer" part="peer">${body}</li>
       `;
         }
-        return html `
-      <li class="peer" part="peer">
-        <button
-          class="select"
-          part="peer-button"
-          type="button"
-          aria-label=${`Select ${peer.displayName}`}
-          @click=${() => this.#select(peer)}
-        >${body}</button>
-      </li>
+        return html `
+      <li class="peer" part="peer">
+        <button
+          class="select"
+          part="peer-button"
+          type="button"
+          aria-label=${`Select ${peer.displayName}`}
+          @click=${() => this.#select(peer)}
+        >${body}</button>
+      </li>
     `;
     }
     #select(peer) {