@geoffcox/sterling-svelte 0.0.17 → 0.0.18

package/Slider.svelte

@@ -1,7 +1,5 @@
 <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 min = 0;
 export let max = 100;
@@ -9,7 +7,6 @@ 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) => {
@@ -124,84 +121,62 @@ 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: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 +185,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 +228,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 +244,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 +272,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,7 +301,7 @@ 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);
@@ -330,15 +309,15 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
   }
   /* ----- 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);
@@ -346,7 +325,7 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
   }
 
   @media (prefers-reduced-motion) {
-    .slider,
+    .sterling-slider,
     .track,
     .fill,
     .thumb {

package/Slider.svelte.d.ts

@@ -40,9 +40,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

@@ -18,6 +18,8 @@ $:
   ratio = vertical ? checked ? 0 : 1 : checked ? 1 : 0;
 $:
   valueOffset = (switchSize - thumbSize) * ratio;
+$:
+  console.log({ ratio, valueOffset });
 </script>
 
 <!--
@@ -26,6 +28,9 @@ $:
 -->
 <div class="sterling-switch" class:vertical class:disabled>
   <input
+    bind:checked
+    {disabled}
+    id={inputId}
     type="checkbox"
     on:blur
     on:click
@@ -47,9 +52,6 @@ $:
     on:mouseup
     on:toggle
     on:wheel
-    bind:checked
-    id={inputId}
-    {disabled}
     {...$$restProps}
   />
   <div class="off-label">
@@ -209,11 +211,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/TextArea.svelte

@@ -1,10 +1,6 @@
-<script>import { v4 as uuid } from "uuid";
-import Label from "./Label.svelte";
-export let value;
+<script>export let autoHeight = false;
 export let resize = "none";
-export let disabled = false;
-export let autoHeight = false;
-const inputId = uuid();
+export let value;
 let textAreaRef;
 const autoSetHeight = () => {
   if (autoHeight && textAreaRef) {
@@ -19,48 +15,41 @@ $:
   autoHeight, autoSetHeight();
 </script>
 
-<div class="sterling-text-area" style={`--TextArea__resize: ${resize};`}>
-  {#if $$slots.label}
-    <Label {disabled} for={inputId}>
-      <slot name="label" />
-    </Label>
-  {/if}
-  <textarea
-    {...$$restProps}
-    bind:this={textAreaRef}
-    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
-    on:input={onInput}
-    {disabled}
-    rows="1"
-    {...$$restProps}
-  />
-</div>
+<textarea
+  bind:this={textAreaRef}
+  class="sterling-text-area"
+  rows="1"
+  style={`--TextArea__resize: ${resize};`}
+  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
+  on:input={onInput}
+  {...$$restProps}
+/>
 
 <style>
   .sterling-text-area {
@@ -71,15 +60,17 @@ $:
     border-width: var(--stsv-Input__border-width);
     box-sizing: border-box;
     color: var(--stsv-Input__color);
-    overflow: hidden;
-    width: 100%;
+    font: inherit;
+    line-height: inherit;
     height: 100%;
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-    padding: 0;
+    outline: none;
+    padding: 0.5em;
     margin: 0;
+    min-height: 3em;
+    overflow: hidden;
+    resize: var(--TextArea__resize, none);
     transition: background-color 250ms, color 250ms, border-color 250ms;
+    width: 100%;
   }
 
   .sterling-text-area:hover {
@@ -88,7 +79,7 @@ $:
     color: var(--stsv-Input__color--hover);
   }
 
-  .sterling-text-area:focus-wthin {
+  .sterling-text-area:focus {
     background-color: var(--stsv-Input__background-color--focus);
     border-color: var(--stsv-Input__border-color--focus);
     color: var(--stsv-Input__color--focus);
@@ -105,49 +96,17 @@ $:
     cursor: not-allowed;
   }
 
-  textarea {
-    background: none;
-    box-sizing: border-box;
-    color: inherit;
-    font: inherit;
-    line-height: inherit;
-    padding: 0 0.5em 0.5em 0.5em;
-    min-height: 3em;
-    margin: 0.5em 0 0 0;
-    resize: var(--TextArea__resize, none);
-    width: 100%;
-  }
-
-  textarea,
-  textarea:hover,
-  textarea:focus-within,
-  textarea:disabled {
-    background-color: transparent;
-    border: none;
-    outline: none;
-  }
-
-  textarea::placeholder {
+  .sterling-text-area::placeholder {
     color: var(--stsv-Display__color--faint);
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
-  textarea:disabled::placeholder {
+  .sterling-text-area:disabled::placeholder {
     color: var(--stsv-Display__color--disabled);
   }
 
-  .sterling-text-area > :global(label) {
-    font-size: 0.7em;
-    margin: 0.5em 0 0 0.7em;
-  }
-
-  .sterling-text-area > :global(label):empty {
-    margin: 0;
-  }
-
   @media (prefers-reduced-motion) {
-    .sterling-text-area,
-    .sterling-text-area textarea::placeholder {
+    .sterling-text-area {
       transition: none;
     }
   }

package/TextArea.svelte.d.ts

@@ -3,10 +3,9 @@ import type { TextAreaResize } from './TextArea.types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        value: string;
-        resize?: TextAreaResize | undefined;
-        disabled?: boolean | undefined;
         autoHeight?: boolean | undefined;
+        resize?: TextAreaResize | undefined;
+        value: string;
     };
     events: {
         blur: FocusEvent;
@@ -38,9 +37,7 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        label: {};
-    };
+    slots: {};
 };
 export type TextAreaProps = typeof __propDef.props;
 export type TextAreaEvents = typeof __propDef.events;

package/Tree.svelte

@@ -1,10 +1,7 @@
 <script>import { createKeyborg } from "keyborg";
 import { createEventDispatcher, onMount, setContext } from "svelte";
 import { writable } from "svelte/store";
-import { v4 as uuid } from "uuid";
-import Label from "./Label.svelte";
 import { treeContextKey } from "./Tree.constants";
-const inputId = uuid();
 export let composed = false;
 export let disabled = false;
 export let selectedValue = void 0;
@@ -58,18 +55,12 @@ onMount(() => {
 <div
   aria-disabled={disabled}
   class="sterling-tree"
-  class:disabled
   class:composed
+  class:disabled
   class:using-keyboard={usingKeyboard}
+  role="tree"
 >
-  {#if $$slots.label}
-    <Label {disabled} for={inputId}>
-      <slot name="label" />
-    </Label>
-  {/if}
-  <div class="tree" role="tree">
-    <slot />
-  </div>
+  <slot />
 </div>
 
 <style>
@@ -81,12 +72,14 @@ onMount(() => {
     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%;
+    overflow-x: hidden;
+    overflow-y: scroll;
     margin: 0;
-    overflow: hidden;
+    position: relative;
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
@@ -112,31 +105,10 @@ onMount(() => {
   }
 
   .sterling-tree.composed,
-  .sterling-tree:hover.composed,
-  .sterling-tree:focus-visible.composed,
-  .sterling-tree.disabled.composed {
-    background: none;
+  .sterling-tree.composed:hover,
+  .sterling-tree.composed.using-keyboard:focus-visible,
+  .sterling-tree.composed.disabled {
     border: none;
     outline: none;
   }
-
-  .sterling-tree > :global(label) {
-    font-size: 0.7em;
-    margin: 0.5em 0.7em;
-  }
-
-  .sterling-tree > :global(label):empty {
-    margin: 0;
-  }
-
-  .tree {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    grid-row: 2 / span 1;
-    overflow-x: hidden;
-    overflow-y: scroll;
-    outline: none;
-    position: relative;
-  }
 </style>

package/Tree.svelte.d.ts

@@ -13,7 +13,6 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        label: {};
         default: {};
     };
 };

package/index.d.ts

@@ -11,6 +11,7 @@ export { neutrals } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
 export { menuBarContextKey, menuItemContextKey } from './Menus.constants';
 export type { ButtonVariant, ButtonShape } from './Button.types';
+export type { FieldStatus } from './Field.types';
 export type { ListContext } from './List.types';
 export type { MenuBarContext, MenuItemContext, MenuItemRegistration } from './Menus.types';
 export type { ProgressColorful } from './Progress.types';
@@ -24,6 +25,7 @@ export { treeContextKey, treeItemContextKey } from './Tree.constants';
 import Button from './Button.svelte';
 import Checkbox from './Checkbox.svelte';
 import Dialog from './Dialog.svelte';
+import Field from './Field.svelte';
 import Input from './Input.svelte';
 import Label from './Label.svelte';
 import List from './List.svelte';
@@ -47,4 +49,4 @@ import Tree from './Tree.svelte';
 import TreeChevron from './TreeChevron.svelte';
 import TreeItem from './TreeItem.svelte';
 import TreeItemDisplay from './TreeItemDisplay.svelte';
-export { Button, Checkbox, Dialog, Input, Label, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };
+export { Button, Checkbox, Dialog, Field, Input, Label, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };

package/index.js

@@ -21,6 +21,7 @@ export { treeContextKey, treeItemContextKey } from './Tree.constants';
 import Button from './Button.svelte';
 import Checkbox from './Checkbox.svelte';
 import Dialog from './Dialog.svelte';
+import Field from './Field.svelte';
 import Input from './Input.svelte';
 import Label from './Label.svelte';
 import List from './List.svelte';
@@ -44,4 +45,4 @@ import Tree from './Tree.svelte';
 import TreeChevron from './TreeChevron.svelte';
 import TreeItem from './TreeItem.svelte';
 import TreeItemDisplay from './TreeItemDisplay.svelte';
-export { Button, Checkbox, Dialog, Input, Label, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };
+export { Button, Checkbox, Dialog, Field, Input, Label, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -55,6 +55,8 @@
     "./Button.types": "./Button.types.js",
     "./Checkbox.svelte": "./Checkbox.svelte",
     "./Dialog.svelte": "./Dialog.svelte",
+    "./Field.svelte": "./Field.svelte",
+    "./Field.types": "./Field.types.js",
     "./Input.svelte": "./Input.svelte",
     "./Label.svelte": "./Label.svelte",
     "./List.constants": "./List.constants.js",
@@ -70,7 +72,6 @@
     "./Menus.constants": "./Menus.constants.js",
     "./Menus.types": "./Menus.types.js",
     "./Menus.utils": "./Menus.utils.js",
-    "./Portal.svelte": "./Portal.svelte",
     "./Progress.svelte": "./Progress.svelte",
     "./Progress.types": "./Progress.types.js",
     "./Radio.svelte": "./Radio.svelte",