@tabelhadev/tabelhawebui 0.28.4

package/dist/components/navigation/InstructionStep.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getContext } from 'svelte';
+	import CardRoot from '../card/Card.svelte';
+	import CardHeader from '../card/CardHeader.svelte';
+	import CardContent from '../card/CardContent.svelte';
+
+	let {
+		title,
+		action,
+		n,
+		children
+	}: {
+		title?: string;
+		action?: Snippet;
+		n?: number;
+		children: Snippet;
+	} = $props();
+
+	const register = getContext<(() => number) | undefined>('twui-instruction-step');
+	const stepNumber = $derived(n ?? (register ? register() : 1));
+</script>
+
+<CardRoot class="twui-instruction-step" variant="base">
+	<CardHeader class="twui-instruction-step-header">
+		{#snippet title()}
+			<span class="twui-instruction-step-head">
+				<span class="twui-instruction-step-badge">{stepNumber}</span>
+				{#if title}
+					<span class="twui-instruction-step-title">{title}</span>
+				{/if}
+			</span>
+		{/snippet}
+		<!-- Must be a DIRECT child of <CardHeader>: a snippet declared
+		     inside an {#if} block is scoped to that block and never
+		     reaches the component as its `children` prop. -->
+		{#snippet children()}
+			{#if action}
+				{@render action()}
+			{/if}
+		{/snippet}
+	</CardHeader>
+	<CardContent>
+		<div class="twui-instruction-step-content">
+			{@render children()}
+		</div>
+	</CardContent>
+</CardRoot>
+
+<style>
+	.twui-instruction-step-head {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		min-width: 0;
+	}
+
+	.twui-instruction-step-badge {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		width: 24px;
+		height: 24px;
+		border: 1px solid var(--twui-accent);
+		background: color-mix(in oklab, var(--twui-accent) 10%, transparent);
+		font-family: var(--twui-font-mono);
+		font-size: 12px;
+		font-weight: 600;
+		color: var(--twui-accent);
+	}
+
+	.twui-instruction-step-title {
+		margin: 0;
+		font-family: var(--twui-font-mono);
+		font-size: 14px;
+		font-weight: 600;
+		color: var(--twui-ink);
+	}
+
+	/* Block (not flex column) so inline <code>/<kbd>/<a> flow normally
+	   instead of each becoming its own full-width line. */
+	.twui-instruction-step-content {
+		font-size: 15px;
+		color: var(--twui-ink-soft);
+	}
+
+	/* Only bare <code>/<kbd>/<a> (no class) get auto-styled, so callers
+	   can still opt out with their own classes (e.g. the token display box). */
+	.twui-instruction-step-content :global(code:not([class])),
+	.twui-instruction-step-content :global(kbd:not([class])) {
+		border: 1px solid var(--twui-rule);
+		background: var(--twui-paper-raised);
+		padding: 1px 4px;
+		font-family: var(--twui-font-mono);
+		font-size: 12px;
+		border-radius: 4px;
+		color: var(--twui-ink);
+	}
+
+	.twui-instruction-step-content :global(a:not([class])) {
+		color: var(--twui-accent);
+		text-decoration: underline;
+		text-underline-offset: 4px;
+	}
+
+	.twui-instruction-step-content :global(a:not([class])):hover {
+		opacity: 0.8;
+	}
+
+	.twui-instruction-step-content :global(strong) {
+		color: var(--twui-ink);
+		font-weight: 600;
+	}
+</style>

package/dist/components/navigation/InstructionStep.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    title?: string;
+    action?: Snippet;
+    n?: number;
+    children: Snippet;
+};
+declare const InstructionStep: import("svelte").Component<$$ComponentProps, {}, "">;
+type InstructionStep = ReturnType<typeof InstructionStep>;
+export default InstructionStep;

package/dist/components/navigation/InstructionSteps.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setContext } from 'svelte';
+
+	let {
+		children,
+		class: className = ''
+	}: {
+		children: Snippet;
+		class?: string;
+	} = $props();
+
+	let count = 0;
+	// Each <Instruction.Step> calls this on mount, in document order, so the
+	// badges number themselves sequentially without an explicit index prop.
+	const register = () => {
+		count += 1;
+		return count;
+	};
+	setContext('twui-instruction-step', register);
+</script>
+
+<div class="twui-instruction-steps {className}">
+	{@render children()}
+</div>
+
+<style>
+	.twui-instruction-steps {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+	}
+
+	/* Header-only step: without the content below, the header's bottom rule
+	   would sit right on top of the card's own border. */
+	.twui-instruction-step :global(.twui-card-header:last-child) {
+		border-bottom: none;
+	}
+</style>

package/dist/components/navigation/InstructionSteps.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+    class?: string;
+};
+declare const InstructionSteps: import("svelte").Component<$$ComponentProps, {}, "">;
+type InstructionSteps = ReturnType<typeof InstructionSteps>;
+export default InstructionSteps;

package/dist/components/navigation/Nav.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		logo,
+		items = [],
+		trailing,
+		class: className = ''
+	}: {
+		logo?: Snippet;
+		items?: { href: string; label: string; current?: boolean }[];
+		trailing?: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<header class="twui-nav {className}">
+	<div class="twui-nav-top">
+		{#if logo}
+			<div class="twui-nav-logo">{@render logo()}</div>
+		{/if}
+		{#if trailing}
+			<div class="twui-nav-trailing">{@render trailing()}</div>
+		{/if}
+	</div>
+	{#if items.length > 0}
+		<nav class="twui-nav-links">
+			{#each items as item, i (item.href)}
+				{#if i > 0}
+					<span class="twui-nav-sep" aria-hidden="true">/</span>
+				{/if}
+				<a
+					href={item.href}
+					class="twui-nav-link {item.current ? 'twui-nav-link-current' : ''}"
+					aria-current={item.current ? 'page' : undefined}
+					>{item.label}</a
+				>
+			{/each}
+		</nav>
+	{/if}
+</header>
+
+<style>
+	.twui-nav {
+		border-bottom: 1px solid var(--twui-rule);
+	}
+
+	.twui-nav-top {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 16px;
+		padding: 16px 20px;
+	}
+
+	.twui-nav-logo {
+		font-family: var(--twui-font-mono);
+		font-size: 14px;
+		font-weight: 500;
+		white-space: nowrap;
+		color: var(--twui-ink);
+	}
+
+	.twui-nav-trailing {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+	}
+
+	.twui-nav-links {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		column-gap: 4px;
+		row-gap: 8px;
+		padding: 0 20px 16px;
+		font-family: var(--twui-font-mono);
+		font-size: 14px;
+	}
+
+	.twui-nav-sep {
+		padding: 0 8px;
+		color: var(--twui-ink-faint);
+		user-select: none;
+	}
+
+	.twui-nav-link {
+		color: var(--twui-ink-soft);
+		transition: color 0.15s ease;
+	}
+
+	.twui-nav-link:hover {
+		color: var(--twui-accent);
+	}
+
+	.twui-nav-link-current {
+		color: var(--twui-accent);
+		text-decoration: underline;
+		text-decoration-thickness: 2px;
+		text-underline-offset: 4px;
+	}
+</style>

package/dist/components/navigation/Nav.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    logo?: Snippet;
+    items?: {
+        href: string;
+        label: string;
+        current?: boolean;
+    }[];
+    trailing?: Snippet;
+    class?: string;
+};
+declare const Nav: import("svelte").Component<$$ComponentProps, {}, "">;
+type Nav = ReturnType<typeof Nav>;
+export default Nav;

package/dist/components/navigation/Stepper.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	let {
+		items,
+		value = $bindable(''),
+		class: className = ''
+	}: {
+		items: { value: string; label: string; disabled?: boolean }[];
+		value?: string;
+		class?: string;
+	} = $props();
+
+	const currentIndex = $derived(items.findIndex((s) => s.value === value));
+</script>
+
+<ol class="twui-stepper {className}">
+	{#each items as step, i (step.value)}
+		<li
+			class="twui-stepper-item {i <= currentIndex ? 'twui-stepper-item-active' : ''} {step.disabled ? 'twui-stepper-item-disabled' : ''}"
+			aria-current={i === currentIndex ? 'step' : undefined}
+		>
+			<button
+				type="button"
+				class="twui-stepper-btn"
+				disabled={step.disabled}
+				onclick={() => (value = step.value)}
+				aria-label={`Passo ${i + 1} de ${items.length}: ${step.label}`}
+			>
+				<span class="twui-stepper-num" aria-hidden="true">
+					{i < currentIndex ? '✓' : String(i + 1).padStart(2, '0')}
+				</span>
+				<span class="twui-stepper-label">{step.label}</span>
+			</button>
+		</li>
+	{/each}
+</ol>
+
+<style>
+	.twui-stepper {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	.twui-stepper-item {
+		position: relative;
+		flex: 1;
+		min-width: 0;
+	}
+
+	.twui-stepper-item::after {
+		content: '';
+		position: absolute;
+		top: 13px;
+		right: 0;
+		left: calc(50% + 18px);
+		height: 1px;
+		background: var(--twui-rule);
+	}
+
+	.twui-stepper-item:last-child::after {
+		display: none;
+	}
+
+	.twui-stepper-item-active::after {
+		background: var(--twui-accent);
+	}
+
+	.twui-stepper-btn {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 6px;
+		width: 100%;
+		padding: 0;
+		border: none;
+		background: transparent;
+		font-family: var(--twui-font-mono);
+		cursor: pointer;
+	}
+
+	.twui-stepper-num {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 26px;
+		height: 26px;
+		border: 1px solid var(--twui-rule);
+		border-radius: 9999px;
+		background: var(--twui-paper-raised);
+		font-size: 11px;
+		color: var(--twui-ink-soft);
+	}
+
+	.twui-stepper-item-active .twui-stepper-num {
+		border-color: var(--twui-accent);
+		background: var(--twui-accent);
+		color: var(--twui-paper);
+	}
+
+	.twui-stepper-label {
+		font-size: 12px;
+		color: var(--twui-ink-soft);
+	}
+
+	.twui-stepper-item-disabled .twui-stepper-btn {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+</style>

package/dist/components/navigation/Stepper.svelte.d.ts

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    items: {
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }[];
+    value?: string;
+    class?: string;
+};
+declare const Stepper: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Stepper = ReturnType<typeof Stepper>;
+export default Stepper;

package/dist/components/navigation/TabCard.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		title,
+		note,
+		children,
+		class: className = ''
+	}: {
+		title: string;
+		note?: string;
+		children: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<div class="twui-tabcard {className}">
+	<span class="twui-tabcard-tab">{title}</span>
+	<div class="twui-tabcard-body">
+		{@render children()}
+		{#if note}
+			<span class="twui-tabcard-note">{note}</span>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.twui-tabcard {
+		display: flex;
+		height: 100%;
+		width: 100%;
+		flex-direction: column;
+	}
+
+	.twui-tabcard-tab {
+		display: inline-flex;
+		width: fit-content;
+		border: 1px solid var(--twui-rule);
+		border-bottom: 0;
+		background: var(--twui-paper-raised);
+		padding: 6px 16px;
+		font-family: var(--twui-font-mono);
+		font-size: 12px;
+		color: var(--twui-ink-soft);
+	}
+
+	.twui-tabcard-body {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		border: 1px solid var(--twui-rule);
+		padding: 24px;
+	}
+
+	.twui-tabcard-note {
+		margin-top: auto;
+		margin-left: auto;
+		font-family: var(--twui-font-mono);
+		font-size: 12px;
+		color: var(--twui-ink-faint);
+	}
+</style>

package/dist/components/navigation/TabCard.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    title: string;
+    note?: string;
+    children: Snippet;
+    class?: string;
+};
+declare const TabCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type TabCard = ReturnType<typeof TabCard>;
+export default TabCard;

package/dist/components/navigation/Tabs.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	let {
+		items,
+		value = $bindable(''),
+		class: className = ''
+	}: {
+		items: { value: string; label: string; disabled?: boolean }[];
+		value?: string;
+		class?: string;
+	} = $props();
+
+	const firstEnabled = $derived(items.find((t) => !t.disabled));
+
+	function onKeydown(e: KeyboardEvent, index: number) {
+		if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+		e.preventDefault();
+		const dir = e.key === 'ArrowRight' ? 1 : -1;
+		let i = index + dir;
+		for (let steps = 0; steps < items.length; steps++, i += dir) {
+			const wrap = (i + items.length * Math.abs(dir)) % items.length;
+			const candidate = items[wrap];
+			if (!candidate.disabled) {
+				value = candidate.value;
+				return;
+			}
+			i = wrap;
+		}
+	}
+</script>
+
+<div class="twui-tabs {className}" role="tablist">
+	{#each items as tab, i (tab.value)}
+		<button
+			type="button"
+			role="tab"
+			aria-selected={tab.value === value}
+			tabindex={tab.value === value ? 0 : -1}
+			disabled={tab.disabled}
+			class="twui-tabs-item {tab.value === value ? 'twui-tabs-item-active' : ''}"
+			onclick={() => (value = tab.value)}
+			onkeydown={(e) => onKeydown(e, i)}
+		>
+			{tab.label}
+		</button>
+	{/each}
+</div>
+
+<style>
+	.twui-tabs {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 4px 0;
+		border-bottom: 1px solid var(--twui-rule);
+	}
+
+	.twui-tabs-item {
+		padding: 8px 16px;
+		border: none;
+		border-bottom: 2px solid transparent;
+		background: transparent;
+		font-family: var(--twui-font-mono);
+		font-size: 13px;
+		color: var(--twui-ink-soft);
+		cursor: pointer;
+		transition:
+			color 0.15s ease,
+			border-color 0.15s ease;
+	}
+
+	.twui-tabs-item:hover:not(:disabled) {
+		color: var(--twui-accent);
+	}
+
+	.twui-tabs-item-active {
+		border-bottom-color: var(--twui-accent);
+		color: var(--twui-accent);
+	}
+
+	.twui-tabs-item:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+</style>

package/dist/components/navigation/Tabs.svelte.d.ts

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    items: {
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }[];
+    value?: string;
+    class?: string;
+};
+declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/navigation/ThemeToggle.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { onMount } from 'svelte';
+
+	let {
+		labels = { light: 'Usar tema claro', dark: 'Usar tema escuro' },
+		icons,
+		showLabel = false,
+		label = { light: 'Tema claro', dark: 'Tema escuro' },
+		class: className = ''
+	}: {
+		labels?: { light: string; dark: string };
+		icons?: { sun: Snippet; moon: Snippet };
+		showLabel?: boolean;
+		label?: { light: string; dark: string };
+		class?: string;
+	} = $props();
+
+	let dark = $state(false);
+
+	onMount(() => {
+		const el = document.documentElement;
+		dark = el.getAttribute('data-theme') === 'dark' || el.classList.contains('dark');
+	});
+
+	function toggle() {
+		dark = !dark;
+		const el = document.documentElement;
+		el.setAttribute('data-theme', dark ? 'dark' : 'light');
+		el.classList.toggle('dark', dark);
+		localStorage.setItem('theme', dark ? 'dark' : 'light');
+	}
+</script>
+
+<button
+	type="button"
+	class="twui-theme-toggle {showLabel ? 'twui-theme-toggle-labeled' : ''} {className}"
+	aria-label={dark ? labels.light : labels.dark}
+	onclick={toggle}
+>
+	{#if dark}
+		{#if icons?.sun}
+			{@render icons.sun()}
+		{:else}
+			<svg
+				class="twui-theme-toggle-icon"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="1.75"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+			>
+				<circle cx="12" cy="12" r="4"></circle>
+				<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"></path>
+			</svg>
+		{/if}
+	{:else}
+		{#if icons?.moon}
+			{@render icons.moon()}
+		{:else}
+			<svg
+				class="twui-theme-toggle-icon"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="1.75"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+			>
+				<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
+			</svg>
+		{/if}
+	{/if}
+	{#if showLabel}
+		<span class="twui-theme-toggle-label-text">{dark ? label.light : label.dark}</span>
+	{/if}
+</button>
+
+<style>
+	.twui-theme-toggle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 32px;
+		height: 32px;
+		border: none;
+		background: transparent;
+		color: var(--twui-ink-soft);
+		cursor: pointer;
+		transition: color 0.15s ease;
+	}
+
+	.twui-theme-toggle:hover {
+		color: var(--twui-accent);
+	}
+
+	.twui-theme-toggle-labeled {
+		width: auto;
+		height: auto;
+		gap: 8px;
+		padding: 6px 10px;
+	}
+
+	.twui-theme-toggle-label-text {
+		font-family: var(--twui-font-mono);
+		font-size: 14px;
+		line-height: 1;
+		white-space: nowrap;
+	}
+
+	.twui-theme-toggle-icon {
+		width: 16px;
+		height: 16px;
+	}
+</style>