@jolly-pixel/ui 1.0.1 → 2.0.0

package/dist/controls/Number.styles.js

@@ -5,49 +5,49 @@ import { fillTransition } from "../theme/styles/mixins.js";
 /**
  * The wrapper hosts the scrub handle over the native input.
  */
-export const numberStyles = css `
-  .wrap {
-    position: relative;
-    display: flex;
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-
-  /*
-   * Match the base selector specificity for the padding override.
-   */
-  .value .wrap input:not([type="color"]) {
-    padding-left: 10px;
-  }
-
-  .scrub-handle {
-    position: absolute;
-    inset-block: 1px;
-    left: 1px;
-    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 numberStyles = css `
+  .wrap {
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  /*
+   * Match the base selector specificity for the padding override.
+   */
+  .value .wrap input:not([type="color"]) {
+    padding-left: 10px;
+  }
+
+  .scrub-handle {
+    position: absolute;
+    inset-block: 1px;
+    left: 1px;
+    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=Number.styles.js.map

package/dist/controls/PropertyRow.js

@@ -31,21 +31,21 @@ let PropertyRow = class PropertyRow extends LitElement {
         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>
+        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>
-        `}
+            : html `
+          <p class="description">
+            <jolly-icon name="info"></jolly-icon>
+            <span>${this.description}</span>
+          </p>
+        `}
     `;
     }
 };

package/dist/controls/PropertyRow.styles.js

@@ -6,110 +6,110 @@ 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);
-  }
+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/Range.js

@@ -56,34 +56,34 @@ let Range = class Range extends JollyField {
     }
     renderValue() {
         const interval = this.concreteValue;
-        return html `
-      ${this.#renderEnd("from", interval?.from)}
-      <span class="separator" aria-hidden="true"></span>
-      ${this.#renderEnd("to", interval?.to)}
+        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}
+        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)}
-      >
+            (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)}
+      >
     `;
     }
     /**

package/dist/controls/Range.styles.js

@@ -1,29 +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;
-  }
+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/Select.js

@@ -31,29 +31,29 @@ let Select = class Select extends JollyField {
         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>
+        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>
     `;
     }
     /**

package/dist/controls/Select.styles.js

@@ -1,51 +1,51 @@
 // Import Third-party Dependencies
 import { css } from "lit";
-export const selectStyles = css `
-  .value .select-wrap {
-    position: relative;
-    display: flex;
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-
-  /*
-   * Replace native chrome with the shared field styling and chevron.
-   */
-  .value select {
-    flex: 1 1 auto;
-    min-width: 0;
-    appearance: none;
-    padding-inline-end: calc(var(--jolly-space-1, 4px) * 2 + 12px);
-    cursor: pointer;
-  }
-
-  /* Native dropdown rows need an opaque themed plane, especially in dark mode. */
-  .value option {
-    background: var(--jolly-surface-raised, Canvas);
-    color: var(--jolly-text, CanvasText);
-  }
-
-  /*
-   * Hide Firefox's inner focus ring without hiding the selected value.
-   */
-  .value select:-moz-focusring {
-    color: transparent;
-    text-shadow: 0 0 0 currentColor;
-  }
-
-  .value .chevron {
-    position: absolute;
-    top: 50%;
-    right: var(--jolly-space-1, 4px);
-    width: 10px;
-    height: 10px;
-    color: var(--jolly-text-muted);
-    transform: translateY(-50%) rotate(90deg);
-    pointer-events: none;
-  }
-
-  :host([disabled]) .value select {
-    cursor: default;
-  }
+export const selectStyles = css `
+  .value .select-wrap {
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  /*
+   * Replace native chrome with the shared field styling and chevron.
+   */
+  .value select {
+    flex: 1 1 auto;
+    min-width: 0;
+    appearance: none;
+    padding-inline-end: calc(var(--jolly-space-1, 4px) * 2 + 12px);
+    cursor: pointer;
+  }
+
+  /* Native dropdown rows need an opaque themed plane, especially in dark mode. */
+  .value option {
+    background: var(--jolly-surface-raised, Canvas);
+    color: var(--jolly-text, CanvasText);
+  }
+
+  /*
+   * Hide Firefox's inner focus ring without hiding the selected value.
+   */
+  .value select:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 currentColor;
+  }
+
+  .value .chevron {
+    position: absolute;
+    top: 50%;
+    right: var(--jolly-space-1, 4px);
+    width: 10px;
+    height: 10px;
+    color: var(--jolly-text-muted);
+    transform: translateY(-50%) rotate(90deg);
+    pointer-events: none;
+  }
+
+  :host([disabled]) .value select {
+    cursor: default;
+  }
 `;
 //# sourceMappingURL=Select.styles.js.map

package/dist/controls/Separator.js

@@ -27,19 +27,19 @@ let Separator = class Separator extends LitElement {
     }
     render() {
         if (this.label === "") {
-            return html `
-        <div class="unlabelled" role="separator">
-          <span class="rule" aria-hidden="true"></span>
-        </div>
+            return html `
+        <div class="unlabelled" role="separator">
+          <span class="rule" aria-hidden="true"></span>
+        </div>
       `;
         }
-        return html `
-      <div class="labelled" role="separator" aria-label=${this.label}>
-        <span class="rule" aria-hidden="true"></span>
-        <span class="caption">${this.label}</span>
-        <span class="rule" aria-hidden="true"></span>
-      </div>
-      ${nothing}
+        return html `
+      <div class="labelled" role="separator" aria-label=${this.label}>
+        <span class="rule" aria-hidden="true"></span>
+        <span class="caption">${this.label}</span>
+        <span class="rule" aria-hidden="true"></span>
+      </div>
+      ${nothing}
     `;
     }
 };