sv5ui 2.0.0 → 2.2.0

package/dist/components/Link/Link.svelte

@@ -0,0 +1,131 @@
+<script lang="ts" module>function parseUrl(url, baseUrl) {
+  try {
+    const parsed = new URL(url, baseUrl.origin);
+    return {
+      pathname: parsed.pathname,
+      query: parsed.searchParams,
+      hash: parsed.hash
+    };
+  } catch {
+    return {
+      pathname: url,
+      query: new URLSearchParams(),
+      hash: ""
+    };
+  }
+}
+function isQueryMatch(linkQuery, currentQuery, mode) {
+  if (mode === false) return true;
+  if (mode === "partial") {
+    for (const [key, value] of linkQuery) {
+      if (!currentQuery.getAll(key).includes(value)) return false;
+    }
+    return true;
+  }
+  if (linkQuery.size !== currentQuery.size) return false;
+  const sorted = (p) => new URLSearchParams([...p].sort()).toString();
+  return sorted(linkQuery) === sorted(currentQuery);
+}
+function isPathnameMatch(linkPath, currentPath, exactMatch) {
+  if (exactMatch) return linkPath === currentPath;
+  const link = linkPath.replace(/\/$/, "") || "/";
+  const current = currentPath.replace(/\/$/, "") || "/";
+  return link === "/" ? current === "/" : current === link || current.startsWith(link + "/");
+}
+</script>
+
+<script lang="ts">import { page } from "$app/state";
+import { twMerge } from "tailwind-merge";
+import { linkVariants, linkDefaults } from "./link.variants.js";
+import { getComponentConfig } from "../../config.js";
+const config = getComponentConfig("link", linkDefaults);
+let {
+  ref = $bindable(null),
+  href,
+  type,
+  active,
+  exact = false,
+  exactQuery = false,
+  exactHash = false,
+  activeClass,
+  inactiveClass,
+  disabled = false,
+  raw = false,
+  external,
+  children,
+  class: className,
+  ui,
+  target,
+  rel,
+  onclick,
+  ...restProps
+} = $props();
+const isLink = $derived(!!href);
+const isExternal = $derived(
+  isLink && (external ?? (href.startsWith("http://") || href.startsWith("https://") || href.startsWith("//")))
+);
+const resolvedTarget = $derived(
+  isLink ? target ?? (isExternal ? "_blank" : void 0) : void 0
+);
+const resolvedRel = $derived(
+  isLink ? rel ?? (isExternal || resolvedTarget === "_blank" ? "noopener noreferrer" : void 0) : void 0
+);
+const isActive = $derived.by(() => {
+  if (active !== void 0) return active;
+  if (!isLink || !page.url || isExternal) return false;
+  const link = parseUrl(href, page.url);
+  if (exactHash && link.hash !== page.url.hash) return false;
+  if (!isQueryMatch(link.query, page.url.searchParams, exactQuery)) return false;
+  return isPathnameMatch(link.pathname, page.url.pathname, exact);
+});
+const baseClass = $derived.by(() => {
+  const stateClass = isActive ? activeClass : inactiveClass;
+  if (raw) return twMerge(stateClass, className);
+  const slots = linkVariants({ active: isActive, disabled, raw });
+  return slots.base({ class: [config.slots.base, stateClass, className, ui?.base] });
+});
+const ariaCurrent = $derived(isActive && exact ? "page" : void 0);
+function handleClick(e) {
+  if (disabled) {
+    e.preventDefault();
+    e.stopPropagation();
+    return;
+  }
+  if (typeof onclick === "function") {
+    ;
+    onclick(e);
+  }
+}
+</script>
+
+{#if isLink}
+    <!-- eslint-disable svelte/no-navigation-without-resolve -->
+    <a
+        bind:this={ref}
+        {...restProps}
+        href={disabled ? undefined : href}
+        class={baseClass}
+        target={resolvedTarget}
+        rel={resolvedRel}
+        role={disabled ? 'link' : undefined}
+        aria-disabled={disabled ? 'true' : undefined}
+        aria-current={ariaCurrent}
+        tabindex={disabled ? -1 : undefined}
+        onclick={handleClick}
+    >
+        <!-- eslint-enable svelte/no-navigation-without-resolve -->
+        {@render children?.()}
+    </a>
+{:else}
+    <button
+        bind:this={ref}
+        {...restProps}
+        type={type ?? 'button'}
+        class={baseClass}
+        {disabled}
+        aria-current={ariaCurrent}
+        onclick={handleClick}
+    >
+        {@render children?.()}
+    </button>
+{/if}

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

@@ -1,111 +1,97 @@
-<script lang="ts" module>
-    import type { ModalProps } from './modal.types.js'
-
-    export type Props = ModalProps
-</script>
-
-<script lang="ts">
-    import { Dialog } from 'bits-ui'
-    import { modalVariants, modalDefaults } from './modal.variants.js'
-    import { getComponentConfig } from '../config.js'
-    import Button from '../Button/Button.svelte'
-
-    const config = getComponentConfig('modal', modalDefaults)
-
-    let {
-        open = $bindable(false),
-        onOpenChange,
-        onOpenChangeComplete,
-        trapFocus = true,
-        preventScroll = true,
-        onOpenAutoFocus,
-        onCloseAutoFocus,
-        onEscapeKeydown,
-        onInteractOutside,
-        forceMount,
-        restoreScrollDelay,
-        title,
-        description,
-        overlay: showOverlay = config.defaultVariants.overlay ?? true,
-        scrollable = config.defaultVariants.scrollable ?? false,
-        transition = config.defaultVariants.transition ?? 'scale',
-        size = config.defaultVariants.size ?? 'md',
-        fullscreen = 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 resolvedSize = $derived(fullscreen ? 'full' : size)
-    const resolvedTransition = $derived(
-        transition === false ? 'none' : transition === true ? 'scale' : transition
-    )
-
-    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 variantSlots = $derived(
-        modalVariants({
-            transition: resolvedTransition,
-            size: resolvedSize,
-            overlay: showOverlay,
-            scrollable
-        })
-    )
-
-    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 { modalVariants, modalDefaults } from "./modal.variants.js";
+import { getComponentConfig } from "../../config.js";
+import Button from "../Button/Button.svelte";
+const config = getComponentConfig("modal", modalDefaults);
+let {
+  open = $bindable(false),
+  onOpenChange,
+  onOpenChangeComplete,
+  trapFocus = true,
+  preventScroll = true,
+  onOpenAutoFocus,
+  onCloseAutoFocus,
+  onEscapeKeydown,
+  onInteractOutside,
+  forceMount,
+  restoreScrollDelay,
+  title,
+  description,
+  overlay: showOverlay = config.defaultVariants.overlay ?? true,
+  scrollable = config.defaultVariants.scrollable ?? false,
+  transition = config.defaultVariants.transition ?? "scale",
+  size = config.defaultVariants.size ?? "md",
+  fullscreen = 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 resolvedSize = $derived(fullscreen ? "full" : size);
+const resolvedTransition = $derived(
+  transition === false ? "none" : transition === true ? "scale" : transition
+);
+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 variantSlots = $derived(
+  modalVariants({
+    transition: resolvedTransition,
+    size: resolvedSize,
+    overlay: showOverlay,
+    scrollable
+  })
+);
+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()}
@@ -203,8 +189,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/Modal/ModalTriggerTestWrapper.svelte

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

package/dist/components/Modal/ModalTriggerTestWrapper.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 ModalTriggerTestWrapper: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ModalTriggerTestWrapper = InstanceType<typeof ModalTriggerTestWrapper>;
+export default ModalTriggerTestWrapper;

package/dist/{Modal → components/Modal}/modal.types.d.ts

@@ -101,10 +101,20 @@ export interface ModalProps extends RootProps, ContentProps {
      */
     class?: ClassNameValue;
     /**
-     * Default slot content used as the trigger element.
-     * When provided, clicking this element opens the modal.
+     * 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/{Pagination → components/Pagination}/Pagination.svelte

@@ -1,97 +1,83 @@
-<script lang="ts" module>
-    import type { PaginationProps } from './pagination.types.js'
+<script lang="ts" module></script>
 
-    export type Props = PaginationProps
-</script>
-
-<script lang="ts">
-    import { Pagination } from 'bits-ui'
-    import { untrack } from 'svelte'
-    import {
-        paginationVariants,
-        paginationDefaults,
-        activeVariantColorClasses
-    } from './pagination.variants.js'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-    import ButtonComponent from '../Button/Button.svelte'
-
-    const config = getComponentConfig('pagination', paginationDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        page = $bindable(),
-        defaultPage = 1,
-        total = 0,
-        itemsPerPage = 10,
-        siblingCount = 1,
-        showEdges = false,
-        showControls = true,
-        disabled = false,
-        onPageChange,
-        size = config.defaultVariants.size ?? 'md',
-        variant = config.defaultVariants.variant ?? 'ghost',
-        color = config.defaultVariants.color ?? 'surface',
-        activeColor = config.defaultVariants.activeColor ?? 'primary',
-        activeVariant = config.defaultVariants.activeVariant ?? 'solid',
-        firstIcon = icons.chevronsLeft,
-        prevIcon = icons.chevronLeft,
-        nextIcon = icons.chevronRight,
-        lastIcon = icons.chevronsRight,
-        ellipsisIcon = icons.ellipsis,
-        ui,
-        class: className,
-        firstSlot,
-        prevSlot,
-        nextSlot,
-        lastSlot,
-        ellipsisSlot,
-        itemSlot,
-        ...restProps
-    }: Props = $props()
-
-    if (page === undefined) {
-        page = untrack(() => defaultPage)
-    }
-
-    const totalPages = $derived(Math.max(1, Math.ceil(total / itemsPerPage)))
-    const isFirstPage = $derived(page === 1)
-    const isLastPage = $derived(page === totalPages)
-    const prevDisabled = $derived(disabled || isFirstPage)
-    const nextDisabled = $derived(disabled || isLastPage)
-
-    const variantSlots = $derived(paginationVariants({ size, disabled }))
-    const activeCls = $derived(
-        activeVariantColorClasses[activeVariant]?.[activeColor] ??
-            activeVariantColorClasses.solid.primary
-    )
-    const classes = $derived({
-        root: variantSlots.root({ class: [config.slots.root, className] }),
-        list: variantSlots.list({ class: [config.slots.list, ui?.list] }),
-        item: variantSlots.item({ class: [config.slots.item, activeCls, ui?.item] }),
-        ellipsis: variantSlots.ellipsis({ class: [config.slots.ellipsis, ui?.ellipsis] }),
-        ellipsisIcon: variantSlots.ellipsisIcon({
-            class: [config.slots.ellipsisIcon, ui?.ellipsisIcon]
-        }),
-        first: variantSlots.first({ class: [config.slots.first, ui?.first] }),
-        prev: variantSlots.prev({ class: [config.slots.prev, ui?.prev] }),
-        next: variantSlots.next({ class: [config.slots.next, ui?.next] }),
-        last: variantSlots.last({ class: [config.slots.last, ui?.last] })
-    })
-
-    function handlePageChange(newPage: number) {
-        page = newPage
-        onPageChange?.(newPage)
-    }
-
-    function goToFirst() {
-        if (!isFirstPage) handlePageChange(1)
-    }
-
-    function goToLast() {
-        if (!isLastPage) handlePageChange(totalPages)
-    }
+<script lang="ts">import { Pagination } from "bits-ui";
+import { untrack } from "svelte";
+import {
+  paginationVariants,
+  paginationDefaults,
+  activeVariantColorClasses
+} from "./pagination.variants.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
+import Icon from "../Icon/Icon.svelte";
+import ButtonComponent from "../Button/Button.svelte";
+const config = getComponentConfig("pagination", paginationDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let {
+  ref = $bindable(null),
+  page = $bindable(),
+  defaultPage = 1,
+  total = 0,
+  itemsPerPage = 10,
+  siblingCount = 1,
+  showEdges = false,
+  showControls = true,
+  disabled = false,
+  onPageChange,
+  size = config.defaultVariants.size ?? "md",
+  variant = config.defaultVariants.variant ?? "ghost",
+  color = config.defaultVariants.color ?? "surface",
+  activeColor = config.defaultVariants.activeColor ?? "primary",
+  activeVariant = config.defaultVariants.activeVariant ?? "solid",
+  firstIcon = icons.chevronsLeft,
+  prevIcon = icons.chevronLeft,
+  nextIcon = icons.chevronRight,
+  lastIcon = icons.chevronsRight,
+  ellipsisIcon = icons.ellipsis,
+  ui,
+  class: className,
+  firstSlot,
+  prevSlot,
+  nextSlot,
+  lastSlot,
+  ellipsisSlot,
+  itemSlot,
+  ...restProps
+} = $props();
+if (page === void 0) {
+  page = untrack(() => defaultPage);
+}
+const totalPages = $derived(Math.max(1, Math.ceil(total / itemsPerPage)));
+const isFirstPage = $derived(page === 1);
+const isLastPage = $derived(page === totalPages);
+const prevDisabled = $derived(disabled || isFirstPage);
+const nextDisabled = $derived(disabled || isLastPage);
+const variantSlots = $derived(paginationVariants({ size, disabled }));
+const activeCls = $derived(
+  activeVariantColorClasses[activeVariant]?.[activeColor] ?? activeVariantColorClasses.solid.primary
+);
+const classes = $derived({
+  root: variantSlots.root({ class: [config.slots.root, className] }),
+  list: variantSlots.list({ class: [config.slots.list, ui?.list] }),
+  item: variantSlots.item({ class: [config.slots.item, activeCls, ui?.item] }),
+  ellipsis: variantSlots.ellipsis({ class: [config.slots.ellipsis, ui?.ellipsis] }),
+  ellipsisIcon: variantSlots.ellipsisIcon({
+    class: [config.slots.ellipsisIcon, ui?.ellipsisIcon]
+  }),
+  first: variantSlots.first({ class: [config.slots.first, ui?.first] }),
+  prev: variantSlots.prev({ class: [config.slots.prev, ui?.prev] }),
+  next: variantSlots.next({ class: [config.slots.next, ui?.next] }),
+  last: variantSlots.last({ class: [config.slots.last, ui?.last] })
+});
+function handlePageChange(newPage) {
+  page = newPage;
+  onPageChange?.(newPage);
+}
+function goToFirst() {
+  if (!isFirstPage) handlePageChange(1);
+}
+function goToLast() {
+  if (!isLastPage) handlePageChange(totalPages);
+}
 </script>
 
 <Pagination.Root

package/dist/{Pagination → components/Pagination}/pagination.types.d.ts

@@ -41,7 +41,7 @@ export interface PaginationItemSlotProps {
  */
 export interface PaginationProps extends Pick<PaginationRootProps, 'id' | 'style' | 'title' | 'role' | 'tabindex' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'onclick' | 'onkeydown' | 'onmouseenter' | 'onmouseleave' | 'onfocus' | 'onblur'> {
     /** Custom data attributes are forwarded to the root element. */
-    [key: `data-${string}`]: unknown;
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
     /**
      * Bindable reference to the root DOM element.
      */