ropav 0.6.0 → 0.8.0

package/dist/styles-no-preflight.css

@@ -0,0 +1,3 @@
+/* `styles.css` without Tailwind's preflight, for an app that already resets. */
+@import "@ropav/styles/no-preflight";
+@import "./styles-overrides.css";

package/dist/styles-overrides.css

@@ -0,0 +1,15 @@
+/**
+ * Rules layered on top of `@ropav/styles` rather than merged into it, so each one stays
+ * separately deletable once `packages/styles` folds it in.
+ */
+@layer components {
+  /**
+   * A vertical group stacks along the block axis, so its cross axis is the one that decides
+   * button width. `.rp-button` is `w-fit`, which would leave each button as wide as its own
+   * label and centred against the widest one - a ragged left and right edge. `min-width`
+   * squares them up without overriding the fixed width an icon-only button relies on.
+   */
+  .rp-button-group--vertical .rp-button {
+    @apply min-w-full;
+  }
+}

package/dist/styles.css

@@ -1,17 +1,2 @@
 @import "@ropav/styles";
-
-/**
- * Rules layered on top of `@ropav/styles` rather than merged into it, so each one stays
- * separately deletable once `packages/styles` folds it in.
- */
-@layer components {
-  /**
-   * A vertical group stacks along the block axis, so its cross axis is the one that decides
-   * button width. `.button` is `w-fit`, which would leave each button as wide as its own
-   * label and centred against the widest one - a ragged left and right edge. `min-width`
-   * squares them up without overriding the fixed width an icon-only button relies on.
-   */
-  .button-group--vertical .button {
-    @apply min-w-full;
-  }
-}
+@import "./styles-overrides.css";

package/dist/utils/auto-label.d.ts

@@ -0,0 +1,24 @@
+import type { Component } from "vue";
+/**
+ * A component that renders its children, wrapping them in `Label` when they are only text - the
+ * equivalent of React's `typeof children === "string" || typeof children === "number"`.
+ *
+ * Written as a factory rather than an SFC because only a hand-written `setup` gets to hold the
+ * children; an SFC's `<slot />` is inserted before there is anywhere to intervene. That costs it
+ * the dual compilation a `.vue` file gets, so both branches are spelled out here and picked once,
+ * on whether this bundle has a Vapor runtime at all.
+ *
+ * **Vapor.** The slot has already rendered by the time it returns its block, so inspecting that
+ * block preserves its effects and lets the exact same text nodes move into the label. It is
+ * called once and the very block it returns is what gets inserted, so nothing renders twice and
+ * no effect is registered and thrown away - the actual hazard with slots in Vapor, rather than
+ * reading them at all. A slot forwarded from a VDOM host is the exception: it is filled only on
+ * insertion, so there is nothing to inspect and bare text goes unwrapped.
+ *
+ * **Server.** Renders the children and leaves them alone. A server cannot tell whether the
+ * browser will hydrate this as Vapor or as VDOM, and wrapping guesses at one of them; passing
+ * through matches a VDOM caller exactly, and matches a Vapor caller for every form in which the
+ * label is written out - which is every documented one. The case it gives up is a Vapor caller
+ * handing it bare text, and that is where a server-side wrap would have to come back.
+ */
+export declare const createAutoLabel: (Label: Component, name: string) => Component;

package/dist/utils/auto-label.js

@@ -0,0 +1,48 @@
+import { flattenBlock, isTextOnlyBlock } from "./block.js";
+import * as Vue from "vue";
+//#region src/utils/auto-label.ts
+/**
+* The namespace import is load-bearing and must not be rewritten to a named one.
+*
+* `createComponent` and `defineVaporComponent` come from the Vapor runtime, which only the
+* esm-bundler build re-exports. A bundler externalising `vue` for SSR resolves the node entry,
+* and a named import of a binding it does not have is a link-time `SyntaxError` - thrown before
+* any guard could run, so no `import.meta.env.SSR` branch can reach it. A namespace read yields
+* `undefined` instead, which is what lets the two branches below be chosen at module scope.
+*/
+var { createComponent: createComponent$1, defineComponent, defineVaporComponent: defineVaporComponent$1 } = Vue;
+/**
+* A component that renders its children, wrapping them in `Label` when they are only text - the
+* equivalent of React's `typeof children === "string" || typeof children === "number"`.
+*
+* Written as a factory rather than an SFC because only a hand-written `setup` gets to hold the
+* children; an SFC's `<slot />` is inserted before there is anywhere to intervene. That costs it
+* the dual compilation a `.vue` file gets, so both branches are spelled out here and picked once,
+* on whether this bundle has a Vapor runtime at all.
+*
+* **Vapor.** The slot has already rendered by the time it returns its block, so inspecting that
+* block preserves its effects and lets the exact same text nodes move into the label. It is
+* called once and the very block it returns is what gets inserted, so nothing renders twice and
+* no effect is registered and thrown away - the actual hazard with slots in Vapor, rather than
+* reading them at all. A slot forwarded from a VDOM host is the exception: it is filled only on
+* insertion, so there is nothing to inspect and bare text goes unwrapped.
+*
+* **Server.** Renders the children and leaves them alone. A server cannot tell whether the
+* browser will hydrate this as Vapor or as VDOM, and wrapping guesses at one of them; passing
+* through matches a VDOM caller exactly, and matches a Vapor caller for every form in which the
+* label is written out - which is every documented one. The case it gives up is a Vapor caller
+* handing it bare text, and that is where a server-side wrap would have to come back.
+*/
+var createAutoLabel = (Label, name) => defineVaporComponent$1 ? defineVaporComponent$1((_props, { slots }) => {
+	const block = slots["default"]?.();
+	if (block === void 0 || !isTextOnlyBlock(flattenBlock(block))) return block ?? [];
+	return createComponent$1(Label, null, { default: () => block });
+}, { name }) : defineComponent({
+	name,
+	setup: (_props, { slots }) => () => {
+		const vnodes = slots["default"]?.();
+		return vnodes !== void 0 && vnodes.length === 1 ? vnodes[0] : vnodes;
+	}
+});
+//#endregion
+export { createAutoLabel };

package/dist/utils/block.js

@@ -1,6 +1,16 @@
-import { isFragment, isVaporComponent } from "vue";
+import * as Vue from "vue";
 //#region src/utils/block.ts
 /**
+* The namespace import is load-bearing and must not be rewritten to a named one.
+*
+* `isFragment` and `isVaporComponent` come from the Vapor runtime, which only the esm-bundler
+* build re-exports. A bundler externalising `vue` for SSR resolves the node entry, and a named
+* import of a binding it does not have is a link-time `SyntaxError` — thrown before any guard
+* could run. A namespace read simply yields `undefined`, which is all this file needs: every
+* function below is reached from a Vapor render, and a server has none.
+*/
+var { isFragment, isVaporComponent } = Vue;
+/**
 * The DOM nodes a Vapor block resolves to, in document order.
 *
 * A slot function hands back a block rather than a node: a single node for one child, an

package/dist/utils/calendar-systems.d.ts

@@ -0,0 +1,14 @@
+import { createCalendar } from "@internationalized/date";
+/**
+ * The factory that can build any calendar system, for an app serving a locale that uses one.
+ *
+ * The calendars, fields and pickers default to Gregorian instead. A factory that answers for any
+ * identifier has to carry the arithmetic for every system behind it, none of which a Gregorian
+ * locale ever reads, and nothing about a static default can be dropped by a build. Passing this
+ * back opts into the lot:
+ *
+ * ```vue
+ * <DatePicker :create-calendar="createCalendar" />
+ * ```
+ */
+export { createCalendar };

package/dist/utils/calendar-systems.js

@@ -0,0 +1,2 @@
+import { createCalendar } from "@internationalized/date";
+export { createCalendar };

package/dist/utils/calendar.d.ts

@@ -1,8 +1,11 @@
-import type { CalendarDate, DateDuration, DateValue } from "@internationalized/date";
+import type { Calendar, DateDuration, DateValue } from "@internationalized/date";
+import { CalendarDate } from "@internationalized/date";
 /** The day a week can be told to start on, spelled the way `@internationalized/date` spells it. */
 export type DayOfWeek = "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat";
 /** How wide a weekday name is written. */
 export type WeekdayStyle = "narrow" | "short" | "long";
+/** How wide a weekday name is written when nothing asks for a width. */
+export declare const DEFAULT_WEEKDAY_STYLE: WeekdayStyle;
 /** Whether a date falls outside the allowed range. */
 export declare const isDateInvalid: (date: DateValue, minValue?: DateValue | null, maxValue?: DateValue | null) => boolean;
 /**
@@ -30,12 +33,18 @@ export declare const previousAvailableDate: (date: CalendarDate, minValue: DateV
 /** Whether two visible durations span the same thing. */
 export declare const isEqualDuration: (a: DateDuration, b: DateDuration) => boolean;
 /**
- * How far a calendar system's year numbering sits from the Gregorian one.
+ * Default bounds spanning 1900 to 2099, expressed in `calendar`'s own year numbering.
  *
- * Used to turn the default 1900–2099 Gregorian bounds into the same span of real time in whatever
- * calendar the locale resolves to, so the year picker offers years the user recognises.
+ * Both ends are built Gregorian and converted rather than assembled from a year number, because a
+ * `CalendarDate` counts its year from the start of an era: Japanese 1900 is the 1900th year of
+ * Reiwa, two millennia out. A fixed offset per system cannot stand in for the conversion either,
+ * since an era can turn over inside the span — 1900 is Meiji, 2026 is Reiwa — and a year is not
+ * the same length in every calendar.
  */
-export declare const getGregorianYearOffset: (identifier: string) => number;
+export declare const getDefaultYearBounds: (calendar: Calendar) => {
+    maxValue: CalendarDate;
+    minValue: CalendarDate;
+};
 /**
  * Every year start from `start` to `end` inclusive.
  *

package/dist/utils/calendar.js

@@ -1,5 +1,7 @@
-import { isSameDay, maxDate, minDate, startOfMonth, startOfWeek, startOfYear, toCalendarDate } from "@internationalized/date";
+import { CalendarDate, isSameDay, maxDate, minDate, startOfMonth, startOfWeek, startOfYear, toCalendar, toCalendarDate } from "@internationalized/date";
 //#region src/utils/calendar.ts
+/** How wide a weekday name is written when nothing asks for a width. */
+var DEFAULT_WEEKDAY_STYLE = "short";
 /** Whether a date falls outside the allowed range. */
 var isDateInvalid = (date, minValue, maxValue) => minValue != null && date.compare(minValue) < 0 || maxValue != null && date.compare(maxValue) > 0;
 /**
@@ -74,27 +76,22 @@ var previousAvailableDate = (date, minValue, isDateUnavailable) => {
 };
 /** Whether two visible durations span the same thing. */
 var isEqualDuration = (a, b) => a === b || a.days === b.days && a.weeks === b.weeks && a.months === b.months && a.years === b.years;
+/** The stretch of real time the default bounds cover, written as Gregorian years. */
+var DEFAULT_MIN_YEAR = 1900;
+var DEFAULT_MAX_YEAR = 2099;
 /**
-* How far a calendar system's year numbering sits from the Gregorian one.
+* Default bounds spanning 1900 to 2099, expressed in `calendar`'s own year numbering.
 *
-* Used to turn the default 1900–2099 Gregorian bounds into the same span of real time in whatever
-* calendar the locale resolves to, so the year picker offers years the user recognises.
+* Both ends are built Gregorian and converted rather than assembled from a year number, because a
+* `CalendarDate` counts its year from the start of an era: Japanese 1900 is the 1900th year of
+* Reiwa, two millennia out. A fixed offset per system cannot stand in for the conversion either,
+* since an era can turn over inside the span — 1900 is Meiji, 2026 is Reiwa — and a year is not
+* the same length in every calendar.
 */
-var getGregorianYearOffset = (identifier) => {
-	switch (identifier) {
-		case "buddhist": return 543;
-		case "ethiopic":
-		case "ethioaa": return -8;
-		case "coptic": return -284;
-		case "hebrew": return 3760;
-		case "indian": return -78;
-		case "islamic-civil":
-		case "islamic-tbla":
-		case "islamic-umalqura": return -579;
-		case "persian": return -600;
-		default: return 0;
-	}
-};
+var getDefaultYearBounds = (calendar) => ({
+	maxValue: toCalendar(new CalendarDate(DEFAULT_MAX_YEAR, 12, 31), calendar),
+	minValue: toCalendar(new CalendarDate(DEFAULT_MIN_YEAR, 1, 1), calendar)
+});
 /**
 * Every year start from `start` to `end` inclusive.
 *
@@ -112,7 +109,7 @@ var getYearRange = (start, end) => {
 	return years;
 };
 /** The weekday names above a day view, starting from the week `start` falls in. */
-var getDayViewWeekDayLabels = (start, locale, firstDayOfWeek, weekdayStyle = "short", timeZone = "UTC") => {
+var getDayViewWeekDayLabels = (start, locale, firstDayOfWeek, weekdayStyle = DEFAULT_WEEKDAY_STYLE, timeZone = "UTC") => {
 	const formatter = new Intl.DateTimeFormat(locale, {
 		timeZone,
 		weekday: weekdayStyle
@@ -162,4 +159,4 @@ var getDayViewGridRows = (start, end, locale, firstDayOfWeek) => {
 	return rows;
 };
 //#endregion
-export { alignCenter, alignEnd, alignStart, constrainStart, constrainValue, getDayViewGridRows, getDayViewWeekDayLabels, getGregorianYearOffset, getYearRange, isDateInvalid, isEqualDuration, previousAvailableDate };
+export { DEFAULT_WEEKDAY_STYLE, alignCenter, alignEnd, alignStart, constrainStart, constrainValue, getDayViewGridRows, getDayViewWeekDayLabels, getDefaultYearBounds, getYearRange, isDateInvalid, isEqualDuration, previousAvailableDate };

package/dist/utils/compose.d.ts

@@ -1,11 +1,9 @@
 /**
- * Resolve a `tv()` slot function into a class string, merging in a caller `class`.
+ * Resolve a `tv()` slot function into a class string, appending a caller `class`.
  *
- * Feeding the caller class through `tv()` is what lets it *override* conflicting
- * utilities, since `tailwind-variants` runs `tailwind-merge` over the result. Vue's
- * own attribute fallthrough would only concatenate, which does not override anything.
- *
- * `class` rather than `className`: `tv()` accepts either, and `class` is the Vue idiom.
+ * The slot function owns the slot's own classes, so a caller class goes through it rather
+ * than around it. Declaring `class` as a prop is what takes it out of Vue's attribute
+ * fallthrough in the first place, leaving each part to place it.
  *
  * @example
  * ```ts

package/dist/utils/compose.js

@@ -1,12 +1,10 @@
 //#region src/utils/compose.ts
 /**
-* Resolve a `tv()` slot function into a class string, merging in a caller `class`.
+* Resolve a `tv()` slot function into a class string, appending a caller `class`.
 *
-* Feeding the caller class through `tv()` is what lets it *override* conflicting
-* utilities, since `tailwind-variants` runs `tailwind-merge` over the result. Vue's
-* own attribute fallthrough would only concatenate, which does not override anything.
-*
-* `class` rather than `className`: `tv()` accepts either, and `class` is the Vue idiom.
+* The slot function owns the slot's own classes, so a caller class goes through it rather
+* than around it. Declaring `class` as a prop is what takes it out of Vue's attribute
+* fallthrough in the first place, leaving each part to place it.
 *
 * @example
 * ```ts

package/dist/utils/dnd-list-drop-target-delegate.d.ts

@@ -27,6 +27,8 @@ export declare class ListDropTargetDelegate implements DropTargetDelegate {
     private layout;
     private orientation;
     protected direction: "ltr" | "rtl";
+    /** The element found for each key, kept between calls and rechecked as each one is read. */
+    private elements;
     constructor(collection: DragCollection, element: ShallowRef<HTMLElement | null>, options?: ListDropTargetDelegateOptions);
     private getPrimaryStart;
     private getPrimaryEnd;
@@ -44,11 +46,27 @@ export declare class ListDropTargetDelegate implements DropTargetDelegate {
      */
     private resolveWithinItem;
     /**
-     * Map each item key to the element currently rendering it.
+     * Look up the element rendering a key, reusing what an earlier call found.
+     *
+     * The search above reads a handful of keys, but the map behind it is built from *every*
+     * element the container holds — for a table, every cell as well as every row. A drag asks for
+     * a target on each `dragover`, up to the display's refresh rate, so building that map per call
+     * costs more than the search it feeds.
+     *
+     * Keeping it means the DOM can move on without it, so every entry is rechecked as it is read,
+     * against the same conditions that put it there. A stale or missing one rebuilds the map —
+     * once per call, since a key the collection has and the DOM does not would otherwise rebuild
+     * it at every step of the search.
+     */
+    private createElementLookup;
+    /**
+     * Which elements carry a key.
      *
      * Scoped by `data-collection` when the container declares one, so a nested collection's rows
      * are not mistaken for this one's. Both attributes are already emitted by `ListBoxItem` and
      * `TableRow`.
      */
+    private getElementSelector;
+    /** Map each item key to the element currently rendering it. */
     private buildElementMap;
 }

package/dist/utils/dnd-list-drop-target-delegate.js

@@ -18,6 +18,8 @@ var ListDropTargetDelegate = class {
 	layout;
 	orientation;
 	direction;
+	/** The element found for each key, kept between calls and rechecked as each one is read. */
+	elements = /* @__PURE__ */ new Map();
 	constructor(collection, element, options = {}) {
 		this.collection = collection;
 		this.element = element;
@@ -57,14 +59,14 @@ var ListDropTargetDelegate = class {
 		const isPrimaryRTL = this.orientation === "horizontal" && this.direction === "rtl";
 		const isSecondaryRTL = this.layout === "grid" && this.orientation === "vertical" && this.direction === "rtl";
 		const isFlowRTL = this.layout === "stack" ? isPrimaryRTL : isSecondaryRTL;
-		const elementMap = this.buildElementMap(container);
+		const findElement = this.createElementLookup(container);
 		let low = 0;
 		let high = items.length;
 		while (low < high) {
 			const mid = Math.floor((low + high) / 2);
 			const key = items[mid];
 			if (key == null) break;
-			const element = elementMap.get(String(key));
+			const element = findElement(String(key));
 			if (!element) break;
 			const rect = element.getBoundingClientRect();
 			const update = (isGreater) => {
@@ -79,7 +81,7 @@ var ListDropTargetDelegate = class {
 		}
 		const key = items[Math.min(low, items.length - 1)];
 		if (key == null) return { type: "root" };
-		const rect = elementMap.get(String(key))?.getBoundingClientRect();
+		const rect = findElement(String(key))?.getBoundingClientRect();
 		return {
 			dropPosition: (rect != null && (primary < this.getPrimaryStart(rect) || Math.abs(flow - this.getFlowStart(rect)) < Math.abs(flow - this.getFlowEnd(rect)))) === isFlowRTL ? "after" : "before",
 			key,
@@ -136,15 +138,44 @@ var ListDropTargetDelegate = class {
 		return target;
 	}
 	/**
-	* Map each item key to the element currently rendering it.
+	* Look up the element rendering a key, reusing what an earlier call found.
+	*
+	* The search above reads a handful of keys, but the map behind it is built from *every*
+	* element the container holds — for a table, every cell as well as every row. A drag asks for
+	* a target on each `dragover`, up to the display's refresh rate, so building that map per call
+	* costs more than the search it feeds.
+	*
+	* Keeping it means the DOM can move on without it, so every entry is rechecked as it is read,
+	* against the same conditions that put it there. A stale or missing one rebuilds the map —
+	* once per call, since a key the collection has and the DOM does not would otherwise rebuild
+	* it at every step of the search.
+	*/
+	createElementLookup(container) {
+		const selector = this.getElementSelector(container);
+		let isRebuilt = false;
+		return (key) => {
+			const element = this.elements.get(key);
+			if (element?.dataset["key"] === key && element.matches(selector) && container.contains(element)) return element;
+			if (!isRebuilt) {
+				isRebuilt = true;
+				this.elements = this.buildElementMap(container, selector);
+			}
+			return this.elements.get(key);
+		};
+	}
+	/**
+	* Which elements carry a key.
 	*
 	* Scoped by `data-collection` when the container declares one, so a nested collection's rows
 	* are not mistaken for this one's. Both attributes are already emitted by `ListBoxItem` and
 	* `TableRow`.
 	*/
-	buildElementMap(container) {
+	getElementSelector(container) {
 		const collectionId = container.dataset["collection"];
-		const selector = collectionId ? `[data-collection="${CSS.escape(collectionId)}"]` : "[data-key]";
+		return collectionId ? `[data-collection="${CSS.escape(collectionId)}"]` : "[data-key]";
+	}
+	/** Map each item key to the element currently rendering it. */
+	buildElementMap(container, selector) {
 		const map = /* @__PURE__ */ new Map();
 		for (const element of container.querySelectorAll(selector)) if (element instanceof HTMLElement && element.dataset["key"] != null) map.set(element.dataset["key"], element);
 		return map;

package/dist/utils/index.d.ts

@@ -2,6 +2,7 @@ export * from "./aria-hide-outside.js";
 export * from "./assertion.js";
 export * from "./block.js";
 export * from "./calendar.js";
+export * from "./calendar-systems.js";
 export * from "./color.js";
 export * from "./color-types.js";
 export * from "./compose.js";

package/dist/utils/virtualizer-list-layout.d.ts

@@ -67,6 +67,14 @@ export declare class ListLayout<Options extends ListLayoutOptions = ListLayoutOp
     protected snapVisibleRect(rect: Rect): Rect;
     /** Every layout info inside `rect`, snapped to whole rows, parents before children. */
     getVisibleLayoutInfos(rect: Rect): LayoutInfo[];
+    /**
+     * The same, read off the rendered set as it stands rather than laying one out.
+     *
+     * Asking `getVisibleLayoutInfos` a question moves the window to whatever was asked about, so a
+     * caller with a rectangle narrower than the window — a drop resolving a point — would shrink
+     * the rendered set to the width of its own question and prune everything else away.
+     */
+    protected getRenderedLayoutInfos(rect: Rect): LayoutInfo[];
     update(context: InvalidationContext<Options>): void;
     shouldInvalidateLayoutOptions(newOptions: Options, oldOptions: Options): boolean;
     /**

package/dist/utils/virtualizer-list-layout.js

@@ -92,10 +92,20 @@ var ListLayout = class extends Layout {
 	getVisibleLayoutInfos(rect) {
 		const searchRect = this.snapVisibleRect(rect);
 		this.layoutFor(searchRect);
+		return this.getRenderedLayoutInfos(searchRect);
+	}
+	/**
+	* The same, read off the rendered set as it stands rather than laying one out.
+	*
+	* Asking `getVisibleLayoutInfos` a question moves the window to whatever was asked about, so a
+	* caller with a rectangle narrower than the window — a drop resolving a point — would shrink
+	* the rendered set to the width of its own question and prune everything else away.
+	*/
+	getRenderedLayoutInfos(rect) {
 		const result = [];
 		const addNodes = (nodes) => {
 			for (const node of nodes) {
-				if (!this.isVisible(node, searchRect)) continue;
+				if (!this.isVisible(node, rect)) continue;
 				result.push(node.layoutInfo);
 				addNodes(node.children);
 			}
@@ -393,7 +403,7 @@ var ListLayout = class extends Layout {
 		const searchRect = new Rect(pointX, Math.max(0, pointY - this.gap), 1, Math.max(1, this.gap * 2));
 		let key = null;
 		let minDistance = Infinity;
-		for (const candidate of this.getVisibleLayoutInfos(searchRect)) {
+		for (const candidate of this.getRenderedLayoutInfos(searchRect)) {
 			if (!this.isDropCandidate(candidate) || !candidate.rect.intersects(searchRect)) continue;
 			const distance = Math.min(Math.abs(candidate.rect.y - pointY), Math.abs(candidate.rect.maxY - pointY));
 			if (distance < minDistance) {

package/dist/utils/virtualizer-table-layout.d.ts

@@ -29,6 +29,7 @@ export declare class TableLayout<Options extends TableLayoutOptions = TableLayou
      * and nothing to clamp against.
      */
     getVisibleLayoutInfos(rect: Rect): LayoutInfo[];
+    protected getRenderedLayoutInfos(): LayoutInfo[];
     private addVisibleLayoutInfos;
     protected getEstimatedRowHeight(): number;
     protected buildCollection(): LayoutNode[];

package/dist/utils/virtualizer-table-layout.js

@@ -62,6 +62,9 @@ var TableLayout = class extends ListLayout {
 	*/
 	getVisibleLayoutInfos(rect) {
 		this.layoutFor(this.snapVisibleRect(rect));
+		return this.getRenderedLayoutInfos();
+	}
+	getRenderedLayoutInfos() {
 		const result = [];
 		for (const node of this.rootNodes) {
 			result.push(node.layoutInfo);

package/dist/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ropav",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "🚀 Beautiful and modern Vue UI library built with Vapor Mode and Tailwind CSS 4.0.",
   "keywords": [
     "components",
@@ -27,7 +27,9 @@
     "dist"
   ],
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -41,6 +43,11 @@
       "style": "./dist/styles.css",
       "default": "./dist/styles.css"
     },
+    "./styles/no-preflight": {
+      "style": "./dist/styles-no-preflight.css",
+      "default": "./dist/styles-no-preflight.css"
+    },
+    "./styles/bundled.css": "./dist/ropav.min.css",
     "./accordion": {
       "import": "./dist/components/accordion/index.js",
       "types": "./dist/components/accordion/index.d.ts"
@@ -409,11 +416,10 @@
     "@internationalized/date": "3.12.4",
     "@internationalized/number": "3.6.8",
     "@internationalized/string": "3.2.10",
-    "tailwind-variants": "3.3.1",
-    "@ropav/styles": "0.6.0"
+    "@ropav/styles": "0.8.0"
   },
   "peerDependencies": {
     "tailwindcss": ">=4.0.0",
-    "vue": "^3.6.0-rc.6"
+    "vue": "^3.6.0-rc.7"
   }
 }