sv5ui 1.7.0 → 2.0.0

package/dist/Editor/editor.variants.js

@@ -0,0 +1,150 @@
+import { tv } from 'tailwind-variants';
+export const editorVariants = tv({
+    slots: {
+        root: [
+            'relative w-full rounded-lg border border-outline-variant bg-surface',
+            'transition-shadow',
+            'focus-within:ring-2 focus-within:ring-offset-0',
+            'data-[disabled=true]:opacity-60 data-[disabled=true]:pointer-events-none'
+        ],
+        toolbar: [
+            'flex flex-wrap items-center gap-0.5',
+            'border-b border-outline-variant',
+            'bg-surface-container-low',
+            'rounded-t-lg p-1.5'
+        ],
+        toolbarGroup: 'flex items-center gap-0.5',
+        toolbarButton: [
+            'inline-flex items-center justify-center rounded text-on-surface-variant',
+            'hover:bg-surface-container-high hover:text-on-surface',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
+            'data-[active=true]:bg-primary-container data-[active=true]:text-on-primary-container',
+            'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent',
+            'transition-colors'
+        ],
+        toolbarSeparator: 'mx-1 h-5 w-px shrink-0 bg-outline-variant',
+        content: [
+            'text-on-surface',
+            // ----- Inner ProseMirror element (the actual contenteditable) -----
+            '[&_.ProseMirror]:outline-none',
+            '[&_.ProseMirror]:focus:outline-none',
+            '[&_.ProseMirror]:focus-visible:outline-none',
+            '[&_.ProseMirror]:p-4',
+            '[&_.ProseMirror]:min-h-32',
+            '[&_.ProseMirror]:whitespace-pre-wrap',
+            '[&_.ProseMirror]:break-words',
+            // ----- Placeholder (when editor is empty) -----
+            '[&_.is-editor-empty]:before:content-[attr(data-placeholder)]',
+            '[&_.is-editor-empty]:before:text-on-surface-variant/60',
+            '[&_.is-editor-empty]:before:pointer-events-none',
+            '[&_.is-editor-empty]:before:float-left',
+            '[&_.is-editor-empty]:before:h-0',
+            // ----- Content typography (lightweight in-house prose) -----
+            '[&_p]:my-2 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0',
+            '[&_h1]:text-2xl [&_h1]:font-bold [&_h1]:my-3',
+            '[&_h2]:text-xl [&_h2]:font-bold [&_h2]:my-3',
+            '[&_h3]:text-lg [&_h3]:font-semibold [&_h3]:my-2',
+            '[&_ul]:list-disc [&_ul]:ps-6 [&_ul]:my-2',
+            '[&_ol]:list-decimal [&_ol]:ps-6 [&_ol]:my-2',
+            '[&_li>p]:my-0',
+            '[&_blockquote]:border-l-4 [&_blockquote]:border-outline-variant [&_blockquote]:ps-3 [&_blockquote]:italic [&_blockquote]:text-on-surface-variant [&_blockquote]:my-3',
+            '[&_code]:rounded [&_code]:bg-surface-container-highest [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-sm [&_code]:font-mono',
+            '[&_pre]:rounded-md [&_pre]:bg-surface-container-highest [&_pre]:p-3 [&_pre]:my-3 [&_pre]:overflow-x-auto',
+            '[&_pre_code]:bg-transparent [&_pre_code]:p-0',
+            '[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2',
+            '[&_a:hover]:text-primary/80',
+            '[&_hr]:border-outline-variant [&_hr]:my-4',
+            '[&_strong]:font-semibold',
+            '[&_em]:italic',
+            // ----- Image -----
+            '[&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-md [&_img]:my-2',
+            // ----- YouTube embed (responsive 16:9) -----
+            '[&_iframe[src*="youtube"]]:aspect-video [&_iframe[src*="youtube"]]:w-full [&_iframe[src*="youtube"]]:rounded-md [&_iframe[src*="youtube"]]:my-3 [&_iframe[src*="youtube"]]:border-0',
+            // ----- Mention chip -----
+            '[&_.sv5ui-editor-mention]:inline-flex [&_.sv5ui-editor-mention]:items-center',
+            '[&_.sv5ui-editor-mention]:rounded [&_.sv5ui-editor-mention]:bg-primary-container/60',
+            '[&_.sv5ui-editor-mention]:text-on-primary-container',
+            '[&_.sv5ui-editor-mention]:px-1.5 [&_.sv5ui-editor-mention]:py-0.5',
+            '[&_.sv5ui-editor-mention]:text-sm [&_.sv5ui-editor-mention]:font-medium',
+            // ----- Table -----
+            '[&_.tableWrapper]:my-3 [&_.tableWrapper]:overflow-x-auto',
+            '[&_table]:w-full [&_table]:border-collapse [&_table]:table-fixed',
+            '[&_table]:border [&_table]:border-outline-variant [&_table]:rounded-md',
+            '[&_th]:border [&_th]:border-outline-variant',
+            '[&_th]:bg-surface-container-low [&_th]:px-2 [&_th]:py-1.5',
+            '[&_th]:font-semibold [&_th]:text-start [&_th]:align-top',
+            '[&_th]:relative [&_th]:min-w-16',
+            '[&_td]:border [&_td]:border-outline-variant',
+            '[&_td]:px-2 [&_td]:py-1.5 [&_td]:align-top',
+            '[&_td]:relative [&_td]:min-w-16',
+            // Tiptap selectedCell highlight + column resize handle
+            '[&_.selectedCell]:bg-primary/10',
+            '[&_.column-resize-handle]:absolute [&_.column-resize-handle]:top-0 [&_.column-resize-handle]:bottom-[-2px]',
+            '[&_.column-resize-handle]:-right-0.5 [&_.column-resize-handle]:w-1',
+            '[&_.column-resize-handle]:bg-primary/40 [&_.column-resize-handle]:pointer-events-none',
+            // ----- Selection styling -----
+            '[&_::selection]:bg-primary/20'
+        ],
+        footer: [
+            'flex items-center justify-between gap-2',
+            'border-t border-outline-variant',
+            'bg-surface-container-low',
+            'px-3 py-1.5 rounded-b-lg',
+            'text-xs text-on-surface-variant'
+        ],
+        countLabel: 'tabular-nums',
+        bubbleMenu: [
+            // ⚠️ Tiptap's BubbleMenu only sets `visibility:hidden` initially,
+            // leaving the element in normal flow (taking up space below the editor)
+            // until the user first selects text. Setting `position:absolute` upfront
+            // keeps it out of flow from mount — extension's Floating UI positioning
+            // then overrides left/top inline on selection.
+            'absolute top-0 left-0 z-50 invisible',
+            'flex items-center gap-0.5 p-1',
+            'rounded-lg border border-outline-variant bg-surface',
+            'shadow-md'
+        ]
+    },
+    variants: {
+        size: {
+            sm: {
+                toolbarButton: 'size-7 *:size-3.5',
+                content: 'text-sm [&_.ProseMirror]:p-3 [&_.ProseMirror]:min-h-24',
+                footer: 'text-[11px]'
+            },
+            md: {
+                toolbarButton: 'size-8 *:size-4',
+                content: 'text-sm',
+                footer: ''
+            },
+            lg: {
+                toolbarButton: 'size-9 *:size-5',
+                content: 'text-base [&_.ProseMirror]:p-5 [&_.ProseMirror]:min-h-40',
+                footer: ''
+            }
+        },
+        color: {
+            primary: { root: 'focus-within:ring-primary' },
+            secondary: { root: 'focus-within:ring-secondary' },
+            tertiary: { root: 'focus-within:ring-tertiary' },
+            success: { root: 'focus-within:ring-success' },
+            warning: { root: 'focus-within:ring-warning' },
+            error: { root: 'focus-within:ring-error' },
+            info: { root: 'focus-within:ring-info' },
+            surface: { root: 'focus-within:ring-outline' }
+        },
+        sticky: {
+            true: { toolbar: 'sticky top-0 z-10 backdrop-blur-sm' },
+            false: ''
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        color: 'primary',
+        sticky: false
+    }
+});
+export const editorDefaults = {
+    defaultVariants: editorVariants.defaultVariants,
+    slots: {}
+};

package/dist/Editor/index.d.ts

@@ -0,0 +1,53 @@
+/**
+ * SV5UI Editor — rich-text WYSIWYG built on Tiptap v3 + ProseMirror.
+ *
+ * ## Installation
+ *
+ * Tiptap is declared as an optional peer dependency of sv5ui, so consumers
+ * who don't use `<Editor>` pay zero install/bundle cost. When you do use it,
+ * install Tiptap alongside sv5ui:
+ *
+ * ```bash
+ * pnpm add sv5ui \
+ *   @tiptap/core @tiptap/pm @tiptap/starter-kit \
+ *   @tiptap/extension-bubble-menu \
+ *   @tiptap/extension-character-count \
+ *   @tiptap/extension-drag-handle \
+ *   @tiptap/extension-image \
+ *   @tiptap/extension-mention \
+ *   @tiptap/extension-placeholder \
+ *   @tiptap/extension-table \
+ *   @tiptap/extension-table-cell \
+ *   @tiptap/extension-table-header \
+ *   @tiptap/extension-table-row \
+ *   @tiptap/extension-text-align \
+ *   @tiptap/extension-typography \
+ *   @tiptap/extension-youtube \
+ *   @tiptap/suggestion \
+ *   tiptap-markdown
+ * ```
+ *
+ * (`npm add` / `yarn add` work equally well.)
+ *
+ * All 18 packages are required, even if you only enable a subset of
+ * features. Editor imports every extension at module load so toggling
+ * `image`, `tables`, `youtube`, etc. via props doesn't trigger a dynamic
+ * import. Missing peers fail at runtime with module-resolution errors.
+ *
+ * ## Usage
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { Editor, type EditorApi } from 'sv5ui/editor'
+ *   let value = $state('<p>Hello</p>')
+ *   let api = $state<EditorApi>()
+ * </script>
+ *
+ * <Editor bind:value bind:api placeholder="Write something…" />
+ * ```
+ *
+ * See {@link EditorProps} for every option.
+ */
+export { default as Editor } from './Editor.svelte';
+export { buildDefaultSlashCommands } from './editor.slash.svelte.js';
+export type { EditorProps, EditorApi, EditorJSON, EditorReactiveState, MentionItem, SlashCommand, ToolbarAction } from './editor.types.js';

package/dist/Editor/index.js

@@ -0,0 +1,52 @@
+/**
+ * SV5UI Editor — rich-text WYSIWYG built on Tiptap v3 + ProseMirror.
+ *
+ * ## Installation
+ *
+ * Tiptap is declared as an optional peer dependency of sv5ui, so consumers
+ * who don't use `<Editor>` pay zero install/bundle cost. When you do use it,
+ * install Tiptap alongside sv5ui:
+ *
+ * ```bash
+ * pnpm add sv5ui \
+ *   @tiptap/core @tiptap/pm @tiptap/starter-kit \
+ *   @tiptap/extension-bubble-menu \
+ *   @tiptap/extension-character-count \
+ *   @tiptap/extension-drag-handle \
+ *   @tiptap/extension-image \
+ *   @tiptap/extension-mention \
+ *   @tiptap/extension-placeholder \
+ *   @tiptap/extension-table \
+ *   @tiptap/extension-table-cell \
+ *   @tiptap/extension-table-header \
+ *   @tiptap/extension-table-row \
+ *   @tiptap/extension-text-align \
+ *   @tiptap/extension-typography \
+ *   @tiptap/extension-youtube \
+ *   @tiptap/suggestion \
+ *   tiptap-markdown
+ * ```
+ *
+ * (`npm add` / `yarn add` work equally well.)
+ *
+ * All 18 packages are required, even if you only enable a subset of
+ * features. Editor imports every extension at module load so toggling
+ * `image`, `tables`, `youtube`, etc. via props doesn't trigger a dynamic
+ * import. Missing peers fail at runtime with module-resolution errors.
+ *
+ * ## Usage
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { Editor, type EditorApi } from 'sv5ui/editor'
+ *   let value = $state('<p>Hello</p>')
+ *   let api = $state<EditorApi>()
+ * </script>
+ *
+ * <Editor bind:value bind:api placeholder="Write something…" />
+ * ```
+ *
+ * See {@link EditorProps} for every option.
+ */
+export { default as Editor } from './Editor.svelte';
+export { buildDefaultSlashCommands } from './editor.slash.svelte.js';

package/dist/Icon/icon.types.d.ts

@@ -1,6 +1,9 @@
 import type { IconProps as IconifyProps } from '@iconify/svelte';
+import type { SVGAttributes } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
-export interface IconProps extends Omit<IconifyProps, 'icon' | 'width' | 'height' | 'rotate' | 'flip' | 'class'> {
+export interface IconProps extends Omit<IconifyProps, 'icon' | 'width' | 'height' | 'rotate' | 'flip' | 'class'>, Pick<SVGAttributes<SVGSVGElement>, 'role' | 'tabindex' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-hidden' | 'onclick' | 'onkeydown' | 'onmouseenter' | 'onmouseleave' | 'onfocus' | 'onblur'> {
+    /** Custom data attributes are forwarded to the rendered `<svg>`. */
+    [key: `data-${string}`]: unknown;
     /**
      * Icon name in Iconify format: "collection:icon-name"
      * @example "lucide:home", "mdi:account", "heroicons:star"

package/dist/Input/Input.svelte

@@ -94,19 +94,14 @@
     const resolvedId = $derived(id ?? formFieldContext?.ariaId)
     const resolvedName = $derived(name ?? formFieldContext?.name)
 
-    const isLeading = $derived(
-        (!!icon && !trailing) || (loading && !trailing) || !!leadingIcon || !!avatar
-    )
-    const isTrailing = $derived((!!icon && trailing) || (loading && trailing) || !!trailingIcon)
+    const loadingLeading = $derived(loading && !trailing)
+    const loadingTrailing = $derived(loading && trailing)
 
-    const leadingIconName = $derived(
-        loading && isLeading
-            ? loadingIcon
-            : leadingIcon || (isLeading && !trailing && !avatar ? icon : undefined)
-    )
-    const trailingIconName = $derived(
-        loading && isTrailing ? loadingIcon : trailingIcon || (trailing ? icon : undefined)
-    )
+    const isLeading = $derived((!!icon && !trailing) || !!leadingIcon || !!avatar || loadingLeading)
+    const isTrailing = $derived((!!icon && trailing) || !!trailingIcon || loadingTrailing)
+
+    const leadingIconName = $derived(leadingIcon || (!!icon && !trailing ? icon : undefined))
+    const trailingIconName = $derived(trailingIcon || (!!icon && trailing ? icon : undefined))
 
     const ariaDescribedBy = $derived(
         !formFieldContext
@@ -123,7 +118,6 @@
             size: resolvedSize,
             leading: isLeading,
             trailing: isTrailing,
-            loading,
             highlight: resolvedHighlight
         })
     )
@@ -154,14 +148,20 @@
         <span class={classes.leading}>
             {@render leadingSlot()}
         </span>
-    {:else if isLeading && leadingIconName}
+    {:else if loadingLeading}
         <span class={classes.leading}>
-            <Icon name={leadingIconName} class={classes.leadingIcon} />
+            <span class="inline-flex animate-spin">
+                <Icon name={loadingIcon} class={classes.leadingIcon} />
+            </span>
         </span>
     {:else if avatar}
         <span class={classes.leading}>
             <Avatar {...avatar} size={classes.leadingAvatarSize} class={classes.leadingAvatar} />
         </span>
+    {:else if leadingIconName}
+        <span class={classes.leading}>
+            <Icon name={leadingIconName} class={classes.leadingIcon} />
+        </span>
     {/if}
 
     <input
@@ -185,7 +185,13 @@
         <span class={classes.trailing}>
             {@render trailingSlot()}
         </span>
-    {:else if isTrailing && trailingIconName}
+    {:else if loadingTrailing}
+        <span class={classes.trailing}>
+            <span class="inline-flex animate-spin">
+                <Icon name={loadingIcon} class={classes.trailingIcon} />
+            </span>
+        </span>
+    {:else if trailingIconName}
         <span class={classes.trailing}>
             <Icon name={trailingIconName} class={classes.trailingIcon} />
         </span>

package/dist/Input/input.variants.d.ts

@@ -65,9 +65,6 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
     trailing: {
         true: string;
     };
-    loading: {
-        true: string;
-    };
     highlight: {
         true: string;
     };
@@ -146,9 +143,6 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
     trailing: {
         true: string;
     };
-    loading: {
-        true: string;
-    };
     highlight: {
         true: string;
     };
@@ -227,9 +221,6 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
     trailing: {
         true: string;
     };
-    loading: {
-        true: string;
-    };
     highlight: {
         true: string;
     };
@@ -312,9 +303,6 @@ export declare const inputDefaults: {
         trailing: {
             true: string;
         };
-        loading: {
-            true: string;
-        };
         highlight: {
             true: string;
         };
@@ -393,9 +381,6 @@ export declare const inputDefaults: {
         trailing: {
             true: string;
         };
-        loading: {
-            true: string;
-        };
         highlight: {
             true: string;
         };

package/dist/Input/input.variants.js

@@ -81,9 +81,6 @@ export const inputVariants = tv({
         trailing: {
             true: ''
         },
-        loading: {
-            true: ''
-        },
         highlight: {
             true: ''
         }
@@ -376,23 +373,7 @@ export const inputVariants = tv({
         { trailing: true, size: 'sm', class: { base: 'pe-8' } },
         { trailing: true, size: 'md', class: { base: 'pe-9' } },
         { trailing: true, size: 'lg', class: { base: 'pe-10' } },
-        { trailing: true, size: 'xl', class: { base: 'pe-12' } },
-        // ========== LOADING ICON ANIMATION ==========
-        {
-            loading: true,
-            leading: true,
-            class: {
-                leadingIcon: 'animate-spin'
-            }
-        },
-        {
-            loading: true,
-            leading: false,
-            trailing: true,
-            class: {
-                trailingIcon: 'animate-spin'
-            }
-        }
+        { trailing: true, size: 'xl', class: { base: 'pe-12' } }
     ],
     defaultVariants: {
         variant: 'outline',

package/dist/Link/Link.svelte

@@ -51,6 +51,7 @@
 
 <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'
 
@@ -113,7 +114,7 @@
 
     const baseClass = $derived.by(() => {
         const stateClass = isActive ? activeClass : inactiveClass
-        if (raw) return [className, stateClass].filter(Boolean).join(' ')
+        if (raw) return twMerge(stateClass, className)
 
         const slots = linkVariants({ active: isActive, disabled, raw })
         return slots.base({ class: [config.slots.base, stateClass, className, ui?.base] })
@@ -138,6 +139,7 @@
     <!-- eslint-disable svelte/no-navigation-without-resolve -->
     <a
         bind:this={ref}
+        {...restProps}
         href={disabled ? undefined : href}
         class={baseClass}
         target={resolvedTarget}
@@ -147,7 +149,6 @@
         aria-current={ariaCurrent}
         tabindex={disabled ? -1 : undefined}
         onclick={handleClick}
-        {...restProps}
     >
         <!-- eslint-enable svelte/no-navigation-without-resolve -->
         {@render children?.()}
@@ -155,12 +156,12 @@
 {:else}
     <button
         bind:this={ref}
+        {...restProps}
         type={type ?? 'button'}
         class={baseClass}
         {disabled}
         aria-current={ariaCurrent}
         onclick={handleClick}
-        {...restProps}
     >
         {@render children?.()}
     </button>

package/dist/Link/link.types.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLAttributes, HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 import type { LinkSlots } from './link.variants.js';
 import type { ClassNameValue } from 'tailwind-merge';
-export type LinkProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+export type LinkProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & Pick<HTMLButtonAttributes, 'name' | 'value' | 'form' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'popovertarget' | 'popovertargetaction'> & Pick<HTMLAnchorAttributes, 'download' | 'hreflang' | 'ping' | 'media' | 'referrerpolicy'> & {
     /**
      * Bindable reference to the root DOM element.
      */

package/dist/Pagination/Pagination.svelte

@@ -47,7 +47,8 @@
         nextSlot,
         lastSlot,
         ellipsisSlot,
-        itemSlot
+        itemSlot,
+        ...restProps
     }: Props = $props()
 
     if (page === undefined) {
@@ -94,6 +95,7 @@
 </script>
 
 <Pagination.Root
+    {...restProps}
     bind:ref
     count={total}
     perPage={itemsPerPage}
@@ -144,6 +146,7 @@
                                 square
                                 {size}
                                 class={classes.prev}
+                                aria-label="Previous page"
                             >
                                 {@render prevSlot({ page: page!, disabled: prevDisabled })}
                             </ButtonComponent>
@@ -156,6 +159,7 @@
                                 {size}
                                 icon={prevIcon}
                                 class={classes.prev}
+                                aria-label="Previous page"
                             />
                         {/if}
                     {/snippet}
@@ -196,6 +200,7 @@
                                 square
                                 {size}
                                 class={classes.next}
+                                aria-label="Next page"
                             >
                                 {@render nextSlot({ page: page!, disabled: nextDisabled })}
                             </ButtonComponent>
@@ -208,6 +213,7 @@
                                 {size}
                                 icon={nextIcon}
                                 class={classes.next}
+                                aria-label="Next page"
                             />
                         {/if}
                     {/snippet}

package/dist/Pagination/pagination.types.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
+import type { PaginationRootProps } from 'bits-ui';
 import type { PaginationSlots, PaginationVariantProps } from './pagination.variants.js';
 import type { ButtonProps } from '../Button/button.types.js';
 /**
@@ -38,7 +39,9 @@ export interface PaginationItemSlotProps {
  *
  * @see https://bits-ui.com/docs/components/pagination
  */
-export interface PaginationProps {
+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;
     /**
      * Bindable reference to the root DOM element.
      */