@geoffcox/sterling-svelte 0.0.22 → 0.0.24

package/TextArea.svelte

@@ -1,4 +1,6 @@
-<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;
 let textAreaRef;
@@ -13,6 +15,9 @@ const onInput = () => {
 };
 $:
   autoHeight, autoSetHeight();
+onMount(() => {
+  autoSetHeight();
+});
 export const blur = () => {
   textAreaRef?.blur();
 };
@@ -37,44 +42,57 @@ 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: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}
-/>
+<div class="sterling-text-area2" 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 {
+  .sterling-text-area2 {
+    position: relative;
+  }
+
+  textarea {
     background-color: var(--stsv-Input__background-color);
     border-color: var(--stsv-Input__border-color);
     border-radius: var(--stsv-Input__border-radius);
@@ -82,6 +100,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%;
@@ -95,13 +114,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);
@@ -111,24 +130,37 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
     outline-width: var(--stsv-Common__outline-width);
   }
 
-  .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);
+  .sterling-text-area2: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-area2::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-area2.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-area2,
+    .sterling-text-area2::after {
       transition: none;
     }
   }

package/TextArea.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         autoHeight?: boolean | undefined;
+        disabled?: boolean | undefined;
         resize?: "none" | "horizontal" | "vertical" | "both" | undefined;
         value: string;
         blur?: (() => void) | undefined;
@@ -13,6 +14,7 @@ declare const __propDef: {
         setRangeText?: ((replacement: string, start?: number, end?: number, selectionMode?: SelectionMode) => void) | undefined;
     };
     events: {
+        beforeinput: InputEvent;
         blur: FocusEvent;
         click: MouseEvent;
         change: Event;
@@ -20,6 +22,12 @@ declare const __propDef: {
         cut: ClipboardEvent;
         paste: ClipboardEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/Tooltip.svelte

@@ -24,7 +24,6 @@ const computeTooltipPosition = async () => {
         element: arrowRef
       })
     ];
-    console.log(placement);
     position = await computePosition(reference, tooltipRef, {
       placement,
       middleware

package/Tree.svelte

@@ -70,6 +70,12 @@ setContext(TREE_CONTEXT_KEY, {
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout
@@ -94,7 +100,9 @@ setContext(TREE_CONTEXT_KEY, {
   on:wheel
   {...$$restProps}
 >
-  <slot {composed} {disabled} />
+  <div class="container">
+    <slot {composed} {disabled} />
+  </div>
 </div>
 
 <style>
@@ -106,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;
   }
 
@@ -131,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>

package/Tree.svelte.d.ts

@@ -13,6 +13,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/TreeChevron.svelte

@@ -25,6 +25,12 @@ $: {
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/TreeChevron.svelte.d.ts

@@ -9,6 +9,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/TreeItem.svelte

@@ -10,7 +10,7 @@ const {
   selectedValue,
   disabled: treeDisabled
 } = getContext(TREE_CONTEXT_KEY);
-const { depth = 0, disabled: parentDisabled } = getContext(TREE_ITEM_CONTEXT_KEY) || {};
+const { depth = 0 } = getContext(TREE_ITEM_CONTEXT_KEY) || {};
 let treeItemRef;
 $:
   hasChildren = $$slots.default;
@@ -19,13 +19,13 @@ $:
 $:
   selected = $selectedValue === value;
 $:
-  _disabled = disabled || $parentDisabled || $treeDisabled;
-const disabledStore = writable(_disabled);
+  _disabled = disabled || $treeDisabled;
+const disabledStore = writable(disabled);
 $: {
-  disabledStore.set(_disabled);
+  disabledStore.set(disabled);
 }
 const collapseItem = (index) => {
-  if (!disabled) {
+  if (!_disabled) {
     index = index ?? $expandedValues.findIndex((expandedValue) => expandedValue === value);
     if (index !== -1) {
       expandedValues.set([
@@ -39,7 +39,7 @@ const collapseItem = (index) => {
 };
 export const collapse = () => collapseItem();
 const expandItem = (index) => {
-  if (!disabled) {
+  if (!_disabled) {
     index = index ?? $expandedValues.findIndex((expandedValue) => expandedValue === value);
     if (index === -1) {
       expandedValues.set([...$expandedValues, value]);
@@ -50,7 +50,7 @@ const expandItem = (index) => {
 };
 export const expand = () => expandItem();
 export const toggleExpanded = () => {
-  if (!disabled) {
+  if (!_disabled) {
     const index = $expandedValues.findIndex((expandedValue) => expandedValue === value);
     return index !== -1 ? collapseItem(index) : expandItem(index);
   }
@@ -244,6 +244,12 @@ A item in a Tree displaying the item and children.
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout
@@ -288,7 +294,7 @@ A item in a Tree displaying the item and children.
   </div>
   {#if expanded && hasChildren}
     <div class="children" transition:slide={{ duration: 200 }} role="group">
-      <slot {depth} {disabled} {selected} {value} />
+      <slot {depth} {selected} {value} />
     </div>
   {/if}
 </div>

package/TreeItem.svelte.d.ts

@@ -19,6 +19,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;
@@ -63,7 +69,6 @@ declare const __propDef: {
         };
         default: {
             depth: number;
-            disabled: boolean;
             selected: boolean;
             value: string;
         };

package/TreeItemDisplay.svelte

@@ -1,10 +1,16 @@
-<script>import TreeChevron from "./TreeChevron.svelte";
+<script>import { getContext } from "svelte";
+import { TREE_CONTEXT_KEY } from "./Tree.constants";
+import TreeChevron from "./TreeChevron.svelte";
+import { readable } from "svelte/store";
 export let depth = 0;
 export let disabled = false;
 export let expanded = false;
 export let hasChildren = false;
 export let value;
 export let selected = false;
+const { disabled: treeDisabled } = getContext(TREE_CONTEXT_KEY) || {
+  disabled: readable(false)
+};
 let divRef;
 export const click = () => {
   divRef?.click();
@@ -19,14 +25,21 @@ export const focus = (options) => {
 
 <div
   bind:this={divRef}
-  class="sterling-tree-item"
-  class:disabled
+  class="sterling-tree-item-display"
+  class:disabled={disabled && !$treeDisabled}
+  class:item-disabled={disabled}
   class:expanded
   class:selected
   style={`--sterling-tree-item-depth: ${depth}`}
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout
@@ -56,7 +69,7 @@ export const focus = (options) => {
 </div>
 
 <style>
-  .sterling-tree-item {
+  .sterling-tree-item-display {
     align-content: center;
     align-items: center;
     background-color: transparent;
@@ -68,29 +81,46 @@ export const focus = (options) => {
     margin: 0;
     outline: none;
     padding: 0.5em;
+    position: relative;
     padding-left: calc(0.2em + (0.5em * var(--sterling-tree-item-depth)));
     text-overflow: ellipsis;
     transition: background-color 250ms, color 250ms, border-color 250ms;
     white-space: nowrap;
   }
 
-  .sterling-tree-item:hover {
+  .sterling-tree-item-display:not(.item-disabled):not(.selected):hover {
     background-color: var(--stsv-Button__background-color--hover);
     color: var(--stsv-Button__color--hover);
   }
 
-  .sterling-tree-item.selected {
+  .sterling-tree-item-display.selected {
     background-color: var(--stsv-Input__background-color--selected);
     color: var(--stsv-Input__color--selected);
   }
 
-  .sterling-tree-item.disabled {
-    background-color: var(--stsv-Input__background-color--disabled);
-    color: var(--stsv-Common__color--disabled);
+  .sterling-tree-item-display.disabled {
     cursor: not-allowed;
+    outline: none;
+  }
+
+  .sterling-tree-item-display::after {
+    background: var(--stsv-Disabled__background);
+    bottom: 0;
+    content: '';
+    left: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: opacity 250ms;
+  }
+
+  .sterling-tree-item-display.disabled::after {
+    opacity: 1;
   }
 
-  .sterling-tree-item.leaf {
+  .sterling-tree-item-display.leaf {
     border: none;
     background: currentColor;
     border-radius: 50%;
@@ -101,7 +131,8 @@ export const focus = (options) => {
   }
 
   @media (prefers-reduced-motion) {
-    .sterling-tree-item {
+    .sterling-tree-item-display,
+    .sterling-tree-item-display::after {
       transition: none;
     }
   }

package/TreeItemDisplay.svelte.d.ts

@@ -16,6 +16,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -18,8 +18,8 @@
     "javascript"
   ],
   "devDependencies": {
-    "@fontsource/fira-mono": "^4.5.10",
-    "@fontsource/overpass": "^4.5.10",
+    "@fontsource/open-sans": "^4.5.14",
+    "@fontsource/source-code-pro": "^4.5.14",
     "@playwright/test": "^1.28.1",
     "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/adapter-static": "^1.0.0",

package/theme/darkTheme.js

@@ -21,6 +21,15 @@ export const darkTheme = {
     '--stsv-Common__outline-style': 'solid',
     '--stsv-Common__outline-width': '2px',
     // disabled
+    '--stsv-Common__background-color1--disabled': 'hsla(0, 0%, 0%, 20%)',
+    '--stsv-Common__background-color2--disabled': `hsla(0, 0%, 100%, 20%)`,
+    '--stsv-Disabled__background': 'repeating-linear-gradient(' +
+        '45deg,' +
+        'var(--stsv-Common__background-color1--disabled),' +
+        'var(--stsv-Common__background-color1--disabled) 3px,' +
+        'var(--stsv-Common__background-color2--disabled) 3px,' +
+        'var(--stsv-Common__background-color2--disabled) 6px' +
+        ')',
     '--stsv-Common__background-color--disabled': neutralColors.neutral45,
     '--stsv-Common__border-color--disabled': neutralColors.neutral92,
     '--stsv-Common__color--disabled': neutralColors.neutral60,

package/theme/lightTheme.js

@@ -21,6 +21,15 @@ export const lightTheme = {
     '--stsv-Common__outline-style': 'solid',
     '--stsv-Common__outline-width': '2px',
     // disabled
+    '--stsv-Common__background-color1--disabled': 'hsla(0, 0%, 0%, 20%)',
+    '--stsv-Common__background-color2--disabled': `hsla(0, 0%, 100%, 20%)`,
+    '--stsv-Disabled__background': 'repeating-linear-gradient(' +
+        '45deg,' +
+        'var(--stsv-Common__background-color1--disabled),' +
+        'var(--stsv-Common__background-color1--disabled) 3px,' +
+        'var(--stsv-Common__background-color2--disabled) 3px,' +
+        'var(--stsv-Common__background-color2--disabled) 6px' +
+        ')',
     '--stsv-Common__background-color--disabled': neutralColors.neutral96,
     '--stsv-Common__border-color--disabled': neutralColors.neutral75,
     '--stsv-Common__color--disabled': neutralColors.neutral75,