@geoffcox/sterling-svelte 1.0.5 → 1.0.7

package/{Button.svelte.d.ts → dist/Button.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -50,12 +50,14 @@ declare const __propDef: {
             variant: string;
         };
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type ButtonProps = typeof __propDef.props;
 export type ButtonEvents = typeof __propDef.events;
 export type ButtonSlots = typeof __propDef.slots;
 /** A styled HTML button element. */
-export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
+export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
     get click(): () => void;
     get blur(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;

package/{Callout.svelte → dist/Callout.svelte}

@@ -1,9 +1,9 @@
-<script>import { onMount } from 'svelte';
+<script>import { getContext, onMount, tick } from 'svelte';
 import { arrow, autoUpdate, computePosition, flip, offset } from '@floating-ui/dom';
 import { portal } from './actions/portal';
-import { STERLING_PORTAL_HOST_ID } from './Popover.constants';
 import { fade } from 'svelte/transition';
 import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
+import { STERLING_PORTAL_HOST_ID, STERLING_PORTAL_CONTEXT_ID } from './Portal.constants';
 // ----- Props ----- //
 /** Conditionally renders content based on open. */
 export let conditionalRender = true;
@@ -28,23 +28,27 @@ let popupPosition = { x: 0, y: 0 };
 $: floatingUIPlacement = placement;
 let bodyHeight = 0;
 let resizeObserver = undefined;
+const { portalHost: contextPortalHost } = getContext(STERLING_PORTAL_CONTEXT_ID) || {
+    portalHost: undefined
+};
 // ----- Portal Host ----- //
-const ensurePortalHost = () => {
-    if (globalThis?.document) {
-        if (portalHost) {
-            return portalHost;
-        }
-        let host = document.querySelector(`#${STERLING_PORTAL_HOST_ID}`);
+const ensurePortalHost = async () => {
+    await tick();
+    // use the host set from context, usually set from a Dialog
+    let host = $contextPortalHost;
+    // use or create the sterling portal host
+    if (!host && globalThis?.document) {
+        host = globalThis.document.querySelector(`#${STERLING_PORTAL_HOST_ID}`);
+        // fallback to creating the sterling portal host
         if (!host) {
-            host = document.createElement('div');
+            host = globalThis.document.createElement('div');
             host.id = STERLING_PORTAL_HOST_ID;
             host.style.overflow = 'visible';
-            document.body.append(host);
+            globalThis.document.body.append(host);
         }
-        portalHost = host;
     }
+    portalHost = host;
 };
-// ----- Body Height Change ----- //
 // ----- Position ----- //
 $: middleware = [
     offset({ mainAxis: mainAxisOffset, crossAxis: crossAxisOffset }),
@@ -142,7 +146,7 @@ ensurePortalHost();
 
 {#if open || !conditionalRender}
   <div
-    use:portal={{ target: portalHost ?? globalThis?.document?.body }}
+    use:portal={{ target: portalHost }}
     class="sterling-callout-portal"
     transition:fadeMotion|global={{ duration: 250 }}
   >

package/{Callout.svelte.d.ts → dist/Callout.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -45,10 +45,12 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 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 default class Callout extends SvelteComponent<CalloutProps, CalloutEvents, CalloutSlots> {
 }
 export {};

package/{Checkbox.svelte.d.ts → dist/Checkbox.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -48,12 +48,14 @@ declare const __propDef: {
             variant: string;
         };
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type CheckboxProps = typeof __propDef.props;
 export type CheckboxEvents = typeof __propDef.events;
 export type CheckboxSlots = typeof __propDef.slots;
 /** A styled HTML input type=checkbox element. */
-export default class Checkbox extends SvelteComponentTyped<CheckboxProps, CheckboxEvents, CheckboxSlots> {
+export default class Checkbox extends SvelteComponent<CheckboxProps, CheckboxEvents, CheckboxSlots> {
     get blur(): () => void;
     get click(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;

package/{ColorPicker.svelte.d.ts → dist/ColorPicker.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -39,10 +39,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type ColorPickerProps = typeof __propDef.props;
 export type ColorPickerEvents = typeof __propDef.events;
 export type ColorPickerSlots = typeof __propDef.slots;
-export default class ColorPicker extends SvelteComponentTyped<ColorPickerProps, ColorPickerEvents, ColorPickerSlots> {
+export default class ColorPicker extends SvelteComponent<ColorPickerProps, ColorPickerEvents, ColorPickerSlots> {
 }
 export {};

package/{Dialog.svelte → dist/Dialog.svelte}

@@ -1,5 +1,7 @@
-<script>import { onMount, tick } from 'svelte';
+<script>import { onMount, setContext, tick } from 'svelte';
 import Button from './Button.svelte';
+import { STERLING_PORTAL_CONTEXT_ID } from './Portal.constants';
+import { writable } from 'svelte/store';
 const dialogFadeDuration = 250;
 // ----- Props ----- //
 /** When true, clicking outside the dialog causes the dialog close. */
@@ -19,6 +21,9 @@ let dialogRef;
 let contentRef;
 let formRef;
 let closing = false;
+const portalHostStore = writable(undefined);
+// ----- Context ----- //
+setContext(STERLING_PORTAL_CONTEXT_ID, { portalHost: portalHostStore });
 // ----- Event Handlers ----- //
 const onDocumentClick = (event) => {
     // as tracking clicks outside the dialog is only active while the dialog is open
@@ -102,11 +107,14 @@ $: {
 }
 onMount(() => {
     updateDialog(open);
+    // Use the dialog for any element portals
+    portalHostStore.set(dialogRef);
     dialogRef.addEventListener('cancel', onCancel);
     dialogRef.addEventListener('close', onClose);
     return () => {
         dialogRef?.removeEventListener('cancel', onCancel);
         dialogRef?.removeEventListener('close', onClose);
+        portalHostStore.set(undefined);
     };
 });
 </script>

package/{Dialog.svelte.d.ts → dist/Dialog.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -20,6 +20,8 @@ declare const __propDef: {
         body: {};
         footer: {};
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type DialogProps = typeof __propDef.props;
 export type DialogEvents = typeof __propDef.events;
@@ -30,6 +32,6 @@ export type DialogSlots = typeof __propDef.slots;
  * - Slots for typical dialog content.
  * - Props and events to make using <dialog> easier
  */
-export default class Dialog extends SvelteComponentTyped<DialogProps, DialogEvents, DialogSlots> {
+export default class Dialog extends SvelteComponent<DialogProps, DialogEvents, DialogSlots> {
 }
 export {};

package/{Dropdown.svelte.d.ts → dist/Dropdown.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -63,11 +63,13 @@ declare const __propDef: {
             variant: string;
         };
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type DropdownProps = typeof __propDef.props;
 export type DropdownEvents = typeof __propDef.events;
 export type DropdownSlots = typeof __propDef.slots;
-export default class Dropdown extends SvelteComponentTyped<DropdownProps, DropdownEvents, DropdownSlots> {
+export default class Dropdown extends SvelteComponent<DropdownProps, DropdownEvents, DropdownSlots> {
     get click(): () => void;
     get blur(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;

package/{HexColorSliders.svelte.d.ts → dist/HexColorSliders.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -40,10 +40,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type HexColorSlidersProps = typeof __propDef.props;
 export type HexColorSlidersEvents = typeof __propDef.events;
 export type HexColorSlidersSlots = typeof __propDef.slots;
-export default class HexColorSliders extends SvelteComponentTyped<HexColorSlidersProps, HexColorSlidersEvents, HexColorSlidersSlots> {
+export default class HexColorSliders extends SvelteComponent<HexColorSlidersProps, HexColorSlidersEvents, HexColorSlidersSlots> {
 }
 export {};

package/{HslColorSliders.svelte.d.ts → dist/HslColorSliders.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -40,10 +40,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type HslColorSlidersProps = typeof __propDef.props;
 export type HslColorSlidersEvents = typeof __propDef.events;
 export type HslColorSlidersSlots = typeof __propDef.slots;
-export default class HslColorSliders extends SvelteComponentTyped<HslColorSlidersProps, HslColorSlidersEvents, HslColorSlidersSlots> {
+export default class HslColorSliders extends SvelteComponent<HslColorSlidersProps, HslColorSlidersEvents, HslColorSlidersSlots> {
 }
 export {};

package/{Input.svelte.d.ts → dist/Input.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -57,11 +57,13 @@ declare const __propDef: {
             variant: string;
         };
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type InputProps = typeof __propDef.props;
 export type InputEvents = typeof __propDef.events;
 export type InputSlots = typeof __propDef.slots;
-export default class Input extends SvelteComponentTyped<InputProps, InputEvents, InputSlots> {
+export default class Input extends SvelteComponent<InputProps, InputEvents, InputSlots> {
     get blur(): () => void;
     get click(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;

package/{Label.svelte.d.ts → dist/Label.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -68,11 +68,13 @@ declare const __propDef: {
             variant: string;
         };
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type LabelProps = typeof __propDef.props;
 export type LabelEvents = typeof __propDef.events;
 export type LabelSlots = typeof __propDef.slots;
-export default class Label extends SvelteComponentTyped<LabelProps, LabelEvents, LabelSlots> {
+export default class Label extends SvelteComponent<LabelProps, LabelEvents, LabelSlots> {
     get click(): () => void;
     get blur(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;

package/{Link.svelte.d.ts → dist/Link.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -51,11 +51,13 @@ declare const __propDef: {
             variant: string;
         };
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type LinkProps = typeof __propDef.props;
 export type LinkEvents = typeof __propDef.events;
 export type LinkSlots = typeof __propDef.slots;
-export default class Link extends SvelteComponentTyped<LinkProps, LinkEvents, LinkSlots> {
+export default class Link extends SvelteComponent<LinkProps, LinkEvents, LinkSlots> {
     get blur(): () => void;
     get click(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;

package/{List.svelte → dist/List.svelte}

@@ -75,7 +75,7 @@ const selectItem = (value, element) => {
     element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
 };
 export const selectFirstItem = () => {
-    let candidate = listRef?.firstElementChild;
+    let candidate = listRef?.querySelector('[data-value][role=listitem]');
     while (candidate && !isElementListItem(candidate)) {
         candidate = candidate.nextElementSibling;
     }
@@ -113,7 +113,8 @@ export const selectNextItem = () => {
     return false;
 };
 export const selectLastItem = () => {
-    let candidate = listRef?.lastElementChild;
+    let candidate = listRef?.querySelector('[data-value][role=listitem]:last-of-type');
+    console.log('in selectLastItem', candidate);
     while (candidate && !isElementListItem(candidate)) {
         candidate = candidate.previousElementSibling;
     }
@@ -153,28 +154,36 @@ const onKeydown = (event) => {
                 return false;
             case 'ArrowLeft':
                 if (horizontal) {
-                    selectedValue !== undefined ? selectPreviousItem() : selectLastItem();
+                    selectedValue !== undefined && selectedValue.length > 0
+                        ? selectPreviousItem()
+                        : selectLastItem();
                 }
                 event.preventDefault();
                 event.stopPropagation();
                 return false;
             case 'ArrowRight':
                 if (horizontal) {
-                    selectedValue !== undefined ? selectNextItem() : selectFirstItem();
+                    selectedValue !== undefined && selectedValue.length > 0
+                        ? selectNextItem()
+                        : selectFirstItem();
                 }
                 event.preventDefault();
                 event.stopPropagation();
                 return false;
             case 'ArrowUp':
                 if (!horizontal) {
-                    selectedValue !== undefined ? selectPreviousItem() : selectLastItem();
+                    selectedValue !== undefined && selectedValue.length > 0
+                        ? selectPreviousItem()
+                        : selectLastItem();
                 }
                 event.preventDefault();
                 event.stopPropagation();
                 return false;
             case 'ArrowDown':
                 if (!horizontal) {
-                    selectedValue !== undefined ? selectNextItem() : selectFirstItem();
+                    selectedValue !== undefined && selectedValue.length > 0
+                        ? selectNextItem()
+                        : selectFirstItem();
                 }
                 event.preventDefault();
                 event.stopPropagation();

package/{List.svelte.d.ts → dist/List.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -55,12 +55,14 @@ declare const __propDef: {
             variant: string;
         };
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type ListProps = typeof __propDef.props;
 export type ListEvents = typeof __propDef.events;
 export type ListSlots = typeof __propDef.slots;
 /** A list of items where a single item can be selected. */
-export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
+export default class List extends SvelteComponent<ListProps, ListEvents, ListSlots> {
     get blur(): () => void;
     get click(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;

package/{List.types.d.ts → dist/List.types.d.ts}

@@ -1,3 +1,4 @@
+/// <reference types="svelte" />
 import type { Readable, Writable } from 'svelte/store';
 /**
  * The context for a List and its descendants.

package/{ListItem.svelte.d.ts → dist/ListItem.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -53,11 +53,13 @@ declare const __propDef: {
             variant: string;
         };
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 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> {
+export default class ListItem extends SvelteComponent<ListItemProps, ListItemEvents, ListItemSlots> {
     get click(): () => void;
     get blur(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;

package/{Menu.svelte.d.ts → dist/Menu.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -46,11 +46,13 @@ declare const __propDef: {
             variant: string;
         };
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 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> {
+export default class Menu extends SvelteComponent<MenuProps, MenuEvents, MenuSlots> {
     get blur(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;
     get focusFirstMenuItem(): () => boolean;

package/{MenuBar.svelte.d.ts → dist/MenuBar.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -45,11 +45,13 @@ declare const __propDef: {
             variant: string;
         };
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 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> {
+export default class MenuBar extends SvelteComponent<MenuBarProps, MenuBarEvents, MenuBarSlots> {
     get blur(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;
 }

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

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -56,12 +56,14 @@ declare const __propDef: {
         };
         items: {};
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type MenuButtonProps = typeof __propDef.props;
 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> {
+export default class MenuButton extends SvelteComponent<MenuButtonProps, MenuButtonEvents, MenuButtonSlots> {
     get click(): () => void;
     get blur(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;

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

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -69,11 +69,13 @@ declare const __propDef: {
             disabled: boolean;
         };
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 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> {
+export default class MenuItem extends SvelteComponent<MenuItemProps, MenuItemEvents, MenuItemSlots> {
     get blur(): () => void;
     get click(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;

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

@@ -1,3 +1,4 @@
+/// <reference types="svelte" />
 import type { Writable } from 'svelte/store';
 import type { MENU_ITEM_ROLES } from './MenuItem.constants';
 type MenuItemRoleTuple = typeof MENU_ITEM_ROLES;

package/{MenuItemDisplay.svelte.d.ts → dist/MenuItemDisplay.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /** When true, displays the menu item as checked. */ checked?: boolean | undefined;
@@ -28,10 +28,12 @@ declare const __propDef: {
             variant: string;
         };
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 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 default class MenuItemDisplay extends SvelteComponent<MenuItemDisplayProps, MenuItemDisplayEvents, MenuItemDisplaySlots> {
 }
 export {};

package/{MenuSeparator.svelte.d.ts → dist/MenuSeparator.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -8,11 +8,13 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 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 default class MenuSeparator extends SvelteComponent<MenuSeparatorProps, MenuSeparatorEvents, MenuSeparatorSlots> {
 }
 export {};

package/dist/Popover.constants.d.ts

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

package/{Popover.constants.js → dist/Popover.constants.js}

@@ -12,4 +12,3 @@ export const POPOVER_PLACEMENTS = [
     'left',
     'left-start'
 ];
-export const STERLING_PORTAL_HOST_ID = 'SterlingPortalHost';

package/{Popover.svelte → dist/Popover.svelte}

@@ -1,7 +1,7 @@
-<script>import { onMount } from 'svelte';
+<script>import { getContext, onMount, tick } from 'svelte';
 import { autoUpdate, computePosition, flip, offset } from '@floating-ui/dom';
 import { portal } from './actions/portal';
-import { STERLING_PORTAL_HOST_ID } from './Popover.constants';
+import { STERLING_PORTAL_HOST_ID, STERLING_PORTAL_CONTEXT_ID } from './Portal.constants';
 // ----- Props ----- //
 /** When true, content is rendered only when the popover is open. */
 export let conditionalRender = true;
@@ -25,22 +25,32 @@ let popupPosition = { x: 0, y: 0 };
 $: floatingUIPlacement = placement;
 let bodyHeight = 0;
 let resizeObserver = undefined;
+const { portalHost: contextPortalHost } = getContext(STERLING_PORTAL_CONTEXT_ID) || {
+    portalHost: undefined
+};
 // ----- Portal Host ----- //
-const ensurePortalHost = () => {
-    if (globalThis?.document) {
-        if (portalHost) {
-            return portalHost;
-        }
-        let host = document.querySelector(`#${STERLING_PORTAL_HOST_ID}`);
+const ensurePortalHost = async () => {
+    await tick();
+    // use the host set from context, usually set from a Dialog
+    let host = $contextPortalHost;
+    // use or create the sterling portal host
+    if (!host && globalThis?.document) {
+        host = globalThis.document.querySelector(`#${STERLING_PORTAL_HOST_ID}`);
+        // fallback to creating the sterling portal host
         if (!host) {
-            host = document.createElement('div');
+            host = globalThis.document.createElement('div');
             host.id = STERLING_PORTAL_HOST_ID;
             host.style.overflow = 'visible';
-            document.body.append(host);
+            globalThis.document.body.append(host);
         }
-        portalHost = host;
     }
+    portalHost = host;
 };
+$: {
+    if ($contextPortalHost || !$contextPortalHost) {
+        ensurePortalHost();
+    }
+}
 // ----- Position ----- //
 $: middleware = [offset({ mainAxis: mainAxisOffset, crossAxis: crossAxisOffset }), flip()];
 const computePopoverPosition = async () => {
@@ -87,10 +97,7 @@ ensurePortalHost();
 </script>
 
 {#if open || !conditionalRender}
-  <div
-    use:portal={{ target: portalHost ?? globalThis?.document?.body }}
-    class="sterling-popover-portal"
-  >
+  <div use:portal={{ target: portalHost }} class="sterling-popover-portal">
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
       bind:this={popupRef}