@geoffcox/sterling-svelte 1.0.11 → 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) {
@@ -83,9 +78,7 @@ const getArrowPlacementStyle = (position) => {
             case 'top':
             case 'top-start':
             case 'top-end':
-                return (`bottom: -${arrowRef.offsetWidth}px;` +
-                    `filter: drop-shadow(-1px -2px 1px rgba(0,0,0,0.2));` +
-                    `transform:translate(0, -50%) rotate(135deg);`);
+                return (`bottom: -${arrowRef.offsetWidth}px;` + `transform:translate(0, -50%) rotate(135deg);`);
             case 'right':
             case 'right-start':
             case 'right-end':
@@ -97,9 +90,7 @@ const getArrowPlacementStyle = (position) => {
             case 'left':
             case 'left-start':
             case 'left-end':
-                return (`right: -${arrowRef.offsetWidth}px;` +
-                    `filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.2));` +
-                    `transform:translate(-50%, 0) rotate(45deg);`);
+                return (`right: -${arrowRef.offsetWidth}px;` + `transform:translate(-50%, 0) rotate(45deg);`);
         }
     }
     return '';
@@ -116,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;
@@ -136,11 +133,6 @@ onMount(() => {
         resizeObserver = undefined;
     };
 });
-const onKeydown = (event) => {
-    if (event.key === 'Escape') {
-        open = false;
-    }
-};
 ensurePortalHost();
 </script>
 
@@ -150,45 +142,36 @@ 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'}
+      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"
-      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/Dropdown.svelte

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

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;

package/Input.svelte

@@ -0,0 +1,55 @@
+<svelte:options runes={true} />
+
+<script lang="ts">import { idGenerator } from './idGenerator';
+import { usingKeyboard } from './mediaQueries/usingKeyboard';
+let { id, children, class: _class, disabled = false, value = $bindable(undefined), ...rest } = $props();
+let inputRef;
+$effect(() => {
+    if (children && id === undefined) {
+        id = idGenerator.nextId('Input');
+    }
+});
+export const blur = () => {
+    inputRef?.blur();
+};
+export const click = () => {
+    inputRef?.click();
+};
+export const focus = (options) => {
+    inputRef?.focus();
+};
+export const select = () => {
+    inputRef?.select();
+};
+export const setSelectionRange = (start, end, direction) => {
+    inputRef?.setSelectionRange(start, end, direction);
+};
+export const setRangeText = (replacement, start, end, selectionMode) => {
+    if (start && end) {
+        inputRef?.setRangeText(replacement, start, end, selectionMode);
+    }
+    else {
+        inputRef?.setRangeText(replacement);
+    }
+};
+</script>
+
+{#if children}
+  <label class={['sterling-input-label', _class].filter(Boolean).join(' ')} class:disabled for={id}>
+    {@render children()}
+  </label>
+{/if}
+<div
+  class={['sterling-input', _class].filter(Boolean).join(' ')}
+  class:disabled
+  class:using-keyboard={$usingKeyboard}
+>
+  <input
+    bind:this={inputRef}
+    class:using-keyboard={$usingKeyboard}
+    {disabled}
+    {id}
+    bind:value
+    {...rest}
+  />
+</div>

package/Input.svelte.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="svelte" />
+import type { HTMLInputAttributes } from 'svelte/elements';
+declare const Input: import("svelte").Component<HTMLInputAttributes, {
+    blur: () => void;
+    click: () => void;
+    focus: (options?: FocusOptions) => void;
+    select: () => void;
+    setSelectionRange: (start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none') => void;
+    setRangeText: (replacement: string, start?: number, end?: number, selectionMode?: SelectionMode) => void;
+}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;