@geoffcox/sterling-svelte 0.0.29 → 0.0.31

package/Callout.svelte

@@ -0,0 +1,227 @@
+<script>import { onMount } from "svelte";
+import {
+  arrow,
+  autoUpdate,
+  computePosition,
+  flip,
+  offset
+} from "@floating-ui/dom";
+import { portal } from "./actions/portal";
+import { POPOVER_PORTAL_ID } from "./Popover.constants";
+import { fade } from "svelte/transition";
+import { prefersReducedMotion } from "./stores/prefersReducedMotion";
+export let colorful = false;
+export let conditionalRender = true;
+export let crossAxisOffset = 0;
+export let mainAxisOffset = 0;
+export let open = false;
+export let placement = "bottom-start";
+export let portalHost = void 0;
+export let reference;
+let popupRef;
+let arrowRef;
+let popupPosition = { x: 0, y: 0 };
+$:
+  floatingUIPlacement = placement;
+const ensurePortalHost = () => {
+  if (document) {
+    if (portalHost) {
+      return portalHost;
+    }
+    let host = document.querySelector(`#${POPOVER_PORTAL_ID}`);
+    if (!host) {
+      host = document.createElement("div");
+      host.id = POPOVER_PORTAL_ID;
+      host.style.overflow = "visible";
+      document.body.append(host);
+    }
+    portalHost = host;
+  }
+};
+let bodyHeight = 0;
+const resizeObserver = new ResizeObserver((entries) => {
+  bodyHeight = entries[0].target.clientHeight;
+});
+$:
+  middleware = [
+    offset({ mainAxis: mainAxisOffset, crossAxis: crossAxisOffset }),
+    flip(),
+    arrow({ element: arrowRef, padding: 8 })
+  ];
+const computeCalloutPosition = async () => {
+  if (reference && popupRef) {
+    popupPosition = await computePosition(reference, popupRef, {
+      placement: floatingUIPlacement,
+      middleware
+    });
+  } else {
+    popupPosition = { x: 0, y: 0 };
+  }
+};
+let cleanupAutoUpdate = () => {
+};
+const autoUpdateCalloutPosition = () => {
+  cleanupAutoUpdate();
+  if (reference && popupRef) {
+    cleanupAutoUpdate = autoUpdate(reference, popupRef, computeCalloutPosition);
+  }
+};
+$:
+  popupRef, reference, autoUpdateCalloutPosition();
+$:
+  open, bodyHeight, middleware, placement, computeCalloutPosition();
+const getArrowPlacementStyle = (position) => {
+  if (position?.placement && arrowRef) {
+    switch (position.placement) {
+      case "top":
+      case "top-start":
+      case "top-end":
+        return `bottom: -${arrowRef.offsetWidth}px;filter: drop-shadow(-1px -2px 1px rgba(0,0,0,0.2));transform:translate(0, -50%) rotate(135deg);`;
+      case "right":
+      case "right-start":
+      case "right-end":
+        return `left: -${arrowRef.offsetWidth}px;transform:translate(50%, 0) rotate(225deg);`;
+      case "bottom":
+      case "bottom-start":
+      case "bottom-end":
+        return `top: -${arrowRef.offsetWidth}px;transform:translate(0, 50%) rotate(-45deg);`;
+      case "left":
+      case "left-start":
+      case "left-end":
+        return `right: -${arrowRef.offsetWidth}px;filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.2));transform:translate(-50%, 0) rotate(45deg);`;
+    }
+  }
+  return "";
+};
+const getArrowOffsetStyle = (position) => {
+  const arrow2 = position?.middlewareData?.arrow;
+  if (arrow2) {
+    if (arrow2.x !== null && arrow2.x !== void 0) {
+      return `left: ${arrow2.x}px;`;
+    } else if (arrow2.y !== null && arrow2.y !== void 0) {
+      return `top: ${arrow2.y}px;`;
+    }
+  }
+  return "";
+};
+$:
+  arrowStyle = getArrowPlacementStyle(popupPosition) + getArrowOffsetStyle(popupPosition);
+const fadeNoOp = (node, params) => {
+  return { delay: 0, duration: 0 };
+};
+$:
+  fadeMotion = !$prefersReducedMotion ? fade : fadeNoOp;
+onMount(() => {
+  ensurePortalHost();
+  resizeObserver.observe(document.body);
+  return () => {
+    resizeObserver.unobserve(document.body);
+  };
+});
+const onKeydown = (event) => {
+  if (event.key === "Escape") {
+    open = false;
+  }
+};
+ensurePortalHost();
+</script>
+
+{#if open || !conditionalRender}
+  <div
+    use:portal={{ target: portalHost ?? document.body }}
+    class="sterling-callout-portal"
+    transition:fadeMotion|global={{ duration: 250 }}
+  >
+    <div
+      bind:this={popupRef}
+      class="sterling-callout"
+      class:open
+      class:colorful
+      on:blur
+      on:click
+      on:copy
+      on:cut
+      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:scroll
+      on:wheel|passive
+      on:paste
+      on:keydown={onKeydown}
+      {...$$restProps}
+      style="left:{popupPosition.x}px; top:{popupPosition.y}px"
+    >
+      <slot />
+      <div class="arrow" bind:this={arrowRef} style={arrowStyle} />
+    </div>
+  </div>
+{/if}
+
+<style>
+  .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: 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;
+    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.colorful {
+    background-color: var(--stsv-button--colorful__background-color);
+    border-color: var(--stsv-button--colorful__border-color);
+    color: var(--stsv-button--colorful__color);
+  }
+
+  .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%);
+  }
+</style>

package/Callout.svelte.d.ts

@@ -0,0 +1,54 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        colorful?: boolean | undefined;
+        conditionalRender?: boolean | undefined;
+        crossAxisOffset?: number | undefined;
+        mainAxisOffset?: number | undefined;
+        open?: boolean | undefined;
+        placement?: string | undefined;
+        portalHost?: HTMLElement | undefined;
+        reference: HTMLElement | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        copy: ClipboardEvent;
+        cut: ClipboardEvent;
+        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;
+        scroll: Event;
+        wheel: WheelEvent;
+        paste: ClipboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type CalloutProps = typeof __propDef.props;
+export type CalloutEvents = typeof __propDef.events;
+export type CalloutSlots = typeof __propDef.slots;
+export default class Callout extends SvelteComponentTyped<CalloutProps, CalloutEvents, CalloutSlots> {
+}
+export {};

package/Dropdown.svelte

@@ -118,7 +118,7 @@ $:
   <Popover reference={dropdownRef} open={!disabled && open}>
     <div
       class="popup-content"
-      transition:slideMotion={{ duration: 200 }}
+      transition:slideMotion|global={{ duration: 200 }}
       class:colorful
       bind:this={popupContentRef}
     >
@@ -278,6 +278,7 @@ $:
     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;
     color: var(--stsv-common__color);
     padding: 0.25em;
     display: grid;

package/Menu.svelte

@@ -66,8 +66,8 @@ export const focusLastMenuItem = () => {
   role="menu"
   class:open
   data-root-value={rootValue}
-  in:slideMotion={{ duration: 300 }}
-  out:slideMotion={{ duration: 100 }}
+  in:slideMotion|global={{ duration: 300 }}
+  out:slideMotion|global={{ duration: 100 }}
   on:blur
   on:click
   on:copy
@@ -109,6 +109,7 @@ export const focusLastMenuItem = () => {
     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;

package/MenuButton.svelte

@@ -134,7 +134,7 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   <div class="reference" bind:this={reference} use:clickOutside on:click_outside={onClickOutside}>
     <slot shape={$$restProps.shape} variant={$$restProps.variant} />
   </div>
-  <Popover {reference} placement="bottom-start" {open}>
+  <Popover {reference} {open}>
     <Menu bind:this={menuRef} id={menuId} {reference} {open}>
       <slot name="items" />
     </Menu>

package/Popover.constants.d.ts

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

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 POPOVER_PORTAL_ID = 'SterlingPopoverPortal';

package/Popover.svelte

@@ -1,25 +1,32 @@
 <script>import { onMount } from "svelte";
-import { autoUpdate, computePosition, flip, offset } from "@floating-ui/dom";
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  offset
+} from "@floating-ui/dom";
 import { portal } from "./actions/portal";
-export let offsetOptions = { mainAxis: 0, crossAxis: 0 };
+import { POPOVER_PORTAL_ID } from "./Popover.constants";
+export let conditionalRender = true;
+export let crossAxisOffset = 0;
+export let mainAxisOffset = 0;
 export let open = false;
-export let persistent = false;
 export let placement = "bottom-start";
 export let portalHost = void 0;
 export let reference;
 let popupRef;
 let popupPosition = { x: 0, y: 0 };
-const hostId = "SterlingPopoverPortal";
+$:
+  floatingUIPlacement = placement;
 const ensurePortalHost = () => {
   if (document) {
     if (portalHost) {
       return portalHost;
     }
-    let host = document.querySelector(`#${hostId}`);
+    let host = document.querySelector(`#${POPOVER_PORTAL_ID}`);
     if (!host) {
-      console.log("creating portal host");
       host = document.createElement("div");
-      host.id = hostId;
+      host.id = POPOVER_PORTAL_ID;
       host.style.overflow = "visible";
       document.body.append(host);
     }
@@ -31,11 +38,11 @@ const resizeObserver = new ResizeObserver((entries) => {
   bodyHeight = entries[0].target.clientHeight;
 });
 $:
-  middleware = [offset(offsetOptions), flip()];
-const computePopupPosition = async () => {
+  middleware = [offset({ mainAxis: mainAxisOffset, crossAxis: crossAxisOffset }), flip()];
+const computePopoverPosition = async () => {
   if (reference && popupRef) {
     popupPosition = await computePosition(reference, popupRef, {
-      placement,
+      placement: floatingUIPlacement,
       middleware
     });
   } else {
@@ -44,16 +51,16 @@ const computePopupPosition = async () => {
 };
 let cleanupAutoUpdate = () => {
 };
-const autoUpdateMenuPosition = () => {
+const autoUpdatePopoverPosition = () => {
   cleanupAutoUpdate();
   if (reference && popupRef) {
-    cleanupAutoUpdate = autoUpdate(reference, popupRef, computePopupPosition);
+    cleanupAutoUpdate = autoUpdate(reference, popupRef, computePopoverPosition);
   }
 };
 $:
-  popupRef, reference, autoUpdateMenuPosition();
+  popupRef, reference, autoUpdatePopoverPosition();
 $:
-  open, bodyHeight, middleware, placement, computePopupPosition();
+  open, bodyHeight, middleware, floatingUIPlacement, computePopoverPosition();
 onMount(() => {
   ensurePortalHost();
   resizeObserver.observe(document.body);
@@ -69,7 +76,7 @@ const onKeydown = (event) => {
 ensurePortalHost();
 </script>
 
-{#if open || persistent}
+{#if open || !conditionalRender}
   <div use:portal={{ target: portalHost ?? document.body }} class="sterling-popover-portal">
     <div
       bind:this={popupRef}
@@ -115,22 +122,19 @@ ensurePortalHost();
   .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;
+    overflow: visible;
     position: absolute;
     top: 0;
     width: max-content;
-    z-index: 1;
   }
 
   .sterling-popover.open {

package/Popover.svelte.d.ts

@@ -1,14 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Placement } from '@floating-ui/dom';
 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?: Placement | undefined;
+        placement?: string | undefined;
         portalHost?: HTMLElement | undefined;
-        reference: HTMLElement;
+        reference: HTMLElement | undefined;
     };
     events: {
         blur: FocusEvent;

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 {};

package/Select.svelte

@@ -2,7 +2,7 @@
 import { clickOutside } from "./actions/clickOutside";
 import { idGenerator } from "./idGenerator";
 import List from "./List.svelte";
-import Popup from "./Popover.svelte";
+import Popover from "./Popover.svelte";
 const popupId = idGenerator.nextId("Select-popup");
 export let disabled = false;
 export let composed = false;
@@ -199,7 +199,7 @@ const onListSelect = (event) => {
       <div class="chevron" />
     </slot>
   </div>
-  <Popup reference={selectRef} bind:open id={popupId} persistent>
+  <Popover reference={selectRef} bind:open id={popupId} conditionalRender={false}>
     <div class="popup-content">
       <List
         bind:this={listRef}
@@ -214,7 +214,7 @@ const onListSelect = (event) => {
         <slot />
       </List>
     </div>
-  </Popup>
+  </Popover>
 </div>
 
 <style>
@@ -341,6 +341,7 @@ const onListSelect = (event) => {
     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;
     padding: 0.25em;
     display: grid;
     grid-template-columns: 1fr;

package/Tooltip.svelte

@@ -1,103 +1,22 @@
-<script>import { arrow, autoUpdate, computePosition, flip, offset } from "@floating-ui/dom";
-import { onMount } from "svelte";
-import { fade } from "svelte/transition";
-import { portal } from "./actions/portal";
-import { prefersReducedMotion } from "./stores/prefersReducedMotion";
+<script>import { onMount } from "svelte";
+import Callout from "./Callout.svelte";
+export let conditionalRender = true;
+export let crossAxisOffset = 0;
+export let mainAxisOffset = 0;
 export let disabled = false;
-export let showOn = "hover";
 export let hoverDelayMilliseconds = 1e3;
 export let open = false;
-export let placement = "top";
-export let portalTarget = void 0;
+export let placement = "bottom-start";
+export let portalHost = void 0;
 let originRef;
-let tooltipRef;
-let arrowRef;
-let position = void 0;
 $:
   reference = $$slots.default ? originRef?.previousElementSibling : void 0;
-const computeTooltipPosition = async () => {
-  if (reference && tooltipRef && arrowRef) {
-    const floatingOffset = Math.sqrt(2 * arrowRef.offsetWidth ** 2) / 2;
-    const middleware = [
-      offset(floatingOffset),
-      flip({ fallbackPlacements: ["top", "bottom", "right", "left"] }),
-      arrow({
-        element: arrowRef
-      })
-    ];
-    position = await computePosition(reference, tooltipRef, {
-      placement,
-      middleware
-    });
-  } else {
-    position = void 0;
-  }
-};
-let cleanupAutoUpdate = () => {
-};
-const autoUpdateTooltipPosition = () => {
-  cleanupAutoUpdate();
-  cleanupAutoUpdate = () => {
-  };
-  if (reference && tooltipRef) {
-    cleanupAutoUpdate = autoUpdate(reference, tooltipRef, computeTooltipPosition);
-  }
-};
-$:
-  reference, tooltipRef, autoUpdateTooltipPosition();
-$:
-  open, placement, computeTooltipPosition();
-$:
-  tipStyle = position ? `left:${position.x}px; top:${position.y}px;` : "";
-const getArrowPlacementStyle = (position2) => {
-  if (position2?.placement) {
-    switch (position2.placement) {
-      case "top":
-      case "top-start":
-      case "top-end":
-        return `bottom: -${arrowRef.offsetWidth}px;transform:translate(0, -50%) rotate(135deg);`;
-      case "right":
-      case "right-start":
-      case "right-end":
-        return `left: -${arrowRef.offsetWidth}px;transform:translate(50%, 0) rotate(225deg);`;
-      case "bottom":
-      case "bottom-start":
-      case "bottom-end":
-        return `top: -${arrowRef.offsetWidth}px;transform:translate(0, 50%) rotate(-45deg);`;
-      case "left":
-      case "left-start":
-      case "left-end":
-        return `right: -${arrowRef.offsetWidth}px;transform:translate(-50%, 0) rotate(45deg);`;
-    }
-  }
-  return "";
-};
-const getArrowOffsetStyle = (position2) => {
-  const arrow2 = position2?.middlewareData?.arrow;
-  if (arrow2) {
-    if (arrow2.x !== null && arrow2.x !== void 0) {
-      return `left: ${arrow2.x}px;`;
-    } else if (arrow2.y !== null && arrow2.y !== void 0) {
-      return `top: ${arrow2.y}px;`;
-    }
-  }
-  return "";
-};
-$:
-  arrowStyle = getArrowPlacementStyle(position) + getArrowOffsetStyle(position);
 const show = () => {
   if (!disabled) {
     open = true;
   }
 };
 const hide = () => open = false;
-const toggle = () => {
-  if (!disabled) {
-    open = !open;
-  } else {
-    open = false;
-  }
-};
 const delayShow = () => {
   hoverDelayMilliseconds === 0 ? show() : setTimeout(() => {
     show();
@@ -117,124 +36,72 @@ const autoShowUpdate = () => {
   const element = reference;
   open = false;
   if (element) {
-    switch (showOn) {
-      case "click":
-        element.addEventListener("click", toggle);
-        cleanupAutoShowUpdate = () => element.removeEventListener("click", toggle);
-        break;
-      case "hover":
-        element.addEventListener("mouseenter", delayShow);
-        element.addEventListener("mouseleave", hide);
-        cleanupAutoShowUpdate = () => {
-          element.removeEventListener("mouseenter", delayShow);
-          element.removeEventListener("mouseleave", hide);
-        };
-    }
+    element.addEventListener("mouseenter", delayShow);
+    element.addEventListener("mouseleave", hide);
+    cleanupAutoShowUpdate = () => {
+      element.removeEventListener("mouseenter", delayShow);
+      element.removeEventListener("mouseleave", hide);
+    };
   }
 };
 $:
-  reference, showOn, autoShowUpdate();
-const fadeNoOp = (node, params) => {
-  return { delay: 0, duration: 0 };
-};
-$:
-  fadeMotion = !$prefersReducedMotion ? fade : fadeNoOp;
-let mounted = false;
+  reference, autoShowUpdate();
 onMount(() => {
-  mounted = true;
-  portalTarget = portalTarget || document.body;
-  autoUpdateTooltipPosition();
-  computeTooltipPosition();
   autoShowUpdate();
 });
 </script>
 
-<slot {disabled} {open} />
+<slot {disabled} {hoverDelayMilliseconds} {open} />
 <div class="sterling-tooltip-origin" bind:this={originRef} />
-
-{#if open}
-  <div
-    class="sterling-tooltip-portal"
-    use:portal={{ target: document.body }}
-    transition:fadeMotion={{ duration: 250 }}
-  >
-    <div
-      bind:this={tooltipRef}
-      class="sterling-tooltip"
-      style={tipStyle}
-      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}
-    >
-      <div class="arrow" bind:this={arrowRef} style={arrowStyle} />
-      <slot name="tip" />
-    </div>
-  </div>
-{/if}
+<Callout
+  {conditionalRender}
+  {crossAxisOffset}
+  {mainAxisOffset}
+  {open}
+  {placement}
+  {portalHost}
+  {reference}
+  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
+  {...$$restProps}
+>
+  <slot name="tip" />
+</Callout>
 
 <style>
   .sterling-tooltip-origin {
-    display: none;
-    width: 0;
-    height: 0;
-  }
-
-  .sterling-tooltip-portal {
-    position: relative;
-    overflow: visible;
-  }
-
-  .sterling-tooltip {
-    background-color: var(--stsv-common__background-color);
-    border-color: var(--stsv-common__border-color);
-    border-radius: var(--stsv-common__border-radius);
-    border-style: var(--stsv-common__border-style);
-    border-width: var(--stsv-common__border-width);
-    color: var(--stsv-common__color);
-    position: absolute;
-    overflow: visible;
-    box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
-    z-index: 4;
-  }
-
-  .arrow {
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    background-color: var(--stsv-common__background-color);
-    border-color: var(--stsv-common__border-color);
-    border-radius: var(--stsv-common__border-radius);
-    border-style: var(--stsv-common__border-style);
-    border-width: var(--stsv-common__border-width);
-    clip-path: polygon(0% 1%, 100% 1%, 100% 100%, 0% 1%);
+    display: block;
+    background: transparent;
+    width: 0px;
+    height: 0px;
   }
 </style>

package/Tooltip.svelte.d.ts

@@ -2,12 +2,14 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        conditionalRender?: boolean | undefined;
+        crossAxisOffset?: number | undefined;
+        mainAxisOffset?: number | undefined;
         disabled?: boolean | undefined;
-        showOn?: string | undefined;
         hoverDelayMilliseconds?: number | undefined;
         open?: boolean | undefined;
-        placement?: import("@floating-ui/core").Placement | undefined;
-        portalTarget?: HTMLElement | undefined;
+        placement?: string | undefined;
+        portalHost?: HTMLElement | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -32,14 +34,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;
+        pointercancel: CustomEvent<any>;
+        pointerdown: CustomEvent<any>;
+        pointerenter: CustomEvent<any>;
+        pointerleave: CustomEvent<any>;
+        pointermove: CustomEvent<any>;
+        pointerover: CustomEvent<any>;
+        pointerout: CustomEvent<any>;
+        pointerup: CustomEvent<any>;
         wheel: WheelEvent;
     } & {
         [evt: string]: CustomEvent<any>;
@@ -47,6 +49,7 @@ declare const __propDef: {
     slots: {
         default: {
             disabled: boolean;
+            hoverDelayMilliseconds: number;
             open: boolean;
         };
         tip: {};

package/TreeItem.svelte

@@ -330,7 +330,7 @@ A item in a Tree displaying the item and children.
     </slot>
   </div>
   {#if expanded && hasChildren}
-    <div class="children" transition:slideMotion={{ duration: 200 }} role="group">
+    <div class="children" transition:slideMotion|global={{ duration: 200 }} role="group">
       <slot {depth} {selected} {value} />
     </div>
   {/if}

package/index.d.ts

@@ -13,30 +13,29 @@ export { neutralColors, lightStatusColors, darkStatusColors, blueColors as blueA
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
 export type { ButtonVariant, ButtonShape } from './Button.types';
 export type { LabelStatus } from './Label.types';
-export type { FloatingPlacement, FloatingOffsetOptions } from './floating-ui.types';
 export type { LinkVariant } from './Link.types';
 export type { ListContext } from './List.types';
 export type { MenuBarContext } from './MenuBar.types';
 export type { MenuItemContext, MenuItemRegistration, MenuItemRole } from './MenuItem.types';
+export type { PopoverPlacement } from './Popover.types';
 export type { ProgressStatus } from './Progress.types';
 export type { TabListContext } from './TabList.types';
 export type { TextAreaResize } from './TextArea.types';
-export type { TooltipShowOn } from './Tooltip.types';
 export type { TreeContext } from './Tree.types';
 export type { TreeItemContext } from './TreeItem.types';
 export { BUTTON_SHAPES, BUTTON_VARIANTS } from './Button.constants';
 export { LABEL_STATUSES } from './Label.constants';
-export { FLOATING_PLACEMENTS } from './floating-ui.constants';
 export { LINK_VARIANTS } from './Link.constants';
 export { LIST_CONTEXT_KEY } from './List.constants';
 export { MENU_BAR_CONTEXT_KEY } from './MenuBar.constants';
 export { MENU_ITEM_CONTEXT_KEY, MENU_ITEM_ROLES } from './MenuItem.constants';
+export { POPOVER_PLACEMENTS } from './Popover.constants';
 export { PROGRESS_STATUSES } from './Progress.constants';
 export { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
 export { TEXT_AREA_RESIZES } from './TextArea.constants';
-export { TOOLTIP_SHOW_ONS } from './Tooltip.constants';
 export { TREE_CONTEXT_KEY, TREE_ITEM_CONTEXT_KEY } from './Tree.constants';
 import Button from './Button.svelte';
+import Callout from './Callout.svelte';
 import Checkbox from './Checkbox.svelte';
 import ColorPicker from './ColorPicker.svelte';
 import Dialog from './Dialog.svelte';
@@ -69,4 +68,4 @@ import Tree from './Tree.svelte';
 import TreeChevron from './TreeChevron.svelte';
 import TreeItem from './TreeItem.svelte';
 import TreeItemDisplay from './TreeItemDisplay.svelte';
-export { Button, Checkbox, ColorPicker, Dialog, Dropdown, HexColorSliders, HslColorSliders, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Popover, Progress, Radio, RgbColorSliders, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };
+export { Button, Callout, Checkbox, ColorPicker, Dialog, Dropdown, HexColorSliders, HslColorSliders, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Popover, Progress, Radio, RgbColorSliders, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };

package/index.js

@@ -17,18 +17,18 @@ export { toggleDarkTheme } from './theme/toggleDarkTheme';
 // ----- Component constants ----- //
 export { BUTTON_SHAPES, BUTTON_VARIANTS } from './Button.constants';
 export { LABEL_STATUSES } from './Label.constants';
-export { FLOATING_PLACEMENTS } from './floating-ui.constants';
 export { LINK_VARIANTS } from './Link.constants';
 export { LIST_CONTEXT_KEY } from './List.constants';
 export { MENU_BAR_CONTEXT_KEY } from './MenuBar.constants';
 export { MENU_ITEM_CONTEXT_KEY, MENU_ITEM_ROLES } from './MenuItem.constants';
+export { POPOVER_PLACEMENTS } from './Popover.constants';
 export { PROGRESS_STATUSES } from './Progress.constants';
 export { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
 export { TEXT_AREA_RESIZES } from './TextArea.constants';
-export { TOOLTIP_SHOW_ONS } from './Tooltip.constants';
 export { TREE_CONTEXT_KEY, TREE_ITEM_CONTEXT_KEY } from './Tree.constants';
 // ----- Components ----- //
 import Button from './Button.svelte';
+import Callout from './Callout.svelte';
 import Checkbox from './Checkbox.svelte';
 import ColorPicker from './ColorPicker.svelte';
 import Dialog from './Dialog.svelte';
@@ -61,4 +61,4 @@ import Tree from './Tree.svelte';
 import TreeChevron from './TreeChevron.svelte';
 import TreeItem from './TreeItem.svelte';
 import TreeItemDisplay from './TreeItemDisplay.svelte';
-export { Button, Checkbox, ColorPicker, Dialog, Dropdown, HexColorSliders, HslColorSliders, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Popover, Progress, Radio, RgbColorSliders, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };
+export { Button, Callout, Checkbox, ColorPicker, Dialog, Dropdown, HexColorSliders, HslColorSliders, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Popover, Progress, Radio, RgbColorSliders, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -10,12 +10,22 @@
   "homepage": "https://github.com/GeoffCox/sterling-svelte/blob/main/README.md",
   "keywords": [
     "svelte",
+    "svelte 4",
+    "sveltekit",
     "design system",
     "component",
+    "components",
     "controls",
-    "sveltekit",
     "typescript",
-    "javascript"
+    "javascript",
+    "button",
+    "checkbox",
+    "list",
+    "menu",
+    "radio",
+    "select",
+    "textarea",
+    "tree"
   ],
   "devDependencies": {
     "@fontsource/open-sans": "^4.5.14",
@@ -23,7 +33,7 @@
     "@playwright/test": "^1.28.1",
     "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/adapter-static": "^1.0.0",
-    "@sveltejs/kit": "^1.5.0",
+    "@sveltejs/kit": "^1.20.4",
     "@sveltejs/package": "^1.0.0",
     "@types/lodash-es": "^4.17.6",
     "@types/tinycolor2": "^1.4.3",
@@ -34,11 +44,11 @@
     "eslint-plugin-svelte3": "^4.0.0",
     "mdsvex": "^0.10.6",
     "prettier": "^2.8.0",
-    "prettier-plugin-svelte": "^2.8.1",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.0.1",
+    "prettier-plugin-svelte": "^2.10.1",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.3",
     "tslib": "^2.4.1",
-    "typescript": "^4.9.3",
+    "typescript": "^5.0.0",
     "vite": "^4.2.0",
     "vitest": "^0.25.3"
   },
@@ -49,11 +59,15 @@
     "keyborg": "^2.0.0",
     "lodash-es": "^4.17.21"
   },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
   "exports": {
     "./package.json": "./package.json",
     "./Button.constants": "./Button.constants.js",
     "./Button.svelte": "./Button.svelte",
     "./Button.types": "./Button.types.js",
+    "./Callout.svelte": "./Callout.svelte",
     "./Checkbox.svelte": "./Checkbox.svelte",
     "./ColorPicker.constants": "./ColorPicker.constants.js",
     "./ColorPicker.svelte": "./ColorPicker.svelte",
@@ -84,7 +98,9 @@
     "./MenuItem.utils": "./MenuItem.utils.js",
     "./MenuItemDisplay.svelte": "./MenuItemDisplay.svelte",
     "./MenuSeparator.svelte": "./MenuSeparator.svelte",
+    "./Popover.constants": "./Popover.constants.js",
     "./Popover.svelte": "./Popover.svelte",
+    "./Popover.types": "./Popover.types.js",
     "./Progress.constants": "./Progress.constants.js",
     "./Progress.svelte": "./Progress.svelte",
     "./Progress.types": "./Progress.types.js",
@@ -100,9 +116,7 @@
     "./TextArea.constants": "./TextArea.constants.js",
     "./TextArea.svelte": "./TextArea.svelte",
     "./TextArea.types": "./TextArea.types.js",
-    "./Tooltip.constants": "./Tooltip.constants.js",
     "./Tooltip.svelte": "./Tooltip.svelte",
-    "./Tooltip.types": "./Tooltip.types.js",
     "./Tree.constants": "./Tree.constants.js",
     "./Tree.svelte": "./Tree.svelte",
     "./Tree.types": "./Tree.types.js",
@@ -114,8 +128,6 @@
     "./actions/forwardEvents": "./actions/forwardEvents.js",
     "./actions/portal": "./actions/portal.js",
     "./actions/trapKeyboardFocus": "./actions/trapKeyboardFocus.js",
-    "./floating-ui.constants": "./floating-ui.constants.js",
-    "./floating-ui.types": "./floating-ui.types.js",
     "./idGenerator": "./idGenerator.js",
     ".": "./index.js",
     "./stores/prefersReducedMotion": "./stores/prefersReducedMotion.js",

package/Tooltip.constants.d.ts

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

package/Tooltip.constants.js

@@ -1 +0,0 @@
-export const TOOLTIP_SHOW_ONS = ['hover', 'click'];

package/Tooltip.types.d.ts

@@ -1,4 +0,0 @@
-import type { TOOLTIP_SHOW_ONS } from './Tooltip.constants';
-type TooltipShowOnTuple = typeof TOOLTIP_SHOW_ONS;
-export type TooltipShowOn = TooltipShowOnTuple[number];
-export {};

package/floating-ui.constants.d.ts

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

package/floating-ui.types.d.ts

@@ -1,4 +0,0 @@
-import type { Placement } from '@floating-ui/dom';
-import type { Options as OffsetOptions } from '@floating-ui/core/src/middleware/offset';
-export type FloatingPlacement = Placement;
-export type FloatingOffsetOptions = OffsetOptions;

package/floating-ui.types.js

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