@geoffcox/sterling-svelte 0.0.9 → 0.0.11

package/inputs/Select.svelte

@@ -1,8 +1,10 @@
 <script>import { createEventDispatcher, onMount, tick } from "svelte";
-import { v4 as uuidv4 } from "uuid";
+import { v4 as uuid } from "uuid";
 import { computePosition, flip, offset, shift, autoUpdate } from "@floating-ui/dom";
 import { clickOutside } from "../clickOutside";
+import Label from "../display/Label.svelte";
 import List from "../lists/List.svelte";
+import Input from "./Input.svelte";
 export let disabled = false;
 export let items = [];
 export let open = false;
@@ -11,12 +13,13 @@ export let selectedItem = void 0;
 $: {
   selectedItem = items[selectedIndex];
 }
+const inputId = uuid();
 let prevOpen = false;
 let pendingSelectedIndex = selectedIndex;
 let selectRef;
 let popupRef;
 let listRef;
-const popupId = uuidv4();
+const popupId = uuid();
 let popupPosition = {
   x: void 0,
   y: void 0
@@ -139,184 +142,177 @@ const onPendingItemSelected = (event) => {
 A single item that can be selected from a popup list of items.
   -->
 <div
-	bind:this={selectRef}
-	use:clickOutside
-	aria-controls={popupId}
-	aria-haspopup="listbox"
-	aria-expanded={open}
-	class="sterling-select"
-	class:disabled
-	role="combobox"
-	tabindex="0"
-	on:click_outside={() => (open = false)}
-	on:click={onSelectClick}
-	on:blur
-	on:click
-	on:copy
-	on:cut
-	on:dblclick
-	on:focus
-	on:focusin
-	on:focusout
-	on:keydown={onSelectKeydown}
-	on:keydown
-	on:keypress
-	on:keyup
-	on:mousedown
-	on:mouseenter
-	on:mouseleave
-	on:mousemove
-	on:mouseover
-	on:mouseout
-	on:mouseup
-	on:wheel
-	on:paste
-	{...$$restProps}
+  bind:this={selectRef}
+  use:clickOutside
+  aria-controls={popupId}
+  aria-haspopup="listbox"
+  aria-expanded={open}
+  class="sterling-select"
+  class:disabled
+  role="combobox"
+  tabindex="0"
+  on:click_outside={() => (open = false)}
+  on:click={onSelectClick}
+  on:blur
+  on:click
+  on:copy
+  on:cut
+  on:dblclick
+  on:focus
+  on:focusin
+  on:focusout
+  on:keydown={onSelectKeydown}
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mousedown
+  on:mouseenter
+  on:mouseleave
+  on:mousemove
+  on:mouseover
+  on:mouseout
+  on:mouseup
+  on:wheel
+  on:paste
+  {...$$restProps}
 >
-	<!-- svelte-ignore a11y-label-has-associated-control -->
-	<label class="sterling-select-label">
-		{#if $$slots.label}
-			<div class="label-content" class:disabled>
-				<slot name="label" />
-			</div>
-		{/if}
-		<div class="input">
-			<div class="value">
-				<slot name="value">
-					{items[selectedIndex]}
-				</slot>
-			</div>
-			<div class="button">
-				<slot name="button" {open}>
-					<div class="chevron" />
-				</slot>
-			</div>
-		</div>
-	</label>
-	<div
-		bind:this={popupRef}
-		class="popup"
-		class:open
-		id={popupId}
-		style="left:{popupPosition.x}px; top:{popupPosition.y}px"
-	>
-		<div class="popup-content">
-			<slot name="list">
-				{#if $$slots.default === true}
-					<List
-						bind:this={listRef}
-						selectedIndex={pendingSelectedIndex}
-						{items}
-						{disabled}
-						let:disabled
-						let:index
-						let:item
-						let:selected
-						on:click={onListClick}
-						on:keydown={onListKeydown}
-						on:itemSelected={onPendingItemSelected}
-					>
-						<slot {disabled} {index} {item} {selected} />
-					</List>
-				{:else}
-					<List
-						bind:this={listRef}
-						selectedIndex={pendingSelectedIndex}
-						{items}
-						{disabled}
-						let:disabled
-						let:index
-						let:item
-						let:selected
-						on:click={onListClick}
-						on:keydown={onListKeydown}
-						on:itemSelected={onPendingItemSelected}
-					/>
-				{/if}
-			</slot>
-		</div>
-	</div>
+  {#if $$slots.label}
+    <div class="label">
+      <Label {disabled} for={inputId}>
+        <slot name="label" />
+      </Label>
+    </div>
+  {/if}
+  <div class="input" id={inputId}>
+    <div class="value">
+      <slot name="value">
+        {items[selectedIndex]}
+      </slot>
+    </div>
+    <div class="button">
+      <slot name="button" {open}>
+        <div class="chevron" />
+      </slot>
+    </div>
+  </div>
+  <div
+    bind:this={popupRef}
+    class="popup"
+    class:open
+    id={popupId}
+    style="left:{popupPosition.x}px; top:{popupPosition.y}px"
+  >
+    <div class="popup-content">
+      <slot name="list">
+        {#if $$slots.default === true}
+          <List
+            bind:this={listRef}
+            selectedIndex={pendingSelectedIndex}
+            {items}
+            {disabled}
+            let:disabled
+            let:index
+            let:item
+            let:selected
+            on:click={onListClick}
+            on:keydown={onListKeydown}
+            on:itemSelected={onPendingItemSelected}
+          >
+            <slot {disabled} {index} {item} {selected} />
+          </List>
+        {:else}
+          <List
+            bind:this={listRef}
+            selectedIndex={pendingSelectedIndex}
+            {items}
+            {disabled}
+            let:disabled
+            let:index
+            let:item
+            let:selected
+            on:click={onListClick}
+            on:keydown={onListKeydown}
+            on:itemSelected={onPendingItemSelected}
+          />
+        {/if}
+      </slot>
+    </div>
+  </div>
 </div>
 
 <style>
-	.sterling-select {
-		background-color: var(--Input__background-color);
-		border-color: var(--Input__border-color);
-		border-radius: var(--Input__border-radius);
-		border-style: var(--Input__border-style);
-		border-width: var(--Input__border-width);
-		color: var(--Input__color);
-		padding: 0;
-		transition: background-color 250ms, color 250ms, border-color 250ms;
-	}
-
-	.sterling-select:hover {
-		background-color: var(--Input__background-color--hover);
-		border-color: var(--Input__border-color--hover);
-		color: var(--Input__color--hover);
-	}
+  .sterling-select {
+    background-color: var(--Input__background-color);
+    border-color: var(--Input__border-color);
+    border-radius: var(--Input__border-radius);
+    border-style: var(--Input__border-style);
+    border-width: var(--Input__border-width);
+    color: var(--Input__color);
+    padding: 0;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
 
-	.sterling-select:focus-within {
-		background-color: var(--Input__background-color--focus);
-		border-color: var(--Input__border-color--focus);
-		color: var(--Input__color--focus);
-		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-select:hover {
+    background-color: var(--Input__background-color--hover);
+    border-color: var(--Input__border-color--hover);
+    color: var(--Input__color--hover);
+  }
 
-	.sterling-select.disabled {
-		background-color: var(--Input__background-color--disabled);
-		border-color: var(---Input__border-color--disabled);
-		color: var(--Input__color--disabled);
-		cursor: not-allowed;
-		outline: none;
-	}
+  .sterling-select:focus-within {
+    background-color: var(--Input__background-color--focus);
+    border-color: var(--Input__border-color--focus);
+    color: var(--Input__color--focus);
+    outline-color: var(--Common__outline-color);
+    outline-offset: var(--Common__outline-offset);
+    outline-style: var(--Common__outline-style);
+    outline-width: var(--Common__outline-width);
+  }
 
-	.label-content {
-		font-size: 0.7em;
-		margin: 0.5em 0.7em 0 0.7em;
-		color: var(--Display__color--subtle);
-		transition: background-color 250ms, color 250ms, border-color 250ms;
-	}
+  .sterling-select.disabled {
+    background-color: var(--Input__background-color--disabled);
+    border-color: var(---Input__border-color--disabled);
+    color: var(--Input__color--disabled);
+    cursor: not-allowed;
+    outline: none;
+  }
 
-	.label-content.disabled {
-		color: var(--Display__color--disabled);
-	}
+  .label {
+    font-size: 0.7em;
+    margin: 0.5em 0.7em 0 0.7em;
+  }
 
-	.input {
-		display: grid;
-		grid-template-columns: 1fr auto;
-		grid-template-rows: auto;
-		align-content: center;
-		align-items: center;
-	}
+  .input {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto;
+    align-content: center;
+    align-items: center;
+  }
 
-	.value {
-		padding: 0.5em;
-	}
+  .value {
+    padding: 0.5em;
+  }
 
-	.chevron {
-		display: block;
-		position: relative;
-		border: none;
-		background: none;
-		margin: 0;
-		height: 100%;
-		width: 32px;
-	}
+  .chevron {
+    display: block;
+    position: relative;
+    border: none;
+    background: none;
+    margin: 0;
+    height: 100%;
+    width: 32px;
+  }
 
-	.chevron::after {
-		position: absolute;
-		content: '';
-		top: 50%;
-		left: 50%;
-		width: 7px;
-		height: 7px;
-		border-right: 3px solid currentColor;
-		border-top: 3px solid currentColor;
-		/* 
+  .chevron::after {
+    position: absolute;
+    content: '';
+    top: 50%;
+    left: 50%;
+    width: 7px;
+    height: 7px;
+    border-right: 3px solid currentColor;
+    border-top: 3px solid currentColor;
+    /* 
 			The chevron is a right triangle, rotated to face down.
 			It should be moved up so it is centered vertically after rotation.
 			The amount to move is the hypotenuse of the right triangle of the chevron.
@@ -329,35 +325,34 @@ A single item that can be selected from a popup list of items.
 			a = sqrt(0.5)
 			a = 0.707
 		*/
-		transform: translate(-50%, calc(-50% / 0.707)) rotate(135deg);
-		transform-origin: 50% 50%;
-	}
+    transform: translate(-50%, calc(-50% / 0.707)) rotate(135deg);
+    transform-origin: 50% 50%;
+  }
 
-	.popup {
-		box-sizing: border-box;
-		display: none;
-		overflow: hidden;
-		position: absolute;
-		box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
-		width: fit-content;
-		height: fit-content;
-		z-index: 1;
-	}
+  .popup {
+    box-sizing: border-box;
+    display: none;
+    overflow: hidden;
+    position: absolute;
+    box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
+    width: fit-content;
+    height: fit-content;
+    z-index: 1;
+  }
 
-	.popup.open {
-		display: grid;
-		grid-template-columns: 1fr;
-		grid-template-rows: 1fr;
-	}
+  .popup.open {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+  }
 
-	.popup-content {
-		max-height: 15em;
-	}
+  .popup-content {
+    max-height: 15em;
+  }
 
-	@media (prefers-reduced-motion) {
-		.sterling-select,
-		.label-content {
-			transition: none;
-		}
-	}
+  @media (prefers-reduced-motion) {
+    .sterling-select {
+      transition: none;
+    }
+  }
 </style>

package/inputs/Slider.svelte

@@ -1,5 +1,7 @@
-<script>import { round } from "lodash-es";
-import { createEventDispatcher } from "svelte";
+<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;
@@ -7,6 +9,7 @@ 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) => {
@@ -121,51 +124,20 @@ const onKeyDown = (event) => {
 <!-- @component
 Slider lets the user chose a value within a min/max range by dragging a thumb button.
 -->
-{#if $$slots.label}
-  <label class="sterling-slider-label" class:vertical>
-    <div class="label-content" class:disabled>
-      <slot name="label" />
+<div class="sterling-slider" class:vertical>
+  {#if $$slots.label}
+    <div class="label">
+      <Label {disabled} for={inputId}>
+        <slot name="label" />
+      </Label>
     </div>
-    <div
-      class="sterling-slider labeled"
-      class:disabled
-      class:horizontal={!vertical}
-      class:vertical
-      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}
-    >
-      <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>
-  </label>
-{:else}
+  {/if}
   <div
-    class="sterling-slider"
+    class="slider"
     class:disabled
     class:horizontal={!vertical}
     class:vertical
+    id={inputId}
     role="slider"
     aria-valuemin={0}
     aria-valuenow={value}
@@ -188,41 +160,31 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
       <div class="thumb" style={vertical ? `bottom: ${valueOffset}px` : `left: ${valueOffset}px`} />
     </div>
   </div>
-{/if}
+</div>
 
 <style>
-  .sterling-slider-label {
+  .sterling-slider {
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: auto 1fr;
   }
 
-  .sterling-slider-label.vertical {
+  .sterling-slider.vertical {
     justify-items: center;
     height: 100%;
   }
 
-  .label-content {
+  .label {
     font-size: 0.7em;
-    color: var(--Display__color--subtle);
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-  }
-
-  .label-content.disabled {
-    color: var(--Display__color--disabled);
   }
 
-  .sterling-slider {
+  .slider {
     box-sizing: border-box;
     outline: none;
     padding: 0;
     overflow: visible;
     display: grid;
-    height: 100%;
-  }
-
-  .sterling-slider.labeled {
-    height: unset;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
   .container {
@@ -232,11 +194,13 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
   .track {
     position: absolute;
     background: var(--Display__background-color);
+    transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
   .fill {
     background: var(--Display__color);
     position: absolute;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
   .thumb {
@@ -262,15 +226,15 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
 
   /* ----- horizontal ----- */
 
-  .sterling-slider.horizontal {
+  .slider.horizontal {
     height: 2em;
   }
 
-  .sterling-slider.horizontal .container {
+  .slider.horizontal .container {
     margin: 0 0.75em;
   }
 
-  .sterling-slider.horizontal .track {
+  .slider.horizontal .track {
     left: 0;
     right: 0;
     top: 50%;
@@ -278,27 +242,27 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
     transform: translate(0, -50%);
   }
 
-  .sterling-slider.horizontal .fill {
+  .slider.horizontal .fill {
     height: 3px;
     top: 50%;
     transform: translate(0, -50%);
   }
 
-  .sterling-slider.horizontal .thumb {
+  .slider.horizontal .thumb {
     top: 50%;
     transform: translate(-50%, -50%);
   }
 
   /* ----- vertical ----- */
 
-  .sterling-slider.vertical {
+  .slider.vertical {
     width: 2em;
   }
-  .sterling-slider.vertical .container {
+  .slider.vertical .container {
     margin: 0.75em 0;
   }
 
-  .sterling-slider.vertical .track {
+  .slider.vertical .track {
     bottom: 0;
     left: 50%;
     top: 0;
@@ -306,14 +270,14 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
     width: 3px;
   }
 
-  .sterling-slider.vertical .fill {
+  .slider.vertical .fill {
     bottom: 0;
     left: 50%;
     transform: translate(-50%, 0);
     width: 3px;
   }
 
-  .sterling-slider.vertical .thumb {
+  .slider.vertical .thumb {
     left: 50%;
     transform: translate(-50%, 50%);
   }
@@ -335,7 +299,7 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
   }
 
   /* ----- focus ----- */
-  .sterling-slider:focus-visible {
+  .slider:focus-visible {
     outline-color: var(--Common__outline-color);
     outline-offset: var(--Common__outline-offset);
     outline-style: var(--Common__outline-style);
@@ -343,15 +307,15 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
   }
   /* ----- disabled ----- */
 
-  .sterling-slider.disabled .track {
+  .slider.disabled .track {
     background: var(--Common__background-color--disabled);
   }
 
-  .sterling-slider.disabled .fill {
+  .slider.disabled .fill {
     background: var(--Common__color--disabled);
   }
 
-  .sterling-slider.disabled .thumb {
+  .slider.disabled .thumb {
     background-color: var(--Common__background-color--disabled);
     border-color: var(--Common__border-color--disabled);
     color: var(--Common__color--disabled);
@@ -359,8 +323,10 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
   }
 
   @media (prefers-reduced-motion) {
-    .thumb,
-    .label-content {
+    .slider,
+    .track,
+    .fill,
+    .thumb {
       transition: none;
     }
   }