@oscarpalmer/oui 0.36.0 → 0.38.0

package/dist/js/tabs.mjs

@@ -0,0 +1,237 @@
+import { OuiNavigable, getNavigableOrientation } from "./internal/navigable.mjs";
+import { getAria, setAria } from "@oscarpalmer/toretto/aria";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
+import { createElement } from "@oscarpalmer/toretto/create";
+//#region src/js/tabs.ts
+var OuiTabsEvent = class extends Event {
+	oldIndex;
+	newIndex;
+	constructor(name, oldIndex, newIndex, cancelable) {
+		super(name, {
+			cancelable,
+			bubbles: true,
+			composed: true
+		});
+		this.oldIndex = oldIndex;
+		this.newIndex = newIndex;
+	}
+};
+var OuiTabsElement = class extends HTMLElement {
+	static observedAttributes = ["active"];
+	#state;
+	get active() {
+		return this.#state?.active ?? 0;
+	}
+	set active(value) {
+		setActive(this.#state, value);
+	}
+	get panel() {
+		return this.#state?.panels.elements[this.active];
+	}
+	get tab() {
+		return this.#state?.tabList.tabs[this.active];
+	}
+	attributeChangedCallback(name, _, value) {
+		switch (name) {
+			case "active": setActive(this.#state, value);
+		}
+	}
+	connectedCallback() {
+		if (this.#state == null) this.#state = initializeTabs(this);
+		else attachTabs(this.#state);
+	}
+	disconnectedCallback() {
+		if (this.#state != null) detachTabs(this.#state);
+	}
+};
+function attachTabs(state) {
+	state.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);
+			if (index > -1 && index !== state.active) onActivate(state, index);
+		}
+	});
+	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, panels, active) {
+	const content = createElement("div", { attribute: { [`${TAGNAME}-content`]: "" } });
+	const { length } = panels;
+	const hidden = [];
+	const roles = [];
+	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, index, panel, label, selected) {
+	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, panels, labels, active) {
+	const element = createElement("div", {
+		attribute: { [`${TAGNAME}-tablist`]: "" },
+		property: { role: "tablist" }
+	});
+	const { length } = panels;
+	const tabs = [];
+	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) {
+	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, max) {
+	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() {
+	index += 1;
+	return `oui_tabs_${index}`;
+}
+function getLabels(panels) {
+	const labels = [];
+	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 = [];
+			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) {
+	const panels = [...element.querySelectorAll(SELECTOR_PANEL)];
+	if (panels.length === 0) throw new Error(MESSAGE_EMPTY);
+	const labels = getLabels(panels);
+	if (labels == null) throw new Error(MESSAGE_INVALID);
+	let id;
+	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 = {
+		active,
+		id,
+		orientation,
+		tabList,
+		content: content.element,
+		host: element,
+		panels: content.panels
+	};
+	attachTabs(state);
+	return state;
+}
+function onActivate(state, next) {
+	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, value) {
+	if (state == null) return;
+	const max = state.panels.elements.length - 1;
+	let index;
+	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);
+	}
+}
+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;
+customElements.define(TAGNAME, OuiTabsElement);
+//#endregion
+export { OuiTabsElement, OuiTabsEvent };

package/dist/js/tooltip.mjs

@@ -1,11 +1,11 @@
 import { createEmbeddedFloatable } from "./floatable/floatable.embedded.mjs";
 import { attributable } from "./internal/attributable.mjs";
 import { getAria } from "@oscarpalmer/toretto/aria";
-import { on } from "@oscarpalmer/toretto/event";
-import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
-import { findAncestor } from "@oscarpalmer/toretto/find";
 import { createElement } from "@oscarpalmer/toretto/create";
+import { on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 //#region src/js/tooltip.ts
 var OuiTooltip = class {
 	#state;
@@ -103,24 +103,25 @@ function findElements(attribute) {
 	return elements;
 }
 function getContent() {
-	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) {
 	let elements = findElements(getAria(anchor, "labelledby"));
 	if (elements == null || elements.length === 0) elements = findElements(getAria(anchor, "describedby"));
 	if (elements != null && elements.length > 0) return elements;
-	let text = getAria(anchor, "label");
-	if (isNullableOrWhitespace(text)) text = getAria(anchor, "description");
-	if (isNullableOrWhitespace(text)) return;
-	const paragraph = document.createElement("p");
-	paragraph.textContent = text;
-	return [paragraph];
+	let textContent = getAria(anchor, "label");
+	if (isNullableOrWhitespace(textContent)) textContent = getAria(anchor, "description");
+	if (isNullableOrWhitespace(textContent)) return;
+	return [createElement("p", { property: { textContent } })];
 }
 function getState(anchor, elements) {
 	const state = {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.36.0",
+	"version": "0.38.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",
@@ -91,15 +91,17 @@
 		"clean": "rm -rf ./dist && rm -rf ./postcss",
 		"css:build": "vp run postcss:build && vpx sass ./postcss:./dist/css --no-source-map",
 		"css:watch": "vpx sass ./postcss:./dist/css --no-source-map --watch",
-		"postcss:build": "vpx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss",
-		"postcss:watch": "vpx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss --watch",
+		"postcss:build": "vp run postcss:build:mixins && vp run postcss:build:styles",
+		"postcss:build:mixins": "vpx postcss ./src/css/mixins/*.scss -d ./postcss/mixins -u autoprefixer postcss-input-range --parser postcss-scss",
+		"postcss:build:styles": "vpx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss",
+		"postcss:watch": "vpx postcss ./src/css/**/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss --watch",
 		"test": "vpx vitest --coverage",
 		"tsdown": "vpx tsdown -c ./tsdown.config.ts --watch",
 		"watch": "vp run clean && concurrently \"php -S localhost:3000\" \"vp run postcss:watch\" \"vp run css:watch\" \"vp run tsdown\""
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.188.1",
-		"@oscarpalmer/toretto": "^0.51"
+		"@oscarpalmer/atoms": "^0.189.1",
+		"@oscarpalmer/toretto": "^0.52"
 	},
 	"devDependencies": {
 		"@oxlint/plugins": "^1.78",

package/src/css/a11y.scss

@@ -1,6 +1,6 @@
 /*! https://github.com/oscarpalmer/oui */
 
-@use './mixins' as mixins;
+@use './mixins/misc.mixins.scss' as miscMixins;
 
 .oui-vh {
 	:where(&) {
@@ -8,6 +8,6 @@
 	}
 
 	:where(&:not(:active, :focus, :focus-within)) {
-		@include mixins.visually-hidden;
+		@include miscMixins.visually-hidden;
 	}
 }

package/src/css/badge.scss

@@ -1,10 +1,10 @@
 /*! https://github.com/oscarpalmer/oui */
 
-@use './mixins.scss' as mixins;
+@use './mixins/badge.mixins.scss' as badgeMixins;
 
 .oui {
 	:where(&-pill, &-tag) {
-		@include mixins.badge;
+		@include badgeMixins.badge;
 	}
 
 	:where(&-pill) {
@@ -37,38 +37,26 @@
 	// Colors
 
 	:where(&-pill--blue, &-tag--blue) {
-		--oui-background: var(--oui-blue-0);
-		--oui-foreground: var(--oui-blue-8);
-		--oui-shadow: var(--oui-blue-6);
+		@include badgeMixins.badge-blue;
 	}
 
 	:where(&-pill--green, &-tag--green) {
-		--oui-background: var(--oui-green-0);
-		--oui-foreground: var(--oui-green-8);
-		--oui-shadow: var(--oui-green-6);
+		@include badgeMixins.badge-green;
 	}
 
 	:where(&-pill--orange, &-tag--orange) {
-		--oui-background: var(--oui-orange-0);
-		--oui-foreground: var(--oui-orange-8);
-		--oui-shadow: var(--oui-orange-6);
+		@include badgeMixins.badge-orange;
 	}
 
 	:where(&-pill--purple, &-tag--purple) {
-		--oui-background: var(--oui-purple-0);
-		--oui-foreground: var(--oui-purple-8);
-		--oui-shadow: var(--oui-purple-6);
+		@include badgeMixins.badge-purple;
 	}
 
 	:where(&-pill--red, &-tag--red) {
-		--oui-background: var(--oui-red-0);
-		--oui-foreground: var(--oui-red-8);
-		--oui-shadow: var(--oui-red-6);
+		@include badgeMixins.badge-red;
 	}
 
 	:where(&-pill--yellow, &-tag--yellow) {
-		--oui-background: var(--oui-yellow-0);
-		--oui-foreground: var(--oui-yellow-8);
-		--oui-shadow: var(--oui-yellow-6);
+		@include badgeMixins.badge-yellow;
 	}
 }

package/src/css/button.scss

@@ -1,46 +1,34 @@
 /*! https://github.com/oscarpalmer/oui */
 
-@use './mixins' as mixins;
+@use './mixins/button.mixins.scss' as buttonMixins;
 
 .oui-button {
 	:where(&) {
-		@include mixins.button;
+		@include buttonMixins.button;
 	}
 
 	:where(&--blue) {
-		--oui-background-value: var(--oui-blue-2);
-		--oui-foreground-value: var(--oui-blue-8);
-		--oui-outline-value: var(--oui-blue-6);
+		@include buttonMixins.button-blue;
 	}
 
 	:where(&--green) {
-		--oui-background-value: var(--oui-green-2);
-		--oui-foreground-value: var(--oui-green-8);
-		--oui-outline-value: var(--oui-green-6);
+		@include buttonMixins.button-green;
 	}
 
 	:where(&--orange) {
-		--oui-background-value: var(--oui-orange-2);
-		--oui-foreground-value: var(--oui-orange-8);
-		--oui-outline-value: var(--oui-orange-6);
+		@include buttonMixins.button-orange;
 	}
 
 	:where(&--purple) {
-		--oui-background-value: var(--oui-purple-2);
-		--oui-foreground-value: var(--oui-purple-8);
-		--oui-outline-value: var(--oui-purple-6);
+		@include buttonMixins.button-purple;
 	}
 
 	:where(&--red) {
-		--oui-background-value: var(--oui-red-2);
-		--oui-foreground-value: var(--oui-red-8);
-		--oui-outline-value: var(--oui-red-6);
+		@include buttonMixins.button-red;
 	}
 
 	:where(&--yellow) {
-		--oui-background-value: var(--oui-yellow-2);
-		--oui-foreground-value: var(--oui-yellow-8);
-		--oui-outline-value: var(--oui-yellow-6);
+		@include buttonMixins.button-yellow;
 	}
 
 	:where(&--rounded) {
@@ -59,31 +47,4 @@
 
 		font-size: 0.75em;
 	}
-
-	:where(&:focus-visible) {
-		--oui-outline-percentage: 75%;
-	}
-
-	@media (hover: hover) {
-		:where(&:not([disabled], [aria-disabled='true' i]):hover) {
-			--oui-background-percentage: 50%;
-			--oui-foreground-percentage: 25%;
-			--oui-shadow-percentage: 90%;
-		}
-	}
-
-	:where(&: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(&[disabled], &[aria-disabled='true' i]) {
-		--oui-background-percentage: 80%;
-		--oui-foreground-percentage: 20%;
-		--oui-shadow-percentage: 95%;
-
-		font-style: italic;
-	}
 }