@geoffcox/sterling-svelte 0.0.30 → 1.0.0

package/MenuItemDisplay.svelte

@@ -1,11 +1,18 @@
-<script>export let checked = false;
+<script>/** When true, displays the menu item as checked. */
+export let checked = false;
+/** When true, displays the menu item as disabled. */
 export let disabled = false;
+/** When true, displays the menu item as a parent of children. */
 export let hasChildren = false;
+/** When true, displays the menu as a top level menu bar item. */
 export let isMenuBarItem = false;
-export let menuItemRole = "menuitem";
+/** The role of the menu item. */
+export let menuItemRole = 'menuitem';
+/** Additional class names to apply. */
+export let variant = '';
 </script>
 
-<div class="sterling-menu-item-display" class:disabled>
+<div class={`sterling-menu-item-display ${variant}`} class:disabled>
   <div
     class="check"
     class:checkmark={menuItemRole === 'menuitemcheckbox'}
@@ -13,124 +20,13 @@ export let menuItemRole = "menuitem";
     class:checked
   />
   <div class="content">
-    <slot />
+    <slot {checked} {disabled} {hasChildren} {isMenuBarItem} {menuItemRole} {variant} />
   </div>
   {#if $$slots.shortcut}
     <div class="shortcut">
-      <slot name="shortcut" />
+      <slot name="shortcut" {checked} {disabled} {isMenuBarItem} {menuItemRole} {variant} />
     </div>
   {:else}
     <div class="chevron" class:has-children={!isMenuBarItem && hasChildren} />
   {/if}
 </div>
-
-<style>
-  .sterling-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);
-  }
-
-  .sterling-menu-item-display.disabled {
-    cursor: not-allowed;
-    outline: none;
-  }
-
-  .sterling-menu-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;
-    position: absolute;
-    right: 0;
-    top: 0;
-    pointer-events: none;
-    transition: opacity 250ms;
-  }
-
-  .sterling-menu-item-display.disabled::after {
-    opacity: 1;
-  }
-
-  @media (prefers-reduced-motion) {
-    .sterling-menu-item-display::after,
-    .check,
-    .check::after {
-      transition: none;
-    }
-  }
-</style>

package/MenuItemDisplay.svelte.d.ts

@@ -1,18 +1,32 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        checked?: boolean | undefined;
-        disabled?: boolean | undefined;
-        hasChildren?: boolean | undefined;
-        isMenuBarItem?: boolean | undefined;
-        menuItemRole?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
+        /** When true, displays the menu item as checked. */ checked?: boolean | undefined;
+        /** When true, displays the menu item as disabled. */ disabled?: boolean | undefined;
+        /** When true, displays the menu item as a parent of children. */ hasChildren?: boolean | undefined;
+        /** When true, displays the menu as a top level menu bar item. */ isMenuBarItem?: boolean | undefined;
+        /** The role of the menu item. */ menuItemRole?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
+        /** Additional class names to apply. */ variant?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
-        shortcut: {};
+        default: {
+            checked: boolean;
+            disabled: boolean;
+            hasChildren: boolean;
+            isMenuBarItem: boolean;
+            menuItemRole: "menuitem" | "menuitemcheckbox" | "menuitemradio";
+            variant: string;
+        };
+        shortcut: {
+            checked: boolean;
+            disabled: boolean;
+            isMenuBarItem: boolean;
+            menuItemRole: "menuitem" | "menuitemcheckbox" | "menuitemradio";
+            variant: string;
+        };
     };
 };
 export type MenuItemDisplayProps = typeof __propDef.props;

package/MenuSeparator.svelte

@@ -1,48 +1,9 @@
+<script>/** Additional class names to apply. */
+export let variant = '';
+</script>
+
 <!--
 @component
-A styled line to visually separate menu items in a menu.
+A styled line to visually separate groups of menu items in a menu.
   -->
-<div
-  class="sterling-menu-item-separator"
-  role="separator"
-  on:blur
-  on:click
-  on:dblclick
-  on:dragend
-  on:dragenter
-  on:dragleave
-  on:dragover
-  on:dragstart
-  on:drop
-  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|passive
-  {...$$restProps}
-/>
-
-<style>
-  .sterling-menu-item-separator {
-    height: var(--stsv-common__border-width);
-    background-color: var(--stsv-common__border-color);
-    margin: 0.1em 0;
-  }
-</style>
+<div class={`sterling-menu-separator ${variant}`} role="separator" {...$$restProps} />

package/MenuSeparator.svelte.d.ts

@@ -1,88 +1,18 @@
-/** @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;
-    dragend: DragEvent;
-    dragenter: DragEvent;
-    dragleave: DragEvent;
-    dragover: DragEvent;
-    dragstart: DragEvent;
-    drop: DragEvent;
-    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;
+        [x: string]: any;
+        variant?: string | undefined;
     };
     events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        dblclick: MouseEvent;
-        dragend: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        dragstart: DragEvent;
-        drop: DragEvent;
-        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 type MenuSeparatorProps = typeof __propDef.props;
+export type MenuSeparatorEvents = typeof __propDef.events;
+export type MenuSeparatorSlots = typeof __propDef.slots;
+/** A styled line to visually separate groups of menu items in a menu. */
+export default class MenuSeparator extends SvelteComponentTyped<MenuSeparatorProps, MenuSeparatorEvents, MenuSeparatorSlots> {
+}
 export {};

package/Popover.constants.d.ts

@@ -0,0 +1,2 @@
+export declare const POPOVER_PLACEMENTS: string[];
+export declare const STERLING_PORTAL_HOST_ID = "SterlingPortalHost";

package/{floating-ui.constants.js → Popover.constants.js}

@@ -1,14 +1,15 @@
-export const FLOATING_PLACEMENTS = [
-    'top',
-    'right',
-    'bottom',
-    'left',
+export const POPOVER_PLACEMENTS = [
     'top-start',
-    'right-start',
-    'bottom-start',
-    'left-start',
+    'top',
     'top-end',
+    'right-start',
+    'right',
     'right-end',
     'bottom-end',
-    'left-end'
+    'bottom',
+    'bottom-start',
+    'left-end',
+    'left',
+    'left-start'
 ];
+export const STERLING_PORTAL_HOST_ID = 'SterlingPortalHost';

package/Popover.svelte

@@ -1,79 +1,96 @@
-<script>import { onMount } from "svelte";
-import { autoUpdate, computePosition, flip, offset } from "@floating-ui/dom";
-import { portal } from "./actions/portal";
-export let offsetOptions = { mainAxis: 0, crossAxis: 0 };
+<script>import { onMount } from 'svelte';
+import { autoUpdate, computePosition, flip, offset } from '@floating-ui/dom';
+import { portal } from './actions/portal';
+import { STERLING_PORTAL_HOST_ID } from './Popover.constants';
+// ----- Props ----- //
+/** When true, content is rendered only when the popover is open. */
+export let conditionalRender = true;
+/** The offset along the side of the reference element. */
+export let crossAxisOffset = 0;
+/** The offset towards or away from the side of the reference element. */
+export let mainAxisOffset = 0;
+/** When true, the popover is open and visible. */
 export let open = false;
-export let persistent = false;
-export let placement = "bottom-start";
-export let portalHost = void 0;
+/** How the popover should be positioned relative to the reference element. */
+export let placement = 'bottom-start';
+/** The host container for the callout. */
+export let portalHost = undefined;
+/** The reference to the element anchoring the position of the popover. */
 export let reference;
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
 let popupRef;
 let popupPosition = { x: 0, y: 0 };
-const hostId = "SterlingPopoverPortal";
+$: floatingUIPlacement = placement;
+// ----- Portal Host ----- //
 const ensurePortalHost = () => {
-  if (document) {
-    if (portalHost) {
-      return portalHost;
+    if (document) {
+        if (portalHost) {
+            return portalHost;
+        }
+        let host = document.querySelector(`#${STERLING_PORTAL_HOST_ID}`);
+        if (!host) {
+            host = document.createElement('div');
+            host.id = STERLING_PORTAL_HOST_ID;
+            host.style.overflow = 'visible';
+            document.body.append(host);
+        }
+        portalHost = host;
     }
-    let host = document.querySelector(`#${hostId}`);
-    if (!host) {
-      console.log("creating portal host");
-      host = document.createElement("div");
-      host.id = hostId;
-      host.style.overflow = "visible";
-      document.body.append(host);
-    }
-    portalHost = host;
-  }
 };
+// ----- Body Height Change ----- //
 let bodyHeight = 0;
+// create an Observer instance
 const resizeObserver = new ResizeObserver((entries) => {
-  bodyHeight = entries[0].target.clientHeight;
+    bodyHeight = entries[0].target.clientHeight;
 });
-$:
-  middleware = [offset(offsetOptions), flip()];
-const computePopupPosition = async () => {
-  if (reference && popupRef) {
-    popupPosition = await computePosition(reference, popupRef, {
-      placement,
-      middleware
-    });
-  } else {
-    popupPosition = { x: 0, y: 0 };
-  }
-};
-let cleanupAutoUpdate = () => {
+// ----- Position ----- //
+$: middleware = [offset({ mainAxis: mainAxisOffset, crossAxis: crossAxisOffset }), flip()];
+const computePopoverPosition = async () => {
+    if (reference && popupRef) {
+        popupPosition = await computePosition(reference, popupRef, {
+            placement: floatingUIPlacement,
+            middleware
+        });
+    }
+    else {
+        popupPosition = { x: 0, y: 0 };
+    }
 };
-const autoUpdateMenuPosition = () => {
-  cleanupAutoUpdate();
-  if (reference && popupRef) {
-    cleanupAutoUpdate = autoUpdate(reference, popupRef, computePopupPosition);
-  }
+// whenever a positioned element is portaled it needs resubscription to auto-update
+let cleanupAutoUpdate = () => { };
+const autoUpdatePopoverPosition = () => {
+    cleanupAutoUpdate();
+    if (reference && popupRef) {
+        cleanupAutoUpdate = autoUpdate(reference, popupRef, computePopoverPosition);
+    }
 };
-$:
-  popupRef, reference, autoUpdateMenuPosition();
-$:
-  open, bodyHeight, middleware, placement, computePopupPosition();
+$: popupRef, reference, autoUpdatePopoverPosition();
+$: open, bodyHeight, middleware, floatingUIPlacement, computePopoverPosition();
+// ----- EventHandlers ----- //
 onMount(() => {
-  ensurePortalHost();
-  resizeObserver.observe(document.body);
-  return () => {
-    resizeObserver.unobserve(document.body);
-  };
+    ensurePortalHost();
+    // start observing a DOM node
+    resizeObserver.observe(document.body);
+    return () => {
+        resizeObserver.unobserve(document.body);
+    };
 });
 const onKeydown = (event) => {
-  if (event.key === "Escape") {
-    open = false;
-  }
+    if (event.key === 'Escape') {
+        open = false;
+    }
 };
 ensurePortalHost();
 </script>
 
-{#if open || persistent}
+{#if open || !conditionalRender}
   <div use:portal={{ target: portalHost ?? document.body }} class="sterling-popover-portal">
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
       bind:this={popupRef}
-      class="sterling-popover"
+      class={`sterling-popover ${variant}`}
       class:open
       on:blur
       on:click
@@ -106,34 +123,7 @@ ensurePortalHost();
       {...$$restProps}
       style="left:{popupPosition.x}px; top:{popupPosition.y}px"
     >
-      <slot />
+      <slot {open} {variant} />
     </div>
   </div>
 {/if}
-
-<style>
-  .sterling-popover-portal {
-    position: relative;
-    overflow: visible;
-    background: rgba(255, 0, 0, 0.1);
-  }
-
-  .sterling-popover {
-    box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
-    box-sizing: border-box;
-    display: none;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-    height: fit-content;
-    left: 0;
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    width: max-content;
-    z-index: 1;
-  }
-
-  .sterling-popover.open {
-    display: grid;
-  }
-</style>

package/Popover.svelte.d.ts

@@ -2,12 +2,14 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        offsetOptions?: import("@floating-ui/core").OffsetOptions | undefined;
+        conditionalRender?: boolean | undefined;
+        crossAxisOffset?: number | undefined;
+        mainAxisOffset?: number | undefined;
         open?: boolean | undefined;
-        persistent?: boolean | undefined;
-        placement?: import("@floating-ui/dom").Placement | undefined;
+        placement?: string | undefined;
         portalHost?: HTMLElement | undefined;
-        reference: HTMLElement;
+        reference: HTMLElement | undefined;
+        variant?: string | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -41,7 +43,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            open: boolean;
+            variant: string;
+        };
     };
 };
 export type PopoverProps = typeof __propDef.props;

package/Popover.types.d.ts

@@ -0,0 +1,4 @@
+import type { POPOVER_PLACEMENTS } from './Popover.constants';
+type PopoverPlacementTuple = typeof POPOVER_PLACEMENTS;
+export type PopoverPlacement = PopoverPlacementTuple[number];
+export {};