@geoffcox/sterling-svelte 0.0.25 → 0.0.27

package/HslColorSliders.svelte

@@ -0,0 +1,187 @@
+<script>import { createEventDispatcher } from "svelte";
+import Input from "./Input.svelte";
+import Slider from "./Slider.svelte";
+import { round } from "lodash-es";
+export let hue = 180;
+export let saturation = 100;
+export let lightness = 50;
+export let alpha = 1;
+export let colorful = false;
+let hueText = hue.toString();
+let saturationText = saturation.toString();
+let lightnessText = lightness.toString();
+let alphaText = alpha.toString();
+$: {
+  hueText = hue.toString();
+}
+$: {
+  saturationText = saturation.toString();
+}
+$: {
+  lightnessText = lightness.toString();
+}
+$: {
+  alphaText = alpha.toString();
+}
+const dispatcher = createEventDispatcher();
+const raiseChange = (hue2, saturation2, lightness2) => {
+  dispatcher("change", { hue: hue2, saturation: saturation2, lightness: lightness2 });
+};
+$:
+  raiseChange(hue, saturation, lightness);
+const onHueInputChange = (event) => {
+  const inputChangeEvent = event;
+  const text = inputChangeEvent?.currentTarget?.value;
+  const newValue = text ? Number.parseFloat(text) : hue;
+  if (newValue && newValue !== Number.NaN) {
+    hue = Math.round(Math.max(0, Math.min(360, newValue)));
+    hueText = hue.toString();
+  }
+};
+const onSaturationInputChange = (event) => {
+  const inputChangeEvent = event;
+  const text = inputChangeEvent?.currentTarget?.value?.replace(/%/g, "");
+  const newValue = text ? Number.parseFloat(text) : saturation;
+  if (newValue && newValue !== Number.NaN) {
+    saturation = Math.round(Math.max(0, Math.min(100, newValue)));
+    saturationText = saturation.toString();
+  }
+};
+const onLightnessInputChange = (event) => {
+  const inputChangeEvent = event;
+  const text = inputChangeEvent?.currentTarget?.value?.replace(/%/g, "");
+  const newValue = text ? Number.parseFloat(text) : lightness;
+  if (newValue && newValue !== Number.NaN) {
+    lightness = Math.round(Math.max(0, Math.min(100, newValue)));
+    lightnessText = lightness.toString();
+  }
+};
+const onAlphaInputchange = (event) => {
+  const inputChangeEvent = event;
+  const text = inputChangeEvent?.currentTarget?.value;
+  const newValue = text ? Number.parseFloat(text) : alpha;
+  if (newValue && newValue !== Number.NaN) {
+    alpha = round(Math.max(0, Math.min(1, newValue)), 2);
+    alphaText = alpha.toString();
+  }
+};
+</script>
+
+<div class="sterling-hsl-color-sliders">
+  <div class="slider hue">
+    <Slider min={0} max={360} precision={0} bind:value={hue} {colorful} />
+  </div>
+  <Input bind:value={hueText} {colorful} on:change={(e) => onHueInputChange(e)} />
+  <div class="slider saturation" style={`--hue:${hue};`}>
+    <Slider min={0} max={100} precision={0} bind:value={saturation} {colorful} />
+  </div>
+  <Input bind:value={saturationText} {colorful} on:change={(e) => onSaturationInputChange(e)} />
+  <div class="slider lightness" style={`--hue:${hue};--saturation:${saturation}%;`}>
+    <Slider min={0} max={100} precision={0} bind:value={lightness} {colorful} />
+  </div>
+  <Input bind:value={lightnessText} {colorful} on:change={(e) => onLightnessInputChange(e)} />
+  <div
+    class="slider alpha"
+    style={`--hue:${hue};--saturation:${saturation}%;--lightness:${lightness}%`}
+  >
+    <div class="alpha-hatch" />
+    <div class="alpha-gradient" />
+    <div class="alpha-slider">
+      <Slider min={0} max={1} precision={2} step={0.01} bind:value={alpha} {colorful} />
+    </div>
+  </div>
+  <Input bind:value={alphaText} {colorful} on:change={(e) => onAlphaInputchange(e)} />
+</div>
+
+<style>
+  .sterling-hsl-color-sliders {
+    align-items: center;
+    display: grid;
+    grid-template-columns: 1fr 5em;
+    column-gap: 0.5em;
+    row-gap: 0.25em;
+  }
+
+  .hue {
+    background: linear-gradient(
+      to right,
+      hsl(0, 100%, 50%) 0%,
+      hsl(60, 100%, 50%) 17%,
+      hsl(120, 100%, 50%) 33%,
+      hsl(180, 100%, 50%) 50%,
+      hsl(240, 100%, 50%) 67%,
+      hsl(300, 100%, 50%) 83%,
+      hsl(0, 100%, 50%) 100%
+    );
+  }
+
+  .slider :global(.fill),
+  .slider :global(.sterling-slider.colorful .fill) {
+    background-color: transparent;
+  }
+  .slider :global(.track),
+  .slider :global(.sterling-slider.colorful .track) {
+    background-color: transparent;
+    opacity: 0.1;
+    background-image: linear-gradient(to right, #7f3a3a, #ffffff 1px, #000000 1px, #000000);
+    background-size: 2px 100%;
+  }
+
+  .saturation {
+    background: linear-gradient(
+      to right,
+      hsl(var(--hue), 0%, 50%) 0%,
+      hsl(var(--hue), 100%, 50%) 100%
+    );
+  }
+
+  .lightness {
+    background: linear-gradient(
+      to right,
+      hsl(var(--hue), var(--saturation), 0%) 0%,
+      hsl(var(--hue), var(--saturation), 50%) 50%,
+      hsl(var(--hue), var(--saturation), 100%) 100%
+    );
+  }
+
+  .alpha {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    place-content: stretch;
+    place-items: stretch;
+  }
+
+  .alpha-gradient,
+  .alpha-hatch,
+  .alpha-slider {
+    grid-row: 1 / span 1;
+    grid-column: 1 / span 1;
+  }
+
+  .alpha-hatch {
+    background-color: #eee;
+    opacity: 0.1;
+    background-image: repeating-linear-gradient(
+        45deg,
+        #444 25%,
+        transparent 25%,
+        transparent 75%,
+        #444 75%,
+        #444
+      ),
+      repeating-linear-gradient(45deg, #444 25%, #eee 25%, #eee 75%, #444 75%, #444),
+      repeating-linear-gradient(-45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444),
+      repeating-linear-gradient(-45deg, #444 25%, #eee 25%, #eee 75%, #444 75%, #444);
+    background-position: 0 0, 4px 4px;
+    background-size: 8px 8px;
+  }
+
+  .alpha-gradient {
+    background: linear-gradient(
+      to right,
+      hsla(var(--hue), var(--saturation), var(--lightness), 0) 0%,
+      hsla(var(--hue), var(--saturation), var(--lightness), 1) 100%
+    );
+  }
+</style>

package/HslColorSliders.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        hue?: number | undefined;
+        saturation?: number | undefined;
+        lightness?: number | undefined;
+        alpha?: number | undefined;
+        colorful?: boolean | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HslColorSlidersProps = typeof __propDef.props;
+export type HslColorSlidersEvents = typeof __propDef.events;
+export type HslColorSlidersSlots = typeof __propDef.slots;
+export default class HslColorSliders extends SvelteComponentTyped<HslColorSlidersProps, HslColorSlidersEvents, HslColorSlidersSlots> {
+}
+export {};

package/Input.svelte

@@ -1,5 +1,6 @@
 <script>import { idGenerator } from "./idGenerator";
 import Label from "./Label.svelte";
+export let colorful = false;
 export let composed = false;
 export let disabled = false;
 export let id = void 0;
@@ -39,7 +40,7 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
     <slot {composed} {disabled} {value} />
   </Label>
 {/if}
-<div class="sterling-input" class:composed class:disabled>
+<div class="sterling-input" class:colorful class:composed class:disabled>
   <input
     bind:this={inputRef}
     {disabled}
@@ -77,7 +78,7 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
     on:select
     on:submit
     on:reset
-    on:wheel
+    on:wheel|passive
     {...$$restProps}
   />
 </div>
@@ -92,33 +93,54 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
   }
 
   input {
-    background-color: var(--stsv-Input__background-color);
-    border-color: var(--stsv-Input__border-color);
-    border-radius: var(--stsv-Input__border-radius);
-    border-style: var(--stsv-Input__border-style);
-    border-width: var(--stsv-Input__border-width);
-    color: var(--stsv-Input__color);
+    background-color: var(--stsv-input__background-color);
+    border-color: var(--stsv-input__border-color);
+    border-radius: var(--stsv-input__border-radius);
+    border-style: var(--stsv-input__border-style);
+    border-width: var(--stsv-input__border-width);
+    box-sizing: border-box;
+    color: var(--stsv-input__color);
+    display: block;
     font: inherit;
     margin: 0;
     outline: none;
     padding: 0.5em;
     transition: background-color 250ms, color 250ms, border-color 250ms;
+    width: 100%;
   }
 
-  .sterling-input:hover input {
-    background-color: var(--stsv-Input__background-color--hover);
-    border-color: var(--stsv-Input__border-color--hover);
-    color: var(--stsv-Input__color--hover);
+  .sterling-input:hover input:not(:disabled) {
+    background-color: var(--stsv-input__background-color--hover);
+    border-color: var(--stsv-input__border-color--hover);
+    color: var(--stsv-input__color--hover);
   }
 
   input:focus {
-    background-color: var(--stsv-Input__background-color--focus);
-    border-color: var(--stsv-Input__border-color--focus);
-    color: var(--stsv-Input__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);
+    background-color: var(--stsv-input__background-color--focus);
+    border-color: var(--stsv-input__border-color--focus);
+    color: var(--stsv-input__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);
+  }
+
+  .sterling-input.colorful input {
+    background-color: var(--stsv-input--colorful__background-color);
+    border-color: var(--stsv-input--colorful__border-color);
+    color: var(--stsv-input--colorful__color);
+  }
+
+  .sterling-input.colorful:hover input:not(:disabled) {
+    background-color: var(--stsv-input--colorful__background-color--hover);
+    border-color: var(--stsv-input--colorful__border-color--hover);
+    color: var(--stsv-input--colorful__color--hover);
+  }
+
+  .sterling-input.colorful input:focus {
+    background-color: var(--stsv-input--colorful__background-color--focus);
+    border-color: var(--stsv-input--colorful__border-color--focus);
+    color: var(--stsv-input--colorful__color--focus);
   }
 
   .sterling-input.composed input,
@@ -130,7 +152,7 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
   }
 
   input::placeholder {
-    color: var(--stsv-Display__color--faint);
+    color: var(--stsv-common__color--subtle);
   }
 
   .sterling-input.disabled * {
@@ -139,7 +161,13 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
   }
 
   .sterling-input::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/Input.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        colorful?: boolean | undefined;
         composed?: boolean | undefined;
         disabled?: boolean | undefined;
         id?: string | undefined;
@@ -66,7 +67,7 @@ export default class Input extends SvelteComponentTyped<InputProps, InputEvents,
     get click(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;
     get select(): () => void;
-    get setSelectionRange(): (start: number | null, end: number | null, direction?: "none" | "forward" | "backward" | undefined) => void;
+    get setSelectionRange(): (start: number | null, end: number | null, direction?: "forward" | "backward" | "none" | undefined) => void;
     get setRangeText(): (replacement: string, start?: number | undefined, end?: number | undefined, selectionMode?: SelectionMode | undefined) => void;
 }
 export {};

package/Label.svelte

@@ -41,7 +41,7 @@ export const focus = (options) => {
   on:mouseout
   on:mouseup
   on:scroll
-  on:wheel
+  on:wheel|passive
   on:paste
   {...$$restProps}
 >
@@ -50,13 +50,13 @@ export const focus = (options) => {
 
 <style>
   label {
-    color: var(--stsv-Display__color);
+    color: var(--stsv-common__color);
     transition: color 250ms;
     font: inherit;
   }
 
   label.disabled {
-    color: var(--stsv-Common__color--disabled);
+    color: var(--stsv-common__color--disabled);
   }
 
   @media (prefers-reduced-motion) {

package/Link.svelte

@@ -1,4 +1,5 @@
-<script>export let href;
+<script>export let colorful = false;
+export let href;
 export let disabled = false;
 export let variant = "regular";
 let linkRef;
@@ -16,6 +17,7 @@ export const focus = (options) => {
 <a
   bind:this={linkRef}
   class="sterling-link"
+  class:colorful
   class:disabled
   class:ghost={variant === 'ghost'}
   class:undecorated={variant === 'undecorated'}
@@ -50,7 +52,7 @@ export const focus = (options) => {
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
   {...$$restProps}><slot {disabled} {href} {variant} /></a
 >
 
@@ -61,10 +63,10 @@ export const focus = (options) => {
     border-left: none;
     border-right: none;
     border-radius: 0;
-    border-bottom-style: var(--stsv-Button__border-style);
-    border-bottom-width: calc(var(--stsv-Button__border-width));
-    border-bottom-color: var(--stsv-Button__border-color);
-    color: var(--stsv-Button__color);
+    border-bottom-style: var(--stsv-common__border-style);
+    border-bottom-width: calc(var(--stsv-common__border-width));
+    border-bottom-color: var(--stsv-common__border-color);
+    color: var(--stsv-common__color);
     cursor: pointer;
     font: inherit;
     text-decoration: none;
@@ -75,34 +77,78 @@ export const focus = (options) => {
   }
 
   a:visited {
-    border-bottom-color: var(--stsv-Button__border-color);
+    border-bottom-color: var(--stsv-input__border-color);
   }
 
+  a:hover {
+    border-bottom-color: var(--stsv-input__border-color--hover);
+    color: var(--stsv-input__color--hover);
+  }
+
+  a:active {
+    border-bottom-color: var(--stsv-input__border-color--selected);
+    color: var(--stsv-input__color--active);
+  }
+
+  /* ----- colorful ----- */
+
+  a.colorful,
+  a.colorful:visited {
+    border-bottom-color: var(--stsv-input--colorful__border-color);
+    color: var(--stsv-input--colorful__color);
+  }
+
+  a.colorful:hover {
+    border-bottom-color: var(--stsv-input--colorful__border-color--hover);
+    color: var(--stsv-input--colorful__color--hover);
+  }
+
+  a.colorful:active {
+    border-bottom-color: var(--stsv-input--colorful__border-color--selected);
+    color: var(--stsv-input--colorful__color--active);
+  }
+
+  /* ----- ghost ----- */
+
   a.ghost {
     border-bottom-color: transparent;
   }
 
-  a:hover {
-    border-bottom-color: var(--stsv-Button__border-color--hover);
-    color: var(--stsv-Button__color--hover);
+  a.ghost:hover {
+    border-bottom-color: var(--stsv-input__border-color--hover);
   }
 
-  a:active {
-    border-bottom-color: var(--stsv-Button__border-color--active);
-    color: var(--stsv-Button__color--active);
+  a.ghost:active {
+    border-bottom-color: var(--stsv-input__border-color--selected);
   }
 
-  a.disabled {
-    border-bottom-color: var(--stsv-Common__border-color--disabled);
-    color: var(--stsv-Common__color--disabled);
+  /* ----- ghost colorful ----- */
+
+  a.ghost.colorful:hover {
+    border-bottom-color: var(--stsv-input--colorful__border-color--hover);
+  }
+
+  a.ghost.colorful:active {
+    border-bottom-color: var(--stsv-input--colorful__border-color--selected);
+  }
+
+  /* ----- disabled ----- */
+
+  a.disabled,
+  a.disabled:visited,
+  a.disabled:hover,
+  a.disabled:active {
+    border-bottom-color: var(--stsv-common__border-color--disabled);
+    color: var(--stsv-common__color--disabled);
     cursor: not-allowed;
     pointer-events: none;
   }
 
+  /* ----- undecorated ----- */
   a.undecorated,
   a.undecorated:hover,
   a.undecorated:active,
   a.undecorated:visited {
-    border: none;
+    border-bottom-color: transparent;
   }
 </style>

package/Link.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        colorful?: boolean | undefined;
         href: string;
         disabled?: boolean | undefined;
         variant?: string | undefined;

package/List.svelte

@@ -1,16 +1,21 @@
-<script>import { createKeyborg } from "keyborg";
-import { createEventDispatcher, onMount, setContext } from "svelte";
+<script>import { createEventDispatcher, setContext } from "svelte";
 import { writable } from "svelte/store";
 import { LIST_CONTEXT_KEY } from "./List.constants";
+import { usingKeyboard } from "./stores/usingKeyboard";
+export let colorful = false;
 export let composed = false;
 export let disabled = false;
 export let horizontal = false;
 export let selectedValue = void 0;
 let listRef;
 let lastSelectedItemRef;
+const colorfulStore = writable(colorful);
 const disabledStore = writable(disabled);
 const horizontalStore = writable(horizontal);
 const selectedValueStore = writable(selectedValue);
+$: {
+  colorfulStore.set(colorful);
+}
 $: {
   disabledStore.set(disabled);
 }
@@ -43,11 +48,6 @@ export const scrollToSelectedItem = () => {
   const element = getSelectedItemElement();
   element?.scrollIntoView({ block: "nearest", inline: "nearest" });
 };
-let keyborg = createKeyborg(window);
-let usingKeyboard = keyborg.isNavigatingWithKeyboard();
-const keyborgHandler = (value) => {
-  usingKeyboard = value;
-};
 const isElementListItem = (candidate) => {
   return candidate && candidate.getAttribute("data-value") !== null && candidate.getAttribute("data-value") !== void 0 && candidate.getAttribute("role") === "listitem";
 };
@@ -113,12 +113,6 @@ export const selectLastItem = () => {
   }
   return false;
 };
-onMount(() => {
-  keyborg.subscribe(keyborgHandler);
-  return () => {
-    keyborg.unsubscribe(keyborgHandler);
-  };
-});
 const onClick = (event) => {
   if (!disabled) {
     let candidate = event.target;
@@ -177,6 +171,7 @@ const onKeydown = (event) => {
   }
 };
 setContext(LIST_CONTEXT_KEY, {
+  colorful: colorfulStore,
   disabled: disabledStore,
   selectedValue: selectedValueStore,
   horizontal: horizontalStore
@@ -197,7 +192,7 @@ A list of items where a single item can be selected.
   class:composed
   class:disabled
   class:horizontal
-  class:using-keyboard={usingKeyboard}
+  class:using-keyboard={$usingKeyboard}
   role="list"
   tabindex={0}
   on:blur
@@ -227,7 +222,7 @@ A list of items where a single item can be selected.
   on:mouseout
   on:mouseup
   on:scroll
-  on:wheel
+  on:wheel|passive
   on:paste
   {...$$restProps}
 >
@@ -238,13 +233,13 @@ A list of items where a single item can be selected.
 
 <style>
   .sterling-list {
-    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-input__border-color);
+    border-radius: var(--stsv-input__border-radius);
+    border-style: var(--stsv-input__border-style);
+    border-width: var(--stsv-input__border-width);
     box-sizing: border-box;
-    color: var(--stsv-Common__color);
+    color: var(--stsv-input__color);
     height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
@@ -263,17 +258,17 @@ A list of items where a single item can be selected.
   }
 
   .sterling-list:hover {
-    border-color: var(--stsv-Common__border-color--hover);
-    color: var(--stsv-Common__color--hover);
+    border-color: var(--stsv-input__border-color--hover);
+    color: var(--stsv-input__color--hover);
   }
 
   .sterling-list.using-keyboard:focus-within {
-    border-color: var(--stsv-Common__border-color--focus);
-    color: var(--stsv-Common__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-input__border-color--focus);
+    color: var(--stsv-input__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);
   }
 
   .sterling-list.composed,
@@ -303,7 +298,13 @@ A list of items where a single item can be selected.
   }
 
   .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
+    );
     content: '';
     bottom: 0;
     left: 0;

package/List.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        colorful?: boolean | undefined;
         composed?: boolean | undefined;
         disabled?: boolean | undefined;
         horizontal?: boolean | undefined;

package/List.types.d.ts

@@ -1,6 +1,7 @@
 import type { Readable, Writable } from 'svelte/store';
 export type ListContext = {
-    disabled: Readable<boolean>;
-    selectedValue: Writable<string | undefined>;
-    horizontal: Readable<boolean>;
+    colorful?: Readable<boolean>;
+    disabled?: Readable<boolean>;
+    selectedValue?: Writable<string | undefined>;
+    horizontal?: Readable<boolean>;
 };