@torpor/ui 0.0.16 → 0.1.0

package/dist/Popover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Popover/showPopover.ts","../../src/Popover/mountClickPopover.ts","../../src/Popover/mountContextPopover.ts","../../src/mount/hoverTrigger.ts","../../src/Popover/mountHoverPopover.ts","../../src/Popover/showPopoverPrompt.ts"],"sourcesContent":["// TODO: Allow passing in a variable -- so that you can show an inline popover\nimport type { Component } from \"@torpor/view\";\n\n/**\n * Shows a popover component in code.\n * @param popover The popover component\n * @param anchor The element to use as an anchor for the popover component\n * @param props The properties for the popover component\n * @param target The target element to show the popover in\n * @returns The value selected by the user\n */\nexport default function showPopover(\n\tpopover: Component,\n\tanchor: HTMLElement,\n\tprops?: Record<PropertyKey, any>,\n\ttarget?: Element,\n): void {\n\t// Add the anchor element to the properties\n\tconst allProps = Object.assign({}, props, { anchor });\n\n\t// Create the popover\n\t// TODO: This needs to clean up after itself, like the mount methods do\n\tpopover(target || anchor.parentElement || document.body, null, allProps);\n}\n","import type { Component } from \"@torpor/view\";\nimport showPopover from \"./showPopover\";\n\ninterface ClickPopoverOptions {\n\tpopover: Component;\n\tprops?: Record<PropertyKey, any>;\n}\n\n/**\n * A mount directive for showing a popover when an element is clicked.\n * @param node The element to show the popover for\n * @param options Options for showing the popover, consisting of the popover component and any props\n */\nexport default function clickPopover(node: HTMLElement, options: ClickPopoverOptions) {\n\tconst { popover, props } = options;\n\n\t// Add a click event handler to the node\n\tnode.addEventListener(\"click\", handleClick);\n\n\tfunction handleClick(e: MouseEvent) {\n\t\te.preventDefault();\n\t\tshow();\n\t}\n\n\tlet div: HTMLDivElement;\n\n\tfunction show() {\n\t\t// Show the popover in a div\n\t\tif (div) {\n\t\t\tdocument.body.removeChild(div);\n\t\t}\n\t\tdiv = document.createElement(\"div\");\n\t\tdocument.body.appendChild(div);\n\n\t\tshowPopover(popover, node, props, div);\n\t}\n\n\treturn {\n\t\tdestroy(): void {\n\t\t\t// Remove the event listener from the node on destroy\n\t\t\tnode.removeEventListener(\"click\", handleClick);\n\n\t\t\t// Remove the div we added\n\t\t\t// TODO: Should we do this in more places?\n\t\t\tif (div) {\n\t\t\t\tdocument.body.removeChild(div);\n\t\t\t}\n\t\t},\n\t};\n}\n","import type { Component } from \"@torpor/view\";\nimport showPopover from \"./showPopover\";\n\ninterface ContextPopoverOptions {\n\tpopover: Component;\n\tprops?: Record<PropertyKey, any>;\n}\n\n/**\n * A mount directive for showing a popover when the user opens an element's context menu.\n * @param node The element to show the popover for\n * @param options Options for showing the popover, consisting of the popover component and any props\n */\nexport default function contextPopover(node: HTMLElement, options: ContextPopoverOptions) {\n\tconst { popover, props } = options;\n\n\t// Add a contextmenu event handler to the node\n\tnode.addEventListener(\"contextmenu\", handleClick);\n\n\tfunction handleClick(e: MouseEvent) {\n\t\te.preventDefault();\n\t\tshow();\n\t}\n\n\tlet div: HTMLDivElement;\n\n\tfunction show() {\n\t\t// Show the popover in a div\n\t\tif (div) {\n\t\t\tdocument.body.removeChild(div);\n\t\t}\n\t\tdiv = document.createElement(\"div\");\n\t\tdocument.body.appendChild(div);\n\n\t\tshowPopover(popover, node, props, div);\n\t}\n\n\treturn {\n\t\tdestroy(): void {\n\t\t\t// Remove the event listener from the node on destroy\n\t\t\tnode.removeEventListener(\"contextmenu\", handleClick);\n\n\t\t\t// Remove the div we added\n\t\t\t// TODO: Should we do this in more places?\n\t\t\tif (div) {\n\t\t\t\tdocument.body.removeChild(div);\n\t\t\t}\n\t\t},\n\t};\n}\n","interface HoverTriggerOptions {\n\tonHover: (node: HTMLElement, e: TouchEvent | MouseEvent) => void;\n\tonExit?: (node: HTMLElement, e: TouchEvent | MouseEvent) => void;\n\thoverDelay?: number;\n\ttouchDelay?: number;\n}\n\nexport default function hoverTrigger(node: HTMLElement, options: HoverTriggerOptions): () => void {\n\tconst { onHover, onExit } = options;\n\tconst hoverDelay = options.hoverDelay || 1000;\n\tconst touchDelay = options.touchDelay || 1000;\n\n\tlet interval: NodeJS.Timeout | undefined;\n\n\t// Add click event handlers to the node\n\tnode.addEventListener(\"mouseenter\", handleMouseEnter);\n\tnode.addEventListener(\"mouseleave\", handleMouseLeave);\n\tnode.addEventListener(\"mousemove\", handleMouseMove);\n\tnode.addEventListener(\"touchstart\", handleMouseEnter);\n\tnode.addEventListener(\"touchend\", handleMouseLeave);\n\n\tfunction handleMouseEnter(e: MouseEvent | TouchEvent) {\n\t\t// Handle the hover after a delay\n\t\te.preventDefault();\n\t\tif (!interval) {\n\t\t\tconst delay = e.type.startsWith(\"mouse\") ? hoverDelay : touchDelay;\n\t\t\tinterval = setTimeout(() => onHover(node, e), delay);\n\t\t}\n\t}\n\n\tfunction handleMouseLeave(e: MouseEvent | TouchEvent) {\n\t\t// Prevent short hovers or touches from firing the event\n\t\tif (interval) {\n\t\t\tclearTimeout(interval);\n\t\t\tinterval = undefined;\n\t\t}\n\n\t\tif (onExit) {\n\t\t\tonExit(node, e);\n\t\t}\n\t}\n\n\tfunction handleMouseMove(e: MouseEvent) {\n\t\t// Reset the interval on mouse move\n\t\tif (interval) {\n\t\t\tclearTimeout(interval);\n\t\t\tinterval = setTimeout(() => onHover(node, e), hoverDelay);\n\t\t}\n\t}\n\n\t// Remove the event listeners from the node on destroy\n\treturn () => {\n\t\tnode.removeEventListener(\"mouseenter\", handleMouseEnter);\n\t\tnode.removeEventListener(\"mouseleave\", handleMouseLeave);\n\t\tnode.removeEventListener(\"mousemove\", handleMouseMove);\n\t\tnode.removeEventListener(\"touchstart\", handleMouseEnter);\n\t\tnode.removeEventListener(\"touchend\", handleMouseLeave);\n\t};\n}\n","import type { Component } from \"@torpor/view\";\nimport hoverTrigger from \"../mount/hoverTrigger\";\nimport showPopover from \"./showPopover\";\n\ninterface HoverPopoverOptions {\n\tpopover: Component;\n\tprops?: Record<PropertyKey, any>;\n\thoverDelay?: number;\n\ttouchDelay?: number;\n}\n\n/**\n * A mount directive for showing a popover when an element is hovered.\n * @param node The element to show the popover for\n * @param options Options for showing the popover, consisting of the popover component, any props and delays for hover and touch\n */\nexport default function hoverPopover(node: HTMLElement, options: HoverPopoverOptions): () => void {\n\tconst { popover, props, hoverDelay, touchDelay } = options;\n\n\tlet div: HTMLDivElement | undefined;\n\n\tfunction onHover(node: HTMLElement, e: MouseEvent | TouchEvent) {\n\t\t// Show the popover in a div\n\t\tif (div) {\n\t\t\tdocument.body.removeChild(div);\n\t\t}\n\t\tdiv = document.createElement(\"div\");\n\t\tdocument.body.appendChild(div);\n\n\t\t// Get the position relative to the element, so we can reposition on scroll\n\t\tconst rect = node.getBoundingClientRect();\n\t\tlet position: { x: number; y: number };\n\t\tif (e.type.startsWith(\"mouse\")) {\n\t\t\tconst me = e as MouseEvent;\n\t\t\tposition = { x: me.clientX - rect.left, y: me.clientY - rect.top };\n\t\t} else {\n\t\t\tconst te = e as TouchEvent;\n\t\t\tposition = {\n\t\t\t\tx: te.touches[0].clientX - rect.left,\n\t\t\t\ty: te.touches[0].clientY - rect.top,\n\t\t\t};\n\t\t}\n\t\tconst allProps = Object.assign({}, props, { anchor: node, position });\n\n\t\tshowPopover(popover, node, allProps, div);\n\t}\n\n\tfunction onExit() {\n\t\t// Remove the div\n\t\tif (div) {\n\t\t\tdocument.body.removeChild(div);\n\t\t\tdiv = undefined;\n\t\t}\n\t}\n\n\treturn hoverTrigger(node, { onHover, onExit, hoverDelay, touchDelay });\n}\n","import type { Component } from \"@torpor/view\";\n\n/**\n * Shows a popover component in code, and asynchronously returns the value selected by the user.\n * @param popover The popover component\n * @param props The properties for the popover component\n * @param target The target element to show the popover in\n * @returns The value selected by the user\n */\nexport default function showPopoverPrompt(\n\tpopover: Component,\n\tprops?: Record<PropertyKey, any>,\n\ttarget?: Element,\n): Promise<void> {\n\treturn new Promise((resolve) => {\n\t\t// Add the promise as the callback\n\t\tconst allProps = Object.assign({}, props, { callback: resolve });\n\n\t\t// Create the popover\n\t\t// TODO: This needs to clean up after itself, like the use methods do\n\t\tpopover(target || document.body, null, allProps);\n\t});\n}\n"],"mappings":"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","names":["node"]}

package/dist/Popover/mountClickPopover.ts

@@ -0,0 +1,50 @@
+import type { Component } from "@torpor/view";
+import showPopover from "./showPopover";
+
+interface ClickPopoverOptions {
+	popover: Component;
+	props?: Record<PropertyKey, any>;
+}
+
+/**
+ * A mount directive for showing a popover when an element is clicked.
+ * @param node The element to show the popover for
+ * @param options Options for showing the popover, consisting of the popover component and any props
+ */
+export default function clickPopover(node: HTMLElement, options: ClickPopoverOptions) {
+	const { popover, props } = options;
+
+	// Add a click event handler to the node
+	node.addEventListener("click", handleClick);
+
+	function handleClick(e: MouseEvent) {
+		e.preventDefault();
+		show();
+	}
+
+	let div: HTMLDivElement;
+
+	function show() {
+		// Show the popover in a div
+		if (div) {
+			document.body.removeChild(div);
+		}
+		div = document.createElement("div");
+		document.body.appendChild(div);
+
+		showPopover(popover, node, props, div);
+	}
+
+	return {
+		destroy(): void {
+			// Remove the event listener from the node on destroy
+			node.removeEventListener("click", handleClick);
+
+			// Remove the div we added
+			// TODO: Should we do this in more places?
+			if (div) {
+				document.body.removeChild(div);
+			}
+		},
+	};
+}

package/dist/Popover/mountContextPopover.ts

@@ -0,0 +1,50 @@
+import type { Component } from "@torpor/view";
+import showPopover from "./showPopover";
+
+interface ContextPopoverOptions {
+	popover: Component;
+	props?: Record<PropertyKey, any>;
+}
+
+/**
+ * A mount directive for showing a popover when the user opens an element's context menu.
+ * @param node The element to show the popover for
+ * @param options Options for showing the popover, consisting of the popover component and any props
+ */
+export default function contextPopover(node: HTMLElement, options: ContextPopoverOptions) {
+	const { popover, props } = options;
+
+	// Add a contextmenu event handler to the node
+	node.addEventListener("contextmenu", handleClick);
+
+	function handleClick(e: MouseEvent) {
+		e.preventDefault();
+		show();
+	}
+
+	let div: HTMLDivElement;
+
+	function show() {
+		// Show the popover in a div
+		if (div) {
+			document.body.removeChild(div);
+		}
+		div = document.createElement("div");
+		document.body.appendChild(div);
+
+		showPopover(popover, node, props, div);
+	}
+
+	return {
+		destroy(): void {
+			// Remove the event listener from the node on destroy
+			node.removeEventListener("contextmenu", handleClick);
+
+			// Remove the div we added
+			// TODO: Should we do this in more places?
+			if (div) {
+				document.body.removeChild(div);
+			}
+		},
+	};
+}

package/dist/Popover/mountHoverPopover.ts

@@ -0,0 +1,57 @@
+import type { Component } from "@torpor/view";
+import hoverTrigger from "../mount/hoverTrigger";
+import showPopover from "./showPopover";
+
+interface HoverPopoverOptions {
+	popover: Component;
+	props?: Record<PropertyKey, any>;
+	hoverDelay?: number;
+	touchDelay?: number;
+}
+
+/**
+ * A mount directive for showing a popover when an element is hovered.
+ * @param node The element to show the popover for
+ * @param options Options for showing the popover, consisting of the popover component, any props and delays for hover and touch
+ */
+export default function hoverPopover(node: HTMLElement, options: HoverPopoverOptions): () => void {
+	const { popover, props, hoverDelay, touchDelay } = options;
+
+	let div: HTMLDivElement | undefined;
+
+	function onHover(node: HTMLElement, e: MouseEvent | TouchEvent) {
+		// Show the popover in a div
+		if (div) {
+			document.body.removeChild(div);
+		}
+		div = document.createElement("div");
+		document.body.appendChild(div);
+
+		// Get the position relative to the element, so we can reposition on scroll
+		const rect = node.getBoundingClientRect();
+		let position: { x: number; y: number };
+		if (e.type.startsWith("mouse")) {
+			const me = e as MouseEvent;
+			position = { x: me.clientX - rect.left, y: me.clientY - rect.top };
+		} else {
+			const te = e as TouchEvent;
+			position = {
+				x: te.touches[0].clientX - rect.left,
+				y: te.touches[0].clientY - rect.top,
+			};
+		}
+		const allProps = Object.assign({}, props, { anchor: node, position });
+
+		showPopover(popover, node, allProps, div);
+	}
+
+	function onExit() {
+		// Remove the div
+		if (div) {
+			document.body.removeChild(div);
+			div = undefined;
+		}
+	}
+
+	return hoverTrigger(node, { onHover, onExit, hoverDelay, touchDelay });
+}

package/dist/Popover/showPopover.ts

@@ -0,0 +1,24 @@
+// TODO: Allow passing in a variable -- so that you can show an inline popover
+import type { Component } from "@torpor/view";
+
+/**
+ * Shows a popover component in code.
+ * @param popover The popover component
+ * @param anchor The element to use as an anchor for the popover component
+ * @param props The properties for the popover component
+ * @param target The target element to show the popover in
+ * @returns The value selected by the user
+ */
+export default function showPopover(
+	popover: Component,
+	anchor: HTMLElement,
+	props?: Record<PropertyKey, any>,
+	target?: Element,
+): void {
+	// Add the anchor element to the properties
+	const allProps = Object.assign({}, props, { anchor });
+
+	// Create the popover
+	// TODO: This needs to clean up after itself, like the mount methods do
+	popover(target || anchor.parentElement || document.body, null, allProps);
+}

package/dist/Popover/showPopoverPrompt.ts

@@ -0,0 +1,23 @@
+import type { Component } from "@torpor/view";
+
+/**
+ * Shows a popover component in code, and asynchronously returns the value selected by the user.
+ * @param popover The popover component
+ * @param props The properties for the popover component
+ * @param target The target element to show the popover in
+ * @returns The value selected by the user
+ */
+export default function showPopoverPrompt(
+	popover: Component,
+	props?: Record<PropertyKey, any>,
+	target?: Element,
+): Promise<void> {
+	return new Promise((resolve) => {
+		// Add the promise as the callback
+		const allProps = Object.assign({}, props, { callback: resolve });
+
+		// Create the popover
+		// TODO: This needs to clean up after itself, like the use methods do
+		popover(target || document.body, null, allProps);
+	});
+}

package/dist/TabGroup/TabContent.torp

@@ -0,0 +1,36 @@
+import getId from "../utils/getId";
+import { TabGroupContextName, type TabGroupContext } from "./TabGroupTypes";
+
+/**
+ * Content for a TabGroup, which can be revealed or hidden by an associated TabTrigger.
+ *
+ * @prop {string} [id] -- An ID for the TabContent's div container
+ */
+export default function TabContent($props: any) {
+	$props.id ||= getId();
+
+	const context = $context[TabGroupContextName] as TabGroupContext;
+	if (!context) {
+		throw new Error("TabContent must be contained within a TabGroup");
+	}
+	let $state = $context[TabGroupContextName].registerItem($props.index, $props.value);
+
+	// Set the content ID so that it can be used with aria-controls in TabTrigger
+	$state.contentId = $props.id;
+
+	@render {
+		<div
+			id={$props.id}
+			class={`torp-tab-content ${$props.class ?? ""}`.trim()}
+			role="tabpanel"
+			aria-labelledby={$state.headerId}
+			data-orientation={$props.orientation}
+			data-state={$state.dataState}
+			data-disabled={$state.dataDisabled}
+		>
+			@if ($state.active) {
+				<:slot />
+			}
+		</div>
+	}
+}

package/dist/TabGroup/TabGroup.torp

@@ -0,0 +1,225 @@
+import { TabGroupContextName, type TabGroupContext, type ItemState } from "./TabGroupTypes";
+
+/**
+ * A list of interactive headings coupled with layered sections of content that
+ * enable users to reveal a single section of content at a time.
+ *
+ * See [the WAI ARIA guidelines for Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
+ *
+ * The structure of a TabGroup is:
+ *
+ * ```
+ * <TabGroup>
+ * 	<TabList>
+ * 		<TabHeader>
+ * 			<TabTrigger />
+ * 		</TabHeader>
+ * 	</TabList>
+ * 	<TabContent />
+ * </TabGroup>
+ * ```
+ *
+ * @prop {"horizontal" | "vertical"} orientation -- The orientation of the tab buttons, which affects keyboard navigation
+ * @prop {"automatic" | "manual"} activation -- How tabs are activated; if automatic they are shown on focus, if manual they must be clicked
+ * @prop {string | string[]} value -- The value of the active TabContent
+ * @prop {boolean} disabled -- If set to true, the user cannot interact with any items in the TabGroup
+ * @prop {(value: string | string[]) => void} [onchange] -- Raised when the active item has changed
+ */
+export default function TabGroup($props: any) {
+	$props.orientation ||= "horizontal";
+	$props.activation ||= "automatic";
+	$props.value ||= "";
+
+	let itemStates: ItemState[] = [];
+
+	// This is used to assign automatic indexes to items where needed
+	let nextHeaderIndex = 0;
+	let nextItemIndex = 0;
+
+	// Set the context to pass down to headers and content, with functions for each item to call
+	let context: TabGroupContext = {
+		registerHeader,
+		registerItem,
+		removeItem,
+		triggerItem,
+		handleHeaderKey,
+		orientation: $props.orientation,
+		activation: $props.activation,
+	};
+	$context[TabGroupContextName] = context;
+	$run(() => {
+		// HACK: This should probably be done with setters?
+		let newValue = $props.value;
+
+		// Ensure the value passed in was a string (in case e.g. the user has set values to ints)
+		newValue = newValue?.toString();
+		for (let item of itemStates) {
+			item.active = item.value === newValue;
+		}
+
+		// Set the value
+		$props.value = newValue;
+	});
+
+	$run(() => {
+		itemStates.forEach((s) => s.parentDisabled = $props.disabled);
+	});
+
+	// Dispatch the change event when the value changes
+	let firstChange = true;
+	$run(() => {
+		const ev = $props.onchange;
+		const value = $props.value;
+		if (firstChange) {
+			firstChange = false;
+		} else if (ev) {
+			ev(value);
+		}
+	});
+
+	// TODO:
+	//$mount(() => {
+	//	if ($props.value === "" && itemStates.length) {
+	//		$props.value = itemStates[0].value;
+	//	}
+	//})
+
+	function registerHeader(index: number | undefined, value: string | undefined, setFocused: () => void): ItemState {
+		// If an index wasn't set for the header, set it automatically
+		if (!index) {
+			index = nextHeaderIndex++;
+		}
+
+		// Get or add the ItemState at this index
+		const itemState = getItemState(index, value);
+
+		itemState.setFocused = setFocused;
+
+		return itemState;
+	}
+
+	function registerItem(index: number | undefined, value: string | undefined): ItemState {
+		// If an index wasn't set for the item, set it automatically
+		if (!index) {
+			index = nextItemIndex++;
+		}
+
+		// Get or add the ItemState at this index
+		const itemState = getItemState(index, value);
+
+		return itemState;
+	}
+
+	function getItemState(index: number, value: string | undefined): ItemState {
+		// If we already have an item at this index, just return it
+		if (itemStates.length > index) {
+			return itemStates[index];
+		}
+
+		// If a value wasn't set for the item, set it to the index
+		if (!value) {
+			value = index.toString();
+		}
+
+		// Add the item's state to the array
+		const newItemState: ItemState = $watch({
+			index,
+			value,
+			active: value === $props.value,
+			headerId: "",
+			contentId: "",
+			disabled: false,
+			parentDisabled: false,
+			get dataState() {
+				return this.active ? "active" : "inactive";
+			},
+			setFocused: () => {},
+			orientation: $props.orientation,
+			activation: $props.activation
+		});
+		itemStates.splice(index, 0, newItemState);
+
+		return newItemState;
+	}
+
+	// TODO: I think this should be done by value
+	function removeItem(itemIndex: number) {
+		// Remove the item and re-index
+		let index = itemStates.findIndex((item) => item.index === itemIndex);
+		if (index !== -1) {
+			itemStates.splice(itemIndex, 1);
+		}
+		itemStates.forEach((item, i) => (item.index = i));
+	}
+
+	function triggerItem(toggleValue: string) {
+		for (let item of itemStates) {
+			// The item is active if it has the supplied value
+			if (item.value === toggleValue) {
+				$props.value = item.value;
+				break;
+			}
+		}
+	}
+
+	function handleHeaderKey(headerIndex: number, e: KeyboardEvent) {
+		switch (e.key) {
+			case "Left":
+			case "ArrowLeft": {
+				if ($props.orientation === "horizontal" && headerIndex > 0) {
+					e.preventDefault();
+					itemStates[headerIndex - 1].setFocused();
+				}
+				break;
+			}
+			case "Up":
+			case "ArrowUp": {
+				if ($props.orientation === "vertical" && headerIndex > 0) {
+					e.preventDefault();
+					itemStates[headerIndex - 1].setFocused();
+				}
+				break;
+			}
+			case "Right":
+			case "ArrowRight": {
+				if ($props.orientation === "horizontal" && headerIndex < itemStates.length - 1) {
+					e.preventDefault();
+					itemStates[headerIndex + 1].setFocused();
+				}
+				break;
+			}
+			case "Down":
+			case "ArrowDown": {
+				if ($props.orientation === "vertical" && headerIndex < itemStates.length - 1) {
+					e.preventDefault();
+					itemStates[headerIndex + 1].setFocused();
+				}
+				break;
+			}
+			case "Home": {
+				if (headerIndex > 0) {
+					e.preventDefault();
+					itemStates[0].setFocused();
+				}
+				break;
+			}
+			case "End": {
+				if (headerIndex < itemStates.length - 1) {
+					e.preventDefault();
+					itemStates[itemStates.length - 1].setFocused();
+				}
+				break;
+			}
+		}
+	}
+
+	@render {
+		<div
+			id={$props.id}
+			class={`torp-tab-group ${$props.class ?? ""}`.trim()}
+			data-orientation={$props.orientation}
+		>
+			<:slot />
+		</div>
+	}
+}

package/dist/TabGroup/TabGroupTypes.ts

@@ -0,0 +1,39 @@
+export const TabGroupContextName = "TabGroup";
+export const TabItemContextName = "TabItem";
+
+export interface TabGroupContext {
+	/** Called from a header when it is added */
+	registerHeader: (index: number, value: string, setFocused: () => void) => ItemState;
+	/** Called from an item when it is added */
+	registerItem: (index: number, value: string) => ItemState;
+	/** Called from an item when it is removed */
+	removeItem: (index: number) => void;
+	/** Called from an item when it is triggered */
+	triggerItem: (value: string) => void;
+	/** Called from a TabHeader when it receives a keyboard event */
+	handleHeaderKey: (index: number, e: KeyboardEvent) => void;
+	orientation: "horizontal" | "vertical";
+	activation: "automatic" | "manual";
+}
+
+export interface TabItemContext {
+	/** Called when an item is triggered */
+	triggerItem: (value: string) => void;
+	/** Called when a TabHeader receives a keyboard event */
+	handleHeaderKey: (index: number, e: KeyboardEvent) => void;
+	/** The reactive state for an item */
+	state: ItemState;
+}
+
+export interface ItemState {
+	index: number;
+	value: string;
+	active: boolean;
+	headerId: string;
+	contentId: string;
+	disabled: boolean;
+	parentDisabled: boolean;
+	dataState: "active" | "inactive";
+	/** Called in the TabGroup when a header needs to be focused */
+	setFocused: () => void;
+}

package/dist/TabGroup/TabHeader.torp

@@ -0,0 +1,62 @@
+import { TabGroupContextName, TabItemContextName, type TabGroupContext, type TabItemContext } from "./TabGroupTypes";
+
+/**
+ * The header for a tab item, which contains the TabTrigger.
+ *
+ * The structure of a TabHeader is:
+ * 
+ * ```
+ * <TabHeader>
+ * 	<TabTrigger />
+ * </TabHeader>
+ * ```
+ *
+ * @prop {"h1" | "h2" | "h3" | "h4" | "h5" | "h6"} as -- The type of HTML header to use
+ */
+export default function TabHeader($props: any) {
+	const context = $context[TabGroupContextName] as TabGroupContext;
+	if (!context) {
+		throw new Error("TabHeader must be contained within a TabGroup");
+	}
+	let $state = $context[TabGroupContextName].registerHeader($props.index, $props.value);
+
+	const itemContext: TabItemContext = {
+		triggerItem: context.triggerItem,
+		handleHeaderKey: context.handleHeaderKey,
+		state: $state,
+	};
+	$context[TabItemContextName] = itemContext;
+
+	// Remove the item from the parent TabGroup when this item is destroyed
+	$run(() => {
+		return () => {
+			context.removeItem($state.index);
+		}
+	});
+
+	@render {
+		@// TODO: $props.as
+		<h4
+			id={$props.id}
+			:class={[
+				"torp-tab-header",
+				$props.class,
+				$state.orientation
+			]}
+			data-state={$state.dataState}
+			data-disabled={$state.dataDisabled}
+		>
+			<:slot />
+		</h4>
+	}
+
+	@style {
+		.torp-tab-header.horizontal {
+			display: inline-block;
+		}
+
+		.torp-tab-header.vertical {
+			display: block;
+		}
+	}
+}

package/dist/TabGroup/TabList.torp

@@ -0,0 +1,50 @@
+import { TabGroupContextName, TabItemContextName, type TabGroupContext, type TabItemContext } from "./TabGroupTypes";
+
+/**
+ * A component that holds the TabHeaders of a TabGroup.
+ * 
+ * The structure of a TabList is:
+ * 
+ * ```
+ * <TabList>
+ * 	<TabHeader>
+ * 		<TabTrigger />
+ * 	</TabHeader>
+ * </TabList>
+ * ```
+ *
+ * @prop {string} ariaLabel -- An ARIA label for describing the tab list to screen readers
+ */
+export default function TabList($props: any) {
+	// Get stuff out of the TabGroupContext
+	const context = $context[TabGroupContextName] as TabGroupContext;
+	if (!context) {
+		throw new Error("TabList must be contained within a TabGroup");
+	}
+	// TODO: const { orientation } = context;
+	const orientation = context.orientation;
+
+	function handleFocus(e: FocusEvent & { currentTarget: EventTarget & HTMLElement }) {
+		// TODO: Should this be the first button?
+		const el = e.currentTarget.childNodes[0];
+		if (el instanceof HTMLElement) {
+			el.focus();
+			e.preventDefault();
+		}
+	}
+
+	@render {
+		<div
+			id={$props.id}
+			class={`torp-tab-list ${$props.class ?? ""}`.trim()}
+			role="tablist"
+			aria-label={$props.ariaLabel}
+			aria-orientation={orientation}
+			data-orientation={orientation}
+			tabindex="0"
+			onfocus={handleFocus}
+		>
+			<:slot />
+		</div>
+	}
+}