@oscarpalmer/oui 0.36.0 → 0.37.0

package/dist/js/tabs.mjs

@@ -0,0 +1,240 @@
+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: { [ATTRIBUTE_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: { [ATTRIBUTE_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: { [ATTRIBUTE_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_CONTENT = `${TAGNAME}-content`;
+const ATTRIBUTE_PANEL = `${TAGNAME}-panel`;
+const ATTRIBUTE_TAB = `${TAGNAME}-tab`;
+const ATTRIBUTE_TABLIST = `${TAGNAME}-tablist`;
+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 = `[${ATTRIBUTE_TAB}]`;
+let index = 0;
+customElements.define(TAGNAME, OuiTabsElement);
+//#endregion
+export { OuiTabsElement, OuiTabsEvent };

package/dist/js/tooltip.mjs

@@ -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.37.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",

package/src/css/badge.scss

@@ -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 mixins.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 mixins.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 mixins.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 mixins.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 mixins.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 mixins.badge-yellow;
 	}
 }

package/src/css/button.scss

@@ -8,39 +8,27 @@
 	}
 
 	:where(&--blue) {
-		--oui-background-value: var(--oui-blue-2);
-		--oui-foreground-value: var(--oui-blue-8);
-		--oui-outline-value: var(--oui-blue-6);
+		@include mixins.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 mixins.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 mixins.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 mixins.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 mixins.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 mixins.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;
-	}
 }

package/src/css/color.scss

@@ -17,8 +17,8 @@
 	--oui-blue-9: light-dark(oklch(35% 0.1 251deg), oklch(90% 0.03 259deg));
 	--oui-blue-10: light-dark(oklch(30% 0.09 250deg), oklch(95% 0.02 260deg));
 
-	--oui-green-0: light-dark(oklch(99% 0.01 150deg), oklch(20% 0.08 140deg));
-	--oui-green-1: light-dark(oklch(98% 0.02 149deg), oklch(25% 0.09 141deg));
+	--oui-green-0: light-dark(oklch(99.5% 0.01 150deg), oklch(20% 0.08 140deg));
+	--oui-green-1: light-dark(oklch(98.25% 0.02 149deg), oklch(25% 0.09 141deg));
 	--oui-green-2: light-dark(oklch(95% 0.03 148deg), oklch(32% 0.1 142deg));
 	--oui-green-3: light-dark(oklch(90% 0.04 147deg), oklch(40% 0.09 143deg));
 	--oui-green-4: light-dark(oklch(80% 0.06 146deg), oklch(50% 0.08 144deg));
@@ -29,11 +29,11 @@
 	--oui-green-9: light-dark(oklch(35% 0.1 141deg), oklch(90% 0.03 149deg));
 	--oui-green-10: light-dark(oklch(30% 0.09 140deg), oklch(95% 0.02 150deg));
 
-	--oui-orange-0: light-dark(oklch(99% 0.02 60deg), oklch(20% 0.08 50deg));
-	--oui-orange-1: light-dark(oklch(98.5% 0.035 59deg), oklch(25% 0.09 51deg));
-	--oui-orange-2: light-dark(oklch(97% 0.05 58deg), oklch(32% 0.1 52deg));
-	--oui-orange-3: light-dark(oklch(93% 0.07 57deg), oklch(40% 0.09 53deg));
-	--oui-orange-4: light-dark(oklch(87% 0.1 56deg), oklch(50% 0.08 54deg));
+	--oui-orange-0: light-dark(oklch(99.5% 0.02 60deg), oklch(20% 0.08 50deg));
+	--oui-orange-1: light-dark(oklch(98.75% 0.035 59deg), oklch(25% 0.09 51deg));
+	--oui-orange-2: light-dark(oklch(97.5% 0.05 58deg), oklch(32% 0.1 52deg));
+	--oui-orange-3: light-dark(oklch(93.25% 0.07 57deg), oklch(40% 0.09 53deg));
+	--oui-orange-4: light-dark(oklch(87.125% 0.1 56deg), oklch(50% 0.08 54deg));
 	--oui-orange-5: light-dark(oklch(76% 0.11 55deg), oklch(60% 0.07 55deg));
 	--oui-orange-6: light-dark(oklch(65% 0.12 54deg), oklch(70% 0.06 56deg));
 	--oui-orange-7: light-dark(oklch(55% 0.14 53deg), oklch(80% 0.05 57deg));
@@ -41,8 +41,8 @@
 	--oui-orange-9: light-dark(oklch(37.5% 0.11 51deg), oklch(90% 0.03 59deg));
 	--oui-orange-10: light-dark(oklch(30% 0.09 50deg), oklch(95% 0.02 60deg));
 
-	--oui-purple-0: light-dark(oklch(99% 0.02 300deg), oklch(20% 0.08 290deg));
-	--oui-purple-1: light-dark(oklch(98% 0.035 299deg), oklch(25% 0.09 291deg));
+	--oui-purple-0: light-dark(oklch(99.5% 0.02 300deg), oklch(20% 0.08 290deg));
+	--oui-purple-1: light-dark(oklch(98.25% 0.035 299deg), oklch(25% 0.09 291deg));
 	--oui-purple-2: light-dark(oklch(95% 0.05 298deg), oklch(32% 0.1 292deg));
 	--oui-purple-3: light-dark(oklch(90% 0.07 297deg), oklch(40% 0.09 293deg));
 	--oui-purple-4: light-dark(oklch(80% 0.1 296deg), oklch(50% 0.08 294deg));
@@ -53,11 +53,11 @@
 	--oui-purple-9: light-dark(oklch(35% 0.11 291deg), oklch(90% 0.03 299deg));
 	--oui-purple-10: light-dark(oklch(30% 0.09 290deg), oklch(95% 0.02 300deg));
 
-	--oui-red-0: light-dark(oklch(99% 0.024 25deg), oklch(20% 0.08 25deg));
-	--oui-red-1: light-dark(oklch(98.5% 0.032 24deg), oklch(25% 0.09 24deg));
-	--oui-red-2: light-dark(oklch(97% 0.05 23deg), oklch(32% 0.1 23deg));
-	--oui-red-3: light-dark(oklch(93% 0.07 22deg), oklch(40% 0.09 22deg));
-	--oui-red-4: light-dark(oklch(87% 0.1 21deg), oklch(50% 0.08 21deg));
+	--oui-red-0: light-dark(oklch(99.5% 0.024 25deg), oklch(20% 0.08 25deg));
+	--oui-red-1: light-dark(oklch(98.75% 0.032 24deg), oklch(25% 0.09 24deg));
+	--oui-red-2: light-dark(oklch(97.5% 0.05 23deg), oklch(32% 0.1 23deg));
+	--oui-red-3: light-dark(oklch(93.25% 0.07 22deg), oklch(40% 0.09 22deg));
+	--oui-red-4: light-dark(oklch(87.125% 0.1 21deg), oklch(50% 0.08 21deg));
 	--oui-red-5: light-dark(oklch(76% 0.11 20deg), oklch(60% 0.07 20deg));
 	--oui-red-6: light-dark(oklch(65% 0.12 19deg), oklch(70% 0.06 19deg));
 	--oui-red-7: light-dark(oklch(55% 0.14 18deg), oklch(80% 0.05 18deg));
@@ -65,10 +65,10 @@
 	--oui-red-9: light-dark(oklch(37.5% 0.11 16deg), oklch(90% 0.03 16deg));
 	--oui-red-10: light-dark(oklch(30% 0.09 15deg), oklch(95% 0.02 15deg));
 
-	--oui-yellow-0: light-dark(oklch(99% 0.02 100deg), oklch(20% 0.08 90deg));
+	--oui-yellow-0: light-dark(oklch(99.5% 0.02 100deg), oklch(20% 0.08 90deg));
 	--oui-yellow-1: light-dark(oklch(98.5% 0.035 99deg), oklch(25% 0.09 91deg));
-	--oui-yellow-2: light-dark(oklch(97% 0.05 98deg), oklch(32% 0.1 92deg));
-	--oui-yellow-3: light-dark(oklch(93% 0.07 97deg), oklch(40% 0.09 93deg));
+	--oui-yellow-2: light-dark(oklch(97.25% 0.05 98deg), oklch(32% 0.1 92deg));
+	--oui-yellow-3: light-dark(oklch(93.125% 0.07 97deg), oklch(40% 0.09 93deg));
 	--oui-yellow-4: light-dark(oklch(87% 0.1 96deg), oklch(50% 0.08 94deg));
 	--oui-yellow-5: light-dark(oklch(78% 0.11 95deg), oklch(60% 0.07 95deg));
 	--oui-yellow-6: light-dark(oklch(65% 0.12 94deg), oklch(70% 0.06 96deg));
@@ -78,7 +78,7 @@
 	--oui-yellow-10: light-dark(oklch(30% 0.09 90deg), oklch(95% 0.02 100deg));
 
 	--oui-gray-0: light-dark(oklch(98% 0 0deg), oklch(22% 0 0deg));
-	--oui-gray-1: light-dark(oklch(98% 0 0deg), oklch(26% 0 0deg));
+	--oui-gray-1: light-dark(oklch(97% 0 0deg), oklch(26% 0 0deg));
 	--oui-gray-2: light-dark(oklch(95% 0 0deg), oklch(32% 0 0deg));
 	--oui-gray-3: light-dark(oklch(90% 0 0deg), oklch(40% 0 0deg));
 	--oui-gray-4: light-dark(oklch(80% 0 0deg), oklch(50% 0 0deg));
@@ -101,8 +101,8 @@
 	--oui-slate-9: light-dark(oklch(35% 0.0075 255deg), oklch(90% 0.0075 255deg));
 	--oui-slate-10: light-dark(oklch(30% 0.005 255deg), oklch(95% 0.005 255deg));
 
-	--oui-stone-0: light-dark(oklch(99% 0.0033 95deg), oklch(22% 0.005 95deg));
-	--oui-stone-1: light-dark(oklch(98% 0.0067 95deg), oklch(26% 0.0075 95deg));
+	--oui-stone-0: light-dark(oklch(99.5% 0.0033 95deg), oklch(22% 0.005 95deg));
+	--oui-stone-1: light-dark(oklch(98.25% 0.0067 95deg), oklch(26% 0.0075 95deg));
 	--oui-stone-2: light-dark(oklch(95% 0.01 95deg), oklch(32% 0.01 95deg));
 	--oui-stone-3: light-dark(oklch(90% 0.0125 95deg), oklch(40% 0.0125 95deg));
 	--oui-stone-4: light-dark(oklch(80% 0.015 95deg), oklch(50% 0.015 95deg));

package/src/css/combobox.scss

@@ -17,32 +17,28 @@
 		position: relative;
 	}
 
-	:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus),
-	:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus-within),
-	:where(
-		&:not([disabled], [readonly], [aria-disabled='true' i]):has(
-			+ [oui-combobox-content]:focus-within
-		)
-	) {
-		@include mixins.input-focus;
-	}
+	&:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]) {
+		:where(&:focus-visible, &:focus-within, &:has(+ [oui-combobox-content]:focus-within)) {
+			@include mixins.input-focus;
+		}
 
-	@media (hover: hover) {
-		:where(
-			&:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]):hover
-		) {
-			@include mixins.input-hover;
+		@media (hover: hover) {
+			:where(&:hover) {
+				@include mixins.input-hover;
+			}
 		}
 	}
 
-	:where(&:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i])) {
-		--oui-foreground-percentage: 25%;
+	&:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]) {
+		:where(&) {
+			--oui-foreground-percentage: 25%;
 
-		font-style: italic;
-	}
+			font-style: italic;
+		}
 
-	:where(&:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]):focus) {
-		--oui-outline-percentage: 75%;
+		:where(&:focus-visible, &:focus-within, &:has(+ [oui-combobox-content]:focus-within)) {
+			--oui-outline-percentage: 75%;
+		}
 	}
 
 	:where(&:is([disabled], [aria-disabled='true' i])) {
@@ -63,7 +59,7 @@
 
 :where([oui-combobox-content]) {
 	@include mixins.floatable;
-	@include mixins.shadow-overlay;
+	@include mixins.shadow-5;
 
 	width: fit-content;
 	height: fit-content;
@@ -109,30 +105,6 @@
 	outline-width: 0;
 	border-radius: 0.25em;
 	font-size: 0.875rem;
-
-	:where(&:focus) {
-		@include mixins.input-focus;
-	}
-
-	@media (hover: hover) {
-		:where(&:hover) {
-			@include mixins.input-hover;
-		}
-	}
-
-	:where(&:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i])) {
-		--oui-foreground-percentage: 25%;
-
-		font-style: italic;
-	}
-
-	:where(&:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]):focus) {
-		--oui-outline-percentage: 75%;
-	}
-
-	:where(&:is([disabled], [aria-disabled='true' i])) {
-		--oui-background-percentage: 50%;
-	}
 }
 
 :where([oui-combobox-header]) {
@@ -169,7 +141,6 @@
 		outline-offset: -4px;
 		line-height: 1.25;
 		cursor: pointer;
-		transition: 0.125s ease-in-out;
 	}
 
 	:where(&[aria-selected='true' i]) {
@@ -182,9 +153,7 @@
 		margin: 0 0.75em 0 0;
 	}
 
-	:where(
-		oui-combobox:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]) &
-	) {
+	oui-combobox:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]) & {
 		@media (hover: hover) {
 			:where(&:hover) {
 				background-color: var(--oui-blue-1);
@@ -217,9 +186,9 @@
 	:where(&) {
 		@include mixins.button;
 
-		--oui-background-value: var(--oui-blue-1);
-		--oui-foreground-percentage: 12.5%;
+		--oui-background-value: var(--oui-blue-2);
 		--oui-foreground-value: var(--oui-blue-8);
+		--oui-outline-value: var(--oui-blue-6);
 		--oui-shadow-percentage: 90%;
 
 		padding: 0.5em 1em;

package/src/css/content.scss

@@ -3,9 +3,9 @@
 @use './mixins' as mixins;
 
 @mixin thumb($background, $shadow) {
-	@include mixins.shadow-small(
+	@include mixins.shadow-0(
 		color-mix(in oklab, $shadow, transparent 33%),
-		color-mix(in oklab, white, transparent 82.5%)
+		color-mix(in oklab, var(--oui-absolute), transparent 82.5%)
 	);
 
 	appearance: none;
@@ -56,7 +56,7 @@
 			mask-size: contain;
 			mask-position: center;
 			mask-repeat: no-repeat;
-			transition: 0.125s ease-in-out;
+			transition: transform 0.125s ease-in-out;
 			transform: rotate(-90deg);
 		}
 
@@ -151,3 +151,30 @@
 		}
 	}
 }
+
+.oui-shadow {
+	:where(&),
+	:where(&-0) {
+		@include mixins.shadow-0;
+	}
+
+	:where(&-1) {
+		@include mixins.shadow-1;
+	}
+
+	:where(&-2) {
+		@include mixins.shadow-2;
+	}
+
+	:where(&-3) {
+		@include mixins.shadow-3;
+	}
+
+	:where(&-4) {
+		@include mixins.shadow-4;
+	}
+
+	:where(&-5) {
+		@include mixins.shadow-5;
+	}
+}