@jolly-pixel/ui 1.0.1 → 2.0.0

package/dist/controls/Color.styles.js

@@ -2,88 +2,88 @@
 import { css } from "lit";
 // Import Internal Dependencies
 import { focusRing } from "../theme/styles/mixins.js";
-export const colorStyles = css `
-  /* Fill the control so the colour sample has no surrounding frame. */
-  .value .swatch {
-    position: relative;
-    flex: 0 0 auto;
-    width: var(--jolly-control-height, 20px);
-    height: var(--jolly-control-height, 20px);
-    padding: 0;
-    overflow: hidden;
-    border: none;
-    border-radius: var(--jolly-radius-sm, 2px);
-    background: none;
-    cursor: pointer;
-    transition: filter var(--jolly-duration-fast, 100ms) var(--jolly-easing, ease);
-  }
-
-  /* Avoid changing the sample fill for hover and focus states. */
-  .value .swatch:hover:not(:disabled) {
-    filter: brightness(1.12);
-  }
-
-  .value .swatch:focus-visible {
-    ${focusRing}
-    outline-offset: 1px;
-  }
-
-  /* Layer the colour over a checkerboard to reveal transparency. */
-  .value .swatch-face {
-    display: block;
-    width: 100%;
-    height: 100%;
-    border-radius: inherit;
-    background-color: var(--jolly-surface-raised, Canvas);
-    background-image:
-      linear-gradient(
-        var(--jolly-swatch-color, transparent),
-        var(--jolly-swatch-color, transparent)
-      ),
-      conic-gradient(
-        var(--jolly-swatch-checker) 25%,
-        transparent 0 50%,
-        var(--jolly-swatch-checker) 0 75%,
-        transparent 0
-      );
-    background-size: auto, 6px 6px;
-    pointer-events: none;
-  }
-
-  .value .swatch {
-    --jolly-swatch-checker: color-mix(in oklab, var(--jolly-ink) 18%, transparent);
-  }
-
-  /* Preserve the swatch slot while hiding mixed values. */
-  :host([mixed]) .value .swatch {
-    background: var(--jolly-control-bg);
-    opacity: 0.35;
-    pointer-events: none;
-  }
-
-  .value input.hex {
-    flex: 1 1 auto;
-    min-width: 7ch;
-    font-variant-numeric: inherit;
-  }
-
-  :host([disabled]) .value .swatch {
-    cursor: default;
-  }
-
-  /* Fixed positioning overrides centered UA styles for the top-layer popup. */
-  .value .popover {
-    position: fixed;
-    inset: auto;
-    width: max-content;
-    margin: 0;
-    padding: var(--jolly-space-1, 4px);
-    overflow: visible;
-    border: none;
-    border-radius: var(--jolly-radius-md, 6px);
-    background: var(--jolly-surface-raised, Canvas);
-    box-shadow: var(--jolly-shadow-overlay);
-    color: var(--jolly-text, CanvasText);
-  }
+export const colorStyles = css `
+  /* Fill the control so the colour sample has no surrounding frame. */
+  .value .swatch {
+    position: relative;
+    flex: 0 0 auto;
+    width: var(--jolly-control-height, 20px);
+    height: var(--jolly-control-height, 20px);
+    padding: 0;
+    overflow: hidden;
+    border: none;
+    border-radius: var(--jolly-radius-sm, 2px);
+    background: none;
+    cursor: pointer;
+    transition: filter var(--jolly-duration-fast, 100ms) var(--jolly-easing, ease);
+  }
+
+  /* Avoid changing the sample fill for hover and focus states. */
+  .value .swatch:hover:not(:disabled) {
+    filter: brightness(1.12);
+  }
+
+  .value .swatch:focus-visible {
+    ${focusRing}
+    outline-offset: 1px;
+  }
+
+  /* Layer the colour over a checkerboard to reveal transparency. */
+  .value .swatch-face {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background-color: var(--jolly-surface-raised, Canvas);
+    background-image:
+      linear-gradient(
+        var(--jolly-swatch-color, transparent),
+        var(--jolly-swatch-color, transparent)
+      ),
+      conic-gradient(
+        var(--jolly-swatch-checker) 25%,
+        transparent 0 50%,
+        var(--jolly-swatch-checker) 0 75%,
+        transparent 0
+      );
+    background-size: auto, 6px 6px;
+    pointer-events: none;
+  }
+
+  .value .swatch {
+    --jolly-swatch-checker: color-mix(in oklab, var(--jolly-ink) 18%, transparent);
+  }
+
+  /* Preserve the swatch slot while hiding mixed values. */
+  :host([mixed]) .value .swatch {
+    background: var(--jolly-control-bg);
+    opacity: 0.35;
+    pointer-events: none;
+  }
+
+  .value input.hex {
+    flex: 1 1 auto;
+    min-width: 7ch;
+    font-variant-numeric: inherit;
+  }
+
+  :host([disabled]) .value .swatch {
+    cursor: default;
+  }
+
+  /* Fixed positioning overrides centered UA styles for the top-layer popup. */
+  .value .popover {
+    position: fixed;
+    inset: auto;
+    width: max-content;
+    margin: 0;
+    padding: var(--jolly-space-1, 4px);
+    overflow: visible;
+    border: none;
+    border-radius: var(--jolly-radius-md, 6px);
+    background: var(--jolly-surface-raised, Canvas);
+    box-shadow: var(--jolly-shadow-overlay);
+    color: var(--jolly-text, CanvasText);
+  }
 `;
 //# sourceMappingURL=Color.styles.js.map

package/dist/controls/ColorPicker.js

@@ -110,101 +110,101 @@ let ColorPicker = class ColorPicker extends LitElement {
             `--jolly-picker-color:${this.#hex}`,
             `--jolly-picker-opaque:${this.#opaqueHex}`
         ].join(";");
-        return html `
-      <div class="panel" style=${style}>
-        ${this.#renderArea()}
-        ${this.#renderHue()}
-        ${this.alpha ? this.#renderAlpha() : nothing}
-        ${this.hexInput ? this.#renderFooter() : nothing}
-      </div>
+        return html `
+      <div class="panel" style=${style}>
+        ${this.#renderArea()}
+        ${this.#renderHue()}
+        ${this.alpha ? this.#renderAlpha() : nothing}
+        ${this.hexInput ? this.#renderFooter() : nothing}
+      </div>
     `;
     }
     #renderArea() {
         const { s, v } = this.#hsva;
-        return html `
-      <div
-        class="area"
-        role="group"
-        aria-label="Saturation and value"
-        @pointerdown=${this.#onAreaPointerDown}
-      >
-        <span class="area-cursor"></span>
-        <input
-          class="axis axis-saturation"
-          type="range"
-          min="0"
-          max=${kAxisSteps}
-          .value=${String(Math.round(s * kAxisSteps))}
-          ?disabled=${this.disabled}
-          aria-label="Saturation"
-          aria-readonly=${this.readonly ? "true" : nothing}
-          @input=${this.#onSaturation}
-          @change=${this.#onSaturation}
-        >
-        <input
-          class="axis axis-value"
-          type="range"
-          min="0"
-          max=${kAxisSteps}
-          .value=${String(Math.round(v * kAxisSteps))}
-          ?disabled=${this.disabled}
-          aria-label="Value"
-          aria-readonly=${this.readonly ? "true" : nothing}
-          @input=${this.#onValue}
-          @change=${this.#onValue}
-        >
-      </div>
+        return html `
+      <div
+        class="area"
+        role="group"
+        aria-label="Saturation and value"
+        @pointerdown=${this.#onAreaPointerDown}
+      >
+        <span class="area-cursor"></span>
+        <input
+          class="axis axis-saturation"
+          type="range"
+          min="0"
+          max=${kAxisSteps}
+          .value=${String(Math.round(s * kAxisSteps))}
+          ?disabled=${this.disabled}
+          aria-label="Saturation"
+          aria-readonly=${this.readonly ? "true" : nothing}
+          @input=${this.#onSaturation}
+          @change=${this.#onSaturation}
+        >
+        <input
+          class="axis axis-value"
+          type="range"
+          min="0"
+          max=${kAxisSteps}
+          .value=${String(Math.round(v * kAxisSteps))}
+          ?disabled=${this.disabled}
+          aria-label="Value"
+          aria-readonly=${this.readonly ? "true" : nothing}
+          @input=${this.#onValue}
+          @change=${this.#onValue}
+        >
+      </div>
     `;
     }
     #renderHue() {
-        return html `
-      <div class="track hue">
-        <input
-          type="range"
-          min="0"
-          max=${kHueSteps}
-          step="1"
-          .value=${String(Math.round(this.#hsva.h))}
-          ?disabled=${this.disabled}
-          aria-label="Hue"
-          aria-readonly=${this.readonly ? "true" : nothing}
-          @input=${this.#onHue}
-          @change=${this.#onHue}
-        >
-      </div>
+        return html `
+      <div class="track hue">
+        <input
+          type="range"
+          min="0"
+          max=${kHueSteps}
+          step="1"
+          .value=${String(Math.round(this.#hsva.h))}
+          ?disabled=${this.disabled}
+          aria-label="Hue"
+          aria-readonly=${this.readonly ? "true" : nothing}
+          @input=${this.#onHue}
+          @change=${this.#onHue}
+        >
+      </div>
     `;
     }
     #renderAlpha() {
-        return html `
-      <div class="lane">
-        <div class="track alpha">
-          <input
-            type="range"
-            min="0"
-            max=${kAlphaSteps}
-            step="1"
-            .value=${String(Math.round(this.#hsva.a * kAlphaSteps))}
-            ?disabled=${this.disabled}
-            aria-label="Alpha"
-            aria-readonly=${this.readonly ? "true" : nothing}
-            @input=${this.#onAlpha}
-            @change=${this.#onAlpha}
-          >
-        </div>
-        <input
-          class="readout"
-          type="text"
-          inputmode="decimal"
-          spellcheck="false"
-          aria-label="Alpha value"
-          .value=${this.#alphaDraft.draft ?? formatNumber(this.#hsva.a, kAlphaStep)}
-          ?disabled=${this.disabled}
-          ?readonly=${this.readonly}
-          @input=${this.#onAlphaType}
-          @keydown=${this.#onAlphaKeyDown}
-          @blur=${this.#onAlphaBlur}
-        >
-      </div>
+        return html `
+      <div class="lane">
+        <div class="track alpha">
+          <input
+            type="range"
+            min="0"
+            max=${kAlphaSteps}
+            step="1"
+            .value=${String(Math.round(this.#hsva.a * kAlphaSteps))}
+            ?disabled=${this.disabled}
+            aria-label="Alpha"
+            aria-readonly=${this.readonly ? "true" : nothing}
+            @input=${this.#onAlpha}
+            @change=${this.#onAlpha}
+          >
+        </div>
+        <input
+          class="readout"
+          type="text"
+          inputmode="decimal"
+          spellcheck="false"
+          aria-label="Alpha value"
+          .value=${this.#alphaDraft.draft ?? formatNumber(this.#hsva.a, kAlphaStep)}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          @input=${this.#onAlphaType}
+          @keydown=${this.#onAlphaKeyDown}
+          @blur=${this.#onAlphaBlur}
+        >
+      </div>
     `;
     }
     #onAlphaType(event) {
@@ -232,25 +232,25 @@ let ColorPicker = class ColorPicker extends LitElement {
         });
     }
     #renderFooter() {
-        return html `
-      <div class="footer">
-        <span class="preview checker">
-          <span class="preview-face"></span>
-        </span>
-        <input
-          class="hex"
-          type="text"
-          spellcheck="false"
-          aria-label="Hex value"
-          aria-invalid=${this.#invalid ? "true" : nothing}
-          .value=${this.#draft ?? this.#hex}
-          ?disabled=${this.disabled}
-          ?readonly=${this.readonly}
-          @input=${this.#onHexType}
-          @keydown=${this.#onHexKeyDown}
-          @blur=${this.#onHexBlur}
-        >
-      </div>
+        return html `
+      <div class="footer">
+        <span class="preview checker">
+          <span class="preview-face"></span>
+        </span>
+        <input
+          class="hex"
+          type="text"
+          spellcheck="false"
+          aria-label="Hex value"
+          aria-invalid=${this.#invalid ? "true" : nothing}
+          .value=${this.#draft ?? this.#hex}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          @input=${this.#onHexType}
+          @keydown=${this.#onHexKeyDown}
+          @blur=${this.#onHexBlur}
+        >
+      </div>
     `;
     }
     #onAreaPointerDown(event) {