@geoffcox/sterling-svelte 0.0.15 → 0.0.17

package/MenuItemDisplay.svelte

@@ -0,0 +1,97 @@
+<script>export let checked = false;
+export let hasChildren = false;
+export let menuItemRole = "menuitem";
+</script>
+
+<div class="menu-item-display">
+  <div
+    class="check"
+    class:checkmark={menuItemRole === 'menuitemcheckbox'}
+    class:bullet={menuItemRole === 'menuitemradio'}
+    class:checked
+  />
+  <div class="content">
+    <slot />
+  </div>
+  {#if $$slots.shortcut}
+    <div class="shortcut">
+      <slot name="shortcut" />
+    </div>
+  {:else}
+    <div class="chevron" class:has-children={hasChildren} />
+  {/if}
+</div>
+
+<style>
+  .menu-item-display {
+    align-items: center;
+    justify-items: flex-start;
+    display: grid;
+    grid-template-columns: 1em 1fr 1em;
+    column-gap: 0.5em;
+    padding: 0.25em;
+  }
+
+  .check {
+    box-sizing: border-box;
+    pointer-events: none;
+    width: 20px;
+    height: 20px;
+    position: relative;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
+
+  .check.checkmark.checked::after {
+    border-color: currentColor;
+    border-style: solid;
+    border-width: 0 0.2em 0.2em 0;
+    box-sizing: border-box;
+    content: '';
+    height: 0.8em;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    transform: translate(-50%, -50%) rotate(45deg);
+    transform-origin: center;
+    transition: border-color 250ms;
+    width: 0.4em;
+  }
+
+  .check.bullet.checked::after {
+    background-color: currentColor;
+    border-radius: 10000px;
+    content: '';
+    height: 0.5em;
+    left: 45%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    transition: background-color 250ms;
+    width: 0.5em;
+  }
+
+  .content {
+    padding-top: 0.25em;
+  }
+
+  .chevron {
+    position: relative;
+    border: none;
+    background: none;
+    height: 1em;
+    width: 1em;
+    transform-origin: 50% 50%;
+  }
+
+  .chevron.has-children::after {
+    position: absolute;
+    content: '';
+    top: 50%;
+    left: 50%;
+    width: 7px;
+    height: 7px;
+    border-right: 3px solid currentColor;
+    border-top: 3px solid currentColor;
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+</style>

package/MenuItemDisplay.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        checked?: boolean | undefined;
+        hasChildren?: boolean | undefined;
+        menuItemRole?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        shortcut: {};
+    };
+};
+export type MenuItemDisplayProps = typeof __propDef.props;
+export type MenuItemDisplayEvents = typeof __propDef.events;
+export type MenuItemDisplaySlots = typeof __propDef.slots;
+export default class MenuItemDisplay extends SvelteComponentTyped<MenuItemDisplayProps, MenuItemDisplayEvents, MenuItemDisplaySlots> {
+}
+export {};

package/MenuSeparator.svelte

@@ -0,0 +1,42 @@
+<!--
+@component
+A styled line to visually separate menu items in a menu.
+  -->
+<div
+  class="sterling-menu-item-separator"
+  role="separator"
+  on:blur
+  on:click
+  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:pointercancel
+  on:pointerdown
+  on:pointerenter
+  on:pointerleave
+  on:pointermove
+  on:pointerover
+  on:pointerout
+  on:pointerup
+  on:wheel
+  {...$$restProps}
+/>
+
+<style>
+  .sterling-menu-item-separator {
+    height: var(--stsv-Common__border-width);
+    background-color: var(--stsv-Common__border-color);
+    margin: 0.1em 0;
+  }
+</style>

package/MenuSeparator.svelte.d.ts

@@ -0,0 +1,76 @@
+/** @typedef {typeof __propDef.props}  MenuSeparatorProps */
+/** @typedef {typeof __propDef.events}  MenuSeparatorEvents */
+/** @typedef {typeof __propDef.slots}  MenuSeparatorSlots */
+/** A styled line to visually separate menu items in a menu. */
+export default class MenuSeparator extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    blur: FocusEvent;
+    click: MouseEvent;
+    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;
+    pointercancel: PointerEvent;
+    pointerdown: PointerEvent;
+    pointerenter: PointerEvent;
+    pointerleave: PointerEvent;
+    pointermove: PointerEvent;
+    pointerover: PointerEvent;
+    pointerout: PointerEvent;
+    pointerup: PointerEvent;
+    wheel: WheelEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type MenuSeparatorProps = typeof __propDef.props;
+export type MenuSeparatorEvents = typeof __propDef.events;
+export type MenuSeparatorSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        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;
+        pointercancel: PointerEvent;
+        pointerdown: PointerEvent;
+        pointerenter: PointerEvent;
+        pointerleave: PointerEvent;
+        pointermove: PointerEvent;
+        pointerover: PointerEvent;
+        pointerout: PointerEvent;
+        pointerup: PointerEvent;
+        wheel: WheelEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/Menus.constants.d.ts

@@ -0,0 +1,2 @@
+export declare const menuBarContextKey = "sterlingMenuBar";
+export declare const menuItemContextKey = "sterlingMenuItem";

package/Menus.constants.js

@@ -0,0 +1,2 @@
+export const menuBarContextKey = 'sterlingMenuBar';
+export const menuItemContextKey = 'sterlingMenuItem';

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/Menus.utils.d.ts

@@ -0,0 +1,5 @@
+import type { MenuItemRegistration } from './Menus.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;
+export declare const focusLastChild: (children: MenuItemRegistration[]) => void;

package/Menus.utils.js

@@ -0,0 +1,20 @@
+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, 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();
+};
+export const focusLastChild = (children) => {
+    children?.[children.length - 1]?.focus();
+};

package/Portal.svelte

@@ -0,0 +1,14 @@
+<script>import { portal } from "./actions/portal";
+export let target = document.body;
+</script>
+
+<div class="portal" use:portal={{ target }}>
+  <slot {...$$restProps} />
+</div>
+
+<style>
+  .portal {
+    position: relative;
+    overflow: visible;
+  }
+</style>

package/Portal.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        target?: HTMLElement | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            [x: string]: any;
+        };
+    };
+};
+export type PortalProps = typeof __propDef.props;
+export type PortalEvents = typeof __propDef.events;
+export type PortalSlots = typeof __propDef.slots;
+export default class Portal extends SvelteComponentTyped<PortalProps, PortalEvents, PortalSlots> {
+}
+export {};

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 {