@geoffcox/sterling-svelte 2.0.0 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight UI component library for Svelte.",
   "license": "MIT",
@@ -46,7 +46,7 @@
     }
   },
   "files": [
-    "**/*",
+    "dist",
     "!**/*.test.*",
     "!**/*.spec.*"
   ],
@@ -60,40 +60,38 @@
     "package": "svelte-kit sync && svelte-package && publint",
     "preview": "vite preview",
     "test": "npm run test:integration && npm run test:unit",
-    "test:integration": "playwright test",
     "test:unit": "vitest"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
   },
   "devDependencies": {
+    "@eslint/compat": "^1.2.5",
+    "@eslint/js": "^9.18.0",
     "@fontsource/atkinson-hyperlegible": "^5.1.1",
-    "@fontsource/open-sans": "^4.5.14",
     "@fontsource/source-code-pro": "^4.5.14",
-    "@geoffcox/sterling-svelte-themes": "^1.0.2",
-    "@eslint/compat": "^1.2.3",
-    "@playwright/test": "^1.45.3",
-    "@sveltejs/adapter-auto": "^3.0.0",
-    "@sveltejs/adapter-static": "^3.0.0",
-    "@sveltejs/kit": "^2.0.0",
+    "@geoffcox/sterling-svelte-themes": "^1.0.4",
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.16.0",
     "@sveltejs/package": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
-    "@types/eslint": "^8.56.7",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/svelte": "^5.2.4",
     "@types/lodash-es": "^4.17.6",
-    "eslint": "^9.7.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.36.0",
-    "globals": "^15.0.0",
-    "prettier": "^3.3.2",
-    "prettier-plugin-svelte": "^3.2.6",
-    "publint": "^0.2.0",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-svelte": "^3.0.0",
+    "globals": "^16.0.0",
+    "jsdom": "^26.0.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.3",
+    "publint": "^0.3.2",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
-    "svelte-preprocess": "^6.0.3",
     "typescript": "^5.0.0",
-    "typescript-eslint": "^8.0.0",
-    "vite": "^5.4.11",
-    "vitest": "^2.1.4"
+    "typescript-eslint": "^8.20.0",
+    "vite": "^6.0.0",
+    "vitest": "^3.0.0"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.1.0",

package/@types/clickOutside.d.ts

@@ -1,15 +0,0 @@
-import type { EventHandler } from 'svelte/elements';
-
-export type ClickOutsideEventDetail = {
-  mouseEvent: MouseEvent;
-};
-
-export type ClickOutsideEvent = CustomEvent<ClickOutsideEventDetail>;
-
-declare module 'svelte/elements' {
-  export interface DOMAttributes<T extends EventTarget> {
-    'on:click_outside'?: EventHandler<ClickOutsideEvent, T>;
-  }
-}
-
-export {}; // ensure this is not an ambient module, else types will be overridden instead of augmented

package/Button.svelte

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

package/Button.svelte.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="svelte" />
-import type { HTMLButtonAttributes } from 'svelte/elements';
-declare const Button: import("svelte").Component<HTMLButtonAttributes, {
-    click: () => void;
-    blur: () => void;
-    focus: (options?: FocusOptions) => void;
-}, "">;
-type Button = ReturnType<typeof Button>;
-export default Button;

package/Callout.svelte

@@ -1,177 +0,0 @@
-<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) || {
-    portalHost: undefined
-};
-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 = globalThis.document.createElement('div');
-            host.id = STERLING_PORTAL_HOST_ID;
-            host.style.overflow = 'visible';
-            globalThis.document.body.append(host);
-        }
-    }
-    portalHost = host;
-};
-let middleware = $derived([
-    offset({ mainAxis: mainAxisOffset, crossAxis: crossAxisOffset }),
-    flip(),
-    arrowRef && arrow({ element: arrowRef, padding: 8 })
-]);
-const computeCalloutPosition = async () => {
-    if (reference && popupRef) {
-        popupPosition = await computePosition(reference, popupRef, {
-            placement: floatingUIPlacement,
-            middleware
-        });
-        console.log('popupPosition', popupPosition);
-    }
-    else {
-        popupPosition = { x: 0, y: 0 };
-    }
-};
-// whenever a positioned element is portaled it needs resubscription to auto-update
-let cleanupAutoUpdate = () => { };
-const autoUpdateCalloutPosition = () => {
-    cleanupAutoUpdate();
-    cleanupAutoUpdate = () => { };
-    if (reference && popupRef) {
-        cleanupAutoUpdate = autoUpdate(reference, popupRef, computeCalloutPosition);
-    }
-};
-$effect(() => {
-    autoUpdateCalloutPosition();
-    return () => {
-        cleanupAutoUpdate();
-        cleanupAutoUpdate = () => { };
-    };
-});
-$effect(() => {
-    bodyHeight;
-    reference;
-    computeCalloutPosition();
-});
-// ----- Arrow ----- //
-const getArrowPlacementStyle = (position) => {
-    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);`);
-        }
-    }
-    return '';
-};
-const getArrowOffsetStyle = (position) => {
-    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;`;
-        }
-    }
-    return '';
-};
-let arrowStyle = $derived(getArrowPlacementStyle(popupPosition) + getArrowOffsetStyle(popupPosition));
-// ----- Animation ----- //
-const fadeNoOp = (node, params) => {
-    return { delay: 0, duration: 0 };
-};
-let fadeMotion = $derived(!$prefersReducedMotion ? fade : fadeNoOp);
-// ----- EventHandlers ----- //
-const onKeydown = (event) => {
-    if (event.key === 'Escape') {
-        open = false;
-    }
-    rest.onkeydown?.(event);
-};
-$effect(() => {
-    ensurePortalHost();
-    resizeObserver = new ResizeObserver((entries) => {
-        bodyHeight = entries[0].target.clientHeight;
-    });
-    // start observing a DOM node
-    resizeObserver.observe(document.body);
-    return () => {
-        resizeObserver?.unobserve(document.body);
-        resizeObserver?.disconnect();
-        resizeObserver = undefined;
-    };
-});
-ensurePortalHost();
-</script>
-
-{#if open || !conditionalRender}
-  <div
-    use:portal={{ target: portalHost }}
-    class="sterling-callout-portal"
-    transition:fadeMotion|global={{ duration: 250 }}
-  >
-    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-    <div
-      bind:this={popupRef}
-      class={['sterling-callout', _class].filter(Boolean).join(' ')}
-      class:open
-      class:top={popupPosition.placement === 'top'}
-      class:top-start={popupPosition.placement === 'top-start'}
-      class:top-end={popupPosition.placement === 'top-end'}
-      class:right={popupPosition.placement === 'right'}
-      class:right-start={popupPosition.placement === 'right-start'}
-      class:right-end={popupPosition.placement === 'right-end'}
-      class:bottom={popupPosition.placement === 'bottom'}
-      class:bottom-start={popupPosition.placement === 'bottom-start'}
-      class:bottom-end={popupPosition.placement === 'bottom-end'}
-      class:left={popupPosition.placement === 'left'}
-      class:left-start={popupPosition.placement === 'left-start'}
-      class:left-end={popupPosition.placement === 'left-end'}
-      role="tooltip"
-      {...rest}
-      onkeydown={onKeydown}
-      style="left:{popupPosition.x}px; top:{popupPosition.y}px"
-    >
-      {#if children}
-        {#if typeof children === 'string'}
-          <div class="callout-text">{children}</div>
-        {:else}
-          {@render children()}
-        {/if}
-      {/if}
-      <div class="arrow" bind:this={arrowRef} style={arrowStyle}></div>
-    </div>
-  </div>
-{/if}

package/Callout.svelte.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="svelte" />
-import type { PopoverPlacement } from './Popover.types';
-import type { HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAttributes<HTMLDivElement> & {
-    conditionalRender?: boolean | null;
-    crossAxisOffset?: number;
-    mainAxisOffset?: number;
-    open?: boolean | null;
-    placement?: PopoverPlacement;
-    portalHost?: HTMLElement;
-    reference?: HTMLElement | null;
-};
-declare const Callout: import("svelte").Component<Props, {}, "conditionalRender" | "crossAxisOffset" | "mainAxisOffset" | "open" | "placement">;
-type Callout = ReturnType<typeof Callout>;
-export default Callout;

package/Callout.types.d.ts

@@ -1,11 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-import type { PopoverPlacement } from './Popover.types';
-export type CalloutProps = HTMLAttributes<HTMLDivElement> & {
-    conditionalRender?: boolean | null;
-    crossAxisOffset?: number;
-    mainAxisOffset?: number;
-    open?: boolean | null;
-    placement?: PopoverPlacement;
-    portalHost?: HTMLElement;
-    reference?: HTMLElement | null;
-};

package/Callout.types.js

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

package/Checkbox.svelte

@@ -1,43 +0,0 @@
-<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(() => {
-    if (children && id === undefined) {
-        id = idGenerator.nextId('Checkbox');
-    }
-});
-// ----- Methods ----- //
-export const blur = () => {
-    inputRef?.blur();
-};
-export const click = () => {
-    inputRef?.click();
-};
-export const focus = (options) => {
-    inputRef?.focus(options);
-};
-</script>
-
-<!--
-	@component
-	A styled HTML input type=checkbox element.
--->
-<div
-  class={['sterling-checkbox', _class].filter(Boolean).join(' ')}
-  class:checked
-  class:disabled
-  class:using-keyboard={$usingKeyboard}
->
-  <div class="container">
-    <input bind:this={inputRef} bind:checked {disabled} {id} type="checkbox" {...rest} />
-    <div class="indicator"></div>
-  </div>
-  {#if children}
-    <label for={id}>
-      {@render children()}
-    </label>
-  {/if}
-</div>

package/Checkbox.svelte.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="svelte" />
-import type { HTMLInputAttributes } from 'svelte/elements';
-/** A styled HTML input type=checkbox element. */
-declare const Checkbox: import("svelte").Component<HTMLInputAttributes, {
-    blur: () => void;
-    click: () => void;
-    focus: (options?: FocusOptions) => void;
-}, "disabled" | "checked">;
-type Checkbox = ReturnType<typeof Checkbox>;
-export default Checkbox;

package/Dialog.svelte

@@ -1,151 +0,0 @@
-<svelte:options runes={true} />
-
-<script lang="ts">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;
-let { backdropCloses = false, open = $bindable(false), body, class: _class, content, footer, header, returnValue = $bindable(''), headerTitle, ...rest } = $props();
-let dialogRef;
-let contentRef;
-let formRef;
-// svelte-ignore non_reactive_update
-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
-    // the clickOutside action is not used and reimplemented here.
-    const targetNode = event?.target;
-    // the content must be used as the container because dialog::backdrop is considered
-    // part of the HTMLDialogElement
-    if (targetNode && !contentRef?.contains(targetNode) && backdropCloses) {
-        open = false;
-    }
-};
-const showDialog = () => {
-    if (dialogRef?.open === false) {
-        // when open, track clicks outside the dialog (use capture = true)
-        document.addEventListener('click', onDocumentClick, true);
-        returnValue = '';
-        dialogRef.showModal();
-    }
-    open = true;
-};
-const closeDialog = async () => {
-    if (dialogRef?.open === true) {
-        // when closed, stop tracking clicks outside the dialog
-        document.removeEventListener('click', onDocumentClick);
-        // to allow time for the CSS transition animation, closing the dialog is delayed
-        closing = true;
-        await tick();
-        setTimeout(() => {
-            dialogRef.close(returnValue);
-            open = false;
-            closing = false;
-        }, dialogFadeDuration);
-    }
-    else {
-        open = false;
-    }
-};
-const updateDialog = (open) => {
-    if (open) {
-        showDialog();
-    }
-    else {
-        closeDialog();
-    }
-};
-const onCancel = (event) => {
-    // Cancelling a dialog instantly hides the dialog.
-    // To allow animation with closeDialog, this event is canceled.
-    event.preventDefault();
-    event.stopPropagation();
-    returnValue = '';
-    closeDialog();
-    return false;
-};
-const onSubmit = (event) => {
-    // Submitting a form instantly hides the dialog.
-    // The dialog.close event is not cancellable, but form.submit is.
-    // To allow animation with closeDialog, this event is canceled.
-    // The form is resubmitted after the dialog closes to ensure the form is in the correct state.
-    const anyEvent = event;
-    if (anyEvent?.submitter.type === 'submit') {
-        if (dialogRef.open) {
-            const eventSubmitter = anyEvent?.submitter;
-            returnValue = eventSubmitter?.value ?? '';
-            closeDialog();
-            setTimeout(() => {
-                formRef.requestSubmit(eventSubmitter);
-            }, dialogFadeDuration);
-            event.preventDefault();
-            return false;
-        }
-    }
-    else {
-        event.preventDefault();
-        return false;
-    }
-};
-$effect(() => {
-    updateDialog(open);
-});
-onMount(() => {
-    updateDialog(open);
-    // Use the dialog for any element portals
-    portalHostStore.set(dialogRef);
-    dialogRef.addEventListener('cancel', onCancel);
-    return () => {
-        dialogRef?.removeEventListener('cancel', onCancel);
-        portalHostStore.set(undefined);
-    };
-});
-</script>
-
-<dialog
-  bind:this={dialogRef}
-  class={`sterling-dialog ${_class}`}
-  class:open
-  class:closing
-  {...rest}
->
-  <form method="dialog" bind:this={formRef} onsubmit={onSubmit}>
-    <div class="content" bind:this={contentRef}>
-      {#if content}
-        {@render content()}
-      {:else}
-        <div class="header">
-          {#if header}
-            {@render header()}
-          {:else}
-            <div class="title">
-              {#if headerTitle}
-                {#if typeof headerTitle === 'string'}
-                  {headerTitle}
-                {:else}
-                  {@render headerTitle()}
-                {/if}
-              {/if}
-            </div>
-            <div class="close">
-              <Button class={`circular tool`} onclick={() => closeDialog()}>
-                <div class="close-x"></div>
-              </Button>
-            </div>
-          {/if}
-        </div>
-        <div class="body">
-          {@render body?.()}
-        </div>
-        <div class="separator"></div>
-        <div class="footer">
-          {@render footer?.()}
-        </div>
-      {/if}
-    </div>
-  </form>
-</dialog>

package/Dialog.svelte.d.ts

@@ -1,14 +0,0 @@
-import type { HTMLDialogAttributes } from 'svelte/elements';
-import { type Snippet } from 'svelte';
-type Props = HTMLDialogAttributes & {
-    backdropCloses?: boolean | null | undefined;
-    body?: Snippet;
-    content?: Snippet;
-    footer?: Snippet;
-    header?: Snippet;
-    returnValue?: string;
-    headerTitle?: string | Snippet;
-};
-declare const Dialog: import("svelte").Component<Props, {}, "open" | "returnValue">;
-type Dialog = ReturnType<typeof Dialog>;
-export default Dialog;

package/Dropdown.svelte

@@ -1,109 +0,0 @@
-<svelte:options runes={true} />
-
-<script lang="ts">import {} from 'svelte';
-import Popover from './Popover.svelte';
-import { clickOutside } from './actions/clickOutside';
-import { idGenerator } from './idGenerator';
-import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
-import { slide } from 'svelte/transition';
-import { usingKeyboard } from './mediaQueries/usingKeyboard';
-const popupId = idGenerator.nextId('Dropdown-popup');
-let { class: _class, children, disabled = false, open = $bindable(false), onOpen, stayOpenOnClickAway = false, button, buttonIcon, value, ...rest } = $props();
-// svelte-ignore non_reactive_update
-let dropdownRef = $state(undefined);
-// svelte-ignore non_reactive_update
-let popupContentRef = $state(undefined);
-// ----- Reactions ----- //
-$effect(() => {
-    onOpen?.(open);
-});
-// ----- Methods ----- //
-export const click = () => {
-    dropdownRef?.click();
-};
-export const blur = () => {
-    dropdownRef?.blur();
-};
-export const focus = (options) => {
-    dropdownRef?.focus(options);
-};
-const onClick = (event) => {
-    if (!disabled) {
-        open = !open;
-        event.preventDefault();
-        event.stopPropagation();
-    }
-    rest.onclick?.(event);
-};
-const onKeydown = (event) => {
-    if (!event.altKey && !event.ctrlKey && !event.shiftKey) {
-        switch (event.key) {
-            case ' ':
-                open = !open;
-                event.preventDefault();
-                event.stopPropagation();
-            case 'Escape':
-                open = false;
-                event.preventDefault();
-                event.stopPropagation();
-        }
-    }
-    rest.onkeydown?.(event);
-};
-const onClickOutside = (event) => {
-    if (!stayOpenOnClickAway) {
-        open = false;
-    }
-};
-// ----- Animation ----- //
-const slideNoOp = (node, params) => {
-    return { delay: 0, duration: 0 };
-};
-let slideMotion = $derived(!$prefersReducedMotion ? slide : slideNoOp);
-</script>
-
-<div
-  bind:this={dropdownRef}
-  aria-controls={popupId}
-  aria-haspopup={true}
-  aria-expanded={open}
-  class={`sterling-dropdown ${_class}`}
-  class:disabled
-  class:open
-  class:using-keyboard={$usingKeyboard}
-  role="combobox"
-  tabindex="0"
-  use:clickOutside={{ ignoreOthers: [popupContentRef!], onclickoutside: onClickOutside }}
-  {...rest}
-  onclick={onClick}
-  onkeydown={onKeydown}
->
-  <div class="value">
-    {#if value}
-      {#if typeof value === 'string'}
-        {value}
-      {:else}
-        {@render value()}
-      {/if}
-    {/if}
-  </div>
-  <div class="button">
-    {#if button}
-      {@render button()}
-    {:else if buttonIcon}
-      {@render buttonIcon()}
-    {:else}
-      <div class="chevron"></div>
-    {/if}
-  </div>
-
-  <Popover reference={dropdownRef} open={!disabled && open} placement="bottom-start">
-    <div
-      class={`sterling-dropdown-popup-content ${_class}`}
-      transition:slideMotion|global={{ duration: 200 }}
-      bind:this={popupContentRef}
-    >
-      {@render children?.()}
-    </div>
-  </Popover>
-</div>