@oscarpalmer/oui 0.37.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

@@ -23,13 +23,7 @@ var OuiFloatable = class {
 	}
 	constructor(state, standalone) {
 		this.#state = state;
-		const { anchor, content } = state;
-		if (standalone) {
-			setAttribute(content, ATTRIBUTE_FLOATABLE, "");
-			content.popover = "manual";
-		} else content.popover ??= "auto";
-		setStyle(anchor, "anchorName", state.name);
-		setStyle(content, "positionAnchor", state.name);
+		this.#initialize(state, standalone);
 	}
 	/**
 	* Destroy the floatable, removing it from the DOM and cleaning up references
@@ -61,6 +55,15 @@ var OuiFloatable = class {
 	update(position) {
 		if (!this.#destroyed) setPosition(this.#state, position);
 	}
+	#initialize(state, standalone) {
+		const { anchor, content } = state;
+		if (standalone) {
+			setAttribute(content, ATTRIBUTE_FLOATABLE, "");
+			content.popover = "manual";
+		} else content.popover ??= "auto";
+		setStyle(anchor, "anchorName", state.name);
+		setStyle(content, "positionAnchor", state.name);
+	}
 };
 function getAnchorName(anchor) {
 	let { anchorName } = anchor.style;
@@ -101,7 +104,7 @@ function createInstance(anchor, content, options, standalone) {
 function getOnBeforeToggleListener(element) {
 	return on(element, "beforetoggle", (event) => {
 		const { newState, source } = event;
-		if (newState === "open" && source != null && getAria(source, "disabled") === "true") event.preventDefault();
+		if (newState === "open" && source != null && getAria(source, "disabled") === true) event.preventDefault();
 	}, { passive: false });
 }
 function getOptions(input) {

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.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-EfkUSals.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;
@@ -46,6 +46,14 @@ declare class OuiComboboxElement extends HTMLElement {
    * Set the filter value
    */
   set filter(value: string);
+  /**
+   * Form element associated with the combobox
+   */
+  get form(): HTMLFormElement | null;
+  /**
+   * Label elements associated with the combobox
+   */
+  get labels(): NodeList;
   /**
    * Maximum number of selected options
    */
@@ -94,6 +102,14 @@ declare class OuiComboboxElement extends HTMLElement {
    * Type of combobox
    */
   get type(): OuiListboxType;
+  /**
+   * Validation message for the combobox
+   */
+  get validationMessage(): string;
+  /**
+   * Validity state for the combobox
+   */
+  get validity(): ValidityState;
   /**
    * Current value
    */
@@ -110,8 +126,18 @@ declare class OuiComboboxElement extends HTMLElement {
    * Set the values
    */
   set values(values: unknown[]);
+  /**
+   * Can the combobox be validated?
+   */
+  get willValidate(): boolean;
   constructor();
   attributeChangedCallback(name: string, _: string | null, value: string | null): void;
+  /**
+   * Check if the combobox is valid
+   *
+   * @returns `true` if the combobox is valid, otherwise `false`
+   */
+  checkValidity(): boolean;
   /**
    * Clear all selected options
    */
@@ -120,7 +146,19 @@ declare class OuiComboboxElement extends HTMLElement {
   disconnectedCallback(): void;
   formDisabledCallback(disabled: boolean): void;
   formResetCallback(): void;
-  formStateRestoreCallback(state: string | File | FormData, reason: unknown): void;
+  formStateRestoreCallback(state: unknown, reason: unknown): void;
+  /**
+   * Check if the combobox is valid and report any validation errors
+   *
+   * @returns `true` if the combobox is valid, otherwise `false`
+   */
+  reportValidity(): boolean;
+  /**
+   * Set a custom validation message for the combobox
+   *
+   * @param message Validation message
+   */
+  setCustomValidity(message: string): void;
   /**
    * Set combobox localizations for a specific language
    *

package/dist/js/index.d.mts

@@ -1,17 +1,18 @@
-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-EfkUSals.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";
 import { OuiSplitterElement } from "./splitter.mjs";
 import { OuiTabsElement, OuiTabsEvent } from "./tabs.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, OuiListboxElement, type OuiMovable, type OuiPopover, type OuiResizable, type OuiSortable, OuiSplitterElement, OuiTabsElement, OuiTabsEvent, type OuiTooltip, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setComboboxLocalizations, setListboxLocalizations, setTooltipDelay };
+export { type CreateOuiFloatableOptions, type CreateOuiDraggableOptions as CreateOuiMovableOptions, type CreateOuiDraggableOptions as CreateOuiSortableOptions, type CreateOuiResizableOptions, OuiColorPickerElement, OuiColorPickerEvent, OuiComboboxElement, type OuiDialog, type OuiFloatable, type OuiFloatablePosition, type OuiFocusTrap, type OuiFocusTrapOptions, OuiListboxElement, type OuiMovable, type OuiPopover, type OuiResizable, type OuiSortable, OuiSplitterElement, OuiTabsElement, OuiTabsEvent, type OuiTooltip, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setColorPickerLocalizations, setComboboxLocalizations, setListboxLocalizations, setTooltipDelay };