@geoffcox/sterling-svelte 0.0.16 → 0.0.18

package/{display/Progress.svelte → Progress.svelte}

@@ -1,12 +1,9 @@
-<script>import { v4 as uuid } from "uuid";
-import Label from "../display/Label.svelte";
-export let value = 0;
+<script>export let value = 0;
 export let max = 100;
 export let percent = 0;
 export let vertical = false;
 export let colorful = "none";
 export let disabled = false;
-const inputId = uuid();
 let clientHeight;
 let clientWidth;
 $:
@@ -25,7 +22,7 @@ $:
 $:
   indicatorStyle = vertical ? `height: ${percentHeight}px` : `width: ${percentWidth}px`;
 $:
-  indicatorColor = colorful === "auto" ? percent === 100 ? "success" : "progress" : colorful;
+  indicatorColor = colorful === "auto" ? percent === 100 ? "success" : "info" : colorful;
 </script>
 
 <!--
@@ -39,6 +36,7 @@ $:
   class="sterling-progress"
   class:disabled
   class:vertical
+  role="progressbar"
   on:click
   on:dblclick
   on:focus
@@ -53,22 +51,15 @@ $:
   on:wheel
   {...$$restProps}
 >
-  {#if $$slots.label}
-    <Label {disabled} for={inputId}>
-      <slot name="label" />
-    </Label>
-  {/if}
-  <div class="progress-bar" id={inputId}>
-    <div class="container" bind:clientWidth bind:clientHeight>
-      <div
-        class="indicator"
-        class:progress={indicatorColor === 'progress'}
-        class:success={indicatorColor === 'success'}
-        class:warning={indicatorColor === 'warning'}
-        class:error={indicatorColor === 'error'}
-        style={indicatorStyle}
-      />
-    </div>
+  <div class="container" bind:clientWidth bind:clientHeight>
+    <div
+      class="indicator"
+      class:info={indicatorColor === 'info'}
+      class:success={indicatorColor === 'success'}
+      class:warning={indicatorColor === 'warning'}
+      class:error={indicatorColor === 'error'}
+      style={indicatorStyle}
+    />
   </div>
 </div>
 
@@ -78,27 +69,15 @@ $:
     flex-direction: column;
     align-content: flex-start;
     align-items: flex-start;
-  }
-
-  .sterling-progress > :global(label) {
-    font-size: 0.7em;
-    margin: 0.5em 0.7em;
-  }
-
-  .sterling-progress > :global(label):empty {
-    margin: 0;
-  }
-
-  .progress-bar {
     display: block;
-    background: var(--Common__background-color);
+    background: var(--stsv-Common__background-color);
     box-sizing: border-box;
     height: 1em;
     padding: 0.2em;
-    border-width: var(--Common__border-width);
-    border-style: var(--Common__border-style);
-    border-color: var(--Common__border-color);
-    border-radius: var(--Common__border-radius);
+    border-width: var(--stsv-Common__border-width);
+    border-style: var(--stsv-Common__border-style);
+    border-color: var(--stsv-Common__border-color);
+    border-radius: var(--stsv-Common__border-radius);
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
@@ -111,7 +90,7 @@ $:
   }
 
   .indicator {
-    background-color: var(--Display__color);
+    background-color: var(--stsv-Display__border-color);
     box-sizing: border-box;
     height: 100%;
     min-height: 1px;
@@ -123,9 +102,6 @@ $:
   .sterling-progress.vertical {
     align-items: center;
     align-content: center;
-  }
-
-  .sterling-progress.vertical .progress-bar {
     height: unset;
     width: 1em;
   }
@@ -146,35 +122,35 @@ $:
 
   /* ----- Colorful ----- */
 
-  .indicator.progress {
-    background-color: var(--Display__color--progress);
+  .indicator.info {
+    background-color: var(--stsv-Info__border-color);
   }
 
   .indicator.success {
-    background-color: var(--Display__color--success);
+    background-color: var(--stsv-Success__border-color);
   }
 
   .indicator.warning {
-    background-color: var(--Display__color--warning);
+    background-color: var(--stsv-Warning__border-color);
   }
 
   .indicator.error {
-    background-color: var(--Display__color--error);
+    background-color: var(--stsv-Error__border-color);
   }
 
   /* ----- Disabled ----- */
 
-  .sterling-progress.disabled .progress-bar {
-    background: var(--Common__background-color--disabled);
-    border-color: var(--Common__border-color--disabled);
+  .sterling-progress.disabled {
+    background: var(--stsv-Common__background-color--disabled);
+    border-color: var(--stsv-Common__border-color--disabled);
   }
 
   .sterling-progress.disabled .indicator {
-    background-color: var(--Display__color--disabled);
+    background-color: var(--stsv-Display__color--disabled);
   }
 
   @media (prefers-reduced-motion) {
-    .progress-bar,
+    .sterling-progress,
     .indicator {
       transition: none;
     }

package/{display/Progress.svelte.d.ts → Progress.svelte.d.ts}

@@ -26,9 +26,7 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        label: {};
-    };
+    slots: {};
 };
 export type ProgressProps = typeof __propDef.props;
 export type ProgressEvents = typeof __propDef.events;

package/Progress.types.d.ts

@@ -0,0 +1 @@
+export type ProgressColorful = 'none' | 'auto' | 'info' | 'success' | 'warning' | 'error';

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

@@ -1,27 +1,32 @@
 <script>import { onMount } from "svelte";
 import { v4 as uuid } from "uuid";
-import Label from "../display/Label.svelte";
+import Label from "./Label.svelte";
 export let checked = false;
-export let group = void 0;
 export let disabled = false;
-const inputId = uuid();
+export let group = void 0;
+export let id = void 0;
+let mounted = false;
+$: {
+  if ($$slots.default && id === void 0) {
+    id = uuid();
+  }
+}
+$: {
+  if (mounted) {
+    checked = group === $$restProps.value;
+  }
+}
 const onChange = (e) => {
   if (e.currentTarget.checked) {
     group = $$restProps.value;
   }
 };
-let mounted = false;
 onMount(() => {
   if (checked) {
     group = $$restProps.value;
   }
   mounted = true;
 });
-$: {
-  if (mounted) {
-    checked = group === $$restProps.value;
-  }
-}
 </script>
 
 <!--
@@ -31,6 +36,9 @@ $: {
 <div class="sterling-radio">
   <div class="container">
     <input
+      checked={group === $$restProps.value}
+      {disabled}
+      {id}
       type="radio"
       on:blur
       on:click
@@ -53,17 +61,14 @@ $: {
       on:mouseup
       on:toggle
       on:wheel
-      checked={group === $$restProps.value}
       {...$$restProps}
-      {disabled}
-      id={inputId}
     />
     <div class="indicator" />
   </div>
-  {#if $$slots.label}
+  {#if $$slots.default}
     <div class="label">
-      <Label {disabled} for={inputId}>
-        <slot name="label" />
+      <Label {disabled} for={id}>
+        <slot {checked} {disabled} {group} />
       </Label>
     </div>
   {/if}
@@ -114,10 +119,10 @@ $: {
 		and there is not a parent CSS selector.
 	*/
   .indicator {
-    background-color: var(--Input__background-color);
-    border-color: var(--Input__border-color);
-    border-style: var(--Input__border-style);
-    border-width: var(--Input__border-width);
+    background-color: var(--stsv-Input__background-color);
+    border-color: var(--stsv-Input__border-color);
+    border-style: var(--stsv-Input__border-style);
+    border-width: var(--stsv-Input__border-width);
     border-radius: 10000px;
     box-sizing: border-box;
     display: inline-block;
@@ -129,20 +134,20 @@ $: {
   }
 
   input:checked + .indicator {
-    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);
   }
 
   input:focus-visible + .indicator {
-    outline-color: var(--Common__outline-color);
-    outline-offset: var(--Common__outline-offset);
-    outline-style: var(--Common__outline-style);
-    outline-width: var(--Common__outline-width);
+    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);
   }
 
   input:disabled + .indicator {
-    background-color: var(--Input__background-color--disabled);
-    border-color: var(--Input__border-color--disabled);
+    background-color: var(--stsv-Common__background-color--disabled);
+    border-color: var(--stsv-Common__border-color--disabled);
   }
 
   .indicator::after {
@@ -159,11 +164,11 @@ $: {
   }
 
   input:checked + .indicator::after {
-    background-color: var(--Input__color);
+    background-color: var(--stsv-Input__color);
   }
 
   input:checked:disabled + .indicator::after {
-    background-color: var(--Input__color--disabled);
+    background-color: var(--stsv-Common__color--disabled);
   }
 
   .label {

package/{inputs/Radio.svelte.d.ts → Radio.svelte.d.ts}

@@ -3,8 +3,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         checked?: boolean | undefined;
-        group?: any | undefined | null;
         disabled?: boolean | undefined;
+        group?: any | undefined | null;
+        id?: string | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -31,7 +32,11 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        label: {};
+        default: {
+            checked: boolean;
+            disabled: boolean;
+            group: any;
+        };
     };
 };
 export type RadioProps = typeof __propDef.props;

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

@@ -1,50 +1,47 @@
-<script>import { createEventDispatcher, onMount, tick } from "svelte";
+<script>import { computePosition, flip, offset, shift, autoUpdate } from "@floating-ui/dom";
+import { createEventDispatcher, onMount, tick } from "svelte";
 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 "../containers/List.svelte";
-import Input from "./Input.svelte";
+import { clickOutside } from "./actions/clickOutside";
+import List from "./List.svelte";
+const popupId = uuid();
+export let composed = false;
 export let disabled = false;
-export let items = [];
 export let open = false;
-export let selectedIndex = 0;
-export let selectedItem = void 0;
-$: {
-  selectedItem = items[selectedIndex];
-}
-const inputId = uuid();
+export let selectedValue = void 0;
 let prevOpen = false;
-let pendingSelectedIndex = selectedIndex;
+let pendingSelectedValue = selectedValue;
 let selectRef;
 let popupRef;
 let listRef;
-const popupId = uuid();
 let popupPosition = {
   x: void 0,
   y: void 0
 };
 const dispatch = createEventDispatcher();
-const raiseItemSelected = (index) => {
-  dispatch("itemSelected", { index, item: items[index] });
+const raiseSelect = (value) => {
+  dispatch("select", { value });
 };
-const raiseItemSelectPending = (index) => {
-  dispatch("itemSelectPending", { index, item: items[index] });
+const raisePending = (value) => {
+  dispatch("pending", { value });
 };
-$:
-  selectedIndex, () => {
-    pendingSelectedIndex = selectedIndex;
-  };
 $: {
-  raiseItemSelected(selectedIndex);
+  pendingSelectedValue = selectedValue;
 }
 $: {
-  raiseItemSelectPending(pendingSelectedIndex);
+  raiseSelect(selectedValue);
+}
+$: {
+  if (open) {
+    raisePending(pendingSelectedValue);
+  }
 }
 $: {
   if (open && !prevOpen) {
     prevOpen = true;
-    tick().then(() => listRef?.focusSelectedItem());
+    tick().then(() => {
+      listRef?.focus();
+      listRef?.scrollToSelectedItem();
+    });
   } else if (prevOpen) {
     prevOpen = false;
     tick().then(() => selectRef?.focus());
@@ -76,23 +73,36 @@ const onSelectKeydown = (event) => {
     switch (event.key) {
       case " ":
         {
-          open = !open;
+          if (!open) {
+            open = true;
+          }
           event.preventDefault();
           event.stopPropagation();
+          return false;
         }
         break;
       case "ArrowUp":
         {
-          listRef.selectPreviousItem();
+          if (selectedValue) {
+            listRef.selectPreviousItem();
+          } else {
+            listRef.selectLastItem();
+          }
           event.preventDefault();
           event.stopPropagation();
+          return false;
         }
         break;
       case "ArrowDown":
         {
-          listRef.selectNextItem();
+          if (selectedValue) {
+            listRef.selectNextItem();
+          } else {
+            listRef.selectFirstItem();
+          }
           event.preventDefault();
           event.stopPropagation();
+          return false;
         }
         break;
     }
@@ -103,49 +113,46 @@ const onListKeydown = (event) => {
     switch (event.key) {
       case "Enter":
         {
-          selectedIndex = pendingSelectedIndex;
+          selectedValue = pendingSelectedValue;
           open = !open;
           event.preventDefault();
           event.stopPropagation();
+          return false;
         }
         break;
       case "Escape":
         {
-          pendingSelectedIndex = selectedIndex;
+          pendingSelectedValue = selectedValue;
           open = !open;
           event.preventDefault();
           event.stopPropagation();
+          return false;
         }
         break;
     }
   }
 };
 const onListClick = (event) => {
-  if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
-    selectedIndex = pendingSelectedIndex;
-    open = false;
-    event.preventDefault();
-    event.stopPropagation();
-  }
+  open = false;
+  event.preventDefault();
+  event.stopPropagation();
+  return false;
 };
-const onPendingItemSelected = (event) => {
-  pendingSelectedIndex = event.detail.index;
+const onListSelect = (event) => {
+  pendingSelectedValue = event.detail.value;
   if (!open) {
-    selectedIndex = pendingSelectedIndex;
+    selectedValue = pendingSelectedValue;
   }
 };
 </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"
@@ -175,29 +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}>
-      <!-- BUGBUG: Problem with slot let params conflict
-        It seems that when a default slot is used multiple times in a module,
-        the first time sets the possible let params.
-        If we don't define the same let params on this label slot that 
-        is the default slot for label, then using the default slot for list
-        will error saying the property is not defined.
-      -->
-      <slot name="label" index={0} item={undefined} selected={false} />
-    </Label>
-  {/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 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}
@@ -207,88 +204,71 @@ A single item that can be selected from a popup list of items.
     style="left:{popupPosition.x}px; top:{popupPosition.y}px"
   >
     <div class="popup-content">
-      <slot name="list">
-        {#if $$slots.default}
-          <List
-            bind:this={listRef}
-            selectedIndex={pendingSelectedIndex}
-            {items}
-            {disabled}
-            on:click={onListClick}
-            on:keydown={onListKeydown}
-            on:itemSelected={onPendingItemSelected}
-          >
-            <svelte:fragment let:disabled let:index let:item let:selected>
-              <slot {disabled} {index} {item} {selected} />
-            </svelte:fragment>
-          </List>
-        {:else}
-          <List
-            bind:this={listRef}
-            selectedIndex={pendingSelectedIndex}
-            {items}
-            {disabled}
-            on:click={onListClick}
-            on:keydown={onListKeydown}
-            on:itemSelected={onPendingItemSelected}
-          />
-        {/if}
-      </slot>
+      <List
+        bind:this={listRef}
+        {disabled}
+        selectedValue={pendingSelectedValue}
+        on:click={onListClick}
+        on:keydown={onListKeydown}
+        on:select={onListSelect}
+        tabIndex={open ? 0 : -1}
+      >
+        <slot />
+      </List>
     </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);
+    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);
+    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;
   }
 
   .sterling-select:hover {
-    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);
   }
 
-  .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: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);
   }
 
   .sterling-select.disabled {
-    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);
     cursor: not-allowed;
     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 {
@@ -332,9 +312,11 @@ A single item that can be selected from a popup list of items.
   }
 
   .popup {
+    background-color: var(--stsv-Common__background-color);
     box-sizing: border-box;
     display: none;
-    overflow: hidden;
+    overflow: visible;
+    outline: none;
     position: absolute;
     box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
     width: fit-content;