@geoffcox/sterling-svelte 0.0.31 → 1.0.0

package/TreeItemDisplay.svelte

@@ -1,35 +1,38 @@
-<script>import { getContext } from "svelte";
-import { TREE_CONTEXT_KEY } from "./Tree.constants";
-import TreeChevron from "./TreeChevron.svelte";
-import { readable } from "svelte/store";
-export let colorful = false;
+<script>import TreeChevron from './TreeChevron.svelte';
+// ----- Props ----- //
+/** The depth of the item in the tree. */
 export let depth = 0;
+/** When true, display the item as disabled. */
 export let disabled = false;
+/** When true, displays the item is expanded showing children. */
 export let expanded = false;
+/** When true, displays the item has children. */
 export let hasChildren = false;
+/** When true, display selected state. */
 export let selected = false;
+/** The value uniquely identifying the tree item within the tree. */
 export let value;
-const { disabled: treeDisabled } = getContext(TREE_CONTEXT_KEY) || {
-  disabled: readable(false)
-};
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
 let divRef;
+// ----- Methods ----- //
 export const click = () => {
-  divRef?.click();
+    divRef?.click();
 };
 export const blur = () => {
-  divRef?.blur();
+    divRef?.blur();
 };
 export const focus = (options) => {
-  divRef?.focus(options);
+    divRef?.focus(options);
 };
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   bind:this={divRef}
-  class="sterling-tree-item-display"
-  class:colorful
-  class:disabled={disabled && !$treeDisabled}
-  class:item-disabled={disabled}
+  class={`sterling-tree-item-display ${variant}`}
+  class:disabled
   class:expanded
   class:selected
   style={`--sterling-tree-item-depth: ${depth}`}
@@ -66,93 +69,6 @@ export const focus = (options) => {
   on:wheel|passive
   {...$$restProps}
 >
-  <TreeChevron {expanded} {hasChildren} />
-  <slot {colorful} {depth} {disabled} {expanded} {hasChildren} {selected} {value} />
+  <TreeChevron {expanded} {hasChildren} {variant} />
+  <slot {depth} {disabled} {expanded} {hasChildren} {selected} {value} {variant} />
 </div>
-
-<style>
-  .sterling-tree-item-display {
-    align-content: center;
-    align-items: center;
-    background-color: transparent;
-    box-sizing: border-box;
-    color: var(--stsv-input__color);
-    display: grid;
-    grid-template-columns: auto 1fr;
-    column-gap: 0.25em;
-    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-display:not(.item-disabled):not(.selected):hover {
-    background-color: var(--stsv-button__background-color--hover);
-    color: var(--stsv-button__color--hover);
-  }
-
-  .sterling-tree-item-display.selected {
-    background-color: var(--stsv-button__background-color--active);
-    color: var(--stsv-button__color--active);
-  }
-
-  .sterling-tree-item-display.colorful:not(.item-disabled):not(.selected):hover {
-    background-color: var(--stsv-button--colorful__background-color--hover);
-    color: var(--stsv-button--colorful__color--hover);
-  }
-
-  .sterling-tree-item-display.colorful.selected {
-    background-color: var(--stsv-button--colorful__background-color--active);
-    color: var(--stsv-button--colorful__color--active);
-  }
-
-  .sterling-tree-item-display.disabled {
-    cursor: not-allowed;
-    outline: none;
-  }
-
-  .sterling-tree-item-display::after {
-    background: repeating-linear-gradient(
-      var(--stsv-common--disabled__stripe-angle),
-      var(--stsv-common--disabled__stripe-color),
-      var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
-      var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
-      var(--stsv-common--disabled__stripe-color--alt)
-        calc(2 * var(--stsv-common--disabled__stripe-width))
-    );
-    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-display.leaf {
-    border: none;
-    background: currentColor;
-    border-radius: 50%;
-    height: 0.5em;
-    width: 0.5em;
-    margin: 0.5;
-    transform-origin: 50% 50%;
-  }
-
-  @media (prefers-reduced-motion) {
-    .sterling-tree-item-display,
-    .sterling-tree-item-display::after {
-      transition: none;
-    }
-  }
-</style>

package/TreeItemDisplay.svelte.d.ts

@@ -2,13 +2,13 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        colorful?: boolean | undefined;
         depth?: number | undefined;
         disabled?: boolean | undefined;
         expanded?: boolean | undefined;
         hasChildren?: boolean | undefined;
         selected?: boolean | undefined;
         value: string;
+        variant?: string | undefined;
         click?: (() => void) | undefined;
         blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -50,13 +50,13 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            colorful: boolean;
             depth: number;
             disabled: boolean;
             expanded: boolean;
             hasChildren: boolean;
             selected: boolean;
             value: string;
+            variant: string;
         };
     };
 };

package/actions/applyLightDarkMode.d.ts

@@ -0,0 +1,10 @@
+type Mode = 'auto' | 'light' | 'dark';
+type Params = {
+    atDocumentRoot?: boolean;
+    mode?: Mode;
+};
+export declare const applyLightDarkMode: (node: HTMLElement, params?: Params) => {
+    destroy(): void;
+    update(params?: Params): void;
+};
+export {};

package/actions/applyLightDarkMode.js

@@ -0,0 +1,36 @@
+import { prefersColorSchemeDark } from '../mediaQueries/prefersColorSchemeDark';
+const modes = ['light-mode', 'dark-mode'];
+const addMode = (element, mode, prefersDark) => {
+    const darkMode = mode === 'dark' || (mode === 'auto' && prefersDark);
+    element.classList.remove(...modes);
+    element.classList.add(modes[darkMode ? 1 : 0]);
+};
+const clearModes = (element) => {
+    element.classList.remove(...modes);
+};
+export const applyLightDarkMode = (node, params) => {
+    let mode = params?.mode || 'auto';
+    let prefersDark = false;
+    let atDocumentRoot = params?.atDocumentRoot === true;
+    let target = atDocumentRoot ? document.documentElement : node;
+    const unsubscribe = prefersColorSchemeDark.subscribe((value) => {
+        prefersDark = value;
+        addMode(target, mode, prefersDark);
+    });
+    addMode(target, mode, prefersDark);
+    return {
+        destroy() {
+            unsubscribe();
+        },
+        update(params) {
+            // if changing the target, then clear from previous target
+            if (atDocumentRoot !== params?.atDocumentRoot) {
+                clearModes(target);
+            }
+            mode = params?.mode || 'auto';
+            atDocumentRoot = params?.atDocumentRoot === true;
+            target = atDocumentRoot ? document.documentElement : node;
+            addMode(target, mode, prefersDark);
+        }
+    };
+};

package/actions/forwardEvents.js

@@ -1,4 +1,3 @@
-import { custom_event } from 'svelte/internal';
 export const forwardEvents = (node, params) => {
     const addListeners = (node, target, events, customEvents) => {
         let forward = (event) => {
@@ -6,9 +5,10 @@ export const forwardEvents = (node, params) => {
         };
         let forwardCustom = (event) => {
             const customEvent = event;
-            target.dispatchEvent(custom_event(customEvent.type, customEvent.detail, {
+            target.dispatchEvent(new CustomEvent(customEvent.type, {
                 bubbles: customEvent.bubbles,
-                cancelable: customEvent.cancelable
+                cancelable: customEvent.cancelable,
+                detail: customEvent.detail
             }));
         };
         events?.forEach((e) => node.addEventListener(e, forward));

package/css/Button.base.css

@@ -0,0 +1,74 @@
+.sterling-button {
+  align-content: center;
+  align-items: center;
+  background-color: var(--stsv-button__background-color);
+  border-color: var(--stsv-button__border-color);
+  border-radius: 8px;
+  border-style: solid;
+  border-width: 2px;
+  box-sizing: border-box;
+  color: var(--stsv-button__color);
+  cursor: pointer;
+  display: inline-flex;
+  flex-direction: row;
+  font: inherit;
+  justify-content: center;
+  justify-items: center;
+  column-gap: 0.25em;
+  overflow: hidden;
+  padding: 0.5em 1em;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  transition: background-color 250ms, color 250ms, border-color 250ms;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.sterling-button:hover {
+  background-color: var(--stsv-button__background-color--hover);
+  border-color: var(--stsv-button__border-color--hover);
+  color: var(--stsv-button__color--hover);
+}
+
+.sterling-button:active {
+  background-color: var(--stsv-button__background-color--active);
+  border-color: var(--stsv-button__border-color--active);
+  color: var(--stsv-button__color--active);
+}
+
+.sterling-button:focus-visible {
+  border-color: var(--stsv-button__border-color--focus);
+  outline-color: var(--stsv-common__outline-color);
+  outline-offset: 0;
+  outline-style: solid;
+  outline-width: 2px;
+}
+
+.sterling-button:disabled {
+  cursor: not-allowed;
+  position: relative;
+}
+
+.sterling-button:disabled::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: repeating-linear-gradient(
+    var(--stsv-common--disabled__stripe-angle),
+    var(--stsv-common--disabled__stripe-color),
+    var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
+    var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
+    var(--stsv-common--disabled__stripe-color--alt)
+      calc(2 * var(--stsv-common--disabled__stripe-width))
+  );
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion) {
+  .sterling-button {
+    transition: none;
+  }
+}

package/css/Button.colorful.css

@@ -0,0 +1,17 @@
+.sterling-button.colorful {
+  background-color: var(--stsv-button--colorful__background-color);
+  border-color: var(--stsv-button--colorful__border-color);
+  color: var(--stsv-button--colorful__color);
+}
+
+.sterling-button.colorful:hover {
+  background-color: var(--stsv-button--colorful__background-color--hover);
+  border-color: var(--stsv-button--colorful__border-color--hover);
+  color: var(--stsv-button--colorful__color--hover);
+}
+
+.sterling-button.colorful:active {
+  background-color: var(--stsv-button--colorful__background-color--active);
+  border-color: var(--stsv-button--colorful__border-color--active);
+  color: var(--stsv-button--colorful__color--active);
+}

package/css/Button.css

@@ -0,0 +1,7 @@
+@import url('./Button.base.css');
+@import url('./Button.colorful.css');
+@import url('./Button.shapes.css');
+@import url('./Button.secondary.css');
+@import url('./Button.secondary.colorful.css');
+@import url('./Button.tool.css');
+@import url('./Button.tool.colorful.css');

package/css/Button.secondary.colorful.css

@@ -0,0 +1,15 @@
+.sterling-button.secondary.colorful {
+  border-color: var(--stsv-button--colorful__border-color);
+  color: var(--stsv-button--colorful__border-color);
+}
+.sterling-button.secondary.colorful:hover {
+  background-color: var(--stsv-button--colorful__background-color--hover);
+  border-color: var(--stsv-button--colorful__border-color--hover);
+  color: var(--stsv-button--colorful__color--hover);
+}
+
+.sterling-button.secondary.colorful:active {
+  background-color: var(--stsv-button--colorful__background-color--active);
+  border-color: var(--stsv-button--colorful__border-color--active);
+  color: var(--stsv-button--colorful__color--active);
+}

package/css/Button.secondary.css

@@ -0,0 +1,11 @@
+.sterling-button.secondary {
+  background-color: transparent;
+}
+
+.sterling-button.secondary:hover {
+  background-color: var(--stsv-button__background-color--hover);
+}
+
+.sterling-button.secondary:active {
+  background-color: var(--stsv-button__background-color--active);
+}

package/css/Button.shapes.css

@@ -0,0 +1,14 @@
+.sterling-button.capsule {
+  border-radius: 10000px;
+  padding: 0.5em;
+}
+
+.sterling-button.circular {
+  border-radius: 10000px;
+  padding: 0.5em;
+  aspect-ratio: 1 /1;
+}
+
+.sterling-button.square {
+  border-radius: 0;
+}

package/css/Button.tool.colorful.css

@@ -0,0 +1,13 @@
+.sterling-button.tool.colorful {
+  color: var(--stsv-button--colorful__border-color);
+}
+
+.sterling-button.tool.colorful:hover {
+  background-color: var(--stsv-button--colorful__background-color--hover);
+  color: var(--stsv-button--colorful__color--hover);
+}
+
+.sterling-button.tool.colorful:active {
+  background-color: var(--stsv-button--colorful__background-color--active);
+  color: var(--stsv-button--colorful__color--active);
+}

package/css/Button.tool.css

@@ -0,0 +1,18 @@
+.sterling-button.tool {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.sterling-button.tool:hover {
+  background-color: var(--stsv-button__background-color--hover);
+  border-color: transparent;
+}
+
+.sterling-button.tool:active {
+  background-color: var(--stsv-button__background-color--active);
+  border-color: transparent;
+}
+
+.sterling-button.tool:focus-visible {
+  border-color: var(--stsv-button__border-color--focus);
+}

package/css/Callout.base.css

@@ -0,0 +1,43 @@
+.sterling-callout-portal {
+  position: relative;
+  overflow: visible;
+}
+
+.sterling-callout {
+  background-color: var(--stsv-common__background-color);
+  border-color: var(--stsv-common__border-color);
+  border-radius: 0;
+  border-style: solid;
+  border-width: 2px;
+  box-shadow: var(--stsv-common__box-shadow);
+  box-sizing: border-box;
+  color: var(--stsv-common__color);
+  display: none;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  height: fit-content;
+  left: 0;
+  overflow: visible;
+  position: absolute;
+  top: 0;
+  width: max-content;
+  z-index: 0;
+}
+
+.sterling-callout.open {
+  display: grid;
+}
+
+.sterling-callout .arrow {
+  position: absolute;
+  box-sizing: border-box;
+  width: 14px;
+  height: 14px;
+  background-color: inherit;
+  border-color: inherit;
+  border-style: inherit;
+  border-width: inherit;
+  /* This clip path clips 1/2 the square to create a triangle */
+  /* The -100% and 200% allow for the drop-shadow to not be clipped */
+  clip-path: polygon(-100% -100%, 200% -100%, 200% 200%, -100% -100%);
+}

package/css/Callout.colorful.css

@@ -0,0 +1,5 @@
+.sterling-callout.colorful {
+  background-color: var(--stsv-button--colorful__background-color);
+  border-color: var(--stsv-button--colorful__border-color);
+  color: var(--stsv-button--colorful__color);
+}

package/css/Callout.css

@@ -0,0 +1,2 @@
+@import url('./Callout.base.css');
+@import url('./Callout.colorful.css');

package/css/Checkbox.base.css

@@ -0,0 +1,145 @@
+.sterling-checkbox {
+  align-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  display: inline-flex;
+  font: inherit;
+  margin: 0;
+  outline: none;
+  padding: 0;
+}
+
+/* 
+The container 
+- allows the input to be hidden
+- avoids input participating in layout
+- prevents collisions with surrounding slots
+*/
+.sterling-checkbox .container {
+  font: inherit;
+  position: relative;
+  display: grid;
+  align-items: center;
+  margin-right: 0.25em;
+}
+
+/*
+The input is hidden since the built-in browser checkbox cannot be customized
+*/
+.sterling-checkbox input {
+  font: inherit;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  opacity: 0;
+  height: 20px;
+  width: 20px;
+}
+
+/*
+The indicator handles both the box and the checkmark.
+The box cannot be on the container since the adjacent sibling selector is needed
+and there is not a parent CSS selector.
+*/
+.sterling-checkbox .indicator {
+  background-color: var(--stsv-input__background-color);
+  border-color: var(--stsv-input__border-color);
+  border-style: solid;
+  border-width: 2px;
+  box-sizing: border-box;
+  display: inline-block;
+  height: 20px;
+  position: relative;
+  transition: background-color 250ms, color 250ms, border-color 250ms;
+  width: 20px;
+  pointer-events: none;
+}
+
+.sterling-checkbox input:checked + .indicator {
+  background-color: var(--stsv-input__background-color);
+  border-color: var(--stsv-input__border-color);
+}
+
+.sterling-checkbox:not(.disabled):hover .indicator {
+  background-color: var(--stsv-input__background-color--hover);
+  border-color: var(--stsv-input__border-color--hover);
+}
+
+.sterling-checkbox input:focus-visible + .indicator {
+  outline-color: var(--stsv-common__outline-color);
+  outline-offset: 0;
+  outline-style: solid;
+  outline-width: 2px;
+}
+
+/*
+The checkmark is a rotated L centered in the box.
+*/
+.sterling-checkbox .indicator::after {
+  border-color: var(--stsv-input__color);
+  border-style: solid;
+  border-width: 0 3px 3px 0;
+  box-sizing: border-box;
+  content: '';
+  height: 14px;
+  left: 50%;
+  position: absolute;
+  top: 45%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  transform-origin: center;
+  transition: border-color 250ms, opacity 150ms;
+  width: 7px;
+  opacity: 0;
+}
+
+.sterling-checkbox input:checked + .indicator::after {
+  opacity: 1;
+}
+
+.sterling-checkbox:not(.disabled):hover input:checked + .indicator::after {
+  border-color: var(--stsv-input__color--hover);
+}
+
+.sterling-checkbox.disabled,
+.sterling-checkbox.disabled input {
+  cursor: not-allowed;
+}
+
+.sterling-checkbox .container::after {
+  background: repeating-linear-gradient(
+    var(--stsv-common--disabled__stripe-angle),
+    var(--stsv-common--disabled__stripe-color),
+    var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
+    var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
+    var(--stsv-common--disabled__stripe-color--alt)
+      calc(2 * var(--stsv-common--disabled__stripe-width))
+  );
+  bottom: 0;
+  content: '';
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  pointer-events: none;
+  transition: opacity 250ms;
+}
+
+.sterling-checkbox > label {
+  color: var(--stsv-common__color);
+  transition: color 250ms;
+  font: inherit;
+}
+
+.sterling-checkbox.disabled .container::after {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion) {
+  .sterling-checkbox .indicator,
+  .sterling-checkbox .indicator::after,
+  .sterling-checkbox .container::after,
+  .sterling-checkbox > label {
+    transition: none;
+  }
+}

package/css/Checkbox.colorful.css

@@ -0,0 +1,17 @@
+.sterling-checkbox.colorful .indicator {
+  background-color: var(--stsv-input--colorful__background-color);
+  border-color: var(--stsv-input--colorful__border-color);
+}
+
+.sterling-checkbox.colorful:not(.disabled):hover .indicator {
+  background-color: var(--stsv-input--colorful__background-color--hover);
+  border-color: var(--stsv-input--colorful__border-color--hover);
+}
+
+.sterling-checkbox.colorful .indicator::after {
+  border-color: var(--stsv-input--colorful__color);
+}
+
+.sterling-checkbox.colorful:not(.disabled):hover input:checked + .indicator::after {
+  border-color: var(--stsv-input--colorful__color--hover);
+}

package/css/Checkbox.css

@@ -0,0 +1,2 @@
+@import url('./Checkbox.base.css');
+@import url('./Checkbox.colorful.css');

package/css/ColorPicker.base.css

@@ -0,0 +1,23 @@
+.sterling-color-picker .value {
+  display: grid;
+  align-items: center;
+  justify-content: stretch;
+  justify-items: stretch;
+  grid-template-columns: auto 1fr;
+  padding-left: 0.5em;
+  width: 250px;
+}
+
+.sterling-color-picker .color-box {
+  width: 1em;
+  height: 1em;
+  border: 1px dashed var(--stsv-common__border-color);
+}
+
+.sterling-color-picker-popup {
+  width: fit-content;
+  min-width: 500px;
+  display: grid;
+  align-items: center;
+  padding: 0.25em;
+}

package/css/ColorPicker.css

@@ -0,0 +1 @@
+@import url('./ColorPicker.base.css');