@geoffcox/sterling-svelte 0.0.23 → 0.0.25

package/Select.svelte

@@ -1,8 +1,8 @@
-<script>import { computePosition, flip, offset, shift, autoUpdate } from "@floating-ui/dom";
-import { createEventDispatcher, onMount, tick } from "svelte";
+<script>import { createEventDispatcher, tick } from "svelte";
 import { clickOutside } from "./actions/clickOutside";
 import { idGenerator } from "./idGenerator";
 import List from "./List.svelte";
+import Popup from "./Popover.svelte";
 const popupId = idGenerator.nextId("Select-popup");
 export let composed = false;
 export let disabled = false;
@@ -11,12 +11,7 @@ export let selectedValue = void 0;
 let prevOpen = false;
 let pendingSelectedValue = selectedValue;
 let selectRef;
-let popupRef;
 let listRef;
-let popupPosition = {
-  x: void 0,
-  y: void 0
-};
 const dispatch = createEventDispatcher();
 const raiseSelect = (value) => {
   dispatch("select", { value });
@@ -39,8 +34,10 @@ $: {
   if (open && !prevOpen) {
     prevOpen = true;
     tick().then(() => {
-      listRef?.focus();
-      listRef?.scrollToSelectedItem();
+      setTimeout(() => {
+        listRef?.focus();
+        listRef?.scrollToSelectedItem();
+      }, 10);
     });
   } else if (prevOpen) {
     prevOpen = false;
@@ -61,20 +58,6 @@ export const scrollToSelectedItem = () => {
     listRef?.scrollToSelectedItem();
   }
 };
-let mounted = false;
-onMount(() => {
-  mounted = true;
-  const cleanup = autoUpdate(selectRef, popupRef, async () => {
-    const { x, y } = await computePosition(selectRef, popupRef, {
-      placement: "bottom-end",
-      middleware: [offset({ mainAxis: 2 }), flip(), shift({ padding: 0 })]
-    });
-    if (open) {
-      popupPosition = { x, y };
-    }
-  });
-  return cleanup;
-});
 const onSelectClick = (event) => {
   if (!disabled) {
     open = !open;
@@ -216,27 +199,20 @@ const onListSelect = (event) => {
       <div class="chevron" />
     </slot>
   </div>
-  <div
-    bind:this={popupRef}
-    class="popup"
-    class:open
-    id={popupId}
-    style="left:{popupPosition.x}px; top:{popupPosition.y}px"
-  >
-    <div class="popup-content">
-      <List
-        bind:this={listRef}
-        {disabled}
-        selectedValue={pendingSelectedValue}
-        on:click={onListClick}
-        on:keydown={onListKeydown}
-        on:select={onListSelect}
-        tabIndex={open ? 0 : -1}
-      >
-        <slot />
-      </List>
-    </div>
-  </div>
+  <Popup reference={selectRef} bind:open id={popupId}>
+    <List
+      bind:this={listRef}
+      composed
+      {disabled}
+      selectedValue={pendingSelectedValue}
+      on:click={onListClick}
+      on:keydown={onListKeydown}
+      on:select={onListSelect}
+      tabIndex={open ? 0 : -1}
+    >
+      <slot />
+    </List>
+  </Popup>
 </div>
 
 <style>
@@ -255,6 +231,7 @@ const onListSelect = (event) => {
     grid-template-rows: auto;
     outline: none;
     padding: 0;
+    position: relative;
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
@@ -275,13 +252,27 @@ const onListSelect = (event) => {
   }
 
   .sterling-select.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::after {
+    background: var(--stsv-Disabled__background);
+    bottom: 0;
+    content: '';
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    pointer-events: none;
+    transition: opacity 250ms;
+  }
+
+  .sterling-select.disabled::after {
+    opacity: 1;
+  }
+
   .sterling-select.composed,
   .sterling-select.composed:hover,
   .sterling-select.composed.focus,
@@ -291,6 +282,10 @@ const onListSelect = (event) => {
     outline: none;
   }
 
+  .sterling-select.composed.disabled::after {
+    opacity: 0;
+  }
+
   .value {
     padding: 0.5em;
   }
@@ -331,31 +326,13 @@ const onListSelect = (event) => {
     transform-origin: 50% 50%;
   }
 
-  .popup {
-    background-color: var(--stsv-Common__background-color);
-    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;
-    height: fit-content;
-    z-index: 1;
-  }
-
-  .popup.open {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-  }
-
   .popup-content {
     max-height: 15em;
   }
 
   @media (prefers-reduced-motion) {
-    .sterling-select {
+    .sterling-select,
+    .sterling-select::after {
       transition: none;
     }
   }

package/Slider.svelte

@@ -236,6 +236,7 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
     height: 1.5em;
     overflow: hidden;
     padding: 0;
+    position: relative;
     text-decoration: none;
     transition: background-color 250ms, color 250ms, border-color 250ms;
     white-space: nowrap;
@@ -327,19 +328,26 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
 
   /* ----- disabled ----- */
 
-  .sterling-slider.disabled .track {
-    background: var(--stsv-Common__background-color--disabled);
+  .sterling-slider.disabled .thumb {
+    cursor: not-allowed;
+    outline: none;
   }
 
-  .sterling-slider.disabled .fill {
-    background: var(--stsv-Common__color--disabled);
+  .sterling-slider .thumb::after {
+    background: var(--stsv-Disabled__background);
+    bottom: 0;
+    content: '';
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    pointer-events: none;
+    transition: opacity 250ms;
   }
 
-  .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);
-    cursor: not-allowed;
+  .sterling-slider.disabled .thumb::after {
+    opacity: 1;
   }
 
   .sterling-slider.composed,
@@ -355,7 +363,8 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
     .sterling-slider,
     .track,
     .fill,
-    .thumb {
+    .thumb,
+    .thumb::after {
       transition: none;
     }
   }

package/Switch.svelte

@@ -108,18 +108,30 @@ export const focus = (options) => {
     position: relative;
   }
 
+  .sterling-switch input {
+    cursor: pointer;
+  }
+
+  .sterling-switch.disabled input {
+    cursor: not-allowed;
+  }
+
   .sterling-switch:not(.vertical) {
+    align-content: center;
     align-items: center;
     column-gap: 0.5em;
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: auto auto auto;
     grid-template-rows: auto;
-    justify-items: stretch;
+    justify-content: flex-start;
+    justify-items: flex-start;
   }
 
   .sterling-switch.vertical {
-    align-items: stretch;
+    align-content: flex-start;
+    align-items: flex-start;
     grid-template-columns: auto;
     grid-template-rows: auto auto auto;
+    justify-content: center;
     justify-items: center;
     row-gap: 0.5em;
   }
@@ -175,12 +187,6 @@ export const focus = (options) => {
     outline-width: var(--stsv-Common__outline-width);
   }
 
-  .sterling-switch.disabled .switch {
-    background-color: var(--stsv-Common__background-color--disabled);
-    border-color: var(--stsv-Common__border-color--disabled);
-    color: var(--stsv-Common__color--disabled);
-  }
-
   .sterling-switch:not(.vertical) .switch {
     width: 2em;
     height: 1.25em;
@@ -204,7 +210,6 @@ export const focus = (options) => {
     border-width: var(--stsv-Button__border-width);
     box-sizing: border-box;
     color: var(--stsv-Button__color);
-    cursor: pointer;
     display: block;
     font: inherit;
     height: 1.25em;
@@ -225,10 +230,21 @@ export const focus = (options) => {
     color: var(--stsv-Button__color--hover);
   }
 
-  .sterling-switch.disabled .thumb {
-    background-color: var(--stsv-Common__background-color--disabled);
-    border-color: var(--stsv-Common__border-color--disabled);
-    color: var(--stsv-Common__color--disabled);
+  .sterling-switch .thumb::after {
+    background: var(--stsv-Disabled__background);
+    bottom: 0;
+    content: '';
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    pointer-events: none;
+    transition: opacity 250ms;
+  }
+
+  .sterling-switch.disabled .thumb::after {
+    opacity: 1;
   }
 
   .sterling-switch:not(.vertical) .thumb {
@@ -240,4 +256,12 @@ export const focus = (options) => {
     left: calc(-1 * var(--stsv-Button__border-width));
     transform: translateY(calc(var(--thumb-offset) - var(--stsv-Button__border-width)));
   }
+
+  @media (prefers-reduced-motion) {
+    .switch,
+    .thumb,
+    .thumb::after {
+      transition: none;
+    }
+  }
 </style>

package/Tab.svelte

@@ -102,6 +102,7 @@ export const focus = (options) => {
     font: inherit;
     overflow: hidden;
     padding: 0.5em 1em 0.25em 1em;
+    position: relative;
     text-decoration: none;
     text-overflow: ellipsis;
     transition: background-color 250ms, color 250ms, border-color 250ms;
@@ -144,8 +145,25 @@ export const focus = (options) => {
   }
 
   .sterling-tab:disabled {
-    color: var(--stsv-Common__color--disabled);
     cursor: not-allowed;
+    outline: none;
+  }
+
+  .sterling-tab::after {
+    background: var(--stsv-Disabled__background);
+    bottom: 0;
+    content: '';
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    pointer-events: none;
+    transition: opacity 250ms;
+  }
+
+  .sterling-tab:disabled::after {
+    opacity: 1;
   }
 
   .content {
@@ -190,7 +208,11 @@ export const focus = (options) => {
     background-color: var(--stsv-Input__color);
   }
 
-  .sterling-tab.selected:disabled .indicator {
-    background-color: var(--stsv-Common__color--disabled);
+  @media (prefers-reduced-motion) {
+    .sterling-tab,
+    .sterling-tab::after,
+    .indicator {
+      transition: none;
+    }
   }
 </style>

package/TabList.svelte

@@ -234,7 +234,7 @@ setContext(TAB_LIST_CONTEXT_KEY, {
     grid-auto-flow: column;
     grid-template-columns: repeat(auto-fill, auto);
     grid-template-rows: 1fr;
-    overflow-x: scroll;
+    overflow-x: auto;
     overflow-y: hidden;
   }
 
@@ -243,7 +243,7 @@ setContext(TAB_LIST_CONTEXT_KEY, {
     grid-template-rows: auto;
     grid-template-columns: 1fr;
     overflow-x: hidden;
-    overflow-y: scroll;
+    overflow-y: auto;
     row-gap: 0.5em;
   }
 

package/TextArea.svelte

@@ -1,6 +1,8 @@
-<script>export let autoHeight = false;
+<script>import { onMount } from "svelte";
+export let autoHeight = false;
+export let disabled = false;
 export let resize = "none";
-export let value;
+export let value = "";
 let textAreaRef;
 const autoSetHeight = () => {
   if (autoHeight && textAreaRef) {
@@ -13,6 +15,9 @@ const onInput = () => {
 };
 $:
   autoHeight, autoSetHeight();
+onMount(() => {
+  autoSetHeight();
+});
 export const blur = () => {
   textAreaRef?.blur();
 };
@@ -37,51 +42,59 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
 };
 </script>
 
-<textarea
-  bind:this={textAreaRef}
-  class="sterling-text-area"
-  rows="1"
-  style={`--TextArea__resize: ${resize};`}
-  bind:value
-  on:beforeinput
-  on:blur
-  on:click
-  on:change
-  on:copy
-  on:cut
-  on:paste
-  on:dblclick
-  on:dragend
-  on:dragenter
-  on:dragleave
-  on:dragover
-  on:dragstart
-  on:drop
-  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}
-/>
+<div class="sterling-text-area" class:disabled>
+  <textarea
+    bind:this={textAreaRef}
+    bind:value
+    {disabled}
+    rows="1"
+    style={`--TextArea__resize: ${resize};`}
+    on:beforeinput
+    on:blur
+    on:click
+    on:change
+    on:copy
+    on:cut
+    on:paste
+    on:dblclick
+    on:dragend
+    on:dragenter
+    on:dragleave
+    on:dragover
+    on:dragstart
+    on:drop
+    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}
+  />
+</div>
 
 <style>
   .sterling-text-area {
+    position: relative;
+    height: 100%;
+    width: 100%;
+  }
+
+  textarea {
     background-color: var(--stsv-Input__background-color);
     border-color: var(--stsv-Input__border-color);
     border-radius: var(--stsv-Input__border-radius);
@@ -89,6 +102,7 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
     border-width: var(--stsv-Input__border-width);
     box-sizing: border-box;
     color: var(--stsv-Input__color);
+    display: block;
     font: inherit;
     line-height: inherit;
     height: 100%;
@@ -102,13 +116,13 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
     width: 100%;
   }
 
-  .sterling-text-area:hover {
+  textarea:hover {
     background-color: var(--stsv-Input__background-color--hover);
     border-color: var(--stsv-Input__border-color--hover);
     color: var(--stsv-Input__color--hover);
   }
 
-  .sterling-text-area:focus {
+  textarea:focus {
     background-color: var(--stsv-Input__background-color--focus);
     border-color: var(--stsv-Input__border-color--focus);
     color: var(--stsv-Input__color--focus);
@@ -119,23 +133,36 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
   }
 
   .sterling-text-area: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-text-area::placeholder {
-    color: var(--stsv-Display__color--faint);
-    transition: background-color 250ms, color 250ms, border-color 250ms;
+  .sterling-text-area::after {
+    background: var(--stsv-Disabled__background);
+    bottom: 0;
+    content: '';
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    pointer-events: none;
+    transition: opacity 250ms;
+  }
+
+  .sterling-text-area.disabled::after {
+    opacity: 1;
   }
 
-  .sterling-text-area:disabled::placeholder {
-    color: var(--stsv-Display__color--disabled);
+  textarea::placeholder {
+    color: var(--stsv-Display__color--faint);
+    transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
   @media (prefers-reduced-motion) {
-    .sterling-text-area {
+    textarea,
+    .sterling-text-area,
+    .sterling-text-area::after {
       transition: none;
     }
   }

package/TextArea.svelte.d.ts

@@ -3,8 +3,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         autoHeight?: boolean | undefined;
+        disabled?: boolean | undefined;
         resize?: "none" | "horizontal" | "vertical" | "both" | undefined;
-        value: string;
+        value?: string | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;

package/Tree.svelte

@@ -100,7 +100,9 @@ setContext(TREE_CONTEXT_KEY, {
   on:wheel
   {...$$restProps}
 >
-  <slot {composed} {disabled} />
+  <div class="container">
+    <slot {composed} {disabled} />
+  </div>
 </div>
 
 <style>
@@ -112,14 +114,10 @@ setContext(TREE_CONTEXT_KEY, {
     border-width: var(--stsv-Common__border-width);
     box-sizing: border-box;
     color: var(--stsv-Common__color);
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
     height: 100%;
     overflow-x: hidden;
-    overflow-y: scroll;
+    overflow-y: auto;
     margin: 0;
-    position: relative;
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
@@ -137,18 +135,51 @@ setContext(TREE_CONTEXT_KEY, {
     outline-width: var(--stsv-Common__outline-width);
   }
 
-  .sterling-tree.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;
-  }
-
   .sterling-tree.composed,
   .sterling-tree.composed:hover,
   .sterling-tree.composed.using-keyboard:focus-visible,
   .sterling-tree.composed.disabled {
+    background: none;
     border: none;
     outline: none;
   }
+
+  .sterling-tree.disabled * {
+    cursor: not-allowed;
+  }
+
+  /* ----- container - a layout panel that grows with the items ----- */
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    position: relative;
+  }
+
+  .container::after {
+    background: var(--stsv-Disabled__background);
+    bottom: 0;
+    content: '';
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    pointer-events: none;
+    right: 0;
+    top: 0;
+    transition: opacity 250ms;
+  }
+
+  .sterling-tree.disabled .container::after {
+    opacity: 1;
+  }
+
+  /* ----- media queries ----- */
+
+  @media (prefers-reduced-motion) {
+    .sterling-tree,
+    .container::after {
+      transition: none;
+    }
+  }
 </style>