@jolly-pixel/ui 1.0.1 → 2.0.0

package/dist/controls/ButtonGroup.styles.js

@@ -2,103 +2,103 @@
 import { css } from "lit";
 // Import Internal Dependencies
 import { fillTransition, truncate, visuallyHidden } from "../theme/styles/mixins.js";
-export const buttonGroupStyles = css `
-  /*
-   * Segments used to be joined by shared borders. Without them a hairline gap
-   * does the same job: the fills read as one strip, still visibly divided.
-   */
-  .group {
-    display: flex;
-    flex: 1 1 auto;
-    gap: 1px;
-    min-width: 0;
-  }
-
-  :host([layout="grid"]) .group {
-    display: grid;
-    gap: var(--jolly-space-1, 4px);
-  }
-
-  .segment {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex: 1 1 0;
-    gap: 4px;
-    min-width: 0;
-    height: var(--jolly-control-height, 20px);
-    padding: 0 var(--jolly-space-1, 4px);
-    border: 0;
-    background: var(--jolly-control-bg);
-    color: inherit;
-    font: inherit;
-    cursor: pointer;
-    ${fillTransition}
-  }
-
-  /*
-   * Round only the outer edges of joined segments.
-   */
-  :host(:not([layout="grid"])) .segment:first-child {
-    border-radius: var(--jolly-radius-sm, 2px) 0 0 var(--jolly-radius-sm, 2px);
-  }
-
-  :host(:not([layout="grid"])) .segment:last-child {
-    border-radius: 0 var(--jolly-radius-sm, 2px) var(--jolly-radius-sm, 2px) 0;
-  }
-
-  :host(:not([layout="grid"])) .segment:only-child {
-    border-radius: var(--jolly-radius-sm, 2px);
-  }
-
-  :host([layout="grid"]) .segment {
-    border-radius: var(--jolly-radius-sm, 2px);
-  }
-
-  .segment:hover:not(:disabled) {
-    background: var(--jolly-control-bg-hover);
-  }
-
-  .segment:active:not(:disabled) {
-    background: var(--jolly-control-bg-active);
-  }
-
-  .segment:focus-visible {
-    background: var(--jolly-control-bg-focus);
-    outline: none;
-  }
-
-  .segment[aria-checked="true"] {
-    background: var(--jolly-accent-fill);
-    color: var(--jolly-text-on-fill);
-  }
-
-  .segment[aria-checked="true"]:hover:not(:disabled) {
-    background: var(--jolly-accent-fill-hover);
-  }
-
-  /*
-   * A checked segment is already filled, so its focus step lightens the accent
-   * rather than tinting over it.
-   */
-  .segment[aria-checked="true"]:focus-visible {
-    background: var(--jolly-accent-fill-focus);
-  }
-
-  .segment:disabled {
-    cursor: default;
-    opacity: 0.5;
-  }
-
-  .segment-label {
-    ${truncate}
-  }
-
-  /*
-   * Hide visible labels while keeping their accessible names.
-   */
-  :host([icons-only]) .segment-label {
-    ${visuallyHidden}
-  }
+export const buttonGroupStyles = css `
+  /*
+   * Segments used to be joined by shared borders. Without them a hairline gap
+   * does the same job: the fills read as one strip, still visibly divided.
+   */
+  .group {
+    display: flex;
+    flex: 1 1 auto;
+    gap: 1px;
+    min-width: 0;
+  }
+
+  :host([layout="grid"]) .group {
+    display: grid;
+    gap: var(--jolly-space-1, 4px);
+  }
+
+  .segment {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1 1 0;
+    gap: 4px;
+    min-width: 0;
+    height: var(--jolly-control-height, 20px);
+    padding: 0 var(--jolly-space-1, 4px);
+    border: 0;
+    background: var(--jolly-control-bg);
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    ${fillTransition}
+  }
+
+  /*
+   * Round only the outer edges of joined segments.
+   */
+  :host(:not([layout="grid"])) .segment:first-child {
+    border-radius: var(--jolly-radius-sm, 2px) 0 0 var(--jolly-radius-sm, 2px);
+  }
+
+  :host(:not([layout="grid"])) .segment:last-child {
+    border-radius: 0 var(--jolly-radius-sm, 2px) var(--jolly-radius-sm, 2px) 0;
+  }
+
+  :host(:not([layout="grid"])) .segment:only-child {
+    border-radius: var(--jolly-radius-sm, 2px);
+  }
+
+  :host([layout="grid"]) .segment {
+    border-radius: var(--jolly-radius-sm, 2px);
+  }
+
+  .segment:hover:not(:disabled) {
+    background: var(--jolly-control-bg-hover);
+  }
+
+  .segment:active:not(:disabled) {
+    background: var(--jolly-control-bg-active);
+  }
+
+  .segment:focus-visible {
+    background: var(--jolly-control-bg-focus);
+    outline: none;
+  }
+
+  .segment[aria-checked="true"] {
+    background: var(--jolly-accent-fill);
+    color: var(--jolly-text-on-fill);
+  }
+
+  .segment[aria-checked="true"]:hover:not(:disabled) {
+    background: var(--jolly-accent-fill-hover);
+  }
+
+  /*
+   * A checked segment is already filled, so its focus step lightens the accent
+   * rather than tinting over it.
+   */
+  .segment[aria-checked="true"]:focus-visible {
+    background: var(--jolly-accent-fill-focus);
+  }
+
+  .segment:disabled {
+    cursor: default;
+    opacity: 0.5;
+  }
+
+  .segment-label {
+    ${truncate}
+  }
+
+  /*
+   * Hide visible labels while keeping their accessible names.
+   */
+  :host([icons-only]) .segment-label {
+    ${visuallyHidden}
+  }
 `;
 //# sourceMappingURL=ButtonGroup.styles.js.map

package/dist/controls/Checkbox.js

@@ -29,20 +29,20 @@ let Checkbox = class Checkbox extends JollyField {
     }
     /** Keeps the native checkbox on the standard control-sized hit target. */
     renderValue() {
-        return html `
-      <label class="checkbox">
-        <input
-          type="checkbox"
-          .checked=${this.concreteValue ?? false}
-          .indeterminate=${this.mixed}
-          ?disabled=${this.disabled}
-          aria-readonly=${this.readonlyAria}
-          aria-disabled=${this.lockedAria}
-          aria-description=${this.lockDescription}
-          aria-invalid=${this.displayError === null ? nothing : "true"}
-          @click=${this.#onClick}
-        >
-      </label>
+        return html `
+      <label class="checkbox">
+        <input
+          type="checkbox"
+          .checked=${this.concreteValue ?? false}
+          .indeterminate=${this.mixed}
+          ?disabled=${this.disabled}
+          aria-readonly=${this.readonlyAria}
+          aria-disabled=${this.lockedAria}
+          aria-description=${this.lockDescription}
+          aria-invalid=${this.displayError === null ? nothing : "true"}
+          @click=${this.#onClick}
+        >
+      </label>
     `;
     }
     /**

package/dist/controls/Checkbox.styles.js

@@ -1,116 +1,116 @@
 // Import Third-party Dependencies
 import { css } from "lit";
 /** Keeps checkboxes fixed-size and aligned to the requested logical edge. */
-export const checkboxStyles = css `
-  .value {
-    justify-content: flex-start;
-  }
-
-  :host([align="end"]) .value,
-  :host([align="end"]) .checkbox {
-    justify-content: flex-end;
-  }
-
-  /* Keep the native control on the same hit target as the other fields. */
-  .checkbox {
-    display: inline-flex;
-    align-items: center;
-    justify-content: flex-start;
-    flex: 0 0 auto;
-    width: var(--jolly-control-height, 20px);
-    height: var(--jolly-control-height, 20px);
-  }
-
-  :host([clickable-background]) .checkbox {
-    position: relative;
-    isolation: isolate;
-    flex: 1 1 auto;
-    width: auto;
-    cursor: pointer;
-  }
-
-  :host([clickable-background]) .checkbox::before {
-    --jolly-checkbox-gradient-direction: to right;
-
-    content: "";
-    position: absolute;
-    inset-block: calc(var(--jolly-space-1, 4px) / 2);
-    inset-inline: 0;
-    z-index: -1;
-    border-start-start-radius: var(--jolly-radius-sm, 2px);
-    border-end-start-radius: var(--jolly-radius-sm, 2px);
-    background-image: linear-gradient(
-      var(--jolly-checkbox-gradient-direction),
-      var(--jolly-control-bg),
-      transparent 72%
-    );
-  }
-
-  :host([clickable-background][align="end"]) .checkbox::before,
-  :host([clickable-background]:dir(rtl)) .checkbox::before {
-    --jolly-checkbox-gradient-direction: to left;
-  }
-
-  :host([clickable-background][align="end"]:dir(rtl)) .checkbox::before {
-    --jolly-checkbox-gradient-direction: to right;
-  }
-
-  :host([clickable-background][align="end"]) .checkbox::before {
-    border-start-start-radius: 0;
-    border-start-end-radius: var(--jolly-radius-sm, 2px);
-    border-end-start-radius: 0;
-    border-end-end-radius: var(--jolly-radius-sm, 2px);
-  }
-
-  :host(
-    [clickable-background]:not([disabled]):not([readonly]):not([locked])
-  ) .checkbox:hover::before {
-    background-image: linear-gradient(
-      var(--jolly-checkbox-gradient-direction),
-      var(--jolly-control-bg-hover),
-      transparent 72%
-    );
-  }
-
-  :host(
-    [clickable-background]:not([disabled]):not([readonly]):not([locked])
-  ) .checkbox:has(input:focus-visible)::before {
-    background-image: linear-gradient(
-      var(--jolly-checkbox-gradient-direction),
-      var(--jolly-control-bg-focus),
-      transparent 72%
-    );
-  }
-
-  .value input[type="checkbox"] {
-    flex: 0 0 auto;
-    width: 14px;
-    height: 14px;
-    margin: 0;
-    accent-color: var(--jolly-field-active-color);
-    cursor: pointer;
-  }
-
-  :host([clickable-background]) .value input[type="checkbox"] {
-    margin-inline: var(--jolly-space-1, 4px) 0;
-  }
-
-  :host([clickable-background][align="end"]) .value input[type="checkbox"] {
-    margin-inline: 0 var(--jolly-space-1, 4px);
-  }
-
-  .value input[type="checkbox"]:focus-visible {
-    outline: none;
-  }
-
-  :host([disabled]) .value input[type="checkbox"] {
-    cursor: default;
-  }
-
-  :host([clickable-background][disabled]) .checkbox,
-  :host([clickable-background][readonly]) .checkbox,
-  :host([clickable-background][locked]) .checkbox {
-    cursor: default;
-  }
+export const checkboxStyles = css `
+  .value {
+    justify-content: flex-start;
+  }
+
+  :host([align="end"]) .value,
+  :host([align="end"]) .checkbox {
+    justify-content: flex-end;
+  }
+
+  /* Keep the native control on the same hit target as the other fields. */
+  .checkbox {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex: 0 0 auto;
+    width: var(--jolly-control-height, 20px);
+    height: var(--jolly-control-height, 20px);
+  }
+
+  :host([clickable-background]) .checkbox {
+    position: relative;
+    isolation: isolate;
+    flex: 1 1 auto;
+    width: auto;
+    cursor: pointer;
+  }
+
+  :host([clickable-background]) .checkbox::before {
+    --jolly-checkbox-gradient-direction: to right;
+
+    content: "";
+    position: absolute;
+    inset-block: calc(var(--jolly-space-1, 4px) / 2);
+    inset-inline: 0;
+    z-index: -1;
+    border-start-start-radius: var(--jolly-radius-sm, 2px);
+    border-end-start-radius: var(--jolly-radius-sm, 2px);
+    background-image: linear-gradient(
+      var(--jolly-checkbox-gradient-direction),
+      var(--jolly-control-bg),
+      transparent 72%
+    );
+  }
+
+  :host([clickable-background][align="end"]) .checkbox::before,
+  :host([clickable-background]:dir(rtl)) .checkbox::before {
+    --jolly-checkbox-gradient-direction: to left;
+  }
+
+  :host([clickable-background][align="end"]:dir(rtl)) .checkbox::before {
+    --jolly-checkbox-gradient-direction: to right;
+  }
+
+  :host([clickable-background][align="end"]) .checkbox::before {
+    border-start-start-radius: 0;
+    border-start-end-radius: var(--jolly-radius-sm, 2px);
+    border-end-start-radius: 0;
+    border-end-end-radius: var(--jolly-radius-sm, 2px);
+  }
+
+  :host(
+    [clickable-background]:not([disabled]):not([readonly]):not([locked])
+  ) .checkbox:hover::before {
+    background-image: linear-gradient(
+      var(--jolly-checkbox-gradient-direction),
+      var(--jolly-control-bg-hover),
+      transparent 72%
+    );
+  }
+
+  :host(
+    [clickable-background]:not([disabled]):not([readonly]):not([locked])
+  ) .checkbox:has(input:focus-visible)::before {
+    background-image: linear-gradient(
+      var(--jolly-checkbox-gradient-direction),
+      var(--jolly-control-bg-focus),
+      transparent 72%
+    );
+  }
+
+  .value input[type="checkbox"] {
+    flex: 0 0 auto;
+    width: 14px;
+    height: 14px;
+    margin: 0;
+    accent-color: var(--jolly-field-active-color);
+    cursor: pointer;
+  }
+
+  :host([clickable-background]) .value input[type="checkbox"] {
+    margin-inline: var(--jolly-space-1, 4px) 0;
+  }
+
+  :host([clickable-background][align="end"]) .value input[type="checkbox"] {
+    margin-inline: 0 var(--jolly-space-1, 4px);
+  }
+
+  .value input[type="checkbox"]:focus-visible {
+    outline: none;
+  }
+
+  :host([disabled]) .value input[type="checkbox"] {
+    cursor: default;
+  }
+
+  :host([clickable-background][disabled]) .checkbox,
+  :host([clickable-background][readonly]) .checkbox,
+  :host([clickable-background][locked]) .checkbox {
+    cursor: default;
+  }
 `;
 //# sourceMappingURL=Checkbox.styles.js.map

package/dist/controls/Color.js

@@ -73,41 +73,41 @@ let Color = class Color extends JollyField {
     }
     renderValue() {
         const swatch = this.concreteValue;
-        return html `
-      <button
-        class="swatch"
-        type="button"
-        popovertarget="picker"
-        title="Pick a colour"
-        aria-label="Pick a colour"
-        aria-haspopup="dialog"
-        aria-expanded=${this.#popup.open}
-        ?disabled=${this.disabled}
-      >
+        return html `
+      <button
+        class="swatch"
+        type="button"
+        popovertarget="picker"
+        title="Pick a colour"
+        aria-label="Pick a colour"
+        aria-haspopup="dialog"
+        aria-expanded=${this.#popup.open}
+        ?disabled=${this.disabled}
+      >
         ${swatch === undefined
             ? nothing
-            : html `<span class="swatch-face" style="--jolly-swatch-color:${swatch}"></span>`}
-      </button>
-      <input
-        type="text"
-        class="hex"
-        spellcheck="false"
-        aria-label="Hex value"
-        .value=${this.draft ?? swatch ?? ""}
-        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.onDraftInput}
-        @focus=${this.#pointerFocus.onFocus}
-        @keydown=${this.#onKeyDown}
-        @blur=${this.#onBlur}
-      >
-      ${this.#renderPopover()}
+            : html `<span class="swatch-face" style="--jolly-swatch-color:${swatch}"></span>`}
+      </button>
+      <input
+        type="text"
+        class="hex"
+        spellcheck="false"
+        aria-label="Hex value"
+        .value=${this.draft ?? swatch ?? ""}
+        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.onDraftInput}
+        @focus=${this.#pointerFocus.onFocus}
+        @keydown=${this.#onKeyDown}
+        @blur=${this.#onBlur}
+      >
+      ${this.#renderPopover()}
     `;
     }
     get #placeholder() {
@@ -116,24 +116,24 @@ let Color = class Color extends JollyField {
             : Color_1.Defaults.value;
     }
     #renderPopover() {
-        return html `
-      <div
-        class="popover"
-        id="picker"
-        popover
-        @beforetoggle=${this.#popup.onBeforeToggle}
-        @toggle=${this.#popup.onToggle}
-      >
-        <jolly-color-picker
-          class="picker"
-          .value=${this.concreteValue ?? Color_1.Defaults.value}
-          ?alpha=${this.alpha}
-          .hexInput=${false}
-          ?readonly=${!this.editable}
-          @jolly-input=${this.#onPickerInput}
-          @jolly-change=${this.#onPickerChange}
-        ></jolly-color-picker>
-      </div>
+        return html `
+      <div
+        class="popover"
+        id="picker"
+        popover
+        @beforetoggle=${this.#popup.onBeforeToggle}
+        @toggle=${this.#popup.onToggle}
+      >
+        <jolly-color-picker
+          class="picker"
+          .value=${this.concreteValue ?? Color_1.Defaults.value}
+          ?alpha=${this.alpha}
+          .hexInput=${false}
+          ?readonly=${!this.editable}
+          @jolly-input=${this.#onPickerInput}
+          @jolly-change=${this.#onPickerChange}
+        ></jolly-color-picker>
+      </div>
     `;
     }
     /**