@oscarpalmer/oui 0.36.0 → 0.37.0

package/dist/css/tabs.css

@@ -0,0 +1,103 @@
+
+:where(oui-tabs) {
+  display: flex;
+}
+:where(oui-tabs[orientation=horizontal i]) {
+  flex-flow: column nowrap;
+}
+:where(oui-tabs[orientation=vertical i]) {
+  flex-flow: row nowrap;
+}
+
+:where([oui-tabs-content]) {
+  padding: 1em;
+  flex: 1;
+  background-color: var(--oui-absolute);
+}
+:where(oui-tabs[orientation=horizontal i] > [oui-tabs-content]) {
+  border-radius: 0 0 0.5em 0.5em;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125), inset 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), inset 0 2px 4px -1px rgba(0, 0, 0, 0.05);
+}
+:where(oui-tabs[orientation=vertical i] > [oui-tabs-content]) {
+  border-radius: 0 0.5em 0.5em 0;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125), inset 1px 1px 2px -0.5px rgba(0, 0, 0, 0.05), inset 2px 2px 4px -1px rgba(0, 0, 0, 0.05);
+}
+
+:where([oui-tabs-tab]) {
+  --oui-background-percentage: 25%;
+  --oui-background-value: var(--oui-gray-2);
+  --oui-foreground-percentage: 0%;
+  --oui-foreground-value: var(--oui-gray-8);
+  --oui-outline-percentage: 100%;
+  --oui-outline-value: var(--oui-gray-6);
+  --oui-shadow-inset: color-mix(in oklab, var(--oui-absolute), transparent 75%);
+  --oui-shadow-percentage: 82.5%;
+  --oui-shadow-value: color-mix(
+  	in oklab,
+  	var(--oui-outline-value),
+  	transparent var(--oui-shadow-percentage)
+  );
+  box-shadow: inset 0 1px 0 0 var(--oui-shadow-inset), 0 0 0 1px var(--oui-shadow-value), 0 1px 2px -0.5px var(--oui-shadow-value), 0 2px 4px -1px var(--oui-shadow-value), 0 4px 8px -2px var(--oui-shadow-value);
+  padding: 0.5em 0.75em;
+  display: inline-flex;
+  flex-flow: row wrap;
+  gap: 0.75em;
+  align-items: center;
+  border-radius: 0.25em;
+  background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
+  outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
+  border: none;
+  color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
+  line-height: 1.25;
+  transition: 0.125s ease-in-out;
+  transition-property: background, outline, box-shadow, color;
+}
+:where([oui-tabs-tab]):focus-visible {
+  --oui-outline-percentage: 75%;
+}
+@media (hover: hover) {
+  :where([oui-tabs-tab]):not([disabled], [aria-disabled=true i]):hover {
+    --oui-background-percentage: 50%;
+    --oui-foreground-percentage: 25%;
+    --oui-shadow-percentage: 90%;
+  }
+}
+:where([oui-tabs-tab]):not([disabled], [aria-disabled=true i]):active {
+  box-shadow: 0 0 0 1px var(--oui-shadow-value), inset 0 1px 2px 0 var(--oui-shadow-value), inset 0 2px 4px 0 var(--oui-shadow-value);
+}
+:where([oui-tabs-tab])[disabled], :where([oui-tabs-tab])[aria-disabled=true i] {
+  --oui-background-percentage: 80%;
+  --oui-foreground-percentage: 25%;
+  --oui-shadow-percentage: 92.5%;
+  font-style: italic;
+}
+:where([oui-tabs-tab]) {
+  --oui-background-value: var(--oui-blue-3);
+  --oui-foreground-value: var(--oui-blue-8);
+  --oui-outline-value: var(--oui-blue-6);
+  font-size: 0.875rem;
+  align-self: flex-end;
+}
+:where([oui-tabs-tab][aria-selected=true i]) {
+  --oui-background-percentage: 80%;
+  box-shadow: 0 0 0 1px var(--oui-shadow-value), inset 0 1px 2px -0.5px var(--oui-shadow-value), inset 0 2px 4px -1px var(--oui-shadow-value);
+}
+
+:where([oui-tabs-tablist]) {
+  display: flex;
+  gap: 0.5em;
+}
+:where([oui-tabs-tablist][aria-orientation=horizontal i]) {
+  flex-flow: row nowrap;
+}
+:where([oui-tabs-tablist][aria-orientation=horizontal i] > [oui-tabs-tab]) {
+  border-radius: 0.25em 0.25em 0 0;
+}
+:where([oui-tabs-tablist][aria-orientation=vertical i]) {
+  flex-flow: column nowrap;
+}
+:where([oui-tabs-tablist][aria-orientation=vertical i] > [oui-tabs-tab]) {
+  border-radius: 0.25em 0 0 0.25em;
+}
+
+

package/dist/js/focus-trap/focus-trap.embedded.mjs

@@ -171,16 +171,12 @@ function onPointerdown(event) {
 function onTab(event) {
 	const element = findAncestor(event, SELECTOR);
 	const instance = instances.get(element);
-	if (instance == null) return;
-	const dispatched = dispatch(element, "focus-trap");
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) return;
-		if (!instance.disabled) event.preventDefault();
-		const elements = getFocusable(element);
-		const index = elements.indexOf(event.target);
-		if (index === -1 || elements.length === 0) tabToTrap(instance, elements, element);
-		else tabToElement(instance, elements, index, event.shiftKey ? -1 : 1);
-	});
+	if (instance == null || dispatch(element, "oui:focus-trap").defaultPrevented) return;
+	if (!instance.disabled) event.preventDefault();
+	const elements = getFocusable(element);
+	const index = elements.indexOf(event.target);
+	if (index === -1 || elements.length === 0) tabToTrap(instance, elements, element);
+	else tabToElement(instance, elements, index, event.shiftKey ? -1 : 1);
 }
 function removeFocusTrap(element) {
 	instances.get(element)?.destroy();

package/dist/js/index.d.mts

@@ -12,5 +12,6 @@ import { OuiListboxElement } from "./listbox/index.mjs";
 import { OuiPopover, getPopover } from "./popover.mjs";
 import "./sortable/sortable.standalone.mjs";
 import { OuiSplitterElement } from "./splitter.mjs";
+import { OuiTabsElement, OuiTabsEvent } from "./tabs.mjs";
 import { OuiTooltip, getTooltip, setTooltipDelay } from "./tooltip.mjs";
-export { type CreateOuiFloatableOptions, type CreateOuiDraggableOptions as CreateOuiMovableOptions, type CreateOuiDraggableOptions as CreateOuiSortableOptions, type CreateOuiResizableOptions, OuiComboboxElement, type OuiDialog, type OuiFloatable, type OuiFloatablePosition, type OuiFocusTrap, type OuiFocusTrapOptions, OuiListboxElement, type OuiMovable, type OuiPopover, type OuiResizable, type OuiSortable, OuiSplitterElement, type OuiTooltip, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setComboboxLocalizations, setListboxLocalizations, setTooltipDelay };
+export { type CreateOuiFloatableOptions, type CreateOuiDraggableOptions as CreateOuiMovableOptions, type CreateOuiDraggableOptions as CreateOuiSortableOptions, type CreateOuiResizableOptions, OuiComboboxElement, type OuiDialog, type OuiFloatable, type OuiFloatablePosition, type OuiFocusTrap, type OuiFocusTrapOptions, OuiListboxElement, type OuiMovable, type OuiPopover, type OuiResizable, type OuiSortable, OuiSplitterElement, OuiTabsElement, OuiTabsEvent, type OuiTooltip, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setComboboxLocalizations, setListboxLocalizations, setTooltipDelay };

package/dist/js/index.mjs

@@ -17,5 +17,6 @@ import "./resizable/resizable.standalone.mjs";
 import { createSortable } from "./sortable/sortable.embedded.mjs";
 import "./sortable/sortable.standalone.mjs";
 import { OuiSplitterElement } from "./splitter.mjs";
+import { OuiTabsElement, OuiTabsEvent } from "./tabs.mjs";
 import { getTooltip, setTooltipDelay } from "./tooltip.mjs";
-export { OuiComboboxElement, OuiListboxElement, OuiSplitterElement, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setComboboxLocalizations, setListboxLocalizations, setTooltipDelay };
+export { OuiComboboxElement, OuiListboxElement, OuiSplitterElement, OuiTabsElement, OuiTabsEvent, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setComboboxLocalizations, setListboxLocalizations, setTooltipDelay };

package/dist/js/internal/draggable.mjs

@@ -54,7 +54,7 @@ function addDraggable(element, options) {
 function cancelDrag(item) {
 	if (item == null) return;
 	item.state.options.drag.onCancel?.(globals, item);
-	dispatch(item.state.element, `${item.state.name}:cancel`, { detail: { element: item.state.options.getOrigin() } });
+	dispatch(item.state.element, `oui:${item.state.name}:cancel`, { detail: { element: item.state.options.getOrigin() } });
 	reset();
 }
 function destroyInstance(instance, state) {
@@ -130,26 +130,23 @@ function onPointerdown(event) {
 	};
 	globals.offset = item.state.options.position.getOffset(globals, item, element, position);
 	globals.original = item.state.options.position.getOriginal(globals, item, position);
-	const dispatched = dispatch(item.state.element, `${item.state.name}:begin`, { detail: {
+	if (dispatch(item.state.element, `oui:${item.state.name}:begin`, { detail: {
 		element,
 		position: { ...globals.original }
-	} });
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) {
-			item.state.options.drag.onCancel?.(globals, item);
-			reset();
-			return;
-		}
-		const next = getNextPosition(item, position);
-		setStyles(dragged, {
-			position: "fixed",
-			inset: `${next.y}px auto auto ${next.x}px`,
-			transform: "translate3d(0, 0, 0)"
-		});
-		item.state.options.drag.onBegin?.(event, globals, item, element, handle, next);
-		item.state.styling.set();
-		styleToggler.set();
+	} }).defaultPrevented) {
+		item.state.options.drag.onCancel?.(globals, item);
+		reset();
+		return;
+	}
+	const next = getNextPosition(item, position);
+	setStyles(dragged, {
+		position: "fixed",
+		inset: `${next.y}px auto auto ${next.x}px`,
+		transform: "translate3d(0, 0, 0)"
 	});
+	item.state.options.drag.onBegin?.(event, globals, item, element, handle, next);
+	item.state.styling.set();
+	styleToggler.set();
 }
 function onPointermove(event) {
 	if (current == null) return;
@@ -161,10 +158,7 @@ function onPointermove(event) {
 		calculated: next,
 		original: position
 	});
-	const dispatched = dispatch(current.state.element, `${current.state.name}:move`, { detail });
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) cancelDrag(current);
-	});
+	if (dispatch(current.state.element, `oui:${current.state.name}:move`, { detail }).defaultPrevented) cancelDrag(current);
 }
 function onPointerup(event) {
 	current?.state.options.drag.onEnd?.(event, globals, current, reset);

package/dist/js/internal/listbox/listbox.form.mjs

@@ -12,7 +12,7 @@ function updateListboxForm(state, values, emit) {
 	state.internals.setFormValue(value, JSON.stringify(values));
 	state.callbacks.data.onForm(state);
 	updateListboxValidity(state);
-	if (emit ?? true) dispatch(state.host, "change");
+	if (emit ?? true) dispatch(state.host, "oui:change");
 }
 function updateListboxValidity(state) {
 	if (state.autocomplete.none && !state.listbox) {

package/dist/js/internal/listbox/listbox.state.mjs

@@ -33,7 +33,7 @@ function initializeListboxState(state, states, onAttach) {
 	updateListboxForm(state, state.values.current, false);
 	updateListboxMessage(state);
 	updateListboxValueLabel(state);
-	if (state.options.selected.length > 0) updateListboxPreview("none", state, state.options.selected[0]);
+	if (state.options.selected.length > 0) updateListboxPreview("none", state, state.options.selected[0], false);
 	return state;
 }
 //#endregion

package/dist/js/internal/navigable.d.mts

@@ -8,24 +8,30 @@ declare class OuiNavigable {
   orientation: OuiNavigableOrientation;
   constructor(element: HTMLElement, options: OuiNavigableOptions);
   destroy(): void;
+  navigate(index: number, focus?: boolean): void;
 }
 type OuiNavigableActive = {
   element?: HTMLElement;
   index: number;
 };
+type OuiNavigableCallback<ReturnType> = (event: KeyboardEvent, navigable: OuiNavigable) => ReturnType;
 type OuiNavigableOptions = {
+  orientation?: OuiNavigableOrientation;
   role?: AriaRole;
   selector: string;
   vertical: boolean;
-  onDeactivate?: (event: KeyboardEvent, navigable: OuiNavigable) => void;
-  onPreventNavigation?: (event: KeyboardEvent, navigable: OuiNavigable) => boolean;
-  onShouldActivate?: (event: KeyboardEvent, navigable: OuiNavigable) => boolean;
-  onShouldDeactivate?: (event: KeyboardEvent, navigable: OuiNavigable) => boolean | undefined;
+  onActivate?: (navigable: OuiNavigable) => void;
+  onDeactivate?: OuiNavigableCallback<void>;
+  onNavigation?: (navigable: OuiNavigable) => void;
+  onPreventNavigation?: OuiNavigableCallback<boolean>;
+  onShouldActivate?: OuiNavigableCallback<boolean>;
+  onShouldDeactivate?: OuiNavigableCallback<boolean | undefined>;
 };
 type OuiNavigableOrientation = 'horizontal' | 'vertical';
 declare function getNavigable(element: HTMLElement, options: OuiNavigableOptions): OuiNavigable;
+declare function getNavigableOrientation(element: HTMLElement, vertical: boolean, aria?: boolean): OuiNavigableOrientation;
 declare function updateNavigableFocus(navigable: OuiNavigable, focus: boolean, items?: HTMLElement[]): void;
 declare const NAVIGABLE_KEYS_HORIZONTAL: Set<string>;
 declare const NAVIGABLE_KEYS_VERTICAL: Set<string>;
 //#endregion
-export { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, OuiNavigable, OuiNavigableOptions, getNavigable, updateNavigableFocus };
+export { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, OuiNavigable, OuiNavigableOptions, OuiNavigableOrientation, getNavigable, getNavigableOrientation, updateNavigableFocus };

package/dist/js/internal/navigable.mjs

@@ -1,5 +1,6 @@
-import { getAria, setRole } from "@oscarpalmer/toretto/aria";
-import { dispatch, on } from "@oscarpalmer/toretto/event";
+import { getAria, setAria, setRole } from "@oscarpalmer/toretto/aria";
+import { on } from "@oscarpalmer/toretto/event";
+import { getAttribute } from "@oscarpalmer/toretto/attribute";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import { clamp } from "@oscarpalmer/atoms/number";
 import { findAncestor } from "@oscarpalmer/toretto/find";
@@ -13,12 +14,19 @@ var OuiNavigable = class {
 	constructor(element, options) {
 		this.element = element;
 		this.options = options;
-		this.listeners = [on(element, "focusin", (event) => {
-			onFocusin(this, event);
-		}), on(element, "keydown", (event) => {
-			onKeydown(this, event);
-		}, { passive: false })];
-		this.orientation = getOrientation(element, options);
+		this.listeners = [
+			on(element, "click", (event) => {
+				onClick(this, event);
+			}, { passive: false }),
+			on(element, "focusin", (event) => {
+				onFocusin(this, event);
+			}),
+			on(element, "keydown", (event) => {
+				onKeydown(this, event);
+			}, { passive: false })
+		];
+		this.orientation = options?.orientation ?? getNavigableOrientation(element, options.vertical);
+		setAria(element, "orientation", this.orientation);
 		if (options.role != null) setRole(element, options.role);
 	}
 	destroy() {
@@ -27,6 +35,10 @@ var OuiNavigable = class {
 		this.active.element = void 0;
 		this.element = void 0;
 	}
+	navigate(index, focus) {
+		const items = getItems(this.element, this.options.selector);
+		if (index >= 0 && index < items.length) onNavigate(this, index, items, focus ?? false);
+	}
 };
 function getItems(container, selector) {
 	return [...container.querySelectorAll(selector)].filter(isValidItem);
@@ -34,13 +46,28 @@ function getItems(container, selector) {
 function getNavigable(element, options) {
 	return new OuiNavigable(element, options);
 }
-function getOrientation(element, options) {
-	const attribute = getAria(element, "orientation");
-	return ORIENTATIONS.has(attribute) ? attribute : options.vertical ? ORIENTATION_VERTICAL : ORIENTATION_HORIZONTAL;
+function getNavigableOrientation(element, vertical, aria) {
+	const attribute = aria ?? true ? getAria(element, "orientation") : getAttribute(element, "orientation");
+	return ORIENTATIONS.has(attribute) ? attribute : vertical ? ORIENTATION_VERTICAL : ORIENTATION_HORIZONTAL;
 }
 function isValidItem(element) {
 	return "disabled" in element ? element.disabled !== true : true;
 }
+function onClick(navigable, event) {
+	const item = findAncestor(event, navigable.options.selector);
+	const items = getItems(navigable.element, navigable.options.selector);
+	const index = items.indexOf(item);
+	if (index === -1) return;
+	if (index !== navigable.active.index) onNavigate(navigable, index, items, false);
+	navigable.options.onActivate?.(navigable);
+	item.focus();
+}
+function onNavigate(navigable, index, items, focus) {
+	navigable.active.element = items[index];
+	navigable.active.index = index;
+	updateNavigableFocus(navigable, focus, items);
+	navigable.options.onNavigation?.(navigable);
+}
 function onFocusin(navigable, event) {
 	const item = findAncestor(event, navigable.options.selector);
 	if (!isHTMLOrSVGElement(item) || !isValidItem(item)) return;
@@ -63,7 +90,10 @@ function onKeydown(navigable, event) {
 	const mustActivate = KEYS_ACTIVATE.has(event.key);
 	const shouldActivate = navigable.options.onShouldActivate?.(event, navigable) === true;
 	if (mustActivate || shouldActivate || navigable.options.onPreventNavigation?.(event, navigable) === true) event.stopPropagation();
-	if (mustActivate || shouldActivate) return;
+	if (mustActivate || shouldActivate) {
+		navigable.options.onActivate?.(navigable);
+		return;
+	}
 	const items = getItems(navigable.element, navigable.options.selector);
 	const { length } = items;
 	if (length === 0) return;
@@ -76,10 +106,7 @@ function onKeydown(navigable, event) {
 			index = clamp(navigable.active.index + (KEYS_NEXT.has(event.key) ? 1 : -1), 0, length - 1, true);
 		}
 	}
-	if (index == null || index === navigable.active.index) return;
-	navigable.active.element = items[index];
-	navigable.active.index = index;
-	updateNavigableFocus(navigable, true, items);
+	if (index != null && index !== navigable.active.index) onNavigate(navigable, index, items, true);
 }
 function updateNavigableFocus(navigable, focus, items) {
 	const updated = items ?? getItems(navigable.element, navigable.options.selector);
@@ -88,7 +115,6 @@ function updateNavigableFocus(navigable, focus, items) {
 	for (let index = 0; index < length; index += 1) updated[index].tabIndex = index === navigable.active.index ? 0 : -1;
 	navigable.active.element ??= updated[navigable.active.index];
 	if (focus) navigable.active.element?.focus();
-	dispatch(navigable.active.element, "navigable:change", { detail: { ...navigable.active } });
 }
 const KEYS_ABSOLUTE = /* @__PURE__ */ new Set(["End", "Home"]);
 const KEYS_ACTIVATE = /* @__PURE__ */ new Set(["Enter", " "]);
@@ -105,4 +131,4 @@ const ORIENTATION_HORIZONTAL = "horizontal";
 const ORIENTATION_VERTICAL = "vertical";
 const ORIENTATIONS = /* @__PURE__ */ new Set([ORIENTATION_HORIZONTAL, ORIENTATION_VERTICAL]);
 //#endregion
-export { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, OuiNavigable, getNavigable, updateNavigableFocus };
+export { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, OuiNavigable, getNavigable, getNavigableOrientation, updateNavigableFocus };

package/dist/js/movable/movable.embedded.mjs

@@ -110,14 +110,11 @@ function onEnd(event, globals, item, reset) {
 	}
 	const container = state.container?.getBoundingClientRect();
 	if (container != null) setOffset(state, container);
-	const dispatched = dispatch(state.element, "movable:end", { detail: {
+	if (dispatch(state.element, "oui:movable:end", { detail: {
 		from: { ...globals.original },
 		to: getEventPosition(event)
-	} });
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) onCancel(globals, item);
-		reset();
-	});
+	} }).defaultPrevented) onCancel(globals, item);
+	reset();
 }
 function onMove(_, globals, __, position) {
 	setAttribute(globals.element?.node, ATTRIBUTE_MOVING, "");

package/dist/js/resizable/resizable.embedded.mjs

@@ -49,7 +49,7 @@ function cancelResize(item) {
 		width: `${item.state.width}px`
 	});
 	resetResizable();
-	dispatch(item.state.element, "resizable:cancel");
+	dispatch(item.state.element, "oui:resizable:cancel");
 }
 /**
 * Creates _(or retrieves)_ a _OuiResizable_ instance for an element
@@ -130,14 +130,11 @@ function onPointerdown(event) {
 	const position = getEventPosition(event);
 	if (stored == null || position == null) return;
 	if (supportsTouch.value) event.preventDefault();
-	const dispatched = dispatch(element, "resizable:begin");
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) return;
-		current = stored;
-		start = position;
-		current.state.styles.set();
-		styleToggler.set();
-	});
+	if (dispatch(element, "oui:resizable:begin").defaultPrevented) return;
+	current = stored;
+	start = position;
+	current.state.styles.set();
+	styleToggler.set();
 }
 function onPointermove(event) {
 	if (current == null) return;
@@ -149,27 +146,20 @@ function onPointermove(event) {
 		height,
 		width
 	});
-	const dispatched = dispatch(current.state.element, "resizable:resize", { detail: {
+	if (dispatch(current.state.element, "oui:resizable:resize", { detail: {
 		height,
 		width
-	} });
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) cancelResize(current);
-	});
+	} }).defaultPrevented) cancelResize(current);
 }
 function onPointerup() {
-	if (current == null) return;
-	const dispatched = dispatch(current.state.element, "resizable:end");
-	setTimeout(() => {
-		if (current == null || dispatched.defaultPrevented) {
-			cancelResize(current);
-			return;
-		}
-		const { height, width } = current.state.element.getBoundingClientRect();
-		current.state.height = height;
-		current.state.width = width;
-		resetResizable();
-	});
+	if (current == null || dispatch(current.state.element, "oui:resizable:end").defaultPrevented) {
+		cancelResize(current);
+		return;
+	}
+	const { height, width } = current.state.element.getBoundingClientRect();
+	current.state.height = height;
+	current.state.width = width;
+	resetResizable();
 }
 function removeResizable(element) {
 	items.get(element)?.instance.destroy();

package/dist/js/splitter.mjs

@@ -6,6 +6,7 @@ import { setStyle, toggleStyles } from "@oscarpalmer/toretto/style";
 import { clamp } from "@oscarpalmer/atoms/number";
 import { findAncestor } from "@oscarpalmer/toretto/find";
 import supportsTouch from "@oscarpalmer/toretto/touch";
+import { createElement } from "@oscarpalmer/toretto/create";
 import { round } from "@oscarpalmer/atoms/math";
 //#region src/js/splitter.ts
 const ATTRIBUTE_MAX = "max";
@@ -135,21 +136,23 @@ var OuiSplitterElement = class extends HTMLElement {
 	}
 };
 function createHandle() {
-	const handle = document.createElement("span");
-	setAria(handle, "hidden", "true");
-	setAttribute(handle, ATTRIBUTE_HANDLE, "");
-	return handle;
+	return createElement("span", {
+		aria: { hidden: true },
+		attribute: { [ATTRIBUTE_HANDLE]: "" }
+	});
 }
 function createSeparator(splitter) {
-	const separator = document.createElement("div");
-	separator.role = "separator";
-	separator.tabIndex = 0;
-	setAria(separator, {
-		controls: splitter.element.id,
-		label: "Resize panels"
+	return createElement("div", {
+		aria: {
+			controls: splitter.element.id,
+			label: "Resize panels"
+		},
+		attribute: { [ATTRIBUTE_SEPARATOR]: "" },
+		property: {
+			role: "separator",
+			tabIndex: 0
+		}
 	});
-	setAttribute(separator, ATTRIBUTE_SEPARATOR, "");
-	return separator;
 }
 function getContained(min, value, max) {
 	return round(clamp(value, min, max), VALUE_DECIMALS);

package/dist/js/tabs.d.mts

@@ -0,0 +1,25 @@
+//#region src/js/tabs.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    [TAGNAME]: OuiTabsElement;
+  }
+}
+declare class OuiTabsEvent extends Event {
+  oldIndex: number;
+  newIndex: number;
+  constructor(name: 'oui:beforechange' | 'oui:change', oldIndex: number, newIndex: number, cancelable: boolean);
+}
+declare class OuiTabsElement extends HTMLElement {
+  #private;
+  static observedAttributes: string[];
+  get active(): number;
+  set active(value: number);
+  get panel(): HTMLElement;
+  get tab(): HTMLButtonElement;
+  attributeChangedCallback(name: string, _: string | null, value: string | null): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+}
+declare const TAGNAME = "oui-tabs";
+//#endregion
+export { OuiTabsElement, OuiTabsEvent };