@geoffcox/sterling-svelte 0.0.23 → 0.0.24

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>

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);
   }
@@ -294,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

@@ -69,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,8 +25,9 @@ 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}`}
@@ -62,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;
@@ -74,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%;
@@ -107,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",

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,