sveltacular 0.0.77 → 1.0.1

package/dist/navigation/pagination/pagination.svelte

@@ -1,54 +1,73 @@
-<script>import { createEventDispatcher } from "svelte";
-export let currentPage = 1;
-export let totalPages = 1;
-export let align = "center";
-export let style = "default";
-export let size = "md";
-const dispatch = createEventDispatcher();
-const changePage = (page) => {
-  if (page < 1 || page > totalPages) return;
-  currentPage = page;
-  dispatch("page", page);
-};
-$: previousPages = currentPage > 1 ? (() => {
-  const pages = [];
-  for (let i = currentPage - 1; i > 0 && i >= currentPage - 3; i--) {
-    pages.push(i);
-  }
-  return pages.reverse();
-})() : [];
-$: nextPages = currentPage < totalPages ? (() => {
-  const pages = [];
-  for (let i = currentPage + 1; i <= totalPages && i <= currentPage + 3; i++) {
-    pages.push(i);
-  }
-  return pages;
-})() : [];
-$: showFirst = currentPage > 4;
-$: showLast = currentPage < totalPages - 3;
+<script lang="ts">
+	let {
+		currentPage = $bindable(1),
+		totalPages = 1,
+		align = 'center' as 'center' | 'start' | 'end',
+		variant = 'default' as 'default' | 'flat',
+		size = 'md' as 'sm' | 'md' | 'lg' | 'xl',
+		onPage = undefined
+	}: {
+		currentPage?: number;
+		totalPages?: number;
+		align?: 'center' | 'start' | 'end';
+		variant?: 'default' | 'flat';
+		size?: 'sm' | 'md' | 'lg' | 'xl';
+		onPage?: ((page: number) => void) | undefined;
+	} = $props();
+
+	const changePage = (page: number) => {
+		if (page < 1 || page > totalPages) return;
+		currentPage = page;
+		onPage?.(page);
+	};
+
+	let previousPages = $derived(
+		currentPage > 1
+			? (() => {
+					const pages = [];
+					for (let i = currentPage - 1; i > 0 && i >= currentPage - 3; i--) {
+						pages.push(i);
+					}
+					return pages.reverse();
+				})()
+			: []
+	);
+	let nextPages = $derived(
+		currentPage < totalPages
+			? (() => {
+					const pages = [];
+					for (let i = currentPage + 1; i <= totalPages && i <= currentPage + 3; i++) {
+						pages.push(i);
+					}
+					return pages;
+				})()
+			: []
+	);
+	let showFirst = $derived(currentPage > 4);
+	let showLast = $derived(currentPage < totalPages - 3);
 </script>
 
-<nav class="{align} {style} {size}">
+<nav class="{align} {variant} {size}">
 	{#if currentPage > 1}
-		<button on:click={() => changePage(currentPage - 1)} class="previous page">Previous</button>
+		<button onclick={() => changePage(currentPage - 1)} class="previous page">Previous</button>
 	{/if}
 	{#if showFirst}
-		<button on:click={() => changePage(1)} class="first page">1</button>
+		<button onclick={() => changePage(1)} class="first page">1</button>
 		<div class="ellipsis page">···</div>
 	{/if}
 	{#each previousPages as page}
-		<button on:click={() => changePage(page)} class="pre page">{page}</button>
+		<button onclick={() => changePage(page)} class="pre page">{page}</button>
 	{/each}
 	<div class="current page">{currentPage}</div>
 	{#each nextPages as page}
-		<button on:click={() => changePage(page)} class="pro numbered page">{page}</button>
+		<button onclick={() => changePage(page)} class="pro numbered page">{page}</button>
 	{/each}
 	{#if showLast}
 		<div class="ellipsis page">···</div>
-		<button on:click={() => changePage(totalPages)} class="last page">{totalPages}</button>
+		<button onclick={() => changePage(totalPages)} class="last page">{totalPages}</button>
 	{/if}
 	{#if currentPage < totalPages}
-		<button on:click={() => changePage(currentPage + 1)} class="next page">Next</button>
+		<button onclick={() => changePage(currentPage + 1)} class="next page">Next</button>
 	{/if}
 </nav>
 
@@ -63,8 +82,7 @@ nav .page {
   border: none;
   background: none;
   margin: 0;
-  color: var(--base-fg, #ccc);
-  text-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.5);
+  color: var(--base-fg, #000);
 }
 nav button {
   cursor: pointer;

package/dist/navigation/pagination/pagination.svelte.d.ts

@@ -1,24 +1,11 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        currentPage?: number;
-        totalPages?: number;
-        align?: "center" | "start" | "end";
-        style?: "default" | "flat";
-        size?: "sm" | "md" | "lg" | "xl";
-    };
-    events: {
-        page: CustomEvent<number>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+type $$ComponentProps = {
+    currentPage?: number;
+    totalPages?: number;
+    align?: 'center' | 'start' | 'end';
+    variant?: 'default' | 'flat';
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    onPage?: ((page: number) => void) | undefined;
 };
-export type PaginationProps = typeof __propDef.props;
-export type PaginationEvents = typeof __propDef.events;
-export type PaginationSlots = typeof __propDef.slots;
-export default class Pagination extends SvelteComponent<PaginationProps, PaginationEvents, PaginationSlots> {
-}
-export {};
+declare const Pagination: import("svelte").Component<$$ComponentProps, {}, "currentPage">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/navigation/side-bar/side-bar.svelte

@@ -1,11 +1,20 @@
-<script>import Overlay from "../../generic/overlay.svelte";
-export let open = false;
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Overlay from '../../generic/overlay.svelte';
+
+	let {
+		open = $bindable(false),
+		children
+	}: {
+		open?: boolean;
+		children: Snippet;
+	} = $props();
 </script>
 
 <div class:open>
 	<Overlay show={open} />
 	<aside>
-		<slot />
+		{@render children?.()}
 	</aside>
 </div>
 
@@ -18,15 +27,15 @@ export let open = false;
   top: 0;
   left: -300px;
   bottom: 0;
-  background: var(--nav-bg, white);
-  color: var(--nav-fg, black);
+  background: var(--nav-bg);
+  color: var(--nav-fg);
   z-index: 9999;
-  transition: left 0.3s ease-in-out;
-  border-right: solid 1px #e5e5e5;
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  transition: left var(--transition-slow) var(--ease-in-out);
+  border-right: solid var(--border-thin) var(--gray-300);
+  box-shadow: var(--shadow-md);
   display: flex;
   flex-direction: column;
-  font-family: var(--nav-font-family, sans-serif);
+  font-family: var(--nav-font-family);
 }
 div.open {
   display: block;

package/dist/navigation/side-bar/side-bar.svelte.d.ts

@@ -1,20 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        open?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    open?: boolean;
+    children: Snippet;
 };
-export type SideBarProps = typeof __propDef.props;
-export type SideBarEvents = typeof __propDef.events;
-export type SideBarSlots = typeof __propDef.slots;
-export default class SideBar extends SvelteComponent<SideBarProps, SideBarEvents, SideBarSlots> {
-}
-export {};
+declare const SideBar: import("svelte").Component<$$ComponentProps, {}, "open">;
+type SideBar = ReturnType<typeof SideBar>;
+export default SideBar;

package/dist/navigation/tabs/index.d.ts

@@ -0,0 +1,4 @@
+export { default as TabGroup } from './tab-group.svelte';
+export { default as Tab } from './tab.svelte';
+export type { TabVariant, TabDefinition, TabContext } from './tab-context.js';
+export { tabContext } from './tab-context.js';

package/dist/navigation/tabs/index.js

@@ -0,0 +1,3 @@
+export { default as TabGroup } from './tab-group.svelte';
+export { default as Tab } from './tab.svelte';
+export { tabContext } from './tab-context.js';

package/dist/navigation/tabs/tab-context.d.ts

@@ -1,13 +1,19 @@
-import type { Subscribable } from '../../index.js';
-export type TabStyle = 'traditional' | 'underline' | 'outline' | 'overline';
+export type TabVariant = 'traditional' | 'underline' | 'outline' | 'overline' | 'pills' | 'segmented' | 'minimal';
 export type TabDefinition = {
     id: string;
-    name: string;
+    label: string;
     defaultActive: boolean;
+    index: number;
+    disabled?: boolean;
+    href?: string;
 };
 export interface TabContext {
-    active: Subscribable<string | null>;
-    style: TabStyle;
-    register: (id: string, name: string, isActive: boolean) => void;
+    state: {
+        tabs: TabDefinition[];
+        active: string | null;
+    };
+    variant: TabVariant;
+    groupId: string;
+    register: (id: string, label: string, isActive: boolean, href?: string) => void;
 }
 export declare const tabContext = "tabContext";

package/dist/navigation/tabs/tab-group.svelte

@@ -1,73 +1,199 @@
-<script>import { writable } from "svelte/store";
-import { createEventDispatcher, setContext } from "svelte";
-import { tabContext } from "./tab-context.js";
-import { getAnchor, navigateToAnchor, subscribable } from "../../index.js";
-export let style = "traditional";
-const dispatch = createEventDispatcher();
-const tabs = writable([]);
-const register = (id, name, isActive) => {
-  tabs.update((value) => [...value, { id, name, defaultActive: isActive }]);
-  checkActive();
-};
-const tabExists = (id) => {
-  const value = $tabs;
-  return value.some((tab) => tab.id === id);
-};
-let timeout = null;
-const checkActive = () => {
-  if (timeout) clearTimeout(timeout);
-  timeout = setTimeout(() => {
-    const anchor = getAnchor();
-    if (anchor && tabExists(anchor)) active.set(anchor);
-    else {
-      const defaultActiveTab = $tabs.find((tab) => tab.defaultActive);
-      if (defaultActiveTab) active.set(defaultActiveTab.id);
-    }
-  }, 10);
-};
-const active = writable(null);
-const selectTab = (id) => {
-  active.set(id);
-  navigateToAnchor(id);
-  dispatch("change", id);
-};
-const ctx = {
-  active: subscribable(active),
-  style,
-  register
-};
-setContext(tabContext, ctx);
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setContext } from 'svelte';
+	import { tabContext, type TabDefinition, type TabVariant } from './tab-context.js';
+	import { getAnchor, navigateToAnchor, uniqueId } from '../../index.js';
+
+	let {
+		variant = 'traditional' as TabVariant,
+		onChange = undefined,
+		children
+	}: {
+		variant?: TabVariant;
+		onChange?: ((id: string | null) => void) | undefined;
+		children: Snippet;
+	} = $props();
+
+	// Generate unique group ID to scope tab IDs and prevent conflicts between multiple tab groups
+	const groupId = uniqueId();
+
+	// Use a SINGLE $state object - this is key for reactivity!
+	const tabState = $state({
+		tabs: [] as TabDefinition[],
+		active: null as string | null
+	});
+
+	let registrationIndex = 0;
+	let isInitialized = $state(false);
+
+	const register = (id: string, label: string, isActive: boolean, href?: string) => {
+		const index = registrationIndex++;
+		tabState.tabs.push({ id, label, defaultActive: isActive, index, href });
+	};
+
+	// Initialize active tab - only run once when tabs are available
+	$effect(() => {
+		// Skip if already initialized or no tabs yet
+		if (isInitialized || tabState.tabs.length === 0) return;
+
+		// Use microtask to ensure all synchronous tab registrations in this cycle complete
+		queueMicrotask(() => {
+			// Double-check we haven't initialized in the meantime
+			if (isInitialized) return;
+
+			// Get current tabs state at initialization time
+			const currentTabs = tabState.tabs;
+			if (currentTabs.length === 0) return;
+
+			// Check for anchor in URL first (but only if it matches a tab in THIS group)
+			const anchor = getAnchor();
+			if (anchor) {
+				// Check if anchor starts with our group ID prefix
+				const groupPrefix = `${groupId}-`;
+				if (anchor.startsWith(groupPrefix)) {
+					const tabId = anchor.slice(groupPrefix.length);
+					const tabExists = currentTabs.some((tab) => tab.id === tabId);
+					if (tabExists) {
+						tabState.active = tabId;
+						isInitialized = true;
+						return;
+					}
+				}
+				// Also check for direct tab ID match (for backward compatibility)
+				const tabExists = currentTabs.some((tab) => tab.id === anchor);
+				if (tabExists) {
+					tabState.active = anchor;
+					isInitialized = true;
+					return;
+				}
+			}
+
+			// Check for defaultActive tab
+			const defaultActiveTab = currentTabs.find((tab) => tab.defaultActive);
+			if (defaultActiveTab) {
+				tabState.active = defaultActiveTab.id;
+				isInitialized = true;
+				return;
+			}
+
+			// Default to first tab (by registration index, which should be the first in DOM order)
+			// Sort by index to get the first registered tab (lowest index = first)
+			const sortedTabs = [...currentTabs].sort((a, b) => a.index - b.index);
+			const firstTab = sortedTabs[0];
+			if (firstTab) {
+				tabState.active = firstTab.id;
+				isInitialized = true;
+			}
+		});
+	});
+	const selectTab = (id: string) => {
+		const tab = tabState.tabs.find((t) => t.id === id);
+		if (tab?.disabled) return;
+
+		tabState.active = id;
+
+		// Only use anchor navigation if tab doesn't have href (href navigation is handled by Tab component)
+		// Scope anchor to this group to avoid conflicts with multiple tab groups
+		if (!tab?.href) {
+			navigateToAnchor(`${groupId}-${id}`);
+		}
+
+		onChange?.(id);
+
+		// Focus the selected tab (scoped to this group)
+		const button = document.getElementById(`tab-${groupId}-${id}`);
+		if (button) {
+			button.focus();
+		}
+	};
+
+	// Keyboard navigation handler
+	const handleKeydown = (e: KeyboardEvent, currentId: string) => {
+		const tabList = tabState.tabs.filter((tab) => !tab.disabled);
+		const currentIndex = tabList.findIndex((tab) => tab.id === currentId);
+		if (currentIndex === -1) return;
+
+		let targetIndex = currentIndex;
+
+		switch (e.key) {
+			case 'ArrowLeft':
+				e.preventDefault();
+				targetIndex = currentIndex > 0 ? currentIndex - 1 : tabList.length - 1;
+				break;
+			case 'ArrowRight':
+				e.preventDefault();
+				targetIndex = currentIndex < tabList.length - 1 ? currentIndex + 1 : 0;
+				break;
+			case 'Home':
+				e.preventDefault();
+				targetIndex = 0;
+				break;
+			case 'End':
+				e.preventDefault();
+				targetIndex = tabList.length - 1;
+				break;
+			case 'Enter':
+			case ' ':
+				e.preventDefault();
+				selectTab(currentId);
+				return;
+			default:
+				return;
+		}
+
+		if (targetIndex !== currentIndex && tabList[targetIndex]) {
+			selectTab(tabList[targetIndex].id);
+		}
+	};
+
+	// Set context - pass the reactive state object directly!
+	setContext(tabContext, {
+		state: tabState,
+		get variant() {
+			return variant;
+		},
+		groupId,
+		register
+	});
 </script>
 
-<section class="tab-group {style}">
+<section class="tab-group {variant}">
 	<div class="tab-head">
-		<nav>
-			{#each $tabs as tab}
-				<li class={$active == tab.id ? 'active' : 'inactive'}>
-					<button on:click={() => selectTab(tab.id)}>
-						{tab.name}
+		<div role="tablist">
+			{#each tabState.tabs as tab}
+				<li class={tabState.active == tab.id ? 'active' : 'inactive'}>
+					<button
+						id="tab-{groupId}-{tab.id}"
+						role="tab"
+						aria-selected={tabState.active === tab.id}
+						aria-controls="tabpanel-{groupId}-{tab.id}"
+						tabindex={tabState.active === tab.id ? 0 : -1}
+						onclick={() => selectTab(tab.id)}
+						onkeydown={(e) => handleKeydown(e, tab.id)}
+					>
+						{tab.label}
 					</button>
 				</li>
 			{/each}
-		</nav>
+		</div>
 	</div>
 	<div class="tab-content">
-		<slot />
+		{@render children?.()}
 	</div>
 </section>
 
 <style>.tab-head {
-  height: 2rem;
+  min-height: 2rem;
   position: relative;
 }
-.tab-head nav {
+.tab-head div[role=tablist] {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: flex-start;
   align-items: center;
   box-sizing: border-box;
-  height: 2rem;
+  min-height: 2rem;
   overflow: hidden;
   width: 100%;
 }
@@ -85,7 +211,7 @@ setContext(tabContext, ctx);
   border: none 0;
   background: transparent;
   line-height: 1.8rem;
-  height: 2rem;
+  min-height: 2rem;
   padding-left: 1rem;
   padding-right: 1rem;
   cursor: pointer;
@@ -95,6 +221,15 @@ setContext(tabContext, ctx);
 .tab-head button:focus {
   outline: none;
 }
+.tab-head button:focus-visible {
+  outline: 2px solid var(--tab-focus-outline, rgb(0, 123, 255));
+  outline-offset: 2px;
+  border-radius: 0.25rem;
+}
+.tab-head button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 
 .tab-content {
   padding-top: 1rem;
@@ -153,9 +288,11 @@ setContext(tabContext, ctx);
   border-style: solid;
   border-width: 0.1rem 0.1rem 0.1rem 0.1rem;
   border-color: var(--tab-outline-border, rgb(220, 220, 220));
-  color: var(--base-fg, rgb(220, 220, 220));
+  color: var(--tab-outline-active-fg, rgb(50, 50, 50));
   border-bottom-color: var(--base-bg, rgb(50, 50, 50));
+  background: var(--tab-outline-active-bg, transparent);
   line-height: 1.7rem;
+  min-height: 1.7rem;
 }
 
 .overline .tab-head {
@@ -172,4 +309,83 @@ setContext(tabContext, ctx);
 .overline .inactive button {
   border-style: none;
   color: var(--tab-overline-fg, rgb(180, 180, 180));
+}
+
+.pills .tab-head {
+  border-bottom: none;
+}
+.pills div[role=tablist] {
+  gap: 0.5rem;
+}
+.pills button {
+  border-radius: 1.5rem;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  transition: all 0.2s ease;
+}
+.pills .inactive button {
+  background: var(--tab-pills-inactive-bg, rgb(240, 240, 240));
+  color: var(--tab-pills-inactive-fg, rgb(100, 100, 100));
+}
+.pills .inactive button:hover {
+  background: var(--tab-pills-hover-bg, rgb(230, 230, 230));
+  color: var(--tab-pills-hover-fg, rgb(50, 50, 50));
+}
+.pills .active button {
+  background: var(--tab-pills-active-bg, rgb(0, 123, 255));
+  color: var(--tab-pills-active-fg, rgb(255, 255, 255));
+  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
+}
+
+.segmented .tab-head {
+  border-bottom: none;
+  background: var(--tab-segmented-bg, rgb(240, 240, 240));
+  border-radius: 0.5rem;
+  padding: 0.25rem;
+}
+.segmented div[role=tablist] {
+  gap: 0.25rem;
+}
+.segmented button {
+  border-radius: 0.375rem;
+  flex: 1;
+  min-width: 0;
+  transition: all 0.2s ease;
+}
+.segmented .inactive button {
+  background: transparent;
+  color: var(--tab-segmented-inactive-fg, rgb(100, 100, 100));
+}
+.segmented .inactive button:hover {
+  background: var(--tab-segmented-hover-bg, rgba(255, 255, 255, 0.5));
+  color: var(--tab-segmented-hover-fg, rgb(50, 50, 50));
+}
+.segmented .active button {
+  background: var(--tab-segmented-active-bg, rgb(255, 255, 255));
+  color: var(--tab-segmented-active-fg, rgb(50, 50, 50));
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  font-weight: 500;
+}
+
+.minimal .tab-head {
+  border-bottom: solid 0.1rem var(--tab-minimal-border, rgb(230, 230, 230));
+}
+.minimal button {
+  border-radius: 0;
+  transition: color 0.2s ease;
+}
+.minimal .inactive button {
+  background: transparent;
+  color: var(--tab-minimal-inactive-fg, rgb(150, 150, 150));
+}
+.minimal .inactive button:hover {
+  background: transparent;
+  color: var(--tab-minimal-hover-fg, rgb(50, 50, 50));
+}
+.minimal .active button {
+  background: transparent;
+  color: var(--tab-minimal-active-fg, rgb(0, 123, 255));
+  border-bottom: solid 0.2rem var(--tab-minimal-active-fg, rgb(0, 123, 255));
+  margin-bottom: -0.1rem;
+  font-weight: 500;
 }</style>

package/dist/navigation/tabs/tab-group.svelte.d.ts

@@ -1,23 +1,10 @@
-import { SvelteComponent } from "svelte";
-import { type TabStyle } from './tab-context.js';
-declare const __propDef: {
-    props: {
-        style?: TabStyle;
-    };
-    events: {
-        change: CustomEvent<string | null>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+import type { Snippet } from 'svelte';
+import { type TabVariant } from './tab-context.js';
+type $$ComponentProps = {
+    variant?: TabVariant;
+    onChange?: ((id: string | null) => void) | undefined;
+    children: Snippet;
 };
-export type TabGroupProps = typeof __propDef.props;
-export type TabGroupEvents = typeof __propDef.events;
-export type TabGroupSlots = typeof __propDef.slots;
-export default class TabGroup extends SvelteComponent<TabGroupProps, TabGroupEvents, TabGroupSlots> {
-}
-export {};
+declare const TabGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type TabGroup = ReturnType<typeof TabGroup>;
+export default TabGroup;