ropav 0.15.0 → 0.16.0

package/dist/utils/position.js

@@ -25,8 +25,15 @@ var TOTAL_SIZE = {
 };
 var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 var getVisualViewport = () => typeof document === "undefined" ? null : window.visualViewport;
-/** Whether one node is the other, or contains it. */
-var nodeContains = (node, other) => Boolean(node && other && node.contains(other));
+/** Whether a boundary element stands for the viewport, as the body and the document element do. */
+var isViewportElement = (node) => node.tagName === "BODY" || node.tagName === "HTML";
+/**
+* Whether the container is the viewport. Only the document element ever is: the body is the
+* container only once it is positioned or a containing block, and then an overlay is placed from
+* the body's own padding box, which a body taller than the viewport, or set apart from it by its
+* margin, does not share with the viewport.
+*/
+var isViewportContainer = (node) => node === document.documentElement;
 var isWebKit = () => typeof navigator !== "undefined" && /AppleWebKit/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
 /** The element's rectangle, ignoring any scale transform when asked. */
 var getRect = (node, ignoreScale) => {
@@ -76,7 +83,7 @@ var getPosition = (node, parent, ignoreScale, overrideRect) => {
 */
 var isContainingBlock = (node) => {
 	const style = window.getComputedStyle(node);
-	return style.transform !== "none" || /transform|perspective/.test(style.willChange) || style.filter !== "none" || style.contain === "paint" || "backdropFilter" in style && style.backdropFilter !== "none";
+	return style.transform !== "none" || /transform|perspective/.test(style.willChange) || style.filter !== "none" || /\b(layout|paint|strict|content)\b/.test(style.contain) || "backdropFilter" in style && style.backdropFilter !== "none";
 };
 /** The element an absolutely positioned overlay is placed relative to. */
 var getContainingBlock = (node) => {
@@ -98,26 +105,28 @@ var getContainerDimensions = (containerNode, visualViewport) => {
 	let left = 0;
 	const scroll = {};
 	const isPinchZoomedIn = (visualViewport?.scale ?? 1) > 1;
-	if (containerNode.tagName === "BODY" || containerNode.tagName === "HTML") {
+	if (isViewportContainer(containerNode)) {
 		const documentElement = document.documentElement;
 		totalWidth = documentElement.clientWidth;
 		totalHeight = documentElement.clientHeight;
 		width = visualViewport?.width ?? totalWidth;
 		height = visualViewport?.height ?? totalHeight;
-		scroll.top = documentElement.scrollTop || containerNode.scrollTop;
-		scroll.left = documentElement.scrollLeft || containerNode.scrollLeft;
+		scroll.top = documentElement.scrollTop;
+		scroll.left = documentElement.scrollLeft;
 		if (visualViewport) {
 			top = visualViewport.offsetTop;
 			left = visualViewport.offsetLeft;
 		}
 	} else {
-		({height, left, top, width} = getOffset(containerNode, false));
+		({left, top} = getOffset(containerNode, false));
+		width = containerNode.clientWidth;
+		height = containerNode.clientHeight;
 		scroll.top = containerNode.scrollTop;
 		scroll.left = containerNode.scrollLeft;
 		totalWidth = width;
 		totalHeight = height;
 	}
-	if (isWebKit() && (containerNode.tagName === "BODY" || containerNode.tagName === "HTML") && isPinchZoomedIn) {
+	if (isWebKit() && isViewportContainer(containerNode) && isPinchZoomedIn) {
 		scroll.top = 0;
 		scroll.left = 0;
 		top = visualViewport?.pageTop ?? 0;
@@ -134,13 +143,11 @@ var getContainerDimensions = (containerNode, visualViewport) => {
 	};
 };
 /** How far the overlay must shift along `axis` to stay inside the boundary. */
-var getDelta = (axis, offset, size, boundaryDimensions, containerDimensions, padding, containerOffsetWithBoundary) => {
-	const containerScroll = containerDimensions.scroll[axis] ?? 0;
-	const boundarySize = boundaryDimensions[AXIS_SIZE[axis]];
-	const boundaryScroll = boundaryDimensions.scroll[AXIS[axis]] ?? 0;
-	const boundaryStartEdge = containerOffsetWithBoundary[axis] + boundaryScroll + padding;
-	const boundaryEndEdge = containerOffsetWithBoundary[axis] + boundaryScroll + boundarySize - padding;
-	const startEdgeOffset = offset - containerScroll + boundaryScroll + containerOffsetWithBoundary[axis] - boundaryDimensions[AXIS[axis]];
+var getDelta = (axis, offset, size, boundary, containerDimensions, padding) => {
+	const boundaryStart = boundary[axis] + (containerDimensions.scroll[axis] ?? 0);
+	const boundaryStartEdge = boundaryStart + padding;
+	const boundaryEndEdge = boundaryStart + boundary[AXIS_SIZE[axis]] - padding;
+	const startEdgeOffset = offset;
 	const endEdgeOffset = startEdgeOffset + size;
 	if (startEdgeOffset < boundaryStartEdge) return boundaryStartEdge - startEdgeOffset;
 	if (endEdgeOffset > boundaryEndEdge) return Math.max(boundaryEndEdge - endEdgeOffset, boundaryStartEdge - startEdgeOffset);
@@ -189,36 +196,35 @@ var computePosition = (childOffset, overlaySize, placementInfo, offset, crossOff
 	} else position[axis] = Math.floor(childOffset[axis] + childOffset[size] + offset);
 	return position;
 };
-var getMaxHeight = (position, boundaryDimensions, containerOffsetWithBoundary, margins, padding, overlayHeight, heightGrowthDirection, containerDimensions, isContainerDescendentOfBoundary, visualViewport) => {
+var getMaxHeight = (position, boundary, viewport, margins, padding, overlayHeight, heightGrowthDirection, containerDimensions) => {
 	const overlayTop = (position.top != null ? position.top : containerDimensions[TOTAL_SIZE.height] - (position.bottom ?? 0) - overlayHeight) - (containerDimensions.scroll.top ?? 0);
-	const boundaryToContainerTransformOffset = isContainerDescendentOfBoundary ? containerOffsetWithBoundary.top : 0;
-	const viewportTop = visualViewport?.offsetTop ?? boundaryDimensions.top;
-	const viewportBottom = visualViewport ? visualViewport.offsetTop + visualViewport.height : boundaryDimensions.top + boundaryDimensions.height;
+	const visible = viewport ?? boundary;
 	const boundingRect = {
-		bottom: Math.min(boundaryDimensions.top + boundaryDimensions.height + boundaryToContainerTransformOffset, viewportBottom),
-		top: Math.max(boundaryDimensions.top + boundaryToContainerTransformOffset, viewportTop + boundaryToContainerTransformOffset)
+		bottom: Math.min(boundary.top + boundary.height, visible.top + visible.height),
+		top: Math.max(boundary.top, visible.top)
 	};
 	const reserved = (margins.top ?? 0) + (margins.bottom ?? 0) + padding;
 	return heightGrowthDirection !== "top" ? Math.max(0, boundingRect.bottom - overlayTop - reserved) : Math.max(0, overlayTop + overlayHeight - boundingRect.top - reserved);
 };
 /** How much room there is on the side the overlay wants to be on. */
-var getAvailableSpace = (boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding, placementInfo, containerDimensions, isContainerDescendentOfBoundary) => {
+var getAvailableSpace = (boundary, childOffset, margins, padding, placementInfo, containerDimensions) => {
 	const { axis, placement, size } = placementInfo;
-	const containerOffset = isContainerDescendentOfBoundary ? containerOffsetWithBoundary[axis] : 0;
-	if (placement === axis) return Math.max(0, childOffset[axis] - (containerDimensions.scroll[axis] ?? 0) - (boundaryDimensions[axis] + containerOffset) - (margins[axis] ?? 0) - (margins[FLIPPED_DIRECTION[axis]] ?? 0) - padding);
-	return Math.max(0, boundaryDimensions[size] + boundaryDimensions[axis] + containerOffset - childOffset[axis] - childOffset[size] + (containerDimensions.scroll[axis] ?? 0) - (margins[axis] ?? 0) - (margins[FLIPPED_DIRECTION[axis]] ?? 0) - padding);
+	const boundaryStart = boundary[axis] + (containerDimensions.scroll[axis] ?? 0);
+	const reserved = (margins[axis] ?? 0) + (margins[FLIPPED_DIRECTION[axis]] ?? 0) + padding;
+	if (placement === axis) return Math.max(0, childOffset[axis] - boundaryStart - reserved);
+	return Math.max(0, boundaryStart + boundary[size] - childOffset[axis] - childOffset[size] - reserved);
 };
 /** @private Exported for tests, which drive the arithmetic without a real layout. */
-var calculatePositionInternal = (placementInput, childOffset, overlaySize, margins, padding, flip, boundaryDimensions, containerDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, userSetMaxHeight, arrowSize, arrowBoundaryOffset, isContainerDescendentOfBoundary, visualViewport) => {
+var calculatePositionInternal = (placementInput, childOffset, overlaySize, margins, padding, flip, boundary, containerDimensions, viewport, offset, crossOffset, isContainerPositioned, userSetMaxHeight, arrowSize, arrowBoundaryOffset) => {
 	let placementInfo = parsePlacement(placementInput);
 	const { crossAxis, crossSize, size } = placementInfo;
 	let { crossPlacement, placement } = placementInfo;
 	let position = computePosition(childOffset, overlaySize, placementInfo, offset, crossOffset, isContainerPositioned, arrowSize, arrowBoundaryOffset, containerDimensions);
-	const space = getAvailableSpace(boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding + offset, placementInfo, containerDimensions, isContainerDescendentOfBoundary);
+	const space = getAvailableSpace(boundary, childOffset, margins, padding + offset, placementInfo, containerDimensions);
 	if (flip && overlaySize[size] > space) {
 		const flippedPlacementInfo = parsePlacement(`${FLIPPED_DIRECTION[placement]} ${crossPlacement}`);
 		const flippedPosition = computePosition(childOffset, overlaySize, flippedPlacementInfo, offset, crossOffset, isContainerPositioned, arrowSize, arrowBoundaryOffset, containerDimensions);
-		if (getAvailableSpace(boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding + offset, flippedPlacementInfo, containerDimensions, isContainerDescendentOfBoundary) > space) {
+		if (getAvailableSpace(boundary, childOffset, margins, padding + offset, flippedPlacementInfo, containerDimensions) > space) {
 			placementInfo = flippedPlacementInfo;
 			position = flippedPosition;
 		}
@@ -229,12 +235,12 @@ var calculatePositionInternal = (placementInput, childOffset, overlaySize, margi
 	} else if (placementInfo.crossAxis === "top") {
 		if (placementInfo.crossPlacement === "bottom") heightGrowthDirection = "top";
 	}
-	position[crossAxis] += getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding, containerOffsetWithBoundary);
-	let maxHeight = getMaxHeight(position, boundaryDimensions, containerOffsetWithBoundary, margins, padding, overlaySize.height, heightGrowthDirection, containerDimensions, isContainerDescendentOfBoundary, visualViewport);
+	position[crossAxis] += getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundary, containerDimensions, padding);
+	let maxHeight = getMaxHeight(position, boundary, viewport, margins, padding, overlaySize.height, heightGrowthDirection, containerDimensions);
 	if (userSetMaxHeight && userSetMaxHeight < maxHeight) maxHeight = userSetMaxHeight;
 	overlaySize.height = Math.min(overlaySize.height, maxHeight);
 	position = computePosition(childOffset, overlaySize, placementInfo, offset, crossOffset, isContainerPositioned, arrowSize, arrowBoundaryOffset, containerDimensions);
-	position[crossAxis] += getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding, containerOffsetWithBoundary);
+	position[crossAxis] += getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundary, containerDimensions, padding);
 	const arrowPosition = {};
 	let origin = childOffset[crossAxis] - position[crossAxis] - (margins[AXIS[crossAxis]] ?? 0);
 	const preferredArrowPosition = origin + .5 * childOffset[crossSize];
@@ -268,11 +274,11 @@ var calculatePosition = (options) => {
 	const { arrowBoundaryOffset = 0, arrowSize = 0, boundaryElement, crossOffset, maxHeight, offset, overlayNode, padding, placement, shouldFlip, targetNode, targetRect } = options;
 	const visualViewport = getVisualViewport();
 	const container = overlayNode instanceof HTMLElement ? getContainingBlock(overlayNode) : document.documentElement;
-	const isViewportContainer = container === document.documentElement;
+	const isContainerViewport = isViewportContainer(container);
 	const containerPositionStyle = window.getComputedStyle(container).position;
 	const isContainerPositioned = Boolean(containerPositionStyle) && containerPositionStyle !== "static";
-	const childOffset = isViewportContainer ? getOffset(targetNode, false, targetRect) : getPosition(targetNode, container, false, targetRect);
-	if (!isViewportContainer) {
+	const childOffset = isContainerViewport ? getOffset(targetNode, false, targetRect) : getPosition(targetNode, container, false, targetRect);
+	if (!isContainerViewport) {
 		const { marginLeft, marginTop } = window.getComputedStyle(targetNode);
 		childOffset.top += parseInt(marginTop, 10) || 0;
 		childOffset.left += parseInt(marginLeft, 10) || 0;
@@ -281,26 +287,34 @@ var calculatePosition = (options) => {
 	const margins = getMargins(overlayNode);
 	overlaySize.width += (margins.left ?? 0) + (margins.right ?? 0);
 	overlaySize.height += (margins.top ?? 0) + (margins.bottom ?? 0);
-	const boundaryDimensions = getContainerDimensions(boundaryElement, visualViewport);
 	const containerDimensions = getContainerDimensions(container, visualViewport);
-	let containerOffsetWithBoundary;
-	const isBoundaryViewport = boundaryElement.tagName === "BODY" || boundaryElement.tagName === "HTML";
-	if (isBoundaryViewport && !isViewportContainer) {
-		const containerRect = getRect(container, false);
-		containerOffsetWithBoundary = {
-			height: 0,
-			left: -(containerRect.left - boundaryDimensions.left),
-			top: -(containerRect.top - boundaryDimensions.top),
-			width: 0
-		};
-	} else if (isBoundaryViewport && isViewportContainer) containerOffsetWithBoundary = {
-		height: 0,
-		left: 0,
-		top: 0,
-		width: 0
+	const { clientHeight, clientWidth } = document.documentElement;
+	const viewportRect = {
+		height: visualViewport?.height ?? clientHeight,
+		left: visualViewport?.offsetLeft ?? 0,
+		top: visualViewport?.offsetTop ?? 0,
+		width: visualViewport?.width ?? clientWidth
 	};
-	else containerOffsetWithBoundary = getPosition(boundaryElement, container, false);
-	return calculatePositionInternal(placement, childOffset, overlaySize, margins, padding, shouldFlip, boundaryDimensions, containerDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, maxHeight, arrowSize, arrowBoundaryOffset, nodeContains(boundaryElement, container), visualViewport);
+	let origin;
+	if (isContainerViewport) origin = {
+		left: viewportRect.left - containerDimensions.left,
+		top: viewportRect.top - containerDimensions.top
+	};
+	else {
+		const containerRect = container.getBoundingClientRect();
+		origin = {
+			left: containerRect.left + container.clientLeft,
+			top: containerRect.top + container.clientTop
+		};
+	}
+	const toContainer = ({ height, left, top, width }) => ({
+		height,
+		left: left - origin.left,
+		top: top - origin.top,
+		width
+	});
+	const viewport = toContainer(viewportRect);
+	return calculatePositionInternal(placement, childOffset, overlaySize, margins, padding, shouldFlip, isViewportElement(boundaryElement) ? viewport : toContainer(getRect(boundaryElement, false)), containerDimensions, visualViewport ? viewport : null, offset, crossOffset, isContainerPositioned, maxHeight, arrowSize, arrowBoundaryOffset);
 };
 /** Resolves the logical `start`/`end` in a placement against the writing direction. */
 var translateRTL = (placement, direction) => direction === "rtl" ? placement.replace("start", "right").replace("end", "left") : placement.replace("start", "left").replace("end", "right");

package/dist/utils/region.d.ts

@@ -3,8 +3,8 @@
  *
  * An overlay belongs to a region: the root its `PortalProvider` names, or the whole document
  * (`null`) without one. The page-wide stacks — which overlay is innermost, which one watches the
- * DOM, which one holds focus — are only shared between overlays whose regions overlap. Two apps'
- * windows side by side are separate regions, so a modal in one is not stacked over a modal in the
- * other; the whole document overlaps everything, so without a provider nothing changes.
+ * DOM, which one holds focus — are only shared between overlays whose regions overlap. Two regions
+ * side by side are separate, so a modal in one is not stacked over a modal in the other; the whole
+ * document overlaps everything, so without a provider nothing changes.
  */
 export declare const regionsOverlap: (a: Element | null, b: Element | null) => boolean;

package/dist/utils/region.js

@@ -4,9 +4,9 @@
 *
 * An overlay belongs to a region: the root its `PortalProvider` names, or the whole document
 * (`null`) without one. The page-wide stacks — which overlay is innermost, which one watches the
-* DOM, which one holds focus — are only shared between overlays whose regions overlap. Two apps'
-* windows side by side are separate regions, so a modal in one is not stacked over a modal in the
-* other; the whole document overlaps everything, so without a provider nothing changes.
+* DOM, which one holds focus — are only shared between overlays whose regions overlap. Two regions
+* side by side are separate, so a modal in one is not stacked over a modal in the other; the whole
+* document overlaps everything, so without a provider nothing changes.
 */
 var regionsOverlap = (a, b) => a == null || b == null || a.contains(b) || b.contains(a);
 //#endregion

package/dist/version.js

@@ -1,4 +1,4 @@
 //#region src/version.ts
-var ROPAV_VERSION = "0.15.0";
+var ROPAV_VERSION = "0.16.0";
 //#endregion
 export { ROPAV_VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ropav",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "Vapor-native Vue 3 component library — accessible by default, styled with framework-agnostic CSS.",
   "keywords": [
     "components",
@@ -45,6 +45,366 @@
       "default": "./dist/styles.css"
     },
     "./styles/bundled.css": "./dist/ropav.min.css",
+    "./styles/core": {
+      "style": "./dist/styles/core.css",
+      "default": "./dist/styles/core.css"
+    },
+    "./styles/components": {
+      "style": "./dist/styles/components.css",
+      "default": "./dist/styles/components.css"
+    },
+    "./styles/accordion": {
+      "style": "./dist/styles/accordion.css",
+      "default": "./dist/styles/accordion.css"
+    },
+    "./styles/alert": {
+      "style": "./dist/styles/alert.css",
+      "default": "./dist/styles/alert.css"
+    },
+    "./styles/alert-dialog": {
+      "style": "./dist/styles/alert-dialog.css",
+      "default": "./dist/styles/alert-dialog.css"
+    },
+    "./styles/autocomplete": {
+      "style": "./dist/styles/autocomplete.css",
+      "default": "./dist/styles/autocomplete.css"
+    },
+    "./styles/avatar": {
+      "style": "./dist/styles/avatar.css",
+      "default": "./dist/styles/avatar.css"
+    },
+    "./styles/avatar-group": {
+      "style": "./dist/styles/avatar-group.css",
+      "default": "./dist/styles/avatar-group.css"
+    },
+    "./styles/badge": {
+      "style": "./dist/styles/badge.css",
+      "default": "./dist/styles/badge.css"
+    },
+    "./styles/breadcrumbs": {
+      "style": "./dist/styles/breadcrumbs.css",
+      "default": "./dist/styles/breadcrumbs.css"
+    },
+    "./styles/button": {
+      "style": "./dist/styles/button.css",
+      "default": "./dist/styles/button.css"
+    },
+    "./styles/button-group": {
+      "style": "./dist/styles/button-group.css",
+      "default": "./dist/styles/button-group.css"
+    },
+    "./styles/calendar": {
+      "style": "./dist/styles/calendar.css",
+      "default": "./dist/styles/calendar.css"
+    },
+    "./styles/calendar-year-picker": {
+      "style": "./dist/styles/calendar-year-picker.css",
+      "default": "./dist/styles/calendar-year-picker.css"
+    },
+    "./styles/card": {
+      "style": "./dist/styles/card.css",
+      "default": "./dist/styles/card.css"
+    },
+    "./styles/checkbox": {
+      "style": "./dist/styles/checkbox.css",
+      "default": "./dist/styles/checkbox.css"
+    },
+    "./styles/checkbox-group": {
+      "style": "./dist/styles/checkbox-group.css",
+      "default": "./dist/styles/checkbox-group.css"
+    },
+    "./styles/chip": {
+      "style": "./dist/styles/chip.css",
+      "default": "./dist/styles/chip.css"
+    },
+    "./styles/close-button": {
+      "style": "./dist/styles/close-button.css",
+      "default": "./dist/styles/close-button.css"
+    },
+    "./styles/color-area": {
+      "style": "./dist/styles/color-area.css",
+      "default": "./dist/styles/color-area.css"
+    },
+    "./styles/color-field": {
+      "style": "./dist/styles/color-field.css",
+      "default": "./dist/styles/color-field.css"
+    },
+    "./styles/color-input-group": {
+      "style": "./dist/styles/color-input-group.css",
+      "default": "./dist/styles/color-input-group.css"
+    },
+    "./styles/color-picker": {
+      "style": "./dist/styles/color-picker.css",
+      "default": "./dist/styles/color-picker.css"
+    },
+    "./styles/color-slider": {
+      "style": "./dist/styles/color-slider.css",
+      "default": "./dist/styles/color-slider.css"
+    },
+    "./styles/color-swatch": {
+      "style": "./dist/styles/color-swatch.css",
+      "default": "./dist/styles/color-swatch.css"
+    },
+    "./styles/color-swatch-picker": {
+      "style": "./dist/styles/color-swatch-picker.css",
+      "default": "./dist/styles/color-swatch-picker.css"
+    },
+    "./styles/combo-box": {
+      "style": "./dist/styles/combo-box.css",
+      "default": "./dist/styles/combo-box.css"
+    },
+    "./styles/date-field": {
+      "style": "./dist/styles/date-field.css",
+      "default": "./dist/styles/date-field.css"
+    },
+    "./styles/date-picker": {
+      "style": "./dist/styles/date-picker.css",
+      "default": "./dist/styles/date-picker.css"
+    },
+    "./styles/date-range-picker": {
+      "style": "./dist/styles/date-range-picker.css",
+      "default": "./dist/styles/date-range-picker.css"
+    },
+    "./styles/description": {
+      "style": "./dist/styles/description.css",
+      "default": "./dist/styles/description.css"
+    },
+    "./styles/disclosure": {
+      "style": "./dist/styles/disclosure.css",
+      "default": "./dist/styles/disclosure.css"
+    },
+    "./styles/disclosure-group": {
+      "style": "./dist/styles/disclosure-group.css",
+      "default": "./dist/styles/disclosure-group.css"
+    },
+    "./styles/drawer": {
+      "style": "./dist/styles/drawer.css",
+      "default": "./dist/styles/drawer.css"
+    },
+    "./styles/drop-zone": {
+      "style": "./dist/styles/drop-zone.css",
+      "default": "./dist/styles/drop-zone.css"
+    },
+    "./styles/dropdown": {
+      "style": "./dist/styles/dropdown.css",
+      "default": "./dist/styles/dropdown.css"
+    },
+    "./styles/empty-state": {
+      "style": "./dist/styles/empty-state.css",
+      "default": "./dist/styles/empty-state.css"
+    },
+    "./styles/error-message": {
+      "style": "./dist/styles/error-message.css",
+      "default": "./dist/styles/error-message.css"
+    },
+    "./styles/field-error": {
+      "style": "./dist/styles/field-error.css",
+      "default": "./dist/styles/field-error.css"
+    },
+    "./styles/fieldset": {
+      "style": "./dist/styles/fieldset.css",
+      "default": "./dist/styles/fieldset.css"
+    },
+    "./styles/header": {
+      "style": "./dist/styles/header.css",
+      "default": "./dist/styles/header.css"
+    },
+    "./styles/input": {
+      "style": "./dist/styles/input.css",
+      "default": "./dist/styles/input.css"
+    },
+    "./styles/input-group": {
+      "style": "./dist/styles/input-group.css",
+      "default": "./dist/styles/input-group.css"
+    },
+    "./styles/input-otp": {
+      "style": "./dist/styles/input-otp.css",
+      "default": "./dist/styles/input-otp.css"
+    },
+    "./styles/kbd": {
+      "style": "./dist/styles/kbd.css",
+      "default": "./dist/styles/kbd.css"
+    },
+    "./styles/label": {
+      "style": "./dist/styles/label.css",
+      "default": "./dist/styles/label.css"
+    },
+    "./styles/link": {
+      "style": "./dist/styles/link.css",
+      "default": "./dist/styles/link.css"
+    },
+    "./styles/list-box": {
+      "style": "./dist/styles/list-box.css",
+      "default": "./dist/styles/list-box.css"
+    },
+    "./styles/list-box-item": {
+      "style": "./dist/styles/list-box-item.css",
+      "default": "./dist/styles/list-box-item.css"
+    },
+    "./styles/list-box-section": {
+      "style": "./dist/styles/list-box-section.css",
+      "default": "./dist/styles/list-box-section.css"
+    },
+    "./styles/menu": {
+      "style": "./dist/styles/menu.css",
+      "default": "./dist/styles/menu.css"
+    },
+    "./styles/menu-item": {
+      "style": "./dist/styles/menu-item.css",
+      "default": "./dist/styles/menu-item.css"
+    },
+    "./styles/menu-section": {
+      "style": "./dist/styles/menu-section.css",
+      "default": "./dist/styles/menu-section.css"
+    },
+    "./styles/meter": {
+      "style": "./dist/styles/meter.css",
+      "default": "./dist/styles/meter.css"
+    },
+    "./styles/modal": {
+      "style": "./dist/styles/modal.css",
+      "default": "./dist/styles/modal.css"
+    },
+    "./styles/number-field": {
+      "style": "./dist/styles/number-field.css",
+      "default": "./dist/styles/number-field.css"
+    },
+    "./styles/pagination": {
+      "style": "./dist/styles/pagination.css",
+      "default": "./dist/styles/pagination.css"
+    },
+    "./styles/popover": {
+      "style": "./dist/styles/popover.css",
+      "default": "./dist/styles/popover.css"
+    },
+    "./styles/progress-bar": {
+      "style": "./dist/styles/progress-bar.css",
+      "default": "./dist/styles/progress-bar.css"
+    },
+    "./styles/progress-circle": {
+      "style": "./dist/styles/progress-circle.css",
+      "default": "./dist/styles/progress-circle.css"
+    },
+    "./styles/radio": {
+      "style": "./dist/styles/radio.css",
+      "default": "./dist/styles/radio.css"
+    },
+    "./styles/radio-group": {
+      "style": "./dist/styles/radio-group.css",
+      "default": "./dist/styles/radio-group.css"
+    },
+    "./styles/range-calendar": {
+      "style": "./dist/styles/range-calendar.css",
+      "default": "./dist/styles/range-calendar.css"
+    },
+    "./styles/scroll-shadow": {
+      "style": "./dist/styles/scroll-shadow.css",
+      "default": "./dist/styles/scroll-shadow.css"
+    },
+    "./styles/search-field": {
+      "style": "./dist/styles/search-field.css",
+      "default": "./dist/styles/search-field.css"
+    },
+    "./styles/segmented-control": {
+      "style": "./dist/styles/segmented-control.css",
+      "default": "./dist/styles/segmented-control.css"
+    },
+    "./styles/select": {
+      "style": "./dist/styles/select.css",
+      "default": "./dist/styles/select.css"
+    },
+    "./styles/separator": {
+      "style": "./dist/styles/separator.css",
+      "default": "./dist/styles/separator.css"
+    },
+    "./styles/sidebar": {
+      "style": "./dist/styles/sidebar.css",
+      "default": "./dist/styles/sidebar.css"
+    },
+    "./styles/skeleton": {
+      "style": "./dist/styles/skeleton.css",
+      "default": "./dist/styles/skeleton.css"
+    },
+    "./styles/slider": {
+      "style": "./dist/styles/slider.css",
+      "default": "./dist/styles/slider.css"
+    },
+    "./styles/spinner": {
+      "style": "./dist/styles/spinner.css",
+      "default": "./dist/styles/spinner.css"
+    },
+    "./styles/splitter": {
+      "style": "./dist/styles/splitter.css",
+      "default": "./dist/styles/splitter.css"
+    },
+    "./styles/surface": {
+      "style": "./dist/styles/surface.css",
+      "default": "./dist/styles/surface.css"
+    },
+    "./styles/switch": {
+      "style": "./dist/styles/switch.css",
+      "default": "./dist/styles/switch.css"
+    },
+    "./styles/switch-group": {
+      "style": "./dist/styles/switch-group.css",
+      "default": "./dist/styles/switch-group.css"
+    },
+    "./styles/table": {
+      "style": "./dist/styles/table.css",
+      "default": "./dist/styles/table.css"
+    },
+    "./styles/tabs": {
+      "style": "./dist/styles/tabs.css",
+      "default": "./dist/styles/tabs.css"
+    },
+    "./styles/tag": {
+      "style": "./dist/styles/tag.css",
+      "default": "./dist/styles/tag.css"
+    },
+    "./styles/tag-group": {
+      "style": "./dist/styles/tag-group.css",
+      "default": "./dist/styles/tag-group.css"
+    },
+    "./styles/textarea": {
+      "style": "./dist/styles/textarea.css",
+      "default": "./dist/styles/textarea.css"
+    },
+    "./styles/textfield": {
+      "style": "./dist/styles/textfield.css",
+      "default": "./dist/styles/textfield.css"
+    },
+    "./styles/time-field": {
+      "style": "./dist/styles/time-field.css",
+      "default": "./dist/styles/time-field.css"
+    },
+    "./styles/toast": {
+      "style": "./dist/styles/toast.css",
+      "default": "./dist/styles/toast.css"
+    },
+    "./styles/toggle-button": {
+      "style": "./dist/styles/toggle-button.css",
+      "default": "./dist/styles/toggle-button.css"
+    },
+    "./styles/toggle-button-group": {
+      "style": "./dist/styles/toggle-button-group.css",
+      "default": "./dist/styles/toggle-button-group.css"
+    },
+    "./styles/toolbar": {
+      "style": "./dist/styles/toolbar.css",
+      "default": "./dist/styles/toolbar.css"
+    },
+    "./styles/tooltip": {
+      "style": "./dist/styles/tooltip.css",
+      "default": "./dist/styles/tooltip.css"
+    },
+    "./styles/typography": {
+      "style": "./dist/styles/typography.css",
+      "default": "./dist/styles/typography.css"
+    },
+    "./styles/virtualizer": {
+      "style": "./dist/styles/virtualizer.css",
+      "default": "./dist/styles/virtualizer.css"
+    },
     "./accordion": {
       "import": "./dist/components/accordion/index.js",
       "types": "./dist/components/accordion/index.d.ts"
@@ -421,7 +781,7 @@
     "@internationalized/date": "3.12.4",
     "@internationalized/number": "3.6.8",
     "@internationalized/string": "3.2.10",
-    "@ropav/styles": "0.15.0"
+    "@ropav/styles": "0.16.0"
   },
   "peerDependencies": {
     "vue": "^3.6.0-rc.8"