@geoffcox/sterling-svelte 1.0.12 → 2.0.1

package/dist/Button.svelte

@@ -1,10 +1,7 @@
-<script>// ----- Props ----- //
-export let disabled = false;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
+<svelte:options runes={true} />
+
+<script lang="ts">let { children, class: _class, ...rest } = $props();
 let buttonRef;
-// ----- Methods ----- //
 export const click = () => {
     buttonRef?.click();
 };
@@ -16,48 +13,13 @@ export const focus = (options) => {
 };
 </script>
 
-<!--
-	@component
-	A styled HTML button element.
--->
 <button
   bind:this={buttonRef}
-  class={`sterling-button ${variant}`}
-  {disabled}
+  class={['sterling-button', _class].filter(Boolean).join(' ')}
   type="button"
-  on:blur
-  on:click
-  on:drag
-  on:dragend
-  on:dragenter
-  on:dragleave
-  on:dragover
-  on:dragstart
-  on:drop
-  on:dblclick
-  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}
+  {...rest}
 >
-  <slot {disabled} {variant} />
+  {#if children}
+    {@render children()}
+  {/if}
 </button>

package/dist/Button.svelte.d.ts

@@ -1,65 +1,9 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        variant?: string | undefined;
-        click?: (() => void) | undefined;
-        blur?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        drag: DragEvent;
-        dragend: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        dragstart: DragEvent;
-        drop: DragEvent;
-        dblclick: MouseEvent;
-        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;
-        pointercancel: PointerEvent;
-        pointerdown: PointerEvent;
-        pointerenter: PointerEvent;
-        pointerleave: PointerEvent;
-        pointermove: PointerEvent;
-        pointerover: PointerEvent;
-        pointerout: PointerEvent;
-        pointerup: PointerEvent;
-        wheel: WheelEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            disabled: boolean;
-            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 SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
-    get click(): () => void;
-    get blur(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};
+/// <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/dist/Callout.svelte

@@ -1,37 +1,21 @@
-<script>import { getContext, onMount, tick } from 'svelte';
+<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';
-// ----- Props ----- //
-/** Conditionally renders content based on open. */
-export let conditionalRender = true;
-/** The offset along the side of the reference element. */
-export let crossAxisOffset = 0;
-/** The offset towards or away from the side of the reference element. */
-export let mainAxisOffset = 0;
-/** When true, the callout is open and visible. */
-export let open = false;
-/** How the callout should be positioned relative to the reference element. */
-export let placement = 'top-start';
-/** The host container for the callout. */
-export let portalHost = undefined;
-/** The reference to the element anchoring the position of the callout. */
-export let reference;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
-let popupRef;
-let arrowRef;
-let popupPosition = { x: 0, y: 0 };
-$: floatingUIPlacement = placement;
-let bodyHeight = 0;
+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
 };
-// ----- Portal Host ----- //
 const ensurePortalHost = async () => {
     await tick();
     // use the host set from context, usually set from a Dialog
@@ -49,18 +33,18 @@ const ensurePortalHost = async () => {
     }
     portalHost = host;
 };
-// ----- Position ----- //
-$: middleware = [
+let middleware = $derived([
     offset({ mainAxis: mainAxisOffset, crossAxis: crossAxisOffset }),
     flip(),
-    arrow({ element: arrowRef, padding: 8 })
-];
+    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 };
@@ -70,12 +54,23 @@ const computeCalloutPosition = async () => {
 let cleanupAutoUpdate = () => { };
 const autoUpdateCalloutPosition = () => {
     cleanupAutoUpdate();
+    cleanupAutoUpdate = () => { };
     if (reference && popupRef) {
         cleanupAutoUpdate = autoUpdate(reference, popupRef, computeCalloutPosition);
     }
 };
-$: popupRef, reference, autoUpdateCalloutPosition();
-$: open, bodyHeight, middleware, placement, computeCalloutPosition();
+$effect(() => {
+    autoUpdateCalloutPosition();
+    return () => {
+        cleanupAutoUpdate();
+        cleanupAutoUpdate = () => { };
+    };
+});
+$effect(() => {
+    bodyHeight;
+    reference;
+    computeCalloutPosition();
+});
 // ----- Arrow ----- //
 const getArrowPlacementStyle = (position) => {
     if (position?.placement && arrowRef) {
@@ -112,14 +107,20 @@ const getArrowOffsetStyle = (position) => {
     }
     return '';
 };
-$: arrowStyle = getArrowPlacementStyle(popupPosition) + getArrowOffsetStyle(popupPosition);
+let arrowStyle = $derived(getArrowPlacementStyle(popupPosition) + getArrowOffsetStyle(popupPosition));
 // ----- Animation ----- //
 const fadeNoOp = (node, params) => {
     return { delay: 0, duration: 0 };
 };
-$: fadeMotion = !$prefersReducedMotion ? fade : fadeNoOp;
+let fadeMotion = $derived(!$prefersReducedMotion ? fade : fadeNoOp);
 // ----- EventHandlers ----- //
-onMount(() => {
+const onKeydown = (event) => {
+    if (event.key === 'Escape') {
+        open = false;
+    }
+    rest.onkeydown?.(event);
+};
+$effect(() => {
     ensurePortalHost();
     resizeObserver = new ResizeObserver((entries) => {
         bodyHeight = entries[0].target.clientHeight;
@@ -132,11 +133,6 @@ onMount(() => {
         resizeObserver = undefined;
     };
 });
-const onKeydown = (event) => {
-    if (event.key === 'Escape') {
-        open = false;
-    }
-};
 ensurePortalHost();
 </script>
 
@@ -146,10 +142,10 @@ ensurePortalHost();
     class="sterling-callout-portal"
     transition:fadeMotion|global={{ duration: 250 }}
   >
-    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
     <div
       bind:this={popupRef}
-      class={`sterling-callout ${variant}`}
+      class={['sterling-callout', _class].filter(Boolean).join(' ')}
       class:open
       class:top={popupPosition.placement === 'top'}
       class:top-start={popupPosition.placement === 'top-start'}
@@ -164,39 +160,18 @@ ensurePortalHost();
       class:left-start={popupPosition.placement === 'left-start'}
       class:left-end={popupPosition.placement === 'left-end'}
       role="tooltip"
-      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}
+      {...rest}
+      onkeydown={onKeydown}
       style="left:{popupPosition.x}px; top:{popupPosition.y}px"
     >
-      <slot />
-      <div class="arrow" bind:this={arrowRef} style={arrowStyle} />
+      {#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/dist/Callout.svelte.d.ts

@@ -1,56 +1,15 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        conditionalRender?: boolean | undefined;
-        crossAxisOffset?: number | undefined;
-        mainAxisOffset?: number | undefined;
-        open?: boolean | undefined;
-        placement?: string | undefined;
-        portalHost?: HTMLElement | undefined;
-        reference: HTMLElement | undefined;
-        variant?: string | 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: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
+/// <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;
 };
-export type CalloutProps = typeof __propDef.props;
-export type CalloutEvents = typeof __propDef.events;
-export type CalloutSlots = typeof __propDef.slots;
-export default class Callout extends SvelteComponent<CalloutProps, CalloutEvents, CalloutSlots> {
-}
-export {};
+declare const Callout: import("svelte").Component<Props, {}, "conditionalRender" | "crossAxisOffset" | "mainAxisOffset" | "open" | "placement">;
+type Callout = ReturnType<typeof Callout>;
+export default Callout;

package/dist/Callout.types.d.ts

@@ -0,0 +1,11 @@
+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/dist/Checkbox.svelte

@@ -1,18 +1,14 @@
-<script>import { idGenerator } from './idGenerator';
+<svelte:options runes={true} />
+
+<script lang="ts">import { idGenerator } from './idGenerator';
 import { usingKeyboard } from './mediaQueries/usingKeyboard';
-// ----- Props ----- //
-export let checked = false;
-export let disabled = false;
-export let id = undefined;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
+let { id, children, checked = $bindable(false), class: _class, disabled = $bindable(false), ...rest } = $props();
 let inputRef;
-$: {
-    if ($$slots.default && id === undefined) {
+$effect(() => {
+    if (children && id === undefined) {
         id = idGenerator.nextId('Checkbox');
     }
-}
+});
 // ----- Methods ----- //
 export const blur = () => {
     inputRef?.blur();
@@ -30,50 +26,18 @@ export const focus = (options) => {
 	A styled HTML input type=checkbox element.
 -->
 <div
-  class={`sterling-checkbox ${variant}`}
+  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"
-      on:blur
-      on:click
-      on:change
-      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:input
-      on:mousedown
-      on:mouseenter
-      on:mouseleave
-      on:mousemove
-      on:mouseover
-      on:mouseout
-      on:mouseup
-      on:wheel|passive
-      {...$$restProps}
-    />
-    <div class="indicator" />
+    <input bind:this={inputRef} bind:checked {disabled} {id} type="checkbox" {...rest} />
+    <div class="indicator"></div>
   </div>
-  {#if $$slots.default}
+  {#if children}
     <label for={id}>
-      <slot {checked} {disabled} inputId={id} value={$$restProps.value} {variant} />
+      {@render children()}
     </label>
   {/if}
 </div>

package/dist/Checkbox.svelte.d.ts

@@ -1,63 +1,10 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        checked?: boolean | undefined;
-        disabled?: boolean | undefined;
-        id?: string | undefined;
-        variant?: string | undefined;
-        blur?: (() => void) | undefined;
-        click?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        change: Event;
-        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;
-        input: Event;
-        mousedown: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mousemove: MouseEvent;
-        mouseover: MouseEvent;
-        mouseout: MouseEvent;
-        mouseup: MouseEvent;
-        wheel: WheelEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            checked: boolean;
-            disabled: boolean;
-            inputId: string | undefined;
-            value: any;
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type CheckboxProps = typeof __propDef.props;
-export type CheckboxEvents = typeof __propDef.events;
-export type CheckboxSlots = typeof __propDef.slots;
+/// <reference types="svelte" />
+import type { HTMLInputAttributes } from 'svelte/elements';
 /** A styled HTML input type=checkbox element. */
-export default class Checkbox extends SvelteComponent<CheckboxProps, CheckboxEvents, CheckboxSlots> {
-    get blur(): () => void;
-    get click(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};
+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/dist/Dialog.svelte

@@ -1,25 +1,15 @@
-<script>import { onMount, setContext, tick } from 'svelte';
+<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;
-// ----- Props ----- //
-/** When true, clicking outside the dialog causes the dialog close. */
-export let backdropCloses = false;
-/** When true, the dialog is open; otherwise the dialog is closed. */
-export let open = false;
-/**
- * The return value from the dialog:
- * - an empty string indicates cancellation
- * - a value indicates form submission.
- */
-export let returnValue = '';
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
+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 ----- //
@@ -101,9 +91,9 @@ const onSubmit = (event) => {
         return false;
     }
 };
-$: {
+$effect(() => {
     updateDialog(open);
-}
+});
 onMount(() => {
     updateDialog(open);
     // Use the dialog for any element portals
@@ -116,44 +106,46 @@ onMount(() => {
 });
 </script>
 
-<!-- @component
-A styled &lt;dialog&gt; element
-
-- Slots for typical dialog content.
-- Props and events to make using &lt;dialog&gt; easier
--->
 <dialog
   bind:this={dialogRef}
-  class={`sterling-dialog ${variant}`}
+  class={`sterling-dialog ${_class}`}
   class:open
   class:closing
-  on:close
-  on:cancel
-  {...$$restProps}
+  {...rest}
 >
-  <form method="dialog" bind:this={formRef} on:submit={onSubmit}>
+  <form method="dialog" bind:this={formRef} onsubmit={onSubmit}>
     <div class="content" bind:this={contentRef}>
-      <slot name="content">
+      {#if content}
+        {@render content()}
+      {:else}
         <div class="header">
-          <slot name="header">
+          {#if header}
+            {@render header()}
+          {:else}
             <div class="title">
-              <slot name="title" />
+              {#if headerTitle}
+                {#if typeof headerTitle === 'string'}
+                  {headerTitle}
+                {:else}
+                  {@render headerTitle()}
+                {/if}
+              {/if}
             </div>
             <div class="close">
-              <Button variant={`circular tool ${variant}`} on:click={() => closeDialog()}>
-                <div class="close-x" />
+              <Button class={`circular tool`} onclick={() => closeDialog()}>
+                <div class="close-x"></div>
               </Button>
             </div>
-          </slot>
+          {/if}
         </div>
         <div class="body">
-          <slot name="body" />
+          {@render body?.()}
         </div>
-        <div class="separator" />
+        <div class="separator"></div>
         <div class="footer">
-          <slot name="footer" />
+          {@render footer?.()}
         </div>
-      </slot>
+      {/if}
     </div>
   </form>
 </dialog>