sv5ui 2.0.0 → 2.2.0

package/dist/components/Container/Container.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { containerVariants, containerDefaults } from "./container.variants.js";
+import { getComponentConfig } from "../../config.js";
+const config = getComponentConfig("container", containerDefaults);
+const slots = containerVariants();
+let { as = "div", ui, class: className, children, ...restProps } = $props();
+const rootClass = $derived(slots.root({ class: [config.slots.root, className, ui?.root] }));
+</script>
+
+<svelte:element this={as} class={rootClass} {...restProps}>
+    {@render children?.()}
+</svelte:element>

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

@@ -1,119 +1,95 @@
-<script lang="ts" module>
-    import type {
-        ContextMenuProps,
-        ContextMenuItem,
-        ContextMenuItemAction,
-        ContextMenuItemCheckbox,
-        ContextMenuItemRadio,
-        ContextMenuItemSub
-    } from './context-menu.types.js'
+<script lang="ts" module></script>
 
-    export type Props = ContextMenuProps
-</script>
-
-<script lang="ts">
-    import { ContextMenu } from 'bits-ui'
-    import {
-        contextMenuVariants,
-        contextMenuDefaults,
-        itemColorClasses
-    } from './context-menu.variants.js'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-    import Kbd from '../Kbd/Kbd.svelte'
-
-    const config = getComponentConfig('contextMenu', contextMenuDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        open = $bindable(false),
-        onOpenChange,
-        items = [],
-        radioGroups = [],
-        checkedIcon = icons.check,
-        submenuIcon = icons.chevronRight,
-        sideOffset = 4,
-        alignOffset = 0,
-        avoidCollisions = true,
-        collisionBoundary,
-        collisionPadding = 8,
-        hideWhenDetached = false,
-        onEscapeKeydown,
-        onInteractOutside,
-        onCloseAutoFocus,
-        forceMount,
-        loop = true,
-        transition = config.defaultVariants.transition ?? true,
-        portal = true,
-        size = config.defaultVariants.size ?? 'md',
-        ui,
-        class: className,
-        children,
-        header,
-        footer,
-        item: itemSlot,
-        itemLeading,
-        itemLabel,
-        itemTrailing,
-        content: contentSlot
-    }: Props = $props()
-
-    const hasRadioItems = $derived(items.some((i) => i.type === 'radio'))
-    const firstRadioGroup = $derived(radioGroups[0])
-
-    const variantSlots = $derived(contextMenuVariants({ transition, size }))
-    const classes = $derived({
-        content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
-        group: variantSlots.group({ class: [config.slots.group, ui?.group] }),
-        separator: variantSlots.separator({ class: [config.slots.separator, ui?.separator] }),
-        label: variantSlots.label({ class: [config.slots.label, ui?.label] }),
-        item: variantSlots.item({ class: [config.slots.item, ui?.item] }),
-        itemLeadingIcon: variantSlots.itemLeadingIcon({
-            class: [config.slots.itemLeadingIcon, ui?.itemLeadingIcon]
-        }),
-        itemLabel: variantSlots.itemLabel({ class: [config.slots.itemLabel, ui?.itemLabel] }),
-        itemTrailingKbds: variantSlots.itemTrailingKbds({
-            class: [config.slots.itemTrailingKbds, ui?.itemTrailingKbds]
-        }),
-        itemIndicator: variantSlots.itemIndicator({
-            class: [config.slots.itemIndicator, ui?.itemIndicator]
-        }),
-        subTrigger: variantSlots.subTrigger({ class: [config.slots.subTrigger, ui?.subTrigger] }),
-        subTriggerIcon: variantSlots.subTriggerIcon({
-            class: [config.slots.subTriggerIcon, ui?.subTriggerIcon]
-        }),
-        subContent: variantSlots.subContent({ class: [config.slots.subContent, ui?.subContent] })
-    })
-
-    function close() {
-        open = false
-    }
-
-    // Type guards
-    function isActionItem(item: ContextMenuItem): item is ContextMenuItemAction {
-        return !item.type || item.type === 'item'
-    }
-
-    function isCheckboxItem(item: ContextMenuItem): item is ContextMenuItemCheckbox {
-        return item.type === 'checkbox'
-    }
-
-    function isRadioItem(item: ContextMenuItem): item is ContextMenuItemRadio {
-        return item.type === 'radio'
-    }
-
-    function isSubItem(item: ContextMenuItem): item is ContextMenuItemSub {
-        return item.type === 'sub'
-    }
-
-    function isSeparator(item: ContextMenuItem): item is { type: 'separator' } {
-        return item.type === 'separator'
-    }
-
-    function isLabel(item: ContextMenuItem): item is { type: 'label'; label: string } {
-        return item.type === 'label'
-    }
+<script lang="ts">import { ContextMenu } from "bits-ui";
+import {
+  contextMenuVariants,
+  contextMenuDefaults,
+  itemColorClasses
+} from "./context-menu.variants.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
+import Icon from "../Icon/Icon.svelte";
+import Kbd from "../Kbd/Kbd.svelte";
+const config = getComponentConfig("contextMenu", contextMenuDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let {
+  ref = $bindable(null),
+  open = $bindable(false),
+  onOpenChange,
+  items = [],
+  radioGroups = [],
+  checkedIcon = icons.check,
+  submenuIcon = icons.chevronRight,
+  sideOffset = 4,
+  alignOffset = 0,
+  avoidCollisions = true,
+  collisionBoundary,
+  collisionPadding = 8,
+  hideWhenDetached = false,
+  onEscapeKeydown,
+  onInteractOutside,
+  onCloseAutoFocus,
+  forceMount,
+  loop = true,
+  transition = config.defaultVariants.transition ?? true,
+  portal = true,
+  size = config.defaultVariants.size ?? "md",
+  ui,
+  class: className,
+  children,
+  header,
+  footer,
+  item: itemSlot,
+  itemLeading,
+  itemLabel,
+  itemTrailing,
+  content: contentSlot
+} = $props();
+const hasRadioItems = $derived(items.some((i) => i.type === "radio"));
+const firstRadioGroup = $derived(radioGroups[0]);
+const variantSlots = $derived(contextMenuVariants({ transition, size }));
+const classes = $derived({
+  content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
+  group: variantSlots.group({ class: [config.slots.group, ui?.group] }),
+  separator: variantSlots.separator({ class: [config.slots.separator, ui?.separator] }),
+  label: variantSlots.label({ class: [config.slots.label, ui?.label] }),
+  item: variantSlots.item({ class: [config.slots.item, ui?.item] }),
+  itemLeadingIcon: variantSlots.itemLeadingIcon({
+    class: [config.slots.itemLeadingIcon, ui?.itemLeadingIcon]
+  }),
+  itemLabel: variantSlots.itemLabel({ class: [config.slots.itemLabel, ui?.itemLabel] }),
+  itemTrailingKbds: variantSlots.itemTrailingKbds({
+    class: [config.slots.itemTrailingKbds, ui?.itemTrailingKbds]
+  }),
+  itemIndicator: variantSlots.itemIndicator({
+    class: [config.slots.itemIndicator, ui?.itemIndicator]
+  }),
+  subTrigger: variantSlots.subTrigger({ class: [config.slots.subTrigger, ui?.subTrigger] }),
+  subTriggerIcon: variantSlots.subTriggerIcon({
+    class: [config.slots.subTriggerIcon, ui?.subTriggerIcon]
+  }),
+  subContent: variantSlots.subContent({ class: [config.slots.subContent, ui?.subContent] })
+});
+function close() {
+  open = false;
+}
+function isActionItem(item) {
+  return !item.type || item.type === "item";
+}
+function isCheckboxItem(item) {
+  return item.type === "checkbox";
+}
+function isRadioItem(item) {
+  return item.type === "radio";
+}
+function isSubItem(item) {
+  return item.type === "sub";
+}
+function isSeparator(item) {
+  return item.type === "separator";
+}
+function isLabel(item) {
+  return item.type === "label";
+}
 </script>
 
 {#snippet renderKbds(kbds: ContextMenuItemAction['kbds'])}
@@ -177,7 +153,7 @@
             {:else}
                 <span class={classes.itemIndicator}>
                     {#if item.checked}
-                        <Icon name={checkedIcon} />
+                        <Icon name={checkedIcon} class="size-full" />
                     {/if}
                 </span>
             {/if}
@@ -206,7 +182,7 @@
             {:else}
                 <span class={classes.itemIndicator}>
                     {#if firstRadioGroup?.value === item.value}
-                        <Icon name={checkedIcon} />
+                        <Icon name={checkedIcon} class="size-full" />
                     {/if}
                 </span>
             {/if}
@@ -329,7 +305,7 @@
 
 <ContextMenu.Root bind:open {onOpenChange}>
     {#if children}
-        <ContextMenu.Trigger class={className as string}>
+        <ContextMenu.Trigger class={[className]}>
             {@render children({ open })}
         </ContextMenu.Trigger>
     {/if}

package/dist/components/Drawer/Drawer.svelte

@@ -0,0 +1,191 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import { Drawer } from "vaul-svelte";
+import { drawerVariants, drawerDefaults } from "./drawer.variants.js";
+import { getComponentConfig } from "../../config.js";
+const config = getComponentConfig("drawer", drawerDefaults);
+let {
+  open = $bindable(false),
+  onOpenChange,
+  direction = config.defaultVariants.direction ?? "bottom",
+  inset = config.defaultVariants.inset ?? false,
+  title,
+  description,
+  overlay: showOverlay = true,
+  handle: showHandle = true,
+  portal = true,
+  dismissible = true,
+  modal = true,
+  nested = false,
+  shouldScaleBackground = false,
+  closeThreshold,
+  scrollLockTimeout,
+  snapPoints,
+  fadeFromIndex,
+  activeSnapPoint = $bindable(void 0),
+  onActiveSnapPointChange,
+  handleOnly = false,
+  noBodyStyles,
+  onDrag,
+  onRelease,
+  onClose,
+  ui,
+  class: className,
+  children,
+  content: contentSlot,
+  header: headerSlot,
+  titleSlot,
+  descriptionSlot,
+  body: bodySlot,
+  footer: footerSlot,
+  ...rest
+} = $props();
+const hasTitle = $derived(!!title || !!titleSlot);
+const hasDescription = $derived(!!description || !!descriptionSlot);
+const hasHeading = $derived(hasTitle || hasDescription);
+const hasHeader = $derived(!!headerSlot || hasHeading);
+const hasSnapPoints = $derived(!!snapPoints?.length);
+const variantSlots = $derived(drawerVariants({ direction, inset, snapPoints: hasSnapPoints }));
+const classes = $derived({
+  overlay: variantSlots.overlay({ class: [config.slots.overlay, ui?.overlay] }),
+  content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
+  handle: variantSlots.handle({ class: [config.slots.handle, ui?.handle] }),
+  container: variantSlots.container({ class: [config.slots.container, ui?.container] }),
+  header: variantSlots.header({ class: [config.slots.header, ui?.header] }),
+  title: variantSlots.title({ class: [config.slots.title, ui?.title] }),
+  description: variantSlots.description({
+    class: [config.slots.description, ui?.description]
+  }),
+  body: variantSlots.body({ class: [config.slots.body, ui?.body] }),
+  footer: variantSlots.footer({ class: [config.slots.footer, ui?.footer] })
+});
+function handleOpenChange(value) {
+  open = value;
+  onOpenChange?.(value);
+}
+function handleActiveSnapPointChange(value) {
+  activeSnapPoint = value;
+  onActiveSnapPointChange?.(value);
+}
+const rootProps = $derived.by(() => {
+  const base = {
+    ...rest,
+    open,
+    onOpenChange: handleOpenChange,
+    direction,
+    dismissible,
+    modal,
+    shouldScaleBackground,
+    closeThreshold,
+    scrollLockTimeout,
+    activeSnapPoint,
+    onActiveSnapPointChange: handleActiveSnapPointChange,
+    handleOnly,
+    noBodyStyles,
+    onDrag,
+    onRelease,
+    onClose
+  };
+  if (snapPoints && fadeFromIndex !== null) {
+    return { ...base, snapPoints, fadeFromIndex };
+  }
+  if (snapPoints) {
+    return { ...base, snapPoints };
+  }
+  return base;
+});
+</script>
+
+{#snippet drawerInner()}
+    {#if contentSlot}
+        {#if hasHeading}
+            <div class="sr-only">
+                {#if hasTitle}
+                    <Drawer.Title>
+                        {#if titleSlot}{@render titleSlot()}{:else}{title}{/if}
+                    </Drawer.Title>
+                {/if}
+                {#if hasDescription}
+                    <Drawer.Description>
+                        {#if descriptionSlot}{@render descriptionSlot()}{:else}{description}{/if}
+                    </Drawer.Description>
+                {/if}
+            </div>
+        {/if}
+        {@render contentSlot()}
+    {:else}
+        <div class={classes.container}>
+            {#if hasHeader}
+                <div class={classes.header}>
+                    {#if headerSlot}
+                        {@render headerSlot()}
+                    {:else}
+                        {#if hasTitle}
+                            <Drawer.Title class={classes.title}>
+                                {#if titleSlot}{@render titleSlot()}{:else}{title}{/if}
+                            </Drawer.Title>
+                        {/if}
+                        {#if hasDescription}
+                            <Drawer.Description class={classes.description}>
+                                {#if descriptionSlot}{@render descriptionSlot()}{:else}{description}{/if}
+                            </Drawer.Description>
+                        {/if}
+                    {/if}
+                </div>
+            {/if}
+
+            {#if bodySlot}
+                <div class={classes.body}>
+                    {@render bodySlot()}
+                </div>
+            {/if}
+
+            {#if footerSlot}
+                <div class={classes.footer}>
+                    {@render footerSlot()}
+                </div>
+            {/if}
+        </div>
+    {/if}
+{/snippet}
+
+{#snippet drawerContent()}
+    {#if showOverlay}
+        <Drawer.Overlay class={classes.overlay} />
+    {/if}
+
+    <Drawer.Content class={[classes.content, !children ? className : undefined]}>
+        {#if showHandle}
+            <Drawer.Handle class={classes.handle} />
+        {/if}
+        {@render drawerInner()}
+    </Drawer.Content>
+{/snippet}
+
+{#snippet drawerBody()}
+    {#if children}
+        <Drawer.Trigger>
+            {#snippet child({ props })}
+                {@render children({ props })}
+            {/snippet}
+        </Drawer.Trigger>
+    {/if}
+
+    {#if portal}
+        <Drawer.Portal>
+            {@render drawerContent()}
+        </Drawer.Portal>
+    {:else}
+        {@render drawerContent()}
+    {/if}
+{/snippet}
+
+{#if nested}
+    <Drawer.NestedRoot {...rootProps}>
+        {@render drawerBody()}
+    </Drawer.NestedRoot>
+{:else}
+    <Drawer.Root {...rootProps}>
+        {@render drawerBody()}
+    </Drawer.Root>
+{/if}

package/dist/components/Drawer/DrawerTriggerTestWrapper.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">import Drawer from "./Drawer.svelte";
+</script>
+
+<Drawer>
+    {#snippet children({ props })}
+        <button data-testid="trigger" {...props}>Open</button>
+    {/snippet}
+    {#snippet content()}<p>Body</p>{/snippet}
+</Drawer>

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

package/dist/{Drawer → components/Drawer}/drawer.types.d.ts

@@ -45,9 +45,20 @@ export type DrawerProps = VaulRootProps & {
      */
     class?: ClassNameValue;
     /**
-     * Default slot renders the trigger element.
+     * Trigger content. Spread the provided `props` onto your own focusable
+     * element (e.g. a `<Button>`) so the drawer'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 (replaces default layout with header/body/footer).
      */