@jolly-pixel/ui 1.0.1 → 2.0.0

package/dist/containers/Tabs.styles.js

@@ -2,98 +2,98 @@
 import { css } from "lit";
 // Import Internal Dependencies
 import { kFallback } from "../theme/styles/fallbacks.js";
-export const tabsStyles = css `
-  :host {
-    display: flex;
-    min-width: 0;
-    min-height: 0;
-    flex-direction: column;
-    color: var(--jolly-text, ${kFallback.text});
-    font: inherit;
-  }
-
-  :host([orientation="vertical"]) {
-    flex-direction: row;
-  }
-
-  /*
-   * Tabs sit inside a plane, so the strip paints no surface. The selected tab's
-   * accent edge is what marks the boundary the divider used to draw.
-   */
-  .list {
-    display: flex;
-    flex: 0 0 auto;
-    gap: 1px;
-  }
-
-  :host([orientation="vertical"]) .list {
-    flex-direction: column;
-  }
-
-  button {
-    position: relative;
-    min-height: var(--jolly-control-height, 20px);
-    padding: 0 var(--jolly-space-2, 8px);
-    border: 0;
-    border-bottom: 0;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    cursor: pointer;
-    transition:
-      background-color var(--jolly-duration-fast, 100ms) var(--jolly-easing, ease),
-      color var(--jolly-duration-fast, 100ms) var(--jolly-easing, ease);
-  }
-
-  button::after {
-    position: absolute;
-    right: var(--jolly-space-2, 8px);
-    bottom: 0;
-    left: var(--jolly-space-2, 8px);
-    height: 2px;
-    background: transparent;
-    content: "";
-  }
-
-  button:hover:not(:disabled) {
-    background: var(--jolly-control-bg-hover, ${kFallback.controlBg});
-  }
-
-  button[aria-selected="true"] {
-    background: var(--jolly-control-bg, ${kFallback.controlBg});
-  }
-
-  button[aria-selected="true"] {
-    color: var(--jolly-accent-text);
-  }
-
-  button[aria-selected="true"]::after {
-    background: var(--jolly-accent-fill);
-  }
-
-  :host([orientation="vertical"]) button::after {
-    top: var(--jolly-space-1, 4px);
-    right: 0;
-    bottom: var(--jolly-space-1, 4px);
-    left: auto;
-    width: 2px;
-    height: auto;
-  }
-
-  button:disabled {
-    opacity: 0.5;
-    cursor: default;
-  }
-
-  button:focus-visible {
-    background: var(--jolly-control-bg-focus, ${kFallback.controlBg});
-    outline: none;
-  }
-
-  .panels {
-    flex: 1 1 auto;
-    min-width: 0;
-    min-height: 0;
-  }
+export const tabsStyles = css `
+  :host {
+    display: flex;
+    min-width: 0;
+    min-height: 0;
+    flex-direction: column;
+    color: var(--jolly-text, ${kFallback.text});
+    font: inherit;
+  }
+
+  :host([orientation="vertical"]) {
+    flex-direction: row;
+  }
+
+  /*
+   * Tabs sit inside a plane, so the strip paints no surface. The selected tab's
+   * accent edge is what marks the boundary the divider used to draw.
+   */
+  .list {
+    display: flex;
+    flex: 0 0 auto;
+    gap: 1px;
+  }
+
+  :host([orientation="vertical"]) .list {
+    flex-direction: column;
+  }
+
+  button {
+    position: relative;
+    min-height: var(--jolly-control-height, 20px);
+    padding: 0 var(--jolly-space-2, 8px);
+    border: 0;
+    border-bottom: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    transition:
+      background-color var(--jolly-duration-fast, 100ms) var(--jolly-easing, ease),
+      color var(--jolly-duration-fast, 100ms) var(--jolly-easing, ease);
+  }
+
+  button::after {
+    position: absolute;
+    right: var(--jolly-space-2, 8px);
+    bottom: 0;
+    left: var(--jolly-space-2, 8px);
+    height: 2px;
+    background: transparent;
+    content: "";
+  }
+
+  button:hover:not(:disabled) {
+    background: var(--jolly-control-bg-hover, ${kFallback.controlBg});
+  }
+
+  button[aria-selected="true"] {
+    background: var(--jolly-control-bg, ${kFallback.controlBg});
+  }
+
+  button[aria-selected="true"] {
+    color: var(--jolly-accent-text);
+  }
+
+  button[aria-selected="true"]::after {
+    background: var(--jolly-accent-fill);
+  }
+
+  :host([orientation="vertical"]) button::after {
+    top: var(--jolly-space-1, 4px);
+    right: 0;
+    bottom: var(--jolly-space-1, 4px);
+    left: auto;
+    width: 2px;
+    height: auto;
+  }
+
+  button:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  button:focus-visible {
+    background: var(--jolly-control-bg-focus, ${kFallback.controlBg});
+    outline: none;
+  }
+
+  .panels {
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 0;
+  }
 `;
 //# sourceMappingURL=Tabs.styles.js.map

package/dist/containers/Toolbar.js

@@ -11,25 +11,25 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 let Toolbar = class Toolbar extends LitElement {
-    static styles = css `
-    :host,
-    div {
-      display: flex;
-      align-items: center;
-      gap: var(--jolly-space-1, 4px);
-    }
-
-    :host {
-      min-width: 0;
-      color: var(--jolly-text);
-      font: inherit;
-    }
-
-    :host([orientation="vertical"]),
-    :host([orientation="vertical"]) div {
-      align-items: stretch;
-      flex-direction: column;
-    }
+    static styles = css `
+    :host,
+    div {
+      display: flex;
+      align-items: center;
+      gap: var(--jolly-space-1, 4px);
+    }
+
+    :host {
+      min-width: 0;
+      color: var(--jolly-text);
+      font: inherit;
+    }
+
+    :host([orientation="vertical"]),
+    :host([orientation="vertical"]) div {
+      align-items: stretch;
+      flex-direction: column;
+    }
   `;
     constructor() {
         super();
@@ -37,12 +37,12 @@ let Toolbar = class Toolbar extends LitElement {
         this.label = "";
     }
     render() {
-        return html `
-      <div
-        role="toolbar"
-        aria-label=${this.label}
-        aria-orientation=${this.orientation}
-      ><slot></slot></div>
+        return html `
+      <div
+        role="toolbar"
+        aria-label=${this.label}
+        aria-orientation=${this.orientation}
+      ><slot></slot></div>
     `;
     }
 };

package/dist/containers/resize.js

@@ -3,11 +3,11 @@ import { emitContainerEvent } from "./events.js";
 import { ensureDocumentStyles } from "../interaction/ensureDocumentStyles.js";
 // CONSTANTS
 export function installResizeCursorStyles(document) {
-    ensureDocumentStyles("jolly-resize-cursors", `
-    html.handle-dragging.vertical * { cursor: ew-resize !important; }
-    html.handle-dragging.horizontal * { cursor: ns-resize !important; }
-    html.handle-dragging.nwse * { cursor: nwse-resize !important; }
-    html.handle-dragging.nesw * { cursor: nesw-resize !important; }
+    ensureDocumentStyles("jolly-resize-cursors", `
+    html.handle-dragging.vertical * { cursor: ew-resize !important; }
+    html.handle-dragging.horizontal * { cursor: ns-resize !important; }
+    html.handle-dragging.nwse * { cursor: nwse-resize !important; }
+    html.handle-dragging.nesw * { cursor: nesw-resize !important; }
   `, document);
 }
 export function forwardResizeEvents(owner, resizeHandle, detail, onEnd) {

package/dist/controls/Button.js

@@ -37,17 +37,17 @@ let Button = class Button extends LitElement {
         this.iconOnly = false;
     }
     render() {
-        return html `
-      <button
-        type="button"
-        ?disabled=${this.disabled}
-        aria-label=${this.label === "" ? nothing : this.label}
-      >
+        return html `
+      <button
+        type="button"
+        ?disabled=${this.disabled}
+        aria-label=${this.label === "" ? nothing : this.label}
+      >
         ${this.icon === undefined
             ? nothing
-            : html `<jolly-icon name=${this.icon}></jolly-icon>`}
-        <slot></slot>
-      </button>
+            : html `<jolly-icon name=${this.icon}></jolly-icon>`}
+        <slot></slot>
+      </button>
     `;
     }
 };

package/dist/controls/Button.styles.js

@@ -3,84 +3,84 @@ import { css } from "lit";
 // Import Internal Dependencies
 import { kFallback } from "../theme/styles/fallbacks.js";
 import { fillTransition } from "../theme/styles/mixins.js";
-export const buttonStyles = css `
-  :host {
-    display: inline-flex;
-    font-family: var(--jolly-font-family, ui-monospace, monospace);
-    font-size: var(--jolly-font-size, 11px);
-  }
-
-  button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--jolly-space-1, 4px);
-    width: 100%;
-    height: var(--jolly-control-height, 20px);
-    padding: 0 var(--jolly-space-2, 8px);
-    border: 0;
-    border-radius: var(--jolly-radius-sm, 2px);
-    background: var(--jolly-control-bg, ${kFallback.controlBg});
-    color: var(--jolly-text, ${kFallback.text});
-    font: inherit;
-    white-space: nowrap;
-    cursor: pointer;
-    ${fillTransition}
-  }
-
-  button:hover:not(:disabled) {
-    background: var(--jolly-control-bg-hover);
-  }
-
-  button:active:not(:disabled) {
-    background: var(--jolly-control-bg-active);
-  }
-
-  /* Focus is a fill step, which has to beat hover because they share a channel. */
-  button:focus-visible {
-    background: var(--jolly-control-bg-focus);
-    outline: none;
-  }
-
-  :host([variant="accent"]) button {
-    background: var(--jolly-accent-fill);
-    color: var(--jolly-text-on-fill);
-  }
-
-  :host([variant="accent"]) button:hover:not(:disabled) {
-    background: var(--jolly-accent-fill-hover);
-  }
-
-  :host([variant="accent"]) button:focus-visible,
-  :host([variant="accent"]) button:active:not(:disabled) {
-    background: var(--jolly-accent-fill-focus);
-  }
-
-  :host([variant="danger"]) button {
-    background: var(--jolly-invalid-bg);
-    color: var(--jolly-danger);
-  }
-
-  :host([variant="danger"]) button:hover:not(:disabled) {
-    background: var(--jolly-invalid-bg-hover);
-  }
-
-  :host([variant="danger"]) button:focus-visible,
-  :host([variant="danger"]) button:active:not(:disabled) {
-    background: var(--jolly-invalid-bg-focus);
-  }
-
-  :host([disabled]) button {
-    opacity: 0.5;
-    cursor: default;
-  }
-
-  /*
-   * Icon-only buttons use a square target.
-   */
-  :host([icon-only]) button {
-    width: var(--jolly-icon-button-size, 32px);
-    padding: 0;
-  }
+export const buttonStyles = css `
+  :host {
+    display: inline-flex;
+    font-family: var(--jolly-font-family, ui-monospace, monospace);
+    font-size: var(--jolly-font-size, 11px);
+  }
+
+  button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--jolly-space-1, 4px);
+    width: 100%;
+    height: var(--jolly-control-height, 20px);
+    padding: 0 var(--jolly-space-2, 8px);
+    border: 0;
+    border-radius: var(--jolly-radius-sm, 2px);
+    background: var(--jolly-control-bg, ${kFallback.controlBg});
+    color: var(--jolly-text, ${kFallback.text});
+    font: inherit;
+    white-space: nowrap;
+    cursor: pointer;
+    ${fillTransition}
+  }
+
+  button:hover:not(:disabled) {
+    background: var(--jolly-control-bg-hover);
+  }
+
+  button:active:not(:disabled) {
+    background: var(--jolly-control-bg-active);
+  }
+
+  /* Focus is a fill step, which has to beat hover because they share a channel. */
+  button:focus-visible {
+    background: var(--jolly-control-bg-focus);
+    outline: none;
+  }
+
+  :host([variant="accent"]) button {
+    background: var(--jolly-accent-fill);
+    color: var(--jolly-text-on-fill);
+  }
+
+  :host([variant="accent"]) button:hover:not(:disabled) {
+    background: var(--jolly-accent-fill-hover);
+  }
+
+  :host([variant="accent"]) button:focus-visible,
+  :host([variant="accent"]) button:active:not(:disabled) {
+    background: var(--jolly-accent-fill-focus);
+  }
+
+  :host([variant="danger"]) button {
+    background: var(--jolly-invalid-bg);
+    color: var(--jolly-danger);
+  }
+
+  :host([variant="danger"]) button:hover:not(:disabled) {
+    background: var(--jolly-invalid-bg-hover);
+  }
+
+  :host([variant="danger"]) button:focus-visible,
+  :host([variant="danger"]) button:active:not(:disabled) {
+    background: var(--jolly-invalid-bg-focus);
+  }
+
+  :host([disabled]) button {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  /*
+   * Icon-only buttons use a square target.
+   */
+  :host([icon-only]) button {
+    width: var(--jolly-icon-button-size, 32px);
+    padding: 0;
+  }
 `;
 //# sourceMappingURL=Button.styles.js.map

package/dist/controls/ButtonGroup.js

@@ -52,40 +52,40 @@ let ButtonGroup = class ButtonGroup extends JollyField {
         const columns = this.layout === "grid" && this.columns > 0
             ? `grid-template-columns: repeat(${this.columns}, 1fr)`
             : nothing;
-        return html `
-      <div
-        class="group"
-        role="radiogroup"
-        aria-label=${this.label || this.getAttribute("aria-label") || nothing}
-        aria-readonly=${this.readonlyAria}
-        aria-disabled=${this.lockedAria}
-        aria-description=${this.lockDescription}
-        style=${columns}
-        @keydown=${this.#onKeyDown}
-      >
-        ${this.options.map((option, index) => this.#renderOption(option, index))}
-      </div>
+        return html `
+      <div
+        class="group"
+        role="radiogroup"
+        aria-label=${this.label || this.getAttribute("aria-label") || nothing}
+        aria-readonly=${this.readonlyAria}
+        aria-disabled=${this.lockedAria}
+        aria-description=${this.lockDescription}
+        style=${columns}
+        @keydown=${this.#onKeyDown}
+      >
+        ${this.options.map((option, index) => this.#renderOption(option, index))}
+      </div>
     `;
     }
     #renderOption(option, index) {
         const selected = this.#selectedIndex === index;
-        return html `
-      <button
-        type="button"
-        role="radio"
-        class="segment"
-        data-index=${index}
-        aria-checked=${selected ? "true" : "false"}
-        title=${option.label}
-        tabindex=${this.#tabIndexFor(index)}
-        ?disabled=${this.disabled || option.disabled === true}
-        @click=${() => this.#select(index)}
-      >
+        return html `
+      <button
+        type="button"
+        role="radio"
+        class="segment"
+        data-index=${index}
+        aria-checked=${selected ? "true" : "false"}
+        title=${option.label}
+        tabindex=${this.#tabIndexFor(index)}
+        ?disabled=${this.disabled || option.disabled === true}
+        @click=${() => this.#select(index)}
+      >
         ${option.icon === undefined
             ? nothing
-            : html `<jolly-icon name=${option.icon}></jolly-icon>`}
-        <span class="segment-label">${option.label}</span>
-      </button>
+            : html `<jolly-icon name=${option.icon}></jolly-icon>`}
+        <span class="segment-label">${option.label}</span>
+      </button>
     `;
     }
     get #selectedIndex() {