ropav 0.1.5 → 0.1.6

package/dist/useFormControl.js

@@ -1,5 +1,5 @@
 import { inject, provide, watchEffect } from "vue";
-//#region src/composables/useFormControl.ts
+//#region src/internal/composables/useFormControl.ts
 var nestedFormControlOwnerKey = Symbol("nestedFormControlOwner");
 function provideNestedFormControlOwner() {
 	let claimed = false;
@@ -32,7 +32,8 @@ function useFormControl(options) {
 		if (documents.size === 0) return;
 		function onReset(event) {
 			const form = event.target;
-			if (!(form instanceof HTMLFormElement)) return;
+			const FormConstructor = event.currentTarget?.defaultView?.HTMLFormElement;
+			if (!FormConstructor || !(form instanceof FormConstructor)) return;
 			const elements = getElements(options).filter((element) => element.form === form);
 			if (elements.length === 0) return;
 			queueMicrotask(() => {

package/dist/useOverlayZIndex.js

@@ -1,5 +1,5 @@
 import { computed, inject, onBeforeUnmount, provide, readonly, ref, shallowRef, toValue, watch } from "vue";
-//#region src/composables/useOverlayLayer.ts
+//#region src/internal/composables/useOverlayLayer.ts
 var overlayLayerKey = Symbol("overlay-layer");
 var documentStates = /* @__PURE__ */ new WeakMap();
 var layerMetadata = /* @__PURE__ */ new WeakMap();

package/dist/useRequiredInject.js

@@ -1,5 +1,5 @@
 import { inject } from "vue";
-//#region src/composables/useRequiredInject.ts
+//#region src/internal/composables/useRequiredInject.ts
 function useRequiredInject(key, componentName) {
 	const value = inject(key);
 	if (value == null) throw new Error(`[Ropav] <${componentName}> must be used inside its parent provider component.`);

package/docs/public-composables-api.md

@@ -0,0 +1,52 @@
+# Public composables API
+
+Ropav exposes framework-level composables from both the root package and the dedicated
+`ropav/composables` entrypoint. Prefer the dedicated entrypoint when an application only needs
+headless state behavior.
+
+## `useControllableValue`
+
+`useControllableValue` implements the controlled/uncontrolled value pattern used across Ropav
+components and composables. A defined `modelValue` makes the value controlled; only `undefined`
+selects internal state, so values such as `null` and `false` remain controlled values.
+
+```vue
+<script setup lang="ts">
+import { useControllableValue } from 'ropav/composables';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string;
+    defaultValue?: string;
+  }>(),
+  {
+    modelValue: undefined,
+    defaultValue: '',
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+}>();
+
+const { value, isControlled, setValue, resetValue } = useControllableValue({
+  modelValue: () => props.modelValue,
+  defaultValue: () => props.defaultValue,
+  onChange: (value) => emit('update:modelValue', value),
+});
+</script>
+```
+
+`defaultValue()` is read once when the composable is created. `setValue()` updates internal state
+only in uncontrolled mode and always calls `onChange`, including repeated requests for the same
+value. In controlled mode, the parent remains responsible for updating `modelValue`, and a rejected
+change request does not replace the internal fallback.
+
+`resetValue(value)` updates uncontrolled state without calling `onChange`. Calling `resetValue()`
+without an argument restores the initial default. A reset is a no-op while controlled. If a value
+changes from controlled to uncontrolled, the latest defined controlled value becomes the internal
+fallback synchronously. Releasing control does not call `onChange`.
+
+The return value contains readonly `value` and `isControlled` computed refs, the captured
+`initialValue`, and the `setValue()` and `resetValue()` commands. `undefined` is reserved as the
+uncontrolled sentinel and should not be used as a controlled value.

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "ropav",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "license": "MIT",
   "type": "module",
-  "packageManager": "pnpm@11.14.0",
+  "packageManager": "pnpm@11.15.1",
   "engines": {
     "node": "^20.19.0 || ^22.13.0 || >=24.0.0"
   },
@@ -17,21 +17,30 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "**/*.scss"
   ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./alert": {
-      "types": "./dist/components/alert/index.d.ts",
-      "import": "./dist/components/alert/index.js"
+    "./composables": {
+      "types": "./dist/composables/index.d.ts",
+      "import": "./dist/composables/index.js"
     },
     "./accordion": {
       "types": "./dist/components/accordion/index.d.ts",
       "import": "./dist/components/accordion/index.js"
     },
+    "./alert": {
+      "types": "./dist/components/alert/index.d.ts",
+      "import": "./dist/components/alert/index.js"
+    },
     "./aspect-ratio": {
       "types": "./dist/components/aspect-ratio/index.d.ts",
       "import": "./dist/components/aspect-ratio/index.js"
@@ -48,14 +57,14 @@
       "types": "./dist/components/button/index.d.ts",
       "import": "./dist/components/button/index.js"
     },
-    "./button-link": {
-      "types": "./dist/components/button-link/index.d.ts",
-      "import": "./dist/components/button-link/index.js"
-    },
     "./button-group": {
       "types": "./dist/components/button-group/index.d.ts",
       "import": "./dist/components/button-group/index.js"
     },
+    "./button-link": {
+      "types": "./dist/components/button-link/index.d.ts",
+      "import": "./dist/components/button-link/index.js"
+    },
     "./card": {
       "types": "./dist/components/card/index.d.ts",
       "import": "./dist/components/card/index.js"
@@ -80,26 +89,26 @@
       "types": "./dist/components/color-swatch/index.d.ts",
       "import": "./dist/components/color-swatch/index.js"
     },
-    "./dropdown-menu": {
-      "types": "./dist/components/dropdown-menu/index.d.ts",
-      "import": "./dist/components/dropdown-menu/index.js"
-    },
     "./dialog": {
       "types": "./dist/components/dialog/index.d.ts",
       "import": "./dist/components/dialog/index.js"
     },
+    "./dropdown-menu": {
+      "types": "./dist/components/dropdown-menu/index.d.ts",
+      "import": "./dist/components/dropdown-menu/index.js"
+    },
     "./field": {
       "types": "./dist/components/field/index.d.ts",
       "import": "./dist/components/field/index.js"
     },
-    "./focus-trap": {
-      "types": "./dist/components/focus-trap/index.d.ts",
-      "import": "./dist/components/focus-trap/index.js"
-    },
     "./floating": {
       "types": "./dist/components/floating/index.d.ts",
       "import": "./dist/components/floating/index.js"
     },
+    "./focus-trap": {
+      "types": "./dist/components/focus-trap/index.d.ts",
+      "import": "./dist/components/focus-trap/index.js"
+    },
     "./icon-button": {
       "types": "./dist/components/icon-button/index.d.ts",
       "import": "./dist/components/icon-button/index.js"
@@ -183,34 +192,32 @@
   },
   "scripts": {
     "dev": "pnpm run storybook",
+    "public-api:sync": "node scripts/sync-public-api.mjs --write",
+    "public-api:check": "node scripts/sync-public-api.mjs --check",
     "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": "vitest run --project=unit --project=tooling",
     "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",
+    "test:watch": "vitest --project=unit --project=tooling",
+    "test:typecheck": "vitest run --project=unit --project=tooling --typecheck",
+    "test:storybook": "vitest run --project=storybook-light --project=storybook-dark",
+    "build": "pnpm run public-api:check && pnpm run tokens:build && pnpm run tokens:check && pnpm run typecheck && vite build",
+    "verify": "pnpm run lint && pnpm run format:check && pnpm run typecheck:storybook && pnpm run test && pnpm run test:storybook && pnpm run test:package",
+    "prepublishOnly": "pnpm run verify",
     "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\""
+    "release": "pnpm run verify && bumpp --git-check --all --commit \"chore(release): v%s\" --tag \"v%s\" --execute \"pnpm run changelog\""
   },
   "peerDependencies": {
     "@vue/compiler-vapor": "3.6.0-rc.1",
@@ -230,11 +237,11 @@
     "focus-trap": "^8.2.2"
   },
   "devDependencies": {
-    "@iconify-json/lucide": "^1.2.117",
-    "@storybook/addon-a11y": "^10.5.2",
-    "@storybook/addon-themes": "^10.5.2",
-    "@storybook/addon-vitest": "^10.5.2",
-    "@storybook/vue3-vite": "^10.5.2",
+    "@iconify-json/lucide": "^1.2.118",
+    "@storybook/addon-a11y": "^10.5.3",
+    "@storybook/addon-themes": "^10.5.3",
+    "@storybook/addon-vitest": "^10.5.3",
+    "@storybook/vue3-vite": "^10.5.3",
     "@types/node": "^26.1.1",
     "@vitejs/plugin-vue": "^6.0.8",
     "@vitest/browser-playwright": "^4.1.10",
@@ -245,11 +252,11 @@
     "conventional-changelog-conventionalcommits": "^10.2.1",
     "jsdom": "^29.1.1",
     "oxfmt": "^0.59.0",
-    "oxlint": "^1.74.0",
+    "oxlint": "^1.75.0",
     "playwright": "^1.61.1",
     "sass-embedded": "^1.100.0",
-    "storybook": "^10.5.2",
-    "storybook-addon-pseudo-states": "^10.5.2",
+    "storybook": "^10.5.3",
+    "storybook-addon-pseudo-states": "^10.5.3",
     "style-dictionary": "5.5.0",
     "typescript": "~6.0.3",
     "unplugin-icons": "^23.0.1",

package/src/styles/_mixins.scss

@@ -128,6 +128,10 @@ $rp-component-colors:
     flex-shrink: 0;
     transform-origin: center;
     animation: rp-spinner-spin 700ms linear infinite;
+
+    @media (prefers-reduced-motion: reduce) {
+        animation: none;
+    }
 }
 
 @mixin spinner-keyframes {

package/src/styles/_tokens.scss

@@ -474,7 +474,7 @@
     --rp-color-red-contrast            : var(--rp-color-white);
     --rp-color-red-light               : var(--rp-color-red-1);
     --rp-color-red-light-hover         : var(--rp-color-red-2);
-    --rp-color-red-light-color         : var(--rp-color-red-9);
+    --rp-color-red-light-color         : color-mix(in srgb, var(--rp-color-red-9) 89%, var(--rp-color-black));
     --rp-color-red-outline             : var(--rp-color-red-6);
     --rp-color-red-outline-hover       : color-mix(in srgb, var(--rp-color-red-6) 5%, transparent);
     --rp-color-pink-filled             : var(--rp-color-pink-7);
@@ -498,7 +498,7 @@
     --rp-color-violet-contrast         : var(--rp-color-white);
     --rp-color-violet-light            : var(--rp-color-violet-1);
     --rp-color-violet-light-hover      : var(--rp-color-violet-2);
-    --rp-color-violet-light-color      : var(--rp-color-violet-9);
+    --rp-color-violet-light-color      : color-mix(in srgb, var(--rp-color-violet-9) 96%, var(--rp-color-black));
     --rp-color-violet-outline          : var(--rp-color-violet-6);
     --rp-color-violet-outline-hover    : color-mix(in srgb, var(--rp-color-violet-6) 5%, transparent);
     --rp-color-indigo-filled           : var(--rp-color-indigo-7);
@@ -506,7 +506,7 @@
     --rp-color-indigo-contrast         : var(--rp-color-white);
     --rp-color-indigo-light            : var(--rp-color-indigo-1);
     --rp-color-indigo-light-hover      : var(--rp-color-indigo-2);
-    --rp-color-indigo-light-color      : var(--rp-color-indigo-9);
+    --rp-color-indigo-light-color      : color-mix(in srgb, var(--rp-color-indigo-9) 93%, var(--rp-color-black));
     --rp-color-indigo-outline          : var(--rp-color-indigo-6);
     --rp-color-indigo-outline-hover    : color-mix(in srgb, var(--rp-color-indigo-6) 5%, transparent);
     --rp-color-blue-filled             : var(--rp-color-blue-8);
@@ -514,7 +514,7 @@
     --rp-color-blue-contrast           : var(--rp-color-white);
     --rp-color-blue-light              : var(--rp-color-blue-1);
     --rp-color-blue-light-hover        : var(--rp-color-blue-2);
-    --rp-color-blue-light-color        : var(--rp-color-blue-9);
+    --rp-color-blue-light-color        : color-mix(in srgb, var(--rp-color-blue-9) 92%, var(--rp-color-black));
     --rp-color-blue-outline            : var(--rp-color-blue-6);
     --rp-color-blue-outline-hover      : color-mix(in srgb, var(--rp-color-blue-6) 5%, transparent);
     --rp-color-cyan-filled             : var(--rp-color-cyan-9);
@@ -522,7 +522,7 @@
     --rp-color-cyan-contrast           : var(--rp-color-white);
     --rp-color-cyan-light              : var(--rp-color-cyan-1);
     --rp-color-cyan-light-hover        : var(--rp-color-cyan-2);
-    --rp-color-cyan-light-color        : var(--rp-color-cyan-9);
+    --rp-color-cyan-light-color        : color-mix(in srgb, var(--rp-color-cyan-9) 93%, var(--rp-color-black));
     --rp-color-cyan-outline            : var(--rp-color-cyan-6);
     --rp-color-cyan-outline-hover      : color-mix(in srgb, var(--rp-color-cyan-6) 5%, transparent);
     --rp-color-teal-filled             : var(--rp-color-teal-9);
@@ -530,7 +530,7 @@
     --rp-color-teal-contrast           : var(--rp-color-white);
     --rp-color-teal-light              : var(--rp-color-teal-1);
     --rp-color-teal-light-hover        : var(--rp-color-teal-2);
-    --rp-color-teal-light-color        : var(--rp-color-teal-9);
+    --rp-color-teal-light-color        : color-mix(in srgb, var(--rp-color-teal-9) 89%, var(--rp-color-black));
     --rp-color-teal-outline            : var(--rp-color-teal-6);
     --rp-color-teal-outline-hover      : color-mix(in srgb, var(--rp-color-teal-6) 5%, transparent);
     --rp-color-green-filled            : color-mix(in srgb, var(--rp-color-green-9) 98%, var(--rp-color-black));
@@ -538,7 +538,7 @@
     --rp-color-green-contrast          : var(--rp-color-white);
     --rp-color-green-light             : var(--rp-color-green-1);
     --rp-color-green-light-hover       : var(--rp-color-green-2);
-    --rp-color-green-light-color       : var(--rp-color-green-9);
+    --rp-color-green-light-color       : color-mix(in srgb, var(--rp-color-green-9) 84%, var(--rp-color-black));
     --rp-color-green-outline           : var(--rp-color-green-6);
     --rp-color-green-outline-hover     : color-mix(in srgb, var(--rp-color-green-6) 5%, transparent);
     --rp-color-lime-filled             : var(--rp-color-lime-6);
@@ -546,7 +546,7 @@
     --rp-color-lime-contrast           : var(--rp-color-lime-6-contrast);
     --rp-color-lime-light              : var(--rp-color-lime-1);
     --rp-color-lime-light-hover        : var(--rp-color-lime-2);
-    --rp-color-lime-light-color        : var(--rp-color-lime-9);
+    --rp-color-lime-light-color        : color-mix(in srgb, var(--rp-color-lime-9) 79%, var(--rp-color-black));
     --rp-color-lime-outline            : var(--rp-color-lime-6);
     --rp-color-lime-outline-hover      : color-mix(in srgb, var(--rp-color-lime-6) 5%, transparent);
     --rp-color-yellow-filled           : var(--rp-color-yellow-6);
@@ -554,7 +554,7 @@
     --rp-color-yellow-contrast         : var(--rp-color-yellow-6-contrast);
     --rp-color-yellow-light            : var(--rp-color-yellow-1);
     --rp-color-yellow-light-hover      : var(--rp-color-yellow-2);
-    --rp-color-yellow-light-color      : var(--rp-color-yellow-9);
+    --rp-color-yellow-light-color      : color-mix(in srgb, var(--rp-color-yellow-9) 72%, var(--rp-color-black));
     --rp-color-yellow-outline          : var(--rp-color-yellow-6);
     --rp-color-yellow-outline-hover    : color-mix(in srgb, var(--rp-color-yellow-6) 5%, transparent);
     --rp-color-orange-filled           : color-mix(in srgb, var(--rp-color-orange-9) 97%, var(--rp-color-black));
@@ -562,14 +562,14 @@
     --rp-color-orange-contrast         : var(--rp-color-white);
     --rp-color-orange-light            : var(--rp-color-orange-1);
     --rp-color-orange-light-hover      : var(--rp-color-orange-2);
-    --rp-color-orange-light-color      : var(--rp-color-orange-9);
+    --rp-color-orange-light-color      : color-mix(in srgb, var(--rp-color-orange-9) 81%, var(--rp-color-black));
     --rp-color-orange-outline          : var(--rp-color-orange-6);
     --rp-color-orange-outline-hover    : color-mix(in srgb, var(--rp-color-orange-6) 5%, transparent);
     --rp-color-scheme                  : light;
     --rp-color-bright                  : var(--rp-color-black);
     --rp-color-text                    : var(--rp-color-black);
     --rp-color-body                    : var(--rp-color-white);
-    --rp-color-placeholder             : var(--rp-color-gray-5);
+    --rp-color-placeholder             : var(--rp-color-gray-7);
     --rp-color-default                 : var(--rp-color-white);
     --rp-color-default-hover           : var(--rp-color-gray-1);
     --rp-color-default-color           : var(--rp-color-black);
@@ -800,7 +800,7 @@ html.dark,
     --rp-color-bright              : var(--rp-color-white);
     --rp-color-text                : var(--rp-color-dark-0);
     --rp-color-body                : var(--rp-color-dark-7);
-    --rp-color-placeholder         : var(--rp-color-dark-3);
+    --rp-color-placeholder         : var(--rp-color-dark-1);
     --rp-color-default             : var(--rp-color-dark-6);
     --rp-color-default-hover       : var(--rp-color-dark-5);
     --rp-color-default-color       : var(--rp-color-white);

package/src/styles/_variables.scss

@@ -229,7 +229,7 @@ $z-index-dropdown: 100 !default;
 $z-index-tooltip : 1000 !default;
 
 // Opacity
-$opacity-disabled: 0.5 !default;
+$opacity-disabled: 0.65 !default;
 
 // Shadows
 $shadow-sm  : 0 1px 2px 0 rgba(0, 0, 0, 0.05) !default;

package/dist/button-link.css

@@ -1,167 +0,0 @@
-@layer ropav.components {
-.rp-button[data-v-dd8ef63e] {
-    --_rp-button-bg: var(--rp-color-default);
-    --_rp-button-bg-hover: var(--rp-color-default-hover);
-    --_rp-button-bg-active: var(--rp-color-disabled);
-    --_rp-button-border: var(--rp-color-default-border);
-    --_rp-button-border-hover: var(--_rp-button-border);
-    --_rp-button-border-active: var(--_rp-button-border-hover);
-    --_rp-button-fg: var(--rp-color-default-color);
-    --_rp-button-fg-hover: var(--_rp-button-fg);
-    --_rp-button-fg-active: var(--_rp-button-fg-hover);
-    --_rp-button-height: var(--rp-size-control-md);
-    --_rp-button-padding-x: 22px;
-    --_rp-button-font-size: var(--rp-font-size-md);
-    --_rp-button-radius: var(--rp-radius-sm);
-    --_rp-button-shadow: var(--rp-shadow-sm);
-    --_rp-button-shadow-hover: var(--rp-shadow-base);
-    --_rp-button-shadow-active: var(--rp-shadow-sm);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    box-sizing: border-box;
-    font-family: var(--rp-font-family);
-    font-weight: var(--rp-font-weight-medium);
-    line-height: 1;
-    appearance: none;
-    background-color: var(--_rp-button-bg);
-    border: var(--rp-border-width-thin) solid var(--_rp-button-border);
-    box-shadow: var(--_rp-button-shadow);
-    color: var(--_rp-button-fg);
-    cursor: pointer;
-    text-decoration: none;
-    transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast), transform var(--rp-transition-fast);
-    white-space: nowrap;
-    user-select: none;
-    height: var(--_rp-button-height);
-    padding: 0 var(--_rp-button-padding-x);
-    font-size: var(--_rp-button-font-size);
-    border-radius: var(--_rp-button-radius);
-}
-.rp-button[data-v-dd8ef63e]:hover:not(:disabled):not(.rp-button--disabled) {
-    background-color: var(--_rp-button-bg-hover);
-    border-color: var(--_rp-button-border-hover);
-    box-shadow: var(--_rp-button-shadow-hover);
-    color: var(--_rp-button-fg-hover);
-}
-.rp-button[data-v-dd8ef63e]:active:not(:disabled):not(.rp-button--disabled) {
-    background-color: var(--_rp-button-bg-active);
-    border-color: var(--_rp-button-border-active);
-    box-shadow: var(--_rp-button-shadow-active);
-    color: var(--_rp-button-fg-active);
-    transform: translateY(1px);
-}
-.rp-button--size-xs[data-v-dd8ef63e] {
-    --_rp-button-height: var(--rp-size-control-xs);
-    --_rp-button-padding-x: 14px;
-    --_rp-button-font-size: var(--rp-font-size-xs);
-}
-.rp-button--size-sm[data-v-dd8ef63e] {
-    --_rp-button-height: var(--rp-size-control-sm);
-    --_rp-button-padding-x: 18px;
-    --_rp-button-font-size: var(--rp-font-size-sm);
-}
-.rp-button--size-md[data-v-dd8ef63e] {
-    --_rp-button-height: var(--rp-size-control-md);
-    --_rp-button-padding-x: 22px;
-    --_rp-button-font-size: var(--rp-font-size-md);
-}
-.rp-button--size-lg[data-v-dd8ef63e] {
-    --_rp-button-height: var(--rp-size-control-lg);
-    --_rp-button-padding-x: 26px;
-    --_rp-button-font-size: var(--rp-font-size-lg);
-}
-.rp-button--size-xl[data-v-dd8ef63e] {
-    --_rp-button-height: var(--rp-size-control-xl);
-    --_rp-button-padding-x: 32px;
-    --_rp-button-font-size: var(--rp-font-size-xl);
-}
-.rp-button--radius-xs[data-v-dd8ef63e] {
-    --_rp-button-radius: var(--rp-radius-xs);
-}
-.rp-button--radius-sm[data-v-dd8ef63e] {
-    --_rp-button-radius: var(--rp-radius-sm);
-}
-.rp-button--radius-md[data-v-dd8ef63e] {
-    --_rp-button-radius: var(--rp-radius-md);
-}
-.rp-button--radius-lg[data-v-dd8ef63e] {
-    --_rp-button-radius: var(--rp-radius-lg);
-}
-.rp-button--radius-xl[data-v-dd8ef63e] {
-    --_rp-button-radius: var(--rp-radius-xl);
-}
-.rp-button--subtle[data-v-dd8ef63e] {
-    --_rp-button-shadow: none;
-    --_rp-button-shadow-hover: none;
-    --_rp-button-shadow-active: none;
-}
-.rp-button--surface[data-v-dd8ef63e] {
-    --_rp-button-shadow: none;
-    --_rp-button-shadow-hover: none;
-    --_rp-button-shadow-active: none;
-}
-.rp-button--outline[data-v-dd8ef63e] {
-    --_rp-button-shadow: none;
-    --_rp-button-shadow-hover: none;
-    --_rp-button-shadow-active: none;
-}
-.rp-button--ghost[data-v-dd8ef63e] {
-    --_rp-button-shadow: none;
-    --_rp-button-shadow-hover: none;
-    --_rp-button-shadow-active: none;
-}
-.rp-button--plain[data-v-dd8ef63e] {
-    --_rp-button-shadow: none;
-    --_rp-button-shadow-hover: none;
-    --_rp-button-shadow-active: none;
-}
-.rp-button[data-v-dd8ef63e]:disabled, .rp-button--disabled[data-v-dd8ef63e] {
-    opacity: var(--rp-opacity-disabled);
-    cursor: not-allowed;
-    box-shadow: none;
-    transform: none;
-}
-.rp-button[data-v-dd8ef63e]:focus-visible {
-    outline: none;
-    border-color: var(--rp-color-control-border-focus);
-    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
-}
-.rp-button--loading .rp-button__content[data-v-dd8ef63e] {
-    opacity: 0;
-}
-.rp-button__content[data-v-dd8ef63e] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--rp-spacing-2);
-}
-.rp-button__left[data-v-dd8ef63e], .rp-button__right[data-v-dd8ef63e] {
-    display: inline-flex;
-    align-items: center;
-    flex-shrink: 0;
-}
-.rp-button__loading[data-v-dd8ef63e] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    translate: -50% -50%;
-}
-.rp-button__spinner[data-v-dd8ef63e] {
-    display: block;
-    width: 1em;
-    height: 1em;
-    flex-shrink: 0;
-    transform-origin: center;
-    animation: rp-spinner-spin-dd8ef63e 700ms linear infinite;
-}
-@keyframes rp-spinner-spin-dd8ef63e {
-to {
-      transform: rotate(360deg);
-}
-}
-}