@geoffcox/sterling-svelte 0.0.25 → 0.0.27

package/Select.svelte

@@ -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,19 +199,21 @@ const onListSelect = (event) => {
       <div class="chevron" />
     </slot>
   </div>
-  <Popup reference={selectRef} bind:open id={popupId}>
-    <List
-      bind:this={listRef}
-      composed
-      {disabled}
-      selectedValue={pendingSelectedValue}
-      on:click={onListClick}
-      on:keydown={onListKeydown}
-      on:select={onListSelect}
-      tabIndex={open ? 0 : -1}
-    >
-      <slot />
-    </List>
+  <Popup reference={selectRef} bind:open id={popupId} persistent>
+    <div class="popup-content">
+      <List
+        bind:this={listRef}
+        composed
+        {disabled}
+        selectedValue={pendingSelectedValue}
+        on:click={onListClick}
+        on:keydown={onListKeydown}
+        on:select={onListSelect}
+        tabIndex={open ? 0 : -1}
+      >
+        <slot />
+      </List>
+    </div>
   </Popup>
 </div>
 
@@ -219,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;
@@ -236,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 {
@@ -257,7 +259,13 @@ const onListSelect = (event) => {
   }
 
   .sterling-select::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;
@@ -327,7 +335,17 @@ const onListSelect = (event) => {
   }
 
   .popup-content {
-    max-height: 15em;
+    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;
+    grid-template-rows: 1fr;
+    overflow: hidden;
+    max-height: 20em;
   }
 
   @media (prefers-reduced-motion) {

package/Slider.svelte

@@ -1,10 +1,11 @@
 <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 precision = void 0;
 export let step = void 0;
 export let value = 0;
 export let vertical = false;
@@ -22,48 +23,17 @@ 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);
-    }
-  }
-}
+$:
+  min, max, precision, setValue(value);
 $:
   ratio = (value - min) / (max - min);
 $:
@@ -137,6 +107,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 +148,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 +173,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 +287,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 +325,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(
+      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;
@@ -350,14 +347,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;

package/Switch.svelte

@@ -1,6 +1,7 @@
 <script>import Label from "./Label.svelte";
 import { idGenerator } from "./idGenerator";
 export let checked = false;
+export let colorful = false;
 export let disabled = false;
 export let vertical = false;
 export let onText = void 0;
@@ -38,7 +39,7 @@ export const focus = (options) => {
 	@component
 	A styled HTML input type=checkbox element.
 -->
-<div class="sterling-switch" class:vertical class:disabled>
+<div class="sterling-switch" class:colorful class:disabled class:vertical>
   <input
     bind:this={inputRef}
     bind:checked
@@ -69,7 +70,7 @@ export const focus = (options) => {
     on:mouseover
     on:mouseout
     on:mouseup
-    on:wheel
+    on:wheel|passive
     {...$$restProps}
   />
   {#if hasOffLabel}
@@ -144,6 +145,8 @@ export const focus = (options) => {
     grid-row: 1 / span 1;
   }
 
+  /* ----- input hidden ----- */
+
   input {
     font: inherit;
     margin: 0;
@@ -156,14 +159,16 @@ export const focus = (options) => {
     opacity: 0;
   }
 
+  /* ----- switch ----- */
+
   .switch {
-    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);
     border-radius: 10000px;
-    border-style: var(--stsv-Input__border-style);
-    border-width: var(--stsv-Input__border-width);
+    border-style: var(--stsv-input__border-style);
+    border-width: var(--stsv-input__border-width);
     box-sizing: border-box;
-    color: var(--stsv-Input__color);
+    color: var(--stsv-input__color);
     font: inherit;
     pointer-events: none;
     position: relative;
@@ -172,21 +177,23 @@ export const focus = (options) => {
   }
 
   .sterling-switch:hover .switch {
-    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);
   }
 
   input:focus-visible ~ .switch {
-    background-color: var(--stsv-Input__background-color--focus);
-    border-color: var(--stsv-Input__border-color--focus);
-    color: var(--stsv-Common__color--focux);
-    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-common__color--focux);
+    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);
   }
 
+  /* ----- switch vertical ----- */
+
   .sterling-switch:not(.vertical) .switch {
     width: 2em;
     height: 1.25em;
@@ -197,19 +204,43 @@ export const focus = (options) => {
     height: 2em;
   }
 
+  /* ----- labels ----- */
+
   .off-label,
   .on-label {
-    padding-top: var(--stsv-Button__border-width);
+    padding-top: var(--stsv-button__border-width);
+  }
+
+  /* ----- switch colorful ----- */
+
+  .sterling-switch.colorful .switch {
+    background-color: var(--stsv-input--colorful__background-color);
+    border-color: var(--stsv-input--colorful__border-color);
+    color: var(--stsv-input--colorful__color);
+  }
+
+  .sterling-switch.colorful:hover .switch {
+    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-switch.colorful input:focus-visible ~ .switch {
+    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);
   }
 
+  /* ----- 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);
     display: block;
     font: inherit;
     height: 1.25em;
@@ -219,19 +250,47 @@ export const focus = (options) => {
   }
 
   .sterling-switch:hover .thumb {
-    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);
   }
 
   .sterling-switch:active .thumb {
-    background-color: var(--stsv-Button__background-color--active);
-    border-color: var(--stsv-Button__border-color--active);
-    color: var(--stsv-Button__color--hover);
+    background-color: var(--stsv-button__background-color--active);
+    border-color: var(--stsv-button__border-color--active);
+    color: var(--stsv-button__color--hover);
+  }
+
+  /* ----- thumb colorful ----- */
+
+  .sterling-switch.colorful .thumb {
+    background-color: var(--stsv-button--colorful__background-color);
+    border-color: var(--stsv-button--colorful__border-color);
+    color: var(--stsv-button--colorful__color);
+  }
+
+  .sterling-switch.colorful:hover .thumb {
+    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);
   }
 
+  .sterling-switch.colorful:active .thumb {
+    background-color: var(--stsv-button--colorful__background-color--active);
+    border-color: var(--stsv-button--colorful__border-color--active);
+    color: var(--stsv-button--colorful__color--hover);
+  }
+
+  /* ----- thumb disabled ----- */
+
   .sterling-switch .thumb::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;
@@ -247,16 +306,20 @@ export const focus = (options) => {
     opacity: 1;
   }
 
+  /* ----- thumb vertical ----- */
+
   .sterling-switch:not(.vertical) .thumb {
-    top: calc(-1 * var(--stsv-Button__border-width));
-    transform: translateX(calc(var(--thumb-offset) - var(--stsv-Button__border-width)));
+    top: calc(-1 * var(--stsv-button__border-width));
+    transform: translateX(calc(var(--thumb-offset) - var(--stsv-button__border-width)));
   }
 
   .sterling-switch.vertical .thumb {
-    left: calc(-1 * var(--stsv-Button__border-width));
-    transform: translateY(calc(var(--thumb-offset) - var(--stsv-Button__border-width)));
+    left: calc(-1 * var(--stsv-button__border-width));
+    transform: translateY(calc(var(--thumb-offset) - var(--stsv-button__border-width)));
   }
 
+  /* ----- reduced motion ----- */
+
   @media (prefers-reduced-motion) {
     .switch,
     .thumb,

package/Switch.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         checked?: boolean | undefined;
+        colorful?: boolean | undefined;
         disabled?: boolean | undefined;
         vertical?: boolean | undefined;
         onText?: string | undefined;