@oscarpalmer/oui 0.26.0 → 0.27.0

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

@@ -0,0 +1,184 @@
+import { attributable } from "../internal/attributable.mjs";
+import { OuiDraggable, addDraggable, getDraggableStates, removeDraggable } from "../internal/draggable.mjs";
+import { getPosition, on } from "@oscarpalmer/toretto/event";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+//#region src/js/movable/movable.embedded.ts
+var OuiMovable = class extends OuiDraggable {
+	#element;
+	#style;
+	constructor(element, options) {
+		const style = {
+			inset: element.style.inset,
+			position: element.style.position
+		};
+		super("movable", "move", ATTRIBUTE_MOVABLE, element, {
+			container: {
+				attribute: ATTRIBUTE_CONTAINER,
+				map: CONTAINERS,
+				onDestroy: destroyContainer,
+				onInitialize: initializeContainer
+			},
+			direction: {
+				attribute: ATTRIBUTE_DIRECTION,
+				onAfter: afterDirection
+			},
+			drag: {
+				onBegin,
+				onCancel,
+				onEnd,
+				onMove
+			},
+			input: options,
+			position: {
+				getOffset: getOffsetPosition,
+				getOriginal: getOriginalPosition
+			},
+			getDragged() {
+				return element;
+			},
+			getOrigin() {
+				return element;
+			}
+		}, {
+			style,
+			hasHandles: element.querySelector(SELECTOR_HANDLE) != null,
+			moved: false
+		});
+		this.#element = element;
+		this.#style = style;
+	}
+	/**
+	* Destroys the _Movable_
+	*/
+	destroy() {
+		MOVED.delete(this);
+		this.#element.style.inset = this.#style.inset;
+		this.#element.style.position = this.#style.position;
+		this.#element = void 0;
+		this.#style = void 0;
+		super.destroy();
+	}
+};
+function afterDirection(item) {
+	const container = item.state.container?.getBoundingClientRect();
+	if (container != null) setOffset(item.state, container);
+}
+/**
+* Creates _(or retrieves)_ a _OuiMovable_ instance for an element
+*
+* @param element Element to make movable
+* @returns _OuiMovable_ instance
+*/
+function createMovable(element, options) {
+	if (!isHTMLOrSVGElement(element)) throw new TypeError(MESSAGE);
+	return addMovable(element, options);
+}
+function destroyContainer(_, container, empty) {
+	if (empty) resizer.unobserve(container);
+}
+function getOffsetPosition(globals, _, __, position) {
+	return {
+		x: position.x - (globals.element?.rectangle.left ?? 0),
+		y: position.y - (globals.element?.rectangle.top ?? 0)
+	};
+}
+function getOriginalPosition(globals) {
+	return {
+		x: globals.element?.rectangle.left ?? 0,
+		y: globals.element?.rectangle.top ?? 0
+	};
+}
+function initializeContainer(item) {
+	resizer.observe(item.state.container);
+}
+function onBegin() {}
+function onCancel(globals, item) {
+	const { element, moved, style } = item.state;
+	const { x, y } = globals.original ?? {
+		x: 0,
+		y: 0
+	};
+	if (moved) element.style.inset = `${y}px auto auto ${x}px`;
+	else {
+		element.style.position = style.position;
+		element.style.inset = style.inset;
+	}
+	element.removeAttribute(ATTRIBUTE_MOVING);
+}
+function onEnd(event, globals, item, reset) {
+	const movable = item.instance;
+	const state = item.state;
+	state.element.removeAttribute(ATTRIBUTE_MOVING);
+	if (!state.moved) {
+		state.moved = true;
+		if (state.container != null) MOVED.add(movable);
+	}
+	const container = state.container?.getBoundingClientRect();
+	if (container != null) setOffset(state, container);
+	const end = new CustomEvent(EVENT_END, {
+		detail: {
+			from: { ...globals.original },
+			to: getPosition(event)
+		},
+		cancelable: true
+	});
+	state.element.dispatchEvent(end);
+	setTimeout(() => {
+		if (end.defaultPrevented) onCancel(globals, item);
+		reset();
+	});
+}
+function onMove(_, globals, __, position) {
+	globals.element?.node.setAttribute(ATTRIBUTE_MOVING, "");
+	return {
+		from: { ...globals.original },
+		to: { ...position.calculated }
+	};
+}
+function onResize(entries) {
+	const { length } = entries;
+	for (let index = 0; index < length; index += 1) {
+		const entry = entries[index];
+		const set = CONTAINERS.get(entry.target);
+		if (set == null) continue;
+		for (const movable of set) reposition(movable);
+	}
+}
+function onScroll() {
+	for (const moved of MOVED) reposition(moved);
+}
+function reposition(movable) {
+	const state = getDraggableStates(movable.element)?.movable;
+	if (state == null || !state.moved || state.container == null) return;
+	const container = state.container.getBoundingClientRect();
+	const x = container.left + (state.offset?.x ?? 0);
+	const y = container.top + (state.offset?.y ?? 0);
+	state.element.style.inset = `${y}px auto auto ${x}px`;
+}
+function setOffset(state, container) {
+	state.offset = {};
+	const element = state.element.getBoundingClientRect();
+	state.offset.y = element.top - container.top;
+	state.offset.x = element.left - container.left;
+}
+const ATTRIBUTE_MOVABLE = "oui-movable";
+const ATTRIBUTE_CONTAINER = `${ATTRIBUTE_MOVABLE}-container`;
+const ATTRIBUTE_DIRECTION = `${ATTRIBUTE_MOVABLE}-direction`;
+const ATTRIBUTE_MOVABLE_HANDLE = `${ATTRIBUTE_MOVABLE}-handle`;
+const ATTRIBUTE_MOVING = `${ATTRIBUTE_MOVABLE}-moving`;
+const CONTAINERS = /* @__PURE__ */ new Map();
+const EVENT_END = "move:end";
+const MESSAGE = "The element must be an instance of HTMLElement or SVGElement";
+const MOVED = /* @__PURE__ */ new Set();
+const SELECTOR_HANDLE = `[${ATTRIBUTE_MOVABLE_HANDLE}]`;
+const bound = {
+	constructor: OuiMovable,
+	property: "movable"
+};
+const resizer = new ResizeObserver(onResize);
+const addMovable = addDraggable.bind(bound);
+const removeMovable = removeDraggable.bind(bound);
+on(document, "scroll", onScroll);
+attributable(ATTRIBUTE_MOVABLE, addMovable, removeMovable);
+//#endregion
+export { ATTRIBUTE_MOVABLE, ATTRIBUTE_MOVABLE_HANDLE, OuiMovable, createMovable };

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

@@ -0,0 +1,2 @@
+import { g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "../draggable-zszaW1qS.mjs";
+export { type CreateOuiDraggableOptions as CreateOuiMovableOptions, type OuiMovable, createMovable };

package/dist/js/movable/movable.standalone.mjs

@@ -0,0 +1,2 @@
+import { createMovable } from "./movable.embedded.mjs";
+export { createMovable };

package/dist/js/popover.d.mts

@@ -1,5 +1,5 @@
-import { n as OuiFloatable } from "./embedded-ai6cqURc.mjs";
-import { i as OuiFocusTrap } from "./embedded-CHK82Uh5.mjs";
+import { i as OuiFloatable } from "./floatable.embedded-YxGwzgbE.mjs";
+import { i as OuiFocusTrap } from "./focus-trap.embedded-DR8NpZfr.mjs";
 import { RemovableEventListener } from "@oscarpalmer/toretto/models";
 
 //#region src/js/popover.d.ts
@@ -9,6 +9,7 @@ declare class OuiPopover {
    * Is the popover open?
    */
   get open(): boolean;
+  set open(value: boolean);
   constructor(state: OuiPopoverState);
   /**
    * Closes the popover

package/dist/js/popover.mjs

@@ -1,6 +1,6 @@
-import { createEmbeddedFloatable, getOnBeforeToggleListener } from "./floatable/embedded.mjs";
+import { createEmbeddedFloatable, getOnBeforeToggleListener } from "./floatable/floatable.embedded.mjs";
 import { attributable } from "./internal/attributable.mjs";
-import { createFocusTrap } from "./focus-trap/embedded.mjs";
+import { createFocusTrap } from "./focus-trap/focus-trap.embedded.mjs";
 import { on } from "@oscarpalmer/toretto/event";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/popover.ts
@@ -12,6 +12,10 @@ var OuiPopover = class {
 	get open() {
 		return this.#state.content.checkVisibility();
 	}
+	set open(value) {
+		if (value === true) this.show();
+		else if (value === false) this.hide();
+	}
 	constructor(state) {
 		this.#state = state;
 		this.#state.floatable.update();
@@ -93,7 +97,8 @@ const STATE_OPEN = "open";
 const TRUE = "true";
 const options = {
 	attribute: `${ATTRIBUTE}position`,
-	position: "below-start"
+	position: "below-start",
+	reusable: false
 };
 const states = /* @__PURE__ */ new WeakMap();
 let ignoreFocus = false;

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

@@ -0,0 +1,2 @@
+import { d as OuiSortable, f as createSortable } from "../draggable-zszaW1qS.mjs";
+export { OuiSortable, createSortable };

package/dist/js/{sortable.mjs → sortable/sortable.embedded.mjs}

@@ -1,18 +1,13 @@
-import { attributable } from "./internal/attributable.mjs";
-import { OuiDraggable, addDraggable, removeDraggable } from "./internal/draggable.mjs";
+import { attributable } from "../internal/attributable.mjs";
+import { OuiDraggable, addDraggable, getDraggableStates, removeDraggable } from "../internal/draggable.mjs";
 import { getPosition } from "@oscarpalmer/toretto/event";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import { findAncestor, getElementFromPosition } from "@oscarpalmer/toretto/find";
 import { createElement } from "@oscarpalmer/toretto/create";
-//#region src/js/sortable.ts
+//#region src/js/sortable/sortable.embedded.ts
 var OuiSortable = class extends OuiDraggable {
-	connections;
-	origin;
-	get dragged() {
-		return getDragPlaceholder();
-	}
-	constructor(element) {
-		super("sort", element, {
+	constructor(element, options) {
+		super("sortable", "sort", ATTRIBUTE, element, {
 			container: {
 				attribute: ATTRIBUTE_CONTAINER,
 				map: CONTAINERS
@@ -24,17 +19,19 @@ var OuiSortable = class extends OuiDraggable {
 				onEnd,
 				onMove
 			},
+			input: options,
 			position: {
 				getOffset: getOffsetPosition,
 				getOriginal: getOriginalPosition
-			}
-		});
-		this.connections = this.element.getAttribute(ATTRIBUTE_CONNECTIONS);
+			},
+			getDragged: getDragPlaceholder,
+			getOrigin: () => (getDraggableStates(element)?.sortable)?.origin
+		}, { connections: element.getAttribute(ATTRIBUTE_CONNECTIONS) });
 	}
 };
 function afterEnd(insert, from, events, elements, position, valid) {
 	elements.origin?.removeAttribute(ATTRIBUTE_ORIGIN);
-	from.origin = void 0;
+	from.state.origin = void 0;
 	resetPlaceholders();
 	if (!valid || events.some((event) => event.defaultPrevented)) return;
 	if (insert !== "insert") {
@@ -49,44 +46,50 @@ function afterEnd(insert, from, events, elements, position, valid) {
 	elements.target?.insertAdjacentElement(insertion, elements.origin);
 	document.body.removeAttribute(ATTRIBUTE_ACTIVE);
 }
+/**
+* Creates _(or retrieves)_ a _OuiSortable_ instance for an element
+*
+* @param element Element to make sortable
+* @returns _OuiSortable_ instance
+*/
+function createSortable(element, options) {
+	if (!isHTMLOrSVGElement(element)) throw new TypeError(MESSAGE);
+	return addSortable(element, options);
+}
 function getDragPlaceholder() {
 	placeholder.drag.default ??= createElement("div");
 	return placeholder.drag.custom ?? placeholder.drag.default;
 }
-function getOffsetPosition(_, draggable, element, position) {
+function getOffsetPosition(_, item, element, position) {
 	const rectangle = element.getBoundingClientRect();
 	return {
-		x: draggable.horizontal ? 0 : position.x - rectangle.left,
-		y: draggable.vertical ? 0 : position.y - rectangle.top
+		x: item.state.horizontal ? 0 : position.x - rectangle.left,
+		y: item.state.vertical ? 0 : position.y - rectangle.top
 	};
 }
 function getOriginalPosition(_, __, position) {
 	return position;
 }
-function getPositionPlaceholder(sortable) {
+function getPositionPlaceholder(item) {
 	placeholder.position ??= createElement("div");
 	placeholder.position.setAttribute(ATTRIBUTE_PLACEHOLDER_POSITION, "");
-	if (sortable.origin != null) placeholder.position.style.setProperty("--placeholder-height", `${sortable.origin.getBoundingClientRect().height}px`);
+	if (item.state.origin != null) placeholder.position.style.setProperty("--placeholder-height", `${item.state.origin.getBoundingClientRect().height}px`);
 	return placeholder.position;
 }
-function onBegin(_, state, draggable, element) {
-	const sortable = draggable;
-	sortable.origin = element;
-	setPlaceholder(state, sortable, element);
+function onBegin(_, globals, item, element) {
+	item.state.origin = element;
+	setPlaceholder(globals, item, element);
 	element.setAttribute(ATTRIBUTE_ORIGIN, "");
 	document.body.setAttribute(ATTRIBUTE_ACTIVE, "");
 }
-function onCancel(_, draggable) {
-	const sortable = draggable;
-	const { origin } = sortable;
-	origin?.removeAttribute(ATTRIBUTE_ORIGIN);
+function onCancel(_, item) {
+	item.state.origin?.removeAttribute(ATTRIBUTE_ORIGIN);
 	document.body.removeAttribute(ATTRIBUTE_ACTIVE);
 	resetPlaceholders();
-	sortable.origin = void 0;
+	item.state.origin = void 0;
 }
-function onEnd(event, state, draggable, reset) {
-	const from = draggable;
-	const { origin } = from;
+function onEnd(event, globals, item, reset) {
+	const { origin } = item.state;
 	const position = getPosition(event) ?? {
 		x: 0,
 		y: 0
@@ -96,18 +99,26 @@ function onEnd(event, state, draggable, reset) {
 	if (element?.hasAttribute(ATTRIBUTE_PLACEHOLDER_POSITION)) if (element.getAttribute(ATTRIBUTE_PLACEHOLDER_POSITION) === "after") element = element.previousElementSibling;
 	else element = element.nextElementSibling;
 	let insert = "insert";
-	let to;
+	let toInstance;
+	let toState;
 	if (element == null) {
 		element = findAncestor(target, SELECTOR);
-		to = state.instances.get(element)?.sortable;
+		toInstance = globals.instances.get(element)?.sortable;
+		toState = globals.states.get(element)?.sortable;
 		insert = element == null ? void 0 : element.children.length === 0 ? "append" : "prepend";
-	} else to = state.instances.get(element.parentElement)?.sortable;
-	const valid = insert != null && validatePosition(state, from, to, position);
+	} else {
+		toInstance = globals.instances.get(element.parentElement)?.sortable;
+		toState = globals.states.get(element.parentElement)?.sortable;
+	}
+	const valid = insert != null && validatePosition(globals, item, {
+		instance: toInstance,
+		state: toState
+	}, position);
 	const options = {
 		detail: valid ? {
 			from: {
 				element: origin,
-				position: { ...state.original }
+				position: { ...globals.original }
 			},
 			to: {
 				element,
@@ -119,25 +130,34 @@ function onEnd(event, state, draggable, reset) {
 	};
 	const fromEvent = new CustomEvent(EVENT_END, options);
 	const toEvent = new CustomEvent(EVENT_END, options);
-	from.element.dispatchEvent(fromEvent);
-	if (from !== to) to?.element.dispatchEvent(toEvent);
+	item.instance.element.dispatchEvent(fromEvent);
+	if (item.instance !== toInstance) toInstance?.element.dispatchEvent(toEvent);
 	setTimeout(() => {
-		afterEnd(insert, from, [fromEvent, toEvent], {
+		afterEnd(insert, item, [fromEvent, toEvent], {
 			origin,
 			target: element
 		}, position, valid);
 		reset();
 	});
 }
-function onMove(event, state, draggable, position) {
-	const from = draggable;
-	const fromElement = from.origin;
+function onMove(event, globals, item, position) {
+	const fromElement = item.state.origin;
 	const toElement = findAncestor(event, SELECTOR_ITEM);
-	let to;
-	if (toElement == null) to = state.instances.get(findAncestor(event, SELECTOR))?.sortable;
-	else to = state.instances.get(toElement.parentElement)?.sortable;
-	if (!validatePosition(state, from, to, position.original)) return;
-	const placeholder = getPositionPlaceholder(from);
+	let toInstance;
+	let toState;
+	if (toElement == null) {
+		const element = findAncestor(event, SELECTOR);
+		toInstance = globals.instances.get(element)?.sortable;
+		toState = globals.states.get(element)?.sortable;
+	} else {
+		toInstance = globals.instances.get(toElement.parentElement)?.sortable;
+		toState = globals.states.get(toElement.parentElement)?.sortable;
+	}
+	if (toInstance == null || !validatePosition(globals, item, {
+		instance: toInstance,
+		state: toState
+	}, position.original)) return;
+	const placeholder = getPositionPlaceholder(item);
 	if (toElement != null && toElement !== fromElement) {
 		const { height, top } = toElement.getBoundingClientRect();
 		let place;
@@ -153,7 +173,7 @@ function onMove(event, state, draggable, position) {
 	return {
 		from: {
 			element: fromElement,
-			position: { ...state.original }
+			position: { ...globals.original }
 		},
 		to: {
 			element: toElement,
@@ -167,21 +187,21 @@ function resetPlaceholders() {
 	placeholder.position?.remove();
 	placeholder.drag.custom = void 0;
 }
-function setPlaceholder(state, sortable, origin) {
+function setPlaceholder(state, item, origin) {
 	const element = getDragPlaceholder();
 	placeholder.drag.default.innerHTML = "";
-	updatePlaceholder(sortable, element);
+	updatePlaceholder(item, element);
 	const event = new CustomEvent(EVENT_PLACEHOLDER, {
 		cancelable: true,
 		detail: {
 			origin,
-			parent: sortable.element,
+			parent: item.state.element,
 			placeholder: element,
 			create: (value) => {
 				if (!isHTMLOrSVGElement(value)) return;
 				const element = value;
 				placeholder.drag.custom = element;
-				updatePlaceholder(sortable, element);
+				updatePlaceholder(item, element);
 				state.element = {
 					rectangle: element.getBoundingClientRect(),
 					node: element
@@ -189,27 +209,30 @@ function setPlaceholder(state, sortable, origin) {
 			}
 		}
 	});
-	sortable.element.dispatchEvent(event);
+	item.instance.element.dispatchEvent(event);
 	setTimeout(() => {
 		if (!event.defaultPrevented && placeholder.drag.custom == null) placeholder.drag.default?.append(element.cloneNode(true));
 		document.body.append(placeholder.drag.custom ?? placeholder.drag.default ?? "");
 	});
 }
-function updatePlaceholder(sortable, element) {
+function updatePlaceholder(item, element) {
 	element.style.position = "fixed";
 	element.setAttribute(ATTRIBUTE_PLACEHOLDER_DRAG, "");
-	if (sortable.horizontal) element.setAttribute(ATTRIBUTE_HORIZONTAL, "");
+	const state = getDraggableStates(item.state.element)?.sortable;
+	if (state == null) return;
+	if (state.horizontal) element.setAttribute(ATTRIBUTE_HORIZONTAL, "");
 	else element.removeAttribute(ATTRIBUTE_HORIZONTAL);
-	if (sortable.vertical) element.setAttribute(ATTRIBUTE_VERTICAL, "");
+	if (state.vertical) element.setAttribute(ATTRIBUTE_VERTICAL, "");
 	else element.removeAttribute(ATTRIBUTE_VERTICAL);
 }
 function validatePosition(_, from, to, position) {
 	let valid = true;
-	const rectangle = from.origin?.getBoundingClientRect();
-	if (rectangle != null && !from.horizontal) valid = position.x >= rectangle.left && position.x <= rectangle.right;
-	if (valid && rectangle != null && !from.vertical) valid = position.y >= rectangle.top && position.y <= rectangle.bottom;
-	if (valid && from.connections != null) valid = to?.element.matches(from.connections) ?? true;
-	if (valid && to?.connections != null) valid = from.element.matches(to.connections);
+	const rectangle = from.state.origin?.getBoundingClientRect();
+	const fromState = getDraggableStates(from.state.element)?.sortable;
+	if (rectangle != null && !(fromState?.horizontal ?? true)) valid = position.x >= rectangle.left && position.x <= rectangle.right;
+	if (valid && rectangle != null && !(fromState?.vertical ?? true)) valid = position.y >= rectangle.top && position.y <= rectangle.bottom;
+	if (valid && from.state.connections != null) valid = to?.state.element.matches(from.state.connections) ?? true;
+	if (valid && to?.state.connections != null) valid = from.state.element.matches(to.state.connections);
 	return valid;
 }
 const ATTRIBUTE = "oui-sortable";
@@ -227,6 +250,7 @@ const EVENT_END = "sort:end";
 const EVENT_PLACEHOLDER = "sort:placeholder";
 const INSERT_AFTER = "afterend";
 const INSERT_BEFORE = "beforebegin";
+const MESSAGE = "The element must be an instance of HTMLElement or SVGElement";
 const SELECTOR = `[${ATTRIBUTE}]`;
 const SELECTOR_ITEM = `[${ATTRIBUTE}] > *`;
 const bound = {
@@ -240,6 +264,7 @@ const placeholder = {
 	},
 	position: void 0
 };
-attributable(ATTRIBUTE, addDraggable.bind(bound), removeDraggable.bind(bound));
+const addSortable = addDraggable.bind(bound);
+attributable(ATTRIBUTE, addSortable, removeDraggable.bind(bound));
 //#endregion
-export { OuiSortable };
+export { OuiSortable, createSortable };

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

@@ -0,0 +1,2 @@
+import { d as OuiSortable, f as createSortable, t as CreateOuiDraggableOptions } from "../draggable-zszaW1qS.mjs";
+export { type CreateOuiDraggableOptions as CreateOuiSortableOptions, type OuiSortable, createSortable };

package/dist/js/sortable/sortable.standalone.mjs

@@ -0,0 +1,2 @@
+import { createSortable } from "./sortable.embedded.mjs";
+export { createSortable };

package/dist/js/splitter.d.mts

@@ -7,13 +7,37 @@ declare global {
 declare class OuiSplitterElement extends HTMLElement {
   #private;
   static readonly observedAttributes: string[];
+  /**
+   * Maximum size for the first panel
+   */
   get max(): number;
+  /**
+   * Maximum size for the first panel
+   */
   set max(value: number);
+  /**
+   * Minimum size for the first panel
+   */
   get min(): number;
+  /**
+   * Minimum size for the first panel
+   */
   set min(value: number);
+  /**
+   * Current size for the first panel
+   */
   get size(): number;
+  /**
+   * Current size for the first panel
+   */
   set size(value: number);
+  /**
+   * Orientation of the splitter
+   */
   get type(): string;
+  /**
+   * Orientation of the splitter
+   */
   set type(value: string);
   constructor();
   connectedCallback(): void;

package/dist/js/splitter.mjs

@@ -62,29 +62,53 @@ var OuiSplitterElement = class extends HTMLElement {
 		ATTRIBUTE_TYPE
 	];
 	#splitter;
+	/**
+	* Maximum size for the first panel
+	*/
 	get max() {
 		return this.#splitter.values.max;
 	}
+	/**
+	* Maximum size for the first panel
+	*/
 	set max(value) {
 		this.setAttribute(ATTRIBUTE_MAX, String(value));
 	}
+	/**
+	* Minimum size for the first panel
+	*/
 	get min() {
 		return this.#splitter.values.min;
 	}
+	/**
+	* Minimum size for the first panel
+	*/
 	set min(value) {
-		this.setAttribute("min", String(value));
+		this.setAttribute(ATTRIBUTE_MIN, String(value));
 	}
+	/**
+	* Current size for the first panel
+	*/
 	get size() {
 		return this.#splitter.values.now.current;
 	}
+	/**
+	* Current size for the first panel
+	*/
 	set size(value) {
-		this.setAttribute("size", String(value));
+		this.setAttribute(ATTRIBUTE_SIZE, String(value));
 	}
+	/**
+	* Orientation of the splitter
+	*/
 	get type() {
-		return this.getAttribute("type") ?? "vertical";
+		return this.getAttribute(ATTRIBUTE_TYPE) ?? "vertical";
 	}
+	/**
+	* Orientation of the splitter
+	*/
 	set type(value) {
-		this.setAttribute("type", value);
+		this.setAttribute(ATTRIBUTE_TYPE, value);
 	}
 	constructor() {
 		super();
@@ -258,11 +282,11 @@ const ATTRIBUTE_ACTIVE = `${SELECTOR}-active`;
 const ATTRIBUTE_HANDLE = `${SELECTOR}-handle`;
 const ATTRIBUTE_HORIZONTAL = `${SELECTOR}-horizontal`;
 const ATTRIBUTE_SEPARATOR = `${SELECTOR}-separator`;
-const KEYS_ABSOLUTE = new Set(["End", "Home"]);
-const KEYS_HORIZONTAL = new Set(["ArrowDown", "ArrowUp"]);
-const KEYS_NEGATIVE = new Set(["ArrowLeft", "ArrowUp"]);
-const KEYS_VERTICAL = new Set(["ArrowLeft", "ArrowRight"]);
-const KEYS_ALL = new Set([
+const KEYS_ABSOLUTE = /* @__PURE__ */ new Set(["End", "Home"]);
+const KEYS_HORIZONTAL = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp"]);
+const KEYS_NEGATIVE = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
+const KEYS_VERTICAL = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight"]);
+const KEYS_ALL = /* @__PURE__ */ new Set([
 	...KEYS_ABSOLUTE,
 	...KEYS_HORIZONTAL,
 	...KEYS_VERTICAL

package/dist/js/toolbar.mjs

@@ -88,17 +88,17 @@ const KEY_ARROW_DOWN = "ArrowDown";
 const KEY_ARROW_RIGHT = "ArrowRight";
 const KEY_END = "End";
 const KEY_HOME = "Home";
-const KEYS_ABSOLUTE = new Set([KEY_END, KEY_HOME]);
-const KEYS_HORIZONTAL = new Set([KEY_ARROW_RIGHT, "ArrowLeft"]);
-const KEYS_VERTICAL = new Set([KEY_ARROW_DOWN, "ArrowUp"]);
-const KEYS_ALL = new Set([
+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 = new Set([KEY_ARROW_DOWN, KEY_ARROW_RIGHT]);
+const KEYS_NEXT = /* @__PURE__ */ new Set([KEY_ARROW_DOWN, KEY_ARROW_RIGHT]);
 const ORIENTATION_HORIZONTAL = "horizontal";
-const ORIENTATIONS = new Set([ORIENTATION_HORIZONTAL, "vertical"]);
+const ORIENTATIONS = /* @__PURE__ */ new Set([ORIENTATION_HORIZONTAL, "vertical"]);
 const PROPERTY_DISABLED = "disabled";
 const SELECTOR = `[${ATTRIBUTE}-item]`;
 const instances = /* @__PURE__ */ new WeakMap();