ropav 0.1.1 → 0.1.2

package/dist/switch.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-switch[data-v-d966892e] {
+.rp-switch[data-v-81b33803] {
     --_rp-switch-color: var(--rp-color-control-selected-bg);
     --_rp-switch-font-size: var(--rp-font-size-md);
     --_rp-switch-default-track-width: 46px;
@@ -26,15 +26,15 @@
     font-family: var(--rp-font-family);
     user-select: none;
 }
-.rp-switch--disabled[data-v-d966892e] {
+.rp-switch--disabled[data-v-81b33803] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-switch[data-v-d966892e] {
+.rp-switch[data-v-81b33803] {
     gap: var(--rp-spacing-2);
     font-size: var(--_rp-switch-font-size);
 }
-.rp-switch__native[data-v-d966892e] {
+.rp-switch__native[data-v-81b33803] {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -46,11 +46,11 @@
     border-width: 0;
     pointer-events: none;
 }
-.rp-switch__native:focus-visible + .rp-switch__track[data-v-d966892e] {
+.rp-switch__native:focus-visible + .rp-switch__track[data-v-81b33803] {
     border-color: var(--rp-color-control-border-focus);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-switch__track[data-v-d966892e] {
+.rp-switch__track[data-v-81b33803] {
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -61,17 +61,17 @@
     border-radius: var(--rp-radius-full);
     transition: background-color var(--rp-transition-fast);
 }
-.rp-switch--checked .rp-switch__track[data-v-d966892e] {
+.rp-switch--checked .rp-switch__track[data-v-81b33803] {
     background-color: var(--_rp-switch-color);
 }
-.rp-switch--invalid .rp-switch__track[data-v-d966892e] {
+.rp-switch--invalid .rp-switch__track[data-v-81b33803] {
     outline: var(--rp-border-width-thin) solid var(--_rp-switch-invalid-border);
     outline-offset: var(--_rp-switch-thumb-offset);
 }
-.rp-switch--invalid .rp-switch__native:focus-visible + .rp-switch__track[data-v-d966892e] {
+.rp-switch--invalid .rp-switch__native:focus-visible + .rp-switch__track[data-v-81b33803] {
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-switch-invalid-ring);
 }
-.rp-switch__thumb[data-v-d966892e] {
+.rp-switch__thumb[data-v-81b33803] {
     position: absolute;
     left: var(--_rp-switch-thumb-offset);
     width: var(--_rp-switch-thumb-size);
@@ -81,38 +81,38 @@
     box-shadow: var(--rp-shadow-sm);
     transition: transform var(--rp-transition-fast);
 }
-.rp-switch--checked .rp-switch__thumb[data-v-d966892e] {
+.rp-switch--checked .rp-switch__thumb[data-v-81b33803] {
     transform: translateX(calc(var(--_rp-switch-track-width) - var(--_rp-switch-thumb-size) - var(--_rp-switch-thumb-offset) * 2));
 }
-.rp-switch__label[data-v-d966892e] {
+.rp-switch__label[data-v-81b33803] {
     line-height: var(--rp-line-height-md);
     color: var(--rp-color-text);
 }
-.rp-switch--size-xs[data-v-d966892e] {
+.rp-switch--size-xs[data-v-81b33803] {
     --_rp-switch-default-track-width: 32px;
     --_rp-switch-default-track-height: 16px;
     --_rp-switch-default-thumb-size: 12px;
     --_rp-switch-font-size: var(--rp-font-size-xs);
 }
-.rp-switch--size-sm[data-v-d966892e] {
+.rp-switch--size-sm[data-v-81b33803] {
     --_rp-switch-default-track-width: 38px;
     --_rp-switch-default-track-height: 20px;
     --_rp-switch-default-thumb-size: 14px;
     --_rp-switch-font-size: var(--rp-font-size-sm);
 }
-.rp-switch--size-md[data-v-d966892e] {
+.rp-switch--size-md[data-v-81b33803] {
     --_rp-switch-default-track-width: 46px;
     --_rp-switch-default-track-height: 24px;
     --_rp-switch-default-thumb-size: 18px;
     --_rp-switch-font-size: var(--rp-font-size-md);
 }
-.rp-switch--size-lg[data-v-d966892e] {
+.rp-switch--size-lg[data-v-81b33803] {
     --_rp-switch-default-track-width: 56px;
     --_rp-switch-default-track-height: 30px;
     --_rp-switch-default-thumb-size: 22px;
     --_rp-switch-font-size: var(--rp-font-size-lg);
 }
-.rp-switch--size-xl[data-v-d966892e] {
+.rp-switch--size-xl[data-v-81b33803] {
     --_rp-switch-default-track-width: 72px;
     --_rp-switch-default-track-height: 36px;
     --_rp-switch-default-thumb-size: 28px;

package/dist/switch.js

@@ -5,7 +5,7 @@ import { n as getComponentColorValue } from "./componentColors.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { o as useControllableValue, r as useCheckedFormControl } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
-import { child, computed, createIf, createSlot, defineVaporComponent, next, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref } from "vue";
+import { child, computed, createIf, createSlot, defineVaporComponent, next, nextTick, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref } from "vue";
 //#region src/components/switch/useSwitch.ts
 function getSwitchColorStyle(color) {
 	const colorValue = getComponentColorValue(color);
@@ -23,7 +23,11 @@ function useSwitch(props, emitUpdate, getValue = () => props.modelValue ?? false
 	}));
 	const rootStyle = computed(() => getSwitchColorStyle(props.color));
 	function onChange(e) {
-		emitUpdate(e.target.checked);
+		const input = e.target;
+		emitUpdate(input.checked);
+		nextTick(() => {
+			input.checked = getValue();
+		});
 	}
 	function focus(options) {
 		inputRef.value?.focus(options);
@@ -39,8 +43,8 @@ function useSwitch(props, emitUpdate, getValue = () => props.modelValue ?? false
 }
 //#endregion
 //#region src/components/switch/switch.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-d966892e>");
-var t1 = template("<label data-v-d966892e><input data-v-d966892e><span data-v-d966892e><span data-v-d966892e></span></span>", 1);
+var t0 = template("<span data-v-81b33803>");
+var t1 = template("<label data-v-81b33803><input data-v-81b33803><span data-v-81b33803><span data-v-81b33803></span></span>", 1);
 //#endregion
 //#region src/components/switch/switch.vue
 var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -113,6 +117,7 @@ var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				}),
 				"data-disabled": presence(control.disabled),
 				"data-invalid": presence(control.invalid),
+				"data-state": controllable.value.value ? "checked" : "unchecked",
 				onChange(event) {
 					onChange(event);
 					attrs.onChange?.(event);
@@ -165,7 +170,7 @@ var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		});
 		return n7;
 	}
-}), [["__scopeId", "data-v-d966892e"]]);
+}), [["__scopeId", "data-v-81b33803"]]);
 //#endregion
 //#region src/components/switch/types.ts
 var switchParts = [

package/dist/tooltip.js

@@ -317,10 +317,7 @@ var tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			to: () => unref(teleportTo),
 			disabled: () => !__props.teleport
 		}, () => {
-			return createComponent(VaporTransition, {
-				name: "rp-tooltip-content",
-				persisted: ""
-			}, extend(() => {
+			return createComponent(VaporTransition, { name: "rp-tooltip-content" }, extend(() => {
 				return createIf(() => unref(shouldRenderContent), () => {
 					const n11 = t2();
 					renderEffect(() => setDynamicProps(n11, [

package/dist/unplugin-icons.d.ts

@@ -0,0 +1,5 @@
+export interface VaporIconCompiler {
+    compiler(svg: string, collection: string, icon: string): string;
+}
+/** An unplugin-icons compiler that emits zero-VDOM Vue Vapor components. */
+export declare function vaporIconCompiler(): VaporIconCompiler;

package/dist/unplugin-icons.js

@@ -0,0 +1,40 @@
+import { compile } from "@vue/compiler-vapor";
+//#region src/unplugin-icons.ts
+var randomIdHelper = "const __randId = () => Math.random().toString(36).substr(2, 10);";
+function handleSVGId(svg) {
+	if (!/="url\(#/.test(svg)) return {
+		svg,
+		injectScripts: ""
+	};
+	const idMap = {};
+	return {
+		svg: svg.replace(/\b([\w-]+)="url\(#(.+?)\)"/g, (_, attr, id) => {
+			idMap[id] = `'${id}':'uicons-'+__randId()`;
+			return `:${attr}="'url(#'+idMap['${id}']+')'"`;
+		}).replace(/\bid="(.+?)"/g, (full, id) => {
+			if (idMap[id]) return `:id="idMap['${id}']"`;
+			return full;
+		}),
+		injectScripts: `${randomIdHelper}const idMap = {${Object.values(idMap).join(",")}};`
+	};
+}
+/** An unplugin-icons compiler that emits zero-VDOM Vue Vapor components. */
+function vaporIconCompiler() {
+	return { compiler(svg, collection, icon) {
+		const name = `${collection}-${icon}`;
+		const { injectScripts, svg: handled } = handleSVGId(svg);
+		let { code } = compile(handled, {
+			filename: `${name}.vue`,
+			prefixIdentifiers: true
+		});
+		code = code.replace(/^export /gm, "");
+		const setup = injectScripts ? `,\n    setup() {${injectScripts};return { idMap }}` : "";
+		return `${code}
+import { defineVaporComponent, markRaw } from 'vue';
+
+export default markRaw(defineVaporComponent({ name: ${JSON.stringify(name)}, render${setup} }))
+/* vite-plugin-components disabled */`;
+	} };
+}
+//#endregion
+export { vaporIconCompiler };

package/docs/public-styles-api.md

@@ -26,7 +26,7 @@ Ropav does not expose a `vars` prop. Public CSS variables are set through CSS, t
 
 - Classes merge as internal classes, compatibility classes, `classNames`, then root `class` attributes.
 - Styles merge as internal styles, compatibility styles, `styles`, then root `style` attributes. Later stages win a duplicate property.
-- `inputAttrs` styling and `thumbStyle` are compatibility stages because these escape hatches also carry non-styling behavior.
+- `inputAttrs` styling is a compatibility stage because this escape hatch also carries non-styling behavior.
 - Attributes and native listeners are forwarded exactly once to the public root host. Internal native handlers run before consumer handlers.
 - Declared component events remain component events. Component-owned roles, ARIA and behavioral attributes remain authoritative.
 - Composite components do not copy root attributes into their child components. Teleported roots receive attributes on the rendered host, not on the virtual teleport node.
@@ -64,7 +64,8 @@ Only independently useful semantic elements are public parts. Conditional parts
 | Radio                                    | `root`, `input`, `indicator`, `label`                                                                                                       |
 | RadioGroup                               | `root`                                                                                                                                      |
 | Select                                   | `root`, `trigger`, `value`, `indicator`, `clear`, `content`, `option`, `empty`                                                              |
-| Slider, RangeSlider                      | `root`, `label`, `value`, `track`, `range`, `input`, `thumb`, `mark`, `markLabel`, `tooltip`                                                |
+| Slider                                   | `root`, `label`, `value`, `track`, `range`, `input`, `thumb`, `mark`, `markLabel`, `tooltip`                                                |
+| RangeSlider                              | `root`, `label`, `value`, `track`, `range`, `input`, `thumb`, `mark`, `markLabel`, `tooltip`                                                |
 | Switch                                   | `root`, `input`, `track`, `thumb`, `label`                                                                                                  |
 | Tabs, TabsList, TabsTrigger, TabsContent | `root` on each component                                                                                                                    |
 | Textarea                                 | `root`, `input`                                                                                                                             |
@@ -90,6 +91,8 @@ Boolean states use presence semantics: the attribute value is empty when true an
 - `data-selected`: Select options and ColorPicker swatches.
 - `data-highlighted`: Select options and DropdownMenu items.
 - `data-filled`: Slider and RangeSlider marks.
+- `data-track-hovered` and `data-dragging`: Slider track pointer interaction.
+- `data-thumb-visibility="always|interaction|hidden"`: Slider thumb visibility behavior.
 - `data-submenu`: DropdownMenu items that own children.
 - `data-orientation="horizontal|vertical"`: Accordion, ButtonGroup, RadioGroup, Slider, RangeSlider, Tabs and TabsList.
 - `data-placement`: the final placement after collision handling; twelve placements for Popover and DropdownMenu, and a side (`top`, `right`, `bottom`, `left`) for Tooltip.

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "ropav",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "MIT",
   "type": "module",
+  "packageManager": "pnpm@11.13.1",
   "engines": {
     "node": "^20.19.0 || ^22.13.0 || >=24.0.0"
   },
@@ -163,13 +164,58 @@
       "types": "./dist/components/tooltip/index.d.ts",
       "import": "./dist/components/tooltip/index.js"
     },
+    "./unplugin-icons": {
+      "types": "./dist/unplugin-icons.d.ts",
+      "import": "./dist/unplugin-icons.js"
+    },
     "./base.css": "./dist/base.css",
     "./styles-manifest": "./src/styles/styles-manifest.json",
     "./styles-manifest.json": "./src/styles/styles-manifest.json",
     "./scss/*.scss": "./src/styles/*.scss"
   },
+  "scripts": {
+    "dev": "pnpm run storybook",
+    "tokens:build": "style-dictionary build --config scripts/tokens.config.mjs --silent",
+    "tokens:check": "node scripts/check-tokens.mjs",
+    "styles:manifest:bootstrap": "node scripts/bootstrap-public-styles-manifest.mjs",
+    "typecheck": "vue-tsc -b tsconfig.app.json tsconfig.node.json tsconfig.test.json",
+    "typecheck:storybook": "vue-tsc -p tsconfig.storybook.json --noEmit",
+    "lint": "oxlint",
+    "lint:fix": "oxlint --fix",
+    "format": "oxfmt",
+    "format:check": "oxfmt --check",
+    "test": "vitest run --project=unit",
+    "test:consumer-types": "pnpm run test:package",
+    "test:consumer-types:built": "tsc -p tests/fixtures/consumer-types/tsconfig.bundler.json && tsc -p tests/fixtures/consumer-types/tsconfig.nodenext.json",
+    "test:exports": "pnpm run test:package",
+    "test:exports:built": "node scripts/check-exports.mjs",
+    "test:consumer-fixture:built": "node tests/fixtures/consumer-app/check.mjs && vue-tsc -p tests/fixtures/consumer-app/tsconfig.json --noEmit && vite build --config tests/fixtures/consumer-app/vite.config.ts && node tests/fixtures/consumer-app/assertions.mjs",
+    "test:package": "pnpm run build && pnpm run test:exports:built && pnpm run test:consumer-types:built && pnpm run test:consumer-fixture:built",
+    "test:watch": "vitest --project=unit",
+    "test:typecheck": "vitest run --project=unit --typecheck",
+    "test:storybook": "vitest run --project=storybook",
+    "test:all": "pnpm run tokens:check && pnpm test && pnpm test:storybook",
+    "build": "pnpm run tokens:build && pnpm run tokens:check && pnpm run typecheck && vite build",
+    "prepublishOnly": "pnpm run test:package",
+    "preview": "vite preview",
+    "storybook": "pnpm run tokens:build && storybook dev -p 6006 --no-open",
+    "build-storybook": "pnpm run tokens:build && pnpm run tokens:check && pnpm run typecheck:storybook && storybook build",
+    "changelog": "conventional-changelog -p conventionalcommits -i CHANGELOG.md -o CHANGELOG.md",
+    "changelog:all": "conventional-changelog -p conventionalcommits -i CHANGELOG.md -o CHANGELOG.md -r 0",
+    "release": "pnpm run test:package && bumpp --git-check --all --commit \"chore(release): v%s\" --tag \"v%s\" --execute \"pnpm run changelog\""
+  },
   "peerDependencies": {
-    "vue": "^3.6.0-beta.4"
+    "@vue/compiler-vapor": "3.6.0-rc.1",
+    "unplugin-icons": "^23.0.1",
+    "vue": "^3.6.0-rc.1"
+  },
+  "peerDependenciesMeta": {
+    "@vue/compiler-vapor": {
+      "optional": true
+    },
+    "unplugin-icons": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
@@ -183,7 +229,7 @@
     "@types/node": "^26.1.1",
     "@vitejs/plugin-vue": "^6.0.8",
     "@vitest/browser-playwright": "^4.1.10",
-    "@vue/compiler-vapor": "3.6.0-beta.17",
+    "@vue/compiler-vapor": "3.6.0-rc.1",
     "@vue/tsconfig": "^0.9.1",
     "bumpp": "^11.1.0",
     "conventional-changelog": "^8.1.0",
@@ -200,41 +246,11 @@
     "vite": "^8.1.5",
     "vite-plugin-dts": "^5.0.3",
     "vitest": "^4.1.10",
-    "vue": "3.6.0-beta.17",
+    "vue": "3.6.0-rc.1",
     "vue-tsc": "^3.3.7"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/daopk/ropav"
-  },
-  "scripts": {
-    "dev": "pnpm run storybook",
-    "tokens:build": "style-dictionary build --config scripts/tokens.config.mjs --silent",
-    "tokens:check": "node scripts/check-tokens.mjs",
-    "styles:manifest:bootstrap": "node scripts/bootstrap-public-styles-manifest.mjs",
-    "typecheck": "vue-tsc -b tsconfig.app.json tsconfig.node.json tsconfig.test.json",
-    "typecheck:storybook": "vue-tsc -p tsconfig.storybook.json --noEmit",
-    "lint": "oxlint",
-    "lint:fix": "oxlint --fix",
-    "format": "oxfmt",
-    "format:check": "oxfmt --check",
-    "test": "vitest run --project=unit",
-    "test:consumer-types": "pnpm run test:package",
-    "test:consumer-types:built": "tsc -p tests/fixtures/consumer-types/tsconfig.bundler.json && tsc -p tests/fixtures/consumer-types/tsconfig.nodenext.json",
-    "test:exports": "pnpm run test:package",
-    "test:exports:built": "node scripts/check-exports.mjs",
-    "test:consumer-fixture:built": "node tests/fixtures/consumer-app/check.mjs && vue-tsc -p tests/fixtures/consumer-app/tsconfig.json --noEmit && vite build --config tests/fixtures/consumer-app/vite.config.ts && node tests/fixtures/consumer-app/assertions.mjs",
-    "test:package": "pnpm run build && pnpm run test:exports:built && pnpm run test:consumer-types:built && pnpm run test:consumer-fixture:built",
-    "test:watch": "vitest --project=unit",
-    "test:typecheck": "vitest run --project=unit --typecheck",
-    "test:storybook": "vitest run --project=storybook",
-    "test:all": "pnpm run tokens:check && pnpm test && pnpm test:storybook",
-    "build": "pnpm run tokens:build && pnpm run tokens:check && pnpm run typecheck && vite build",
-    "preview": "vite preview",
-    "storybook": "pnpm run tokens:build && storybook dev -p 6006 --no-open",
-    "build-storybook": "pnpm run tokens:build && pnpm run tokens:check && pnpm run typecheck:storybook && storybook build",
-    "changelog": "conventional-changelog -p conventionalcommits -i CHANGELOG.md -o CHANGELOG.md",
-    "changelog:all": "conventional-changelog -p conventionalcommits -i CHANGELOG.md -o CHANGELOG.md -r 0",
-    "release": "pnpm run test:package && bumpp --git-check --all --commit \"chore(release): v%s\" --tag \"v%s\" --execute \"pnpm run changelog\""
   }
-}
+}