@geoffcox/sterling-svelte 2.0.1 → 2.0.3

package/README.md

@@ -11,7 +11,7 @@ npm install @geoffcox/sterling-svelte
 ## Documentation
 
 The project builds the documentation for the library as a SvelteKit application.
-See the published version of the [documentation](https://geoffcox.github.io/demos/sterling-svelte/).
+See the published version of the [documentation](https://geoffcox.github.io/docs/sterling-svelte/).
 
 ## Repository
 

package/dist/Button.svelte

@@ -1,24 +1,28 @@
 <svelte:options runes={true} />
 
-<script lang="ts">let { children, class: _class, ...rest } = $props();
-let buttonRef;
-export const click = () => {
+<script lang="ts">
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+
+  type Props = HTMLButtonAttributes;
+
+  let { children, class: _class, ...rest }: Props = $props();
+
+  let buttonRef: HTMLButtonElement;
+
+  export const click = () => {
     buttonRef?.click();
-};
-export const blur = () => {
+  };
+
+  export const blur = () => {
     buttonRef?.blur();
-};
-export const focus = (options) => {
+  };
+
+  export const focus = (options?: FocusOptions) => {
     buttonRef?.focus(options);
-};
+  };
 </script>
 
-<button
-  bind:this={buttonRef}
-  class={['sterling-button', _class].filter(Boolean).join(' ')}
-  type="button"
-  {...rest}
->
+<button bind:this={buttonRef} class={['sterling-button', _class]} type="button" {...rest}>
   {#if children}
     {@render children()}
   {/if}

package/dist/Button.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { HTMLButtonAttributes } from 'svelte/elements';
 declare const Button: import("svelte").Component<HTMLButtonAttributes, {
     click: () => void;

package/dist/Callout.svelte

@@ -1,139 +1,205 @@
 <svelte:options runes={true} />
 
-<script lang="ts">import { getContext, tick } from 'svelte';
-import { arrow, autoUpdate, computePosition, flip, offset } from '@floating-ui/dom';
-import { portal } from './actions/portal';
-import { fade } from 'svelte/transition';
-import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
-import { STERLING_PORTAL_HOST_ID, STERLING_PORTAL_CONTEXT_ID } from './Portal.constants';
-let { children, conditionalRender = $bindable(true), crossAxisOffset = $bindable(0), mainAxisOffset = $bindable(0), open = $bindable(false), placement = $bindable('top-start'), portalHost, reference, class: _class, ...rest } = $props();
-let popupRef = $state(undefined);
-let arrowRef = $state(undefined);
-let popupPosition = $state({ x: 0, y: 0 });
-let floatingUIPlacement = $derived(placement);
-let bodyHeight = $state(0);
-let resizeObserver = undefined;
-const { portalHost: contextPortalHost } = getContext(STERLING_PORTAL_CONTEXT_ID) || {
+<script lang="ts">
+  import {
+    arrow,
+    autoUpdate,
+    computePosition,
+    flip,
+    offset,
+    type ComputePositionReturn,
+    type Placement
+  } from '@floating-ui/dom';
+  import { getContext, tick } from 'svelte';
+  import type { HTMLAttributes, KeyboardEventHandler } from 'svelte/elements';
+  import { fade, type FadeParams, type TransitionConfig } from 'svelte/transition';
+  import { portal } from './actions/portal';
+  import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
+  import type { PopoverPlacement } from './Popover.types';
+  import { STERLING_PORTAL_CONTEXT_ID, STERLING_PORTAL_HOST_ID } from './Portal.constants';
+  import type { PortalContext } from './Portal.types';
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    conditionalRender?: boolean | null;
+    crossAxisOffset?: number;
+    mainAxisOffset?: number;
+    open?: boolean | null;
+    placement?: PopoverPlacement;
+    portalHost?: HTMLElement;
+    reference?: HTMLElement | null;
+  };
+
+  let {
+    children,
+    conditionalRender = $bindable(true),
+    crossAxisOffset = $bindable(0),
+    mainAxisOffset = $bindable(0),
+    open = $bindable(false),
+    placement = $bindable('top-start'),
+    portalHost,
+    reference,
+    class: _class,
+    ...rest
+  }: Props = $props();
+
+  let popupRef: HTMLDivElement | undefined = $state(undefined);
+  let arrowRef: HTMLDivElement | undefined = $state(undefined);
+  let popupPosition: Partial<ComputePositionReturn> = $state({ x: 0, y: 0 });
+  let floatingUIPlacement = $derived(placement as Placement);
+  let bodyHeight = $state(0);
+  let resizeObserver: ResizeObserver | undefined = undefined;
+
+  const portalContext = getContext<PortalContext>(STERLING_PORTAL_CONTEXT_ID) || {
     portalHost: undefined
-};
-const ensurePortalHost = async () => {
+  };
+
+  const ensurePortalHost = async () => {
     await tick();
+
     // use the host set from context, usually set from a Dialog
-    let host = $contextPortalHost;
+    let host = portalContext.portalHost;
+
     // 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 = globalThis.document.createElement('div');
-            host.id = STERLING_PORTAL_HOST_ID;
-            host.style.overflow = 'visible';
-            globalThis.document.body.append(host);
-        }
+      host = globalThis.document.querySelector(`#${STERLING_PORTAL_HOST_ID}`) as HTMLElement;
+
+      // fallback to creating the sterling portal host
+      if (!host) {
+        host = globalThis.document.createElement('div');
+        host.id = STERLING_PORTAL_HOST_ID;
+        host.style.overflow = 'visible';
+        globalThis.document.body.append(host);
+      }
     }
+
     portalHost = host;
-};
-let middleware = $derived([
+  };
+
+  let middleware = $derived([
     offset({ mainAxis: mainAxisOffset, crossAxis: crossAxisOffset }),
     flip(),
     arrowRef && arrow({ element: arrowRef, padding: 8 })
-]);
-const computeCalloutPosition = async () => {
+  ]);
+
+  const computeCalloutPosition = async () => {
     if (reference && popupRef) {
-        popupPosition = await computePosition(reference, popupRef, {
-            placement: floatingUIPlacement,
-            middleware
-        });
-        console.log('popupPosition', popupPosition);
-    }
-    else {
-        popupPosition = { x: 0, y: 0 };
+      popupPosition = await computePosition(reference, popupRef, {
+        placement: floatingUIPlacement,
+        middleware
+      });
+    } else {
+      popupPosition = { x: 0, y: 0 };
     }
-};
-// whenever a positioned element is portaled it needs resubscription to auto-update
-let cleanupAutoUpdate = () => { };
-const autoUpdateCalloutPosition = () => {
+  };
+
+  // whenever a positioned element is portaled it needs resubscription to auto-update
+  let cleanupAutoUpdate = () => {};
+
+  const autoUpdateCalloutPosition = () => {
     cleanupAutoUpdate();
-    cleanupAutoUpdate = () => { };
+    cleanupAutoUpdate = () => {};
     if (reference && popupRef) {
-        cleanupAutoUpdate = autoUpdate(reference, popupRef, computeCalloutPosition);
+      cleanupAutoUpdate = autoUpdate(reference, popupRef, computeCalloutPosition);
     }
-};
-$effect(() => {
+  };
+
+  $effect(() => {
     autoUpdateCalloutPosition();
     return () => {
-        cleanupAutoUpdate();
-        cleanupAutoUpdate = () => { };
+      cleanupAutoUpdate();
+      cleanupAutoUpdate = () => {};
     };
-});
-$effect(() => {
+  });
+
+  $effect(() => {
     bodyHeight;
     reference;
     computeCalloutPosition();
-});
-// ----- Arrow ----- //
-const getArrowPlacementStyle = (position) => {
+  });
+
+  // ----- Arrow ----- //
+
+  const getArrowPlacementStyle = (position?: Partial<ComputePositionReturn>) => {
     if (position?.placement && arrowRef) {
-        switch (position.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);`);
-        }
+      switch (position.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 = (position) => {
+  };
+
+  const getArrowOffsetStyle = (position?: Partial<ComputePositionReturn>) => {
     const arrow = position?.middlewareData?.arrow;
     if (arrow) {
-        if (arrow.x !== null && arrow.x !== undefined) {
-            return `left: ${arrow.x}px;`;
-        }
-        else if (arrow.y !== null && arrow.y !== undefined) {
-            return `top: ${arrow.y}px;`;
-        }
+      if (arrow.x !== null && arrow.x !== undefined) {
+        return `left: ${arrow.x}px;`;
+      } else if (arrow.y !== null && arrow.y !== undefined) {
+        return `top: ${arrow.y}px;`;
+      }
     }
     return '';
-};
-let arrowStyle = $derived(getArrowPlacementStyle(popupPosition) + getArrowOffsetStyle(popupPosition));
-// ----- Animation ----- //
-const fadeNoOp = (node, params) => {
+  };
+
+  let arrowStyle = $derived(
+    getArrowPlacementStyle(popupPosition) + getArrowOffsetStyle(popupPosition)
+  );
+
+  // ----- Animation ----- //
+
+  const fadeNoOp = (node: Element, params?: FadeParams): TransitionConfig => {
     return { delay: 0, duration: 0 };
-};
-let fadeMotion = $derived(!$prefersReducedMotion ? fade : fadeNoOp);
-// ----- EventHandlers ----- //
-const onKeydown = (event) => {
+  };
+
+  let fadeMotion = $derived(!$prefersReducedMotion ? fade : fadeNoOp);
+
+  // ----- EventHandlers ----- //
+
+  const onKeydown: KeyboardEventHandler<HTMLDivElement> = (event) => {
     if (event.key === 'Escape') {
-        open = false;
+      open = false;
     }
     rest.onkeydown?.(event);
-};
-$effect(() => {
+  };
+
+  $effect(() => {
     ensurePortalHost();
+
     resizeObserver = new ResizeObserver((entries) => {
-        bodyHeight = entries[0].target.clientHeight;
+      bodyHeight = entries[0].target.clientHeight;
     });
+
     // start observing a DOM node
     resizeObserver.observe(document.body);
+
     return () => {
-        resizeObserver?.unobserve(document.body);
-        resizeObserver?.disconnect();
-        resizeObserver = undefined;
+      resizeObserver?.unobserve(document.body);
+      resizeObserver?.disconnect();
+      resizeObserver = undefined;
     };
-});
-ensurePortalHost();
+  });
+
+  ensurePortalHost();
 </script>
 
 {#if open || !conditionalRender}
@@ -145,7 +211,7 @@ ensurePortalHost();
     <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
     <div
       bind:this={popupRef}
-      class={['sterling-callout', _class].filter(Boolean).join(' ')}
+      class={['sterling-callout', _class]}
       class:open
       class:top={popupPosition.placement === 'top'}
       class:top-start={popupPosition.placement === 'top-start'}

package/dist/Callout.svelte.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="svelte" />
-import type { PopoverPlacement } from './Popover.types';
 import type { HTMLAttributes } from 'svelte/elements';
+import type { PopoverPlacement } from './Popover.types';
 type Props = HTMLAttributes<HTMLDivElement> & {
     conditionalRender?: boolean | null;
     crossAxisOffset?: number;

package/dist/Checkbox.svelte

@@ -1,24 +1,43 @@
 <svelte:options runes={true} />
 
-<script lang="ts">import { idGenerator } from './idGenerator';
-import { usingKeyboard } from './mediaQueries/usingKeyboard';
-let { id, children, checked = $bindable(false), class: _class, disabled = $bindable(false), ...rest } = $props();
-let inputRef;
-$effect(() => {
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import { usingKeyboard } from './mediaQueries/usingKeyboard';
+
+  const uuid = $props.id();
+
+  type Props = HTMLInputAttributes;
+
+  let {
+    id,
+    children,
+    checked = $bindable(false),
+    class: _class,
+    disabled = $bindable(false),
+    ...rest
+  }: Props = $props();
+
+  let inputRef: HTMLInputElement;
+
+  $effect(() => {
     if (children && id === undefined) {
-        id = idGenerator.nextId('Checkbox');
+      id = `Checkbox-${uuid}`;
     }
-});
-// ----- Methods ----- //
-export const blur = () => {
+  });
+
+  // ----- Methods ----- //
+
+  export const blur = () => {
     inputRef?.blur();
-};
-export const click = () => {
+  };
+
+  export const click = () => {
     inputRef?.click();
-};
-export const focus = (options) => {
+  };
+
+  export const focus = (options?: FocusOptions) => {
     inputRef?.focus(options);
-};
+  };
 </script>
 
 <!--
@@ -26,7 +45,7 @@ export const focus = (options) => {
 	A styled HTML input type=checkbox element.
 -->
 <div
-  class={['sterling-checkbox', _class].filter(Boolean).join(' ')}
+  class={['sterling-checkbox', _class]}
   class:checked
   class:disabled
   class:using-keyboard={$usingKeyboard}

package/dist/Checkbox.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { HTMLInputAttributes } from 'svelte/elements';
 /** A styled HTML input type=checkbox element. */
 declare const Checkbox: import("svelte").Component<HTMLInputAttributes, {