@oscarpalmer/oui 0.32.0 → 0.34.0

package/dist/js/dialog.mjs

@@ -4,8 +4,8 @@ import { ATTRIBUTE_MOVABLE_HANDLE, createMovable } from "./movable/movable.embed
 import "./movable/movable.standalone.mjs";
 import { RESIZABLE_ATTRIBUTE_HANDLE, createResizable } from "./resizable/resizable.embedded.mjs";
 import { getAria, setAria } from "@oscarpalmer/toretto/aria";
-import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
 import { on } from "@oscarpalmer/toretto/event";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
 import { setStyles } from "@oscarpalmer/toretto/style";
 //#region src/js/dialog.ts
 var OuiDialog = class {
@@ -88,7 +88,8 @@ function getState(element) {
 		listeners: [getOnBeforeToggleListener(element), on(element, "toggle", (event) => {
 			const { source } = event;
 			if (element.open) {
-				setAria(element, "modal", source instanceof HTMLButtonElement && source.command === "show-modal" || element.matches(":modal"));
+				const modal = source instanceof HTMLButtonElement && source.command === "show-modal" || element.matches(":modal");
+				setAria(element, "modal", modal);
 				setAttribute(element, ATTRIBUTE_OPEN, "");
 				element.focus();
 				setTimeout(() => {

package/dist/js/floatable/floatable.embedded.mjs

@@ -1,9 +1,9 @@
 import { getAria } from "@oscarpalmer/toretto/aria";
-import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
 import { on } from "@oscarpalmer/toretto/event";
-import { setStyle, setStyles } from "@oscarpalmer/toretto/style";
 import { isPlainObject } from "@oscarpalmer/atoms/is";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { setStyle, setStyles } from "@oscarpalmer/toretto/style";
 //#region src/js/floatable/floatable.embedded.ts
 var OuiFloatable = class {
 	#destroyed = false;
@@ -111,7 +111,7 @@ function getOptions(input) {
 		position: object.position != null && object.position in AREAS ? object.position : "below"
 	};
 }
-function getPosition$1(state, override) {
+function getPosition(state, override) {
 	if (override != null && override in AREAS) return override;
 	const { anchor, options } = state;
 	if (options.attribute == null) return options.position;
@@ -131,7 +131,7 @@ function removeFloatable(content) {
 	instances.delete(content);
 }
 function setPosition(state, override) {
-	const position = getPosition$1(state, override);
+	const position = getPosition(state, override);
 	const area = AREAS[position];
 	setAttribute(state.content, ATTRIBUTE_POSITION, POSITIONS[area]);
 	setStyles(state.content, {

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

@@ -1,10 +1,10 @@
 import { attributable } from "../internal/attributable.mjs";
-import { clamp } from "@oscarpalmer/atoms/number";
-import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { dispatch, on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto/find";
 import { isPlainObject } from "@oscarpalmer/atoms/is";
+import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { clamp } from "@oscarpalmer/atoms/number";
+import { findAncestor } from "@oscarpalmer/toretto/find";
 import { getFocusable } from "@oscarpalmer/toretto/focusable";
 //#region src/js/focus-trap/focus-trap.embedded.ts
 var OuiFocusTrap = class {

package/dist/js/index.d.mts

@@ -1,14 +1,14 @@
-import { OuiComboboxElement } from "./combobox.mjs";
+import { a as OuiFloatablePosition, n as CreateOuiFloatableOptions, r as OuiFloatable, s as createFloatable } from "./floatable.embedded-Bct4U5Dm.mjs";
+import { H as setComboboxLocalizations, z as OuiComboboxElement } from "./constants.combobox-DqNUGBLS.mjs";
 import { d as OuiSortable, f as createSortable, g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "./draggable-a6w0J1OD.mjs";
 import "./movable/movable.standalone.mjs";
 import { a as createResizable, n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.embedded-3qoR0Bjm.mjs";
 import "./resizable/resizable.standalone.mjs";
 import { OuiDialog, getDialog } from "./dialog.mjs";
-import { a as OuiFloatablePosition, n as CreateOuiFloatableOptions, r as OuiFloatable, s as createFloatable } from "./floatable.embedded-Bct4U5Dm.mjs";
 import "./floatable/floatable.standalone.mjs";
 import { a as OuiFocusTrapOptions, i as OuiFocusTrap, o as createFocusTrap } from "./focus-trap.embedded-DR8NpZfr.mjs";
 import { OuiPopover, getPopover } from "./popover.mjs";
 import "./sortable/sortable.standalone.mjs";
 import { OuiSplitterElement } from "./splitter.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, type OuiMovable, type OuiPopover, type OuiResizable, type OuiSortable, OuiSplitterElement, type OuiTooltip, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, 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, type OuiMovable, type OuiPopover, type OuiResizable, type OuiSortable, OuiSplitterElement, type OuiTooltip, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setComboboxLocalizations, setTooltipDelay };

package/dist/js/index.mjs

@@ -1,11 +1,12 @@
 import { createFloatable } from "./floatable/floatable.embedded.mjs";
-import { OuiComboboxElement } from "./combobox.mjs";
 import { createMovable } from "./movable/movable.embedded.mjs";
 import "./movable/movable.standalone.mjs";
 import { createResizable } from "./resizable/resizable.embedded.mjs";
 import { getDialog } from "./dialog.mjs";
 import "./menu.mjs";
 import "./toolbar.mjs";
+import { F as setComboboxLocalizations } from "./data.combobox-8RwBv5ey.mjs";
+import { OuiComboboxElement } from "./combobox/index.mjs";
 import "./floatable/floatable.standalone.mjs";
 import { createFocusTrap } from "./focus-trap/focus-trap.embedded.mjs";
 import "./focus-trap/focus-trap.standalone.mjs";
@@ -15,4 +16,4 @@ import { createSortable } from "./sortable/sortable.embedded.mjs";
 import "./sortable/sortable.standalone.mjs";
 import { OuiSplitterElement } from "./splitter.mjs";
 import { getTooltip, setTooltipDelay } from "./tooltip.mjs";
-export { OuiComboboxElement, OuiSplitterElement, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setTooltipDelay };
+export { OuiComboboxElement, OuiSplitterElement, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setComboboxLocalizations, setTooltipDelay };

package/dist/js/internal/draggable.mjs

@@ -1,9 +1,9 @@
-import { clamp } from "@oscarpalmer/atoms/number";
+import { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
 import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
-import { dispatch, getPosition, on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto/find";
-import { setStyle, setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { setStyle, setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
+import { clamp } from "@oscarpalmer/atoms/number";
+import { findAncestor } from "@oscarpalmer/toretto/find";
 import supportsTouch from "@oscarpalmer/toretto/touch";
 //#region src/js/internal/draggable.ts
 var OuiDraggable = class {
@@ -118,7 +118,7 @@ function onPointerdown(event) {
 	if (handle == null) return;
 	const dragged = item.state.options.getDragged();
 	const rectangle = dragged.getBoundingClientRect();
-	const position = getPosition(event) ?? {
+	const position = getEventPosition(event) ?? {
 		x: 0,
 		y: 0
 	};
@@ -153,7 +153,7 @@ function onPointerdown(event) {
 }
 function onPointermove(event) {
 	if (current == null) return;
-	const position = getPosition(event);
+	const position = getEventPosition(event);
 	if (position == null) return;
 	const next = getNextPosition(current, position);
 	if (globals.element != null) setStyle(globals.element.node, "inset", `${next.y}px auto auto ${next.x}px`);

package/dist/js/internal/navigable.mjs

@@ -1,8 +1,8 @@
-import { clamp } from "@oscarpalmer/atoms/number";
 import { getAria, setRole } from "@oscarpalmer/toretto/aria";
 import { dispatch, on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto/find";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { clamp } from "@oscarpalmer/atoms/number";
+import { findAncestor } from "@oscarpalmer/toretto/find";
 //#region src/js/internal/navigable.ts
 var OuiNavigable = class {
 	active = { index: 0 };
@@ -17,7 +17,7 @@ var OuiNavigable = class {
 			onFocusin(this, event);
 		}), on(element, "keydown", (event) => {
 			onKeydown(this, event);
-		})];
+		}, { passive: false })];
 		this.orientation = getOrientation(element, options);
 		if (options.role != null) setRole(element, options.role);
 	}

package/dist/js/menu.mjs

@@ -2,8 +2,8 @@ import { createEmbeddedFloatable, getOnBeforeToggleListener } from "./floatable/
 import { attributable } from "./internal/attributable.mjs";
 import { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, getNavigable, updateNavigableFocus } from "./internal/navigable.mjs";
 import { setAria, setRole } from "@oscarpalmer/toretto/aria";
-import { setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
 import { on } from "@oscarpalmer/toretto/event";
+import { setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
 import { findAncestor } from "@oscarpalmer/toretto/find";
 //#region src/js/menu.ts
 var OuiMenu = class {
@@ -120,7 +120,8 @@ function onDeactivate(_, navigable) {
 	if (instance != null) updateNavigableFocus(instance.navigable, true);
 }
 function onPreventNavigation(_, navigable) {
-	return findAncestor((menubars.get(navigable.element) ?? menus.get(navigable.element))?.element.parentElement, SELECTORS) != null;
+	const instance = menubars.get(navigable.element) ?? menus.get(navigable.element);
+	return findAncestor(instance?.element.parentElement, SELECTORS) != null;
 }
 function onShouldActivate(event, navigable) {
 	let activate = false;

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

@@ -1,9 +1,9 @@
 import { attributable } from "../internal/attributable.mjs";
 import { OuiDraggable, addDraggable, getDraggableStates, removeDraggable } from "../internal/draggable.mjs";
+import { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
-import { dispatch, getPosition, on } from "@oscarpalmer/toretto/event";
-import { getStyles, setStyle, setStyles } from "@oscarpalmer/toretto/style";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { getStyles, setStyle, setStyles } from "@oscarpalmer/toretto/style";
 //#region src/js/movable/movable.embedded.ts
 var OuiMovable = class extends OuiDraggable {
 	#element;
@@ -112,7 +112,7 @@ function onEnd(event, globals, item, reset) {
 	if (container != null) setOffset(state, container);
 	const dispatched = dispatch(state.element, "movable:end", { detail: {
 		from: { ...globals.original },
-		to: getPosition(event)
+		to: getEventPosition(event)
 	} });
 	setTimeout(() => {
 		if (dispatched.defaultPrevented) onCancel(globals, item);

package/dist/js/popover.mjs

@@ -2,8 +2,8 @@ import { createEmbeddedFloatable, getOnBeforeToggleListener } from "./floatable/
 import { attributable } from "./internal/attributable.mjs";
 import { createFocusTrap } from "./focus-trap/focus-trap.embedded.mjs";
 import { getAria, setAria } from "@oscarpalmer/toretto/aria";
-import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { on } from "@oscarpalmer/toretto/event";
+import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/popover.ts
 var OuiPopover = class {

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

@@ -1,11 +1,11 @@
 import { attributable } from "../internal/attributable.mjs";
-import { getNumber } from "@oscarpalmer/atoms/number";
-import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
-import { dispatch, getPosition, on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto/find";
-import { setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
+import { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
 import { isPlainObject } from "@oscarpalmer/atoms/is";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
+import { getNumber } from "@oscarpalmer/atoms/number";
+import { findAncestor } from "@oscarpalmer/toretto/find";
 import supportsTouch from "@oscarpalmer/toretto/touch";
 //#region src/js/resizable/resizable.embedded.ts
 var OuiResizable = class {
@@ -127,7 +127,7 @@ function onPointerdown(event) {
 	const handle = findAncestor(event, SELECTOR_HANDLE);
 	const element = handle && findAncestor(handle, SELECTOR);
 	const stored = element && items.get(element);
-	const position = getPosition(event);
+	const position = getEventPosition(event);
 	if (stored == null || position == null) return;
 	if (supportsTouch.value) event.preventDefault();
 	const dispatched = dispatch(element, "resizable:begin");
@@ -141,7 +141,7 @@ function onPointerdown(event) {
 }
 function onPointermove(event) {
 	if (current == null) return;
-	const { x, y } = getPosition(event) ?? {};
+	const { x, y } = getEventPosition(event) ?? {};
 	if (x == null || y == null) return;
 	const width = current.state.width + (x - (start?.x ?? 0));
 	const height = current.state.height + (y - (start?.y ?? 0));

package/dist/js/sortable/sortable.embedded.mjs

@@ -1,11 +1,11 @@
 import { attributable } from "../internal/attributable.mjs";
 import { OuiDraggable, addDraggable, getDraggableStates, removeDraggable } from "../internal/draggable.mjs";
+import { dispatch, getEventPosition } from "@oscarpalmer/toretto/event";
 import { getAttribute, setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
-import { createElement } from "@oscarpalmer/toretto/create";
-import { dispatch, getPosition } from "@oscarpalmer/toretto/event";
-import { findAncestor, getElementFromPosition } from "@oscarpalmer/toretto/find";
-import { setStyle } from "@oscarpalmer/toretto/style";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { setStyle } from "@oscarpalmer/toretto/style";
+import { findAncestor, getElementFromPosition } from "@oscarpalmer/toretto/find";
+import { createElement } from "@oscarpalmer/toretto/create";
 //#region src/js/sortable/sortable.embedded.ts
 var OuiSortable = class extends OuiDraggable {
 	constructor(element, options) {
@@ -92,7 +92,7 @@ function onCancel(_, item) {
 }
 function onEnd(event, globals, item, reset) {
 	const { origin } = item.state;
-	const position = getPosition(event) ?? {
+	const position = getEventPosition(event) ?? {
 		x: 0,
 		y: 0
 	};
@@ -258,6 +258,7 @@ const placeholder = {
 	position: void 0
 };
 const addSortable = addDraggable.bind(bound);
-attributable(ATTRIBUTE, addSortable, removeDraggable.bind(bound));
+const removeSortable = removeDraggable.bind(bound);
+attributable(ATTRIBUTE, addSortable, removeSortable);
 //#endregion
 export { OuiSortable, createSortable };

package/dist/js/splitter.mjs

@@ -1,10 +1,10 @@
-import { clamp } from "@oscarpalmer/atoms/number";
 import { setAria } from "@oscarpalmer/toretto/aria";
+import { getEventPosition, on } from "@oscarpalmer/toretto/event";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
-import { getPosition, on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto/find";
 import { setStyle, toggleStyles } from "@oscarpalmer/toretto/style";
-import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { clamp } from "@oscarpalmer/atoms/number";
+import { findAncestor } from "@oscarpalmer/toretto/find";
 import supportsTouch from "@oscarpalmer/toretto/touch";
 import { round } from "@oscarpalmer/atoms/math";
 //#region src/js/splitter.ts
@@ -130,10 +130,7 @@ var OuiSplitterElement = class extends HTMLElement {
 			case ATTRIBUTE_SIZE:
 				this.#splitter.updateValues();
 				break;
-			case ATTRIBUTE_TYPE:
-				this.#splitter.updateOrientation();
-				break;
-			default: break;
+			case ATTRIBUTE_TYPE: this.#splitter.updateOrientation();
 		}
 	}
 };
@@ -213,10 +210,7 @@ function onKeydown(event) {
 		case KEYS_ALL.has(event.key):
 			onNavigate(event);
 			break;
-		case event.key === "Escape":
-			onEnd(true);
-			break;
-		default: break;
+		case event.key === "Escape": onEnd(true);
 	}
 }
 function onNavigate(event) {
@@ -256,7 +250,7 @@ function onPointerdown(event) {
 }
 function onPointermove(event) {
 	if (splitter == null) return;
-	const position = getPosition(event);
+	const position = getEventPosition(event);
 	if (position != null) {
 		splitter.values.now.current = getSize(splitter, splitter.types.horizontal ? position.y : position.x);
 		setSize(splitter, splitter.values.now.current);

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 { setAttribute } from "@oscarpalmer/toretto/attribute";
-import { createElement } from "@oscarpalmer/toretto/create";
 import { on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto/find";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { setAttribute } from "@oscarpalmer/toretto/attribute";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { createElement } from "@oscarpalmer/toretto/create";
 //#region src/js/tooltip.ts
 var OuiTooltip = class {
 	#state;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.32.0",
+	"version": "0.34.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",
@@ -34,8 +34,8 @@
 			"default": "./dist/js/index.mjs"
 		},
 		"./combobox": {
-			"types": "./dist/js/combobox.d.mts",
-			"default": "./dist/js/combobox.mjs"
+			"types": "./dist/js/combobox/index.d.mts",
+			"default": "./dist/js/combobox/index.mjs"
 		},
 		"./dialog": {
 			"types": "./dist/js/dialog.d.mts",
@@ -95,14 +95,14 @@
 	},
 	"dependencies": {
 		"@oscarpalmer/atoms": "^0.188.1",
-		"@oscarpalmer/toretto": "^0.48.0"
+		"@oscarpalmer/toretto": "^0.50.1"
 	},
 	"devDependencies": {
-		"@oxlint/plugins": "^1.75",
+		"@oxlint/plugins": "^1.77",
 		"@vitest/coverage-istanbul": "^4.1",
 		"autoprefixer": "^10.5",
 		"concurrently": "^10",
-		"jsdom": "^29.1",
+		"jsdom": "^30",
 		"postcss-cli": "^11",
 		"postcss-input-range": "^6",
 		"postcss-scss": "^4",

package/src/css/combobox.scss

@@ -14,9 +14,11 @@
 		background-position: right 0.5em center;
 		background-repeat: no-repeat;
 		background-size: 1em;
+		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
@@ -26,24 +28,37 @@
 	}
 
 	@media (hover: hover) {
-		:where(&:not([disabled], [readonly], [aria-disabled='true' i]):hover) {
+		:where(
+			&:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]):hover
+		) {
 			@include mixins.input-hover;
 		}
 	}
 
-	:where(&:is([disabled], [readonly], [aria-disabled='true' i])) {
+	: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]):focus) {
+	: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(& > button) {
+		border: none;
+		position: absolute;
+		inset: 0;
+		z-index: 1;
+	}
+
+	:where(& > button:focus) {
+		outline: none;
+	}
 }
 
 :where([oui-combobox-content]) {
@@ -54,7 +69,7 @@
 	height: fit-content;
 	max-width: max(25vw, 32rem);
 	max-height: max(25vh, 32rem);
-	min-width: var(--oui-combobox-width, auto);
+	min-width: anchor-size(width);
 	flex-flow: column nowrap;
 	border-radius: 0.25em;
 
@@ -63,12 +78,6 @@
 	}
 }
 
-:where([oui-combobox-empty]) {
-	padding: 1em;
-	text-align: center;
-	font-style: italic;
-}
-
 :where([oui-combobox-filter], [oui-combobox-header]) {
 	&::after {
 		content: '';
@@ -101,23 +110,23 @@
 	border-radius: 0.25em;
 	font-size: 0.875rem;
 
-	:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus) {
+	:where(&:focus) {
 		@include mixins.input-focus;
 	}
 
 	@media (hover: hover) {
-		:where(&:not([disabled], [readonly], [aria-disabled='true' i]):hover) {
+		:where(&:hover) {
 			@include mixins.input-hover;
 		}
 	}
 
-	:where(&:is([disabled], [readonly], [aria-disabled='true' i])) {
+	: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]):focus) {
+	:where(&:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]):focus) {
 		--oui-outline-percentage: 75%;
 	}
 
@@ -126,13 +135,6 @@
 	}
 }
 
-:where([oui-combobox-filter-label]) {
-	@include mixins.visually-hidden;
-
-	display: inline-flex;
-	position: absolute;
-}
-
 :where([oui-combobox-header]) {
 	padding: 0.5em calc(0.75em / 0.75);
 	background-color: var(--oui-gray-0);
@@ -143,11 +145,23 @@
 	z-index: 1;
 }
 
+:where([oui-combobox-hidden]) {
+	@include mixins.visually-hidden;
+
+	position: absolute;
+}
+
 :where([oui-combobox-list]) {
 	overflow: auto;
 	position: relative;
 }
 
+:where([oui-combobox-message]) {
+	padding: 1em;
+	text-align: center;
+	font-style: italic;
+}
+
 [oui-combobox-option] {
 	:where(&) {
 		padding: 0.5em 0.75em;
@@ -168,7 +182,9 @@
 		margin: 0 0.75em 0 0;
 	}
 
-	:where(oui-combobox:not([disabled], [readonly], [aria-disabled='true' i]) &) {
+	:where(
+		oui-combobox:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]) &
+	) {
 		@media (hover: hover) {
 			:where(&:hover) {
 				background-color: var(--oui-blue-1);
@@ -193,24 +209,75 @@
 	gap: 0.5em;
 	overflow: auto;
 	list-style: none;
+	position: relative;
+	z-index: 2;
 }
 
 [oui-combobox-selection-item] {
 	:where(&) {
-		@include mixins.badge;
+		@include mixins.button;
+
+		--oui-background-value: var(--oui-blue-1);
+		--oui-foreground-percentage: 12.5%;
+		--oui-foreground-value: var(--oui-blue-8);
+		--oui-shadow-percentage: 90%;
 
-		border-radius: 3em;
 		padding: 0.5em 1em;
-		gap: 0.75em;
-		font-size: 0.875em;
-		transition: 0.125s ease-in-out;
+		flex-wrap: nowrap;
+		border-radius: 5em;
+		font-size: 0.75em;
+		white-space: nowrap;
+	}
+
+	:where(
+		oui-combobox:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i])
+			&:focus-visible
+	) {
+		--oui-outline-percentage: 87.5%;
+		--oui-outline-value: var(--oui-blue-6);
+	}
+
+	:where(
+		oui-combobox:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i])
+			&:focus-visible
+	) {
+		--oui-background-value: var(--oui-red-1);
+		--oui-foreground-value: var(--oui-red-8);
+		--oui-outline-percentage: 75%;
+		--oui-outline-value: var(--oui-red-6);
 	}
 
 	@media (hover: hover) {
-		:where(oui-combobox:not([disabled], [readonly], [aria-disabled='true' i]) &:hover) {
-			--oui-background: var(--oui-red-0);
-			--oui-foreground: var(--oui-red-8);
-			--oui-shadow: var(--oui-red-6);
+		:where(
+			oui-combobox:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i])
+				&:hover
+		) {
+			--oui-background-value: var(--oui-red-1);
+			--oui-foreground-value: var(--oui-red-8);
+			--oui-outline-value: var(--oui-red-6);
+
+			--oui-background-percentage: 50%;
+			--oui-foreground-percentage: 25%;
 		}
 	}
+
+	:where(
+		oui-combobox:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='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-combobox:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]) &
+	) {
+		--oui-background-percentage: 80%;
+		--oui-foreground-percentage: 20%;
+		--oui-shadow-percentage: 95%;
+
+		font-style: italic;
+	}
 }