@geoffcox/sterling-svelte 0.0.26 → 0.0.28

package/RgbColorSliders.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        red?: number | undefined;
+        green?: number | undefined;
+        blue?: number | undefined;
+        alpha?: number | undefined;
+        /** When true, applies colorful theme styles. */ colorful?: boolean | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RgbColorSlidersProps = typeof __propDef.props;
+export type RgbColorSlidersEvents = typeof __propDef.events;
+export type RgbColorSlidersSlots = typeof __propDef.slots;
+export default class RgbColorSliders extends SvelteComponentTyped<RgbColorSlidersProps, RgbColorSlidersEvents, RgbColorSlidersSlots> {
+}
+export {};

package/Select.svelte

@@ -4,8 +4,8 @@ import { idGenerator } from "./idGenerator";
 import List from "./List.svelte";
 import Popup from "./Popover.svelte";
 const popupId = idGenerator.nextId("Select-popup");
-export let composed = false;
 export let disabled = false;
+export let composed = false;
 export let open = false;
 export let selectedValue = void 0;
 let prevOpen = false;
@@ -178,7 +178,7 @@ const onListSelect = (event) => {
   on:mouseover
   on:mouseout
   on:mouseup
-  on:wheel
+  on:wheel|passive
   on:paste
   on:click={onSelectClick}
   on:click_outside={() => (open = false)}
@@ -199,7 +199,7 @@ const onListSelect = (event) => {
       <div class="chevron" />
     </slot>
   </div>
-  <Popup reference={selectRef} bind:open id={popupId}>
+  <Popup reference={selectRef} bind:open id={popupId} persistent>
     <div class="popup-content">
       <List
         bind:this={listRef}
@@ -221,12 +221,12 @@ const onListSelect = (event) => {
   .sterling-select {
     align-content: center;
     align-items: center;
-    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);
+    color: var(--stsv-input__color);
     cursor: pointer;
     display: grid;
     grid-template-columns: 1fr auto;
@@ -238,19 +238,19 @@ const onListSelect = (event) => {
   }
 
   .sterling-select:hover {
-    background-color: var(--stsv-Input__background-color--hover);
-    border-color: var(--stsv-Input__border-color--hover);
-    color: var(--stsv-Input__color--hover);
+    background-color: var(--stsv-input__background-color--hover);
+    border-color: var(--stsv-input__border-color--hover);
+    color: var(--stsv-input__color--hover);
   }
 
   .sterling-select: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-select.disabled {
@@ -259,7 +259,14 @@ const onListSelect = (event) => {
   }
 
   .sterling-select::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;
@@ -329,11 +336,11 @@ const onListSelect = (event) => {
   }
 
   .popup-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);
     padding: 0.25em;
     display: grid;
     grid-template-columns: 1fr;

package/Select.svelte.d.ts

@@ -2,8 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        composed?: boolean | undefined;
         disabled?: boolean | undefined;
+        composed?: boolean | undefined;
         open?: boolean | undefined;
         selectedValue?: string | undefined;
         blur?: (() => void) | undefined;

package/Slider.svelte

@@ -1,11 +1,12 @@
 <script>import { createEventDispatcher } from "svelte";
 import { round } from "lodash-es";
+export let colorful = false;
 export let composed = false;
 export let disabled = false;
 export let min = 0;
 export let max = 100;
-export let precision = 0;
-export let step = void 0;
+export let precision = void 0;
+export let step = 1;
 export let value = 0;
 export let vertical = false;
 let sliderRef;
@@ -22,52 +23,19 @@ const dispatch = createEventDispatcher();
 const raiseChange = (newValue) => {
   dispatch("change", { value: newValue });
 };
-const getPrecision = (value2) => {
-  if (value2 !== void 0 && Number !== null && !Number.isNaN(value2)) {
-    const text = value2.toString();
-    const position = text.indexOf(".");
-    if (position !== -1) {
-      const fraction = text.substring(position + 1);
-      if (fraction) {
-        return fraction.length;
-      }
-    }
-  }
-  return 0;
-};
-$:
-  highestPrecision = Math.max(
-    precision,
-    getPrecision(min),
-    getPrecision(max),
-    getPrecision(step)
-  );
 const setValue = (newValue) => {
-  value = round(Math.max(min, Math.min(max, newValue)), highestPrecision);
+  const clamped = Math.max(min, Math.min(max, newValue));
+  value = precision !== void 0 ? round(clamped, precision) : clamped;
 };
 $: {
   if (min > max) {
     min = max;
   }
 }
-$: {
-  if (value < min || value > max || value !== round(value, highestPrecision)) {
-    setValue(value);
-  }
-}
-$: {
-  if (step) {
-    let stepValue = Math.max(min, Math.min(value, max));
-    stepValue = Math.round(stepValue / step) * step + min;
-    if (stepValue !== value) {
-      setValue(stepValue);
-    }
-  }
-}
 $:
-  ratio = (value - min) / (max - min);
+  min, max, precision, setValue(value);
 $:
-  changeBy = step ? step : 1;
+  ratio = (value - min) / (max - min);
 const setValueByOffset = (offset) => {
   if (sliderSize > 0) {
     const positionRatio = Math.max(0, Math.min(1, offset / sliderSize));
@@ -113,13 +81,13 @@ const onKeyDown = (event) => {
     switch (event.code) {
       case "ArrowDown":
       case "ArrowLeft":
-        setValue(value - changeBy);
+        setValue(value - step);
         event.preventDefault();
         event.stopPropagation();
         return;
       case "ArrowRight":
       case "ArrowUp":
-        setValue(value + changeBy);
+        setValue(value + step);
         event.preventDefault();
         event.stopPropagation();
         return;
@@ -137,6 +105,7 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
   aria-valuenow={value}
   aria-valuemax={max}
   class="sterling-slider"
+  class:colorful
   class:composed
   class:disabled
   class:horizontal={!vertical}
@@ -177,7 +146,7 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
   on:pointerout
   on:pointerup
   on:pointerup={onPointerUp}
-  on:wheel
+  on:wheel|passive
   {...$$restProps}
 >
   <div
@@ -202,34 +171,106 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
+  .sterling-slider.horizontal {
+    height: 2em;
+  }
+
   .sterling-slider.vertical {
     height: 100%;
+    width: 2em;
   }
 
+  .sterling-slider.composed,
+  .sterling-slider.composed:hover,
+  .sterling-slider.composed.focus,
+  .sterling-slider.composed.disabled {
+    background: none;
+    border: none;
+    outline: none;
+  }
+
+  /* ----- container ----- */
+
   .container {
     position: relative;
   }
 
+  .sterling-slider.horizontal .container {
+    margin: 0 0.75em;
+  }
+
+  .sterling-slider.vertical .container {
+    margin: 0.75em 0;
+  }
+
+  /* ----- track ----- */
+
   .track {
     position: absolute;
-    background: var(--stsv-Display__background-color);
+    background: var(--stsv-common__background-color--secondary);
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
+  .sterling-slider.horizontal .track {
+    left: 0;
+    right: 0;
+    top: 50%;
+    height: 3px;
+    transform: translate(0, -50%);
+  }
+
+  .sterling-slider.vertical .track {
+    bottom: 0;
+    left: 50%;
+    top: 0;
+    transform: translate(-50%, 0);
+    width: 3px;
+  }
+
+  .sterling-slider:focus-visible {
+    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);
+  }
+
+  /* ----- fill ----- */
+
   .fill {
-    background: var(--stsv-Display__color);
+    background: var(--stsv-common__color);
     position: absolute;
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
+  .sterling-slider.horizontal .fill {
+    height: 3px;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+
+  .sterling-slider.vertical .fill {
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 0);
+    width: 3px;
+  }
+
+  .sterling-slider.colorful .fill {
+    background: var(--stsv-input--colorful__border-color--selected);
+    position: absolute;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
+
+  /* ----- thumb ----- */
+
   .thumb {
-    background-color: var(--stsv-Button__background-color);
-    border-color: var(--stsv-Button__border-color);
+    background-color: var(--stsv-button__background-color);
+    border-color: var(--stsv-button__border-color);
     border-radius: 10000px;
-    border-style: var(--stsv-Button__border-style);
-    border-width: var(--stsv-Button__border-width);
+    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: block;
     font: inherit;
@@ -244,89 +285,37 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
     width: 1.5em;
   }
 
-  /* ----- horizontal ----- */
-
-  .sterling-slider.horizontal {
-    height: 2em;
-  }
-
-  .sterling-slider.horizontal .container {
-    margin: 0 0.75em;
-  }
-
-  .sterling-slider.horizontal .track {
-    left: 0;
-    right: 0;
-    top: 50%;
-    height: 3px;
-    transform: translate(0, -50%);
-  }
-
-  .sterling-slider.horizontal .fill {
-    height: 3px;
-    top: 50%;
-    transform: translate(0, -50%);
-  }
-
   .sterling-slider.horizontal .thumb {
     top: 50%;
     transform: translate(-50%, -50%);
   }
 
-  /* ----- vertical ----- */
-
-  .sterling-slider.vertical {
-    width: 2em;
-  }
-  .sterling-slider.vertical .container {
-    margin: 0.75em 0;
-  }
-
-  .sterling-slider.vertical .track {
-    bottom: 0;
-    left: 50%;
-    top: 0;
-    transform: translate(-50%, 0);
-    width: 3px;
-  }
-
-  .sterling-slider.vertical .fill {
-    bottom: 0;
-    left: 50%;
-    transform: translate(-50%, 0);
-    width: 3px;
-  }
-
   .sterling-slider.vertical .thumb {
     left: 50%;
     transform: translate(-50%, 50%);
   }
 
-  /* ----- hover ----- */
-
   .thumb: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);
   }
 
-  /* ----- active ----- */
-
   .thumb: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);
   }
 
-  /* ----- focus ----- */
-  .sterling-slider:focus-visible {
-    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);
+  /* ----- thumb colorful ----- */
+
+  .sterling-slider.colorful .thumb {
+    background-color: var(--stsv-button--colorful__background-color);
+    border-color: var(--stsv-button--colorful__border-color);
+    color: var(--stsv-button--colorful__color);
   }
 
-  /* ----- disabled ----- */
+  /* ----- thumb disabled ----- */
 
   .sterling-slider.disabled .thumb {
     cursor: not-allowed;
@@ -334,7 +323,13 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
   }
 
   .sterling-slider .thumb::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) 3px,
+      var(--stsv-common__background-color2_disabled) 3px,
+      var(--stsv-common__background-color2_disabled) 6px
+    );
     bottom: 0;
     content: '';
     left: 0;
@@ -350,14 +345,7 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
     opacity: 1;
   }
 
-  .sterling-slider.composed,
-  .sterling-slider.composed:hover,
-  .sterling-slider.composed.focus,
-  .sterling-slider.composed.disabled {
-    background: none;
-    border: none;
-    outline: none;
-  }
+  /* ----- reduced motion ----- */
 
   @media (prefers-reduced-motion) {
     .sterling-slider,

package/Slider.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;
         min?: number | undefined;