@geoffcox/sterling-svelte 0.0.17 → 0.0.19

package/Input.svelte

@@ -1,58 +1,58 @@
 <script>import { v4 as uuid } from "uuid";
 import Label from "./Label.svelte";
-export let value = "";
+export let composed = false;
 export let disabled = false;
-const inputId = uuid();
+export let id = void 0;
+export let value = "";
+$: {
+  if ($$slots.default && id === void 0) {
+    id = uuid();
+  }
+}
 </script>
 
-<!--
-	@component
-	A styled HTML input element with optional label.
--->
-<div class="sterling-input">
-  {#if $$slots.label}
-    <Label {disabled} for={inputId}>
-      <slot name="label" />
-    </Label>
-  {/if}
-  <input
-    bind:value
-    on:blur
-    on:click
-    on:change
-    on:copy
-    on:cut
-    on:paste
-    on:dblclick
-    on:focus
-    on:focusin
-    on:focusout
-    on:input
-    on:invalid
-    on:keydown
-    on:keypress
-    on:keyup
-    on:mousedown
-    on:mouseenter
-    on:mouseleave
-    on:mousemove
-    on:mouseover
-    on:mouseout
-    on:mouseup
-    on:select
-    on:submit
-    on:reset
-    on:wheel
-    {...$$restProps}
-    {disabled}
-    id={inputId}
-  />
-</div>
+{#if $$slots.default}
+  <Label {disabled} for={id}>
+    <slot {composed} {disabled} {value} />
+  </Label>
+{/if}
+<input
+  bind:value
+  class="sterling-input"
+  class:composed
+  {disabled}
+  {id}
+  on:blur
+  on:click
+  on:change
+  on:copy
+  on:cut
+  on:paste
+  on:dblclick
+  on:focus
+  on:focusin
+  on:focusout
+  on:input
+  on:invalid
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mousedown
+  on:mouseenter
+  on:mouseleave
+  on:mousemove
+  on:mouseover
+  on:mouseout
+  on:mouseup
+  on:select
+  on:submit
+  on:reset
+  on:wheel
+  {...$$restProps}
+/>
 
 <style>
   .sterling-input {
-    display: flex;
-    flex-direction: column;
     background-color: var(--stsv-Input__background-color);
     border-color: var(--stsv-Input__border-color);
     border-radius: var(--stsv-Input__border-radius);
@@ -61,6 +61,8 @@ const inputId = uuid();
     color: var(--stsv-Input__color);
     font: inherit;
     margin: 0;
+    outline: none;
+    padding: 0.5em;
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
@@ -70,7 +72,7 @@ const inputId = uuid();
     color: var(--stsv-Input__color--hover);
   }
 
-  .sterling-input:focus-within {
+  .sterling-input:focus {
     background-color: var(--stsv-Input__background-color--focus);
     border-color: var(--stsv-Input__border-color--focus);
     color: var(--stsv-Input__color--focus);
@@ -87,42 +89,26 @@ const inputId = uuid();
     cursor: not-allowed;
   }
 
-  .sterling-input input {
-    font: inherit;
-    color: inherit;
-    padding: 0.5em;
-  }
-
-  .sterling-input input,
-  .sterling-input input:hover,
-  .sterling-input input:focus-within,
-  .sterling-input input:disabled {
-    background-color: transparent;
+  .sterling-input.composed,
+  .sterling-input.composed:hover,
+  .sterling-input.composed:focus,
+  .sterling-input.composed.disabled {
+    background: transparent;
     border: none;
     outline: none;
   }
 
-  .sterling-input input::placeholder {
+  .sterling-input::placeholder {
     color: var(--stsv-Display__color--faint);
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
-  .sterling-input input:disabled::placeholder {
+  .sterling-input:disabled::placeholder {
     color: var(--stsv-Display__color--disabled);
   }
 
-  .sterling-input > :global(label) {
-    font-size: 0.7em;
-    margin: 0.5em 0 0 0.7em;
-  }
-
-  .sterling-input > :global(label):empty {
-    margin: 0;
-  }
-
   @media (prefers-reduced-motion) {
-    .sterling-input,
-    .sterling-input input::placeholder {
+    .sterling-input {
       transition: none;
     }
   }

package/Input.svelte.d.ts

@@ -2,8 +2,10 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        value?: string | undefined;
+        composed?: boolean | undefined;
         disabled?: boolean | undefined;
+        id?: string | undefined;
+        value?: string | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -36,13 +38,16 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        label: {};
+        default: {
+            composed: boolean;
+            disabled: boolean;
+            value: string;
+        };
     };
 };
 export type InputProps = typeof __propDef.props;
 export type InputEvents = typeof __propDef.events;
 export type InputSlots = typeof __propDef.slots;
-/** A styled HTML input element with optional label. */
 export default class Input extends SvelteComponentTyped<InputProps, InputEvents, InputSlots> {
 }
 export {};

package/Label.svelte

@@ -1,7 +1,9 @@
 <script>export let disabled = false;
+HTMLLabelElement;
 </script>
 
 <label
+  aria-disabled={disabled}
   class="sterling-label"
   class:disabled
   on:blur
@@ -30,18 +32,15 @@
   <slot />
 </label>
 
-<!-- 
-    @component 
-    A styled HTML label element
--->
 <style>
   label {
-    transition: opacity 250ms;
+    color: var(--stsv-Display__color);
+    transition: color 250ms;
     font: inherit;
   }
 
   label.disabled {
-    opacity: 0.5;
+    color: var(--stsv-Common__color--disabled);
   }
 
   @media (prefers-reduced-motion) {

package/Label.svelte.d.ts

@@ -36,7 +36,6 @@ declare const __propDef: {
 export type LabelProps = typeof __propDef.props;
 export type LabelEvents = typeof __propDef.events;
 export type LabelSlots = typeof __propDef.slots;
-/** A styled HTML label element */
 export default class Label extends SvelteComponentTyped<LabelProps, LabelEvents, LabelSlots> {
 }
 export {};

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;