@geoffcox/sterling-svelte 0.0.23 → 0.0.25

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/actions/clickOutside.d.ts

@@ -1,3 +1,14 @@
-export declare const clickOutside: (node: HTMLElement) => {
+type Params = {
+    /** Other elements should not raise the event if clicked. */
+    ignoreOthers?: HTMLElement[];
+};
+/**
+ * Raises the click_outside event when the user clicks outside the node.
+ * @param node The node to check and receive the event.
+ * @param params Additional parameters
+ */
+export declare const clickOutside: (node: HTMLElement, params?: Params) => {
+    update(params: Params): void;
     destroy(): void;
 };
+export {};

package/actions/clickOutside.js

@@ -1,7 +1,15 @@
-export const clickOutside = (node) => {
+/**
+ * Raises the click_outside event when the user clicks outside the node.
+ * @param node The node to check and receive the event.
+ * @param params Additional parameters
+ */
+export const clickOutside = (node, params) => {
+    let ignoreOthers = params?.ignoreOthers;
     const handleClick = (event) => {
         const targetNode = event?.target;
-        if (targetNode && !node.contains(targetNode)) {
+        if (targetNode &&
+            !node.contains(targetNode) &&
+            (!ignoreOthers || ignoreOthers.every((x) => !x.contains(targetNode)))) {
             node.dispatchEvent(new CustomEvent('click_outside', {
                 detail: { mouseEvent: event }
             }));
@@ -9,6 +17,9 @@ export const clickOutside = (node) => {
     };
     document.addEventListener('click', handleClick, true);
     return {
+        update(params) {
+            ignoreOthers = params.ignoreOthers;
+        },
         destroy() {
             document.removeEventListener('click', handleClick, true);
         }

package/index.d.ts

@@ -51,6 +51,7 @@ import MenuButton from './MenuButton.svelte';
 import MenuItem from './MenuItem.svelte';
 import MenuItemDisplay from './MenuItemDisplay.svelte';
 import MenuSeparator from './MenuSeparator.svelte';
+import Popover from './Popover.svelte';
 import Progress from './Progress.svelte';
 import Radio from './Radio.svelte';
 import Select from './Select.svelte';
@@ -64,4 +65,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, Dropdown, Field, Input, Label, Link, 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, Dropdown, Field, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Popover, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };

package/index.js

@@ -43,6 +43,7 @@ import MenuButton from './MenuButton.svelte';
 import MenuItem from './MenuItem.svelte';
 import MenuItemDisplay from './MenuItemDisplay.svelte';
 import MenuSeparator from './MenuSeparator.svelte';
+import Popover from './Popover.svelte';
 import Progress from './Progress.svelte';
 import Radio from './Radio.svelte';
 import Select from './Select.svelte';
@@ -56,4 +57,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, Dropdown, Field, Input, Label, Link, 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, Dropdown, Field, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Popover, 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.23",
+  "version": "0.0.25",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -78,6 +78,7 @@
     "./MenuItem.utils": "./MenuItem.utils.js",
     "./MenuItemDisplay.svelte": "./MenuItemDisplay.svelte",
     "./MenuSeparator.svelte": "./MenuSeparator.svelte",
+    "./Popover.svelte": "./Popover.svelte",
     "./Progress.constants": "./Progress.constants.js",
     "./Progress.svelte": "./Progress.svelte",
     "./Progress.types": "./Progress.types.js",

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,