@geoffcox/sterling-svelte 0.0.26 → 0.0.28

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,23 +59,23 @@ export const focus = (options) => {
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
   {...$$restProps}
 >
-  <slot {shape} {variant} />
+  <slot {disabled} {colorful} {shape} {variant} />
 </button>
 
 <style>
   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,14 @@ export const focus = (options) => {
     right: 0;
     top: 0;
     bottom: 0;
-    background: var(--stsv-Disabled__background);
+    background: repeating-linear-gradient(
+      var(--stsv-common--disabled__stripe-angle),
+      var(--stsv-common--disabled__stripe-color),
+      var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
+      var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
+      var(--stsv-common--disabled__stripe-color--alt)
+        calc(2 * var(--stsv-common--disabled__stripe-width))
+    );
     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;
@@ -47,6 +48,8 @@ declare const __propDef: {
     };
     slots: {
         default: {
+            disabled: boolean;
+            colorful: boolean;
             shape: "circular" | "rounded" | "square";
             variant: "regular" | "outline" | "ghost";
         };

package/Checkbox.svelte

@@ -1,8 +1,8 @@
 <script>import { idGenerator } from "./idGenerator";
-import Label from "./Label.svelte";
 export let checked = false;
 export let disabled = false;
 export let id = void 0;
+export let colorful = false;
 let inputRef;
 $: {
   if ($$slots.default && id === void 0) {
@@ -24,7 +24,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,17 +56,15 @@ export const focus = (options) => {
       on:mouseover
       on:mouseout
       on:mouseup
-      on:wheel
+      on:wheel|passive
       {...$$restProps}
     />
     <div class="indicator" />
   </div>
   {#if $$slots.default}
-    <Label for={id}>
-      <slot {checked} {disabled} inputId={id} value={$$restProps.value}>
-        {$$restProps.value}
-      </slot>
-    </Label>
+    <label for={id}>
+      <slot {checked} {colorful} {disabled} inputId={id} value={$$restProps.value} />
+    </label>
   {/if}
 </div>
 
@@ -115,10 +113,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 +127,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 +167,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 +195,14 @@ export const focus = (options) => {
   }
 
   .container::after {
-    background: var(--stsv-Disabled__background);
+    background: repeating-linear-gradient(
+      var(--stsv-common--disabled__stripe-angle),
+      var(--stsv-common--disabled__stripe-color),
+      var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
+      var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
+      var(--stsv-common--disabled__stripe-color--alt)
+        calc(2 * var(--stsv-common--disabled__stripe-width))
+    );
     bottom: 0;
     content: '';
     left: 0;
@@ -191,6 +214,12 @@ export const focus = (options) => {
     transition: opacity 250ms;
   }
 
+  label {
+    color: var(--stsv-common__color);
+    transition: color 250ms;
+    font: inherit;
+  }
+
   .sterling-checkbox.disabled .container::after {
     opacity: 1;
   }
@@ -198,7 +227,8 @@ export const focus = (options) => {
   @media (prefers-reduced-motion) {
     .indicator,
     .indicator::after,
-    .container::after {
+    .container::after,
+    label {
       transition: none;
     }
   }

package/Checkbox.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
         id?: string | undefined;
+        colorful?: boolean | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -41,6 +42,7 @@ declare const __propDef: {
     slots: {
         default: {
             checked: boolean;
+            colorful: boolean;
             disabled: boolean;
             inputId: string | undefined;
             value: any;

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,257 @@
+<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;
+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}
+  on:blur
+  on:click
+  on:copy
+  on:cut
+  on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
+  on:focus
+  on:focusin
+  on:focusout
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mousedown
+  on:mouseenter
+  on:mouseleave
+  on:mousemove
+  on:mouseover
+  on:mouseout
+  on:mouseup
+  on:wheel
+  on:paste
+  {...$$restProps}
+>
+  <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,49 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        colorText?: string | undefined;
+        colorFormat?: "hex" | "rgb" | "hsl" | undefined;
+        colorful?: boolean | undefined;
+        composed?: boolean | undefined;
+        disabled?: boolean | undefined;
+        open?: boolean | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        copy: ClipboardEvent;
+        cut: ClipboardEvent;
+        dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
+        focus: FocusEvent;
+        focusin: FocusEvent;
+        focusout: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mousedown: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mousemove: MouseEvent;
+        mouseover: MouseEvent;
+        mouseout: MouseEvent;
+        mouseup: MouseEvent;
+        wheel: WheelEvent;
+        paste: ClipboardEvent;
+    } & {
+        [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 {};