@oscarpalmer/oui 0.25.0 → 0.26.1

package/dist/js/index.mjs

@@ -1,10 +1,12 @@
-import { getFloatable } from "./floatable/embedded.mjs";
+import { createFloatable } from "./floatable/embedded.mjs";
 import { getDialog } from "./dialog.mjs";
 import "./movable.mjs";
 import "./sortable.mjs";
+import "./toolbar.mjs";
 import "./floatable/standalone.mjs";
+import { createFocusTrap } from "./focus-trap/embedded.mjs";
 import "./focus-trap/standalone.mjs";
 import { getPopover } from "./popover.mjs";
 import { OuiSplitterElement } from "./splitter.mjs";
 import { getTooltip, setTooltipDelay } from "./tooltip.mjs";
-export { OuiSplitterElement, getDialog, getFloatable, getPopover, getTooltip, setTooltipDelay };
+export { OuiSplitterElement, createFloatable, createFocusTrap, getDialog, getPopover, getTooltip, setTooltipDelay };

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

@@ -1,2 +1,2 @@
-import { a as DraggableState, i as DraggableBound, n as DragMovePosition, o as addDraggable, r as Draggable, s as removeDraggable } from "../movable-BKFgoaOl.mjs";
-export { DragMovePosition, Draggable, DraggableBound, DraggableState, addDraggable, removeDraggable };
+import { a as OuiDraggable, i as DraggableState, n as DragMovePosition, o as addDraggable, r as DraggableBound, s as removeDraggable } from "../movable-dNqBctx3.mjs";
+export { DragMovePosition, DraggableBound, DraggableState, OuiDraggable, addDraggable, removeDraggable };

package/dist/js/internal/draggable.mjs

@@ -4,7 +4,7 @@ import { findAncestor } from "@oscarpalmer/toretto/find";
 import { toggleStyles } from "@oscarpalmer/toretto/style";
 import supportsTouch from "@oscarpalmer/toretto/touch";
 //#region src/js/internal/draggable.ts
-var Draggable = class {
+var OuiDraggable = class {
 	prefix;
 	element;
 	options;
@@ -212,4 +212,4 @@ on(document, "pointerup", onPointerup);
 on(document, "touchcancel", onPointerup, { passive: false });
 on(document, "touchstart", onPointerdown, { passive: false });
 //#endregion
-export { Draggable, addDraggable, removeDraggable };
+export { OuiDraggable, addDraggable, removeDraggable };

package/dist/js/{movable-BKFgoaOl.d.mts → movable-dNqBctx3.d.mts}

@@ -1,7 +1,7 @@
 import { EventPosition, PlainObject } from "@oscarpalmer/atoms/models";
 
 //#region src/js/sortable.d.ts
-declare class Sortable extends Draggable {
+declare class OuiSortable extends OuiDraggable {
   connections: string | null;
   origin: HTMLElement | undefined;
   get dragged(): HTMLElement;
@@ -9,7 +9,7 @@ declare class Sortable extends Draggable {
 }
 //#endregion
 //#region src/js/internal/draggable.d.ts
-declare abstract class Draggable {
+declare abstract class OuiDraggable {
   prefix: string;
   element: HTMLElement;
   options: DraggableOptions;
@@ -22,10 +22,10 @@ declare abstract class Draggable {
   constructor(prefix: string, element: HTMLElement, options: DraggableOptions);
   destroy(): void;
 }
-type DragBegin = (event: MouseEvent | TouchEvent, state: DraggableState, draggable: Draggable, element: HTMLElement, handle: HTMLElement, position: EventPosition) => void;
-type DragCancel = (state: DraggableState, draggable: Draggable) => void;
-type DragEnd = (event: MouseEvent | TouchEvent, state: DraggableState, draggable: Draggable, reset: () => void) => void;
-type DragMove = (event: MouseEvent | TouchEvent, state: DraggableState, draggable: Draggable, position: DragMovePosition) => PlainObject | undefined;
+type DragBegin = (event: MouseEvent | TouchEvent, state: DraggableState, draggable: OuiDraggable, element: HTMLElement, handle: HTMLElement, position: EventPosition) => void;
+type DragCancel = (state: DraggableState, draggable: OuiDraggable) => void;
+type DragEnd = (event: MouseEvent | TouchEvent, state: DraggableState, draggable: OuiDraggable, reset: () => void) => void;
+type DragMove = (event: MouseEvent | TouchEvent, state: DraggableState, draggable: OuiDraggable, position: DragMovePosition) => PlainObject | undefined;
 type DragMovePosition = {
   calculated: EventPosition;
   original: EventPosition;
@@ -35,8 +35,8 @@ type DraggableBound<Property extends keyof DraggableInstances = keyof DraggableI
   property: Property;
 };
 type DraggableInstances = {
-  movable?: Movable;
-  sortable?: Sortable;
+  movable?: OuiMovable;
+  sortable?: OuiSortable;
 };
 type DraggableOptions = {
   container: DraggableOptionsContainer;
@@ -46,17 +46,17 @@ type DraggableOptions = {
 };
 type DraggableOptionsContainer = {
   attribute: string;
-  map: Map<HTMLElement, Set<Draggable>>;
+  map: Map<HTMLElement, Set<OuiDraggable>>;
   onDestroy?: DraggableOptionsContainerOnDestroy;
   onInitialize?: DraggableOptionsContainerOnInitialize;
 };
-type DraggableOptionsContainerOnDestroy = (draggable: Draggable, container: HTMLElement, empty: boolean) => void;
-type DraggableOptionsContainerOnInitialize = (draggable: Draggable) => void;
+type DraggableOptionsContainerOnDestroy = (draggable: OuiDraggable, container: HTMLElement, empty: boolean) => void;
+type DraggableOptionsContainerOnInitialize = (draggable: OuiDraggable) => void;
 type DraggableOptionsDirection = {
   attribute: string;
   onAfter?: DraggableOptionsDirectionOnAfter;
 };
-type DraggableOptionsDirectionOnAfter = (draggable: Draggable) => void;
+type DraggableOptionsDirectionOnAfter = (draggable: OuiDraggable) => void;
 type DraggableOptionsDrag = {
   onBegin: DragBegin;
   onCancel: DragCancel;
@@ -67,8 +67,8 @@ type DraggableOptionsPosition = {
   getOffset: DraggableOptionsPositionGetOffset;
   getOriginal: DraggableOptionsPositionGetOriginal;
 };
-type DraggableOptionsPositionGetOffset = (state: DraggableState, draggable: Draggable, element: HTMLElement, position: EventPosition) => EventPosition;
-type DraggableOptionsPositionGetOriginal = (state: DraggableState, draggable: Draggable, position: EventPosition) => EventPosition;
+type DraggableOptionsPositionGetOffset = (state: DraggableState, draggable: OuiDraggable, element: HTMLElement, position: EventPosition) => EventPosition;
+type DraggableOptionsPositionGetOriginal = (state: DraggableState, draggable: OuiDraggable, position: EventPosition) => EventPosition;
 type DraggableState = {
   container: DOMRect | undefined;
   element: DraggableStateElement | undefined;
@@ -87,7 +87,7 @@ declare function removeDraggable<Property extends keyof DraggableInstances, Inst
 }, element: HTMLElement): void;
 //#endregion
 //#region src/js/movable.d.ts
-declare class Movable extends Draggable {
+declare class OuiMovable extends OuiDraggable {
   inset: string;
   moved: boolean;
   offset: Partial<EventPosition> | undefined;
@@ -98,4 +98,4 @@ declare class Movable extends Draggable {
   destroy(): void;
 }
 //#endregion
-export { DraggableState as a, Sortable as c, DraggableBound as i, DragMovePosition as n, addDraggable as o, Draggable as r, removeDraggable as s, Movable as t };
+export { OuiDraggable as a, OuiSortable as c, DraggableState as i, DragMovePosition as n, addDraggable as o, DraggableBound as r, removeDraggable as s, OuiMovable as t };

package/dist/js/movable.d.mts

@@ -1,2 +1,2 @@
-import { t as Movable } from "./movable-BKFgoaOl.mjs";
-export { Movable };
+import { t as OuiMovable } from "./movable-dNqBctx3.mjs";
+export { OuiMovable };

package/dist/js/movable.mjs

@@ -1,8 +1,8 @@
 import { attributable } from "./internal/attributable.mjs";
-import { Draggable, addDraggable, removeDraggable } from "./internal/draggable.mjs";
+import { OuiDraggable, addDraggable, removeDraggable } from "./internal/draggable.mjs";
 import { getPosition, on } from "@oscarpalmer/toretto/event";
 //#region src/js/movable.ts
-var Movable = class extends Draggable {
+var OuiMovable = class extends OuiDraggable {
 	inset;
 	moved = false;
 	offset;
@@ -142,11 +142,11 @@ const EVENT_END = "move:end";
 const MOVED = /* @__PURE__ */ new Set();
 const SELECTOR_HANDLE = `[${ATTRIBUTE}-handle]`;
 const bound = {
-	constructor: Movable,
+	constructor: OuiMovable,
 	property: "movable"
 };
 const resizer = new ResizeObserver(onResize);
 attributable(ATTRIBUTE, addDraggable.bind(bound), removeDraggable.bind(bound));
 on(document, "scroll", onScroll);
 //#endregion
-export { Movable };
+export { OuiMovable };

package/dist/js/popover.d.mts

@@ -1,5 +1,5 @@
-import { n as OuiFloatable } from "./embedded-84gxpReS.mjs";
-import { i as FocusTrap } from "./embedded-BpwzMSEF.mjs";
+import { n as OuiFloatable } from "./embedded-CSOh5njI.mjs";
+import { i as OuiFocusTrap } from "./embedded-CHK82Uh5.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
@@ -23,7 +24,7 @@ type OuiPopoverState = {
   anchor: HTMLElement;
   content: HTMLElement;
   floatable: OuiFloatable;
-  focusTrap?: FocusTrap;
+  focusTrap?: OuiFocusTrap;
   listeners: RemovableEventListener[];
   popover: OuiPopover;
 };

package/dist/js/popover.mjs

@@ -1,4 +1,4 @@
-import { createFloatable, getOnBeforeToggleListener } from "./floatable/embedded.mjs";
+import { createEmbeddedFloatable, getOnBeforeToggleListener } from "./floatable/embedded.mjs";
 import { attributable } from "./internal/attributable.mjs";
 import { createFocusTrap } from "./focus-trap/embedded.mjs";
 import { on } from "@oscarpalmer/toretto/event";
@@ -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();
@@ -29,6 +33,11 @@ var OuiPopover = class {
 		this.#state.floatable.show();
 	}
 };
+function addPopover(element) {
+	if (states.has(element) || element.hasAttribute("oui-floatable")) return;
+	const anchor = element.ownerDocument.querySelector(`[popovertarget="${element.id}"]`);
+	if (isHTMLOrSVGElement(anchor)) states.set(element, getState(anchor, element));
+}
 function destroyPopover(state) {
 	state.floatable.destroy();
 	state.focusTrap?.destroy();
@@ -53,7 +62,7 @@ function getState(anchor, content) {
 	const state = {
 		anchor,
 		content,
-		floatable: createFloatable(anchor, content, options, false),
+		floatable: createEmbeddedFloatable(anchor, content, options),
 		focusTrap: content.getAttribute(ARIA_MODAL) === TRUE ? createFocusTrap(content, { noescape: true }) : void 0,
 		listeners: [getOnBeforeToggleListener(content), on(content, EVENT_TOGGLE, (event) => {
 			if (event.newState === STATE_OPEN) {
@@ -71,15 +80,10 @@ function getState(anchor, content) {
 	state.popover = new OuiPopover(state);
 	return state;
 }
-function onAdd(element) {
-	if (states.has(element) || element.hasAttribute("oui-floatable")) return;
-	const anchor = element.ownerDocument.querySelector(`[popovertarget="${element.id}"]`);
-	if (isHTMLOrSVGElement(anchor)) states.set(element, getState(anchor, element));
-}
 function onPointerdown() {
 	ignoreFocus = true;
 }
-function onRemove(element) {
+function removePopover(element) {
 	const state = states.get(element);
 	if (state == null) return;
 	destroyPopover(state);
@@ -98,6 +102,6 @@ const options = {
 const states = /* @__PURE__ */ new WeakMap();
 let ignoreFocus = false;
 on(document, "pointerdown", onPointerdown, { capture: true });
-attributable(ATTRIBUTE, onAdd, onRemove);
+attributable(ATTRIBUTE, addPopover, removePopover);
 //#endregion
 export { getPopover };

package/dist/js/sortable.d.mts

@@ -1,2 +1,2 @@
-import { c as Sortable } from "./movable-BKFgoaOl.mjs";
-export { Sortable };
+import { c as OuiSortable } from "./movable-dNqBctx3.mjs";
+export { OuiSortable };

package/dist/js/sortable.mjs

@@ -1,11 +1,11 @@
 import { attributable } from "./internal/attributable.mjs";
-import { Draggable, addDraggable, removeDraggable } from "./internal/draggable.mjs";
+import { OuiDraggable, addDraggable, 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
-var Sortable = class extends Draggable {
+var OuiSortable = class extends OuiDraggable {
 	connections;
 	origin;
 	get dragged() {
@@ -230,7 +230,7 @@ const INSERT_BEFORE = "beforebegin";
 const SELECTOR = `[${ATTRIBUTE}]`;
 const SELECTOR_ITEM = `[${ATTRIBUTE}] > *`;
 const bound = {
-	constructor: Sortable,
+	constructor: OuiSortable,
 	property: "sortable"
 };
 const placeholder = {
@@ -242,4 +242,4 @@ const placeholder = {
 };
 attributable(ATTRIBUTE, addDraggable.bind(bound), removeDraggable.bind(bound));
 //#endregion
-export { Sortable };
+export { OuiSortable };

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

@@ -10,6 +10,50 @@ const ATTRIBUTE_MAX = "max";
 const ATTRIBUTE_MIN = "min";
 const ATTRIBUTE_SIZE = "size";
 const ATTRIBUTE_TYPE = "type";
+var OuiSplitter = class {
+	element;
+	handle;
+	panels;
+	rectangle;
+	separator;
+	types;
+	values;
+	constructor(element, panels) {
+		this.element = element;
+		this.panels = panels;
+		if (isNullableOrWhitespace(element.id)) element.id = `oui_splitter_${++index}`;
+		this.values = getValues(element);
+		this.handle = createHandle();
+		this.rectangle = element.getBoundingClientRect();
+		this.separator = createSeparator(this);
+		this.separator.append(this.handle);
+		panels[0].insertAdjacentElement("afterend", this.separator);
+		this.updateOrientation();
+		this.updateValues();
+	}
+	updateConnections(add) {
+		const method = METHODS_CONNECT[add];
+		MAPPED_ELEMENTS[method](this.element, this);
+		MAPPED_ELEMENTS[method](this.handle, this);
+		MAPPED_ELEMENTS[method](this.separator, this);
+		if (this.types.auto) RESIZE_OBSERVER[METHODS_OBSERVE[add]](this.element);
+	}
+	updateOrientation() {
+		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);
+		setAriaOrientation(this);
+	}
+	updateValues() {
+		this.values = getValues(this.element);
+		requestAnimationFrame(() => {
+			setSize(this, this.values.now.current);
+			setAriaValue(this);
+		});
+	}
+};
 var OuiSplitterElement = class extends HTMLElement {
 	static observedAttributes = [
 		ATTRIBUTE_MAX,
@@ -18,35 +62,59 @@ 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();
 		const panels = [...this.children].filter((child) => child instanceof HTMLElement);
-		if (panels.length !== 2) throw new Error(`${SELECTOR} must have exactly two panels.`);
-		this.#splitter = new Splitter(this, panels);
+		if (panels.length !== 2) throw new Error(MESSAGE);
+		this.#splitter = new OuiSplitter(this, panels);
 	}
 	connectedCallback() {
 		this.#splitter.updateConnections(1);
@@ -68,51 +136,6 @@ var OuiSplitterElement = class extends HTMLElement {
 		}
 	}
 };
-let index = 0;
-var Splitter = class {
-	element;
-	handle;
-	panels;
-	rectangle;
-	separator;
-	types;
-	values;
-	constructor(element, panels) {
-		this.element = element;
-		this.panels = panels;
-		if (isNullableOrWhitespace(element.id)) element.id = `oui_splitter_${++index}`;
-		this.values = getValues(element);
-		this.handle = createHandle();
-		this.rectangle = element.getBoundingClientRect();
-		this.separator = createSeparator(this);
-		this.separator.append(this.handle);
-		panels[0].insertAdjacentElement("afterend", this.separator);
-		this.updateOrientation();
-		this.updateValues();
-	}
-	updateConnections(add) {
-		const method = METHODS_CONNECT[add];
-		MAPPED_ELEMENTS[method](this.element, this);
-		MAPPED_ELEMENTS[method](this.handle, this);
-		MAPPED_ELEMENTS[method](this.separator, this);
-		if (this.types.auto) RESIZE_OBSERVER[METHODS_OBSERVE[add]](this.element);
-	}
-	updateOrientation() {
-		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);
-		setAriaOrientation(this);
-	}
-	updateValues() {
-		this.values = getValues(this.element);
-		requestAnimationFrame(() => {
-			setSize(this, this.values.now.current);
-			setAriaValue(this);
-		});
-	}
-};
 function createHandle() {
 	const handle = document.createElement("span");
 	handle.setAttribute("aria-hidden", "true");
@@ -269,6 +292,7 @@ const KEYS_ALL = new Set([
 	...KEYS_VERTICAL
 ]);
 const MAPPED_ELEMENTS = /* @__PURE__ */ new WeakMap();
+const MESSAGE = `<${SELECTOR}> must have exactly two panels.`;
 const METHODS_CONNECT = ["delete", "set"];
 const METHODS_OBSERVE = ["unobserve", "observe"];
 const NAVIGATION_MAXIMUM_PERCENTAGE = .9;
@@ -283,6 +307,7 @@ const STYLING_TOGGLER = toggleStyles(document.body, {
 	webkitUserSelect: "none"
 });
 const VALUE_DECIMALS = 6;
+let index = 0;
 let frame;
 let splitter;
 customElements.define(SELECTOR, OuiSplitterElement);

package/dist/js/toolbar.d.mts

@@ -0,0 +1 @@
+export { };

package/dist/js/toolbar.mjs

@@ -0,0 +1,107 @@
+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";
+//#region src/js/toolbar.ts
+var OuiToolbar = class {
+	#state;
+	constructor(state) {
+		this.#state = state;
+		updateFocus(this.#state, 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;
+	}
+};
+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);
+}
+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 = 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([
+	...KEYS_ABSOLUTE,
+	...KEYS_HORIZONTAL,
+	...KEYS_VERTICAL
+]);
+const KEYS_NEXT = new Set([KEY_ARROW_DOWN, KEY_ARROW_RIGHT]);
+const ORIENTATION_HORIZONTAL = "horizontal";
+const ORIENTATIONS = new Set([ORIENTATION_HORIZONTAL, "vertical"]);
+const PROPERTY_DISABLED = "disabled";
+const SELECTOR = `[${ATTRIBUTE}-item]`;
+const instances = /* @__PURE__ */ new WeakMap();
+attributable(ATTRIBUTE, addToolbar, removeToolbar);
+//#endregion
+export {};

package/dist/js/tooltip.d.mts

@@ -1,4 +1,4 @@
-import { n as OuiFloatable } from "./embedded-84gxpReS.mjs";
+import { n as OuiFloatable } from "./embedded-CSOh5njI.mjs";
 
 //#region src/js/tooltip.d.ts
 declare class OuiTooltip {
@@ -7,6 +7,10 @@ declare class OuiTooltip {
    * Is the tooltip open?
    */
   get open(): boolean;
+  /**
+   * Open or close the tooltip
+   */
+  set open(value: boolean);
   constructor(state: OuiTooltipState);
   /**
    * Closes the tooltip
@@ -24,6 +28,12 @@ type OuiTooltipState = {
   timer?: number;
   tooltip: OuiTooltip;
 };
+/**
+ * Get the _OuiTooltip_ for an element
+ *
+ * @param element Element to get _OuiTooltip_ for
+ * @returns _OuiTooltip_ instance
+ */
 declare function getTooltip(element: HTMLElement): OuiTooltip | undefined;
 /**
  * Set the delay before showing the tooltip, in milliseconds