@geoffcox/sterling-svelte 0.0.16 → 0.0.17

package/{containers/MenuBar.svelte → MenuBar.svelte}

@@ -2,34 +2,34 @@
 import { menuBarContextKey, menuItemContextKey } from "./Menus.constants";
 import { writable } from "svelte/store";
 const dispatch = createEventDispatcher();
-const raiseClose = (menuItemId) => {
-  dispatch("close", { menuItemId });
+const raiseClose = (value) => {
+  dispatch("close", { value });
 };
-const raiseOpen = (menuItemId) => {
-  dispatch("open", { menuItemId });
+const raiseOpen = (value) => {
+  dispatch("open", { value });
 };
-const raiseSelect = (menuItemId) => {
-  dispatch("select", { menuItemId });
+const raiseSelect = (value) => {
+  dispatch("select", { value });
 };
 const children = writable([]);
-const openPreviousChild = (fromMenuItemId) => {
-  const index = $children?.findIndex((menuItem) => menuItem.id === fromMenuItemId);
+const openPreviousChild = (currentValue) => {
+  const index = $children?.findIndex((menuItem) => menuItem.value === currentValue);
   if (index !== -1) {
     const focusIndex = index === 0 ? $children.length - 1 : index - 1;
     $children[focusIndex].focus();
     $children[focusIndex].open();
   }
 };
-const openNextChild = (fromMenuItemId) => {
-  const index = $children?.findIndex((menuItem) => menuItem.id === fromMenuItemId);
+const openNextChild = (currentValue) => {
+  const index = $children?.findIndex((menuItem) => menuItem.value === currentValue);
   if (index !== -1) {
     const focusIndex = (index + 1) % $children.length;
     $children[focusIndex].focus();
     $children[focusIndex].open();
   }
 };
-const focusChild = (menuItemId) => {
-  const focusIndex = $children?.findIndex((menuItem) => menuItem.id === menuItemId);
+const focusChild = (value) => {
+  const focusIndex = $children?.findIndex((menuItem) => menuItem.value === value);
   if (focusIndex !== -1) {
     $children[focusIndex].focus();
   }
@@ -39,7 +39,7 @@ setContext(menuItemContextKey, {
     children.set([...$children, menuItem]);
   },
   unregister: (menuItem) => {
-    children.set($children.filter((x) => x.id !== menuItem.id));
+    children.set($children.filter((x) => x.value !== menuItem.value));
   },
   closeMenu: (recursive) => {
   },

package/{buttons/MenuButton.svelte → MenuButton.svelte}

@@ -2,29 +2,29 @@
 import { createEventDispatcher, getContext, setContext } from "svelte";
 import { writable } from "svelte/store";
 import Button from "./Button.svelte";
-import Menu from "../containers/Menu.svelte";
-import { menuItemContextKey } from "../containers/Menus.constants";
-import { focusFirstChild, focusNextChild, focusPreviousChild } from "../containers/Menus.utils";
-export let menuItemId;
+import Menu from "./Menu.svelte";
+import { menuItemContextKey } from "./Menus.constants";
+import { focusFirstChild, focusNextChild, focusPreviousChild } from "./Menus.utils";
 export let open = false;
 export let shape = "rounded";
+export let value;
 export let variant = "regular";
 const instanceId = uuid();
 let reference;
 $:
-  menuId = `${menuItemId}-menu-${instanceId}`;
+  menuId = `${value}-menu-${instanceId}`;
 $:
   hasChildren = $$slots.items;
 const children = writable([]);
 const dispatch = createEventDispatcher();
-const raiseClose = (menuItemId2) => {
-  dispatch("close", { menuItemId: menuItemId2 });
+const raiseClose = (value2) => {
+  dispatch("close", { value: value2 });
 };
-const raiseOpen = (menuItemId2) => {
-  dispatch("open", { menuItemId: menuItemId2 });
+const raiseOpen = (value2) => {
+  dispatch("open", { value: value2 });
 };
-const raiseSelect = (menuItemId2) => {
-  dispatch("select", { menuItemId: menuItemId2 });
+const raiseSelect = (value2) => {
+  dispatch("select", { value: value2 });
 };
 const onClick = () => {
   open = !open;
@@ -33,19 +33,19 @@ const onClick = () => {
   }
 };
 setContext(menuItemContextKey, {
-  rootMenuItemId: menuItemId,
+  rootValue: value,
   depth: 1,
   register: (menuItem) => {
     children.set([...$children, menuItem]);
   },
   unregister: (menuItem) => {
-    children.set($children.filter((x) => x.id !== menuItem.id));
+    children.set($children.filter((x) => x.value !== menuItem.value));
   },
   closeMenu: (recursive) => {
     open = false;
   },
-  focusPrevious: (fromMenuItemId) => focusPreviousChild($children, fromMenuItemId),
-  focusNext: (fromMenuItemId) => focusNextChild($children, fromMenuItemId),
+  focusPrevious: (currentValue) => focusPreviousChild($children, currentValue),
+  focusNext: (currentValue) => focusNextChild($children, currentValue),
   onOpen: raiseOpen,
   onClose: raiseClose,
   onSelect: raiseSelect
@@ -61,8 +61,8 @@ setContext(menuItemContextKey, {
   aria-expanded={open}
   aria-haspopup={hasChildren}
   aria-owns={menuId}
-  data-menu-item-id={menuItemId}
-  data-root-menu-item-id={menuItemId}
+  data-value={value}
+  data-root-value={value}
   {variant}
   {shape}
   on:blur

package/{buttons/MenuButton.svelte.d.ts → MenuButton.svelte.d.ts}

@@ -3,9 +3,9 @@ import type { ButtonShape, ButtonVariant } from './Button.types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        menuItemId: string;
         open?: boolean | undefined;
         shape?: ButtonShape | undefined;
+        value: string;
         variant?: ButtonVariant | undefined;
     };
     events: {

package/{containers/MenuItem.svelte → MenuItem.svelte}

@@ -2,7 +2,7 @@
 import { v4 as uuid } from "uuid";
 import { getContext, onMount, setContext } from "svelte";
 import { writable } from "svelte/store";
-import { clickOutside } from "../clickOutside";
+import { clickOutside } from "./actions/clickOutside";
 import { afterUpdate, createEventDispatcher } from "svelte/internal";
 import MenuItemDisplay from "./MenuItemDisplay.svelte";
 import { menuBarContextKey, menuItemContextKey } from "./Menus.constants";
@@ -17,11 +17,11 @@ export let checked = false;
 export let composed = false;
 export let disabled = false;
 export let open = false;
-export let menuItemId;
+export let value;
 export let role = "menuitem";
 export let text = void 0;
 const {
-  rootMenuItemId = menuItemId,
+  rootValue = value,
   depth = 0,
   register = void 0,
   unregister = void 0,
@@ -32,24 +32,12 @@ const {
   onClose = void 0,
   onSelect = void 0
 } = getContext(menuItemContextKey) || {};
-console.log({
-  rootMenuItemId,
-  depth,
-  register,
-  unregister,
-  closeMenu,
-  focusPrevious,
-  focusNext,
-  onOpen,
-  onClose,
-  onSelect
-});
 const { openPreviousMenu = void 0, openNextMenu = void 0 } = getContext(menuBarContextKey) || {};
 const instanceId = uuid();
 $:
-  displayId = `${menuItemId}-display-${instanceId}`;
+  displayId = `${value}-display-${instanceId}`;
 $:
-  menuId = `${menuItemId}-menu-${instanceId}`;
+  menuId = `${value}-menu-${instanceId}`;
 let menuItemRef;
 const children = writable([]);
 let mounted = false;
@@ -57,28 +45,28 @@ let prevOpen = open;
 $:
   hasChildren = $$slots.default;
 const dispatch = createEventDispatcher();
-const raiseClose = (menuItemId2) => {
-  dispatch("close", { menuItemId: menuItemId2 });
-  onClose?.(menuItemId2);
+const raiseClose = (value2) => {
+  dispatch("close", { value: value2 });
+  onClose?.(value2);
 };
-const raiseOpen = (menuItemId2) => {
-  dispatch("open", { menuItemId: menuItemId2 });
-  onOpen?.(menuItemId2);
+const raiseOpen = (value2) => {
+  dispatch("open", { value: value2 });
+  onOpen?.(value2);
 };
 $: {
   if (hasChildren && open !== prevOpen) {
-    open ? raiseOpen(menuItemId) : raiseClose(menuItemId);
+    open ? raiseOpen(value) : raiseClose(value);
   }
   prevOpen = open;
 }
-const raiseSelect = (menuItemId2) => {
-  dispatch("select", { menuItemId: menuItemId2 });
-  onSelect?.(menuItemId2);
+const raiseSelect = (value2) => {
+  dispatch("select", { value: value2 });
+  onSelect?.(value2);
 };
 let keyborg = createKeyborg(window);
 let usingKeyboard = keyborg.isNavigatingWithKeyboard();
-const keyborgHandler = (value) => {
-  usingKeyboard = value;
+const keyborgHandler = (value2) => {
+  usingKeyboard = value2;
 };
 const autoFocusFirstChild = (open2, insideMenu) => {
   if (open2 && insideMenu) {
@@ -91,7 +79,7 @@ onMount(() => {
   mounted = true;
   keyborg.subscribe(keyborgHandler);
   const menuItemSelf = {
-    id: menuItemId,
+    value,
     open: () => {
       open = true;
     },
@@ -121,7 +109,7 @@ const onKeyDown = (event) => {
           event.preventDefault();
           return false;
         } else if (depth > 0) {
-          focusNext?.(menuItemId);
+          focusNext?.(value);
           event.preventDefault();
           return false;
         }
@@ -130,7 +118,7 @@ const onKeyDown = (event) => {
         if (depth < 2) {
           open = false;
           closeMenu?.(true);
-          openPreviousMenu?.(rootMenuItemId);
+          openPreviousMenu?.(rootValue);
         } else {
           closeMenu?.();
         }
@@ -143,7 +131,7 @@ const onKeyDown = (event) => {
         } else {
           open = false;
           closeMenu?.(true);
-          openNextMenu?.(rootMenuItemId);
+          openNextMenu?.(rootValue);
         }
         event.preventDefault();
         return false;
@@ -154,7 +142,7 @@ const onKeyDown = (event) => {
           event.preventDefault();
           return false;
         } else if (depth > 0) {
-          focusPrevious?.(menuItemId);
+          focusPrevious?.(value);
           event.preventDefault();
           return false;
         }
@@ -179,7 +167,7 @@ const onMenuItemClick = (event) => {
       event.stopPropagation();
       return false;
     } else {
-      raiseSelect(menuItemId);
+      raiseSelect(value);
       closeMenu?.(true);
     }
   }
@@ -190,7 +178,7 @@ const onClickOutside = (event) => {
   } = event;
   let element = mouseEvent.target;
   while (element) {
-    if (element.getAttribute("data-root-menu-item-id") === rootMenuItemId) {
+    if (element.getAttribute("data-root-value") === rootValue) {
       return;
     }
     element = element.parentElement;
@@ -198,13 +186,13 @@ const onClickOutside = (event) => {
   closeMenu?.(true);
 };
 setContext(menuItemContextKey, {
-  rootMenuItemId,
+  rootValue,
   depth: depth + 1,
   register: (menuItem) => {
     children.set([...$children, menuItem]);
   },
   unregister: (menuItem) => {
-    children.set($children.filter((x) => x.id !== menuItem.id));
+    children.set($children.filter((x) => x.value !== menuItem.value));
   },
   closeMenu: (recursive) => {
     open = false;
@@ -215,8 +203,8 @@ setContext(menuItemContextKey, {
       menuItemRef?.focus();
     }
   },
-  focusPrevious: (fromMenuItemId) => focusPreviousChild($children, fromMenuItemId),
-  focusNext: (fromMenuItemId) => focusNextChild($children, fromMenuItemId),
+  focusPrevious: (currentValue) => focusPreviousChild($children, currentValue),
+  focusNext: (currentValue) => focusNextChild($children, currentValue),
   onOpen: raiseOpen,
   onClose: raiseClose,
   onSelect: raiseSelect
@@ -234,8 +222,8 @@ setContext(menuItemContextKey, {
   class:composed
   class:disabled
   class:using-keyboard={usingKeyboard}
-  data-menu-item-id={menuItemId}
-  data-root-menu-item-id={rootMenuItemId}
+  data-value={value}
+  data-root-value={rootValue}
   {role}
   tabindex={0}
   type="button"
@@ -272,7 +260,7 @@ setContext(menuItemContextKey, {
   {...$$restProps}
 >
   <div class="item" id={displayId}>
-    <slot name="item" {checked} {disabled} {hasChildren} {depth} {menuItemId} {open} {role} {text}>
+    <slot name="item" {checked} {disabled} {hasChildren} {depth} {value} {open} {role} {text}>
       <MenuItemDisplay {checked} hasChildren={depth > 0 && hasChildren} menuItemRole={role}
         >{text}</MenuItemDisplay
       >
@@ -289,11 +277,11 @@ setContext(menuItemContextKey, {
   .sterling-menu-item {
     background-color: transparent;
     border-color: transparent;
-    border-radius: var(--Button__border-radius);
+    border-radius: var(--stsv-Button__border-radius);
     border-style: none;
     border-width: 0;
     box-sizing: border-box;
-    color: var(--Common__color);
+    color: var(--stsv-Common__color);
     cursor: pointer;
     font: inherit;
     margin: 0;
@@ -309,8 +297,8 @@ setContext(menuItemContextKey, {
   }
 
   .sterling-menu-item:hover {
-    background-color: var(--Button__background-color--hover);
-    color: var(--Button__color--hover);
+    background-color: var(--stsv-Button__background-color--hover);
+    color: var(--stsv-Button__color--hover);
   }
 
   .sterling-menu-item:focus {
@@ -318,19 +306,19 @@ setContext(menuItemContextKey, {
   }
 
   .sterling-menu-item.using-keyboard:focus {
-    border-color: var(--Button__border-color--focus);
-    outline-color: var(--Common__outline-color);
-    outline-offset: var(--Common__outline-offset);
-    outline-style: var(--Common__outline-style);
-    outline-width: var(--Common__outline-width);
+    border-color: var(--stsv-Button__border-color--focus);
+    outline-color: var(--stsv-Common__outline-color);
+    outline-offset: var(--stsv-Common__outline-offset);
+    outline-style: var(--stsv-Common__outline-style);
+    outline-width: var(--stsv-Common__outline-width);
   }
 
   .sterling-menu-item:focus {
-    background-color: var(--Input__background-color--selected);
+    background-color: var(--stsv-Input__background-color--selected);
   }
 
   .sterling-menu-item.disabled {
-    color: var(--Input__color--disabled);
+    color: var(--stsv-Common__color--disabled);
   }
 
   .sterling-menu-item.composed,

package/{containers/MenuItem.svelte.d.ts → MenuItem.svelte.d.ts}

@@ -6,7 +6,7 @@ declare const __propDef: {
         composed?: boolean | undefined;
         disabled?: boolean | undefined;
         open?: boolean | undefined;
-        menuItemId: string;
+        value: string;
         role?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
         text?: string | undefined;
     };
@@ -45,7 +45,7 @@ declare const __propDef: {
             disabled: boolean;
             hasChildren: boolean;
             depth: number;
-            menuItemId: string;
+            value: string;
             open: boolean;
             role: "menuitem" | "menuitemcheckbox" | "menuitemradio";
             text: string | undefined;

package/{containers/MenuSeparator.svelte → MenuSeparator.svelte}

@@ -35,8 +35,8 @@ A styled line to visually separate menu items in a menu.
 
 <style>
   .sterling-menu-item-separator {
-    height: var(--Common__border-width);
-    background-color: var(--Common__border-color);
+    height: var(--stsv-Common__border-width);
+    background-color: var(--stsv-Common__border-color);
     margin: 0.1em 0;
   }
 </style>

package/Menus.types.d.ts

@@ -0,0 +1,22 @@
+export type MenuItemRegistration = {
+    value: string;
+    open: () => void;
+    close: () => void;
+    focus: () => void;
+};
+export type MenuBarContext = {
+    openPreviousMenu?: (currentValue: string) => void;
+    openNextMenu?: (currentValue: string) => void;
+};
+export type MenuItemContext = {
+    rootValue?: string;
+    depth?: number;
+    register?: (menuItem: MenuItemRegistration) => void;
+    unregister?: (menuItem: MenuItemRegistration) => void;
+    focusPrevious?: (currentValue: string) => void;
+    focusNext?: (currentValue: string) => void;
+    closeMenu?: (recursive?: boolean) => void;
+    onOpen?: (value: string) => void;
+    onClose?: (value: string) => void;
+    onSelect?: (value: string) => void;
+};

package/{containers/Menus.utils.d.ts → Menus.utils.d.ts}

@@ -1,5 +1,5 @@
 import type { MenuItemRegistration } from './Menus.types';
-export declare const focusPreviousChild: (children: MenuItemRegistration[], fromMenuItemId: string) => void;
-export declare const focusNextChild: (children: MenuItemRegistration[], fromMenuItemId: string) => void;
+export declare const focusPreviousChild: (children: MenuItemRegistration[], currentValue: string) => void;
+export declare const focusNextChild: (children: MenuItemRegistration[], currentValue: string) => void;
 export declare const focusFirstChild: (children: MenuItemRegistration[]) => void;
 export declare const focusLastChild: (children: MenuItemRegistration[]) => void;

package/{containers/Menus.utils.js → Menus.utils.js}

@@ -1,20 +1,20 @@
-export const focusPreviousChild = (children, fromMenuItemId) => {
-    const index = children?.findIndex((menuItem) => menuItem.id === fromMenuItemId);
+export const focusPreviousChild = (children, currentValue) => {
+    const index = children?.findIndex((menuItem) => menuItem.value === currentValue);
     if (index !== -1) {
         const focusIndex = index === 0 ? children.length - 1 : index - 1;
         children[focusIndex].focus();
     }
 };
-export const focusNextChild = (children, fromMenuItemId) => {
-    const index = children?.findIndex((menuItem) => menuItem.id === fromMenuItemId);
+export const focusNextChild = (children, currentValue) => {
+    const index = children?.findIndex((menuItem) => menuItem.value === currentValue);
     if (index !== -1) {
         const focusIndex = (index + 1) % children.length;
         children[focusIndex].focus();
     }
 };
 export const focusFirstChild = (children) => {
-    children[0]?.focus();
+    children?.[0]?.focus();
 };
 export const focusLastChild = (children) => {
-    children[children.length - 1]?.focus();
+    children?.[children.length - 1]?.focus();
 };

package/{surfaces/Portal.svelte → Portal.svelte}

@@ -1,4 +1,4 @@
-<script>import { portal } from "../portal";
+<script>import { portal } from "./actions/portal";
 export let target = document.body;
 </script>
 

package/{display/Progress.svelte → Progress.svelte}

@@ -1,5 +1,5 @@
 <script>import { v4 as uuid } from "uuid";
-import Label from "../display/Label.svelte";
+import Label from "./Label.svelte";
 export let value = 0;
 export let max = 100;
 export let percent = 0;
@@ -91,14 +91,14 @@ $:
 
   .progress-bar {
     display: block;
-    background: var(--Common__background-color);
+    background: var(--stsv-Common__background-color);
     box-sizing: border-box;
     height: 1em;
     padding: 0.2em;
-    border-width: var(--Common__border-width);
-    border-style: var(--Common__border-style);
-    border-color: var(--Common__border-color);
-    border-radius: var(--Common__border-radius);
+    border-width: var(--stsv-Common__border-width);
+    border-style: var(--stsv-Common__border-style);
+    border-color: var(--stsv-Common__border-color);
+    border-radius: var(--stsv-Common__border-radius);
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
@@ -111,7 +111,7 @@ $:
   }
 
   .indicator {
-    background-color: var(--Display__color);
+    background-color: var(--stsv-Display__color);
     box-sizing: border-box;
     height: 100%;
     min-height: 1px;
@@ -147,30 +147,30 @@ $:
   /* ----- Colorful ----- */
 
   .indicator.progress {
-    background-color: var(--Display__color--progress);
+    background-color: var(--stsv-Display__color--progress);
   }
 
   .indicator.success {
-    background-color: var(--Display__color--success);
+    background-color: var(--stsv-Display__color--success);
   }
 
   .indicator.warning {
-    background-color: var(--Display__color--warning);
+    background-color: var(--stsv-Display__color--warning);
   }
 
   .indicator.error {
-    background-color: var(--Display__color--error);
+    background-color: var(--stsv-Display__color--error);
   }
 
   /* ----- Disabled ----- */
 
   .sterling-progress.disabled .progress-bar {
-    background: var(--Common__background-color--disabled);
-    border-color: var(--Common__border-color--disabled);
+    background: var(--stsv-Common__background-color--disabled);
+    border-color: var(--stsv-Common__border-color--disabled);
   }
 
   .sterling-progress.disabled .indicator {
-    background-color: var(--Display__color--disabled);
+    background-color: var(--stsv-Display__color--disabled);
   }
 
   @media (prefers-reduced-motion) {

package/{inputs/Radio.svelte → Radio.svelte}

@@ -1,6 +1,6 @@
 <script>import { onMount } from "svelte";
 import { v4 as uuid } from "uuid";
-import Label from "../display/Label.svelte";
+import Label from "./Label.svelte";
 export let checked = false;
 export let group = void 0;
 export let disabled = false;
@@ -114,10 +114,10 @@ $: {
 		and there is not a parent CSS selector.
 	*/
   .indicator {
-    background-color: var(--Input__background-color);
-    border-color: var(--Input__border-color);
-    border-style: var(--Input__border-style);
-    border-width: var(--Input__border-width);
+    background-color: var(--stsv-Input__background-color);
+    border-color: var(--stsv-Input__border-color);
+    border-style: var(--stsv-Input__border-style);
+    border-width: var(--stsv-Input__border-width);
     border-radius: 10000px;
     box-sizing: border-box;
     display: inline-block;
@@ -129,20 +129,20 @@ $: {
   }
 
   input:checked + .indicator {
-    background-color: var(--Input__background-color);
-    border-color: var(--Input__border-color);
+    background-color: var(--stsv-Input__background-color);
+    border-color: var(--stsv-Input__border-color);
   }
 
   input:focus-visible + .indicator {
-    outline-color: var(--Common__outline-color);
-    outline-offset: var(--Common__outline-offset);
-    outline-style: var(--Common__outline-style);
-    outline-width: var(--Common__outline-width);
+    outline-color: var(--stsv-Common__outline-color);
+    outline-offset: var(--stsv-Common__outline-offset);
+    outline-style: var(--stsv-Common__outline-style);
+    outline-width: var(--stsv-Common__outline-width);
   }
 
   input:disabled + .indicator {
-    background-color: var(--Input__background-color--disabled);
-    border-color: var(--Input__border-color--disabled);
+    background-color: var(--stsv-Common__background-color--disabled);
+    border-color: var(--stsv-Common__border-color--disabled);
   }
 
   .indicator::after {
@@ -159,11 +159,11 @@ $: {
   }
 
   input:checked + .indicator::after {
-    background-color: var(--Input__color);
+    background-color: var(--stsv-Input__color);
   }
 
   input:checked:disabled + .indicator::after {
-    background-color: var(--Input__color--disabled);
+    background-color: var(--stsv-Common__color--disabled);
   }
 
   .label {