@geoffcox/sterling-svelte 0.0.17 → 0.0.18

package/List.svelte

@@ -2,7 +2,6 @@
 import { createEventDispatcher, onMount, setContext } from "svelte";
 import { writable } from "svelte/store";
 import { v4 as uuid } from "uuid";
-import Label from "./Label.svelte";
 import { listContextKey } from "./List.constants";
 export let composed = false;
 export let disabled = false;
@@ -186,54 +185,44 @@ A list of items where a single item can be selected.
   -->
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div
+  aria-activedescendant={selectedValue}
+  aria-disabled={disabled}
+  aria-orientation={horizontal ? 'horizontal' : 'vertical'}
+  bind:this={listRef}
   class="sterling-list"
-  class:horizontal
-  class:disabled
   class:composed
+  class:disabled
+  class:horizontal
   class:using-keyboard={usingKeyboard}
+  id={listId}
+  role="list"
+  tabindex={0}
+  on:blur
+  on:click
+  on:click={onClick}
+  on:copy
+  on:cut
+  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:scroll
+  on:wheel
+  on:paste
+  {...$$restProps}
 >
-  {#if $$slots.label}
-    <Label {disabled} for={listId}>
-      <slot name="label" {composed} {disabled} {horizontal} {selectedValue} />
-    </Label>
-  {/if}
-  <div
-    aria-activedescendant={selectedValue}
-    aria-orientation={horizontal ? 'horizontal' : 'vertical'}
-    bind:this={listRef}
-    class="list"
-    class:disabled
-    class:horizontal
-    id={listId}
-    role="list"
-    tabindex={0}
-    on:blur
-    on:click
-    on:click={onClick}
-    on:copy
-    on:cut
-    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:scroll
-    on:wheel
-    on:paste
-    {...$$restProps}
-  >
-    <slot {composed} {disabled} {horizontal} {selectedValue} />
-  </div>
+  <slot {composed} {disabled} {horizontal} {selectedValue} />
 </div>
 
 <style>
@@ -245,18 +234,24 @@ A list of items where a single item can be selected.
     border-width: var(--stsv-Common__border-width);
     box-sizing: border-box;
     color: var(--stsv-Common__color);
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: auto 1fr;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
     height: 100%;
     margin: 0;
-    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    outline: none;
     padding: 0;
+    position: relative;
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
   .sterling-list.horizontal {
+    flex-direction: row;
     height: unset;
+    overflow-x: scroll;
+    overflow-y: hidden;
     width: 100%;
   }
 
@@ -282,40 +277,14 @@ A list of items where a single item can be selected.
   }
 
   .sterling-list.composed,
-  .sterling-list:hover.composed,
-  .sterling-list:focus-visible.composed,
-  .sterling-list.disabled.composed {
+  .sterling-list.composed:hover,
+  .sterling-list.composed.using-keyboard:focus-within,
+  .sterling-list.composed.disabled {
     background: none;
     border: none;
     outline: none;
   }
 
-  .list {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    grid-row: 2 / span 1;
-    overflow-x: hidden;
-    overflow-y: scroll;
-    outline: none;
-    position: relative;
-  }
-
-  .list.horizontal {
-    flex-direction: row;
-    overflow-x: scroll;
-    overflow-y: hidden;
-  }
-
-  .sterling-list > :global(label) {
-    font-size: 0.7em;
-    margin: 0.5em 0.7em;
-  }
-
-  .sterling-list > :global(label):empty {
-    margin: 0;
-  }
-
   @media (prefers-reduced-motion) {
     .sterling-list {
       transition: none;

package/List.svelte.d.ts

@@ -40,12 +40,6 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        label: {
-            composed: boolean;
-            disabled: boolean;
-            horizontal: boolean;
-            selectedValue: string | undefined;
-        };
         default: {
             composed: boolean;
             disabled: boolean;

package/ListItem.svelte

@@ -1,5 +1,4 @@
 <script>import { getContext } from "svelte";
-import { v4 as uuid } from "uuid";
 import { listContextKey } from "./List.constants";
 export let disabled = false;
 export let value;

package/Progress.svelte

@@ -1,12 +1,9 @@
-<script>import { v4 as uuid } from "uuid";
-import Label from "./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,18 +69,6 @@ $:
     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(--stsv-Common__background-color);
     box-sizing: border-box;
@@ -111,7 +90,7 @@ $:
   }
 
   .indicator {
-    background-color: var(--stsv-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,25 +122,25 @@ $:
 
   /* ----- Colorful ----- */
 
-  .indicator.progress {
-    background-color: var(--stsv-Display__color--progress);
+  .indicator.info {
+    background-color: var(--stsv-Info__border-color);
   }
 
   .indicator.success {
-    background-color: var(--stsv-Display__color--success);
+    background-color: var(--stsv-Success__border-color);
   }
 
   .indicator.warning {
-    background-color: var(--stsv-Display__color--warning);
+    background-color: var(--stsv-Warning__border-color);
   }
 
   .indicator.error {
-    background-color: var(--stsv-Display__color--error);
+    background-color: var(--stsv-Error__border-color);
   }
 
   /* ----- Disabled ----- */
 
-  .sterling-progress.disabled .progress-bar {
+  .sterling-progress.disabled {
     background: var(--stsv-Common__background-color--disabled);
     border-color: var(--stsv-Common__border-color--disabled);
   }
@@ -174,7 +150,7 @@ $:
   }
 
   @media (prefers-reduced-motion) {
-    .progress-bar,
+    .sterling-progress,
     .indicator {
       transition: none;
     }

package/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

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

package/Radio.svelte

@@ -2,26 +2,31 @@
 import { v4 as uuid } from "uuid";
 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}

package/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/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 {};