@oscarpalmer/oui 0.27.0 → 0.29.0

package/dist/js/splitter.mjs

@@ -1,8 +1,10 @@
+import { setAria } from "@oscarpalmer/toretto/aria";
 import { getPosition, on } from "@oscarpalmer/toretto/event";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
+import { setStyle, toggleStyles } from "@oscarpalmer/toretto/style";
 import { clamp } from "@oscarpalmer/atoms/number";
 import { findAncestor } from "@oscarpalmer/toretto/find";
-import { toggleStyles } from "@oscarpalmer/toretto/style";
 import supportsTouch from "@oscarpalmer/toretto/touch";
 import { round } from "@oscarpalmer/atoms/math";
 //#region src/js/splitter.ts
@@ -42,8 +44,7 @@ var OuiSplitter = class {
 		this.types = getTypes(this);
 		if (this.types.auto) RESIZE_OBSERVER.observe(this.element);
 		else RESIZE_OBSERVER.unobserve(this.element);
-		if (this.types.horizontal) this.element.setAttribute(ATTRIBUTE_HORIZONTAL, "");
-		else this.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
+		setAttribute(this.element, ATTRIBUTE_HORIZONTAL, this.types.horizontal ? "" : void 0);
 		setAriaOrientation(this);
 	}
 	updateValues() {
@@ -72,7 +73,7 @@ var OuiSplitterElement = class extends HTMLElement {
 	* Maximum size for the first panel
 	*/
 	set max(value) {
-		this.setAttribute(ATTRIBUTE_MAX, String(value));
+		if (typeof value === "number") setAttribute(this, ATTRIBUTE_MAX, value.toString());
 	}
 	/**
 	* Minimum size for the first panel
@@ -84,7 +85,7 @@ var OuiSplitterElement = class extends HTMLElement {
 	* Minimum size for the first panel
 	*/
 	set min(value) {
-		this.setAttribute(ATTRIBUTE_MIN, String(value));
+		if (typeof value === "number") setAttribute(this, ATTRIBUTE_MIN, value.toString());
 	}
 	/**
 	* Current size for the first panel
@@ -96,23 +97,23 @@ var OuiSplitterElement = class extends HTMLElement {
 	* Current size for the first panel
 	*/
 	set size(value) {
-		this.setAttribute(ATTRIBUTE_SIZE, String(value));
+		if (typeof value === "number") setAttribute(this, ATTRIBUTE_SIZE, value.toString());
 	}
 	/**
 	* Orientation of the splitter
 	*/
 	get type() {
-		return this.getAttribute(ATTRIBUTE_TYPE) ?? "vertical";
+		return getAttribute(this, ATTRIBUTE_TYPE) ?? "vertical";
 	}
 	/**
 	* Orientation of the splitter
 	*/
 	set type(value) {
-		this.setAttribute(ATTRIBUTE_TYPE, value);
+		setAttribute(this, ATTRIBUTE_TYPE, value);
 	}
 	constructor() {
 		super();
-		const panels = [...this.children].filter((child) => child instanceof HTMLElement);
+		const panels = [...this.children].filter((child) => child instanceof Element);
 		if (panels.length !== 2) throw new Error(MESSAGE);
 		this.#splitter = new OuiSplitter(this, panels);
 	}
@@ -138,17 +139,19 @@ var OuiSplitterElement = class extends HTMLElement {
 };
 function createHandle() {
 	const handle = document.createElement("span");
-	handle.setAttribute("aria-hidden", "true");
-	handle.setAttribute(ATTRIBUTE_HANDLE, "");
+	setAria(handle, "hidden", "true");
+	setAttribute(handle, ATTRIBUTE_HANDLE, "");
 	return handle;
 }
 function createSeparator(splitter) {
 	const separator = document.createElement("div");
 	separator.role = "separator";
 	separator.tabIndex = 0;
-	separator.setAttribute("aria-controls", splitter.element.id);
-	separator.setAttribute("aria-label", "Resize panels");
-	separator.setAttribute(ATTRIBUTE_SEPARATOR, "");
+	setAria(separator, {
+		controls: splitter.element.id,
+		label: "Resize panels"
+	});
+	setAttribute(separator, ATTRIBUTE_SEPARATOR, "");
 	return separator;
 }
 function getContained(min, value, max) {
@@ -160,7 +163,7 @@ function getSize(splitter, value) {
 	return getContained(splitter.values.min, fraction, splitter.values.max);
 }
 function getTypes(splitter, width, height) {
-	const type = splitter.element.getAttribute("type")?.trim() ?? "";
+	const type = getAttribute(splitter.element, "type");
 	if (type === "horizontal") return {
 		auto: false,
 		horizontal: true
@@ -175,7 +178,7 @@ function getTypes(splitter, width, height) {
 	};
 }
 function getValue(element, name, defaultValue) {
-	const value = element.getAttribute(name);
+	const value = getAttribute(element, name);
 	if (isNullableOrWhitespace(value)) return defaultValue;
 	const parsed = Number.parseFloat(value);
 	if (Number.isNaN(parsed)) return defaultValue;
@@ -235,8 +238,7 @@ function onObservation(entries) {
 			const splitter = MAPPED_ELEMENTS.get(entry.target);
 			if (splitter == null) return;
 			splitter.types = getTypes(splitter, entry.contentRect.width, entry.contentRect.height);
-			if (splitter.types.horizontal) splitter.element.setAttribute(ATTRIBUTE_HORIZONTAL, "");
-			else splitter.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
+			setAttribute(splitter.element, ATTRIBUTE_HORIZONTAL, splitter.types.horizontal ? "" : void 0);
 			setAriaOrientation(splitter);
 		}
 		frame = void 0;
@@ -247,8 +249,8 @@ function onPointerdown(event) {
 	splitter = MAPPED_ELEMENTS.get(findAncestor(event, SELECTOR_HANDLE));
 	if (splitter == null) return;
 	if (supportsTouch.value) event.preventDefault();
-	splitter.handle.setAttribute(ATTRIBUTE_ACTIVE, "");
-	splitter.separator.setAttribute(ATTRIBUTE_ACTIVE, "");
+	setAttribute(splitter.handle, ATTRIBUTE_ACTIVE, "");
+	setAttribute(splitter.separator, ATTRIBUTE_ACTIVE, "");
 	splitter.rectangle = splitter.element.getBoundingClientRect();
 	STYLING_TOGGLER.set();
 }
@@ -264,17 +266,19 @@ function onPointerup() {
 	if (splitter != null) onEnd(false);
 }
 function setAriaOrientation(splitter) {
-	splitter.separator.setAttribute("aria-orientation", splitter.types.horizontal ? "horizontal" : "vertical");
+	setAria(splitter.separator, "orientation", splitter.types.horizontal ? "horizontal" : "vertical");
 }
 function setAriaValue(splitter) {
-	splitter.separator.setAttribute("aria-valuemax", String(splitter.values.max));
-	splitter.separator.setAttribute("aria-valuemin", String(splitter.values.min));
-	splitter.separator.setAttribute("aria-valuenow", String(splitter.values.now.current));
+	setAria(splitter.separator, {
+		valuemax: splitter.values.max,
+		valuemin: splitter.values.min,
+		valuenow: splitter.values.now.current
+	});
 }
 function setSize(splitter, size, previous) {
 	splitter.values.now.current = size;
 	if (previous) splitter.values.now.previous = size;
-	splitter.element.style.setProperty("--oui-splitter-size", `${size}`);
+	setStyle(splitter.element, "--oui-splitter-size", `${size}`);
 	setAriaValue(splitter);
 }
 const SELECTOR = "oui-splitter";
@@ -315,7 +319,7 @@ on(document, "keydown", onKeydown);
 on(document, "mousedown", onPointerdown);
 on(document, "pointermove", onPointermove);
 on(document, "pointerup", onPointerup);
-on(document, "touchcancel", onPointerup, { passive: false });
+on(document, "touchcancel", onPointerup);
 on(document, "touchstart", onPointerdown, { passive: false });
 //#endregion
 export { OuiSplitterElement };

package/dist/js/toolbar.mjs

@@ -1,105 +1,29 @@
 import { attributable } from "./internal/attributable.mjs";
-import { on } from "@oscarpalmer/toretto/event";
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
-import { clamp } from "@oscarpalmer/atoms/number";
-import { findAncestor } from "@oscarpalmer/toretto/find";
+import { getNavigable, updateNavigableFocus } from "./internal/navigable.mjs";
 //#region src/js/toolbar.ts
 var OuiToolbar = class {
-	#state;
-	constructor(state) {
-		this.#state = state;
-		updateFocus(this.#state, false);
+	#navigable;
+	constructor(navigable) {
+		this.#navigable = navigable;
+		updateNavigableFocus(this.#navigable, false);
 	}
 	destroy() {
-		for (const listener of this.#state.listeners) listener();
-		this.#state.active = void 0;
-		this.#state.element = void 0;
-		this.#state.listeners = void 0;
+		this.#navigable.destroy();
+		this.#navigable = void 0;
 	}
 };
 function addToolbar(element) {
-	if (!instances.has(element)) instances.set(element, new OuiToolbar(getState(element)));
-}
-function getItems(element) {
-	return [...element.querySelectorAll(SELECTOR)].filter(isValidItem);
-}
-function getOrientation(element) {
-	const attribute = element.getAttribute(ARIA_ORIENTATION);
-	return ORIENTATIONS.has(attribute) ? attribute : ORIENTATION_HORIZONTAL;
-}
-function getState(element) {
-	const state = {
-		element,
-		active: { index: 0 },
-		listeners: [on(element, EVENT_FOCUSIN, (event) => {
-			onFocusin(state, event);
-		}), on(element, EVENT_KEYDOWN, (event) => {
-			onKeydown(state, event);
-		}, { passive: false })],
-		orientation: getOrientation(element)
-	};
-	return state;
-}
-function isValidItem(element) {
-	return PROPERTY_DISABLED in element ? element.disabled !== true : true;
-}
-function onKeydown(state, event) {
-	if (!KEYS_ALL.has(event.key)) return;
-	const items = getItems(state.element);
-	if (items.length === 0) return;
-	let index;
-	if (KEYS_ABSOLUTE.has(event.key)) index = event.key === KEY_HOME ? 0 : items.length - 1;
-	else if (state.orientation === ORIENTATION_HORIZONTAL ? KEYS_HORIZONTAL.has(event.key) : KEYS_VERTICAL.has(event.key)) {
-		if (state.active.element instanceof HTMLSelectElement) event.preventDefault();
-		index = clamp(state.active.index + (KEYS_NEXT.has(event.key) ? 1 : -1), 0, items.length - 1, true);
-	}
-	if (index == null || index === state.active.index) return;
-	state.active.element = items[index];
-	state.active.index = index;
-	updateFocus(state, true, items);
-}
-function onFocusin(state, event) {
-	const item = findAncestor(event, SELECTOR);
-	if (!isHTMLOrSVGElement(item) || !isValidItem(item)) return;
-	const items = getItems(state.element);
-	const index = items.indexOf(item);
-	if (index === -1) return;
-	state.active.element = item;
-	state.active.index = index;
-	updateFocus(state, false, items);
+	if (!instances.has(element)) instances.set(element, new OuiToolbar(getNavigable(element, {
+		role: "toolbar",
+		selector: SELECTOR,
+		vertical: false
+	})));
 }
 function removeToolbar(element) {
 	instances.get(element)?.destroy();
 	instances.delete(element);
 }
-function updateFocus(state, focus, items) {
-	const updated = items ?? getItems(state.element);
-	const { length } = updated;
-	if (length === 0) return;
-	for (let index = 0; index < length; index += 1) updated[index].tabIndex = index === state.active.index ? 0 : -1;
-	state.active.element ??= updated[state.active.index];
-	if (focus) state.active.element?.focus();
-}
-const ARIA_ORIENTATION = "aria-orientation";
 const ATTRIBUTE = "oui-toolbar";
-const EVENT_KEYDOWN = "keydown";
-const EVENT_FOCUSIN = "focusin";
-const KEY_ARROW_DOWN = "ArrowDown";
-const KEY_ARROW_RIGHT = "ArrowRight";
-const KEY_END = "End";
-const KEY_HOME = "Home";
-const KEYS_ABSOLUTE = /* @__PURE__ */ new Set([KEY_END, KEY_HOME]);
-const KEYS_HORIZONTAL = /* @__PURE__ */ new Set([KEY_ARROW_RIGHT, "ArrowLeft"]);
-const KEYS_VERTICAL = /* @__PURE__ */ new Set([KEY_ARROW_DOWN, "ArrowUp"]);
-const KEYS_ALL = /* @__PURE__ */ new Set([
-	...KEYS_ABSOLUTE,
-	...KEYS_HORIZONTAL,
-	...KEYS_VERTICAL
-]);
-const KEYS_NEXT = /* @__PURE__ */ new Set([KEY_ARROW_DOWN, KEY_ARROW_RIGHT]);
-const ORIENTATION_HORIZONTAL = "horizontal";
-const ORIENTATIONS = /* @__PURE__ */ new Set([ORIENTATION_HORIZONTAL, "vertical"]);
-const PROPERTY_DISABLED = "disabled";
 const SELECTOR = `[${ATTRIBUTE}-item]`;
 const instances = /* @__PURE__ */ new WeakMap();
 attributable(ATTRIBUTE, addToolbar, removeToolbar);

package/dist/js/tooltip.d.mts

@@ -1,4 +1,4 @@
-import { i as OuiFloatable } from "./floatable.embedded-YxGwzgbE.mjs";
+import { r as OuiFloatable } from "./floatable.embedded-DUR8bQBK.mjs";
 
 //#region src/js/tooltip.d.ts
 declare class OuiTooltip {

package/dist/js/tooltip.mjs

@@ -1,8 +1,9 @@
 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 { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { findAncestor } from "@oscarpalmer/toretto/find";
 import { createElement } from "@oscarpalmer/toretto/create";
 //#region src/js/tooltip.ts
@@ -87,12 +88,13 @@ function destroyTooltip(state) {
 	state.tooltip = void 0;
 }
 function findElements(attribute) {
+	if (attribute == null) return;
 	const ids = attribute?.split(EXPRESSION_WHITESPACE) ?? [];
 	const elements = [];
 	for (const id of ids) {
 		if (isNullableOrWhitespace(id)) continue;
 		const element = document.querySelector(`#${id}`);
-		if (isHTMLOrSVGElement(element)) {
+		if (element != null) {
 			const cloned = element.cloneNode(true);
 			cloned.hidden = false;
 			elements.push(cloned);
@@ -101,21 +103,20 @@ function findElements(attribute) {
 	return elements;
 }
 function getContent() {
-	const content = createElement(CONTENT_TAGNAME, {
+	const content = createElement("div", {
 		popover: "hint",
 		role: "tooltip",
 		tabIndex: -1
 	});
-	content.setAttribute(ATTRIBUTE_CONTENT, "");
+	setAttribute(content, ATTRIBUTE_CONTENT, "");
 	return content;
 }
 function getElements(anchor) {
-	let elements = findElements(anchor.getAttribute(ARIA_LABELLEDBY));
-	if (elements.length > 0) return elements;
-	elements = findElements(anchor.getAttribute(ARIA_DESCRIBEDBY));
-	if (elements.length > 0) return elements;
-	let text = anchor.getAttribute(ARIA_LABEL);
-	if (isNullableOrWhitespace(text)) text = anchor.getAttribute(ARIA_DESCRIPTION);
+	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;
@@ -157,8 +158,7 @@ function onPointermove(event) {
 	activate(event, false);
 }
 function onToggle(event) {
-	if (event.newState === "open") content.setAttribute(ATTRIBUTE_CONTENT_OPEN, "");
-	else content.removeAttribute(ATTRIBUTE_CONTENT_OPEN);
+	setAttribute(content, ATTRIBUTE_CONTENT_OPEN, event.newState === "open" ? "" : void 0);
 }
 function removeTooltip(element) {
 	const state = states.get(element);
@@ -175,11 +175,6 @@ function removeTooltip(element) {
 function setTooltipDelay(value) {
 	if (typeof value === "number" && !Number.isNaN(value) && value >= 0) delay = value;
 }
-const ARIA_DESCRIBEDBY = "aria-describedby";
-const ARIA_DESCRIPTION = "aria-description";
-const ARIA_LABEL = "aria-label";
-const ARIA_LABELLEDBY = "aria-labelledby";
-const CONTENT_TAGNAME = "div";
 const EXPRESSION_WHITESPACE = /\s+/;
 const ATTRIBUTE = "oui-tooltip";
 const ATTRIBUTE_CONTENT = `${ATTRIBUTE}-content`;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.27.0",
+	"version": "0.29.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",
@@ -49,10 +49,18 @@
 			"types": "./dist/js/movable/movable.standalone.d.mts",
 			"default": "./dist/js/movable/movable.standalone.mjs"
 		},
+		"./menu": {
+			"types": "./dist/js/menu.d.mts",
+			"default": "./dist/js/menu.mjs"
+		},
 		"./popover": {
 			"types": "./dist/js/popover.d.mts",
 			"default": "./dist/js/popover.mjs"
 		},
+		"./resizable": {
+			"types": "./dist/js/resizable/resizable.standalone.d.mts",
+			"default": "./dist/js/resizable/resizable.standalone.mjs"
+		},
 		"./sortable": {
 			"types": "./dist/js/sortable/sortable.standalone.d.mts",
 			"default": "./dist/js/sortable/sortable.standalone.mjs"
@@ -83,10 +91,10 @@
 	},
 	"dependencies": {
 		"@oscarpalmer/atoms": "^0.188.1",
-		"@oscarpalmer/toretto": "^0.46"
+		"@oscarpalmer/toretto": "^0.47.3"
 	},
 	"devDependencies": {
-		"@oxlint/plugins": "^1.72",
+		"@oxlint/plugins": "^1.73",
 		"@vitest/coverage-istanbul": "^4.1",
 		"autoprefixer": "^10.5",
 		"concurrently": "^10",

package/src/css/floatable.scss

@@ -36,6 +36,15 @@
 	transition-delay: 0.125s;
 }
 
+:where([oui-dialog]) {
+	position: relative;
+}
+
+:where([oui-dialog-resizer]) {
+	position: absolute;
+	inset: auto 0 0 auto;
+}
+
 :where([oui-popover], [oui-tooltip-content]) {
 	@include mixins.floatable;
 }

package/src/css/form.scss

@@ -173,9 +173,9 @@
 
 	:where(
 		&.oui-validate:not([disabled], [readonly], [aria-disabled='true' i]):is(
-				:user-invalid:not([aria-invalid='false' i]),
-				[aria-invalid='true' i]
-			)
+			:user-invalid:not([aria-invalid='false' i]),
+			[aria-invalid='true' i]
+		)
 	) {
 		@include invalid;
 
@@ -201,9 +201,9 @@
 
 	:where(
 		&.oui-validate:not([disabled], [readonly], [aria-disabled='true' i]):is(
-				:user-valid:not([aria-invalid='true' i]),
-				[aria-invalid='false' i]
-			)
+			:user-valid:not([aria-invalid='true' i]),
+			[aria-invalid='false' i]
+		)
 	) {
 		@include valid;
 

package/src/js/dialog.ts

@@ -1,9 +1,14 @@
+import {getAria, setAria} from '@oscarpalmer/toretto/aria';
 import {on} from '@oscarpalmer/toretto/event';
 import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
 import {getOnBeforeToggleListener} from './floatable/floatable.embedded';
 import {attributable} from './internal/attributable';
 import {ATTRIBUTE_MOVABLE_HANDLE} from './movable/movable.embedded';
 import {createMovable, type OuiMovable} from './movable/movable.standalone';
+import {createResizable, RESIZABLE_ATTRIBUTE_HANDLE} from './resizable/resizable.embedded';
+import type {OuiResizable} from './resizable/resizable.standalone';
+import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
+import {setStyles} from '@oscarpalmer/toretto/style';
 
 // #region Types
 
@@ -66,7 +71,7 @@ class OuiDialog {
 
 		const isModal = modal !== false;
 
-		element.setAttribute(ARIA_MODAL, String(isModal));
+		setAria(element, 'modal', isModal);
 
 		if (isModal) {
 			element.showModal();
@@ -82,6 +87,7 @@ type OuiDialogState = {
 	listeners: RemovableEventListener[];
 	modal: boolean;
 	movable?: OuiMovable;
+	resizable?: OuiResizable;
 };
 
 // #endregion
@@ -101,16 +107,22 @@ function addDialog(element: HTMLElement): void {
 function destroyDialog(state: OuiDialogState): void {
 	state.element.close();
 
-	state.element.setAttribute(ARIA_MODAL, String(state.modal));
+	setAria(state.element, 'modal', state.modal);
+
 	state.element.removeAttribute(ATTRIBUTE_OPEN);
 
 	for (const listener of state.listeners) {
 		listener();
 	}
 
+	state.movable?.destroy();
+	state.resizable?.destroy();
+
 	state.dialog = undefined as never;
 	state.element = undefined as never;
 	state.listeners = undefined as never;
+	state.movable = undefined;
+	state.resizable = undefined;
 }
 
 /**
@@ -131,47 +143,69 @@ function getMovable(element: HTMLDialogElement): OuiMovable | undefined {
 	}
 
 	for (const handle of handles) {
-		handle.setAttribute(ATTRIBUTE_MOVABLE_HANDLE, '');
+		setAttribute(handle, ATTRIBUTE_MOVABLE_HANDLE, '');
 	}
 
 	return createMovable(element, {
-		container: element.getAttribute(ATTRIBUTE_CONTAINER) ?? undefined,
+		container: getAttribute(element, ATTRIBUTE_CONTAINER),
 	});
 }
 
+function getResizable(element: HTMLDialogElement): OuiResizable | undefined {
+	const handle = element.querySelector(SELECTOR_RESIZER);
+
+	if (handle == null) {
+		return;
+	}
+
+	setAttribute(handle, RESIZABLE_ATTRIBUTE_HANDLE, '');
+
+	return createResizable(element);
+}
+
 function getState(element: HTMLDialogElement): OuiDialogState {
 	const state: OuiDialogState = {
 		element,
 		dialog: undefined as never,
 		listeners: [
 			getOnBeforeToggleListener(element),
-			on(element, EVENT_TOGGLE, event => {
+			on(element, 'toggle', event => {
 				const {source} = event;
 
 				if (element.open) {
 					const modal =
-						(source instanceof HTMLButtonElement && source.command === COMMAND_SHOW_MODAL) ||
-						element.matches(SELECTOR_MODAL);
+						(source instanceof HTMLButtonElement && source.command === 'show-modal') ||
+						element.matches(':modal');
 
-					element.setAttribute(ARIA_MODAL, String(modal));
-					element.setAttribute(ATTRIBUTE_OPEN, '');
+					setAria(element, 'modal', modal);
+					setAttribute(element, ATTRIBUTE_OPEN, '');
 
 					element.focus();
+
+					setTimeout(() => {
+						state.resizable?.set();
+					}, 500);
 				} else {
-					element.removeAttribute(ATTRIBUTE_OPEN);
-					element.setAttribute(ARIA_MODAL, String(state.modal));
+					setAttribute(element, ATTRIBUTE_OPEN);
+					setAria(element, 'modal', state.modal);
 
-					element.style.inset = '';
-					element.style.position = '';
-					element.style.transform = '';
+					setStyles(element, {
+						inset: '',
+						position: '',
+						transform: '',
+					});
+
+					state.resizable?.reset();
 				}
 			}),
 		],
-		modal: element.getAttribute(ARIA_MODAL) === TRUE,
+		modal: getAria(element, 'modal') === 'true' || element.matches(':modal'),
 	};
 
 	state.dialog = new OuiDialog(state);
+
 	state.movable = getMovable(element);
+	state.resizable = getResizable(element);
 
 	return state;
 }
@@ -192,25 +226,17 @@ function removeDialog(element: HTMLElement): void {
 
 // #region Variables
 
-const ARIA_MODAL = 'aria-modal';
-
 const ATTRIBUTE = 'oui-dialog';
 
 const ATTRIBUTE_CONTAINER = `${ATTRIBUTE}-container`;
 
 const ATTRIBUTE_OPEN = `${ATTRIBUTE}-open`;
 
-const COMMAND_SHOW_MODAL = 'show-modal';
-
-const EVENT_TOGGLE = 'toggle';
-
 const MESSAGE = 'The element must be an instance of HTMLDialogElement';
 
 const SELECTOR_MOVER = `[${ATTRIBUTE}-mover]`;
 
-const SELECTOR_MODAL = ':modal';
-
-const TRUE = 'true';
+const SELECTOR_RESIZER = `[${ATTRIBUTE}-resizer]`;
 
 const states = new WeakMap<HTMLElement, OuiDialogState>();