@geoffcox/sterling-svelte 0.0.20 → 0.0.22

package/ListItem.svelte

@@ -1,17 +1,26 @@
 <script>import { getContext } from "svelte";
-import { listContextKey } from "./List.constants";
+import { LIST_CONTEXT_KEY } from "./List.constants";
 export let disabled = false;
 export let value;
 const {
   disabled: listDisabled,
   selectedValue,
   horizontal
-} = getContext(listContextKey);
+} = getContext(LIST_CONTEXT_KEY);
 let itemRef;
 $:
   _disabled = disabled || $listDisabled;
 $:
   selected = $selectedValue === value;
+export const click = () => {
+  itemRef?.click();
+};
+export const blur = () => {
+  itemRef?.blur();
+};
+export const focus = (options) => {
+  itemRef?.focus(options);
+};
 </script>
 
 <div

package/ListItem.svelte.d.ts

@@ -4,6 +4,9 @@ declare const __propDef: {
         [x: string]: any;
         disabled?: boolean | undefined;
         value: string;
+        click?: (() => void) | undefined;
+        blur?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -47,5 +50,8 @@ export type ListItemProps = typeof __propDef.props;
 export type ListItemEvents = typeof __propDef.events;
 export type ListItemSlots = typeof __propDef.slots;
 export default class ListItem extends SvelteComponentTyped<ListItemProps, ListItemEvents, ListItemSlots> {
+    get click(): () => void;
+    get blur(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
 }
 export {};

package/Menu.svelte

@@ -1,12 +1,18 @@
 <script>import { getContext, onMount } from "svelte";
 import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
 import { portal } from "./actions/portal";
-import { menuItemContextKey } from "./Menus.constants";
+import { MENU_ITEM_CONTEXT_KEY } from "./MenuItem.constants";
 export let reference;
 export let open = false;
 let menuRef;
 let menuPosition = { x: 0, y: 0 };
-const { rootValue, depth = 0 } = getContext(menuItemContextKey) || {};
+const { rootValue, depth = 0 } = getContext(MENU_ITEM_CONTEXT_KEY) || {};
+export const blur = () => {
+  menuRef?.blur();
+};
+export const focus = (options) => {
+  menuRef?.focus(options);
+};
 const ensurePortalHost = () => {
   let host = document.querySelector("#SterlingMenuPortal");
   if (!host) {
@@ -60,19 +66,42 @@ onMount(() => {
 
 {#if open}
   <div
+    use:portal={{ target: portalTarget }}
     class="sterling-menu-portal"
     data-root-value={rootValue}
-    use:portal={{ target: portalTarget }}
   >
     <div
       bind:this={menuRef}
       class="sterling-menu"
       role="menu"
       class:open
+      on:blur
+      on:click
+      on:copy
+      on:cut
+      on:dblclick
+      on:focus
+      on:focusin
+      on:focusout
+      on:keydown
+      on:keypress
+      on:keyup
+      on:mousedown
+      on:mouseenter
+      on:mouseleave
+      on:mousemove
+      on:mouseover
+      on:mouseout
+      on:mouseup
+      on:scroll
+      on:wheel
+      on:paste
       {...$$restProps}
       style="left:{menuPosition.x}px; top:{menuPosition.y}px"
     >
-      <slot />
+      <div class="sterling-menu-content">
+        <slot />
+      </div>
     </div>
   </div>
 {/if}
@@ -90,26 +119,31 @@ onMount(() => {
     border-radius: var(--stsv-Common__border-radius);
     border-style: var(--stsv-Common__border-style);
     border-width: var(--stsv-Common__border-width);
+    box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
     box-sizing: border-box;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    height: fit-content;
+    left: 0;
+    max-height: calc(50vh);
+    overflow: scroll;
+    overscroll-behavior: contain;
+    padding: 0.25em;
     position: absolute;
-    box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
-    overflow: hidden;
+    top: 0;
     width: max-content;
-    height: fit-content;
     z-index: 1;
-    top: 0;
-    left: 0;
+  }
 
+  .sterling-menu-content {
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: auto;
     row-gap: calc(2 * var(--stsv-Common__outline-width));
-    padding: 0.25em;
   }
 
   .sterling-menu.open {
     display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
   }
 </style>

package/Menu.svelte.d.ts

@@ -4,8 +4,32 @@ declare const __propDef: {
         [x: string]: any;
         reference: HTMLElement;
         open?: boolean | undefined;
+        blur?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
     };
     events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        copy: ClipboardEvent;
+        cut: ClipboardEvent;
+        dblclick: MouseEvent;
+        focus: FocusEvent;
+        focusin: FocusEvent;
+        focusout: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mousedown: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mousemove: MouseEvent;
+        mouseover: MouseEvent;
+        mouseout: MouseEvent;
+        mouseup: MouseEvent;
+        scroll: Event;
+        wheel: WheelEvent;
+        paste: ClipboardEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
@@ -16,5 +40,7 @@ export type MenuProps = typeof __propDef.props;
 export type MenuEvents = typeof __propDef.events;
 export type MenuSlots = typeof __propDef.slots;
 export default class Menu extends SvelteComponentTyped<MenuProps, MenuEvents, MenuSlots> {
+    get blur(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
 }
 export {};

package/MenuBar.constants.d.ts

@@ -0,0 +1 @@
+export declare const MENU_BAR_CONTEXT_KEY = "sterlingMenuBar";

package/MenuBar.constants.js

@@ -0,0 +1 @@
+export const MENU_BAR_CONTEXT_KEY = 'sterlingMenuBar';

package/MenuBar.svelte

@@ -1,6 +1,8 @@
 <script>import { createEventDispatcher, setContext } from "svelte";
-import { menuBarContextKey, menuItemContextKey } from "./Menus.constants";
+import { MENU_BAR_CONTEXT_KEY } from "./MenuBar.constants";
+import { MENU_ITEM_CONTEXT_KEY } from "./MenuItem.constants";
 import { writable } from "svelte/store";
+let menuBarRef;
 const dispatch = createEventDispatcher();
 const raiseClose = (value) => {
   dispatch("close", { value });
@@ -11,6 +13,12 @@ const raiseOpen = (value) => {
 const raiseSelect = (value) => {
   dispatch("select", { value });
 };
+export const blur = () => {
+  menuBarRef?.blur();
+};
+export const focus = (options) => {
+  menuBarRef?.focus(options);
+};
 const children = writable([]);
 const openPreviousChild = (currentValue) => {
   const index = $children?.findIndex((menuItem) => menuItem.value === currentValue);
@@ -34,7 +42,7 @@ const focusChild = (value) => {
     $children[focusIndex].focus();
   }
 };
-setContext(menuItemContextKey, {
+setContext(MENU_ITEM_CONTEXT_KEY, {
   register: (menuItem) => {
     children.set([...$children, menuItem]);
   },
@@ -49,13 +57,14 @@ setContext(menuItemContextKey, {
   onOpen: raiseOpen,
   onSelect: raiseSelect
 });
-setContext(menuBarContextKey, {
+setContext(MENU_BAR_CONTEXT_KEY, {
   openPreviousMenu: openPreviousChild,
   openNextMenu: openNextChild
 });
 </script>
 
 <div
+  bind:this={menuBarRef}
   class="sterling-menu-bar"
   role="menubar"
   on:blur

package/MenuBar.svelte.d.ts

@@ -1,7 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        [x: string]: any;
+        blur?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -39,5 +41,7 @@ export type MenuBarProps = typeof __propDef.props;
 export type MenuBarEvents = typeof __propDef.events;
 export type MenuBarSlots = typeof __propDef.slots;
 export default class MenuBar extends SvelteComponentTyped<MenuBarProps, MenuBarEvents, MenuBarSlots> {
+    get blur(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
 }
 export {};

package/MenuBar.types.d.ts

@@ -0,0 +1,4 @@
+export type MenuBarContext = {
+    openPreviousMenu?: (currentValue: string) => void;
+    openNextMenu?: (currentValue: string) => void;
+};

package/MenuButton.svelte

@@ -1,16 +1,18 @@
-<script>import { v4 as uuid } from "uuid";
-import { createEventDispatcher, getContext, setContext } from "svelte";
+<script>import { createEventDispatcher, getContext, setContext } from "svelte";
 import { writable } from "svelte/store";
 import Button from "./Button.svelte";
 import Menu from "./Menu.svelte";
-import { menuItemContextKey } from "./Menus.constants";
-import { focusFirstChild, focusNextChild, focusPreviousChild } from "./Menus.utils";
+import { MENU_ITEM_CONTEXT_KEY } from "./MenuItem.constants";
+import { focusFirstChild, focusNextChild, focusPreviousChild } from "./MenuItem.utils";
+import { idGenerator } from "./idGenerator";
 export let open = false;
 export let shape = "rounded";
 export let value;
 export let variant = "regular";
-const instanceId = uuid();
+const instanceId = idGenerator.nextId("MenuButton");
+let buttonRef;
 let reference;
+let prevOpen = open;
 $:
   menuId = `${value}-menu-${instanceId}`;
 $:
@@ -32,7 +34,22 @@ const onClick = () => {
     setTimeout(() => focusFirstChild($children), 10);
   }
 };
-setContext(menuItemContextKey, {
+$: {
+  if (!open && open !== prevOpen) {
+    focus();
+  }
+  prevOpen = open;
+}
+export const click = () => {
+  buttonRef?.click();
+};
+export const blur = () => {
+  buttonRef?.blur();
+};
+export const focus = (options) => {
+  buttonRef?.focus(options);
+};
+setContext(MENU_ITEM_CONTEXT_KEY, {
   rootValue: value,
   depth: 1,
   register: (menuItem) => {
@@ -57,6 +74,7 @@ setContext(menuItemContextKey, {
       A Button that displays a context menu when clicked.
   -->
 <Button
+  bind:this={buttonRef}
   aria-controls={menuId}
   aria-expanded={open}
   aria-haspopup={hasChildren}
@@ -93,10 +111,26 @@ setContext(menuItemContextKey, {
   on:wheel
   {...$$restProps}
 >
-  <div bind:this={reference}>
-    <slot />
-    <Menu id={menuId} {reference} {open}>
-      <slot name="items" />
-    </Menu>
+  <div class="reference" bind:this={reference}>
+    <slot {shape} {variant} />
   </div>
+  <Menu id={menuId} {reference} {open}>
+    <slot name="items" />
+  </Menu>
 </Button>
+
+<style>
+  .reference {
+    align-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: center;
+    justify-items: center;
+    column-gap: 0.25em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>

package/MenuButton.svelte.d.ts

@@ -1,12 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ButtonShape, ButtonVariant } from './Button.types';
 declare const __propDef: {
     props: {
         [x: string]: any;
         open?: boolean | undefined;
-        shape?: ButtonShape | undefined;
+        shape?: "circular" | "rounded" | "square" | undefined;
         value: string;
-        variant?: ButtonVariant | undefined;
+        variant?: "regular" | "outline" | "ghost" | undefined;
+        click?: (() => void) | undefined;
+        blur?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -41,7 +43,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            shape: "circular" | "rounded" | "square";
+            variant: "regular" | "outline" | "ghost";
+        };
         items: {};
     };
 };
@@ -50,5 +55,8 @@ export type MenuButtonEvents = typeof __propDef.events;
 export type MenuButtonSlots = typeof __propDef.slots;
 /** A Button that displays a context menu when clicked. */
 export default class MenuButton extends SvelteComponentTyped<MenuButtonProps, MenuButtonEvents, MenuButtonSlots> {
+    get click(): () => void;
+    get blur(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
 }
 export {};

package/MenuItem.constants.d.ts

@@ -0,0 +1 @@
+export declare const MENU_ITEM_CONTEXT_KEY = "sterlingMenuItem";

package/MenuItem.constants.js

@@ -0,0 +1 @@
+export const MENU_ITEM_CONTEXT_KEY = 'sterlingMenuItem';

package/MenuItem.svelte

@@ -1,18 +1,19 @@
 <script>import { createKeyborg } from "keyborg";
-import { v4 as uuid } from "uuid";
 import { getContext, onMount, setContext } from "svelte";
 import { writable } from "svelte/store";
 import { clickOutside } from "./actions/clickOutside";
 import { afterUpdate, createEventDispatcher } from "svelte/internal";
 import MenuItemDisplay from "./MenuItemDisplay.svelte";
-import { menuBarContextKey, menuItemContextKey } from "./Menus.constants";
+import { MENU_BAR_CONTEXT_KEY } from "./MenuBar.constants";
+import { MENU_ITEM_CONTEXT_KEY } from "./MenuItem.constants";
 import Menu from "./Menu.svelte";
 import {
   focusFirstChild,
   focusLastChild,
   focusNextChild,
   focusPreviousChild
-} from "./Menus.utils";
+} from "./MenuItem.utils";
+import { idGenerator } from "./idGenerator";
 export let checked = false;
 export let composed = false;
 export let disabled = false;
@@ -31,9 +32,9 @@ const {
   onOpen = void 0,
   onClose = void 0,
   onSelect = void 0
-} = getContext(menuItemContextKey) || {};
-const { openPreviousMenu = void 0, openNextMenu = void 0 } = getContext(menuBarContextKey) || {};
-const instanceId = uuid();
+} = getContext(MENU_ITEM_CONTEXT_KEY) || {};
+const { openPreviousMenu = void 0, openNextMenu = void 0 } = getContext(MENU_BAR_CONTEXT_KEY) || {};
+const instanceId = idGenerator.nextId("MenuItem");
 $:
   displayId = `${value}-display-${instanceId}`;
 $:
@@ -75,6 +76,15 @@ const autoFocusFirstChild = (open2, insideMenu) => {
 };
 $:
   autoFocusFirstChild(open, depth > 0);
+export const click = () => {
+  menuItemRef?.click();
+};
+export const blur = () => {
+  menuItemRef?.blur();
+};
+export const focus = (options) => {
+  menuItemRef?.focus(options);
+};
 onMount(() => {
   mounted = true;
   keyborg.subscribe(keyborgHandler);
@@ -185,7 +195,7 @@ const onClickOutside = (event) => {
   }
   closeMenu?.(true);
 };
-setContext(menuItemContextKey, {
+setContext(MENU_ITEM_CONTEXT_KEY, {
   rootValue,
   depth: depth + 1,
   register: (menuItem) => {
@@ -260,15 +270,15 @@ setContext(menuItemContextKey, {
   {...$$restProps}
 >
   <div class="item" id={displayId}>
-    <slot name="item" {checked} {disabled} {hasChildren} {depth} {value} {open} {role} {text}>
+    <slot name="item" {checked} {depth} {disabled} {hasChildren} {open} {role} {text} {value}>
       <MenuItemDisplay {checked} hasChildren={depth > 0 && hasChildren} menuItemRole={role}
         >{text}</MenuItemDisplay
       >
     </slot>
   </div>
-  {#if menuItemRef && open && $$slots.default}
+  {#if menuItemRef && open && hasChildren}
     <Menu id={menuId} {open} reference={menuItemRef}>
-      <slot />
+      <slot {depth} {disabled} />
     </Menu>
   {/if}
 </button>

package/MenuItem.svelte.d.ts

@@ -9,6 +9,9 @@ declare const __propDef: {
         value: string;
         role?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
         text?: string | undefined;
+        click?: (() => void) | undefined;
+        blur?: (() => void) | undefined;
+        focus?: ((options?: FocusOptions) => void) | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -42,20 +45,26 @@ declare const __propDef: {
     slots: {
         item: {
             checked: boolean;
+            depth: number;
             disabled: boolean;
             hasChildren: boolean;
-            depth: number;
-            value: string;
             open: boolean;
             role: "menuitem" | "menuitemcheckbox" | "menuitemradio";
             text: string | undefined;
+            value: string;
+        };
+        default: {
+            depth: number;
+            disabled: boolean;
         };
-        default: {};
     };
 };
 export type MenuItemProps = typeof __propDef.props;
 export type MenuItemEvents = typeof __propDef.events;
 export type MenuItemSlots = typeof __propDef.slots;
 export default class MenuItem extends SvelteComponentTyped<MenuItemProps, MenuItemEvents, MenuItemSlots> {
+    get click(): () => void;
+    get blur(): () => void;
+    get focus(): (options?: FocusOptions | undefined) => void;
 }
 export {};

package/{Menus.types.d.ts → MenuItem.types.d.ts}

@@ -4,10 +4,6 @@ export type MenuItemRegistration = {
     close: () => void;
     focus: () => void;
 };
-export type MenuBarContext = {
-    openPreviousMenu?: (currentValue: string) => void;
-    openNextMenu?: (currentValue: string) => void;
-};
 export type MenuItemContext = {
     rootValue?: string;
     depth?: number;

package/MenuItem.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,4 +1,4 @@
-import type { MenuItemRegistration } from './Menus.types';
+import type { MenuItemRegistration } from './MenuItem.types';
 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;

package/Progress.constants.d.ts

@@ -0,0 +1 @@
+export declare const PROGRESS_COLORFULS: string[];

package/Progress.constants.js

@@ -0,0 +1 @@
+export const PROGRESS_COLORFULS = ['none', 'auto', 'info', 'success', 'warning', 'error'];

package/Progress.svelte

@@ -37,10 +37,15 @@ $:
   class:disabled
   class:vertical
   role="progressbar"
+  on:blur
   on:click
   on:dblclick
   on:focus
-  on:blur
+  on:focusin
+  on:focusout
+  on:keydown
+  on:keypress
+  on:keyup
   on:mousedown
   on:mouseenter
   on:mouseleave
@@ -48,6 +53,14 @@ $:
   on:mouseover
   on:mouseout
   on:mouseup
+  on:pointercancel
+  on:pointerdown
+  on:pointerenter
+  on:pointerleave
+  on:pointermove
+  on:pointerover
+  on:pointerout
+  on:pointerup
   on:wheel
   {...$$restProps}
 >
@@ -65,7 +78,7 @@ $:
 
 <style>
   .sterling-progress {
-    display: flex;
+    display: inline-flex;
     flex-direction: column;
     align-content: flex-start;
     align-items: flex-start;
@@ -73,7 +86,7 @@ $:
     background: var(--stsv-Common__background-color);
     box-sizing: border-box;
     height: 1em;
-    padding: 0.2em;
+    padding: 0.25em;
     border-width: var(--stsv-Common__border-width);
     border-style: var(--stsv-Common__border-style);
     border-color: var(--stsv-Common__border-color);

package/Progress.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ProgressColorful } from './Progress.types';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -7,14 +6,19 @@ declare const __propDef: {
         max?: number | undefined;
         percent?: number | undefined;
         vertical?: boolean | undefined;
-        colorful?: ProgressColorful | undefined;
+        colorful?: string | undefined;
         disabled?: boolean | undefined;
     };
     events: {
+        blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
         focus: FocusEvent;
-        blur: FocusEvent;
+        focusin: FocusEvent;
+        focusout: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
         mousedown: MouseEvent;
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
@@ -22,6 +26,14 @@ declare const __propDef: {
         mouseover: MouseEvent;
         mouseout: MouseEvent;
         mouseup: MouseEvent;
+        pointercancel: PointerEvent;
+        pointerdown: PointerEvent;
+        pointerenter: PointerEvent;
+        pointerleave: PointerEvent;
+        pointermove: PointerEvent;
+        pointerover: PointerEvent;
+        pointerout: PointerEvent;
+        pointerup: PointerEvent;
         wheel: WheelEvent;
     } & {
         [evt: string]: CustomEvent<any>;

package/Progress.types.d.ts

@@ -1 +1,4 @@
-export type ProgressColorful = 'none' | 'auto' | 'info' | 'success' | 'warning' | 'error';
+import type { PROGRESS_COLORFULS } from './Progress.constants';
+type ProgressColorfulTuple = typeof PROGRESS_COLORFULS;
+export type ProgressColorful = ProgressColorfulTuple[number];
+export {};