@gadxr/ui 0.0.0-stage → 0.1.0

package/dist/Slider.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">// Base UI-style Slider (single value). 2D is a native <input type="range">.
+// 3D: press on the track or thumb, then the value follows the cursor ray where it
+// crosses the track's plane until release — so the drag survives drifting off the
+// track, and works the same for the mouse cursor and a VR laser.
+import { ensure3d } from "./aframe";
+import { everyFrame } from "./aframe/frame";
+import { sliderFraction, sliderValueAt } from "./component-style";
+import { getDimension, getTheme } from "./context";
+import { setStack, useSlot } from "./layout.svelte";
+import Text from "./Text.svelte";
+const theme = getTheme();
+let { value = $bindable(0), min = 0, max = 100, step = 1, label = "", showValue = true, disabled = false, width = theme().slider.width, onchange, dimension, style: userStyle = "", ...rest } = $props();
+const t = $derived(theme());
+const c = $derived(t.colors.slider);
+const fraction = $derived(sliderFraction(value, min, max));
+const font = $derived(t.typography[t.slider.typography]);
+const hasHeader = $derived(!!label || showValue);
+const contextDimension = getDimension();
+// svelte-ignore state_referenced_locally
+const is3d = (dimension ?? contextDimension) === "3d";
+function setValue(next) {
+	if (next === value) return;
+	value = next;
+	onchange?.(value);
+}
+// ---- 3D ----
+const m = (px) => px * t.space3d.metersPerPx;
+if (is3d) ensure3d();
+const W = $derived(m(width));
+const trackH = $derived(m(t.slider.trackHeight));
+const thumb = $derived(m(t.slider.thumb));
+const headerH = $derived(hasHeader ? m(font.lineHeight) * t.space3d.textScale : 0);
+const headerGap = $derived(hasHeader ? m(t.slider.gap) : 0);
+const size = $derived({
+	width: W + thumb,
+	height: headerH + headerGap + thumb
+});
+const slot = is3d ? useSlot(() => size) : () => ({
+	x: 0,
+	y: 0
+});
+// The header Text inside is placed by hand, not by a parent Panel's stack.
+setStack(undefined);
+// Track runs through y = trackY; the header sits above it.
+const trackY = $derived(-size.height / 2 + thumb / 2);
+const headerY = $derived(size.height / 2 - headerH / 2);
+const depth = .01;
+const disabledColor = $derived(t.colors.buttonDisabledText);
+let trackEl = $state();
+let dragging = $state(false);
+let hovered = $state(false);
+const thumbScale = $derived((hovered || dragging) && !disabled ? 1.2 : 1);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function valueFromRay(ray) {
+	const THREE = globalThis.AFRAME.THREE;
+	const obj = trackEl.object3D;
+	const normal = new THREE.Vector3(0, 0, 1).transformDirection(obj.matrixWorld);
+	const plane = new THREE.Plane().setFromNormalAndCoplanarPoint(normal, obj.getWorldPosition(new THREE.Vector3()));
+	const hit = ray.intersectPlane(plane, new THREE.Vector3());
+	if (!hit) return;
+	const x = obj.worldToLocal(hit).x;
+	setValue(sliderValueAt((x + W / 2) / W, min, max, step));
+}
+function startDrag(event) {
+	const detail = event.detail;
+	const cursorEl = detail?.cursorEl;
+	const raycaster = cursorEl?.components?.raycaster;
+	if (disabled || !raycaster || !trackEl) return;
+	dragging = true;
+	valueFromRay(raycaster.raycaster.ray);
+	// Not window.requestAnimationFrame: that's paused in an immersive session.
+	const stopFollowing = everyFrame(cursorEl.sceneEl, () => valueFromRay(raycaster.raycaster.ray));
+	const stop = () => {
+		dragging = false;
+		stopFollowing();
+		cursorEl.removeEventListener("mouseup", stop);
+		window.removeEventListener("mouseup", stop);
+	};
+	// The cursor emits mouseup on itself; the window listener covers a mouse released off-canvas.
+	cursorEl.addEventListener("mouseup", stop);
+	window.addEventListener("mouseup", stop);
+}
+</script>
+
+{#if is3d}
+	<!-- svelte-ignore a11y_no_static_element_interactions, a11y_mouse_events_have_key_events -->
+	<a-entity
+		{...rest}
+		onmousedown={startDrag}
+		onmouseenter={() => (hovered = true)}
+		onmouseleave={() => (hovered = false)}
+	>
+		<a-entity position="{slot().x} {slot().y} 0">
+			{#if hasHeader}
+				<a-entity position="0 {headerY} 0">
+					{#if label}
+						<Text variant={t.slider.typography} text={label} align="left" color={disabled ? disabledColor : undefined} position="{-W / 2} 0 0" />
+					{/if}
+					{#if showValue}
+						<Text variant={t.slider.typography} text={String(value)} align="right" color={t.colors.contentSecondary} position="{W / 2} 0 0" />
+					{/if}
+				</a-entity>
+			{/if}
+			<a-entity bind:this={trackEl} position="0 {trackY} 0">
+				<!-- Hit area: the track plus the thumb's reach, a bit taller than the thumb. -->
+				<a-entity
+					class={disabled ? '' : 'raycastable'}
+					geometry="primitive: plane; width: {W + thumb}; height: {thumb * 1.6}"
+					material="visible: false"
+					position="0 0 {depth + 0.004}"
+				></a-entity>
+				<a-entity
+					rounded="width: {W}; height: {trackH}; depth: {depth}; radius: {trackH / 2}; color: {c.track}"
+					position="{-W / 2} {-trackH / 2} 0"
+				></a-entity>
+				<a-entity
+					rounded="width: {Math.max(W * fraction, 0.0001)}; height: {trackH}; depth: {depth}; radius: {trackH / 2}; color: {disabled ? disabledColor : c.fill}; enabled: {fraction > 0}"
+					position="{-W / 2} {-trackH / 2} 0.001"
+				></a-entity>
+				<a-entity
+					geometry="primitive: cylinder; radius: {thumb / 2}; height: 0.008; segmentsRadial: 32"
+					material="color: {disabled ? disabledColor : c.thumb}; roughness: 0.4"
+					rotation="90 0 0"
+					position="{-W / 2 + W * fraction} 0 {depth + t.space3d.raise / 2}"
+					scale="{thumbScale} 1 {thumbScale}"
+				></a-entity>
+			</a-entity>
+		</a-entity>
+	</a-entity>
+{:else}
+	<label
+		class="ui-slider"
+		class:disabled
+		style="--ui-width: {width}px; --ui-track: {c.track}; --ui-fill: {disabled ? t.colors.buttonDisabledFill : c.fill}; --ui-thumb: {disabled ? disabledColor : c.thumb}; --ui-thumb-size: {t.slider.thumb}px; --ui-track-height: {t.slider.trackHeight}px; --ui-pct: {fraction * 100}%; --ui-gap: {t.slider.gap}px; --ui-focus: {t.colors.accent}; --ui-font: {font.fontWeight} {font.fontSize}px/{font.lineHeight}px {t.typography.fontFamily}; --ui-label: {disabled ? disabledColor : t.colors.contentPrimary}; --ui-value: {t.colors.contentSecondary}; {userStyle}"
+		{...rest}
+	>
+		{#if hasHeader}
+			<span class="header">
+				<span>{label}</span>
+				{#if showValue}<span class="value">{value}</span>{/if}
+			</span>
+		{/if}
+		<input type="range" {min} {max} {step} {disabled} bind:value oninput={() => onchange?.(value)} />
+	</label>
+{/if}
+
+<style>
+	.ui-slider {
+		display: inline-flex;
+		flex-direction: column;
+		gap: var(--ui-gap);
+		width: var(--ui-width);
+		font: var(--ui-font);
+		color: var(--ui-label);
+	}
+	.header {
+		display: flex;
+		justify-content: space-between;
+	}
+	.value {
+		color: var(--ui-value);
+		font-variant-numeric: tabular-nums;
+	}
+	input {
+		appearance: none;
+		width: 100%;
+		height: var(--ui-thumb-size);
+		margin: 0;
+		background: transparent;
+		cursor: pointer;
+	}
+	.disabled input {
+		cursor: not-allowed;
+	}
+	input::-webkit-slider-runnable-track {
+		height: var(--ui-track-height);
+		border-radius: var(--ui-track-height);
+		background: linear-gradient(to right, var(--ui-fill) var(--ui-pct), var(--ui-track) var(--ui-pct));
+	}
+	input::-moz-range-track {
+		height: var(--ui-track-height);
+		border-radius: var(--ui-track-height);
+		background: linear-gradient(to right, var(--ui-fill) var(--ui-pct), var(--ui-track) var(--ui-pct));
+	}
+	input::-webkit-slider-thumb {
+		appearance: none;
+		width: var(--ui-thumb-size);
+		height: var(--ui-thumb-size);
+		margin-top: calc((var(--ui-track-height) - var(--ui-thumb-size)) / 2);
+		border-radius: 50%;
+		background: var(--ui-thumb);
+		border: 0;
+	}
+	input::-moz-range-thumb {
+		width: var(--ui-thumb-size);
+		height: var(--ui-thumb-size);
+		border-radius: 50%;
+		background: var(--ui-thumb);
+		border: 0;
+	}
+	input:focus-visible::-webkit-slider-thumb {
+		outline: 3px solid var(--ui-focus);
+		outline-offset: 2px;
+	}
+	input:focus-visible::-moz-range-thumb {
+		outline: 3px solid var(--ui-focus);
+		outline-offset: 2px;
+	}
+</style>

package/dist/Slider.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Dimension } from './theme';
+type Props = {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    showValue?: boolean;
+    disabled?: boolean;
+    width?: number;
+    onchange?: (value: number) => void;
+    dimension?: Dimension;
+    [attribute: string]: unknown;
+};
+declare const Slider: import("svelte").Component<Props, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/Space3D.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">import { setDimension } from "./context";
+let { children } = $props();
+setDimension("3d");
+</script>
+
+{@render children()}

package/dist/Space3D.svelte.d.ts

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

package/dist/Spinner.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">// Base UI-style Spinner: a rotating arc on a faint ring. 3D: a torus arc spinning in place.
+import { ensure3d } from "./aframe";
+import { getDimension, getTheme } from "./context";
+import { useSlot } from "./layout.svelte";
+let { size = "medium", color, dimension, style: userStyle = "", ...rest } = $props();
+const theme = getTheme();
+const t = $derived(theme());
+const px = $derived(t.spinner.sizes[size]);
+const thickness = $derived(Math.max(2, px * t.spinner.thickness));
+const active = $derived(color ?? t.colors.spinner.active);
+const contextDimension = getDimension();
+// svelte-ignore state_referenced_locally
+const is3d = (dimension ?? contextDimension) === "3d";
+// ---- 3D ----
+const m = (v) => v * t.space3d.metersPerPx;
+if (is3d) ensure3d();
+const d = $derived(m(px));
+const slot = is3d ? useSlot(() => ({
+	width: d,
+	height: d
+})) : () => ({
+	x: 0,
+	y: 0
+});
+const torus = $derived(`radius: ${(d - m(thickness)) / 2}; radiusTubular: ${m(thickness) / 2}; segmentsTubular: 48`);
+const spin = $derived(`property: rotation; from: 0 0 0; to: 0 0 -360; dur: ${t.animation.timing500 * 2}; loop: true; easing: linear`);
+</script>
+
+{#if is3d}
+	<a-entity {...rest}>
+		<a-entity position="{slot().x} {slot().y} 0">
+			<a-entity geometry="primitive: torus; {torus}" material="color: {t.colors.spinner.track}; roughness: 0.6"></a-entity>
+			<a-entity
+				geometry="primitive: torus; {torus}; arc: 90"
+				material="color: {active}; emissive: {active}; emissiveIntensity: 0.4"
+				position="0 0 0.002"
+				animation__spin={spin}
+			></a-entity>
+		</a-entity>
+	</a-entity>
+{:else}
+	<span
+		class="ui-spinner"
+		role="progressbar"
+		aria-label="Loading"
+		style="width: {px}px; height: {px}px; border-width: {thickness}px; border-color: {t.colors.spinner.track}; border-top-color: {active}; {userStyle}"
+		{...rest}
+	></span>
+{/if}
+
+<style>
+	.ui-spinner {
+		display: inline-block;
+		box-sizing: border-box;
+		border-style: solid;
+		border-radius: 50%;
+		animation: ui-spin 1s linear infinite;
+	}
+	@keyframes ui-spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+</style>

package/dist/Spinner.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Dimension, SpinnerSize } from './theme';
+type Props = {
+    size?: SpinnerSize;
+    color?: string;
+    dimension?: Dimension;
+    [attribute: string]: unknown;
+};
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/Stack.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">import { getDimension, getTheme } from "./context";
+import { createStack, setStack, useSlot } from "./layout.svelte";
+const theme = getTheme();
+let { children, direction = "row", gap = theme().sizing.scale300, align = "center", alignSelf, dimension, style: userStyle = "", ...rest } = $props();
+const contextDimension = getDimension();
+// svelte-ignore state_referenced_locally
+const is3d = (dimension ?? contextDimension) === "3d";
+const stack = is3d ? createStack(() => ({
+	direction,
+	gap: gap * theme().space3d.metersPerPx,
+	align
+})) : undefined;
+const slot = is3d ? useSlot(() => ({
+	...stack.size,
+	align: alignSelf
+})) : () => ({
+	x: 0,
+	y: 0
+});
+setStack(stack);
+const flex = {
+	start: "flex-start",
+	center: "center",
+	end: "flex-end"
+};
+</script>
+
+{#if is3d}
+	<a-entity {...rest}>
+		<a-entity position="{slot().x} {slot().y} 0">{@render children()}</a-entity>
+	</a-entity>
+{:else}
+	<div
+		style="display: inline-flex; flex-direction: {direction}; gap: {gap}px; align-items: {flex[align]}; {alignSelf
+			? `align-self: ${flex[alignSelf]};`
+			: ''} {userStyle}"
+		{...rest}
+	>
+		{@render children()}
+	</div>
+{/if}

package/dist/Stack.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { Align } from './layout-math';
+import type { Dimension } from './theme';
+type Props = {
+    children: Snippet;
+    direction?: 'row' | 'column';
+    gap?: number;
+    align?: Align;
+    alignSelf?: Align;
+    dimension?: Dimension;
+    [attribute: string]: unknown;
+};
+declare const Stack: import("svelte").Component<Props, {}, "">;
+type Stack = ReturnType<typeof Stack>;
+export default Stack;

package/dist/StackScope.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">import { setStack } from "./layout.svelte";
+let { stack, children } = $props();
+// svelte-ignore state_referenced_locally
+setStack(stack);
+</script>
+
+{@render children()}

package/dist/StackScope.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import { type Stack } from './layout.svelte';
+type $$ComponentProps = {
+    stack?: Stack;
+    children: Snippet;
+};
+declare const StackScope: import("svelte").Component<$$ComponentProps, {}, "">;
+type StackScope = ReturnType<typeof StackScope>;
+export default StackScope;

package/dist/Surface.svelte

@@ -0,0 +1,152 @@
+<script lang="ts" module>// One fixed region per screen spot, shared by every Surface placed there (they stack).
+function region(screen) {
+	let el = document.querySelector(`.ui-surface-region[data-screen="${screen}"]`);
+	if (!el) {
+		el = document.createElement("div");
+		el.className = "ui-surface-region";
+		el.dataset.screen = screen;
+		document.body.appendChild(el);
+	}
+	return el;
+}
+// Moves the 2D content out of the <a-scene> into its screen region (or a target element).
+function portal(node, where) {
+	const place = ({ screen, target }) => (target && document.querySelector(target) || region(screen)).appendChild(node);
+	place(where);
+	return {
+		update: place,
+		destroy: () => node.remove()
+	};
+}
+export {};
+</script>
+
+<script lang="ts">import { untrack } from "svelte";
+import { fly } from "svelte/transition";
+import { ensure3d } from "./aframe";
+import { surfacePlacement } from "./aframe/placement";
+import { getTheme } from "./context";
+import DimensionScope from "./DimensionScope.svelte";
+import StackScope from "./StackScope.svelte";
+import { xr } from "./xr.svelte";
+let { children, vr = "follow", desktop = "screen", screen = "bottom", target, mode = "auto", open = true, camera = "[camera]", offset = "0 -0.5 -1", distance = 1.1, height = -.25, side = 0, maxAngle = 30, hand = "#leftHand", handPosition = "0 0.06 -0.15", handRotation = "-60 0 0", scale, desktopScale = 1, depthScale, ...rest } = $props();
+ensure3d();
+const theme = getTheme();
+let anchor = $state();
+$effect(() => {
+	if (anchor) xr.watch(anchor.sceneEl ?? anchor.closest("a-scene"));
+});
+const placement = $derived(mode === "2d" ? "screen" : surfacePlacement({
+	vr,
+	desktop
+}, {
+	immersive: xr.immersive || mode === "3d",
+	presenting: xr.presenting
+}));
+const is3d = $derived(placement !== "screen");
+const size = $derived(placement === "camera" ? desktopScale : scale ?? (vr === "hand" ? .225 : .45));
+const depth = $derived(size * (depthScale ?? (vr === "hand" && placement !== "camera" ? 2 : 1)));
+// Simulated wrist menus sit off to the side instead of dead ahead.
+const followSide = $derived(vr === "hand" && placement === "follow" ? side || -.45 : side);
+const followAttr = $derived(`distance: ${distance}; height: ${height}; side: ${followSide}; maxAngle: ${maxAngle}`);
+// 3D open/close: slide up into place / down out of view (meters), then unmount.
+const slideMs = $derived(theme().animation.timing500);
+const drop = $derived(placement === "camera" ? .5 : .3);
+let shown = $state(untrack(() => open));
+$effect(() => {
+	if (open) return void (shown = true);
+	if (!untrack(() => shown)) return;
+	const timer = setTimeout(() => shown = false, slideMs);
+	return () => clearTimeout(timer);
+});
+const slideAttr = $derived(`property: position; to: 0 ${open ? 0 : -drop} 0; dur: ${slideMs}; easing: ${open ? "easeOutCubic" : "easeInCubic"}`);
+</script>
+
+<a-entity bind:this={anchor} class="ui-surface-anchor">
+	{#if is3d}
+		{#if shown}
+			<!-- Recreated per placement, so each starts from a clean transform. -->
+			{#key placement}
+				{#if placement === 'world'}
+					<a-entity {...rest}>{@render content3d()}</a-entity>
+				{:else if placement === 'follow'}
+					<a-entity ui-follow={followAttr}>{@render content3d()}</a-entity>
+				{:else if placement === 'camera'}
+					<a-entity ui-attach="target: {camera}; position: {offset}; rotation: 0 0 0">{@render content3d()}</a-entity>
+				{:else}
+					<a-entity ui-attach="target: {hand}; position: {handPosition}; rotation: {handRotation}">
+						{@render content3d()}
+					</a-entity>
+				{/if}
+			{/key}
+		{/if}
+	{:else if open}
+		<div class="ui-surface" use:portal={{ screen, target }} transition:fly={{ y: 24, duration: slideMs }}>
+			<DimensionScope dimension="2d"><StackScope>{@render children()}</StackScope></DimensionScope>
+		</div>
+	{/if}
+</a-entity>
+
+{#snippet content3d()}
+	<!-- Starts below and slides up; `open` sends it back down. -->
+	<a-entity position="0 {-drop} 0" animation__slide={slideAttr}>
+		<a-entity scale="{size} {size} {depth}">
+			<DimensionScope dimension="3d"><StackScope>{@render children()}</StackScope></DimensionScope>
+		</a-entity>
+	</a-entity>
+{/snippet}
+
+<style>
+	:global(.ui-surface-region) {
+		position: fixed;
+		z-index: 900;
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		padding: 16px;
+		pointer-events: none;
+		max-width: calc(100vw - 32px);
+		max-height: calc(100vh - 32px);
+		box-sizing: border-box;
+	}
+	:global(.ui-surface-region > *) {
+		pointer-events: auto;
+	}
+	:global(.ui-surface-region[data-screen^='top']) {
+		top: 0;
+	}
+	:global(.ui-surface-region[data-screen^='bottom']) {
+		bottom: 0;
+		flex-direction: column-reverse;
+	}
+	:global(.ui-surface-region[data-screen$='left']) {
+		left: 0;
+		align-items: flex-start;
+	}
+	:global(.ui-surface-region[data-screen$='right']) {
+		right: 0;
+		align-items: flex-end;
+	}
+	:global(.ui-surface-region[data-screen='top']),
+	:global(.ui-surface-region[data-screen='bottom']),
+	:global(.ui-surface-region[data-screen='center']) {
+		left: 50%;
+		transform: translateX(-50%);
+		align-items: center;
+	}
+	:global(.ui-surface-region[data-screen='left']),
+	:global(.ui-surface-region[data-screen='right']),
+	:global(.ui-surface-region[data-screen='center']) {
+		top: 50%;
+		transform: translateY(-50%);
+	}
+	:global(.ui-surface-region[data-screen='center']) {
+		transform: translate(-50%, -50%);
+	}
+	.ui-surface {
+		display: flex;
+		flex-direction: column;
+		align-items: inherit;
+		gap: inherit;
+	}
+</style>

package/dist/Surface.svelte.d.ts

@@ -0,0 +1,30 @@
+export type SurfacePlacement = 'world' | 'follow' | 'hand';
+export type SurfaceDesktopPlacement = 'screen' | 'camera';
+export type ScreenRegion = 'top-left' | 'top' | 'top-right' | 'left' | 'center' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';
+import type { Snippet } from 'svelte';
+import { type DesktopPlacement, type VRPlacement } from './aframe/placement';
+type Props = {
+    children: Snippet;
+    vr?: VRPlacement;
+    desktop?: DesktopPlacement;
+    screen?: ScreenRegion;
+    target?: string;
+    mode?: 'auto' | '2d' | '3d';
+    open?: boolean;
+    camera?: string;
+    offset?: string;
+    distance?: number;
+    height?: number;
+    side?: number;
+    maxAngle?: number;
+    hand?: string;
+    handPosition?: string;
+    handRotation?: string;
+    scale?: number;
+    desktopScale?: number;
+    depthScale?: number;
+    [attribute: string]: unknown;
+};
+declare const Surface: import("svelte").Component<Props, {}, "">;
+type Surface = ReturnType<typeof Surface>;
+export default Surface;

package/dist/Tab.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">import { getDimension } from "./context";
+import { getTabs } from "./tabs-context";
+let { key, title, disabled = false, children } = $props();
+const tabs = getTabs();
+if (!tabs) throw new Error("<Tab> must be inside <Tabs>");
+const entry = {
+	get key() {
+		return key;
+	},
+	get title() {
+		return title;
+	},
+	get disabled() {
+		return disabled;
+	}
+};
+tabs.register(entry);
+$effect(() => () => tabs.unregister(entry));
+const is3d = getDimension() === "3d";
+const active = $derived(tabs.active === key);
+</script>
+
+{#if active}
+	{#if is3d}
+		{@render children?.()}
+	{:else}
+		<div class="ui-tab-panel" role="tabpanel" id="{tabs.id}-panel-{key}" aria-labelledby="{tabs.id}-tab-{key}">
+			{@render children?.()}
+		</div>
+	{/if}
+{/if}
+
+<style>
+	.ui-tab-panel {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 12px;
+	}
+</style>

package/dist/Tab.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    key: string;
+    title: string;
+    disabled?: boolean;
+    children?: Snippet;
+};
+declare const Tab: import("svelte").Component<Props, {}, "">;
+type Tab = ReturnType<typeof Tab>;
+export default Tab;