@geoffcox/sterling-svelte 1.0.6 → 1.0.9

package/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/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/dist/Popover.constants.d.ts

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

package/dist/Popover.constants.js

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

package/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}

package/dist/Portal.constants.d.ts

@@ -0,0 +1,2 @@
+export declare const STERLING_PORTAL_HOST_ID = "SterlingPortalHost";
+export declare const STERLING_PORTAL_CONTEXT_ID = "SterlingPortalContext";

package/dist/Portal.constants.js

@@ -0,0 +1,2 @@
+export const STERLING_PORTAL_HOST_ID = 'SterlingPortalHost';
+export const STERLING_PORTAL_CONTEXT_ID = 'SterlingPortalContext';

package/dist/Portal.types.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="svelte" />
+import type { Readable } from 'svelte/store';
+export type PortalContext = {
+    /** The portal host for usePortal */
+    portalHost: Readable<HTMLElement | undefined>;
+};

package/dist/Portal.types.js

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

package/dist/actions/portal.d.ts

@@ -1,8 +1,8 @@
 export declare const portal: (node: HTMLElement, params: {
-    target: HTMLElement;
+    target?: HTMLElement;
 }) => {
     update: (params: {
-        target: HTMLElement;
+        target?: HTMLElement;
     }) => void;
     destroy(): void;
 };

package/dist/css/Callout.base.css

@@ -15,7 +15,7 @@
   display: none;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
-  height: fit-content;
+  height: auto;
   left: 0;
   overflow: visible;
   position: absolute;

package/dist/css/Dialog.base.css

@@ -2,6 +2,7 @@
   padding: 0;
   border: none;
   background: none;
+  overflow: visible;
 }
 
 .sterling-dialog::backdrop {

package/dist/css/Menu.base.css

@@ -9,7 +9,7 @@
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
-  height: fit-content;
+  height: auto;
   padding: 0.25em;
 }
 

package/dist/css/Popover.css

@@ -8,7 +8,7 @@
   display: none;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
-  height: fit-content;
+  height: auto;
   left: 0;
   overflow: visible;
   position: absolute;

package/dist/css/Radio.css

@@ -1,3 +1,2 @@
 @import url('./Radio.base.css');
 @import url('./Radio.colorful.css');
-@import url('./Radio.button.css');

package/dist/index.d.ts

@@ -65,3 +65,4 @@ import TreeChevron from './TreeChevron.svelte';
 import TreeItem from './TreeItem.svelte';
 import TreeItemDisplay from './TreeItemDisplay.svelte';
 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 };
+export * from './css/sterling.css';

package/dist/index.js

@@ -58,3 +58,4 @@ import TreeChevron from './TreeChevron.svelte';
 import TreeItem from './TreeItem.svelte';
 import TreeItemDisplay from './TreeItemDisplay.svelte';
 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 };
+export * from './css/sterling.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "1.0.6",
+  "version": "1.0.9",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -44,10 +44,11 @@
     ".": {
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
-    }
+    },
+    "./css/*.css": "./dist/css/*.css"
   },
   "files": [
-    "dist",
+    "dist/*",
     "!dist/**/*.test.*",
     "!dist/**/*.spec.*"
   ],
@@ -71,14 +72,15 @@
     "@fontsource/open-sans": "^4.5.14",
     "@fontsource/source-code-pro": "^4.5.14",
     "@playwright/test": "^1.28.1",
+    "@stackblitz/sdk": "^1.10.0",
     "@sveltejs/adapter-auto": "^3.0.0",
     "@sveltejs/adapter-static": "^3.0.0",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/package": "^2.0.0",
-    "@types/lodash-es": "^4.17.6",
-    "@types/tinycolor2": "^1.4.3",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "@types/eslint": "^8.56.7",
+    "@types/lodash-es": "^4.17.6",
+    "@types/tinycolor2": "^1.4.3",
     "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.36.0",

package/dist/css/Popover copy.css

@@ -1,21 +0,0 @@
-.sterling-popover-portal {
-  position: relative;
-  overflow: visible;
-}
-
-.sterling-popover {
-  box-sizing: border-box;
-  display: none;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
-  height: fit-content;
-  left: 0;
-  overflow: visible;
-  position: absolute;
-  top: 0;
-  width: max-content;
-}
-
-.sterling-popover.open {
-  display: grid;
-}

package/dist/css/Radio.button.css

@@ -1,113 +0,0 @@
-.sterling-radio.button {
-  align-content: center;
-  align-items: center;
-  background-color: var(--stsv-button__background-color);
-  border-color: var(--stsv-button__border-color);
-  border-radius: 0;
-  border-style: solid;
-  border-width: 2px;
-  box-sizing: border-box;
-  color: var(--stsv-button__color);
-  cursor: pointer;
-  display: inline-flex;
-  flex-direction: row;
-  font: inherit;
-  justify-content: center;
-  justify-items: center;
-  margin-left: -2px;
-  overflow: hidden;
-  padding: 0.5em 1em;
-  position: relative;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
-  white-space: nowrap;
-  user-select: none;
-}
-
-/* .sterling-radio.button:first-child {
-  border-top-left-radius: 8px;
-  border-bottom-left-radius: 8px;
-  border-left-width: 2px;
-}
-
-.sterling-radio.button:last-child {
-  border-top-right-radius: 8px;
-  border-bottom-right-radius: 8px;
-} */
-
-.sterling-radio.button:not(.checked):not(.disabled):hover {
-  background-color: var(--stsv-button__background-color--hover);
-  border-color: var(--stsv-button__border-color--hover);
-  color: var(--stsv-button__color--hover);
-}
-
-.sterling-radio.button.checked {
-  background-color: var(--stsv-button__background-color--active);
-  border-color: var(--stsv-button__border-color--active);
-  color: var(--stsv-button__color--active);
-}
-
-.sterling-radio.button.using-keyboard:focus-within {
-  border-color: var(--stsv-button__border-color--focus);
-  outline-color: var(--stsv-common__outline-color);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: 2px;
-  z-index: 1;
-}
-
-.sterling-radio.button .container {
-  margin-right: 0;
-}
-
-.sterling-radio.button input {
-  height: 0;
-  width: 0;
-}
-
-.sterling-radio.button.disabled * {
-  cursor: not-allowed;
-}
-
-.sterling-radio.button.disabled::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  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))
-  );
-  pointer-events: none;
-}
-
-.sterling-radio.button .indicator,
-.sterling-radio.button input:checked + .indicator,
-.sterling-radio.button:not(.disabled):hover .indicator,
-.sterling-radio.button input:focus-visible + .indicator {
-  display: none;
-}
-
-.sterling-radio.button .indicator::after,
-.sterling-radio.button input:checked + .indicator::after {
-  display: none;
-}
-.sterling-radio.button .container::after,
-.sterling-radio.button.disabled .container::after {
-  display: none;
-  opacity: 0;
-}
-
-@media (prefers-reduced-motion) {
-  .sterling-radio.button,
-  .sterling-radio.button::after {
-    transition: none;
-  }
-}