@oscarpalmer/oui 0.38.0 → 0.39.0

package/dist/js/event.color-picker-BEpq0Adu.mjs

@@ -0,0 +1,485 @@
+import { createEmbeddedFloatable } from "./floatable/floatable.embedded.mjs";
+import { getLocalization, localize, updateLocalizations } from "./l10n.mjs";
+import { COLOR_PICKER_ATTRIBUTE_COPY_ERROR, COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS, COLOR_PICKER_EXPRESSION_HEX_PREFIX, COLOR_PICKER_INPUT_TYPES, COLOR_PICKER_KEYS, COLOR_PICKER_MESSAGE_INPUT, COLOR_PICKER_MESSAGE_LABEL, COLOR_PICKER_OUTPUTS, COLOR_PICKER_SELECTOR_COPY, COLOR_PICKER_SELECTOR_INPUT, COLOR_PICKER_SELECTOR_OUTPUT_INPUT, COLOR_PICKER_SELECTOR_WELL, COLOR_PICKER_SELECTOR_WELL_KNOB, COLOR_PICKER_TAGNAME, colorPickerLocalizations } from "./color-picker/constants.color-picker.mjs";
+import { copyValue } from "./internal/misc.mjs";
+import { OuiColorPickerEvent } from "./color-picker/models.color-picker.mjs";
+import { updateColorPickerForm, updateColorPickerValidity } from "./color-picker/form.color-picker.mjs";
+import { getColorPickerOutputFormat, updateColorPickerOutputCopyLabel, updateColorPickerOutputInputs, updateColorPickerOutputLabels } from "./color-picker/output.color-picker.mjs";
+import { createColorPickerAnchor, createColorPickerContent } from "./color-picker/dom.color-picker.mjs";
+import { getAria, setAria } from "@oscarpalmer/toretto/aria";
+import { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
+import { setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
+import { toggleStyles } from "@oscarpalmer/toretto/style";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { supportsTouch } from "@oscarpalmer/toretto/touch";
+import { getColor, getForegroundColor, isHexColor, isHslColor, isHslaColor, isHwbColor, isHwbaColor, isRgbColor, isRgbaColor } from "@oscarpalmer/atoms/color";
+import { clamp } from "@oscarpalmer/atoms";
+import { getAttribute as getAttribute$1, setAria as setAria$1, setProperty } from "@oscarpalmer/toretto";
+import { createElement as createElement$1 } from "@oscarpalmer/toretto/create";
+//#region src/js/color-picker/state.color-picker.ts
+function attachColorPicker(state) {
+	const { anchor, content, host, id, inline, input, label, listeners, style } = state;
+	if (!inline) {
+		state.floatable = createEmbeddedFloatable(anchor.container ?? anchor.container, content.element, {
+			position: "below-start",
+			reusable: false
+		});
+		state.floatable.update();
+	}
+	const labelId = `${id}_label`;
+	setAria(host, {
+		describedby: getAria(input, "describedby"),
+		labelledby: labelId
+	});
+	setAttributes(host, { name: input.name === "" ? input.id : input.name });
+	label.element.htmlFor = anchor.input.id;
+	label.element.id = labelId;
+	if (anchor.toggle != null) setAria(anchor.toggle, "expanded", false);
+	input.before(style, anchor.container, content.element);
+	input.remove();
+	listeners.push(on(host, "focusout", () => {
+		setTimeout(() => {
+			if (colorPickerMovement.parameters == null && !host.contains(document.activeElement)) state.floatable?.hide();
+		});
+	}), on(anchor.input, "change", () => {
+		onColorPickerInput(state);
+	}), on(anchor.input, "input", () => {
+		onColorPickerInput(state);
+	}), on(content.element, "beforetoggle", (event) => {
+		if (state.disabled) event.preventDefault();
+	}, { passive: false }), on(content.element, "toggle", (event) => {
+		const open = event.newState === "open";
+		if (anchor.toggle != null) setAria(anchor.toggle, "expanded", open);
+		if (open) content.well.knob.focus();
+	}), on(content.hue.input, "input", () => {
+		onColorPickerHue(state);
+	}));
+	if (content.opacity != null) listeners.push(on(content.opacity.input, "input", () => {
+		onColorPickerOpacity(state);
+	}));
+	if (content.output?.toggle != null) listeners.push(on(content.element, "change", (event) => {
+		onColorPickerOutputValue(event, state);
+	}), on(content.element, "input", (event) => {
+		onColorPickerOutputValue(event, state);
+	}), on(content.output.toggle, "change", () => {
+		onColorPickerOutputFormat(state);
+	}));
+	colorPickerMap.set(host, state);
+	colorPickerSet.add(state);
+}
+function detachColorPicker(state) {
+	const { anchor, content, floatable, host, input, label, style } = state;
+	floatable?.destroy();
+	setAria(host, {
+		describedby: void 0,
+		labelledby: void 0
+	});
+	setAttributes(host, { name: void 0 });
+	label.element.htmlFor = input.id;
+	label.element.id = label.id;
+	anchor.container.before(input);
+	anchor.container.remove();
+	content.element.remove();
+	style.remove();
+	const listeners = state.listeners.splice(0);
+	const { length } = listeners;
+	for (let index = 0; index < length; index += 1) listeners[index]();
+	colorPickerMap.delete(state.host);
+	colorPickerSet.delete(state);
+}
+function initializeColorPicker(element, internals) {
+	const input = element.querySelector("input");
+	if (input == null || !COLOR_PICKER_INPUT_TYPES.has(input.type)) throw new Error(COLOR_PICKER_MESSAGE_INPUT);
+	const label = element.querySelector(`label[for="${input.id}"]`);
+	if (label == null) throw new Error(COLOR_PICKER_MESSAGE_LABEL);
+	element.id = input.id;
+	const id = getColorPickerId();
+	const labelId = label.id;
+	const alpha = element.hasAttribute("alpha");
+	const color = getColor(input.value);
+	const copy = element.hasAttribute("copy");
+	const disabled = element.hasAttribute("disabled") || input.disabled;
+	const inline = element.hasAttribute("inline");
+	const output = getColorPickerOutput(element);
+	const readonly = element.hasAttribute("readonly") || input.readOnly;
+	const required = element.hasAttribute("required") || input.required;
+	const parameters = {
+		alpha,
+		color,
+		copy,
+		id,
+		inline,
+		input,
+		output
+	};
+	const anchor = createColorPickerAnchor(parameters);
+	const content = createColorPickerContent(parameters);
+	const formatted = color.toHexString(alpha);
+	const state = {
+		alpha,
+		anchor,
+		content,
+		copy,
+		disabled,
+		id,
+		inline,
+		input,
+		internals,
+		output,
+		readonly,
+		required,
+		color: {
+			foreground: "",
+			value: color
+		},
+		host: element,
+		label: {
+			element: label,
+			id: labelId
+		},
+		listeners: [],
+		localizations: {
+			component: {},
+			global: colorPickerLocalizations
+		},
+		style: createElement$1("style"),
+		value: {
+			current: formatted,
+			initial: formatted
+		}
+	};
+	attachColorPicker(state);
+	setAttributes(element, {
+		output,
+		alpha: alpha ? "" : void 0,
+		copy: copy ? "" : void 0,
+		inline: inline ? "" : void 0
+	});
+	setColorPickerDisabled(state, "disabled", disabled);
+	setColorPickerDisabled(state, "readonly", readonly);
+	setColorPickerRequired(state, required);
+	setColorPickerValues(state, false);
+	updateColorPickerLabels(state);
+	updateColorPickerValidity(state, isHexColor(state.value.current, alpha));
+	return state;
+}
+const colorPickerMap = /* @__PURE__ */ new WeakMap();
+const colorPickerSet = /* @__PURE__ */ new Set();
+//#endregion
+//#region src/js/color-picker/misc.color-picker.ts
+function getColorPickerId() {
+	index += 1;
+	return `oui_color_picker_${index}`;
+}
+function getColorPickerOutput(element) {
+	const attribute = getAttribute$1(element, "output");
+	return COLOR_PICKER_OUTPUTS.has(attribute) ? attribute : "none";
+}
+function getColorPickerValueType(state, value) {
+	switch (true) {
+		case isHexColor(value, state.alpha): return state.alpha ? "hexa" : "hex";
+		case isHslColor(value): return "hsl";
+		case isHslaColor(value): return "hsla";
+		case isHwbColor(value): return "hwb";
+		case isHwbaColor(value): return "hwba";
+		case isRgbColor(value): return "rgb";
+		case isRgbaColor(value): return "rgba";
+	}
+}
+function setColorPickerLocalizations(first, second) {
+	updateColorPickerLocalizations(colorPickerLocalizations, colorPickerLocalizations.values, first, second);
+}
+function setColorPickerDisabled(state, type, value) {
+	state[type] = value;
+	setAria$1(state.host, type, value);
+	state.anchor.input.readOnly = value;
+	setAria$1(state.anchor.input, type, value);
+	setProperty(state.content.hue.input, "disabled", state.disabled || state.readonly);
+	if (state.anchor.toggle != null) setAria$1(state.anchor.toggle, "disabled", state.disabled);
+	if (state.content.opacity != null) setProperty(state.content.opacity.input, "disabled", state.disabled || state.readonly);
+}
+function setColorPickerRequired(state, value) {
+	state.required = value;
+	setAria$1(state.host, "required", value);
+	setAria$1(state.anchor.input, "required", value);
+	updateColorPickerValidity(state, isHexColor(state.value.current, state.alpha));
+}
+function setColorPickerValue(state, value, type) {
+	if (state == null) return;
+	const actual = type ?? getColorPickerValueType(state, value);
+	if (actual == null || type != null && type !== actual) return;
+	state.color.value[actual] = value;
+	setColorPickerValues(state, true);
+}
+function setColorPickerValues(state, focus, input) {
+	const { anchor, color, content, host, style } = state;
+	color.foreground = getForegroundColor(color.value).hex;
+	const { alpha, hex, hsl, rgb } = color.value;
+	const { hue, lightness, saturation } = hsl;
+	const { blue, green, red } = rgb;
+	const value = input ?? color.value.toHexString(state.alpha);
+	anchor.input.value = value;
+	content.hue.input.valueAsNumber = hue;
+	if (content.opacity != null) content.opacity.input.valueAsNumber = alpha;
+	state.value.current = value;
+	style.textContent = `#${host.id} {
+	--oui-color-picker-alpha: ${alpha};
+	--oui-color-picker-blue: ${blue};
+	--oui-color-picker-green: ${green};
+	--oui-color-picker-foreground: #${color.foreground};
+	--oui-color-picker-hex: #${hex};
+	--oui-color-picker-hue: ${hue};
+	--oui-color-picker-lightness: ${lightness};
+	--oui-color-picker-red: ${red};
+	--oui-color-picker-saturation: ${saturation};
+}`;
+	updateColorPickerForm(state, isHexColor(state.value.current, state.alpha));
+	updateColorPickerOutputInputs(state);
+	updateColorPickerWell(state);
+	if (focus) content.well.knob.focus();
+}
+function updateColorPickerLabels(state) {
+	const { anchor, content, host, localizations } = state;
+	const { component, global } = localizations;
+	if (anchor.toggle != null) setAria$1(anchor.toggle, "label", localize(getLocalization(global, host, "toggle", component), {}, []));
+	content.hue.label.textContent = localize(getLocalization(global, host, "hue", component), {}, []);
+	content.well.label.textContent = localize(getLocalization(global, host, "wellLabel", component), {}, []);
+	updateColorPickerOutputLabels(state);
+	updateColorPickerWell(state);
+	if (content.opacity != null) content.opacity.label.textContent = localize(getLocalization(global, host, "opacity", component), {}, []);
+}
+function updateColorPickerLocalizations(instance, destination, first, second) {
+	updateLocalizations(instance, typeof first === "string" ? { [first]: second } : first, destination, () => {
+		for (const state of colorPickerSet) updateColorPickerLabels(state);
+	});
+}
+function updateColorPickerWell(state) {
+	const { color, content, host, localizations } = state;
+	const { component, global } = localizations;
+	const { lightness, saturation } = color.value.hsl;
+	setAria$1(content.well.knob, "valuetext", localize(getLocalization(global, host, "wellValue", component), {
+		lightness,
+		saturation
+	}, [lightness, saturation]));
+}
+let index = 0;
+//#endregion
+//#region src/js/color-picker/event.color-picker.ts
+function cancelMove(parameters) {
+	parameters.state.color.value.hexa = parameters.value;
+	setColorPickerValues(parameters.state, true);
+	colorPickerMovement.parameters = void 0;
+	styleToggler.remove();
+}
+function onClick(event) {
+	const button = findAncestor(event, COLOR_PICKER_SELECTOR_COPY);
+	if (!(button instanceof HTMLButtonElement)) return;
+	setAttributes(button, {
+		[COLOR_PICKER_ATTRIBUTE_COPY_ERROR]: void 0,
+		[COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS]: void 0
+	});
+	const state = colorPickerMap.get(findAncestor(event, COLOR_PICKER_TAGNAME));
+	if (state == null || state.disabled) return;
+	const copy = button.dataset.color == null ? state.content.output?.copy : state.anchor.copy;
+	if (copy == null) return;
+	if (copy.timer != null) {
+		clearTimeout(copy.timer);
+		copy.timer = void 0;
+	}
+	const color = button.dataset.color ?? getColorPickerOutputFormat(state);
+	if (color == null) return;
+	let value;
+	switch (color) {
+		case "hex":
+			value = state.color.value.toHexString(state.alpha);
+			break;
+		case "hsl":
+			value = state.color.value.toHslString(state.alpha);
+			break;
+		case "hwb":
+			value = state.color.value.toHwbString(state.alpha);
+			break;
+		case "rgb": value = state.color.value.toRgbString(state.alpha);
+	}
+	if (value != null) copyValue(value, () => {
+		console.log("Copied value to clipboard:", value);
+		updateColorPickerCopy(copy, COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS);
+	}, () => {
+		console.warn("Failed to copy value to clipboard:", value);
+		updateColorPickerCopy(copy, COLOR_PICKER_ATTRIBUTE_COPY_ERROR);
+	});
+}
+function onColorPickerHue(state) {
+	const hue = state.content.hue.input.valueAsNumber;
+	state.color.value.hsla = {
+		...state.color.value.hsla,
+		hue
+	};
+	setColorPickerValues(state, false);
+}
+function onColorPickerInput(state) {
+	const { alpha, anchor, color, host } = state;
+	const value = anchor.input.value.replace(COLOR_PICKER_EXPRESSION_HEX_PREFIX, "");
+	if (value.toLowerCase() === (alpha ? color.value.hexa : color.value.hex).toLowerCase()) return;
+	state.value.current = anchor.input.value;
+	const { length } = value;
+	let valid;
+	if (alpha) valid = isHexColor(value, true) && (length === 4 || length === 8);
+	else valid = isHexColor(value) && (length === 3 || length === 6);
+	if (valid) {
+		if (length === 3 || length === 6) color.value.hex = value;
+		else color.value.hexa = value;
+	}
+	setColorPickerValues(state, false, anchor.input.value);
+	dispatch(host, new OuiColorPickerEvent("oui:input", color.value, valid));
+}
+function onColorPickerOpacity(state) {
+	const opacity = state.content.opacity?.input.valueAsNumber;
+	if (opacity == null) return;
+	state.color.value.alpha = opacity;
+	setColorPickerValues(state, false);
+}
+function onColorPickerOutputFormat(state) {
+	const { items, toggle } = state.content.output ?? {};
+	if (items == null || toggle == null) return;
+	const attribute = `${COLOR_PICKER_TAGNAME}-output-${toggle.value}`;
+	for (const item of items) item.hidden = !item.hasAttribute(attribute);
+	if (state.content.output?.copy != null) updateColorPickerOutputCopyLabel(state, state.content.output.copy.button);
+}
+function onColorPickerOutputValue(event, state) {
+	const input = findAncestor(event, COLOR_PICKER_SELECTOR_OUTPUT_INPUT);
+	if (!(input instanceof HTMLInputElement)) return;
+	const color = input.dataset.color;
+	const property = input.dataset.property;
+	if (color == null || property == null) return;
+	if (outputTimer != null) clearTimeout(outputTimer);
+	outputTimer = setTimeout(() => {
+		outputTimer = void 0;
+		state.color.value[color] = {
+			...state.color.value[color],
+			[property]: input.valueAsNumber
+		};
+		setColorPickerValues(state, false);
+	});
+}
+function onEnter(state) {
+	const { alpha, anchor, color, internals } = state;
+	const input = anchor.input.value.replace(COLOR_PICKER_EXPRESSION_HEX_PREFIX, "");
+	const short = alpha ? input.length === 4 : input.length === 3;
+	if (isHexColor(input, alpha) && short) anchor.input.value = color.value.toHexString(alpha);
+	internals.form?.requestSubmit();
+}
+function onKeydown(event) {
+	if (colorPickerMovement.parameters != null && event.key === "Escape") {
+		cancelMove(colorPickerMovement.parameters);
+		return;
+	}
+	const knob = findAncestor(event, COLOR_PICKER_SELECTOR_WELL_KNOB);
+	if (!(event.key === "Enter" && findAncestor(event, COLOR_PICKER_SELECTOR_INPUT) != null || COLOR_PICKER_KEYS.has(event.key) && knob != null)) return;
+	const state = colorPickerMap.get(findAncestor(event, COLOR_PICKER_TAGNAME));
+	if (state == null || state.disabled || state.readonly) return;
+	event.preventDefault();
+	if (event.key === "Enter") {
+		onEnter(state);
+		return;
+	}
+	if (knob == null) return;
+	const modifier = event.shiftKey ? 10 : 1;
+	let { lightness, saturation } = state.color.value.hsl;
+	switch (event.key) {
+		case "ArrowDown":
+			lightness -= 1 * modifier;
+			break;
+		case "ArrowLeft":
+			saturation -= 1 * modifier;
+			break;
+		case "ArrowRight":
+			saturation += 1 * modifier;
+			break;
+		case "ArrowUp":
+			lightness += 1 * modifier;
+			break;
+		case "End":
+			lightness = 0;
+			break;
+		case "Home":
+			lightness = 100;
+			break;
+		case "PageDown":
+			lightness -= 10;
+			break;
+		case "PageUp": lightness += 10;
+	}
+	state.color.value.hsl = {
+		...state.color.value.hsl,
+		lightness: clamp(lightness, 0, 100),
+		saturation: clamp(saturation, 0, 100)
+	};
+	setColorPickerValues(state, false);
+}
+function onPointerdown(event) {
+	if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || (supportsTouch.value ? event.type === "mousedown" : event.type === "touchstart" || event.button !== 0)) return;
+	const well = findAncestor(event, COLOR_PICKER_SELECTOR_WELL);
+	if (well == null) return;
+	const element = findAncestor(event, COLOR_PICKER_TAGNAME);
+	if (element == null) return;
+	if (supportsTouch.value) event.preventDefault();
+	if (getEventPosition(event) == null) return;
+	const state = colorPickerMap.get(element);
+	if (state == null || state.disabled || state.readonly) return;
+	colorPickerMovement.parameters = {
+		state,
+		rectangle: well.getBoundingClientRect(),
+		value: state.color.value.hexa
+	};
+	styleToggler.set();
+}
+function onPointermove(event) {
+	if (colorPickerMovement.parameters == null) return;
+	const position = getEventPosition(event);
+	if (position != null) updateColorPickerValues(colorPickerMovement.parameters, position);
+}
+function onPointerup(event) {
+	if (colorPickerMovement.parameters == null) return;
+	const position = getEventPosition(event);
+	if (position != null) updateColorPickerValues(colorPickerMovement.parameters, position);
+	colorPickerMovement.parameters = void 0;
+	styleToggler.remove();
+}
+function updateColorPickerCopy(copy, attribute) {
+	const { button } = copy;
+	setAttribute(button, attribute, "");
+	copy.timer = setTimeout(() => {
+		copy.timer = void 0;
+		setAttribute(button, attribute, void 0);
+	}, styleTime);
+}
+function updateColorPickerValues(parameters, position) {
+	const { rectangle, state } = parameters;
+	const { x, y } = position;
+	const top = clamp((y - rectangle.top) / rectangle.height, 0, 1);
+	const left = clamp((x - rectangle.left) / rectangle.width, 0, 1);
+	state.color.value.hsl = {
+		...state.color.value.hsl,
+		lightness: (1 - top) * 100,
+		saturation: left * 100
+	};
+	setColorPickerValues(state, true);
+}
+const styleToggler = toggleStyles(document.body, {
+	touchAction: "none",
+	userSelect: "none",
+	webkitUserSelect: "none"
+});
+const colorPickerMovement = {};
+const styleTime = 2500;
+let outputTimer;
+on(document, "click", onClick);
+on(document, "keydown", onKeydown, { passive: false });
+on(document, "mousedown", onPointerdown);
+on(document, "pointermove", onPointermove);
+on(document, "pointerup", onPointerup);
+on(document, "touchcancel", onPointerup);
+on(document, "touchstart", onPointerdown, { passive: false });
+//#endregion
+export { attachColorPicker as _, onColorPickerOutputFormat as a, detachColorPicker as b, getColorPickerOutput as c, setColorPickerLocalizations as d, setColorPickerRequired as f, updateColorPickerLocalizations as g, updateColorPickerLabels as h, onColorPickerOpacity as i, getColorPickerValueType as l, setColorPickerValues as m, onColorPickerHue as n, onColorPickerOutputValue as o, setColorPickerValue as p, onColorPickerInput as r, getColorPickerId as s, colorPickerMovement as t, setColorPickerDisabled as u, colorPickerMap as v, initializeColorPicker as x, colorPickerSet as y };

package/dist/js/floatable/floatable.embedded.d.mts

@@ -1,2 +1,2 @@
-import { a as OuiFloatablePosition, c as getOnBeforeToggleListener, i as OuiFloatableOptions, l as removeFloatable, n as CreateOuiFloatableOptions, o as createEmbeddedFloatable, r as OuiFloatable, s as createFloatable, t as ATTRIBUTE_FLOATABLE } from "../floatable.embedded-Bct4U5Dm.mjs";
+import { a as OuiFloatablePosition, c as getOnBeforeToggleListener, i as OuiFloatableOptions, l as removeFloatable, n as CreateOuiFloatableOptions, o as createEmbeddedFloatable, r as OuiFloatable, s as createFloatable, t as ATTRIBUTE_FLOATABLE } from "../floatable.embedded-DQYkXt8X.mjs";
 export { ATTRIBUTE_FLOATABLE, CreateOuiFloatableOptions, OuiFloatable, OuiFloatableOptions, OuiFloatablePosition, createEmbeddedFloatable, createFloatable, getOnBeforeToggleListener, removeFloatable };

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;

package/dist/js/floatable/floatable.standalone.d.mts

@@ -1,2 +1,2 @@
-import { a as OuiFloatablePosition, n as CreateOuiFloatableOptions, r as OuiFloatable, s as createFloatable } from "../floatable.embedded-Bct4U5Dm.mjs";
+import { a as OuiFloatablePosition, n as CreateOuiFloatableOptions, r as OuiFloatable, s as createFloatable } from "../floatable.embedded-DQYkXt8X.mjs";
 export { type CreateOuiFloatableOptions, type OuiFloatable, type OuiFloatablePosition, createFloatable };

package/dist/js/{floatable.embedded-Bct4U5Dm.d.mts → floatable.embedded-DQYkXt8X.d.mts}

@@ -45,7 +45,7 @@ type OuiFloatableOptions = {
   position: OuiFloatablePosition;
   reusable: boolean;
 };
-type OuiFloatablePosition = 'above' | 'above-end' | 'above-start' | 'below' | 'below-end' | 'below-start' | 'end' | 'end-bottom' | 'end-top' | 'start' | 'start-bottom' | 'start-top';
+type OuiFloatablePosition = "above" | "above-end" | "above-start" | "below" | "below-end" | "below-start" | "end" | "end-bottom" | "end-top" | "start" | "start-bottom" | "start-top";
 type OuiFloatableState = {
   anchor: HTMLElement;
   content: HTMLElement;

package/dist/js/focus-trap/focus-trap.embedded.d.mts

@@ -1,2 +1,2 @@
-import { a as OuiFocusTrapOptions, i as OuiFocusTrap, n as ATTRIBUTE_FOCUSTRAP_CONTAIN, o as createFocusTrap, r as ATTRIBUTE_FOCUSTRAP_NOESCAPE, s as removeFocusTrap, t as ATTRIBUTE_FOCUSTRAP } from "../focus-trap.embedded-DR8NpZfr.mjs";
+import { a as OuiFocusTrapOptions, i as OuiFocusTrap, n as ATTRIBUTE_FOCUSTRAP_CONTAIN, o as createFocusTrap, r as ATTRIBUTE_FOCUSTRAP_NOESCAPE, s as removeFocusTrap, t as ATTRIBUTE_FOCUSTRAP } from "../focus-trap.embedded-CjyFQYow.mjs";
 export { ATTRIBUTE_FOCUSTRAP, ATTRIBUTE_FOCUSTRAP_CONTAIN, ATTRIBUTE_FOCUSTRAP_NOESCAPE, OuiFocusTrap, OuiFocusTrapOptions, createFocusTrap, removeFocusTrap };

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/focus-trap/focus-trap.standalone.d.mts

@@ -1,2 +1,2 @@
-import { a as OuiFocusTrapOptions, i as OuiFocusTrap, o as createFocusTrap } from "../focus-trap.embedded-DR8NpZfr.mjs";
+import { a as OuiFocusTrapOptions, i as OuiFocusTrap, o as createFocusTrap } from "../focus-trap.embedded-CjyFQYow.mjs";
 export { type OuiFocusTrap, type OuiFocusTrapOptions, createFocusTrap };

package/dist/js/{focus-trap.embedded-DR8NpZfr.d.mts → focus-trap.embedded-CjyFQYow.d.mts}

@@ -70,7 +70,7 @@ type OuiFocusTrapState = {
 declare function createFocusTrap(element: HTMLElement, options?: OuiFocusTrapOptions): OuiFocusTrap;
 declare function removeFocusTrap(element: HTMLElement): void;
 declare const ATTRIBUTE_FOCUSTRAP = "oui-focus-trap";
-declare const ATTRIBUTE_FOCUSTRAP_CONTAIN = "oui-focus-trap-contain";
-declare const ATTRIBUTE_FOCUSTRAP_NOESCAPE = "oui-focus-trap-noescape";
+declare const ATTRIBUTE_FOCUSTRAP_CONTAIN: string;
+declare const ATTRIBUTE_FOCUSTRAP_NOESCAPE: string;
 //#endregion
 export { OuiFocusTrapOptions as a, OuiFocusTrap as i, ATTRIBUTE_FOCUSTRAP_CONTAIN as n, createFocusTrap as o, ATTRIBUTE_FOCUSTRAP_NOESCAPE as r, removeFocusTrap as s, ATTRIBUTE_FOCUSTRAP as t };

package/dist/js/{index-DJdFlTLm.d.mts → index-C5D3-oiI.d.mts}

@@ -1,6 +1,6 @@
 import { t as OuiLocalizations } from "./l10n-Bn-7RcwR.mjs";
-import { d as OuiListboxType, n as OuiListboxAutoComplete, o as OuiListboxLocalizations } from "./listbox.model-CRReGOmu.mjs";
-import { c as COMBOBOX_TAGNAME } from "./constants.combobox-DmRAMC64.mjs";
+import { d as OuiListboxType, n as OuiListboxAutoComplete, o as OuiListboxLocalizations } from "./listbox.model-BHPA7GM4.mjs";
+import { c as COMBOBOX_TAGNAME } from "./constants.combobox-8EMRmv09.mjs";
 //#region src/js/combobox/misc.combobox.d.ts
 declare function getComboboxAutoComplete(element: OuiComboboxElement, select: boolean): OuiListboxAutoComplete;
 declare function getComboboxId(): string;

package/dist/js/index.d.mts

@@ -1,14 +1,14 @@
-import { OuiColorPickerElement, OuiColorPickerEvent, setColorPickerLocalizations } from "./color-picker.mjs";
-import { a as OuiFloatablePosition, n as CreateOuiFloatableOptions, r as OuiFloatable, s as createFloatable } from "./floatable.embedded-Bct4U5Dm.mjs";
-import { a as setComboboxLocalizations, t as OuiComboboxElement } from "./index-DJdFlTLm.mjs";
-import { d as OuiSortable, f as createSortable, g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "./draggable-a6w0J1OD.mjs";
+import { a as OuiFloatablePosition, n as CreateOuiFloatableOptions, r as OuiFloatable, s as createFloatable } from "./floatable.embedded-DQYkXt8X.mjs";
+import { A as OuiColorPickerEvent, B as OuiColorPickerElement, G as setColorPickerLocalizations } from "./constants.color-picker-B-gFjL8m.mjs";
+import { a as setComboboxLocalizations, t as OuiComboboxElement } from "./index-C5D3-oiI.mjs";
+import { d as OuiSortable, f as createSortable, g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "./draggable-B5-70SZm.mjs";
 import "./movable/movable.standalone.mjs";
-import { a as createResizable, n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.embedded-3qoR0Bjm.mjs";
+import { a as createResizable, n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.embedded-dvhdfQgt.mjs";
 import "./resizable/resizable.standalone.mjs";
 import { OuiDialog, getDialog } from "./dialog.mjs";
 import "./floatable/floatable.standalone.mjs";
-import { a as OuiFocusTrapOptions, i as OuiFocusTrap, o as createFocusTrap } from "./focus-trap.embedded-DR8NpZfr.mjs";
-import { n as setListboxLocalizations } from "./misc.listbox-gnoJhrTr.mjs";
+import { a as OuiFocusTrapOptions, i as OuiFocusTrap, o as createFocusTrap } from "./focus-trap.embedded-CjyFQYow.mjs";
+import { n as setListboxLocalizations } from "./misc.listbox-mZMuYOxg.mjs";
 import { OuiListboxElement } from "./listbox/index.mjs";
 import { OuiPopover, getPopover } from "./popover.mjs";
 import "./sortable/sortable.standalone.mjs";

package/dist/js/index.mjs

@@ -1,17 +1,19 @@
 import { createFloatable } from "./floatable/floatable.embedded.mjs";
-import { OuiColorPickerElement, OuiColorPickerEvent, setColorPickerLocalizations } from "./color-picker.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 { D as setComboboxLocalizations } from "./state.combobox-Qm3FWzYW.mjs";
+import { OuiColorPickerEvent } from "./color-picker/models.color-picker.mjs";
+import { d as setColorPickerLocalizations } from "./event.color-picker-BEpq0Adu.mjs";
+import { OuiColorPickerElement } from "./color-picker/index.mjs";
+import { D as setComboboxLocalizations } from "./state.combobox-BWDFHwoi.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";
-import { n as setListboxLocalizations } from "./misc.listbox-Cyz2CRDy.mjs";
+import { n as setListboxLocalizations } from "./misc.listbox-DKB-j0UK.mjs";
 import { OuiListboxElement } from "./listbox/index.mjs";
 import { getPopover } from "./popover.mjs";
 import "./resizable/resizable.standalone.mjs";

package/dist/js/internal/attributable.d.mts

@@ -1,4 +1,3 @@
 //#region src/js/internal/attributable.d.ts
-declare function attributable(attribute: string, add: (element: HTMLElement) => void, remove: (element: HTMLElement) => void): void;
-//#endregion
-export { attributable };
+export declare function attributable(attribute: string, add: (element: HTMLElement) => void, remove: (element: HTMLElement) => void): void;
+//#endregion

package/dist/js/internal/draggable.d.mts

@@ -1,2 +1,2 @@
-import { a as OuiDraggableGlobals, c as addDraggable, i as OuiDraggableBound, l as getDraggableStates, n as OuiDragMovePosition, o as OuiDraggableItem, r as OuiDraggable, s as OuiDraggableState, t as CreateOuiDraggableOptions, u as removeDraggable } from "../draggable-a6w0J1OD.mjs";
+import { a as OuiDraggableGlobals, c as addDraggable, i as OuiDraggableBound, l as getDraggableStates, n as OuiDragMovePosition, o as OuiDraggableItem, r as OuiDraggable, s as OuiDraggableState, t as CreateOuiDraggableOptions, u as removeDraggable } from "../draggable-B5-70SZm.mjs";
 export { CreateOuiDraggableOptions, OuiDragMovePosition, OuiDraggable, OuiDraggableBound, OuiDraggableGlobals, OuiDraggableItem, OuiDraggableState, addDraggable, getDraggableStates, removeDraggable };

package/dist/js/internal/draggable.mjs

@@ -1,10 +1,10 @@
-import { clamp } from "@oscarpalmer/atoms/number";
-import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
 import { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto/find";
-import { setStyle, setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
-import supportsTouch from "@oscarpalmer/toretto/touch";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
 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 {
 	#destroyed = false;