@geoffcox/sterling-svelte 2.0.5 → 2.0.7

package/dist/Popover.svelte

@@ -10,24 +10,14 @@
     type Placement
   } from '@floating-ui/dom';
   import { getContext, tick } from 'svelte';
-  import type { HTMLAttributes, KeyboardEventHandler } from 'svelte/elements';
+  import type { KeyboardEventHandler } from 'svelte/elements';
   import { portal } from './actions/portal';
-  import type { PopoverPlacement } from './Popover.types';
   import { STERLING_PORTAL_CONTEXT_ID, STERLING_PORTAL_HOST_ID } from './Portal.constants';
   import type { PortalContext } from './Portal.types';
+  import type { PopoverProps } from './Popover.types';
 
   // ----- Props ----- //
 
-  type Props = HTMLAttributes<HTMLDivElement> & {
-    conditionalRender?: boolean;
-    crossAxisOffset?: number;
-    mainAxisOffset?: number;
-    open?: boolean | null;
-    placement?: PopoverPlacement;
-    portalHost?: HTMLElement;
-    reference?: HTMLElement;
-  };
-
   let {
     children,
     conditionalRender = $bindable(true),
@@ -39,7 +29,7 @@
     reference,
     class: _class,
     ...rest
-  }: Props = $props();
+  }: PopoverProps = $props();
 
   let popupRef: HTMLDivElement | undefined = $state(undefined);
   let popupPosition: Partial<ComputePositionReturn> = $state({ x: 0, y: 0 });

package/dist/Popover.svelte.d.ts

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

package/dist/Popover.types.d.ts

@@ -1,4 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
 import type { POPOVER_PLACEMENTS } from './Popover.constants';
 type PopoverPlacementTuple = typeof POPOVER_PLACEMENTS;
 export type PopoverPlacement = PopoverPlacementTuple[number];
+export type PopoverProps = HTMLAttributes<HTMLDivElement> & {
+    conditionalRender?: boolean;
+    crossAxisOffset?: number;
+    mainAxisOffset?: number;
+    open?: boolean | null;
+    placement?: PopoverPlacement;
+    portalHost?: HTMLElement;
+    reference?: HTMLElement;
+};
 export {};

package/dist/Progress.svelte

@@ -1,15 +1,7 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import type { HTMLAttributes } from 'svelte/elements';
-
-  type Props = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean | null;
-    max?: number;
-    percent?: number;
-    value?: number;
-    vertical?: boolean | null;
-  };
+  import type { ProgressProps } from './Progress.types';
 
   let {
     class: _class,
@@ -19,7 +11,7 @@
     value = $bindable(0),
     vertical,
     ...rest
-  }: Props = $props();
+  }: ProgressProps = $props();
 
   //----- State ----- //
 

package/dist/Progress.svelte.d.ts

@@ -1,11 +1,4 @@
-import type { HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean | null;
-    max?: number;
-    percent?: number;
-    value?: number;
-    vertical?: boolean | null;
-};
-declare const Progress: import("svelte").Component<Props, {}, "value" | "percent">;
+import type { ProgressProps } from './Progress.types';
+declare const Progress: import("svelte").Component<ProgressProps, {}, "value" | "percent">;
 type Progress = ReturnType<typeof Progress>;
 export default Progress;

package/dist/Progress.types.d.ts

@@ -1,4 +1,12 @@
 import type { PROGRESS_ORIENTATIONS } from './Progress.constants';
 type ProgressOrientationTuple = typeof PROGRESS_ORIENTATIONS;
 export type ProgressOrientation = ProgressOrientationTuple[number];
+import type { HTMLAttributes } from 'svelte/elements';
+export type ProgressProps = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    max?: number;
+    percent?: number;
+    value?: number;
+    vertical?: boolean | null;
+};
 export {};

package/dist/Radio.svelte

@@ -1,15 +1,11 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import type { HTMLInputAttributes } from 'svelte/elements';
   import { usingKeyboard } from './mediaQueries/usingKeyboard';
+  import type { RadioProps } from './Radio.types';
 
   const uuid = $props.id();
 
-  type Props = HTMLInputAttributes & {
-    group?: any | null;
-  };
-
   let {
     id,
     children,
@@ -18,7 +14,7 @@
     disabled = false,
     group = $bindable(),
     ...rest
-  }: Props = $props();
+  }: RadioProps = $props();
 
   let inputRef: HTMLInputElement;
 

package/dist/Radio.svelte.d.ts

@@ -1,9 +1,6 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
-type Props = HTMLInputAttributes & {
-    group?: any | null;
-};
+import type { RadioProps } from './Radio.types';
 /** A styled HTML input type=radio element with optional label. */
-declare const Radio: import("svelte").Component<Props, {
+declare const Radio: import("svelte").Component<RadioProps, {
     blur: () => void;
     click: () => void;
     focus: (options?: FocusOptions) => void;

package/dist/Radio.types.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+export type RadioProps = HTMLInputAttributes & {
+    group?: any | null;
+};

package/dist/Radio.types.js

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

package/dist/Select.svelte

@@ -1,34 +1,15 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import { tick, type Snippet } from 'svelte';
-  import type { HTMLAttributes, KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
+  import { tick } from 'svelte';
+  import type { KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
   import { clickOutside } from './actions/clickOutside';
   import List from './List.svelte';
   import Popover from './Popover.svelte';
+  import type { SelectProps } from './Select.types';
 
   const uuid = $props.id();
 
-  type DeprecatedProps = {
-    /** @deprecated Use icon instead */
-    buttonSnippet?: Snippet;
-
-    /** @deprecated Use value instead */
-    valueSnippet?: Snippet<[string | undefined]>;
-  };
-
-  type Props = HTMLAttributes<HTMLDivElement> &
-    DeprecatedProps & {
-      disabled?: boolean | null;
-      icon?: Snippet;
-      listClass?: string;
-      onPending?: (value?: string) => void;
-      onSelect?: (value?: string) => void;
-      open?: boolean | null;
-      selectedValue?: string;
-      value?: string | Snippet<[string | undefined]>;
-    };
-
   let {
     children,
     class: _class,
@@ -43,7 +24,7 @@
     buttonSnippet,
     valueSnippet,
     ...rest
-  }: Props = $props();
+  }: SelectProps = $props();
 
   // backwards compatibility
   icon = icon || buttonSnippet;

package/dist/Select.svelte.d.ts

@@ -1,22 +1,5 @@
-import { type Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-type DeprecatedProps = {
-    /** @deprecated Use icon instead */
-    buttonSnippet?: Snippet;
-    /** @deprecated Use value instead */
-    valueSnippet?: Snippet<[string | undefined]>;
-};
-type Props = HTMLAttributes<HTMLDivElement> & DeprecatedProps & {
-    disabled?: boolean | null;
-    icon?: Snippet;
-    listClass?: string;
-    onPending?: (value?: string) => void;
-    onSelect?: (value?: string) => void;
-    open?: boolean | null;
-    selectedValue?: string;
-    value?: string | Snippet<[string | undefined]>;
-};
-declare const Select: import("svelte").Component<Props, {
+import type { SelectProps } from './Select.types';
+declare const Select: import("svelte").Component<SelectProps, {
     blur: () => void;
     click: () => void;
     focus: (options?: FocusOptions) => void;

package/dist/Select.types.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type DeprecatedProps = {
+    /** @deprecated Use icon instead */
+    buttonSnippet?: Snippet;
+    /** @deprecated Use value instead */
+    valueSnippet?: Snippet<[string | undefined]>;
+};
+export type SelectProps = HTMLAttributes<HTMLDivElement> & DeprecatedProps & {
+    disabled?: boolean | null;
+    icon?: Snippet;
+    listClass?: string;
+    onPending?: (value?: string) => void;
+    onSelect?: (value?: string) => void;
+    open?: boolean | null;
+    selectedValue?: string;
+    value?: string | Snippet<[string | undefined]>;
+};
+export {};

package/dist/Select.types.js

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

package/dist/Slider.svelte

@@ -2,18 +2,8 @@
 
 <script lang="ts">
   import { round } from 'lodash-es';
-  import type { HTMLAttributes, KeyboardEventHandler, PointerEventHandler } from 'svelte/elements';
-
-  type Props = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean | null;
-    min?: number;
-    max?: number;
-    precision?: number;
-    step?: number;
-    value?: number;
-    vertical?: boolean | null;
-    onChange?: (value: number) => void;
-  };
+  import type { KeyboardEventHandler, PointerEventHandler } from 'svelte/elements';
+  import type { SliderProps } from './Slider.types';
 
   let {
     class: _class,
@@ -26,7 +16,22 @@
     value = $bindable(0),
     vertical,
     ...rest
-  }: Props = $props();
+  }: SliderProps = $props();
+
+  const ensureValueValid = () => {
+    const clamped = Math.max(min, Math.min(max, value));
+    const newValue = precision !== undefined ? round(clamped, precision) : clamped;
+    if (value !== newValue) {
+      value = newValue;
+    }
+  };
+
+  // ensure incoming value is valid to avoid effect lag
+  if (min > max) {
+    console.warn('The slider min is greater than max.');
+  }
+
+  ensureValueValid();
 
   let sliderRef: HTMLDivElement;
 
@@ -42,28 +47,14 @@
     sliderRef?.parentElement?.focus(options);
   };
 
-  let ratio = $derived((value - min) / (max - min));
+  let ratio = $derived(max - min > 0 ? (value - min) / (max - min) : 0);
 
+  // when value changes, ensure it is valid right away
   const setValue = (newValue: number) => {
     const clamped = Math.max(min, Math.min(max, newValue));
     value = precision !== undefined ? round(clamped, precision) : clamped;
   };
 
-  // ensure min <= max
-  $effect(() => {
-    if (min > max) {
-      min = max;
-    }
-  });
-
-  $effect(() => {
-    const clamped = Math.max(min, Math.min(max, value));
-    const newValue = precision !== undefined ? round(clamped, precision) : clamped;
-    if (value !== newValue) {
-      value = newValue;
-    }
-  });
-
   const setValueByOffset = (offset: number) => {
     if (sliderSize > 0) {
       const positionRatio = Math.max(0, Math.min(1, offset / sliderSize));
@@ -72,6 +63,10 @@
     }
   };
 
+  $effect(() => {
+    ensureValueValid();
+  });
+
   // Raise change event when value changes
   $effect(() => {
     onChange?.(value);

package/dist/Slider.svelte.d.ts

@@ -1,15 +1,5 @@
-import type { HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean | null;
-    min?: number;
-    max?: number;
-    precision?: number;
-    step?: number;
-    value?: number;
-    vertical?: boolean | null;
-    onChange?: (value: number) => void;
-};
-declare const Slider: import("svelte").Component<Props, {
+import type { SliderProps } from './Slider.types';
+declare const Slider: import("svelte").Component<SliderProps, {
     blur: () => void;
     click: () => void;
     focus: (options?: FocusOptions) => void;

package/dist/Slider.types.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type SliderProps = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    min?: number;
+    max?: number;
+    precision?: number;
+    step?: number;
+    value?: number;
+    vertical?: boolean | null;
+    onChange?: (value: number) => void;
+};

package/dist/Slider.types.js

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

package/dist/Switch.svelte

@@ -1,22 +1,11 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import type { Snippet } from 'svelte';
-  import type { HTMLInputAttributes } from 'svelte/elements';
   import { usingKeyboard } from './mediaQueries/usingKeyboard';
+  import type { SwitchProps } from './Switch.types';
 
   const uuid = $props.id();
 
-  type LabelSnippet = Snippet<
-    [{ checked: boolean | null | undefined; disabled: boolean | null | undefined; inputId: string }]
-  >;
-
-  type Props = HTMLInputAttributes & {
-    offLabel?: string | LabelSnippet;
-    onLabel?: string | LabelSnippet;
-    vertical?: boolean | null | undefined;
-  };
-
   let {
     checked = $bindable(false),
     class: _class,
@@ -26,7 +15,7 @@
     onLabel,
     vertical,
     ...rest
-  }: Props = $props();
+  }: SwitchProps = $props();
 
   const inputId = id || `Switch-${uuid}`;
 

package/dist/Switch.svelte.d.ts

@@ -1,18 +1,5 @@
-import type { Snippet } from 'svelte';
-import type { HTMLInputAttributes } from 'svelte/elements';
-type LabelSnippet = Snippet<[
-    {
-        checked: boolean | null | undefined;
-        disabled: boolean | null | undefined;
-        inputId: string;
-    }
-]>;
-type Props = HTMLInputAttributes & {
-    offLabel?: string | LabelSnippet;
-    onLabel?: string | LabelSnippet;
-    vertical?: boolean | null | undefined;
-};
-declare const Switch: import("svelte").Component<Props, {
+import type { SwitchProps } from './Switch.types';
+declare const Switch: import("svelte").Component<SwitchProps, {
     blur: () => void;
     click: () => void;
     focus: (options?: FocusOptions) => void;

package/dist/Switch.types.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+export type SwitchLabelSnippet = Snippet<[
+    {
+        checked: boolean | null | undefined;
+        disabled: boolean | null | undefined;
+        inputId: string;
+    }
+]>;
+export type SwitchProps = HTMLInputAttributes & {
+    offLabel?: string | SwitchLabelSnippet;
+    onLabel?: string | SwitchLabelSnippet;
+    vertical?: boolean | null | undefined;
+};

package/dist/Switch.types.js

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

package/dist/Tab.svelte

@@ -2,16 +2,12 @@
 
 <script lang="ts">
   import { getContext } from 'svelte';
-  import type { HTMLButtonAttributes } from 'svelte/elements';
   import { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
   import type { TabListContext } from './TabList.types';
   import { usingKeyboard } from './mediaQueries/usingKeyboard';
+  import type { TabProps } from './Tab.types';
 
-  type Props = HTMLButtonAttributes & {
-    value: string;
-  };
-
-  let { children, class: _class, disabled = false, value, ...rest }: Props = $props();
+  let { children, class: _class, disabled = false, value, ...rest }: TabProps = $props();
 
   let tabRef: HTMLButtonElement;
 

package/dist/Tab.svelte.d.ts

@@ -1,8 +1,5 @@
-import type { HTMLButtonAttributes } from 'svelte/elements';
-type Props = HTMLButtonAttributes & {
-    value: string;
-};
-declare const Tab: import("svelte").Component<Props, {
+import type { TabProps } from './Tab.types';
+declare const Tab: import("svelte").Component<TabProps, {
     click: () => void;
     blur: () => void;
     focus: (options?: FocusOptions) => void;

package/dist/Tab.types.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+export type TabProps = HTMLButtonAttributes & {
+    value: string;
+};

package/dist/Tab.types.js

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

package/dist/TabList.svelte

@@ -2,16 +2,9 @@
 
 <script lang="ts">
   import { setContext } from 'svelte';
-  import type { HTMLAttributes, KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
+  import type { KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
   import { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
-  import type { TabListContext } from './TabList.types';
-
-  type Props = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean | null;
-    selectedValue?: string;
-    vertical?: boolean | null;
-    onSelect?: (value?: string) => void;
-  };
+  import type { TabListContext, TabListProps } from './TabList.types';
 
   let {
     children,
@@ -21,7 +14,7 @@
     selectedValue = $bindable(),
     vertical = false,
     ...rest
-  }: Props = $props();
+  }: TabListProps = $props();
 
   let tabListRef: HTMLDivElement;
   let lastSelectedTabRef: HTMLElement;

package/dist/TabList.svelte.d.ts

@@ -1,11 +1,5 @@
-import type { HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean | null;
-    selectedValue?: string;
-    vertical?: boolean | null;
-    onSelect?: (value?: string) => void;
-};
-declare const TabList: import("svelte").Component<Props, {
+import type { TabListProps } from './TabList.types';
+declare const TabList: import("svelte").Component<TabListProps, {
     blur: () => void;
     focus: (options?: FocusOptions) => void;
     selectFirstTab: () => boolean;

package/dist/TabList.types.d.ts

@@ -1,5 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
 export type TabListContext = {
     disabled?: boolean | null | undefined;
     selectedValue?: string | undefined;
     vertical?: boolean | null | undefined;
 };
+export type TabListProps = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    selectedValue?: string;
+    vertical?: boolean | null;
+    onSelect?: (value?: string) => void;
+};

package/dist/TextArea.svelte

@@ -2,15 +2,8 @@
 
 <script lang="ts">
   import { tick } from 'svelte';
-  import type { FormEventHandler, HTMLTextareaAttributes } from 'svelte/elements';
-  import type { TextAreaResize } from './TextArea.types';
-
-  type Props = HTMLTextareaAttributes & {
-    autoHeight?: boolean | null | undefined;
-    disabled?: boolean | null | undefined;
-    value?: string;
-    resize?: TextAreaResize;
-  };
+  import type { FormEventHandler } from 'svelte/elements';
+  import type { TextAreaProps } from './TextArea.types';
 
   let {
     class: _class,
@@ -20,7 +13,7 @@
     resize = $bindable('none'),
     style,
     ...rest
-  }: Props = $props();
+  }: TextAreaProps = $props();
 
   let textAreaRef: HTMLTextAreaElement;
 

package/dist/TextArea.svelte.d.ts

@@ -1,18 +1,11 @@
-import type { HTMLTextareaAttributes } from 'svelte/elements';
-import type { TextAreaResize } from './TextArea.types';
-type Props = HTMLTextareaAttributes & {
-    autoHeight?: boolean | null | undefined;
-    disabled?: boolean | null | undefined;
-    value?: string;
-    resize?: TextAreaResize;
-};
-declare const TextArea: import("svelte").Component<Props, {
+import type { TextAreaProps } from './TextArea.types';
+declare const TextArea: import("svelte").Component<TextAreaProps, {
     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" | "resize">;
+}, "resize" | "value">;
 type TextArea = ReturnType<typeof TextArea>;
 export default TextArea;

package/dist/TextArea.types.d.ts

@@ -1,4 +1,11 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
 import type { TEXT_AREA_RESIZES } from './TextArea.constants';
 type TextAreaResizeTuple = typeof TEXT_AREA_RESIZES;
 export type TextAreaResize = TextAreaResizeTuple[number];
+export type TextAreaProps = HTMLTextareaAttributes & {
+    autoHeight?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    value?: string;
+    resize?: TextAreaResize;
+};
 export {};