ropav 0.1.7 → 0.1.8

package/README.md

@@ -142,7 +142,7 @@ Use typed `classNames` and `styles`, documented state attributes, and variables
 
 See the [Public Styles API](./docs/public-styles-api.md) and [public token table](./docs/public-tokens.md). Consumers can declare `reset, ropav.tokens, ropav.components, app` to establish their cascade layer order.
 
-For headless Tooltip, HoverCard and custom menu markup, see the
+For headless floating content and custom overlay markup, see the
 [public floating API](./docs/public-floating-api.md).
 
 ## Development

package/dist/ancestry.js

@@ -0,0 +1,136 @@
+import { t as isElement } from "./query.js";
+import { t as createRafScheduler } from "./rafScheduler.js";
+//#region src/utils/dom/ancestry.ts
+function getFrameElement(documentNode) {
+	try {
+		const frameElement = documentNode.defaultView?.frameElement;
+		return isElement(frameElement) ? frameElement : null;
+	} catch {
+		return null;
+	}
+}
+function getComposedParent(node) {
+	if (isElement(node) && node.assignedSlot) return node.assignedSlot;
+	if (node.parentNode) return node.parentNode;
+	if (node.nodeType === 9) return getFrameElement(node);
+	const host = "host" in node ? node.host : null;
+	return isElement(host) ? host : null;
+}
+function getComposedAncestry(node) {
+	const ancestry = [];
+	let current = node ?? null;
+	while (current) {
+		current = getComposedParent(current);
+		if (current) ancestry.push(current);
+	}
+	return ancestry;
+}
+function areNodeListsIdentical(left, right) {
+	return left.length === right.length && left.every((node, index) => node === right[index]);
+}
+function readComposedAncestryPaths(nodes) {
+	return nodes.map((node) => node ? [node, ...getComposedAncestry(node)] : []);
+}
+function areAncestryPathsIdentical(left, right) {
+	return left.length === right.length && left.every((path, index) => areNodeListsIdentical(path, right[index] ?? []));
+}
+function getNodeDocument(node) {
+	return node.nodeType === 9 ? node : node.ownerDocument;
+}
+function getMutationObserverConstructor(node) {
+	return getNodeDocument(node)?.defaultView?.MutationObserver ?? globalThis.MutationObserver;
+}
+function isShadowRootNode(node) {
+	return node.nodeType === 11 && "host" in node && isElement(node.host);
+}
+function hasDisconnectedAncestry(nodes) {
+	return nodes.some((node) => node != null && [node, ...getComposedAncestry(node)].some((ancestor) => !ancestor.isConnected));
+}
+function observeComposedAncestry(getNodes, onChange, options = {}) {
+	let paths = readComposedAncestryPaths(getNodes());
+	let mutationObservers = [];
+	let slotRoots = [];
+	let disposed = false;
+	let disconnectNotified = false;
+	const reconnectScheduler = createRafScheduler(check, getView);
+	function getView() {
+		for (const node of getNodes()) {
+			const view = node ? getNodeDocument(node)?.defaultView : null;
+			if (view) return view;
+		}
+		return null;
+	}
+	function scheduleReconnectCheck(nodes) {
+		if (!hasDisconnectedAncestry(nodes)) return;
+		if (!getView()?.requestAnimationFrame) return;
+		reconnectScheduler.schedule();
+	}
+	function disconnectTargets() {
+		for (const observer of mutationObservers) observer.disconnect();
+		mutationObservers = [];
+		for (const root of slotRoots) root.removeEventListener("slotchange", check);
+		slotRoots = [];
+	}
+	function observeTargets(nodes, nextPaths) {
+		const observedNodes = new Set(nextPaths.flat());
+		const nextSlotRoots = /* @__PURE__ */ new Set();
+		const observersByConstructor = /* @__PURE__ */ new Map();
+		for (const node of observedNodes) {
+			if (isElement(node) && node.shadowRoot) nextSlotRoots.add(node.shadowRoot);
+			if (isShadowRootNode(node)) nextSlotRoots.add(node);
+			const MutationObserverConstructor = getMutationObserverConstructor(node);
+			if (!MutationObserverConstructor) continue;
+			let observer = observersByConstructor.get(MutationObserverConstructor);
+			if (!observer) {
+				observer = new MutationObserverConstructor(check);
+				observersByConstructor.set(MutationObserverConstructor, observer);
+			}
+			if (isElement(node)) observer.observe(node, {
+				childList: true,
+				attributes: true,
+				attributeFilter: ["slot", "name"]
+			});
+			else observer.observe(node, { childList: true });
+		}
+		mutationObservers = [...observersByConstructor.values()];
+		slotRoots = [...nextSlotRoots];
+		for (const root of slotRoots) root.addEventListener("slotchange", check);
+		scheduleReconnectCheck(nodes);
+	}
+	function rebind(nodes, nextPaths) {
+		disconnectTargets();
+		paths = nextPaths;
+		observeTargets(nodes, paths);
+	}
+	function check() {
+		if (disposed) return;
+		const nodes = getNodes();
+		if (options.deferWhileDisconnected && hasDisconnectedAncestry(nodes)) {
+			if (options.notifyOnDisconnect && !disconnectNotified) onChange();
+			disconnectNotified = true;
+			scheduleReconnectCheck(nodes);
+			return;
+		}
+		const shouldNotifyReconnect = disconnectNotified && options.notifyOnDisconnect;
+		disconnectNotified = false;
+		reconnectScheduler.cancel();
+		const nextPaths = readComposedAncestryPaths(nodes);
+		if (areAncestryPathsIdentical(paths, nextPaths)) {
+			if (shouldNotifyReconnect) onChange();
+			return;
+		}
+		rebind(nodes, nextPaths);
+		onChange();
+	}
+	const initialNodes = getNodes();
+	paths = readComposedAncestryPaths(initialNodes);
+	observeTargets(initialNodes, paths);
+	return () => {
+		if (disposed) return;
+		disposed = true;
+		reconnectScheduler.cancel();
+		disconnectTargets();
+	};
+}
+//#endregion
+export { observeComposedAncestry as n, getComposedAncestry as t };

package/dist/calendar.css

@@ -0,0 +1,173 @@
+@layer ropav.components {
+.rp-calendar[data-v-d3ae1d38] {
+    --_rp-calendar-day-size: var(--rp-size-control-sm);
+    --_rp-calendar-font-size: var(--rp-font-size-sm);
+    --_rp-calendar-gap: var(--rp-spacing-1);
+    --_rp-calendar-radius: var(--rp-radius-sm);
+    box-sizing: border-box;
+    display: inline-grid;
+    width: max-content;
+    max-width: 100%;
+    gap: var(--rp-spacing-2);
+    color: var(--rp-color-control-fg);
+    font-family: var(--rp-font-family);
+    font-size: var(--_rp-calendar-font-size);
+    line-height: 1;
+    vertical-align: middle;
+}
+.rp-calendar--size-xs[data-v-d3ae1d38] {
+    --_rp-calendar-day-size: var(--rp-size-control-xs);
+    --_rp-calendar-font-size: var(--rp-font-size-xs);
+    --_rp-calendar-gap: calc(var(--rp-spacing-1) / 2);
+}
+.rp-calendar--size-sm[data-v-d3ae1d38] {
+    --_rp-calendar-day-size: var(--rp-size-control-sm);
+    --_rp-calendar-font-size: var(--rp-font-size-sm);
+    --_rp-calendar-gap: var(--rp-spacing-1);
+}
+.rp-calendar--size-md[data-v-d3ae1d38] {
+    --_rp-calendar-day-size: var(--rp-size-control-sm);
+    --_rp-calendar-font-size: var(--rp-font-size-sm);
+    --_rp-calendar-gap: var(--rp-spacing-1);
+}
+.rp-calendar--size-lg[data-v-d3ae1d38] {
+    --_rp-calendar-day-size: var(--rp-size-control-md);
+    --_rp-calendar-font-size: var(--rp-font-size-md);
+    --_rp-calendar-gap: var(--rp-spacing-1);
+}
+.rp-calendar--size-xl[data-v-d3ae1d38] {
+    --_rp-calendar-day-size: var(--rp-size-control-lg);
+    --_rp-calendar-font-size: var(--rp-font-size-lg);
+    --_rp-calendar-gap: var(--rp-spacing-2);
+}
+.rp-calendar--radius-none[data-v-d3ae1d38] {
+    --_rp-calendar-radius: 0;
+}
+.rp-calendar--radius-xs[data-v-d3ae1d38] {
+    --_rp-calendar-radius: var(--rp-radius-xs);
+}
+.rp-calendar--radius-sm[data-v-d3ae1d38] {
+    --_rp-calendar-radius: var(--rp-radius-sm);
+}
+.rp-calendar--radius-md[data-v-d3ae1d38] {
+    --_rp-calendar-radius: var(--rp-radius-md);
+}
+.rp-calendar--radius-lg[data-v-d3ae1d38] {
+    --_rp-calendar-radius: var(--rp-radius-lg);
+}
+.rp-calendar--radius-xl[data-v-d3ae1d38] {
+    --_rp-calendar-radius: var(--rp-radius-xl);
+}
+.rp-calendar--radius-full[data-v-d3ae1d38] {
+    --_rp-calendar-radius: var(--rp-radius-full);
+}
+.rp-calendar__header[data-v-d3ae1d38] {
+    display: grid;
+    grid-template-columns: var(--_rp-calendar-day-size) 1fr var(--_rp-calendar-day-size);
+    align-items: center;
+    gap: var(--_rp-calendar-gap);
+}
+.rp-calendar__month-label[data-v-d3ae1d38] {
+    overflow: hidden;
+    font-weight: var(--rp-font-weight-semibold);
+    line-height: var(--_rp-calendar-day-size);
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.rp-calendar__control[data-v-d3ae1d38], .rp-calendar__day[data-v-d3ae1d38] {
+    padding: 0;
+    font: inherit;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--_rp-calendar-day-size);
+    height: var(--_rp-calendar-day-size);
+    border-radius: var(--_rp-calendar-radius);
+    color: inherit;
+    transition: color var(--rp-transition-fast), background-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
+}
+.rp-calendar__control[data-v-d3ae1d38]:focus-visible, .rp-calendar__day[data-v-d3ae1d38]:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+@media (forced-colors: active) {
+.rp-calendar__control[data-v-d3ae1d38]:focus-visible, .rp-calendar__day[data-v-d3ae1d38]:focus-visible {
+      outline: var(--rp-border-width-medium) solid Highlight;
+      outline-offset: 2px;
+      box-shadow: none;
+}
+}
+.rp-calendar__control[data-v-d3ae1d38] {
+    color: var(--rp-color-control-icon);
+}
+.rp-calendar__control[data-v-d3ae1d38]:hover:not(:disabled) {
+    color: var(--rp-color-control-fg);
+    background-color: var(--rp-color-default-hover);
+}
+.rp-calendar__control[data-v-d3ae1d38]:disabled {
+    cursor: not-allowed;
+    opacity: var(--rp-opacity-disabled);
+}
+.rp-calendar__control[data-v-d3ae1d38] >  svg {
+    width: 1em;
+    height: 1em;
+}
+.rp-calendar__grid[data-v-d3ae1d38] {
+    border-spacing: var(--_rp-calendar-gap);
+    margin: calc(-1 * var(--_rp-calendar-gap));
+    table-layout: fixed;
+}
+.rp-calendar__weekday[data-v-d3ae1d38], .rp-calendar__day-cell[data-v-d3ae1d38] {
+    box-sizing: border-box;
+    width: var(--_rp-calendar-day-size);
+    height: var(--_rp-calendar-day-size);
+    padding: 0;
+    text-align: center;
+}
+.rp-calendar__weekday[data-v-d3ae1d38] {
+    color: var(--rp-color-dimmed);
+    font-size: 0.85em;
+    font-weight: var(--rp-font-weight-medium);
+}
+.rp-calendar__day[data-v-d3ae1d38] {
+    position: relative;
+    font: inherit;
+}
+.rp-calendar__day[data-v-d3ae1d38]:hover:not(:disabled):not(.rp-calendar__day--selected) {
+    background-color: var(--rp-color-default-hover);
+}
+.rp-calendar__day--outside[data-v-d3ae1d38] {
+    color: var(--rp-color-dimmed);
+}
+.rp-calendar__day--today[data-v-d3ae1d38]::after {
+    position: absolute;
+    inset-inline-start: 50%;
+    bottom: max(2px, var(--_rp-calendar-day-size) * 0.1);
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background-color: currentColor;
+    content: "";
+    transform: translateX(-50%);
+}
+.rp-calendar__day--selected[data-v-d3ae1d38] {
+    color: var(--rp-color-control-selected-fg);
+    background-color: var(--rp-color-control-selected-bg);
+}
+.rp-calendar__day--selected[data-v-d3ae1d38]:hover:not(:disabled) {
+    background-color: var(--rp-primary-color-filled-hover);
+}
+.rp-calendar__day[data-v-d3ae1d38]:disabled {
+    cursor: not-allowed;
+    opacity: var(--rp-opacity-disabled);
+}
+.rp-calendar--disabled[data-v-d3ae1d38] {
+    opacity: var(--rp-opacity-disabled);
+    cursor: not-allowed;
+}
+}