@geoffcox/sterling-svelte 0.0.25 → 0.0.27

package/Button.svelte

@@ -1,6 +1,7 @@
 <script>export let disabled = false;
 export let variant = "regular";
 export let shape = "rounded";
+export let colorful = false;
 let buttonRef;
 export const click = () => {
   buttonRef?.click();
@@ -20,6 +21,7 @@ export const focus = (options) => {
 <button
   bind:this={buttonRef}
   class="sterling-button"
+  class:colorful
   class:square={shape === 'square'}
   class:circular={shape === 'circular'}
   class:outline={variant === 'outline'}
@@ -57,7 +59,7 @@ export const focus = (options) => {
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
   {...$$restProps}
 >
   <slot {shape} {variant} />
@@ -67,13 +69,13 @@ export const focus = (options) => {
   button {
     align-content: center;
     align-items: center;
-    background-color: var(--stsv-Button__background-color);
-    border-color: var(--stsv-Button__border-color);
-    border-radius: var(--stsv-Button__border-radius);
-    border-style: var(--stsv-Button__border-style);
-    border-width: var(--stsv-Button__border-width);
+    background-color: var(--stsv-button__background-color);
+    border-color: var(--stsv-button__border-color);
+    border-radius: var(--stsv-button__border-radius);
+    border-style: var(--stsv-button__border-style);
+    border-width: var(--stsv-button__border-width);
     box-sizing: border-box;
-    color: var(--stsv-Button__color);
+    color: var(--stsv-button__color);
     cursor: pointer;
     display: inline-flex;
     flex-direction: row;
@@ -105,23 +107,40 @@ export const focus = (options) => {
   }
 
   button:hover {
-    background-color: var(--stsv-Button__background-color--hover);
-    border-color: var(--stsv-Button__border-color--hover);
-    color: var(--stsv-Button__color--hover);
+    background-color: var(--stsv-button__background-color--hover);
+    border-color: var(--stsv-button__border-color--hover);
+    color: var(--stsv-button__color--hover);
   }
 
   button:active {
-    background-color: var(--stsv-Button__background-color--active);
-    border-color: var(--stsv-Button__border-color--active);
-    color: var(--stsv-Button__color--active);
+    background-color: var(--stsv-button__background-color--active);
+    border-color: var(--stsv-button__border-color--active);
+    color: var(--stsv-button__color--active);
   }
 
   button:focus-visible {
-    border-color: var(--stsv-Button__border-color--focus);
-    outline-color: var(--stsv-Common__outline-color);
-    outline-offset: var(--stsv-Common__outline-offset);
-    outline-style: var(--stsv-Common__outline-style);
-    outline-width: var(--stsv-Common__outline-width);
+    border-color: var(--stsv-button__border-color--focus);
+    outline-color: var(--stsv-common__outline-color);
+    outline-offset: var(--stsv-common__outline-offset);
+    outline-style: var(--stsv-common__outline-style);
+    outline-width: var(--stsv-common__outline-width);
+  }
+
+  button.colorful {
+    background-color: var(--stsv-button--colorful__background-color);
+    border-color: var(--stsv-button--colorful__border-color);
+    color: var(--stsv-button--colorful__color);
+  }
+  button.colorful:hover {
+    background-color: var(--stsv-button--colorful__background-color--hover);
+    border-color: var(--stsv-button--colorful__border-color--hover);
+    color: var(--stsv-button--colorful__color--hover);
+  }
+
+  button.colorful:active {
+    background-color: var(--stsv-button--colorful__background-color--active);
+    border-color: var(--stsv-button--colorful__border-color--active);
+    color: var(--stsv-button--colorful__color--active);
   }
 
   button.outline {
@@ -129,11 +148,27 @@ export const focus = (options) => {
   }
 
   button.outline:hover {
-    background-color: var(--stsv-Button__background-color--hover);
+    background-color: var(--stsv-button__background-color--hover);
   }
 
   button.outline:active {
-    background-color: var(--stsv-Button__background-color--active);
+    background-color: var(--stsv-button__background-color--active);
+  }
+
+  button.outline.colorful {
+    border-color: var(--stsv-button--colorful__border-color);
+    color: var(--stsv-button--colorful__border-color);
+  }
+  button.outline.colorful:hover {
+    background-color: var(--stsv-button--colorful__background-color--hover);
+    border-color: var(--stsv-button--colorful__border-color--hover);
+    color: var(--stsv-button--colorful__color--hover);
+  }
+
+  button.outline.colorful:active {
+    background-color: var(--stsv-button--colorful__background-color--active);
+    border-color: var(--stsv-button--colorful__border-color--active);
+    color: var(--stsv-button--colorful__color--active);
   }
 
   button.ghost {
@@ -142,17 +177,31 @@ export const focus = (options) => {
   }
 
   button.ghost:hover {
-    background-color: var(--stsv-Button__background-color--hover);
+    background-color: var(--stsv-button__background-color--hover);
     border-color: transparent;
   }
 
   button.ghost:active {
-    background-color: var(--stsv-Button__background-color--active);
+    background-color: var(--stsv-button__background-color--active);
     border-color: transparent;
   }
 
   button.ghost:focus-visible {
-    border-color: var(--stsv-Button__border-color--focus);
+    border-color: var(--stsv-button__border-color--focus);
+  }
+
+  button.ghost.colorful {
+    color: var(--stsv-button--colorful__border-color);
+  }
+
+  button.ghost.colorful:hover {
+    background-color: var(--stsv-button--colorful__background-color--hover);
+    color: var(--stsv-button--colorful__color--hover);
+  }
+
+  button.ghost.colorful:active {
+    background-color: var(--stsv-button--colorful__background-color--active);
+    color: var(--stsv-button--colorful__color--active);
   }
 
   button:disabled {
@@ -167,7 +216,13 @@ export const focus = (options) => {
     right: 0;
     top: 0;
     bottom: 0;
-    background: var(--stsv-Disabled__background);
+    background: repeating-linear-gradient(
+      45deg,
+      var(--stsv-common__background-color1--disabled),
+      var(--stsv-common__background-color1--disabled) 3px,
+      var(--stsv-common__background-color2--disabled) 3px,
+      var(--stsv-common__background-color2--disabled) 6px
+    );
     pointer-events: none;
   }
 

package/Button.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         variant?: "regular" | "outline" | "ghost" | undefined;
         shape?: "circular" | "rounded" | "square" | undefined;
+        colorful?: boolean | undefined;
         click?: (() => void) | undefined;
         blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;

package/Checkbox.svelte

@@ -1,6 +1,7 @@
 <script>import { idGenerator } from "./idGenerator";
 import Label from "./Label.svelte";
 export let checked = false;
+export let colorful = false;
 export let disabled = false;
 export let id = void 0;
 let inputRef;
@@ -24,7 +25,7 @@ export const focus = (options) => {
 	@component
 	A styled HTML input type=checkbox element.
 -->
-<div class="sterling-checkbox" class:disabled>
+<div class="sterling-checkbox" class:colorful class:disabled>
   <div class="container">
     <input
       bind:this={inputRef}
@@ -56,7 +57,7 @@ export const focus = (options) => {
       on:mouseover
       on:mouseout
       on:mouseup
-      on:wheel
+      on:wheel|passive
       {...$$restProps}
     />
     <div class="indicator" />
@@ -115,10 +116,10 @@ export const focus = (options) => {
 		and there is not a parent CSS selector.
 	*/
   .indicator {
-    background-color: var(--stsv-Input__background-color);
-    border-color: var(--stsv-Input__border-color);
-    border-style: var(--stsv-Input__border-style);
-    border-width: var(--stsv-Input__border-width);
+    background-color: var(--stsv-input__background-color);
+    border-color: var(--stsv-input__border-color);
+    border-style: var(--stsv-input__border-style);
+    border-width: var(--stsv-input__border-width);
     box-sizing: border-box;
     display: inline-block;
     height: 20px;
@@ -129,27 +130,27 @@ export const focus = (options) => {
   }
 
   input:checked + .indicator {
-    background-color: var(--stsv-Input__background-color);
-    border-color: var(--stsv-Input__border-color);
+    background-color: var(--stsv-input__background-color);
+    border-color: var(--stsv-input__border-color);
   }
 
-  .sterling-checkbox:hover .indicator {
-    background-color: var(--stsv-Input__background-color--hover);
-    border-color: var(--stsv-Input__border-color--hover);
+  .sterling-checkbox:not(.disabled):hover .indicator {
+    background-color: var(--stsv-input__background-color--hover);
+    border-color: var(--stsv-input__border-color--hover);
   }
 
   input:focus-visible + .indicator {
-    outline-color: var(--stsv-Common__outline-color);
-    outline-offset: var(--stsv-Common__outline-offset);
-    outline-style: var(--stsv-Common__outline-style);
-    outline-width: var(--stsv-Common__outline-width);
+    outline-color: var(--stsv-common__outline-color);
+    outline-offset: var(--stsv-common__outline-offset);
+    outline-style: var(--stsv-common__outline-style);
+    outline-width: var(--stsv-common__outline-width);
   }
 
   /*
 		The checkmark is a rotated L centered in the box.
 	*/
   .indicator::after {
-    border-color: var(--stsv-Input__color);
+    border-color: var(--stsv-input__color);
     border-style: solid;
     border-width: 0 3px 3px 0;
     box-sizing: border-box;
@@ -169,8 +170,26 @@ export const focus = (options) => {
     opacity: 1;
   }
 
-  .sterling-checkbox:hover input:checked + .indicator::after {
-    border-color: var(--stsv-Input__color--hover);
+  .sterling-checkbox:not(.disabled):hover input:checked + .indicator::after {
+    border-color: var(--stsv-input__color--hover);
+  }
+
+  .sterling-checkbox.colorful .indicator {
+    background-color: var(--stsv-input--colorful__background-color);
+    border-color: var(--stsv-input--colorful__border-color);
+  }
+
+  .sterling-checkbox.colorful:not(.disabled):hover .indicator {
+    background-color: var(--stsv-input--colorful__background-color--hover);
+    border-color: var(--stsv-input--colorful__border-color--hover);
+  }
+
+  .sterling-checkbox.colorful .indicator::after {
+    border-color: var(--stsv-input--colorful__color);
+  }
+
+  .sterling-checkbox.colorful:not(.disabled):hover input:checked + .indicator::after {
+    border-color: var(--stsv-input--colorful__color--hover);
   }
 
   .sterling-checkbox.disabled,
@@ -179,7 +198,13 @@ export const focus = (options) => {
   }
 
   .container::after {
-    background: var(--stsv-Disabled__background);
+    background: repeating-linear-gradient(
+      45deg,
+      var(--stsv-common__background-color1--disabled),
+      var(--stsv-common__background-color1--disabled) 3px,
+      var(--stsv-common__background-color2--disabled) 3px,
+      var(--stsv-common__background-color2--disabled) 6px
+    );
     bottom: 0;
     content: '';
     left: 0;

package/Checkbox.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         checked?: boolean | undefined;
+        colorful?: boolean | undefined;
         disabled?: boolean | undefined;
         id?: string | undefined;
         blur?: (() => void) | undefined;

package/ColorPicker.constants.d.ts

@@ -0,0 +1 @@
+export declare const COLOR_FORMATS: readonly ["hex", "rgb", "hsl"];

package/ColorPicker.constants.js

@@ -0,0 +1 @@
+export const COLOR_FORMATS = ['hex', 'rgb', 'hsl'];

package/ColorPicker.svelte

@@ -0,0 +1,226 @@
+<script>import { tick } from "svelte";
+import tinycolor from "@ctrl/tinycolor";
+import Dropdown from "./Dropdown.svelte";
+import Input from "./Input.svelte";
+import Tab from "./Tab.svelte";
+import TabList from "./TabList.svelte";
+import RgbColorSliders from "./RgbColorSliders.svelte";
+import HslColorSliders from "./HslColorSliders.svelte";
+import HexColorSliders from "./HexColorSliders.svelte";
+import { round } from "lodash-es";
+import { trapKeyboardFocus } from "./actions/trapKeyboardFocus";
+const defaultColorText = "#000000";
+export let colorText = defaultColorText;
+export let colorFormat = "hex";
+export let colorful = false;
+export let composed = false;
+export let disabled = false;
+export let open = false;
+export let stayOpenOnClickAway = false;
+let hue = 0;
+let saturation = 0;
+let lightness = 0;
+let red = 0;
+let green = 0;
+let blue = 0;
+let alpha = 1;
+let hexAlpha = 255;
+let updating = false;
+let tabListRef;
+let tabsRef;
+const updateFromRgb = async () => {
+  if (!updating && (colorFormat === "hex" || colorFormat === "rgb")) {
+    updating = true;
+    const newAlpha = colorFormat === "hex" ? hexAlpha / 255 : alpha;
+    const color = tinycolor({ r: red, g: green, b: blue, a: newAlpha });
+    const hsl = color.toHsl();
+    hue = Math.round(hsl.h);
+    saturation = Math.round(hsl.s * 100);
+    lightness = Math.round(hsl.l * 100);
+    switch (colorFormat) {
+      case "rgb":
+        colorText = color.toRgbString();
+        hexAlpha = Math.round(alpha * 255);
+        break;
+      case "hex":
+        colorText = alpha === 100 ? color.toHexString() : color.toHex8String();
+        alpha = round(hexAlpha / 255, 2);
+        break;
+    }
+    await tick();
+    updating = false;
+  }
+};
+const updateFromHsl = async () => {
+  if (!updating && colorFormat === "hsl") {
+    updating = true;
+    const color = tinycolor({ h: hue, s: saturation / 100, l: lightness / 100, a: alpha });
+    const rgb = color.toRgb();
+    red = rgb.r;
+    green = rgb.g;
+    blue = rgb.b;
+    colorText = color.toHslString();
+    hexAlpha = Math.round(alpha * 255);
+    await tick();
+    updating = false;
+  }
+};
+const updateColorsFromText = async () => {
+  const color = tinycolor(colorText);
+  if (color.isValid) {
+    if (!updating) {
+      updating = true;
+      switch (color.format) {
+        case "hsl":
+          colorFormat = "hsl";
+          break;
+        case "rgb":
+          colorFormat = "rgb";
+          break;
+        case "hex":
+        case "hex4":
+        case "hex8":
+          colorFormat = "hex";
+          break;
+        default:
+          break;
+      }
+      const hsl = color.toHsl();
+      hue = Math.round(hsl.h);
+      saturation = Math.round(hsl.s * 100);
+      lightness = Math.round(hsl.l * 100);
+      const rgb = color.toRgb();
+      red = rgb.r;
+      green = rgb.g;
+      blue = rgb.b;
+      if (rgb.a) {
+        alpha = hsl.a;
+        hexAlpha = Math.round(alpha * 255);
+      }
+      await tick();
+      updating = false;
+    }
+  }
+};
+$:
+  colorText, updateColorsFromText();
+$:
+  colorFormat, hue, saturation, lightness, alpha, updateFromHsl();
+$:
+  colorFormat, red, green, blue, alpha, hexAlpha, updateFromRgb();
+const onInputBlur = async () => {
+  if (!updating) {
+    if (colorText.trim().length === 0) {
+      colorText = defaultColorText;
+      return;
+    }
+    const color = tinycolor(colorText);
+    if (color.isValid) {
+      updating = true;
+      switch (colorFormat) {
+        case "hsl":
+          colorText = color.toHslString();
+          break;
+        case "rgb":
+          colorText = color.toRgbString();
+          break;
+        case "hex":
+          colorText = alpha === 1 ? color.toHexString() : color.toHex8String();
+          break;
+        default:
+          break;
+      }
+      await tick();
+      updating = false;
+    }
+  }
+};
+const onInputClick = (event) => {
+  event.stopPropagation();
+  return false;
+};
+const onInputKeydown = (event) => {
+  switch (event.key) {
+    case "Tab":
+      if (open) {
+        setTimeout(() => {
+          tabListRef?.focus();
+        }, 0);
+        event.preventDefault();
+        event.stopPropagation();
+        return false;
+      }
+      break;
+    case "Escape":
+      if (open) {
+        open = false;
+        event.preventDefault();
+        event.stopPropagation();
+        return false;
+      }
+      break;
+  }
+  event.stopImmediatePropagation();
+};
+updateColorsFromText();
+</script>
+
+<Dropdown bind:open {colorful} {composed} {disabled} {stayOpenOnClickAway}>
+  <div class="value" slot="value">
+    <div class="color-box" style="background-color: {colorText}" />
+    <Input
+      bind:value={colorText}
+      {colorful}
+      {disabled}
+      composed
+      on:blur={onInputBlur}
+      on:click={onInputClick}
+      on:keydown={onInputKeydown}
+      spellcheck="false"
+    />
+  </div>
+  <div class="popup" use:trapKeyboardFocus>
+    <div class="tabs" bind:this={tabsRef}>
+      <TabList bind:this={tabListRef} bind:selectedValue={colorFormat} {colorful}>
+        <Tab value="hex">hex</Tab>
+        <Tab value="rgb">rgb</Tab>
+        <Tab value="hsl">hsl</Tab>
+      </TabList>
+    </div>
+    <div class="sliders">
+      {#if colorFormat === 'rgb'}
+        <RgbColorSliders bind:red bind:green bind:blue bind:alpha {colorful} />
+      {:else if colorFormat === 'hex'}
+        <HexColorSliders bind:red bind:green bind:blue bind:alpha={hexAlpha} {colorful} />
+      {:else if colorFormat === 'hsl'}
+        <HslColorSliders bind:hue bind:saturation bind:lightness bind:alpha {colorful} />
+      {/if}
+    </div>
+  </div>
+</Dropdown>
+
+<style>
+  .value {
+    display: grid;
+    align-items: center;
+    justify-content: stretch;
+    justify-items: stretch;
+    grid-template-columns: auto 1fr;
+    padding-left: 0.5em;
+    width: 250px;
+  }
+
+  .color-box {
+    width: 1em;
+    height: 1em;
+    border: 1px dashed var(--stsv-common__border-color);
+  }
+
+  .popup {
+    width: fit-content;
+    min-width: 500px;
+    display: grid;
+    align-items: center;
+    padding: 0.25em;
+  }
+</style>

package/ColorPicker.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        colorText?: string | undefined;
+        colorFormat?: "hex" | "rgb" | "hsl" | undefined;
+        colorful?: boolean | undefined;
+        composed?: boolean | undefined;
+        disabled?: boolean | undefined;
+        open?: boolean | undefined;
+        stayOpenOnClickAway?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ColorPickerProps = typeof __propDef.props;
+export type ColorPickerEvents = typeof __propDef.events;
+export type ColorPickerSlots = typeof __propDef.slots;
+export default class ColorPicker extends SvelteComponentTyped<ColorPickerProps, ColorPickerEvents, ColorPickerSlots> {
+}
+export {};

package/ColorPicker.types.d.ts

@@ -0,0 +1,4 @@
+import type { COLOR_FORMATS } from './ColorPicker.constants';
+type ColorFormatTuple = typeof COLOR_FORMATS;
+export type ColorFormat = ColorFormatTuple[number];
+export {};

package/ColorPicker.types.js

@@ -0,0 +1 @@
+export {};

package/Dialog.svelte

@@ -10,7 +10,7 @@ let formRef;
 let closing = false;
 const onDocumentClick = (event) => {
   const targetNode = event?.target;
-  if (targetNode && !contentRef.contains(targetNode) && backdropCloses) {
+  if (targetNode && !contentRef?.contains(targetNode) && backdropCloses) {
     open = false;
   }
 };
@@ -146,17 +146,17 @@ A styled <dialog> element
   }
 
   .header {
-    background-color: var(--stsv-Display__background-color);
+    background-color: var(--stsv-common__background-color--secondary);
   }
 
   .content {
-    background-color: var(--stsv-Common__background-color);
-    border-color: var(--stsv-Common__border-color);
-    border-radius: var(--stsv-Common__border-radius);
-    border-style: var(--stsv-Common__border-style);
-    border-width: var(--stsv-Common__border-width);
+    background-color: var(--stsv-common__background-color);
+    border-color: var(--stsv-common__border-color);
+    border-radius: var(--stsv-common__border-radius);
+    border-style: var(--stsv-common__border-style);
+    border-width: var(--stsv-common__border-width);
     box-sizing: border-box;
-    color: var(--stsv-Common__color);
+    color: var(--stsv-common__color);
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: auto 1fr auto auto;
@@ -229,8 +229,8 @@ A styled <dialog> element
   }
 
   .separator {
-    background-color: var(--stsv-Display__background-color);
-    height: var(--stsv-Common__border-width);
+    background-color: var(--stsv-common__background-color--secondary);
+    height: var(--stsv-common__border-width);
     margin: 0 0.25em;
   }