@jolly-pixel/ui 1.0.1 → 2.0.0

package/dist/peer/Presence.styles.js

@@ -1,86 +1,86 @@
 // Import Third-party Dependencies
 import { css } from "lit";
-export const presenceStyles = css `
-  :host {
-    display: block;
-    color: var(--jolly-text);
-    font-family: var(--jolly-font-family, ui-monospace, monospace);
-    font-size: var(--jolly-font-size, 11px);
-  }
-
-  .summary {
-    min-height: var(--jolly-row-height, 20px);
-    color: var(--jolly-text-muted);
-    line-height: var(--jolly-row-height, 20px);
-  }
-
-  .list {
-    display: grid;
-    gap: var(--jolly-space-1, 4px);
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  .peer,
-  .overflow {
-    display: flex;
-    align-items: center;
-    min-height: var(--jolly-row-height, 20px);
-  }
-
-  .peer {
-    padding-inline: var(--jolly-space-1, 4px);
-  }
-
-  .peer:nth-child(even) {
-    border-radius: 2px;
-    background: linear-gradient(
-      to right,
-      color-mix(
-        in srgb,
-        var(--jolly-surface) 96%,
-        var(--jolly-text) 4%
-      ),
-      transparent 72%
-    );
-  }
-
-  .swatch {
-    flex: none;
-    width: 0.75em;
-    height: 0.75em;
-    margin-inline-end: var(--jolly-space-2, 8px);
-    border-radius: 50%;
-  }
-
-  .select {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    min-height: var(--jolly-row-height, 20px);
-    margin: 0;
-    padding: 0;
-    border: none;
-    border-radius: 2px;
-    background: none;
-    color: inherit;
-    font: inherit;
-    text-align: start;
-    cursor: pointer;
-  }
-
-  .select:hover {
-    background: var(--jolly-control-bg-hover);
-  }
-
-  .select:focus-visible {
-    outline: none;
-    background: var(--jolly-control-bg-focus);
-  }
-
-  .overflow {
-    color: var(--jolly-text-muted);
-  }
+export const presenceStyles = css `
+  :host {
+    display: block;
+    color: var(--jolly-text);
+    font-family: var(--jolly-font-family, ui-monospace, monospace);
+    font-size: var(--jolly-font-size, 11px);
+  }
+
+  .summary {
+    min-height: var(--jolly-row-height, 20px);
+    color: var(--jolly-text-muted);
+    line-height: var(--jolly-row-height, 20px);
+  }
+
+  .list {
+    display: grid;
+    gap: var(--jolly-space-1, 4px);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .peer,
+  .overflow {
+    display: flex;
+    align-items: center;
+    min-height: var(--jolly-row-height, 20px);
+  }
+
+  .peer {
+    padding-inline: var(--jolly-space-1, 4px);
+  }
+
+  .peer:nth-child(even) {
+    border-radius: 2px;
+    background: linear-gradient(
+      to right,
+      color-mix(
+        in srgb,
+        var(--jolly-surface) 96%,
+        var(--jolly-text) 4%
+      ),
+      transparent 72%
+    );
+  }
+
+  .swatch {
+    flex: none;
+    width: 0.75em;
+    height: 0.75em;
+    margin-inline-end: var(--jolly-space-2, 8px);
+    border-radius: 50%;
+  }
+
+  .select {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    min-height: var(--jolly-row-height, 20px);
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: 2px;
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .select:hover {
+    background: var(--jolly-control-bg-hover);
+  }
+
+  .select:focus-visible {
+    outline: none;
+    background: var(--jolly-control-bg-focus);
+  }
+
+  .overflow {
+    color: var(--jolly-text-muted);
+  }
 `;
 //# sourceMappingURL=Presence.styles.js.map

package/dist/stats/Stats.js

@@ -90,12 +90,12 @@ let StatsElement = class StatsElement extends LitElement {
         this.#draw();
     }
     render() {
-        return html `
-      <canvas
-        aria-hidden="true"
-        @click=${this.#next}
-        @contextmenu=${this.#onContextMenu}
-      ></canvas>
+        return html `
+      <canvas
+        aria-hidden="true"
+        @click=${this.#next}
+        @contextmenu=${this.#onContextMenu}
+      ></canvas>
     `;
     }
     #connectRecorder() {

package/dist/stats/Stats.styles.js

@@ -2,59 +2,59 @@
 import { css } from "lit";
 // Import Internal Dependencies
 import { focusRing } from "../theme/styles/mixins.js";
-export const statsStyles = css `
-  :host {
-    display: block;
-    width: 112px;
-    height: 56px;
-    border-radius: var(--jolly-radius-sm, 2px);
-    cursor: pointer;
-    user-select: none;
-
-    --jolly-stats-fps: light-dark(#007c91, #00ffff);
-    --jolly-stats-fps-bed: light-dark(#d8f7fb, #001122);
-    --jolly-stats-ms: light-dark(#16733a, #00ff66);
-    --jolly-stats-ms-bed: light-dark(#def6e6, #00220d);
-    --jolly-stats-worst: light-dark(#a65300, #ff9d00);
-    --jolly-stats-worst-bed: light-dark(#fff0d6, #221100);
-    --jolly-stats-mb: light-dark(#a6005a, #ff0088);
-    --jolly-stats-mb-bed: light-dark(#ffe0ef, #220011);
-  }
-
-  :host([hidden]) {
-    display: none;
-  }
-
-  canvas {
-    display: block;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    border-radius: inherit;
-    background: transparent;
-  }
-
-  :host(:hover) {
-    filter: brightness(1.08);
-  }
-
-  :host(:focus-visible) {
-    ${focusRing}
-    outline-offset: 1px;
-  }
-
-  :host(:active) {
-    filter: brightness(0.94);
-  }
-
-  @media (forced-colors: active) {
-    canvas {
-      border: 1px solid ButtonBorder;
-    }
-
-    :host(:focus-visible) {
-      outline-color: Highlight;
-    }
-  }
+export const statsStyles = css `
+  :host {
+    display: block;
+    width: 112px;
+    height: 56px;
+    border-radius: var(--jolly-radius-sm, 2px);
+    cursor: pointer;
+    user-select: none;
+
+    --jolly-stats-fps: light-dark(#007c91, #00ffff);
+    --jolly-stats-fps-bed: light-dark(#d8f7fb, #001122);
+    --jolly-stats-ms: light-dark(#16733a, #00ff66);
+    --jolly-stats-ms-bed: light-dark(#def6e6, #00220d);
+    --jolly-stats-worst: light-dark(#a65300, #ff9d00);
+    --jolly-stats-worst-bed: light-dark(#fff0d6, #221100);
+    --jolly-stats-mb: light-dark(#a6005a, #ff0088);
+    --jolly-stats-mb-bed: light-dark(#ffe0ef, #220011);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    border-radius: inherit;
+    background: transparent;
+  }
+
+  :host(:hover) {
+    filter: brightness(1.08);
+  }
+
+  :host(:focus-visible) {
+    ${focusRing}
+    outline-offset: 1px;
+  }
+
+  :host(:active) {
+    filter: brightness(0.94);
+  }
+
+  @media (forced-colors: active) {
+    canvas {
+      border: 1px solid ButtonBorder;
+    }
+
+    :host(:focus-visible) {
+      outline-color: Highlight;
+    }
+  }
 `;
 //# sourceMappingURL=Stats.styles.js.map

package/dist/theme/components/DensityControl.js

@@ -28,15 +28,15 @@ const kOptions = [
  * host to the consumer.
  */
 let DensityControl = class DensityControl extends LitElement {
-    static styles = css `
-    :host {
-      display: contents;
-    }
-
-    jolly-select {
-      flex: 1 1 96px;
-      min-width: 96px;
-    }
+    static styles = css `
+    :host {
+      display: contents;
+    }
+
+    jolly-select {
+      flex: 1 1 96px;
+      min-width: 96px;
+    }
   `;
     constructor() {
         super();
@@ -44,13 +44,13 @@ let DensityControl = class DensityControl extends LitElement {
         this.label = "Density";
     }
     render() {
-        return html `
-      <jolly-select
-        label=${this.label}
-        .options=${kOptions}
-        .value=${this.value}
-        @jolly-change=${this.#onChange}
-      ></jolly-select>
+        return html `
+      <jolly-select
+        label=${this.label}
+        .options=${kOptions}
+        .value=${this.value}
+        @jolly-change=${this.#onChange}
+      ></jolly-select>
     `;
     }
     #onChange(event) {

package/dist/theme/components/ThemeControl.js

@@ -28,15 +28,15 @@ const kOptions = [
  * host to the consumer.
  */
 let ThemeControl = class ThemeControl extends LitElement {
-    static styles = css `
-    :host {
-      display: contents;
-    }
-
-    jolly-button-group {
-      flex: 1 1 96px;
-      min-width: 96px;
-    }
+    static styles = css `
+    :host {
+      display: contents;
+    }
+
+    jolly-button-group {
+      flex: 1 1 96px;
+      min-width: 96px;
+    }
   `;
     constructor() {
         super();
@@ -44,13 +44,13 @@ let ThemeControl = class ThemeControl extends LitElement {
         this.label = "Theme";
     }
     render() {
-        return html `
-      <jolly-button-group
-        label=${this.label}
-        .options=${kOptions}
-        .value=${this.value}
-        @jolly-change=${this.#onChange}
-      ></jolly-button-group>
+        return html `
+      <jolly-button-group
+        label=${this.label}
+        .options=${kOptions}
+        .value=${this.value}
+        @jolly-change=${this.#onChange}
+      ></jolly-button-group>
     `;
     }
     #onChange(event) {

package/dist/theme/components/ThemePreferences.js

@@ -24,15 +24,15 @@ const kDensitySuffix = ":density";
  * Persists and applies a theme and density pair to a scope host.
  */
 let ThemePreferences = class ThemePreferences extends LitElement {
-    static styles = css `
-    :host {
-      display: contents;
-    }
-
-    :host([layout="stack"]) {
-      display: grid;
-      gap: var(--jolly-row-gap, 4px);
-    }
+    static styles = css `
+    :host {
+      display: contents;
+    }
+
+    :host([layout="stack"]) {
+      display: grid;
+      gap: var(--jolly-row-gap, 4px);
+    }
   `;
     constructor() {
         super();
@@ -58,15 +58,15 @@ let ThemePreferences = class ThemePreferences extends LitElement {
         }
     }
     render() {
-        return html `
-      <jolly-theme-control
-        .value=${this.#theme()}
-        @jolly-change=${this.#onThemeChange}
-      ></jolly-theme-control>
-      <jolly-density-control
-        .value=${this.#density()}
-        @jolly-change=${this.#onDensityChange}
-      ></jolly-density-control>
+        return html `
+      <jolly-theme-control
+        .value=${this.#theme()}
+        @jolly-change=${this.#onThemeChange}
+      ></jolly-theme-control>
+      <jolly-density-control
+        .value=${this.#density()}
+        @jolly-change=${this.#onDensityChange}
+      ></jolly-density-control>
     `;
     }
     #applyPreferences() {

package/dist/theme/font.js

@@ -17,15 +17,15 @@ const kUnicodeRange = [
 /**
  * The raw face, for consumers registering it themselves.
  */
-export const fontFaceCss = `
-  @font-face {
-    font-family: "Roboto Mono";
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url(${kRobotoMonoLatin}) format("woff2");
-    unicode-range: ${kUnicodeRange};
-  }
+export const fontFaceCss = `
+  @font-face {
+    font-family: "Roboto Mono";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(${kRobotoMonoLatin}) format("woff2");
+    unicode-range: ${kUnicodeRange};
+  }
 `;
 let registered = false;
 /**

package/dist/theme/styles/hiddenStyles.js

@@ -7,9 +7,9 @@ import { css } from "lit";
  * that sets `.hidden` (the facade does, on Binding/Monitor/Button/Separator
  * and their containers) needs this to actually disappear.
  */
-export const hiddenStyles = css `
-  :host([hidden]) {
-    display: none !important;
-  }
+export const hiddenStyles = css `
+  :host([hidden]) {
+    display: none !important;
+  }
 `;
 //# sourceMappingURL=hiddenStyles.js.map

package/dist/theme/styles/mixins.js

@@ -6,36 +6,36 @@ import { kFallback } from "./fallbacks.js";
  * Single-line text that ellipsizes instead of wrapping. The element still needs
  * a constrained inline size: a flex or grid child will not shrink on its own.
  */
-export const truncate = css `
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+export const truncate = css `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 /**
  * The focus indicator, minus its offset. Offset stays at the site because its
  * sign carries intent: handles inset the ring, controls outset it.
  */
-export const focusRing = css `
-  outline: 2px solid var(--jolly-focus-ring, ${kFallback.focusRing});
+export const focusRing = css `
+  outline: 2px solid var(--jolly-focus-ring, ${kFallback.focusRing});
 `;
 /**
  * Fill transition for controls that show state through background. Which token
  * supplies the fill, and the hover and focus rules, stay per component.
  */
-export const fillTransition = css `
-  transition: background-color var(--jolly-duration-fast, 100ms)
-    var(--jolly-easing, ease);
+export const fillTransition = css `
+  transition: background-color var(--jolly-duration-fast, 100ms)
+    var(--jolly-easing, ease);
 `;
 /**
  * Hides an element while keeping it in the accessibility tree, for live regions
  * and for labels whose text is hidden but still names the control.
  */
-export const visuallyHidden = css `
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
+export const visuallyHidden = css `
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
 `;
 //# sourceMappingURL=mixins.js.map

package/dist/theme/styles/themeStyles.js

@@ -15,9 +15,9 @@ ensureFontFace();
 /**
  * Theme, density, and scale styles for scope hosts.
  */
-export const themeStyles = css `
-  ${themeTokens}
-  ${densityTokens}
-  ${scaleTokens}
+export const themeStyles = css `
+  ${themeTokens}
+  ${densityTokens}
+  ${scaleTokens}
 `;
 //# sourceMappingURL=themeStyles.js.map

package/dist/theme/tokens/density.js

@@ -6,24 +6,24 @@ import { css } from "lit";
  * Row heights lost the 1px control border they used to include, so each preset
  * is 2px shorter than it was. With the container gap the default pitch is 24px.
  */
-export const densityTokens = css `
-  :host {
-    --jolly-row-height: 20px;
-    --jolly-font-size: 11px;
-    --jolly-control-height: 20px;
-    --jolly-icon-button-size: 32px;
-  }
-
-  :host([density="compact"]) {
-    --jolly-row-height: 16px;
-    --jolly-font-size: 10px;
-    --jolly-control-height: 16px;
-  }
-
-  :host([density="comfortable"]) {
-    --jolly-row-height: 26px;
-    --jolly-font-size: 12px;
-    --jolly-control-height: 26px;
-  }
+export const densityTokens = css `
+  :host {
+    --jolly-row-height: 20px;
+    --jolly-font-size: 11px;
+    --jolly-control-height: 20px;
+    --jolly-icon-button-size: 32px;
+  }
+
+  :host([density="compact"]) {
+    --jolly-row-height: 16px;
+    --jolly-font-size: 10px;
+    --jolly-control-height: 16px;
+  }
+
+  :host([density="comfortable"]) {
+    --jolly-row-height: 26px;
+    --jolly-font-size: 12px;
+    --jolly-control-height: 26px;
+  }
 `;
 //# sourceMappingURL=density.js.map

package/dist/theme/tokens/ramps.js

@@ -3,45 +3,45 @@ import { css } from "lit";
 /**
  * Internal OKLCH color ramps.
  */
-export const rampTokens = css `
-  --jolly-neutral-0: oklch(100% 0 250);
-  --jolly-neutral-50: oklch(98% 0.006 250);
-  --jolly-neutral-100: oklch(96% 0.014 250);
-  --jolly-neutral-200: oklch(91% 0.022 250);
-  --jolly-neutral-300: oklch(84% 0.032 250);
-  --jolly-neutral-400: oklch(72% 0.042 250);
-  --jolly-neutral-500: oklch(59% 0.045 250);
-  --jolly-neutral-600: oklch(49% 0.042 250);
-  --jolly-neutral-700: oklch(39% 0.038 250);
-  --jolly-neutral-800: oklch(29% 0.032 250);
-  --jolly-neutral-900: oklch(21% 0.028 250);
-  --jolly-neutral-950: oklch(16% 0.024 250);
-
-  --jolly-accent-100: oklch(95% 0.020 260.7);
-  --jolly-accent-200: oklch(89% 0.050 260.7);
-  --jolly-accent-300: oklch(82% 0.085 260.7);
-  --jolly-accent-400: oklch(73% 0.130 260.7);
-  --jolly-accent-500: oklch(64.5% 0.190 260.7);
-  --jolly-accent-600: oklch(56% 0.175 260.7);
-  --jolly-accent-700: oklch(47% 0.150 260.7);
-  --jolly-accent-800: oklch(38% 0.115 260.7);
-  --jolly-accent-900: oklch(29% 0.080 260.7);
-
-  --jolly-danger-300: oklch(80% 0.090 26.4);
-  --jolly-danger-500: oklch(58% 0.190 26.4);
-  --jolly-danger-700: oklch(45% 0.160 26.4);
-
-  --jolly-warning-300: oklch(85% 0.085 75);
-  --jolly-warning-500: oklch(70% 0.125 75);
-  --jolly-warning-700: oklch(52% 0.105 75);
-
-  --jolly-success-300: oklch(82% 0.100 149);
-  --jolly-success-500: oklch(62% 0.150 149);
-  --jolly-success-700: oklch(48% 0.130 149);
-
-  --jolly-axis-x: oklch(45.2% 0.159 26.4);
-  --jolly-axis-y: oklch(51.2% 0.129 149.1);
-  --jolly-axis-z: oklch(41.9% 0.099 250.1);
-  --jolly-axis-w: oklch(45% 0.140 320);
+export const rampTokens = css `
+  --jolly-neutral-0: oklch(100% 0 250);
+  --jolly-neutral-50: oklch(98% 0.006 250);
+  --jolly-neutral-100: oklch(96% 0.014 250);
+  --jolly-neutral-200: oklch(91% 0.022 250);
+  --jolly-neutral-300: oklch(84% 0.032 250);
+  --jolly-neutral-400: oklch(72% 0.042 250);
+  --jolly-neutral-500: oklch(59% 0.045 250);
+  --jolly-neutral-600: oklch(49% 0.042 250);
+  --jolly-neutral-700: oklch(39% 0.038 250);
+  --jolly-neutral-800: oklch(29% 0.032 250);
+  --jolly-neutral-900: oklch(21% 0.028 250);
+  --jolly-neutral-950: oklch(16% 0.024 250);
+
+  --jolly-accent-100: oklch(95% 0.020 260.7);
+  --jolly-accent-200: oklch(89% 0.050 260.7);
+  --jolly-accent-300: oklch(82% 0.085 260.7);
+  --jolly-accent-400: oklch(73% 0.130 260.7);
+  --jolly-accent-500: oklch(64.5% 0.190 260.7);
+  --jolly-accent-600: oklch(56% 0.175 260.7);
+  --jolly-accent-700: oklch(47% 0.150 260.7);
+  --jolly-accent-800: oklch(38% 0.115 260.7);
+  --jolly-accent-900: oklch(29% 0.080 260.7);
+
+  --jolly-danger-300: oklch(80% 0.090 26.4);
+  --jolly-danger-500: oklch(58% 0.190 26.4);
+  --jolly-danger-700: oklch(45% 0.160 26.4);
+
+  --jolly-warning-300: oklch(85% 0.085 75);
+  --jolly-warning-500: oklch(70% 0.125 75);
+  --jolly-warning-700: oklch(52% 0.105 75);
+
+  --jolly-success-300: oklch(82% 0.100 149);
+  --jolly-success-500: oklch(62% 0.150 149);
+  --jolly-success-700: oklch(48% 0.130 149);
+
+  --jolly-axis-x: oklch(45.2% 0.159 26.4);
+  --jolly-axis-y: oklch(51.2% 0.129 149.1);
+  --jolly-axis-z: oklch(41.9% 0.099 250.1);
+  --jolly-axis-w: oklch(45% 0.140 320);
 `;
 //# sourceMappingURL=ramps.js.map