@jolly-pixel/ui 1.0.1 → 2.0.0

package/dist/controls/Control.styles.js

@@ -2,107 +2,107 @@
 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;
-    }
-  }
+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/Controls.js

@@ -33,19 +33,19 @@ let Controls = class Controls extends LitElement {
     render() {
         const maximum = Math.max(1, Math.floor(this.maxEntriesPerRow));
         const headingId = "heading";
-        return html `
+        return html `
       ${this.heading === ""
             ? nothing
-            : html `<h2 class="heading" id=${headingId}>${this.heading}</h2>`}
-      <div
-        class="entries"
-        role="list"
-        aria-label=${this.heading === "" ? "Controls" : nothing}
-        aria-labelledby=${this.heading === "" ? nothing : headingId}
-        style=${`--jolly-controls-max-entries-per-row:${maximum}`}
-      >
-        <slot></slot>
-      </div>
+            : html `<h2 class="heading" id=${headingId}>${this.heading}</h2>`}
+      <div
+        class="entries"
+        role="list"
+        aria-label=${this.heading === "" ? "Controls" : nothing}
+        aria-labelledby=${this.heading === "" ? nothing : headingId}
+        style=${`--jolly-controls-max-entries-per-row:${maximum}`}
+      >
+        <slot></slot>
+      </div>
     `;
     }
 };

package/dist/controls/Controls.styles.js

@@ -1,102 +1,102 @@
 // Import Third-party Dependencies
 import { css } from "lit";
-export const controlsStyles = css `
-  :host {
-    --jolly-controls-inset: calc(var(--jolly-row-height) / 2);
-    --jolly-controls-entry-min-width: 10rem;
-
-    position: absolute;
-    z-index: 1;
-    display: block;
-    box-sizing: border-box;
-    max-inline-size: calc(100% - (var(--jolly-controls-inset) * 2));
-    padding: var(--jolly-controls-inset);
-    color: var(--jolly-text);
-    font-family: var(--jolly-font-family);
-    font-size: var(--jolly-font-size);
-    line-height: 1.35;
-    background: color-mix(in oklab, var(--jolly-surface-raised) 72%, transparent);
-    border-radius: 4px;
-    box-shadow: var(--jolly-shadow-overlay);
-    backdrop-filter: blur(12px);
-  }
-
-  :host([position="top-left"]) {
-    inset: var(--jolly-controls-inset) auto auto var(--jolly-controls-inset);
-  }
-
-  :host([position="top-middle"]) {
-    inset: var(--jolly-controls-inset) auto auto 50%;
-    transform: translateX(-50%);
-  }
-
-  :host([position="top-right"]) {
-    inset: var(--jolly-controls-inset) var(--jolly-controls-inset) auto auto;
-  }
-
-  :host([position="middle-left"]) {
-    inset: 50% auto auto var(--jolly-controls-inset);
-    transform: translateY(-50%);
-  }
-
-  :host([position="middle"]) {
-    inset: 50% auto auto 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  :host([position="middle-right"]) {
-    inset: 50% var(--jolly-controls-inset) auto auto;
-    transform: translateY(-50%);
-  }
-
-  :host([position="bottom-left"]) {
-    inset: auto auto var(--jolly-controls-inset) var(--jolly-controls-inset);
-  }
-
-  :host([position="bottom-middle"]) {
-    inset: auto auto var(--jolly-controls-inset) 50%;
-    transform: translateX(-50%);
-  }
-
-  :host([position="bottom-right"]) {
-    inset: auto var(--jolly-controls-inset) var(--jolly-controls-inset) auto;
-  }
-
-  .heading {
-    margin: 0 0 calc(var(--jolly-controls-inset) / 2);
-    color: var(--jolly-text-muted);
-    font-size: inherit;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-  }
-
-  .entries {
-    display: grid;
-    grid-template-columns: repeat(
-      var(--jolly-controls-max-entries-per-row),
-      minmax(var(--jolly-controls-entry-min-width), 1fr)
-    );
-    gap: calc(var(--jolly-controls-inset) / 2);
-  }
-
-  @media (max-width: 32rem) {
-    .entries {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-
-  @media (max-width: 20rem) {
-    .entries {
-      grid-template-columns: minmax(0, 1fr);
-    }
-  }
-
-  @media (forced-colors: active) {
-    :host {
-      background: Canvas;
-      box-shadow: none;
-    }
-  }
+export const controlsStyles = css `
+  :host {
+    --jolly-controls-inset: calc(var(--jolly-row-height) / 2);
+    --jolly-controls-entry-min-width: 10rem;
+
+    position: absolute;
+    z-index: 1;
+    display: block;
+    box-sizing: border-box;
+    max-inline-size: calc(100% - (var(--jolly-controls-inset) * 2));
+    padding: var(--jolly-controls-inset);
+    color: var(--jolly-text);
+    font-family: var(--jolly-font-family);
+    font-size: var(--jolly-font-size);
+    line-height: 1.35;
+    background: color-mix(in oklab, var(--jolly-surface-raised) 72%, transparent);
+    border-radius: 4px;
+    box-shadow: var(--jolly-shadow-overlay);
+    backdrop-filter: blur(12px);
+  }
+
+  :host([position="top-left"]) {
+    inset: var(--jolly-controls-inset) auto auto var(--jolly-controls-inset);
+  }
+
+  :host([position="top-middle"]) {
+    inset: var(--jolly-controls-inset) auto auto 50%;
+    transform: translateX(-50%);
+  }
+
+  :host([position="top-right"]) {
+    inset: var(--jolly-controls-inset) var(--jolly-controls-inset) auto auto;
+  }
+
+  :host([position="middle-left"]) {
+    inset: 50% auto auto var(--jolly-controls-inset);
+    transform: translateY(-50%);
+  }
+
+  :host([position="middle"]) {
+    inset: 50% auto auto 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  :host([position="middle-right"]) {
+    inset: 50% var(--jolly-controls-inset) auto auto;
+    transform: translateY(-50%);
+  }
+
+  :host([position="bottom-left"]) {
+    inset: auto auto var(--jolly-controls-inset) var(--jolly-controls-inset);
+  }
+
+  :host([position="bottom-middle"]) {
+    inset: auto auto var(--jolly-controls-inset) 50%;
+    transform: translateX(-50%);
+  }
+
+  :host([position="bottom-right"]) {
+    inset: auto var(--jolly-controls-inset) var(--jolly-controls-inset) auto;
+  }
+
+  .heading {
+    margin: 0 0 calc(var(--jolly-controls-inset) / 2);
+    color: var(--jolly-text-muted);
+    font-size: inherit;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  .entries {
+    display: grid;
+    grid-template-columns: repeat(
+      var(--jolly-controls-max-entries-per-row),
+      minmax(var(--jolly-controls-entry-min-width), 1fr)
+    );
+    gap: calc(var(--jolly-controls-inset) / 2);
+  }
+
+  @media (max-width: 32rem) {
+    .entries {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 20rem) {
+    .entries {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      background: Canvas;
+      box-shadow: none;
+    }
+  }
 `;
 //# sourceMappingURL=Controls.styles.js.map

package/dist/controls/Flags.js

@@ -35,27 +35,27 @@ let Flags = class Flags extends JollyField {
     }
     renderValue() {
         const mask = this.concreteValue;
-        return html `
-      <div class="flags" role="group" aria-label=${this.label}>
-        ${this.options.map((option) => this.#renderFlag(option, mask))}
-      </div>
+        return html `
+      <div class="flags" role="group" aria-label=${this.label}>
+        ${this.options.map((option) => this.#renderFlag(option, mask))}
+      </div>
     `;
     }
     #renderFlag(option, mask) {
-        return html `
-      <label class="flag">
-        <input
-          type="checkbox"
-          .checked=${mask === undefined ? false : hasFlag(mask, option.value)}
-          .indeterminate=${mask === undefined}
-          ?disabled=${this.disabled || option.disabled === true}
-          aria-readonly=${this.readonlyAria}
-          aria-disabled=${this.lockedAria}
-          aria-description=${this.lockDescription}
-          @click=${(event) => this.#onToggle(option, event)}
-        >
-        <span>${option.label}</span>
-      </label>
+        return html `
+      <label class="flag">
+        <input
+          type="checkbox"
+          .checked=${mask === undefined ? false : hasFlag(mask, option.value)}
+          .indeterminate=${mask === undefined}
+          ?disabled=${this.disabled || option.disabled === true}
+          aria-readonly=${this.readonlyAria}
+          aria-disabled=${this.lockedAria}
+          aria-description=${this.lockDescription}
+          @click=${(event) => this.#onToggle(option, event)}
+        >
+        <span>${option.label}</span>
+      </label>
     `;
     }
     #onToggle(option, event) {

package/dist/controls/Flags.styles.js

@@ -2,64 +2,64 @@
 import { css } from "lit";
 // Import Internal Dependencies
 import { fillTransition } from "../theme/styles/mixins.js";
-export const flagsStyles = css `
-  .flags {
-    display: flex;
-    flex-wrap: wrap;
-    flex: 1 1 auto;
-    gap: var(--jolly-space-1, 4px);
-    min-width: 0;
-    padding: 2px 0;
-  }
-
-  /*
-   * Each flag is its own filled pill, which gives the checkbox inside it
-   * somewhere to show hover and focus.
-   */
-  .flag {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    height: var(--jolly-control-height, 20px);
-    padding-inline: var(--jolly-space-1, 4px);
-    border-radius: var(--jolly-radius-sm, 2px);
-    background: var(--jolly-control-bg);
-    cursor: pointer;
-    user-select: none;
-    ${fillTransition}
-  }
-
-  .flag:hover {
-    background: var(--jolly-control-bg-hover);
-  }
-
-  .flag:has(input:focus-visible) {
-    background: var(--jolly-control-bg-focus);
-  }
-
-  :host([invalid]) .flag {
-    background: var(--jolly-invalid-bg);
-  }
-
-  :host([readonly]) .flag {
-    background: var(--jolly-control-bg-muted);
-  }
-
-  .value input[type="checkbox"] {
-    flex: 0 0 auto;
-    width: 13px;
-    height: 13px;
-    margin: 0;
-    accent-color: var(--jolly-field-active-color);
-    cursor: inherit;
-  }
-
-  .value input[type="checkbox"]:focus-visible {
-    outline: none;
-  }
-
-  :host([disabled]) .flag {
-    cursor: default;
-  }
+export const flagsStyles = css `
+  .flags {
+    display: flex;
+    flex-wrap: wrap;
+    flex: 1 1 auto;
+    gap: var(--jolly-space-1, 4px);
+    min-width: 0;
+    padding: 2px 0;
+  }
+
+  /*
+   * Each flag is its own filled pill, which gives the checkbox inside it
+   * somewhere to show hover and focus.
+   */
+  .flag {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    height: var(--jolly-control-height, 20px);
+    padding-inline: var(--jolly-space-1, 4px);
+    border-radius: var(--jolly-radius-sm, 2px);
+    background: var(--jolly-control-bg);
+    cursor: pointer;
+    user-select: none;
+    ${fillTransition}
+  }
+
+  .flag:hover {
+    background: var(--jolly-control-bg-hover);
+  }
+
+  .flag:has(input:focus-visible) {
+    background: var(--jolly-control-bg-focus);
+  }
+
+  :host([invalid]) .flag {
+    background: var(--jolly-invalid-bg);
+  }
+
+  :host([readonly]) .flag {
+    background: var(--jolly-control-bg-muted);
+  }
+
+  .value input[type="checkbox"] {
+    flex: 0 0 auto;
+    width: 13px;
+    height: 13px;
+    margin: 0;
+    accent-color: var(--jolly-field-active-color);
+    cursor: inherit;
+  }
+
+  .value input[type="checkbox"]:focus-visible {
+    outline: none;
+  }
+
+  :host([disabled]) .flag {
+    cursor: default;
+  }
 `;
 //# sourceMappingURL=Flags.styles.js.map

package/dist/controls/Number.js

@@ -62,27 +62,27 @@ let NumberField = class NumberField extends JollyField {
         return this.editable && !this.mixed;
     }
     renderValue() {
-        return html `
-      <div class="wrap">
-        <span class="scrub-handle" aria-hidden="true"></span>
-        <input
-          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-readonly=${this.readonlyAria}
-          aria-disabled=${this.lockedAria}
-          aria-description=${this.lockDescription}
-          aria-invalid=${this.displayError === null ? nothing : "true"}
-          @input=${this.onDraftInput}
-          @focus=${this.#pointerFocus.onFocus}
-          @keydown=${this.#onKeyDown}
-          @blur=${this.#onBlur}
-        >
-      </div>
+        return html `
+      <div class="wrap">
+        <span class="scrub-handle" aria-hidden="true"></span>
+        <input
+          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-readonly=${this.readonlyAria}
+          aria-disabled=${this.lockedAria}
+          aria-description=${this.lockDescription}
+          aria-invalid=${this.displayError === null ? nothing : "true"}
+          @input=${this.onDraftInput}
+          @focus=${this.#pointerFocus.onFocus}
+          @keydown=${this.#onKeyDown}
+          @blur=${this.#onBlur}
+        >
+      </div>
     `;
     }
     get #displayed() {