@geoffcox/sterling-svelte 0.0.16 → 0.0.18

package/Select.svelte.d.ts

@@ -0,0 +1,53 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        composed?: boolean | undefined;
+        disabled?: boolean | undefined;
+        open?: boolean | undefined;
+        selectedValue?: string | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        copy: ClipboardEvent;
+        cut: ClipboardEvent;
+        dblclick: MouseEvent;
+        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;
+        select: CustomEvent<any>;
+        pending: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        value: {
+            disabled: boolean;
+            open: boolean;
+            selectedValue: string | undefined;
+        };
+        button: {
+            open: boolean;
+        };
+        default: {};
+    };
+};
+export type SelectProps = typeof __propDef.props;
+export type SelectEvents = typeof __propDef.events;
+export type SelectSlots = typeof __propDef.slots;
+export default class Select extends SvelteComponentTyped<SelectProps, SelectEvents, SelectSlots> {
+}
+export {};

package/{inputs/Slider.svelte → Slider.svelte}

@@ -1,7 +1,5 @@
 <script>import { createEventDispatcher } from "svelte";
 import { round } from "lodash-es";
-import { v4 as uuid } from "uuid";
-import Label from "../display/Label.svelte";
 export let value = 0;
 export let min = 0;
 export let max = 100;
@@ -9,7 +7,6 @@ export let step = void 0;
 export let precision = 0;
 export let vertical = false;
 export let disabled = false;
-const inputId = uuid();
 let sliderRef;
 const dispatch = createEventDispatcher();
 const raiseChange = (newValue) => {
@@ -124,59 +121,62 @@ const onKeyDown = (event) => {
 <!-- @component
 Slider lets the user chose a value within a min/max range by dragging a thumb button.
 -->
-<div class="sterling-slider" class:vertical>
-  {#if $$slots.label}
-    <Label {disabled} for={inputId}>
-      <slot name="label" />
-    </Label>
-  {/if}
+<div
+  aria-disabled={disabled}
+  aria-valuemin={0}
+  aria-valuenow={value}
+  aria-valuemax={max}
+  class="sterling-slider"
+  class:disabled
+  class:horizontal={!vertical}
+  class:vertical
+  role="slider"
+  tabindex={!disabled ? 0 : undefined}
+  on:blur
+  on:click
+  on:dblclick
+  on:focus
+  on:focusin
+  on:focusout
+  on:keydown
+  on:keydown={onKeyDown}
+  on:keypress
+  on:keyup
+  on:mousedown
+  on:mouseenter
+  on:mouseleave
+  on:mousemove
+  on:mouseover
+  on:mouseout
+  on:mouseup
+  on:pointercancel
+  on:pointerdown
+  on:pointerdown={onPointerDown}
+  on:pointerenter
+  on:pointerleave
+  on:pointermove
+  on:pointermove={onPointerMove}
+  on:pointerover
+  on:pointerout
+  on:pointerup
+  on:pointerup={onPointerUp}
+  on:wheel
+  {...$$restProps}
+>
   <div
-    class="slider"
-    class:disabled
-    class:horizontal={!vertical}
-    class:vertical
-    id={inputId}
-    role="slider"
-    aria-valuemin={0}
-    aria-valuenow={value}
-    aria-valuemax={max}
-    tabindex={!disabled ? 0 : undefined}
-    {...$$restProps}
-    on:keydown={onKeyDown}
-    on:pointerdown={onPointerDown}
-    on:pointermove={onPointerMove}
-    on:pointerup={onPointerUp}
+    class="container"
+    bind:this={sliderRef}
+    bind:clientWidth={sliderWidth}
+    bind:clientHeight={sliderHeight}
   >
-    <div
-      class="container"
-      bind:this={sliderRef}
-      bind:clientWidth={sliderWidth}
-      bind:clientHeight={sliderHeight}
-    >
-      <div class="track" />
-      <div class="fill" style={vertical ? `height: ${valueOffset}px` : `width: ${valueOffset}px`} />
-      <div class="thumb" style={vertical ? `bottom: ${valueOffset}px` : `left: ${valueOffset}px`} />
-    </div>
+    <div class="track" />
+    <div class="fill" style={vertical ? `height: ${valueOffset}px` : `width: ${valueOffset}px`} />
+    <div class="thumb" style={vertical ? `bottom: ${valueOffset}px` : `left: ${valueOffset}px`} />
   </div>
 </div>
 
 <style>
   .sterling-slider {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: auto 1fr;
-  }
-
-  .sterling-slider.vertical {
-    justify-items: center;
-    height: 100%;
-  }
-
-  .sterling-slider > :global(label) {
-    font-size: 0.7em;
-  }
-
-  .slider {
     box-sizing: border-box;
     outline: none;
     padding: 0;
@@ -185,30 +185,34 @@ 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.vertical {
+    height: 100%;
+  }
+
   .container {
     position: relative;
   }
 
   .track {
     position: absolute;
-    background: var(--Display__background-color);
+    background: var(--stsv-Display__background-color);
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
   .fill {
-    background: var(--Display__color);
+    background: var(--stsv-Display__color);
     position: absolute;
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
   .thumb {
-    background-color: var(--Button__background-color);
-    border-color: var(--Button__border-color);
+    background-color: var(--stsv-Button__background-color);
+    border-color: var(--stsv-Button__border-color);
     border-radius: 10000px;
-    border-style: var(--Button__border-style);
-    border-width: var(--Button__border-width);
+    border-style: var(--stsv-Button__border-style);
+    border-width: var(--stsv-Button__border-width);
     box-sizing: border-box;
-    color: var(--Button__color);
+    color: var(--stsv-Button__color);
     cursor: pointer;
     display: block;
     font: inherit;
@@ -224,15 +228,15 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
 
   /* ----- horizontal ----- */
 
-  .slider.horizontal {
+  .sterling-slider.horizontal {
     height: 2em;
   }
 
-  .slider.horizontal .container {
+  .sterling-slider.horizontal .container {
     margin: 0 0.75em;
   }
 
-  .slider.horizontal .track {
+  .sterling-slider.horizontal .track {
     left: 0;
     right: 0;
     top: 50%;
@@ -240,27 +244,27 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
     transform: translate(0, -50%);
   }
 
-  .slider.horizontal .fill {
+  .sterling-slider.horizontal .fill {
     height: 3px;
     top: 50%;
     transform: translate(0, -50%);
   }
 
-  .slider.horizontal .thumb {
+  .sterling-slider.horizontal .thumb {
     top: 50%;
     transform: translate(-50%, -50%);
   }
 
   /* ----- vertical ----- */
 
-  .slider.vertical {
+  .sterling-slider.vertical {
     width: 2em;
   }
-  .slider.vertical .container {
+  .sterling-slider.vertical .container {
     margin: 0.75em 0;
   }
 
-  .slider.vertical .track {
+  .sterling-slider.vertical .track {
     bottom: 0;
     left: 50%;
     top: 0;
@@ -268,14 +272,14 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
     width: 3px;
   }
 
-  .slider.vertical .fill {
+  .sterling-slider.vertical .fill {
     bottom: 0;
     left: 50%;
     transform: translate(-50%, 0);
     width: 3px;
   }
 
-  .slider.vertical .thumb {
+  .sterling-slider.vertical .thumb {
     left: 50%;
     transform: translate(-50%, 50%);
   }
@@ -283,45 +287,45 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
   /* ----- hover ----- */
 
   .thumb:hover {
-    background-color: var(--Button__background-color--hover);
-    border-color: var(--Button__border-color--hover);
-    color: var(--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(--Button__background-color--active);
-    border-color: var(--Button__border-color--active);
-    color: var(--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 ----- */
-  .slider:focus-visible {
-    outline-color: var(--Common__outline-color);
-    outline-offset: var(--Common__outline-offset);
-    outline-style: var(--Common__outline-style);
-    outline-width: var(--Common__outline-width);
+  .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);
   }
   /* ----- disabled ----- */
 
-  .slider.disabled .track {
-    background: var(--Common__background-color--disabled);
+  .sterling-slider.disabled .track {
+    background: var(--stsv-Common__background-color--disabled);
   }
 
-  .slider.disabled .fill {
-    background: var(--Common__color--disabled);
+  .sterling-slider.disabled .fill {
+    background: var(--stsv-Common__color--disabled);
   }
 
-  .slider.disabled .thumb {
-    background-color: var(--Common__background-color--disabled);
-    border-color: var(--Common__border-color--disabled);
-    color: var(--Common__color--disabled);
+  .sterling-slider.disabled .thumb {
+    background-color: var(--stsv-Common__background-color--disabled);
+    border-color: var(--stsv-Common__border-color--disabled);
+    color: var(--stsv-Common__color--disabled);
     cursor: not-allowed;
   }
 
   @media (prefers-reduced-motion) {
-    .slider,
+    .sterling-slider,
     .track,
     .fill,
     .thumb {

package/Slider.svelte.d.ts

@@ -0,0 +1,51 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: number | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        step?: number | undefined;
+        precision?: number | undefined;
+        vertical?: boolean | undefined;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        dblclick: MouseEvent;
+        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;
+        pointercancel: PointerEvent;
+        pointerdown: PointerEvent;
+        pointerenter: PointerEvent;
+        pointerleave: PointerEvent;
+        pointermove: PointerEvent;
+        pointerover: PointerEvent;
+        pointerout: PointerEvent;
+        pointerup: PointerEvent;
+        wheel: WheelEvent;
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SliderProps = typeof __propDef.props;
+export type SliderEvents = typeof __propDef.events;
+export type SliderSlots = typeof __propDef.slots;
+/** Slider lets the user chose a value within a min/max range by dragging a thumb button. */
+export default class Slider extends SvelteComponentTyped<SliderProps, SliderEvents, SliderSlots> {
+}
+export {};

package/{inputs/Switch.svelte → Switch.svelte}

@@ -1,5 +1,5 @@
 <script>import { v4 as uuid } from "uuid";
-import Label from "../display/Label.svelte";
+import Label from "./Label.svelte";
 export let checked = false;
 export let disabled = false;
 export let vertical = false;
@@ -18,6 +18,8 @@ $:
   ratio = vertical ? checked ? 0 : 1 : checked ? 1 : 0;
 $:
   valueOffset = (switchSize - thumbSize) * ratio;
+$:
+  console.log({ ratio, valueOffset });
 </script>
 
 <!--
@@ -26,6 +28,9 @@ $:
 -->
 <div class="sterling-switch" class:vertical class:disabled>
   <input
+    bind:checked
+    {disabled}
+    id={inputId}
     type="checkbox"
     on:blur
     on:click
@@ -47,9 +52,6 @@ $:
     on:mouseup
     on:toggle
     on:wheel
-    bind:checked
-    id={inputId}
-    {disabled}
     {...$$restProps}
   />
   <div class="off-label">
@@ -121,13 +123,13 @@ $:
   }
 
   .switch {
-    background-color: var(--Input__background-color);
-    border-color: var(--Input__border-color);
+    background-color: var(--stsv-Input__background-color);
+    border-color: var(--stsv-Input__border-color);
     border-radius: 10000px;
-    border-style: var(--Input__border-style);
-    border-width: var(--Input__border-width);
+    border-style: var(--stsv-Input__border-style);
+    border-width: var(--stsv-Input__border-width);
     box-sizing: border-box;
-    color: var(--Input__color);
+    color: var(--stsv-Input__color);
     font: inherit;
     pointer-events: none;
     position: relative;
@@ -136,25 +138,25 @@ $:
   }
 
   .sterling-switch:hover .switch {
-    background-color: var(--Input__background-color--hover);
-    border-color: var(--Input__border-color--hover);
-    color: var(--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(--Input__background-color--focus);
-    border-color: var(--Input__border-color--focus);
-    color: var(--Common__color--focux);
-    outline-color: var(--Common__outline-color);
-    outline-offset: var(--Common__outline-offset);
-    outline-style: var(--Common__outline-style);
-    outline-width: var(--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);
   }
 
   .sterling-switch.disabled .switch {
-    background-color: var(--Input__background-color--disabled);
-    border-color: var(--Input__border-color--disabled);
-    color: var(--Input__color--disabled);
+    background-color: var(--stsv-Common__background-color--disabled);
+    border-color: var(--stsv-Common__border-color--disabled);
+    color: var(--stsv-Common__color--disabled);
   }
 
   .sterling-switch:not(.vertical) .switch {
@@ -169,17 +171,17 @@ $:
 
   .off-label,
   .on-label {
-    padding-top: var(--Button__border-width);
+    padding-top: var(--stsv-Button__border-width);
   }
 
   .thumb {
-    background-color: var(--Button__background-color);
-    border-color: var(--Button__border-color);
+    background-color: var(--stsv-Button__background-color);
+    border-color: var(--stsv-Button__border-color);
     border-radius: 10000px;
-    border-style: var(--Button__border-style);
-    border-width: var(--Button__border-width);
+    border-style: var(--stsv-Button__border-style);
+    border-width: var(--stsv-Button__border-width);
     box-sizing: border-box;
-    color: var(--Button__color);
+    color: var(--stsv-Button__color);
     cursor: pointer;
     display: block;
     font: inherit;
@@ -190,30 +192,30 @@ $:
   }
 
   .sterling-switch:hover .thumb {
-    background-color: var(--Button__background-color--hover);
-    border-color: var(--Button__border-color--hover);
-    color: var(--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(--Button__background-color--active);
-    border-color: var(--Button__border-color--active);
-    color: var(--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);
   }
 
   .sterling-switch.disabled .thumb {
-    background-color: var(--Button__background-color--disabled);
-    border-color: var(--Button__border-color--disabled);
-    color: var(--Button__color--disabled);
+    background-color: var(--stsv-Common__background-color--disabled);
+    border-color: var(--stsv-Common__border-color--disabled);
+    color: var(--stsv-Common__color--disabled);
   }
 
   .sterling-switch:not(.vertical) .thumb {
-    top: calc(-1 * var(--Button__border-width));
-    transform: translateX(calc(var(--thumb-offset) - var(--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(--Button__border-width));
-    transform: translateY(calc(var(--thumb-offset) - var(--Button__border-width)));
+    left: calc(-1 * var(--stsv-Button__border-width));
+    transform: translateY(calc(var(--thumb-offset) - var(--stsv-Button__border-width)));
   }
 </style>