@geoffcox/sterling-svelte 0.0.17 → 0.0.19

package/Select.svelte

@@ -2,10 +2,9 @@
 import { createEventDispatcher, onMount, tick } from "svelte";
 import { v4 as uuid } from "uuid";
 import { clickOutside } from "./actions/clickOutside";
-import Label from "./Label.svelte";
 import List from "./List.svelte";
-const inputId = uuid();
 const popupId = uuid();
+export let composed = false;
 export let disabled = false;
 export let open = false;
 export let selectedValue = void 0;
@@ -147,16 +146,13 @@ const onListSelect = (event) => {
 };
 </script>
 
-<!--
-@component
-A single item that can be selected from a popup list of items.
-  -->
 <div
   bind:this={selectRef}
   aria-controls={popupId}
   aria-haspopup="listbox"
   aria-expanded={open}
   class="sterling-select"
+  class:composed
   class:disabled
   role="combobox"
   tabindex="0"
@@ -186,26 +182,19 @@ A single item that can be selected from a popup list of items.
   on:keydown={onSelectKeydown}
   {...$$restProps}
 >
-  {#if $$slots.label}
-    <Label {disabled} for={inputId}>
-      <slot name="label" {disabled} {selectedValue} />
-    </Label>
-  {/if}
-  <div class="input" id={inputId}>
-    <div class="value">
-      <slot name="value" {disabled} {open} {selectedValue}>
-        {#if selectedValue}
-          {selectedValue}
-        {:else}
-          <span>&nbsp;</span>
-        {/if}
-      </slot>
-    </div>
-    <div class="button">
-      <slot name="button" {open}>
-        <div class="chevron" />
-      </slot>
-    </div>
+  <div class="value">
+    <slot name="value" {disabled} {open} {selectedValue}>
+      {#if selectedValue}
+        {selectedValue}
+      {:else}
+        <span>&nbsp;</span>
+      {/if}
+    </slot>
+  </div>
+  <div class="button">
+    <slot name="button" {open}>
+      <div class="chevron" />
+    </slot>
   </div>
   <div
     bind:this={popupRef}
@@ -232,6 +221,8 @@ A single item that can be selected from a popup list of items.
 
 <style>
   .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);
@@ -239,6 +230,10 @@ A single item that can be selected from a popup list of items.
     border-width: var(--stsv-Input__border-width);
     color: var(--stsv-Input__color);
     cursor: pointer;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto;
+    outline: none;
     padding: 0;
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
@@ -249,7 +244,7 @@ A single item that can be selected from a popup list of items.
     color: var(--stsv-Input__color--hover);
   }
 
-  .sterling-select:focus-visible {
+  .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);
@@ -267,21 +262,13 @@ A single item that can be selected from a popup list of items.
     outline: none;
   }
 
-  .sterling-select > :global(label) {
-    font-size: 0.7em;
-    margin: 0.5em 0 0 0.7em;
-  }
-
-  .sterling-select > :global(label):empty {
-    margin: 0;
-  }
-
-  .input {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    grid-template-rows: auto;
-    align-content: center;
-    align-items: center;
+  .sterling-select.composed,
+  .sterling-select.composed:hover,
+  .sterling-select.composed.focus,
+  .sterling-select.composed.disabled {
+    background: none;
+    border: none;
+    outline: none;
   }
 
   .value {
@@ -329,6 +316,7 @@ A single item that can be selected from a popup list of items.
     box-sizing: border-box;
     display: none;
     overflow: visible;
+    outline: none;
     position: absolute;
     box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
     width: fit-content;

package/Select.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        composed?: boolean | undefined;
         disabled?: boolean | undefined;
         open?: boolean | undefined;
         selectedValue?: string | undefined;
@@ -33,10 +34,6 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        label: {
-            disabled: boolean;
-            selectedValue: string | undefined;
-        };
         value: {
             disabled: boolean;
             open: boolean;
@@ -51,7 +48,6 @@ declare const __propDef: {
 export type SelectProps = typeof __propDef.props;
 export type SelectEvents = typeof __propDef.events;
 export type SelectSlots = typeof __propDef.slots;
-/** A single item that can be selected from a popup list of items. */
 export default class Select extends SvelteComponentTyped<SelectProps, SelectEvents, SelectSlots> {
 }
 export {};

package/Slider.svelte

@@ -1,15 +1,13 @@
 <script>import { createEventDispatcher } from "svelte";
 import { round } from "lodash-es";
-import { v4 as uuid } from "uuid";
-import Label from "./Label.svelte";
-export let value = 0;
+export let composed = false;
+export let disabled = false;
 export let min = 0;
 export let max = 100;
-export let step = void 0;
 export let precision = 0;
+export let step = void 0;
+export let value = 0;
 export let vertical = false;
-export let disabled = false;
-const inputId = uuid();
 let sliderRef;
 const dispatch = createEventDispatcher();
 const raiseChange = (newValue) => {
@@ -124,84 +122,63 @@ 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:composed
+  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}
-    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}
+    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;
@@ -210,6 +187,10 @@ 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;
   }
@@ -249,15 +230,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%;
@@ -265,27 +246,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;
@@ -293,14 +274,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%);
   }
@@ -322,31 +303,41 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
   }
 
   /* ----- focus ----- */
-  .slider:focus-visible {
+  .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 {
+  .sterling-slider.disabled .track {
     background: var(--stsv-Common__background-color--disabled);
   }
 
-  .slider.disabled .fill {
+  .sterling-slider.disabled .fill {
     background: var(--stsv-Common__color--disabled);
   }
 
-  .slider.disabled .thumb {
+  .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;
   }
 
+  .sterling-slider.composed,
+  .sterling-slider.composed:hover,
+  .sterling-slider.composed.focus,
+  .sterling-slider.composed.disabled {
+    background: none;
+    border: none;
+    outline: none;
+  }
+
   @media (prefers-reduced-motion) {
-    .slider,
+    .sterling-slider,
     .track,
     .fill,
     .thumb {

package/Slider.svelte.d.ts

@@ -2,13 +2,14 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        value?: number | undefined;
+        composed?: boolean | undefined;
+        disabled?: boolean | undefined;
         min?: number | undefined;
         max?: number | undefined;
-        step?: number | undefined;
         precision?: number | undefined;
+        step?: number | undefined;
+        value?: number | undefined;
         vertical?: boolean | undefined;
-        disabled?: boolean | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -40,9 +41,7 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        label: {};
-    };
+    slots: {};
 };
 export type SliderProps = typeof __propDef.props;
 export type SliderEvents = typeof __propDef.events;

package/Switch.svelte

@@ -3,8 +3,8 @@ import Label from "./Label.svelte";
 export let checked = false;
 export let disabled = false;
 export let vertical = false;
-export let onText = "";
-export let offText = "";
+export let onText = void 0;
+export let offText = void 0;
 const inputId = uuid();
 let switchWidth = 0;
 let switchHeight = 0;
@@ -18,6 +18,10 @@ $:
   ratio = vertical ? checked ? 0 : 1 : checked ? 1 : 0;
 $:
   valueOffset = (switchSize - thumbSize) * ratio;
+$:
+  hasOffLabel = $$slots.offLabel || offText !== void 0 && offText.length > 0;
+$:
+  hasOnLabel = $$slots.onLabel || onText !== void 0 && onText.length > 0;
 </script>
 
 <!--
@@ -26,6 +30,9 @@ $:
 -->
 <div class="sterling-switch" class:vertical class:disabled>
   <input
+    bind:checked
+    {disabled}
+    id={inputId}
     type="checkbox"
     on:blur
     on:click
@@ -47,18 +54,17 @@ $:
     on:mouseup
     on:toggle
     on:wheel
-    bind:checked
-    id={inputId}
-    {disabled}
     {...$$restProps}
   />
-  <div class="off-label">
-    <slot name="off-label" {checked} {disabled} {inputId} {offText} {vertical}>
-      {#if offText}
-        <Label for={inputId} {disabled}>{offText}</Label>
-      {/if}
-    </slot>
-  </div>
+  {#if hasOffLabel}
+    <div class="off-label">
+      <slot name="offLabel" {checked} {disabled} {inputId} {offText} {vertical}>
+        {#if offText}
+          <Label for={inputId} {disabled}>{offText}</Label>
+        {/if}
+      </slot>
+    </div>
+  {/if}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div class="switch" bind:offsetWidth={switchWidth} bind:offsetHeight={switchHeight}>
     <div
@@ -68,13 +74,15 @@ $:
       style={`--thumb-offset: ${valueOffset}px`}
     />
   </div>
-  <div class="on-label">
-    <slot name="on-label" {checked} {disabled} {inputId} {onText} {vertical}>
-      {#if onText}
-        <Label for={inputId} {disabled}>{onText}</Label>
-      {/if}
-    </slot>
-  </div>
+  {#if hasOnLabel}
+    <div class="on-label">
+      <slot name="onLabel" {checked} {disabled} {inputId} {onText} {vertical}>
+        {#if onText}
+          <Label for={inputId} {disabled}>{onText}</Label>
+        {/if}
+      </slot>
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -87,7 +95,7 @@ $:
   .sterling-switch:not(.vertical) {
     align-items: center;
     column-gap: 0.5em;
-    grid-template-columns: auto auto auto;
+    grid-template-columns: auto 1fr auto;
     grid-template-rows: auto;
     justify-items: stretch;
   }
@@ -209,11 +217,11 @@ $:
 
   .sterling-switch:not(.vertical) .thumb {
     top: calc(-1 * var(--stsv-Button__border-width));
-    transform: translateX(calc(var(--stsv-thumb-offset) - 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(--stsv-thumb-offset) - var(--stsv-Button__border-width)));
+    transform: translateY(calc(var(--thumb-offset) - var(--stsv-Button__border-width)));
   }
 </style>

package/Switch.svelte.d.ts

@@ -33,18 +33,18 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        'off-label': {
+        offLabel: {
             checked: boolean;
             disabled: boolean;
             inputId: string;
-            offText: string;
+            offText: string | undefined;
             vertical: boolean;
         };
-        'on-label': {
+        onLabel: {
             checked: boolean;
             disabled: boolean;
             inputId: string;
-            onText: string;
+            onText: string | undefined;
             vertical: boolean;
         };
     };