@geoffcox/sterling-svelte 1.0.12 → 2.0.0

package/Button.svelte

@@ -0,0 +1,25 @@
+<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

@@ -0,0 +1,9 @@
+/// <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 → 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/Callout.svelte.d.ts

@@ -0,0 +1,15 @@
+/// <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

@@ -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/Checkbox.svelte

@@ -0,0 +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(() => {
+    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

@@ -0,0 +1,10 @@
+/// <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/{dist/Dialog.svelte → 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>

package/Dialog.svelte.d.ts

@@ -0,0 +1,14 @@
+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/{dist/Dropdown.svelte → Dropdown.svelte}

@@ -1,4 +1,6 @@
-<script>import { createEventDispatcher } from 'svelte';
+<svelte:options runes={true} />
+
+<script lang="ts">import {} from 'svelte';
 import Popover from './Popover.svelte';
 import { clickOutside } from './actions/clickOutside';
 import { idGenerator } from './idGenerator';
@@ -6,27 +8,15 @@ import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
 import { slide } from 'svelte/transition';
 import { usingKeyboard } from './mediaQueries/usingKeyboard';
 const popupId = idGenerator.nextId('Dropdown-popup');
-// ----- Props ----- //
-/** Disables the dropdown. */
-export let disabled = false;
-/** When true, the dropdown is open. */
-export let open = false;
-/** When the user clicks away from the dropdown, it remains open. */
-export let stayOpenOnClickAway = false;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
-let dropdownRef;
-let popupContentRef;
-// ----- Events ----- //
-const dispatch = createEventDispatcher();
-const raiseOpen = (open) => {
-    dispatch('open', { open });
-};
+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 ----- //
-$: {
-    raiseOpen(open);
-}
+$effect(() => {
+    onOpen?.(open);
+});
 // ----- Methods ----- //
 export const click = () => {
     dropdownRef?.click();
@@ -37,13 +27,13 @@ export const blur = () => {
 export const focus = (options) => {
     dropdownRef?.focus(options);
 };
-// ----- Event Handlers ----- //
 const onClick = (event) => {
     if (!disabled) {
         open = !open;
         event.preventDefault();
         event.stopPropagation();
     }
+    rest.onclick?.(event);
 };
 const onKeydown = (event) => {
     if (!event.altKey && !event.ctrlKey && !event.shiftKey) {
@@ -52,14 +42,13 @@ const onKeydown = (event) => {
                 open = !open;
                 event.preventDefault();
                 event.stopPropagation();
-                return false;
             case 'Escape':
                 open = false;
                 event.preventDefault();
                 event.stopPropagation();
-                return false;
         }
     }
+    rest.onkeydown?.(event);
 };
 const onClickOutside = (event) => {
     if (!stayOpenOnClickAway) {
@@ -70,7 +59,7 @@ const onClickOutside = (event) => {
 const slideNoOp = (node, params) => {
     return { delay: 0, duration: 0 };
 };
-$: slideMotion = !$prefersReducedMotion ? slide : slideNoOp;
+let slideMotion = $derived(!$prefersReducedMotion ? slide : slideNoOp);
 </script>
 
 <div
@@ -78,64 +67,43 @@ $: slideMotion = !$prefersReducedMotion ? slide : slideNoOp;
   aria-controls={popupId}
   aria-haspopup={true}
   aria-expanded={open}
-  class={`sterling-dropdown ${variant}`}
+  class={`sterling-dropdown ${_class}`}
   class:disabled
   class:open
   class:using-keyboard={$usingKeyboard}
   role="combobox"
   tabindex="0"
-  use:clickOutside={{ ignoreOthers: [popupContentRef] }}
-  on:blur
-  on:click
-  on:click={onClick}
-  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:keydown={onKeydown}
-  on:keypress
-  on:keyup
-  on:mousedown
-  on:mouseenter
-  on:mouseleave
-  on:mousemove
-  on:mouseover
-  on:mouseout
-  on:mouseup
-  on:wheel|passive
-  on:paste
-  on:click_outside={onClickOutside}
-  {...$$restProps}
+  use:clickOutside={{ ignoreOthers: [popupContentRef!], onclickoutside: onClickOutside }}
+  {...rest}
+  onclick={onClick}
+  onkeydown={onKeydown}
 >
-  {#if $$slots.value}
-    <div class="value">
-      <slot name="value" {disabled} {open} {variant} />
-    </div>
-  {/if}
-  <slot name="button" {disabled} {open} {variant}>
-    <div class="button">
-      <slot name="icon" {disabled} {open} {variant}>
-        <div class="chevron" />
-      </slot>
-    </div>
-  </slot>
+  <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 ${variant}`}
+      class={`sterling-dropdown-popup-content ${_class}`}
       transition:slideMotion|global={{ duration: 200 }}
       bind:this={popupContentRef}
     >
-      <slot {disabled} {open} {variant} />
+      {@render children?.()}
     </div>
   </Popover>
 </div>

package/Dropdown.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null | undefined;
+    open?: boolean | null | undefined;
+    stayOpenOnClickAway?: boolean | null | undefined;
+    onOpen?: (open: boolean | null | undefined) => void;
+    button?: Snippet;
+    buttonIcon?: Snippet;
+    value?: string | Snippet;
+};
+declare const Dropdown: import("svelte").Component<Props, {
+    click: () => void;
+    blur: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "open">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;