@oscarpalmer/oui 0.38.0 → 0.40.0

package/dist/js/splitter.mjs

@@ -1,322 +0,0 @@
-import { round } from "@oscarpalmer/atoms/math";
-import { clamp } from "@oscarpalmer/atoms/number";
-import { setAria } from "@oscarpalmer/toretto/aria";
-import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
-import { createElement } from "@oscarpalmer/toretto/create";
-import { getEventPosition, on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto/find";
-import { setStyle, toggleStyles } from "@oscarpalmer/toretto/style";
-import supportsTouch from "@oscarpalmer/toretto/touch";
-import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
-//#region src/js/splitter.ts
-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);
-		setAttribute(this.element, ATTRIBUTE_HORIZONTAL, this.types.horizontal ? "" : void 0);
-		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,
-		ATTRIBUTE_MIN,
-		ATTRIBUTE_SIZE,
-		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) {
-		if (typeof value === "number") setAttribute(this, ATTRIBUTE_MAX, value.toString());
-	}
-	/**
-	* Minimum size for the first panel
-	*/
-	get min() {
-		return this.#splitter.values.min;
-	}
-	/**
-	* Minimum size for the first panel
-	*/
-	set min(value) {
-		if (typeof value === "number") setAttribute(this, ATTRIBUTE_MIN, value.toString());
-	}
-	/**
-	* Current size for the first panel
-	*/
-	get size() {
-		return this.#splitter.values.now.current;
-	}
-	/**
-	* Current size for the first panel
-	*/
-	set size(value) {
-		if (typeof value === "number") setAttribute(this, ATTRIBUTE_SIZE, value.toString());
-	}
-	/**
-	* Orientation of the splitter
-	*/
-	get type() {
-		return getAttribute(this, ATTRIBUTE_TYPE) ?? "vertical";
-	}
-	/**
-	* Orientation of the splitter
-	*/
-	set type(value) {
-		setAttribute(this, ATTRIBUTE_TYPE, value);
-	}
-	constructor() {
-		super();
-		const panels = [...this.children].filter((child) => child instanceof Element);
-		if (panels.length !== 2) throw new Error(MESSAGE);
-		this.#splitter = new OuiSplitter(this, panels);
-	}
-	connectedCallback() {
-		this.#splitter.updateConnections(1);
-	}
-	disconnectedCallback() {
-		this.#splitter.updateConnections(0);
-	}
-	attributeChangedCallback(name) {
-		switch (name) {
-			case ATTRIBUTE_MAX:
-			case ATTRIBUTE_MIN:
-			case ATTRIBUTE_SIZE:
-				this.#splitter.updateValues();
-				break;
-			case ATTRIBUTE_TYPE: this.#splitter.updateOrientation();
-		}
-	}
-};
-function createHandle() {
-	return createElement("span", {
-		aria: { hidden: true },
-		attribute: { [ATTRIBUTE_HANDLE]: "" }
-	});
-}
-function createSeparator(splitter) {
-	return createElement("div", {
-		aria: {
-			controls: splitter.element.id,
-			label: "Resize panels"
-		},
-		attribute: { [ATTRIBUTE_SEPARATOR]: "" },
-		property: {
-			role: "separator",
-			tabIndex: 0
-		}
-	});
-}
-function getContained(min, value, max) {
-	return round(clamp(value, min, max), VALUE_DECIMALS);
-}
-function getSize(splitter, value) {
-	const { height, left, top, width } = splitter.rectangle;
-	const fraction = (value - (splitter.types.horizontal ? top : left)) / (splitter.types.horizontal ? height : width);
-	return getContained(splitter.values.min, fraction, splitter.values.max);
-}
-function getTypes(splitter, width, height) {
-	const type = getAttribute(splitter.element, "type");
-	if (type === "horizontal") return {
-		auto: false,
-		horizontal: true
-	};
-	if (type === "auto") return {
-		auto: true,
-		horizontal: (height ?? splitter.rectangle.height) > (width ?? splitter.rectangle.width)
-	};
-	return {
-		auto: false,
-		horizontal: false
-	};
-}
-function getValue(element, name, defaultValue) {
-	const value = getAttribute(element, name);
-	if (isNullableOrWhitespace(value)) return defaultValue;
-	const parsed = Number.parseFloat(value);
-	if (Number.isNaN(parsed)) return defaultValue;
-	if (parsed < 0) return defaultValue;
-	return parsed > 1 ? parsed / NAVIGATION_MAXIMUM_TOTAL : parsed;
-}
-function getValues(element) {
-	const values = {
-		max: getValue(element, ATTRIBUTE_MAX, NAVIGATION_MAXIMUM_PERCENTAGE),
-		min: getValue(element, ATTRIBUTE_MIN, NAVIGATION_MINIMUM_PERCENTAGE),
-		now: {
-			current: .5,
-			previous: .5
-		}
-	};
-	const value = getContained(values.min, getValue(element, ATTRIBUTE_SIZE, values.now.current), values.max);
-	values.now.current = value;
-	values.now.previous = value;
-	return values;
-}
-function onEnd(reset) {
-	if (splitter == null) return;
-	splitter.handle.removeAttribute(ATTRIBUTE_ACTIVE);
-	splitter.separator.removeAttribute(ATTRIBUTE_ACTIVE);
-	if (reset) setSize(splitter, splitter.values.now.previous);
-	else splitter.values.now.previous = splitter.values.now.current;
-	splitter = void 0;
-	STYLING_TOGGLER.remove();
-}
-function onKeydown(event) {
-	switch (true) {
-		case KEYS_ALL.has(event.key):
-			onNavigate(event);
-			break;
-		case event.key === "Escape": onEnd(true);
-	}
-}
-function onNavigate(event) {
-	const splitter = MAPPED_ELEMENTS.get(findAncestor(event, "[oui-splitter-separator]"));
-	if (splitter == null) return;
-	const { types, values } = splitter;
-	if (KEYS_ABSOLUTE.has(event.key)) {
-		setSize(splitter, event.key === "End" ? values.max : values.min, true);
-		return;
-	}
-	if (types.horizontal && !KEYS_HORIZONTAL.has(event.key) || !(types.horizontal || KEYS_VERTICAL.has(event.key))) return;
-	const offset = KEYS_NEGATIVE.has(event.key) ? -1 : 1;
-	setSize(splitter, getContained(values.min, values.now.current + offset * NAVIGATION_MODIFIER, values.max), true);
-}
-function onObservation(entries) {
-	if (frame != null) cancelAnimationFrame(frame);
-	frame = requestAnimationFrame(() => {
-		for (const entry of entries) {
-			const splitter = MAPPED_ELEMENTS.get(entry.target);
-			if (splitter == null) return;
-			splitter.types = getTypes(splitter, entry.contentRect.width, entry.contentRect.height);
-			setAttribute(splitter.element, ATTRIBUTE_HORIZONTAL, splitter.types.horizontal ? "" : void 0);
-			setAriaOrientation(splitter);
-		}
-		frame = void 0;
-	});
-}
-function onPointerdown(event) {
-	if (supportsTouch.value ? event.type === "mousedown" : event.type === "touchstart") return;
-	splitter = MAPPED_ELEMENTS.get(findAncestor(event, SELECTOR_HANDLE));
-	if (splitter == null) return;
-	if (supportsTouch.value) event.preventDefault();
-	setAttribute(splitter.handle, ATTRIBUTE_ACTIVE, "");
-	setAttribute(splitter.separator, ATTRIBUTE_ACTIVE, "");
-	splitter.rectangle = splitter.element.getBoundingClientRect();
-	STYLING_TOGGLER.set();
-}
-function onPointermove(event) {
-	if (splitter == null) return;
-	const position = getEventPosition(event);
-	if (position != null) {
-		splitter.values.now.current = getSize(splitter, splitter.types.horizontal ? position.y : position.x);
-		setSize(splitter, splitter.values.now.current);
-	}
-}
-function onPointerup() {
-	if (splitter != null) onEnd(false);
-}
-function setAriaOrientation(splitter) {
-	setAria(splitter.separator, "orientation", splitter.types.horizontal ? "horizontal" : "vertical");
-}
-function setAriaValue(splitter) {
-	setAria(splitter.separator, {
-		valuemax: splitter.values.max,
-		valuemin: splitter.values.min,
-		valuenow: splitter.values.now.current
-	});
-}
-function setSize(splitter, size, previous) {
-	splitter.values.now.current = size;
-	if (previous) splitter.values.now.previous = size;
-	setStyle(splitter.element, "--oui-splitter-size", `${size}`);
-	setAriaValue(splitter);
-}
-const TAGNAME = "oui-splitter";
-const ATTRIBUTE_ACTIVE = `${TAGNAME}-active`;
-const ATTRIBUTE_HANDLE = `${TAGNAME}-handle`;
-const ATTRIBUTE_HORIZONTAL = `${TAGNAME}-horizontal`;
-const ATTRIBUTE_SEPARATOR = `${TAGNAME}-separator`;
-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
-]);
-const MAPPED_ELEMENTS = /* @__PURE__ */ new WeakMap();
-const MESSAGE = `<${TAGNAME}> must have exactly two panels.`;
-const METHODS_CONNECT = ["delete", "set"];
-const METHODS_OBSERVE = ["unobserve", "observe"];
-const NAVIGATION_MAXIMUM_PERCENTAGE = .9;
-const NAVIGATION_MAXIMUM_TOTAL = 100;
-const NAVIGATION_MINIMUM_PERCENTAGE = .1;
-const NAVIGATION_MODIFIER = .05;
-const RESIZE_OBSERVER = new ResizeObserver(onObservation);
-const SELECTOR_HANDLE = `[${ATTRIBUTE_HANDLE}]`;
-const STYLING_TOGGLER = toggleStyles(document.body, {
-	touchAction: "none",
-	userSelect: "none",
-	webkitUserSelect: "none"
-});
-const VALUE_DECIMALS = 6;
-let index = 0;
-let frame;
-let splitter;
-on(document, "keydown", onKeydown);
-on(document, "mousedown", onPointerdown);
-on(document, "pointermove", onPointermove);
-on(document, "pointerup", onPointerup);
-on(document, "touchcancel", onPointerup);
-on(document, "touchstart", onPointerdown, { passive: false });
-customElements.define(TAGNAME, OuiSplitterElement);
-//#endregion
-export { OuiSplitterElement };

package/dist/js/toolbar.mjs

@@ -1,31 +0,0 @@
-import { attributable } from "./internal/attributable.mjs";
-import { getNavigable, updateNavigableFocus } from "./internal/navigable.mjs";
-//#region src/js/toolbar.ts
-var OuiToolbar = class {
-	#navigable;
-	constructor(navigable) {
-		this.#navigable = navigable;
-		updateNavigableFocus(this.#navigable, false);
-	}
-	destroy() {
-		this.#navigable.destroy();
-		this.#navigable = void 0;
-	}
-};
-function addToolbar(element) {
-	if (!instances.has(element)) instances.set(element, new OuiToolbar(getNavigable(element, {
-		role: "toolbar",
-		selector: SELECTOR,
-		vertical: false
-	})));
-}
-function removeToolbar(element) {
-	instances.get(element)?.destroy();
-	instances.delete(element);
-}
-const ATTRIBUTE = "oui-toolbar";
-const SELECTOR = `[${ATTRIBUTE}-item]`;
-const instances = /* @__PURE__ */ new WeakMap();
-attributable(ATTRIBUTE, addToolbar, removeToolbar);
-//#endregion
-export {};

package/dist/js/tooltip.d.mts

@@ -1,45 +0,0 @@
-import { r as OuiFloatable } from "./floatable.embedded-Bct4U5Dm.mjs";
-//#region src/js/tooltip.d.ts
-declare class OuiTooltip {
-  #private;
-  /**
-   * Is the tooltip open?
-   */
-  get open(): boolean;
-  /**
-   * Open or close the tooltip
-   */
-  set open(value: boolean);
-  constructor(state: OuiTooltipState);
-  /**
-   * Closes the tooltip
-   */
-  hide(): void;
-  /**
-   * Opens the tooltip
-   */
-  show(): void;
-}
-type OuiTooltipState = {
-  anchor: HTMLElement;
-  elements: HTMLElement[];
-  floatable: OuiFloatable;
-  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
- *
- * _(Default delay is half a second, or 500 milliseconds)_
- * @param value Delay in milliseconds
- */
-declare function setTooltipDelay(value: number): void;
-//#endregion
-export { type OuiTooltip, getTooltip, setTooltipDelay };

package/src/css/a11y.scss

@@ -1,13 +0,0 @@
-/*! https://github.com/oscarpalmer/oui */
-
-@use './mixins/misc.mixins.scss' as miscMixins;
-
-.oui-vh {
-	:where(&) {
-		position: absolute !important;
-	}
-
-	:where(&:not(:active, :focus, :focus-within)) {
-		@include miscMixins.visually-hidden;
-	}
-}

package/src/css/badge.scss

@@ -1,62 +0,0 @@
-/*! https://github.com/oscarpalmer/oui */
-
-@use './mixins/badge.mixins.scss' as badgeMixins;
-
-.oui {
-	:where(&-pill, &-tag) {
-		@include badgeMixins.badge;
-	}
-
-	:where(&-pill) {
-		border-radius: 3em;
-		padding: 0.5em 1em;
-	}
-
-	:where(&-tag) {
-		border-radius: 0.25em;
-		padding: 0.5em 0.75em;
-	}
-
-	:where(&-pill--small, &-tag--small) {
-		font-size: 0.875em;
-	}
-
-	:where(&-pill--tiny, &-tag--tiny) {
-		color: color-mix(in oklab, var(--oui-foreground, var(--oui-gray-8)), transparent 12.5%);
-		font-size: 0.75em;
-	}
-
-	:where(&-pill--tiny) {
-		padding: 0.25em 0.75em;
-	}
-
-	:where(&-tag--tiny) {
-		padding: 0.25em 0.5em;
-	}
-
-	// Colors
-
-	:where(&-pill--blue, &-tag--blue) {
-		@include badgeMixins.badge-blue;
-	}
-
-	:where(&-pill--green, &-tag--green) {
-		@include badgeMixins.badge-green;
-	}
-
-	:where(&-pill--orange, &-tag--orange) {
-		@include badgeMixins.badge-orange;
-	}
-
-	:where(&-pill--purple, &-tag--purple) {
-		@include badgeMixins.badge-purple;
-	}
-
-	:where(&-pill--red, &-tag--red) {
-		@include badgeMixins.badge-red;
-	}
-
-	:where(&-pill--yellow, &-tag--yellow) {
-		@include badgeMixins.badge-yellow;
-	}
-}

package/src/css/button.scss

@@ -1,50 +0,0 @@
-/*! https://github.com/oscarpalmer/oui */
-
-@use './mixins/button.mixins.scss' as buttonMixins;
-
-.oui-button {
-	:where(&) {
-		@include buttonMixins.button;
-	}
-
-	:where(&--blue) {
-		@include buttonMixins.button-blue;
-	}
-
-	:where(&--green) {
-		@include buttonMixins.button-green;
-	}
-
-	:where(&--orange) {
-		@include buttonMixins.button-orange;
-	}
-
-	:where(&--purple) {
-		@include buttonMixins.button-purple;
-	}
-
-	:where(&--red) {
-		@include buttonMixins.button-red;
-	}
-
-	:where(&--yellow) {
-		@include buttonMixins.button-yellow;
-	}
-
-	:where(&--rounded) {
-		padding: 0.5em 1em;
-		flex-wrap: nowrap;
-		border-radius: 5em;
-		white-space: nowrap;
-	}
-
-	:where(&--small) {
-		font-size: 0.875em;
-	}
-
-	:where(&--tiny) {
-		--oui-foreground-percentage: 12.5%;
-
-		font-size: 0.75em;
-	}
-}