sv5ui 1.8.0 → 2.1.0

package/dist/Tabs/Tabs.svelte

@@ -32,7 +32,8 @@
         leading,
         label: labelSlot,
         trailing,
-        body: bodySlot
+        body: bodySlot,
+        ...restProps
     }: Props = $props()
 
     // Initialize value if not provided (intentionally reads initial values only)
@@ -131,6 +132,7 @@
 </script>
 
 <Tabs.Root
+    {...restProps}
     bind:ref
     bind:value
     {onValueChange}
@@ -141,7 +143,7 @@
     class={classes.root}
 >
     <Tabs.List bind:ref={listEl} class={classes.list}>
-        <div class={classes.indicator} style={indicatorStyle}></div>
+        <div class={classes.indicator} style={indicatorStyle} aria-hidden="true"></div>
 
         {#each items as item, index (item.value ?? index)}
             {@const itemValue = getItemValue(item, index)}

package/dist/Tabs/tabs.types.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
+import type { TabsRootProps } from 'bits-ui';
 import type { TabsSlots, TabsVariantProps } from './tabs.variants.js';
 /**
  * Configuration for an individual tab item.
@@ -41,11 +42,6 @@ export interface TabsItem {
      * For complex content, use the `body` snippet instead.
      */
     content?: string;
-    /**
-     * Named slot identifier for custom content rendering.
-     * When provided, allows using dynamic snippet slots for this item.
-     */
-    slot?: string;
     /**
      * Additional CSS classes applied to this item's trigger element.
      */
@@ -86,7 +82,9 @@ export interface TabsSlotProps {
  *
  * @see https://bits-ui.com/docs/components/tabs
  */
-export interface TabsProps {
+export interface TabsProps extends Pick<TabsRootProps, '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}`]: string | number | boolean | null | undefined;
     /**
      * Bindable reference to the root DOM element.
      */

package/dist/ThemeModeButton/ThemeModeButton.svelte

@@ -34,7 +34,8 @@
 
     const isDark = $derived(mode.current === 'dark')
 
-    const slots = $derived(themeModeButtonVariants())
+    const slots = themeModeButtonVariants()
+    const baseClass = $derived(slots.base({ class: [config.slots.base, className, ui?.base] }))
 
     const iconName = $derived(isDark ? lightIcon : darkIcon)
 </script>
@@ -48,7 +49,7 @@
         {disabled}
         {square}
         {block}
-        class={slots.base({ class: [config.slots.base, className, ui?.base] })}
+        class={baseClass}
         aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
         onclick={toggleMode}
         {...restProps}
@@ -65,7 +66,7 @@
         {square}
         {block}
         icon={iconName}
-        class={slots.base({ class: [config.slots.base, className, ui?.base] })}
+        class={baseClass}
         aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
         onclick={toggleMode}
         {...restProps}

package/dist/Tooltip/Tooltip.svelte

@@ -133,7 +133,7 @@
         {#if children}
             <Tooltip.Trigger>
                 {#snippet child({ props })}
-                    <span {...props} class={className as string}>
+                    <span {...props} class={[className]}>
                         {@render children({ open })}
                     </span>
                 {/snippet}

package/dist/Tooltip/tooltip.types.d.ts

@@ -8,6 +8,8 @@ type ProviderProps = Pick<TooltipProviderPropsWithoutHTML, 'delayDuration' | 'di
 type RootProps = Pick<TooltipRootPropsWithoutHTML, 'open' | 'onOpenChange' | 'disableCloseOnTriggerClick' | 'ignoreNonKeyboardFocus' | 'disabled'>;
 type ContentProps = Pick<TooltipContentPropsWithoutHTML, 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'avoidCollisions' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'hideWhenDetached' | 'onEscapeKeydown' | 'forceMount'>;
 export interface TooltipProps extends ProviderProps, RootProps, ContentProps {
+    /** Custom data attributes are forwarded to the content element. */
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
     /**
      * Bindable reference to the content DOM element.
      */

package/dist/hooks/HookContextProbe.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    import { useFormField } from './useFormField.svelte.js'
+
+    const ctx = useFormField()
+</script>
+
+<div data-name={ctx?.name ?? 'none'} data-has={String(!!ctx)}>probe</div>

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

package/dist/hooks/HookContextProvider.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    import { setContext } from 'svelte'
+    import { FORM_FIELD_CONTEXT_KEY } from './useFormField.svelte.js'
+    import HookContextProbe from './HookContextProbe.svelte'
+
+    setContext(FORM_FIELD_CONTEXT_KEY, { name: 'email', size: 'md', ariaId: 'ff' })
+</script>
+
+<HookContextProbe />

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

package/dist/hooks/HookEmitProbe.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import { useFormFieldEmit } from './useFormField.svelte.js'
+
+    const emit = useFormFieldEmit()
+
+    function fireAll() {
+        emit.onBlur()
+        emit.onFocus()
+        emit.onChange()
+        emit.onInput()
+    }
+</script>
+
+<button data-testid="fire" onclick={fireAll}>fire</button>

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

package/dist/hooks/index.d.ts

@@ -2,7 +2,7 @@ export { useMediaQuery } from './useMediaQuery.svelte.js';
 export type { UseMediaQueryOptions } from './useMediaQuery.svelte.js';
 export { useClipboard } from './useClipboard.svelte.js';
 export type { UseClipboardOptions } from './useClipboard.svelte.js';
-export { useFormField, useFormFieldEmit, wireFormEvents, FORM_FIELD_CONTEXT_KEY } from './useFormField.svelte.js';
+export { useFormField, useFormFieldEmit, FORM_FIELD_CONTEXT_KEY } from './useFormField.svelte.js';
 export type { FormFieldContext } from './useFormField.svelte.js';
 export { useClickOutside } from './useClickOutside.svelte.js';
 export type { UseClickOutsideOptions } from './useClickOutside.svelte.js';

package/dist/hooks/index.js

@@ -1,6 +1,6 @@
 export { useMediaQuery } from './useMediaQuery.svelte.js';
 export { useClipboard } from './useClipboard.svelte.js';
-export { useFormField, useFormFieldEmit, wireFormEvents, FORM_FIELD_CONTEXT_KEY } from './useFormField.svelte.js';
+export { useFormField, useFormFieldEmit, FORM_FIELD_CONTEXT_KEY } from './useFormField.svelte.js';
 export { useClickOutside } from './useClickOutside.svelte.js';
 export { useInfiniteScroll } from './useInfiniteScroll.svelte.js';
 export { useEscapeKeydown } from './useEscapeKeydown.svelte.js';

package/dist/hooks/useFormField.svelte.d.ts

@@ -52,34 +52,3 @@ export declare function useFormFieldEmit(): {
     onChange(): void;
     onInput(): void;
 };
-/**
- * Wires native DOM input events to the parent Form's event emitters while
- * preserving any user-supplied handlers. Reduces boilerplate in wrapper
- * components (Input, Textarea, etc.) from ~20 lines of handler definitions
- * to 4 lines:
- *
- * ```svelte
- * <script>
- *   const events = wireFormEvents({ onblur, oninput, onchange, onfocus })
- * </script>
- *
- * <input {...events} />
- * ```
- *
- * Each handler fires the Form emitter first, then calls the user handler
- * (if any) with the original event.
- */
-type InputEventHandler<E extends Event = Event> = (event: E) => void;
-type FocusEventHandler = InputEventHandler<FocusEvent>;
-export declare function wireFormEvents(userHandlers: {
-    onblur?: FocusEventHandler | null;
-    oninput?: InputEventHandler | null;
-    onchange?: InputEventHandler | null;
-    onfocus?: FocusEventHandler | null;
-}): {
-    onblur(event: FocusEvent): void;
-    oninput(event: Event): void;
-    onchange(event: Event): void;
-    onfocus(event: FocusEvent): void;
-};
-export {};

package/dist/hooks/useFormField.svelte.js

@@ -63,24 +63,3 @@ export function useFormFieldEmit() {
         }
     };
 }
-export function wireFormEvents(userHandlers) {
-    const emit = useFormFieldEmit();
-    return {
-        onblur(event) {
-            emit.onBlur();
-            userHandlers.onblur?.(event);
-        },
-        oninput(event) {
-            emit.onInput();
-            userHandlers.oninput?.(event);
-        },
-        onchange(event) {
-            emit.onChange();
-            userHandlers.onchange?.(event);
-        },
-        onfocus(event) {
-            emit.onFocus();
-            userHandlers.onfocus?.(event);
-        }
-    };
-}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sv5ui",
-    "version": "1.8.0",
+    "version": "2.1.0",
     "description": "A modern Svelte 5 UI component library with Tailwind CSS",
     "author": "ndlabdev",
     "license": "MIT",