@oscarpalmer/oui 0.36.0 → 0.38.0

package/src/js/tabs.ts

@@ -0,0 +1,441 @@
+import {getAria, setAria} from '@oscarpalmer/toretto/aria';
+import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
+import {createElement} from '@oscarpalmer/toretto/create';
+import {
+	getNavigableOrientation,
+	OuiNavigable,
+	type OuiNavigableOrientation,
+} from './internal/navigable';
+
+// #region Types
+
+declare global {
+	interface HTMLElementTagNameMap {
+		[TAGNAME]: OuiTabsElement;
+	}
+}
+
+export class OuiTabsEvent extends Event {
+	constructor(
+		name: 'oui:beforechange' | 'oui:change',
+		public oldIndex: number,
+		public newIndex: number,
+		cancelable: boolean,
+	) {
+		super(name, {
+			cancelable,
+			bubbles: true,
+			composed: true,
+		});
+	}
+}
+
+type OuiTabsContent = {
+	element: HTMLDivElement;
+	panels: OuiTabsPanels;
+};
+
+export class OuiTabsElement extends HTMLElement {
+	static observedAttributes = ['active'];
+
+	#state?: OuiTabsState;
+
+	get active(): number {
+		return this.#state?.active ?? 0;
+	}
+
+	set active(value: number) {
+		setActive(this.#state, value);
+	}
+
+	get panel(): HTMLElement {
+		return this.#state?.panels.elements[this.active] as HTMLElement;
+	}
+
+	get tab(): HTMLButtonElement {
+		return this.#state?.tabList.tabs[this.active] as HTMLButtonElement;
+	}
+
+	attributeChangedCallback(name: string, _: string | null, value: string | null): void {
+		switch (name) {
+			case 'active':
+				setActive(this.#state, value);
+				break;
+
+			default:
+				break;
+		}
+	}
+
+	connectedCallback(): void {
+		if (this.#state == null) {
+			this.#state = initializeTabs(this);
+		} else {
+			attachTabs(this.#state);
+		}
+	}
+
+	disconnectedCallback(): void {
+		if (this.#state != null) {
+			detachTabs(this.#state);
+		}
+	}
+}
+
+type OuiTabsPanels = {
+	elements: HTMLElement[];
+	hidden: Array<boolean | 'until-found'>;
+	roles: Array<string | null>;
+};
+
+type OuiTabsState = {
+	active: number;
+	content: HTMLDivElement;
+	host: OuiTabsElement;
+	id: string;
+	navigable?: OuiNavigable;
+	orientation: OuiNavigableOrientation;
+	panels: OuiTabsPanels;
+	tabList: OuiTabsTabList;
+};
+
+type OuiTabsTabList = {
+	element: HTMLDivElement;
+	tabs: HTMLButtonElement[];
+};
+
+// #endregion
+
+// #region Functions
+
+function attachTabs(state: OuiTabsState): void {
+	const navigable = new OuiNavigable(state.tabList.element, {
+		orientation: state.orientation,
+		selector: SELECTOR_TAB,
+		vertical: false,
+		onActivate: navigable => {
+			const index = state.tabList.tabs.indexOf(navigable.active.element as HTMLButtonElement);
+
+			if (index > -1 && index !== state.active) {
+				onActivate(state, index);
+			}
+		},
+	});
+
+	state.navigable = navigable;
+
+	const {length} = state.panels.elements;
+
+	for (let index = 0; index < length; index += 1) {
+		const panel = state.panels.elements[index];
+
+		panel.hidden = index !== state.active;
+		panel.role = 'tabpanel';
+
+		if (index === 0) {
+			panel.insertAdjacentElement('beforebegin', state.tabList.element);
+			panel.insertAdjacentElement('beforebegin', state.content);
+		}
+
+		state.content.append(panel);
+	}
+}
+
+function createContent(prefix: string, panels: HTMLElement[], active: number): OuiTabsContent {
+	const content = createElement('div', {
+		attribute: {
+			[`${TAGNAME}-content`]: '',
+		},
+	});
+
+	const {length} = panels;
+
+	const hidden: Array<boolean | 'until-found'> = [];
+	const roles: Array<string | null> = [];
+
+	for (let index = 0; index < length; index += 1) {
+		const panel = panels[index];
+
+		hidden.push(panel.hidden);
+		roles.push(panel.role);
+
+		panel.hidden = index !== active;
+
+		if (panel.id === '') {
+			panel.id = `${prefix}_panel_${index}`;
+		}
+	}
+
+	return {
+		element: content,
+		panels: {
+			hidden,
+			roles,
+			elements: panels,
+		},
+	};
+}
+
+function createTab(
+	prefix: string,
+	index: number,
+	panel: HTMLElement,
+	label: string,
+	selected: boolean,
+): HTMLButtonElement {
+	return createElement('button', {
+		aria: {
+			selected,
+			controls: panel.id,
+		},
+		attribute: {
+			[`${TAGNAME}-tab`]: '',
+		},
+		property: {
+			id: `${prefix}_tab_${index}`,
+			role: 'tab',
+			tabIndex: selected ? 0 : -1,
+			textContent: label,
+			type: 'button',
+		},
+	});
+}
+
+function createTabList(
+	prefix: string,
+	panels: HTMLElement[],
+	labels: string[],
+	active: number,
+): OuiTabsTabList {
+	const element = createElement('div', {
+		attribute: {
+			[`${TAGNAME}-tablist`]: '',
+		},
+		property: {
+			role: 'tablist',
+		},
+	});
+
+	const {length} = panels;
+
+	const tabs: HTMLButtonElement[] = [];
+
+	for (let index = 0; index < length; index += 1) {
+		const tab = createTab(prefix, index, panels[index], labels[index], index === active);
+
+		element.append(tab);
+		tabs.push(tab);
+	}
+
+	return {
+		element,
+		tabs,
+	};
+}
+
+function detachTabs(state: OuiTabsState): void {
+	state.navigable?.destroy();
+
+	const {length} = state.panels.elements;
+
+	for (let index = 0; index < length; index += 1) {
+		const panel = state.panels.elements[index];
+
+		panel.hidden = state.panels.hidden[index];
+		panel.role = state.panels.roles[index];
+
+		state.content.before(panel);
+	}
+
+	state.tabList.element.remove();
+	state.content.remove();
+}
+
+function getActive(element: OuiTabsElement, max: number): number {
+	const attribute = getAttribute(element, 'active');
+
+	let index = 0;
+
+	if (attribute != null) {
+		const value = Number.parseInt(attribute, 10);
+
+		if (!Number.isNaN(value) && value >= 0) {
+			index = value > max ? max : value;
+		}
+	}
+
+	return index;
+}
+
+function getId(): string {
+	index += 1;
+
+	return `oui_tabs_${index}`;
+}
+
+function getLabels(panels: HTMLElement[]): string[] | undefined {
+	const labels: string[] = [];
+
+	const {length} = panels;
+
+	for (let index = 0; index < length; index += 1) {
+		const panel = panels[index];
+
+		const labelledBy = getAria(panel, 'labelledby');
+
+		if (typeof labelledBy === 'string' && labelledBy.trim().length > 0) {
+			const label: string[] = [];
+			const selectors = labelledBy.split(/\s+/);
+
+			for (const selector of selectors) {
+				const element = document.getElementById(selector);
+
+				if (element == null) {
+					return;
+				}
+
+				label.push(element.textContent);
+			}
+
+			labels.push(label.join(' '));
+
+			continue;
+		}
+
+		const label = getAria(panel, 'label');
+
+		if (typeof label === 'string' && label.trim().length > 0) {
+			labels.push(label);
+
+			continue;
+		}
+
+		return;
+	}
+
+	return labels;
+}
+
+function initializeTabs(element: OuiTabsElement): OuiTabsState {
+	const panels = [...element.querySelectorAll(SELECTOR_PANEL)] as HTMLElement[];
+
+	if (panels.length === 0) {
+		throw new Error(MESSAGE_EMPTY);
+	}
+
+	const labels = getLabels(panels);
+
+	if (labels == null) {
+		throw new Error(MESSAGE_INVALID);
+	}
+
+	let id: string;
+
+	if (element.id === '') {
+		id = getId();
+	} else {
+		id = element.id;
+	}
+
+	const active = getActive(element, panels.length - 1);
+	const orientation = getNavigableOrientation(element, false, false);
+
+	const content = createContent(id, panels, active);
+	const tabList = createTabList(id, panels, labels, active);
+
+	const state: OuiTabsState = {
+		active,
+		id,
+		orientation,
+		tabList,
+		content: content.element,
+		host: element,
+		panels: content.panels,
+	};
+
+	attachTabs(state);
+
+	return state;
+}
+
+function onActivate(state: OuiTabsState, next: number): void {
+	const current = state.active;
+
+	const event = new OuiTabsEvent('oui:beforechange', current, next, true);
+
+	state.host.dispatchEvent(event);
+
+	if (event.defaultPrevented) {
+		return;
+	}
+
+	state.active = next;
+
+	const {length} = state.panels.elements;
+
+	for (let index = 0; index < length; index += 1) {
+		const panel = state.panels.elements[index];
+
+		panel.hidden = index !== next;
+
+		setAria(state.tabList.tabs[index], 'selected', index === next);
+	}
+
+	setAttribute(state.host, 'active', next);
+
+	state.host.dispatchEvent(new OuiTabsEvent('oui:change', current, next, false));
+}
+
+function setActive(state: OuiTabsState | undefined, value: unknown): void {
+	if (state == null) {
+		return;
+	}
+
+	const max = state.panels.elements.length - 1;
+
+	let index: number | undefined;
+
+	if (typeof value === 'number' && !Number.isNaN(value) && value >= 0) {
+		index = value > max ? max : value;
+	} else if (typeof value === 'string') {
+		const parsed = Number.parseInt(value, 10);
+
+		if (!Number.isNaN(parsed) && parsed >= 0) {
+			index = parsed > max ? max : parsed;
+		}
+	}
+
+	if (index == null) {
+		setAttribute(state.host, 'active', state.active);
+	} else if (index !== state.active) {
+		state.navigable?.navigate(index, false);
+
+		onActivate(state, index);
+	}
+}
+
+// #endregion
+
+// #region Variables
+
+const TAGNAME = 'oui-tabs';
+
+const ATTRIBUTE_PANEL = `${TAGNAME}-panel`;
+
+const MESSAGE_EMPTY = `<${TAGNAME}> must contain at least one [${ATTRIBUTE_PANEL}] child element`;
+
+const MESSAGE_INVALID = `A [${ATTRIBUTE_PANEL}] child element of <${TAGNAME}> must have a valid 'aria-label' or 'aria-labelledby' attribute`;
+
+const SELECTOR_PANEL = `:scope > [${ATTRIBUTE_PANEL}]`;
+
+const SELECTOR_TAB = `[${TAGNAME}-tab]`;
+
+let index = 0;
+
+// #endregion
+
+// #region Initialization
+
+customElements.define(TAGNAME, OuiTabsElement);
+
+// #endregion

package/src/js/tooltip.ts

@@ -182,15 +182,16 @@ function findElements(attribute?: string): HTMLElement[] | undefined {
 }
 
 function getContent(): HTMLElement {
-	const content = createElement('div', {
-		popover: 'hint',
-		role: 'tooltip',
-		tabIndex: -1,
+	return createElement('div', {
+		attribute: {
+			[ATTRIBUTE_CONTENT]: '',
+			popover: 'hint',
+		},
+		property: {
+			role: 'tooltip',
+			tabIndex: -1,
+		},
 	});
-
-	setAttribute(content, ATTRIBUTE_CONTENT, '');
-
-	return content;
 }
 
 function getElements(anchor: HTMLElement): HTMLElement[] | undefined {
@@ -204,21 +205,23 @@ function getElements(anchor: HTMLElement): HTMLElement[] | undefined {
 		return elements as HTMLElement[];
 	}
 
-	let text = getAria(anchor, 'label');
+	let textContent = getAria(anchor, 'label');
 
-	if (isNullableOrWhitespace(text)) {
-		text = getAria(anchor, 'description');
+	if (isNullableOrWhitespace(textContent)) {
+		textContent = getAria(anchor, 'description');
 	}
 
-	if (isNullableOrWhitespace(text)) {
+	if (isNullableOrWhitespace(textContent)) {
 		return;
 	}
 
-	const paragraph = document.createElement('p');
-
-	paragraph.textContent = text;
-
-	return [paragraph];
+	return [
+		createElement('p', {
+			property: {
+				textContent,
+			},
+		}),
+	];
 }
 
 function getState(anchor: HTMLElement, elements: HTMLElement[]): OuiTooltipState {

package/src/css/mixins.scss

@@ -1,194 +0,0 @@
-@mixin badge() {
-	--oui-shadow-mixed: color-mix(in oklab, var(--oui-shadow, var(--oui-gray-6)), transparent 92.5%);
-
-	@include shadow(var(--oui-shadow-mixed));
-
-	display: inline-flex;
-	flex-flow: row nowrap;
-	gap: 0.5em;
-	background-color: color-mix(in oklab, var(--oui-background, var(--oui-gray-0)), transparent 25%);
-	color: var(--oui-foreground, var(--oui-gray-8));
-	line-height: 1.25;
-}
-
-@mixin button() {
-	--oui-background-percentage: 25%;
-	--oui-foreground-percentage: 0%;
-	--oui-outline-percentage: 100%;
-	--oui-shadow-inset: color-mix(in oklab, white, transparent 75%);
-	--oui-shadow-percentage: 82.5%;
-
-	--oui-shadow-value: color-mix(
-		in oklab,
-		var(--oui-outline-value, var(--oui-gray-6)),
-		transparent var(--oui-shadow-percentage)
-	);
-
-	@include shadow(var(--oui-shadow-value), var(--oui-shadow-inset));
-
-	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, var(--oui-gray-2)),
-		transparent var(--oui-background-percentage)
-	);
-	outline: 4px solid
-		color-mix(
-			in oklab,
-			var(--oui-outline-value, var(--oui-gray-6)),
-			transparent var(--oui-outline-percentage)
-		);
-	border: none;
-	color: color-mix(
-		in oklab,
-		var(--oui-foreground-value, var(--oui-gray-8)),
-		transparent var(--oui-foreground-percentage)
-	);
-	line-height: 1.25;
-	transition: 0.125s ease-in-out;
-}
-
-@mixin card(
-	$backgroundColor: var(--oui-absolute),
-	$boxShadowColor: color-mix(in oklab, var(--oui-gray-6), transparent 92.5%)
-) {
-	@include shadow($boxShadowColor);
-
-	padding: 1em 1.25em;
-	background-color: $backgroundColor;
-	border-radius: 0.5em;
-}
-
-@mixin floatable() {
-	--margin-bottom: 0.5em;
-	--margin-left: 0.5em;
-	--margin-right: 0.5em;
-	--margin-top: 0.5em;
-
-	inset-block: var(--margin-top) var(--margin-bottom);
-	inset-inline: var(--margin-left) var(--margin-right);
-
-	&[oui-position$='bottom'] {
-		--margin-bottom: 0;
-	}
-
-	&[oui-position$='end'] {
-		--margin-right: 0;
-	}
-
-	&[oui-position$='start'] {
-		--margin-left: 0;
-	}
-
-	&[oui-position$='top'] {
-		--margin-top: 0;
-	}
-}
-
-@mixin input {
-	--oui-background-percentage: 0%;
-	--oui-foreground-percentage: 0%;
-
-	@include input-outlined;
-
-	align-content: center;
-	background-color: color-mix(
-		in oklab,
-		var(--oui-background-value),
-		transparent var(--oui-background-percentage)
-	);
-	border: 1px solid var(--oui-border-value, var(--oui-gray-3));
-	box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
-	color: color-mix(
-		in oklab,
-		var(--oui-foreground-value, inherit),
-		transparent var(--oui-foreground-percentage)
-	);
-	-webkit-text-fill-color: color-mix(
-		in oklab,
-		var(--oui-foreground-value, inherit),
-		transparent var(--oui-foreground-percentage)
-	);
-}
-
-@mixin input-focus() {
-	--oui-border-value: var(--oui-blue-5);
-	--oui-foreground-value: inherit;
-	--oui-outline-percentage: 75%;
-	--oui-outline-value: var(--oui-blue-6);
-}
-
-@mixin input-hover() {
-	--oui-border-value: var(--oui-blue-4);
-	--oui-foreground-percentage: 0%;
-	--oui-foreground-value: inherit;
-	--oui-outline-percentage: 90%;
-	--oui-outline-value: var(--oui-blue-6);
-}
-
-@mixin input-invalid() {
-	--oui-border-value: var(--oui-red-5);
-	--oui-foreground-value: var(--oui-red-9);
-	--oui-outline-percentage: 82.5%;
-	--oui-outline-value: var(--oui-red-6);
-}
-
-@mixin input-outlined {
-	--oui-outline-percentage: 100%;
-	--oui-outline-value: var(--oui-blue-6);
-
-	outline: 4px solid
-		color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
-	outline-offset: 0;
-	transition: 0.125s ease-in-out;
-}
-
-@mixin input-valid() {
-	--oui-border-value: var(--oui-green-5);
-	--oui-foreground-value: var(--oui-green-9);
-	--oui-outline-percentage: 82.5%;
-	--oui-outline-value: var(--oui-green-6);
-}
-
-@mixin shadow($color: rgb(0 0 0 / 5%), $inset: transparent) {
-	box-shadow:
-		inset 0 1px 0 0 $inset,
-		0 0 0 1px $color,
-		0 1px 2px -0.5px $color,
-		0 2px 4px -1px $color;
-}
-
-@mixin shadow-overlay($color: rgb(0 0 0 / 5%), $inset: transparent) {
-	box-shadow:
-		inset 0 1px 0 0 $inset,
-		0 0 0 1px $color,
-		0 1px 2px -0.5px $color,
-		0 2px 4px -1px $color,
-		0 4px 8px -2px $color,
-		0 8px 16px -4px $color,
-		0 16px 32px -8px $color,
-		0 32px 64px -16px $color,
-		0 64px 128px -32px $color;
-}
-
-@mixin shadow-small($color: rgb(0 0 0 / 5%), $inset: transparent) {
-	box-shadow:
-		inset 0 1px 0 0 $inset,
-		0 0 0 1px $color,
-		0 1px 2px -0.5px $color;
-}
-
-@mixin visually-hidden() {
-	width: 1px !important;
-	height: 1px !important;
-	padding: 0 !important;
-	clip-path: inset(50%) !important;
-	overflow: hidden !important;
-	border: 0 !important;
-	white-space: nowrap !important;
-}