sv5ui 2.0.0 → 2.2.0

package/dist/{Slideover → components/Slideover}/Slideover.svelte

@@ -1,111 +1,97 @@
-<script lang="ts" module>
-    import type { SlideoverProps } from './slideover.types.js'
-
-    export type Props = SlideoverProps
-</script>
-
-<script lang="ts">
-    import { Dialog } from 'bits-ui'
-    import { slideoverVariants, slideoverDefaults } from './slideover.variants.js'
-    import { getComponentConfig } from '../config.js'
-    import Button from '../Button/Button.svelte'
-
-    const config = getComponentConfig('slideover', slideoverDefaults)
-
-    let {
-        open = $bindable(false),
-        onOpenChange,
-        onOpenChangeComplete,
-        trapFocus = true,
-        preventScroll = true,
-        onOpenAutoFocus,
-        onCloseAutoFocus,
-        onEscapeKeydown,
-        onInteractOutside,
-        forceMount,
-        restoreScrollDelay,
-        title,
-        description,
-        side = config.defaultVariants.side ?? 'right',
-        overlay: showOverlay = config.defaultVariants.overlay ?? true,
-        transition = config.defaultVariants.transition ?? 'slide',
-        size = config.defaultVariants.size ?? 'md',
-        inset = config.defaultVariants.inset ?? false,
-        portal = true,
-        close: closeProp = true,
-        dismissible = true,
-        ui,
-        class: className,
-        children,
-        content: contentSlot,
-        header: headerSlot,
-        titleSlot,
-        descriptionSlot,
-        actions: actionsSlot,
-        body: bodySlot,
-        footer: footerSlot,
-        closeSlot
-    }: Props = $props()
-
-    const showClose = $derived(!!closeProp)
-    const closeProps = $derived(typeof closeProp === 'object' ? closeProp : {})
-
-    const hasTitle = $derived(!!title || !!titleSlot)
-    const hasDescription = $derived(!!description || !!descriptionSlot)
-    const hasHeading = $derived(hasTitle || hasDescription)
-    const hasHeader = $derived(
-        !!headerSlot || hasHeading || !!actionsSlot || showClose || !!closeSlot
-    )
-
-    const resolvedTransition = $derived(
-        transition === false ? 'none' : transition === true ? 'slide' : transition
-    )
-
-    const variantSlots = $derived(
-        slideoverVariants({
-            transition: resolvedTransition,
-            side,
-            size,
-            inset,
-            overlay: showOverlay
-        })
-    )
-
-    const classes = $derived({
-        overlay: variantSlots.overlay({ class: [config.slots.overlay, ui?.overlay] }),
-        content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
-        header: variantSlots.header({ class: [config.slots.header, ui?.header] }),
-        wrapper: variantSlots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
-        title: variantSlots.title({ class: [config.slots.title, ui?.title] }),
-        description: variantSlots.description({
-            class: [config.slots.description, ui?.description]
-        }),
-        actions: variantSlots.actions({ class: [config.slots.actions, ui?.actions] }),
-        body: variantSlots.body({ class: [config.slots.body, ui?.body] }),
-        footer: variantSlots.footer({ class: [config.slots.footer, ui?.footer] }),
-        close: variantSlots.close({ class: [config.slots.close, ui?.close] })
-    })
-
-    const contentProps = $derived.by(() => {
-        const behavior = dismissible ? ('close' as const) : ('ignore' as const)
-        return {
-            trapFocus,
-            preventScroll,
-            escapeKeydownBehavior: behavior,
-            interactOutsideBehavior: behavior,
-            onOpenAutoFocus,
-            onCloseAutoFocus,
-            onEscapeKeydown,
-            onInteractOutside,
-            forceMount,
-            restoreScrollDelay
-        }
-    })
-
-    function handleOpenChange(value: boolean) {
-        open = value
-        onOpenChange?.(value)
-    }
+<script lang="ts" module></script>
+
+<script lang="ts">import { Dialog } from "bits-ui";
+import { slideoverVariants, slideoverDefaults } from "./slideover.variants.js";
+import { getComponentConfig } from "../../config.js";
+import Button from "../Button/Button.svelte";
+const config = getComponentConfig("slideover", slideoverDefaults);
+let {
+  open = $bindable(false),
+  onOpenChange,
+  onOpenChangeComplete,
+  trapFocus = true,
+  preventScroll = true,
+  onOpenAutoFocus,
+  onCloseAutoFocus,
+  onEscapeKeydown,
+  onInteractOutside,
+  forceMount,
+  restoreScrollDelay,
+  title,
+  description,
+  side = config.defaultVariants.side ?? "right",
+  overlay: showOverlay = config.defaultVariants.overlay ?? true,
+  transition = config.defaultVariants.transition ?? "slide",
+  size = config.defaultVariants.size ?? "md",
+  inset = config.defaultVariants.inset ?? false,
+  portal = true,
+  close: closeProp = true,
+  dismissible = true,
+  ui,
+  class: className,
+  children,
+  content: contentSlot,
+  header: headerSlot,
+  titleSlot,
+  descriptionSlot,
+  actions: actionsSlot,
+  body: bodySlot,
+  footer: footerSlot,
+  closeSlot
+} = $props();
+const showClose = $derived(!!closeProp);
+const closeProps = $derived(typeof closeProp === "object" ? closeProp : {});
+const hasTitle = $derived(!!title || !!titleSlot);
+const hasDescription = $derived(!!description || !!descriptionSlot);
+const hasHeading = $derived(hasTitle || hasDescription);
+const hasHeader = $derived(
+  !!headerSlot || hasHeading || !!actionsSlot || showClose || !!closeSlot
+);
+const resolvedTransition = $derived(
+  transition === false ? "none" : transition === true ? "slide" : transition
+);
+const variantSlots = $derived(
+  slideoverVariants({
+    transition: resolvedTransition,
+    side,
+    size,
+    inset,
+    overlay: showOverlay
+  })
+);
+const classes = $derived({
+  overlay: variantSlots.overlay({ class: [config.slots.overlay, ui?.overlay] }),
+  content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
+  header: variantSlots.header({ class: [config.slots.header, ui?.header] }),
+  wrapper: variantSlots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
+  title: variantSlots.title({ class: [config.slots.title, ui?.title] }),
+  description: variantSlots.description({
+    class: [config.slots.description, ui?.description]
+  }),
+  actions: variantSlots.actions({ class: [config.slots.actions, ui?.actions] }),
+  body: variantSlots.body({ class: [config.slots.body, ui?.body] }),
+  footer: variantSlots.footer({ class: [config.slots.footer, ui?.footer] }),
+  close: variantSlots.close({ class: [config.slots.close, ui?.close] })
+});
+const contentProps = $derived.by(() => {
+  const behavior = dismissible ? "close" : "ignore";
+  return {
+    trapFocus,
+    preventScroll,
+    escapeKeydownBehavior: behavior,
+    interactOutsideBehavior: behavior,
+    onOpenAutoFocus,
+    onCloseAutoFocus,
+    onEscapeKeydown,
+    onInteractOutside,
+    forceMount,
+    restoreScrollDelay
+  };
+});
+function handleOpenChange(value) {
+  open = value;
+  onOpenChange?.(value);
+}
 </script>
 
 {#snippet titleEl()}
@@ -197,8 +183,10 @@
 
 <Dialog.Root bind:open onOpenChange={handleOpenChange} {onOpenChangeComplete}>
     {#if children}
-        <Dialog.Trigger class={className as string}>
-            {@render children()}
+        <Dialog.Trigger>
+            {#snippet child({ props })}
+                {@render children({ props })}
+            {/snippet}
         </Dialog.Trigger>
     {/if}
 

package/dist/components/Slideover/SlideoverTriggerTestWrapper.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">import Slideover from "./Slideover.svelte";
+</script>
+
+<Slideover title="Trigger test" description="D">
+    {#snippet children({ props })}
+        <button data-testid="trigger" {...props}>Open</button>
+    {/snippet}
+    {#snippet body()}<p>Body</p>{/snippet}
+</Slideover>

package/dist/components/Slideover/SlideoverTriggerTestWrapper.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SlideoverTriggerTestWrapper: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SlideoverTriggerTestWrapper = InstanceType<typeof SlideoverTriggerTestWrapper>;
+export default SlideoverTriggerTestWrapper;

package/dist/{Slideover → components/Slideover}/slideover.types.d.ts

@@ -100,10 +100,20 @@ export interface SlideoverProps extends RootProps, ContentProps {
      */
     class?: ClassNameValue;
     /**
-     * Default slot content used as the trigger element.
-     * When provided, clicking this element opens the slideover.
+     * Trigger content. Spread the provided `props` onto your own focusable
+     * element (e.g. a `<Button>`) so the dialog's trigger ARIA and event
+     * handlers land on the real control instead of a nested wrapper button.
+     *
+     * @example
+     * ```svelte
+     * {#snippet children({ props })}
+     *   <Button {...props}>Open</Button>
+     * {/snippet}
+     * ```
      */
-    children?: Snippet;
+    children?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
     /**
      * Custom content slot that replaces the entire default layout
      * (header, body, footer). Title and description are rendered

package/dist/components/Slider/Slider.svelte

@@ -0,0 +1,111 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { Slider, useId } from "bits-ui";
+import { sliderVariants, sliderDefaults } from "./slider.variants.js";
+import { getComponentConfig } from "../../config.js";
+import { useFormField, useFormFieldEmit } from "../../hooks/useFormField/index.js";
+const config = getComponentConfig("slider", sliderDefaults);
+let {
+  ref = $bindable(null),
+  id,
+  value = $bindable(0),
+  onValueChange,
+  onValueCommit,
+  min = 0,
+  max = 100,
+  step = 1,
+  orientation = config.defaultVariants.orientation,
+  disabled = false,
+  autoSort = true,
+  dir,
+  thumbPositioning,
+  trackPadding,
+  color = config.defaultVariants.color,
+  size,
+  tooltip = false,
+  name,
+  class: className,
+  ui,
+  ...restProps
+} = $props();
+const formFieldContext = useFormField();
+const emit = useFormFieldEmit();
+const autoId = useId();
+const hasError = $derived(
+  formFieldContext?.error !== void 0 && formFieldContext?.error !== false
+);
+const resolvedId = $derived(id ?? formFieldContext?.ariaId ?? autoId);
+const resolvedName = $derived(name ?? formFieldContext?.name);
+const resolvedSize = $derived(size ?? formFieldContext?.size ?? config.defaultVariants.size);
+const resolvedColor = $derived(hasError ? "error" : color);
+const ariaDescribedBy = $derived(
+  !formFieldContext ? void 0 : hasError ? `${formFieldContext.ariaId}-error` : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+);
+const asArray = $derived(Array.isArray(value) ? value : [value ?? min]);
+const isMultiple = $derived(Array.isArray(value));
+function handleValueChange(v) {
+  value = isMultiple ? v : v[0] ?? min;
+  emit.onInput();
+  onValueChange?.(value);
+}
+function handleValueCommit(v) {
+  emit.onChange();
+  onValueCommit?.(isMultiple ? v : v[0] ?? min);
+}
+const slots = $derived(
+  sliderVariants({ color: resolvedColor, size: resolvedSize, orientation, disabled })
+);
+const classes = $derived.by(() => {
+  const u = ui ?? {};
+  return {
+    root: slots.root({ class: [config.slots.root, className, u.root] }),
+    base: slots.base({ class: [config.slots.base, u.base] }),
+    track: slots.track({ class: [config.slots.track, u.track] }),
+    range: slots.range({ class: [config.slots.range, u.range] }),
+    thumb: slots.thumb({ class: [config.slots.thumb, u.thumb] }),
+    tooltip: slots.tooltip({ class: [config.slots.tooltip, u.tooltip] })
+  };
+});
+</script>
+
+<div bind:this={ref} class={classes.root} {...restProps}>
+    {#if resolvedName}
+        {#each asArray as v, i (i)}
+            <input type="hidden" name={resolvedName} value={v} />
+        {/each}
+    {/if}
+
+    <Slider.Root
+        type="multiple"
+        id={resolvedId}
+        value={asArray}
+        {min}
+        {max}
+        {step}
+        {disabled}
+        {orientation}
+        {autoSort}
+        {dir}
+        {thumbPositioning}
+        {trackPadding}
+        aria-describedby={ariaDescribedBy}
+        onValueChange={handleValueChange}
+        onValueCommit={handleValueCommit}
+        class={classes.base}
+    >
+        {#snippet children({ thumbItems })}
+            <span data-slider-track class={classes.track}>
+                <Slider.Range class={classes.range} />
+            </span>
+
+            {#each thumbItems as item (item.index)}
+                <Slider.Thumb index={item.index} class={classes.thumb} />
+                {#if tooltip}
+                    <Slider.ThumbLabel index={item.index} class={classes.tooltip}>
+                        {item.value}
+                    </Slider.ThumbLabel>
+                {/if}
+            {/each}
+        {/snippet}
+    </Slider.Root>
+</div>

package/dist/components/Stepper/Stepper.svelte

@@ -0,0 +1,238 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { untrack } from "svelte";
+import { stepperVariants, stepperDefaults } from "./stepper.variants.js";
+import { getComponentConfig } from "../../config.js";
+import Icon from "../Icon/Icon.svelte";
+const config = getComponentConfig("stepper", stepperDefaults);
+let {
+  ref = $bindable(null),
+  as = "div",
+  items = [],
+  value = $bindable(),
+  defaultValue,
+  onValueChange,
+  api = $bindable(),
+  linear = true,
+  disabled = false,
+  orientation = config.defaultVariants.orientation ?? "horizontal",
+  size = config.defaultVariants.size ?? "md",
+  color = config.defaultVariants.color ?? "primary",
+  content: showContent = true,
+  class: className,
+  ui,
+  indicator: indicatorSlot,
+  titleSlot,
+  descriptionSlot,
+  body,
+  ...restProps
+} = $props();
+if (value === void 0) {
+  value = untrack(() => defaultValue ?? items[0]?.value ?? 0);
+}
+let triggers = $state([]);
+function getItemValue(item, index) {
+  return item.value ?? index;
+}
+const activeIndex = $derived(items.findIndex((item, i) => getItemValue(item, i) === value));
+function getState(index) {
+  if (activeIndex === -1) return "pending";
+  if (index === activeIndex) return "active";
+  return index < activeIndex ? "completed" : "pending";
+}
+function canActivate(index) {
+  if (disabled || items[index]?.disabled) return false;
+  if (!linear) return true;
+  return index <= activeIndex + 1;
+}
+function setValue(next) {
+  if (next === value) return;
+  value = next;
+  onValueChange?.(next);
+}
+function handleClick(item, index) {
+  if (!canActivate(index)) return;
+  setValue(getItemValue(item, index));
+}
+function findEnabled(start, dir) {
+  for (let i = start; i >= 0 && i < items.length; i += dir) {
+    if (!items[i]?.disabled) return i;
+  }
+  return -1;
+}
+function handleKeydown(e, index) {
+  const horizontal = orientation === "horizontal";
+  const nextKey = horizontal ? "ArrowRight" : "ArrowDown";
+  const prevKey = horizontal ? "ArrowLeft" : "ArrowUp";
+  let target = -1;
+  if (e.key === nextKey) target = findEnabled(index + 1, 1);
+  else if (e.key === prevKey) target = findEnabled(index - 1, -1);
+  else if (e.key === "Home") target = findEnabled(0, 1);
+  else if (e.key === "End") target = findEnabled(items.length - 1, -1);
+  else return;
+  e.preventDefault();
+  if (target >= 0) triggers[target]?.focus();
+}
+const apiInstance = {
+  next() {
+    if (activeIndex >= items.length - 1) return;
+    const target = items[activeIndex + 1];
+    if (!target) return;
+    setValue(getItemValue(target, activeIndex + 1));
+  },
+  prev() {
+    if (activeIndex <= 0) return;
+    const target = items[activeIndex - 1];
+    if (!target) return;
+    setValue(getItemValue(target, activeIndex - 1));
+  },
+  goTo(next) {
+    setValue(next);
+  },
+  get hasNext() {
+    return activeIndex >= 0 && activeIndex < items.length - 1;
+  },
+  get hasPrev() {
+    return activeIndex > 0;
+  },
+  get activeIndex() {
+    return activeIndex;
+  }
+};
+api = apiInstance;
+const variantSlots = $derived(stepperVariants({ orientation, size, color }));
+const classes = $derived.by(() => {
+  const c = config.slots;
+  const slots = variantSlots;
+  const u = ui ?? {};
+  const _item = slots.item({ class: [c.item, u.item] });
+  const _trigger = slots.trigger({ class: [c.trigger, u.trigger] });
+  const _container = slots.container({ class: [c.container, u.container] });
+  const _indicator = slots.indicator({ class: [c.indicator, u.indicator] });
+  const _separator = slots.separator({ class: [c.separator, u.separator] });
+  const _wrapper = slots.wrapper({ class: [c.wrapper, u.wrapper] });
+  const _title = slots.title({ class: [c.title, u.title] });
+  const _description = slots.description({ class: [c.description, u.description] });
+  const _content = slots.content({ class: [c.content, u.content] });
+  return {
+    root: slots.root({ class: [c.root, className, u.root] }),
+    list: slots.list({ class: [c.list, u.list] }),
+    item: (itemClass, itemUi) => itemClass || itemUi ? slots.item({ class: [c.item, u.item, itemUi?.item, itemClass] }) : _item,
+    trigger: (itemUi) => itemUi ? slots.trigger({ class: [c.trigger, u.trigger, itemUi.trigger] }) : _trigger,
+    container: (itemUi) => itemUi ? slots.container({ class: [c.container, u.container, itemUi.container] }) : _container,
+    indicator: (itemUi) => itemUi ? slots.indicator({ class: [c.indicator, u.indicator, itemUi.indicator] }) : _indicator,
+    separator: (itemUi) => itemUi ? slots.separator({ class: [c.separator, u.separator, itemUi.separator] }) : _separator,
+    wrapper: (itemUi) => itemUi ? slots.wrapper({ class: [c.wrapper, u.wrapper, itemUi.wrapper] }) : _wrapper,
+    title: (itemUi) => itemUi ? slots.title({ class: [c.title, u.title, itemUi.title] }) : _title,
+    description: (itemUi) => itemUi ? slots.description({
+      class: [c.description, u.description, itemUi.description]
+    }) : _description,
+    content: (itemUi) => itemUi ? slots.content({ class: [c.content, u.content, itemUi.content] }) : _content
+  };
+});
+</script>
+
+<svelte:element
+    this={as}
+    bind:this={ref}
+    class={classes.root}
+    data-orientation={orientation}
+    {...restProps}
+>
+    <ol class={classes.list}>
+        {#each items as item, index (item.value ?? index)}
+            {@const state = getState(index)}
+            {@const number = index + 1}
+            {@const active = state === 'active'}
+            {@const itemDisabled = disabled || item.disabled || !canActivate(index)}
+            {@const slotProps = { item, index, number, state, active }}
+            {@const hasVisibleText = !!(
+                titleSlot ||
+                descriptionSlot ||
+                item.title ||
+                item.description
+            )}
+            <li
+                class={classes.item(item.class, item.ui)}
+                data-state={state}
+                data-orientation={orientation}
+                data-stepper-item=""
+            >
+                <button
+                    type="button"
+                    bind:this={triggers[index]}
+                    class={classes.trigger(item.ui)}
+                    disabled={itemDisabled}
+                    aria-current={active ? 'step' : undefined}
+                    aria-label={hasVisibleText ? undefined : `Step ${number}`}
+                    tabindex={active ? 0 : -1}
+                    onclick={() => handleClick(item, index)}
+                    onkeydown={(e) => handleKeydown(e, index)}
+                >
+                    <span class={classes.container(item.ui)}>
+                        {#if indicatorSlot}
+                            {@render indicatorSlot(slotProps)}
+                        {:else}
+                            <span
+                                class={classes.indicator(item.ui)}
+                                data-stepper-indicator=""
+                                aria-hidden="true"
+                            >
+                                {#if item.icon}
+                                    <Icon name={item.icon} />
+                                {:else if state === 'completed'}
+                                    <Icon name="lucide:check" />
+                                {:else}
+                                    {number}
+                                {/if}
+                            </span>
+                        {/if}
+
+                        {#if index < items.length - 1}
+                            <span
+                                class={classes.separator(item.ui)}
+                                data-stepper-separator=""
+                                aria-hidden="true"
+                            ></span>
+                        {/if}
+                    </span>
+
+                    {#if hasVisibleText}
+                        <span class={classes.wrapper(item.ui)}>
+                            {#if titleSlot}
+                                {@render titleSlot(slotProps)}
+                            {:else if item.title}
+                                <span class={classes.title(item.ui)}>{item.title}</span>
+                            {/if}
+
+                            {#if descriptionSlot}
+                                {@render descriptionSlot(slotProps)}
+                            {:else if item.description}
+                                <span class={classes.description(item.ui)}>
+                                    {item.description}
+                                </span>
+                            {/if}
+                        </span>
+                    {/if}
+                </button>
+            </li>
+        {/each}
+    </ol>
+
+    {#if showContent}
+        {#each items as item, index (item.value ?? index)}
+            {@const state = getState(index)}
+            {#if state === 'active' && (body || item.content !== undefined)}
+                {@const number = index + 1}
+                {@const slotProps = { item, index, number, state, active: true }}
+                <div class={classes.content(item.ui)} role="region" data-stepper-content="">
+                    {#if body}
+                        {@render body(slotProps)}
+                    {:else}
+                        {item.content}
+                    {/if}
+                </div>
+            {/if}
+        {/each}
+    {/if}
+</svelte:element>