@geoffcox/sterling-svelte 1.0.12 → 2.0.1

package/dist/Popover.svelte

@@ -1,29 +1,14 @@
-<script>import { getContext, onMount, tick } from 'svelte';
+<svelte:options runes={true} />
+
+<script lang="ts">import { getContext, onMount, tick } from 'svelte';
 import { autoUpdate, computePosition, flip, offset } from '@floating-ui/dom';
 import { portal } from './actions/portal';
 import { STERLING_PORTAL_HOST_ID, STERLING_PORTAL_CONTEXT_ID } from './Portal.constants';
-// ----- Props ----- //
-/** When true, content is rendered only when the popover is 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 popover is open and visible. */
-export let open = false;
-/** How the popover 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 popover. */
-export let reference;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
-let popupRef;
-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 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
@@ -46,13 +31,11 @@ const ensurePortalHost = async () => {
     }
     portalHost = host;
 };
-$: {
-    if ($contextPortalHost || !$contextPortalHost) {
-        ensurePortalHost();
-    }
-}
 // ----- Position ----- //
-$: middleware = [offset({ mainAxis: mainAxisOffset, crossAxis: crossAxisOffset }), flip()];
+let middleware = $derived([
+    offset({ mainAxis: mainAxisOffset, crossAxis: crossAxisOffset }),
+    flip()
+]);
 const computePopoverPosition = async () => {
     if (reference && popupRef) {
         popupPosition = await computePosition(reference, popupRef, {
@@ -72,10 +55,19 @@ const autoUpdatePopoverPosition = () => {
         cleanupAutoUpdate = autoUpdate(reference, popupRef, computePopoverPosition);
     }
 };
-$: popupRef, reference, autoUpdatePopoverPosition();
-$: open, bodyHeight, middleware, floatingUIPlacement, computePopoverPosition();
+$effect(() => {
+    autoUpdatePopoverPosition();
+    return () => {
+        cleanupAutoUpdate();
+        cleanupAutoUpdate = () => { };
+    };
+});
+$effect(() => {
+    bodyHeight;
+    computePopoverPosition();
+});
 // ----- EventHandlers ----- //
-onMount(() => {
+$effect(() => {
     ensurePortalHost();
     resizeObserver = new ResizeObserver((entries) => {
         bodyHeight = entries[0].target.clientHeight;
@@ -92,49 +84,38 @@ const onKeydown = (event) => {
     if (event.key === 'Escape') {
         open = false;
     }
+    rest.onkeydown?.(event);
 };
+//TODO: Is this necessary?
 ensurePortalHost();
 </script>
 
 {#if open || !conditionalRender}
   <div use:portal={{ target: portalHost }} class="sterling-popover-portal">
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
       bind:this={popupRef}
-      class={`sterling-popover ${variant}`}
+      class={['sterling-popover', _class].filter(Boolean).join(' ')}
       class:open
-      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}
+      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'}
+      {...rest}
+      onkeydown={onKeydown}
       style="left:{popupPosition.x}px; top:{popupPosition.y}px"
     >
-      <slot {open} {variant} />
+      {#if children}
+        {@render children()}
+      {/if}
     </div>
   </div>
 {/if}

package/dist/Popover.svelte.d.ts

@@ -1,59 +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: {
-            open: boolean;
-            variant: string;
-        };
-    };
-    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;
+    crossAxisOffset?: number;
+    mainAxisOffset?: number;
+    open?: boolean | null;
+    placement?: PopoverPlacement;
+    portalHost?: HTMLElement;
+    reference?: HTMLElement;
 };
-export type PopoverProps = typeof __propDef.props;
-export type PopoverEvents = typeof __propDef.events;
-export type PopoverSlots = typeof __propDef.slots;
-export default class Popover extends SvelteComponent<PopoverProps, PopoverEvents, PopoverSlots> {
-}
-export {};
+declare const Popover: import("svelte").Component<Props, {}, "conditionalRender" | "crossAxisOffset" | "mainAxisOffset" | "open" | "placement">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/Progress.constants.d.ts

@@ -1 +1 @@
-export declare const PROGRESS_STATUSES: string[];
+export declare const PROGRESS_ORIENTATIONS: string[];

package/dist/Progress.constants.js

@@ -1 +1 @@
-export const PROGRESS_STATUSES = ['none', 'auto', 'info', 'success', 'warning', 'danger'];
+export const PROGRESS_ORIENTATIONS = ['horizontal', 'vertical'];

package/dist/Progress.svelte

@@ -1,83 +1,36 @@
-<script>//----- Props ----- //
-/** When true, the progress bar is disabled. */
-export let disabled = false;
-/** The maximum value. */
-export let max = 100;
-/** A read-only percentage between 0 and 100 calculated from value and max. */
-export let percent = 0;
-/** The current status of the progress. */
-export let status = 'none';
-/** The current value. */
-export let value = 0;
-/** Additional class names to apply. */
-export let variant = '';
-/** When true, the progress bar is displayed vertically. */
-export let vertical = false;
+<svelte:options runes={true} />
+
+<script lang="ts">let { class: _class, disabled = false, max = 100, percent = $bindable(0), //readonly
+value = $bindable(0), vertical, ...rest } = $props();
 //----- State ----- //
-let clientHeight;
-let clientWidth;
-$: clampMax = Math.max(1, max);
-$: clampValue = Math.max(0, Math.min(value, clampMax));
-$: ratio = clampValue / clampMax;
-$: {
+let clientHeight = $state(0);
+let clientWidth = $state(0);
+let clampMax = $derived(Math.max(1, max));
+let clampValue = $derived(Math.max(0, Math.min(value, clampMax)));
+let ratio = $derived(clampValue / clampMax);
+$effect(() => {
     percent = Math.round(ratio * 100);
-}
-$: percentHeight = clientHeight * ratio;
-$: percentWidth = clientWidth * ratio;
-$: indicatorStyle = vertical ? `height: ${percentHeight}px` : `width: ${percentWidth}px`;
-$: indicatorColor = status === 'auto' ? (percent === 100 ? 'success' : 'info') : status;
+});
+let percentHeight = $derived(clientHeight * ratio);
+let percentWidth = $derived(clientWidth * ratio);
+let indicatorStyle = $derived(vertical ? `height: ${percentHeight}px` : `width: ${percentWidth}px`);
+export {};
 </script>
 
-<!--
-	@component
-	An indicator of a value between 0 and a maximum value.ß
-	Does not use the HTML progress element.
--->
-<!-- svelte-ignore a11y-label-has-associated-control -->
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<!-- svelte-ignore a11y_role_supports_aria_props -->
 <div
-  class={`sterling-progress ${variant}`}
+  aria-orientation={vertical ? 'vertical' : 'horizontal'}
+  class={['sterling-progress', _class].filter(Boolean).join(' ')}
   class:disabled
+  class:horizontal={!vertical}
   class:vertical
-  class:info={indicatorColor === 'info'}
-  class:success={indicatorColor === 'success'}
-  class:warning={indicatorColor === 'warning'}
-  class:error={indicatorColor === 'danger'}
+  data-progress-percent={percent}
+  data-progress-max={max}
+  data-progress-value={value}
   role="progressbar"
-  on:blur
-  on:click
-  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:pointercancel
-  on:pointerdown
-  on:pointerenter
-  on:pointerleave
-  on:pointermove
-  on:pointerover
-  on:pointerout
-  on:pointerup
-  on:wheel|passive
-  {...$$restProps}
+  {...rest}
 >
   <div class="container" bind:clientWidth bind:clientHeight>
-    <div class="indicator" style={indicatorStyle} />
+    <div class="indicator" style={indicatorStyle}></div>
   </div>
 </div>

package/dist/Progress.svelte.d.ts

@@ -1,61 +1,12 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        max?: number | undefined;
-        percent?: number | undefined;
-        status?: string | undefined;
-        value?: number | undefined;
-        variant?: string | undefined;
-        vertical?: boolean | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        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;
-        pointercancel: PointerEvent;
-        pointerdown: PointerEvent;
-        pointerenter: PointerEvent;
-        pointerleave: PointerEvent;
-        pointermove: PointerEvent;
-        pointerover: PointerEvent;
-        pointerout: PointerEvent;
-        pointerup: PointerEvent;
-        wheel: WheelEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+/// <reference types="svelte" />
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    max?: number;
+    percent?: number;
+    value?: number;
+    vertical?: boolean | null;
 };
-export type ProgressProps = typeof __propDef.props;
-export type ProgressEvents = typeof __propDef.events;
-export type ProgressSlots = typeof __propDef.slots;
-/**
- * An indicator of a value between 0 and a maximum value.ß
- * Does not use the HTML progress element.
- */
-export default class Progress extends SvelteComponent<ProgressProps, ProgressEvents, ProgressSlots> {
-}
-export {};
+declare const Progress: import("svelte").Component<Props, {}, "value" | "percent">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/Progress.types.d.ts

@@ -1,4 +1,4 @@
-import type { PROGRESS_STATUSES } from './Progress.constants';
-type ProgressStatusTuple = typeof PROGRESS_STATUSES;
-export type ProgressStatus = ProgressStatusTuple[number];
+import type { PROGRESS_ORIENTATIONS } from './Progress.constants';
+type ProgressOrientationTuple = typeof PROGRESS_ORIENTATIONS;
+export type ProgressOrientation = ProgressOrientationTuple[number];
 export {};

package/dist/Radio.svelte

@@ -1,57 +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;
-// bind:group doesn't seem to work properly (yet) in a nested radio.
-// The workaround is to export `checked` and `group` properties
-// and implement the same behavior.
-export let group = undefined;
-export let id = undefined;
-/** Additional class names to apply. */
-export let variant = '';
-// ensure initial state is consistent
-if (checked && $$restProps.value !== group) {
-    group = $$restProps.value;
-}
-else if (!checked && $$restProps.value === group) {
-    checked = true;
-}
-// ----- State ----- //
+let { id, children, checked = $bindable(false), class: _class, disabled = false, group = $bindable(), ...rest } = $props();
 let inputRef;
-let previousChecked = checked;
-let previousGroup = group;
-const reconcile = () => {
-    if (checked !== previousChecked) {
-        // when checked, set group to value
-        if (checked && $$restProps.value) {
-            group = $$restProps.value;
-            previousGroup = $$restProps.value;
-        }
-        previousChecked = checked;
-    }
-    else if (group !== previousGroup) {
-        // when group changes, update checked
-        if ($$restProps.value) {
-            checked = $$restProps.value === group;
-            previousChecked = checked;
-        }
-        previousGroup = group;
-    }
-};
-$: checked, group, $$restProps.value, reconcile();
-$: {
-    if (inputRef && checked && !inputRef.checked) {
-        // setting checked doesn't cause raise on:change,
-        // so we click the radio to cause it to be checked.
-        inputRef.click();
-    }
-}
-$: {
-    if ($$slots.default && id === undefined) {
+$effect(() => {
+    if (children && id === undefined) {
         id = idGenerator.nextId('Radio');
     }
-}
+});
 // ----- Methods ----- //
 export const blur = () => {
     inputRef?.blur();
@@ -64,10 +21,14 @@ export const focus = (options) => {
 };
 // ----- Event Handlers ----- //
 const onChange = (e) => {
-    if (e.currentTarget.checked) {
-        group = $$restProps.value;
-    }
+    console.log('onChange', e);
+    // if ((e.currentTarget && e.currentTarget.checked) || (e.target && e.target.checked)) {
+    //   group = value;
+    // }
 };
+$effect(() => {
+    console.log(id, '-checked', checked);
+});
 </script>
 
 <!--
@@ -75,52 +36,18 @@ const onChange = (e) => {
 	A styled HTML input type=radio element with optional label.
 -->
 <div
-  class={`sterling-radio ${variant}`}
+  class={`sterling-radio ${_class}`}
   class:checked
   class:disabled
   class:using-keyboard={$usingKeyboard}
 >
   <div class="container">
-    <input
-      bind:this={inputRef}
-      {checked}
-      {disabled}
-      name={group}
-      {id}
-      type="radio"
-      on:blur
-      on:click
-      on:change
-      on:change={onChange}
-      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} checked {disabled} bind:group {id} type="radio" {...rest} />
+    <div class="indicator"></div>
   </div>
-  {#if $$slots.default}
+  {#if children}
     <label for={id}>
-      <slot {checked} {disabled} {group} inputId={id} value={$$restProps.value} {variant} />
+      {@render children()}
     </label>
   {/if}
 </div>

package/dist/Radio.svelte.d.ts

@@ -1,65 +1,13 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        checked?: boolean | undefined;
-        disabled?: boolean | undefined;
-        group?: any | undefined | null;
-        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;
-            group: any;
-            inputId: string | undefined;
-            value: any;
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
+/// <reference types="svelte" />
+import type { HTMLInputAttributes } from 'svelte/elements';
+type Props = HTMLInputAttributes & {
+    group?: any | null;
 };
-export type RadioProps = typeof __propDef.props;
-export type RadioEvents = typeof __propDef.events;
-export type RadioSlots = typeof __propDef.slots;
 /** A styled HTML input type=radio element with optional label. */
-export default class Radio extends SvelteComponent<RadioProps, RadioEvents, RadioSlots> {
-    get blur(): () => void;
-    get click(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};
+declare const Radio: import("svelte").Component<Props, {
+    blur: () => void;
+    click: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "group" | "checked">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;