ropav 0.0.9 → 0.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (289) hide show
  1. package/README.md +6 -0
  2. package/dist/accordion.css +115 -111
  3. package/dist/accordion.js +60 -16
  4. package/dist/alert.css +110 -108
  5. package/dist/alert.js +48 -26
  6. package/dist/aspect-ratio.css +17 -15
  7. package/dist/aspect-ratio.js +20 -6
  8. package/dist/avatar.css +98 -96
  9. package/dist/avatar.js +27 -16
  10. package/dist/badge.css +95 -93
  11. package/dist/badge.js +29 -16
  12. package/dist/base.css +672 -671
  13. package/dist/button-group.css +39 -37
  14. package/dist/button-group.js +23 -12
  15. package/dist/button-link.css +160 -158
  16. package/dist/button-link.js +43 -24
  17. package/dist/button.css +160 -158
  18. package/dist/button.js +37 -19
  19. package/dist/card.css +109 -107
  20. package/dist/card.js +42 -17
  21. package/dist/checkbox.css +139 -137
  22. package/dist/checkbox.js +79 -28
  23. package/dist/collapse.css +29 -27
  24. package/dist/collapse.js +44 -10
  25. package/dist/color-input.css +137 -107
  26. package/dist/color-input.js +91 -17
  27. package/dist/color-picker.css +309 -303
  28. package/dist/color-picker.js +250 -77
  29. package/dist/color-picker2.js +9 -1
  30. package/dist/color-swatch.css +48 -46
  31. package/dist/color-swatch.js +15 -11
  32. package/dist/color-swatch2.js +4 -0
  33. package/dist/components/accordion/accordion-item.d.ts +16 -4
  34. package/dist/components/accordion/accordion.d.ts +1 -1
  35. package/dist/components/accordion/index.d.ts +5 -4
  36. package/dist/components/accordion/index.js +2 -2
  37. package/dist/components/accordion/types.d.ts +10 -5
  38. package/dist/components/accordion/useAccordion.d.ts +1 -1
  39. package/dist/components/alert/alert.d.ts +3 -3
  40. package/dist/components/alert/index.d.ts +3 -3
  41. package/dist/components/alert/index.js +2 -2
  42. package/dist/components/alert/types.d.ts +5 -2
  43. package/dist/components/alert/useAlertColor.d.ts +1 -1
  44. package/dist/components/aspect-ratio/aspect-ratio.d.ts +1 -1
  45. package/dist/components/aspect-ratio/index.d.ts +3 -2
  46. package/dist/components/aspect-ratio/index.js +2 -2
  47. package/dist/components/aspect-ratio/types.d.ts +4 -1
  48. package/dist/components/avatar/avatar.d.ts +1 -1
  49. package/dist/components/avatar/index.d.ts +3 -3
  50. package/dist/components/avatar/index.js +2 -2
  51. package/dist/components/avatar/types.d.ts +5 -2
  52. package/dist/components/avatar/useAvatarColor.d.ts +1 -1
  53. package/dist/components/badge/badge.d.ts +1 -1
  54. package/dist/components/badge/index.d.ts +3 -3
  55. package/dist/components/badge/index.js +2 -2
  56. package/dist/components/badge/types.d.ts +5 -2
  57. package/dist/components/badge/useBadgeColor.d.ts +1 -1
  58. package/dist/components/button/button.d.ts +1 -1
  59. package/dist/components/button/index.d.ts +3 -2
  60. package/dist/components/button/index.js +2 -2
  61. package/dist/components/button/types.d.ts +5 -2
  62. package/dist/components/button/useButtonColor.d.ts +1 -1
  63. package/dist/components/button-group/button-group.d.ts +1 -1
  64. package/dist/components/button-group/index.d.ts +3 -2
  65. package/dist/components/button-group/index.js +2 -2
  66. package/dist/components/button-group/types.d.ts +4 -1
  67. package/dist/components/button-link/button-link.d.ts +1 -1
  68. package/dist/components/button-link/index.d.ts +3 -2
  69. package/dist/components/button-link/index.js +2 -2
  70. package/dist/components/button-link/types.d.ts +5 -2
  71. package/dist/components/card/card.d.ts +1 -1
  72. package/dist/components/card/index.d.ts +3 -2
  73. package/dist/components/card/index.js +2 -2
  74. package/dist/components/card/types.d.ts +5 -1
  75. package/dist/components/checkbox/checkbox.d.ts +5 -2
  76. package/dist/components/checkbox/index.d.ts +3 -2
  77. package/dist/components/checkbox/index.js +2 -2
  78. package/dist/components/checkbox/types.d.ts +7 -2
  79. package/dist/components/checkbox/useCheckbox.d.ts +4 -2
  80. package/dist/components/collapse/collapse.d.ts +2 -2
  81. package/dist/components/collapse/index.d.ts +4 -3
  82. package/dist/components/collapse/index.js +2 -2
  83. package/dist/components/collapse/types.d.ts +9 -2
  84. package/dist/components/collapse/useCollapse.d.ts +1 -1
  85. package/dist/components/color-input/color-input.d.ts +1 -1
  86. package/dist/components/color-input/index.d.ts +3 -2
  87. package/dist/components/color-input/index.js +2 -2
  88. package/dist/components/color-input/types.d.ts +8 -4
  89. package/dist/components/color-input/useColorInput.d.ts +5 -5
  90. package/dist/components/color-input/useColorInputEyeDropper.d.ts +1 -1
  91. package/dist/components/color-input/useColorInputPopover.d.ts +2 -2
  92. package/dist/components/color-input/useColorInputValue.d.ts +1 -1
  93. package/dist/components/color-picker/color-picker-saturation.d.ts +1 -1
  94. package/dist/components/color-picker/color-picker-slider.d.ts +1 -1
  95. package/dist/components/color-picker/color-picker-utils.d.ts +1 -1
  96. package/dist/components/color-picker/color-picker.d.ts +1 -1
  97. package/dist/components/color-picker/index.d.ts +3 -3
  98. package/dist/components/color-picker/index.js +2 -2
  99. package/dist/components/color-picker/types.d.ts +13 -1
  100. package/dist/components/color-picker/useColorPickerDrag.d.ts +7 -2
  101. package/dist/components/color-picker/useColorPickerSwatches.d.ts +1 -1
  102. package/dist/components/color-picker/useColorPickerValue.d.ts +2 -2
  103. package/dist/components/color-swatch/color-swatch.d.ts +1 -1
  104. package/dist/components/color-swatch/index.d.ts +3 -2
  105. package/dist/components/color-swatch/index.js +2 -1
  106. package/dist/components/color-swatch/types.d.ts +4 -1
  107. package/dist/components/dropdown-menu/dropdown-menu-items.d.ts +15 -6
  108. package/dist/components/dropdown-menu/dropdown-menu-primitives.d.ts +724 -0
  109. package/dist/components/dropdown-menu/dropdown-menu-utils.d.ts +1 -1
  110. package/dist/components/dropdown-menu/dropdown-menu.d.ts +3 -3
  111. package/dist/components/dropdown-menu/index.d.ts +55 -3
  112. package/dist/components/dropdown-menu/index.js +2 -2
  113. package/dist/components/dropdown-menu/types.d.ts +142 -6
  114. package/dist/components/dropdown-menu/useDropdownMenu.d.ts +21 -12
  115. package/dist/components/dropdown-menu/useDropdownMenuDisclosure.d.ts +6 -4
  116. package/dist/components/dropdown-menu/useDropdownMenuDom.d.ts +4 -3
  117. package/dist/components/dropdown-menu/useDropdownMenuHoverIntent.d.ts +2 -2
  118. package/dist/components/dropdown-menu/useDropdownMenuInteractions.d.ts +5 -5
  119. package/dist/components/dropdown-menu/useDropdownMenuNavigation.d.ts +3 -3
  120. package/dist/components/dropdown-menu/useDropdownMenuPortalPosition.d.ts +19 -0
  121. package/dist/components/dropdown-menu/useDropdownMenuRenderItems.d.ts +25 -5
  122. package/dist/components/dropdown-menu/useDropdownSubmenus.d.ts +3 -3
  123. package/dist/components/field/field.d.ts +2 -2
  124. package/dist/components/field/index.d.ts +3 -2
  125. package/dist/components/field/index.js +2 -2
  126. package/dist/components/field/types.d.ts +4 -1
  127. package/dist/components/field/useField.d.ts +1 -1
  128. package/dist/components/floating/index.d.ts +1 -0
  129. package/dist/components/floating/index.js +0 -0
  130. package/dist/components/floating/types.d.ts +31 -0
  131. package/dist/components/floating/useFloatingPosition.d.ts +38 -0
  132. package/dist/components/focus-trap/focus-trap.d.ts +31 -0
  133. package/dist/components/focus-trap/index.d.ts +4 -0
  134. package/dist/components/focus-trap/index.js +3 -0
  135. package/dist/components/focus-trap/types.d.ts +41 -0
  136. package/dist/components/focus-trap/useFocusTrap.d.ts +2 -0
  137. package/dist/components/icon-button/icon-button.d.ts +1 -1
  138. package/dist/components/icon-button/index.d.ts +3 -2
  139. package/dist/components/icon-button/index.js +2 -1
  140. package/dist/components/icon-button/types.d.ts +5 -2
  141. package/dist/components/input/index.d.ts +3 -2
  142. package/dist/components/input/index.js +2 -1
  143. package/dist/components/input/input.d.ts +1 -1
  144. package/dist/components/input/types.d.ts +4 -1
  145. package/dist/components/input/useInput.d.ts +2 -2
  146. package/dist/components/modal/index.d.ts +3 -2
  147. package/dist/components/modal/index.js +2 -2
  148. package/dist/components/modal/modal.d.ts +1 -1
  149. package/dist/components/modal/types.d.ts +9 -2
  150. package/dist/components/modal/useModal.d.ts +1 -1
  151. package/dist/components/number-input/index.d.ts +3 -2
  152. package/dist/components/number-input/index.js +2 -2
  153. package/dist/components/number-input/number-input.d.ts +1 -1
  154. package/dist/components/number-input/types.d.ts +5 -2
  155. package/dist/components/number-input/useNumberInput.d.ts +2 -2
  156. package/dist/components/overlay/index.d.ts +3 -2
  157. package/dist/components/overlay/index.js +2 -1
  158. package/dist/components/overlay/overlay.d.ts +1 -1
  159. package/dist/components/overlay/types.d.ts +4 -1
  160. package/dist/components/overlay/useOverlay.d.ts +1 -1
  161. package/dist/components/popover/index.d.ts +3 -3
  162. package/dist/components/popover/index.js +2 -2
  163. package/dist/components/popover/popover.d.ts +2 -2
  164. package/dist/components/popover/types.d.ts +21 -11
  165. package/dist/components/popover/usePopover.d.ts +11 -2
  166. package/dist/components/progress/index.d.ts +3 -3
  167. package/dist/components/progress/index.js +2 -2
  168. package/dist/components/progress/progress.d.ts +1 -1
  169. package/dist/components/progress/types.d.ts +5 -2
  170. package/dist/components/progress/useProgress.d.ts +2 -2
  171. package/dist/components/radio/index.d.ts +4 -3
  172. package/dist/components/radio/index.js +2 -2
  173. package/dist/components/radio/radio-group.d.ts +1 -1
  174. package/dist/components/radio/radio.d.ts +9 -4
  175. package/dist/components/radio/types.d.ts +21 -4
  176. package/dist/components/radio/useRadio.d.ts +10 -5
  177. package/dist/components/select/index.d.ts +3 -2
  178. package/dist/components/select/index.js +2 -2
  179. package/dist/components/select/select.d.ts +1 -1
  180. package/dist/components/select/types.d.ts +4 -1
  181. package/dist/components/select/useSelect.d.ts +4 -3
  182. package/dist/components/slider/index.d.ts +4 -4
  183. package/dist/components/slider/index.js +2 -2
  184. package/dist/components/slider/range-slider-tooltip.d.ts +37 -0
  185. package/dist/components/slider/range-slider.d.ts +8 -13
  186. package/dist/components/slider/slider.d.ts +5 -2
  187. package/dist/components/slider/sliderCore.d.ts +35 -0
  188. package/dist/components/slider/types.d.ts +14 -7
  189. package/dist/components/slider/useRangeSlider.d.ts +5 -7
  190. package/dist/components/slider/useRangeSliderPointer.d.ts +19 -0
  191. package/dist/components/slider/useRangeSliderTooltipCollision.d.ts +31 -2
  192. package/dist/components/slider/useRangeSliderTooltipState.d.ts +23 -0
  193. package/dist/components/slider/useSlider.d.ts +11 -15
  194. package/dist/components/switch/index.d.ts +3 -2
  195. package/dist/components/switch/index.js +2 -2
  196. package/dist/components/switch/switch.d.ts +5 -2
  197. package/dist/components/switch/types.d.ts +7 -2
  198. package/dist/components/switch/useSwitch.d.ts +4 -2
  199. package/dist/components/tabs/index.d.ts +7 -6
  200. package/dist/components/tabs/index.js +2 -2
  201. package/dist/components/tabs/tabs-content.d.ts +2 -2
  202. package/dist/components/tabs/tabs-list.d.ts +4 -4
  203. package/dist/components/tabs/tabs-trigger.d.ts +5 -5
  204. package/dist/components/tabs/tabs.d.ts +5 -5
  205. package/dist/components/tabs/types.d.ts +13 -4
  206. package/dist/components/tabs/useTabs.d.ts +1 -1
  207. package/dist/components/teleport-provider/index.d.ts +2 -0
  208. package/dist/components/teleport-provider/index.js +2 -0
  209. package/dist/components/teleport-provider/teleport-provider.d.ts +21 -0
  210. package/dist/components/teleport-provider/types.d.ts +4 -0
  211. package/dist/components/teleport-provider/useTeleportTarget.d.ts +5 -0
  212. package/dist/components/textarea/index.d.ts +3 -2
  213. package/dist/components/textarea/index.js +2 -2
  214. package/dist/components/textarea/textarea.d.ts +5 -2
  215. package/dist/components/textarea/types.d.ts +6 -1
  216. package/dist/components/textarea/useTextarea.d.ts +3 -2
  217. package/dist/components/toast/defaults.d.ts +7 -0
  218. package/dist/components/toast/index.d.ts +7 -0
  219. package/dist/components/toast/index.js +2 -0
  220. package/dist/components/toast/toast-provider.d.ts +21 -0
  221. package/dist/components/toast/toast-viewport.d.ts +34 -0
  222. package/dist/components/toast/toast.d.ts +31 -0
  223. package/dist/components/toast/types.d.ts +110 -0
  224. package/dist/components/toast/useToast.d.ts +4 -0
  225. package/dist/components/toast/useToastColor.d.ts +3 -0
  226. package/dist/components/toast/useToastState.d.ts +2 -0
  227. package/dist/components/tooltip/index.d.ts +3 -2
  228. package/dist/components/tooltip/index.js +2 -1
  229. package/dist/components/tooltip/tooltip.d.ts +2 -2
  230. package/dist/components/tooltip/types.d.ts +14 -13
  231. package/dist/components/tooltip/useTooltip.d.ts +15 -3
  232. package/dist/dropdown-menu.css +191 -107
  233. package/dist/dropdown-menu.js +1729 -107
  234. package/dist/field.css +41 -39
  235. package/dist/field.js +40 -16
  236. package/dist/focus-trap.js +80 -0
  237. package/dist/icon-button.css +193 -189
  238. package/dist/icon-button.js +23 -18
  239. package/dist/icon-button2.js +8 -0
  240. package/dist/index.d.ts +35 -30
  241. package/dist/index.js +36 -31
  242. package/dist/input.css +122 -120
  243. package/dist/input.js +47 -34
  244. package/dist/input2.js +9 -0
  245. package/dist/legacy-unlayered.css +5461 -0
  246. package/dist/modal.css +129 -127
  247. package/dist/modal.js +160 -200
  248. package/dist/number-input.css +87 -85
  249. package/dist/number-input.js +61 -17
  250. package/dist/overlay.css +26 -24
  251. package/dist/overlay.js +17 -9
  252. package/dist/overlay2.js +4 -0
  253. package/dist/popover.css +140 -107
  254. package/dist/popover.js +295 -189
  255. package/dist/popover2.js +6 -1
  256. package/dist/progress.css +101 -99
  257. package/dist/progress.js +50 -28
  258. package/dist/radio.css +114 -105
  259. package/dist/radio.js +154 -56
  260. package/dist/select.css +244 -242
  261. package/dist/select.js +92 -47
  262. package/dist/slider.css +1109 -904
  263. package/dist/slider.js +1118 -923
  264. package/dist/styles-api.d.ts +22 -0
  265. package/dist/styles-api.js +49 -0
  266. package/dist/switch.css +120 -108
  267. package/dist/switch.js +89 -33
  268. package/dist/tabs.css +286 -278
  269. package/dist/tabs.js +60 -21
  270. package/dist/teleport-provider.js +15 -0
  271. package/dist/textarea.css +132 -130
  272. package/dist/textarea.js +77 -29
  273. package/dist/toast.css +236 -0
  274. package/dist/toast.js +739 -0
  275. package/dist/tooltip.css +137 -107
  276. package/dist/tooltip.js +182 -223
  277. package/dist/tooltip2.js +8 -0
  278. package/dist/useClickOutside.js +1 -1
  279. package/dist/useFloatingPosition.js +1284 -0
  280. package/dist/useFocusTrap.js +130 -0
  281. package/dist/useTeleportTarget.js +29 -0
  282. package/dist/utils/componentColors.d.ts +60 -0
  283. package/docs/public-styles-api.md +133 -0
  284. package/docs/public-tokens.md +545 -0
  285. package/package.json +44 -12
  286. package/src/styles/_tokens.scss +33 -28
  287. package/src/styles/_utilities.scss +11 -9
  288. package/src/styles/styles-manifest.json +4125 -0
  289. package/dist/components/slider/useRangeSliderTooltipTransition.d.ts +0 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ropav",
3
- "version": "0.0.9",
3
+ "version": "0.0.11",
4
4
  "type": "module",
5
5
  "packageManager": "pnpm@11.10.0",
6
6
  "engines": {
@@ -8,7 +8,9 @@
8
8
  },
9
9
  "files": [
10
10
  "dist",
11
- "src/styles"
11
+ "docs",
12
+ "src/styles/**/*.scss",
13
+ "src/styles/styles-manifest.json"
12
14
  ],
13
15
  "main": "./dist/index.js",
14
16
  "module": "./dist/index.js",
@@ -85,6 +87,14 @@
85
87
  "types": "./dist/components/field/index.d.ts",
86
88
  "import": "./dist/components/field/index.js"
87
89
  },
90
+ "./focus-trap": {
91
+ "types": "./dist/components/focus-trap/index.d.ts",
92
+ "import": "./dist/components/focus-trap/index.js"
93
+ },
94
+ "./floating": {
95
+ "types": "./dist/components/floating/index.d.ts",
96
+ "import": "./dist/components/floating/index.js"
97
+ },
88
98
  "./icon-button": {
89
99
  "types": "./dist/components/icon-button/index.d.ts",
90
100
  "import": "./dist/components/icon-button/index.js"
@@ -133,21 +143,33 @@
133
143
  "types": "./dist/components/tabs/index.d.ts",
134
144
  "import": "./dist/components/tabs/index.js"
135
145
  },
146
+ "./teleport-provider": {
147
+ "types": "./dist/components/teleport-provider/index.d.ts",
148
+ "import": "./dist/components/teleport-provider/index.js"
149
+ },
136
150
  "./textarea": {
137
151
  "types": "./dist/components/textarea/index.d.ts",
138
152
  "import": "./dist/components/textarea/index.js"
139
153
  },
154
+ "./toast": {
155
+ "types": "./dist/components/toast/index.d.ts",
156
+ "import": "./dist/components/toast/index.js"
157
+ },
140
158
  "./tooltip": {
141
159
  "types": "./dist/components/tooltip/index.d.ts",
142
160
  "import": "./dist/components/tooltip/index.js"
143
161
  },
144
162
  "./base.css": "./dist/base.css",
145
- "./scss/*": "./src/styles/*"
163
+ "./legacy-unlayered.css": "./dist/legacy-unlayered.css",
164
+ "./styles-manifest": "./src/styles/styles-manifest.json",
165
+ "./styles-manifest.json": "./src/styles/styles-manifest.json",
166
+ "./scss/*.scss": "./src/styles/*.scss"
146
167
  },
147
168
  "scripts": {
148
169
  "dev": "pnpm run storybook",
149
170
  "tokens:build": "style-dictionary build --config scripts/tokens.config.mjs --silent",
150
171
  "tokens:check": "node scripts/check-tokens.mjs",
172
+ "styles:manifest:bootstrap": "node scripts/bootstrap-public-styles-manifest.mjs",
151
173
  "typecheck": "vue-tsc -b tsconfig.app.json tsconfig.node.json tsconfig.test.json",
152
174
  "typecheck:storybook": "vue-tsc -p tsconfig.storybook.json --noEmit",
153
175
  "lint": "oxlint",
@@ -155,46 +177,56 @@
155
177
  "format": "oxfmt",
156
178
  "format:check": "oxfmt --check",
157
179
  "test": "vitest run --project=unit",
158
- "test:exports": "node scripts/check-exports.mjs",
180
+ "test:consumer-types": "pnpm run test:package",
181
+ "test:consumer-types:built": "tsc -p tests/fixtures/consumer-types/tsconfig.bundler.json && tsc -p tests/fixtures/consumer-types/tsconfig.nodenext.json",
182
+ "test:exports": "pnpm run test:package",
183
+ "test:exports:built": "node scripts/check-exports.mjs",
184
+ "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",
185
+ "test:package": "pnpm run build && pnpm run test:exports:built && pnpm run test:consumer-types:built && pnpm run test:consumer-fixture:built",
159
186
  "test:watch": "vitest --project=unit",
160
187
  "test:typecheck": "vitest run --project=unit --typecheck",
161
188
  "test:storybook": "vitest run --project=storybook",
162
189
  "test:all": "pnpm run tokens:check && pnpm test && pnpm test:storybook",
163
190
  "build": "pnpm run tokens:build && pnpm run tokens:check && pnpm run typecheck && vite build",
164
- "prepublishOnly": "pnpm run build && pnpm run tokens:check",
191
+ "prepublishOnly": "pnpm run test:package",
165
192
  "preview": "vite preview",
166
193
  "storybook": "pnpm run tokens:build && storybook dev -p 6006 --no-open",
167
194
  "build-storybook": "pnpm run tokens:build && pnpm run tokens:check && pnpm run typecheck:storybook && storybook build",
168
195
  "changelog": "conventional-changelog -p conventionalcommits -i CHANGELOG.md -o CHANGELOG.md",
169
196
  "changelog:all": "conventional-changelog -p conventionalcommits -i CHANGELOG.md -o CHANGELOG.md -r 0",
170
- "release": "bumpp --git-check --all --commit \"chore(release): v%s\" --tag \"v%s\" --execute \"pnpm run changelog\""
197
+ "release": "pnpm run test:package && bumpp --git-check --all --commit \"chore(release): v%s\" --tag \"v%s\" --execute \"pnpm run changelog\""
171
198
  },
172
199
  "peerDependencies": {
173
200
  "vue": "^3.6.0-beta.4"
174
201
  },
202
+ "dependencies": {
203
+ "@floating-ui/dom": "^1.8.0",
204
+ "focus-trap": "^8.2.2"
205
+ },
175
206
  "devDependencies": {
176
207
  "@iconify-json/lucide": "^1.2.116",
177
- "@storybook/addon-themes": "^10.4.6",
178
- "@storybook/addon-vitest": "^10.4.6",
179
- "@storybook/vue3-vite": "^10.4.6",
208
+ "@storybook/addon-themes": "^10.5.0",
209
+ "@storybook/addon-vitest": "^10.5.0",
210
+ "@storybook/vue3-vite": "^10.5.0",
180
211
  "@types/node": "^26.1.1",
181
212
  "@vitejs/plugin-vue": "^6.0.7",
182
213
  "@vitest/browser-playwright": "^4.1.10",
183
214
  "@vue/compiler-vapor": "3.6.0-beta.17",
184
215
  "@vue/tsconfig": "^0.9.1",
185
216
  "bumpp": "^11.1.0",
186
- "conventional-changelog": "^8.0.1",
217
+ "conventional-changelog": "^8.1.0",
187
218
  "conventional-changelog-conventionalcommits": "^10.2.1",
188
219
  "jsdom": "^29.1.1",
189
220
  "oxfmt": "^0.58.0",
190
221
  "oxlint": "^1.73.0",
191
222
  "playwright": "^1.61.1",
223
+ "postcss": "^8.5.16",
192
224
  "sass-embedded": "^1.100.0",
193
- "storybook": "^10.4.6",
225
+ "storybook": "^10.5.0",
194
226
  "style-dictionary": "5.5.0",
195
227
  "typescript": "~6.0.3",
196
228
  "unplugin-icons": "^23.0.1",
197
- "vite": "^8.1.3",
229
+ "vite": "^8.1.4",
198
230
  "vite-plugin-dts": "^5.0.3",
199
231
  "vitest": "^4.1.10",
200
232
  "vue": "3.6.0-beta.17",
package/src/styles/_tokens.scss CHANGED
@@ -3,6 +3,9 @@
3
3
 
4
4
  @use 'variables' as *;
5
5
 
6
+ @layer ropav.tokens, ropav.components;
7
+
8
+ @layer ropav.tokens {
6
9
  :root {
7
10
  // Font family
8
11
  --rp-font-family: #{$font-family-base};
@@ -312,7 +315,7 @@
312
315
  --rp-color-orange-9-contrast : var(--rp-color-black);
313
316
  --rp-color-dark-filled : var(--rp-color-dark-6);
314
317
  --rp-color-dark-filled-hover : var(--rp-color-dark-7);
315
- --rp-color-dark-contrast : var(--rp-color-white);
318
+ --rp-color-dark-contrast : var(--rp-color-dark-6-contrast);
316
319
  --rp-color-dark-light : var(--rp-color-dark-1);
317
320
  --rp-color-dark-light-hover : var(--rp-color-dark-2);
318
321
  --rp-color-dark-light-color : var(--rp-color-dark-9);
@@ -320,7 +323,7 @@
320
323
  --rp-color-dark-outline-hover : color-mix(in srgb, var(--rp-color-dark-6) 5%, transparent);
321
324
  --rp-color-gray-filled : var(--rp-color-gray-6);
322
325
  --rp-color-gray-filled-hover : var(--rp-color-gray-7);
323
- --rp-color-gray-contrast : var(--rp-color-black);
326
+ --rp-color-gray-contrast : var(--rp-color-gray-6-contrast);
324
327
  --rp-color-gray-light : var(--rp-color-gray-1);
325
328
  --rp-color-gray-light-hover : var(--rp-color-gray-2);
326
329
  --rp-color-gray-light-color : var(--rp-color-gray-9);
@@ -328,7 +331,7 @@
328
331
  --rp-color-gray-outline-hover : color-mix(in srgb, var(--rp-color-gray-6) 5%, transparent);
329
332
  --rp-color-red-filled : var(--rp-color-red-6);
330
333
  --rp-color-red-filled-hover : var(--rp-color-red-7);
331
- --rp-color-red-contrast : var(--rp-color-black);
334
+ --rp-color-red-contrast : var(--rp-color-red-6-contrast);
332
335
  --rp-color-red-light : var(--rp-color-red-1);
333
336
  --rp-color-red-light-hover : var(--rp-color-red-2);
334
337
  --rp-color-red-light-color : var(--rp-color-red-9);
@@ -336,7 +339,7 @@
336
339
  --rp-color-red-outline-hover : color-mix(in srgb, var(--rp-color-red-6) 5%, transparent);
337
340
  --rp-color-pink-filled : var(--rp-color-pink-6);
338
341
  --rp-color-pink-filled-hover : var(--rp-color-pink-7);
339
- --rp-color-pink-contrast : var(--rp-color-black);
342
+ --rp-color-pink-contrast : var(--rp-color-pink-6-contrast);
340
343
  --rp-color-pink-light : var(--rp-color-pink-1);
341
344
  --rp-color-pink-light-hover : var(--rp-color-pink-2);
342
345
  --rp-color-pink-light-color : var(--rp-color-pink-9);
@@ -344,7 +347,7 @@
344
347
  --rp-color-pink-outline-hover : color-mix(in srgb, var(--rp-color-pink-6) 5%, transparent);
345
348
  --rp-color-grape-filled : var(--rp-color-grape-6);
346
349
  --rp-color-grape-filled-hover : var(--rp-color-grape-7);
347
- --rp-color-grape-contrast : var(--rp-color-black);
350
+ --rp-color-grape-contrast : var(--rp-color-grape-6-contrast);
348
351
  --rp-color-grape-light : var(--rp-color-grape-1);
349
352
  --rp-color-grape-light-hover : var(--rp-color-grape-2);
350
353
  --rp-color-grape-light-color : var(--rp-color-grape-9);
@@ -352,7 +355,7 @@
352
355
  --rp-color-grape-outline-hover : color-mix(in srgb, var(--rp-color-grape-6) 5%, transparent);
353
356
  --rp-color-violet-filled : var(--rp-color-violet-6);
354
357
  --rp-color-violet-filled-hover : var(--rp-color-violet-7);
355
- --rp-color-violet-contrast : var(--rp-color-white);
358
+ --rp-color-violet-contrast : var(--rp-color-violet-6-contrast);
356
359
  --rp-color-violet-light : var(--rp-color-violet-1);
357
360
  --rp-color-violet-light-hover : var(--rp-color-violet-2);
358
361
  --rp-color-violet-light-color : var(--rp-color-violet-9);
@@ -360,7 +363,7 @@
360
363
  --rp-color-violet-outline-hover : color-mix(in srgb, var(--rp-color-violet-6) 5%, transparent);
361
364
  --rp-color-indigo-filled : var(--rp-color-indigo-6);
362
365
  --rp-color-indigo-filled-hover : var(--rp-color-indigo-7);
363
- --rp-color-indigo-contrast : var(--rp-color-black);
366
+ --rp-color-indigo-contrast : var(--rp-color-indigo-6-contrast);
364
367
  --rp-color-indigo-light : var(--rp-color-indigo-1);
365
368
  --rp-color-indigo-light-hover : var(--rp-color-indigo-2);
366
369
  --rp-color-indigo-light-color : var(--rp-color-indigo-9);
@@ -368,7 +371,7 @@
368
371
  --rp-color-indigo-outline-hover : color-mix(in srgb, var(--rp-color-indigo-6) 5%, transparent);
369
372
  --rp-color-blue-filled : var(--rp-color-blue-6);
370
373
  --rp-color-blue-filled-hover : var(--rp-color-blue-7);
371
- --rp-color-blue-contrast : var(--rp-color-black);
374
+ --rp-color-blue-contrast : var(--rp-color-blue-6-contrast);
372
375
  --rp-color-blue-light : var(--rp-color-blue-1);
373
376
  --rp-color-blue-light-hover : var(--rp-color-blue-2);
374
377
  --rp-color-blue-light-color : var(--rp-color-blue-9);
@@ -376,7 +379,7 @@
376
379
  --rp-color-blue-outline-hover : color-mix(in srgb, var(--rp-color-blue-6) 5%, transparent);
377
380
  --rp-color-cyan-filled : var(--rp-color-cyan-6);
378
381
  --rp-color-cyan-filled-hover : var(--rp-color-cyan-7);
379
- --rp-color-cyan-contrast : var(--rp-color-black);
382
+ --rp-color-cyan-contrast : var(--rp-color-cyan-6-contrast);
380
383
  --rp-color-cyan-light : var(--rp-color-cyan-1);
381
384
  --rp-color-cyan-light-hover : var(--rp-color-cyan-2);
382
385
  --rp-color-cyan-light-color : var(--rp-color-cyan-9);
@@ -384,7 +387,7 @@
384
387
  --rp-color-cyan-outline-hover : color-mix(in srgb, var(--rp-color-cyan-6) 5%, transparent);
385
388
  --rp-color-teal-filled : var(--rp-color-teal-6);
386
389
  --rp-color-teal-filled-hover : var(--rp-color-teal-7);
387
- --rp-color-teal-contrast : var(--rp-color-black);
390
+ --rp-color-teal-contrast : var(--rp-color-teal-6-contrast);
388
391
  --rp-color-teal-light : var(--rp-color-teal-1);
389
392
  --rp-color-teal-light-hover : var(--rp-color-teal-2);
390
393
  --rp-color-teal-light-color : var(--rp-color-teal-9);
@@ -392,7 +395,7 @@
392
395
  --rp-color-teal-outline-hover : color-mix(in srgb, var(--rp-color-teal-6) 5%, transparent);
393
396
  --rp-color-green-filled : var(--rp-color-green-6);
394
397
  --rp-color-green-filled-hover : var(--rp-color-green-7);
395
- --rp-color-green-contrast : var(--rp-color-black);
398
+ --rp-color-green-contrast : var(--rp-color-green-6-contrast);
396
399
  --rp-color-green-light : var(--rp-color-green-1);
397
400
  --rp-color-green-light-hover : var(--rp-color-green-2);
398
401
  --rp-color-green-light-color : var(--rp-color-green-9);
@@ -400,7 +403,7 @@
400
403
  --rp-color-green-outline-hover : color-mix(in srgb, var(--rp-color-green-6) 5%, transparent);
401
404
  --rp-color-lime-filled : var(--rp-color-lime-6);
402
405
  --rp-color-lime-filled-hover : var(--rp-color-lime-7);
403
- --rp-color-lime-contrast : var(--rp-color-black);
406
+ --rp-color-lime-contrast : var(--rp-color-lime-6-contrast);
404
407
  --rp-color-lime-light : var(--rp-color-lime-1);
405
408
  --rp-color-lime-light-hover : var(--rp-color-lime-2);
406
409
  --rp-color-lime-light-color : var(--rp-color-lime-9);
@@ -408,7 +411,7 @@
408
411
  --rp-color-lime-outline-hover : color-mix(in srgb, var(--rp-color-lime-6) 5%, transparent);
409
412
  --rp-color-yellow-filled : var(--rp-color-yellow-6);
410
413
  --rp-color-yellow-filled-hover : var(--rp-color-yellow-7);
411
- --rp-color-yellow-contrast : var(--rp-color-black);
414
+ --rp-color-yellow-contrast : var(--rp-color-yellow-6-contrast);
412
415
  --rp-color-yellow-light : var(--rp-color-yellow-1);
413
416
  --rp-color-yellow-light-hover : var(--rp-color-yellow-2);
414
417
  --rp-color-yellow-light-color : var(--rp-color-yellow-9);
@@ -416,7 +419,7 @@
416
419
  --rp-color-yellow-outline-hover : color-mix(in srgb, var(--rp-color-yellow-6) 5%, transparent);
417
420
  --rp-color-orange-filled : var(--rp-color-orange-6);
418
421
  --rp-color-orange-filled-hover : var(--rp-color-orange-7);
419
- --rp-color-orange-contrast : var(--rp-color-black);
422
+ --rp-color-orange-contrast : var(--rp-color-orange-6-contrast);
420
423
  --rp-color-orange-light : var(--rp-color-orange-1);
421
424
  --rp-color-orange-light-hover : var(--rp-color-orange-2);
422
425
  --rp-color-orange-light-color : var(--rp-color-orange-9);
@@ -543,7 +546,7 @@ html.dark,
543
546
  // Derived colors
544
547
  --rp-color-dark-filled : var(--rp-color-dark-8);
545
548
  --rp-color-dark-filled-hover : var(--rp-color-dark-9);
546
- --rp-color-dark-contrast : var(--rp-color-white);
549
+ --rp-color-dark-contrast : var(--rp-color-dark-8-contrast);
547
550
  --rp-color-dark-light : color-mix(in srgb, var(--rp-color-dark-9) 50%, var(--rp-color-black));
548
551
  --rp-color-dark-light-hover : color-mix(in srgb, var(--rp-color-dark-9) 70%, var(--rp-color-black));
549
552
  --rp-color-dark-light-color : var(--rp-color-dark-0);
@@ -551,7 +554,7 @@ html.dark,
551
554
  --rp-color-dark-outline-hover : color-mix(in srgb, var(--rp-color-dark-4) 5%, transparent);
552
555
  --rp-color-gray-filled : var(--rp-color-gray-8);
553
556
  --rp-color-gray-filled-hover : var(--rp-color-gray-9);
554
- --rp-color-gray-contrast : var(--rp-color-white);
557
+ --rp-color-gray-contrast : var(--rp-color-gray-8-contrast);
555
558
  --rp-color-gray-light : color-mix(in srgb, var(--rp-color-gray-9) 50%, var(--rp-color-black));
556
559
  --rp-color-gray-light-hover : color-mix(in srgb, var(--rp-color-gray-9) 70%, var(--rp-color-black));
557
560
  --rp-color-gray-light-color : var(--rp-color-gray-0);
@@ -559,7 +562,7 @@ html.dark,
559
562
  --rp-color-gray-outline-hover : color-mix(in srgb, var(--rp-color-gray-4) 5%, transparent);
560
563
  --rp-color-red-filled : var(--rp-color-red-8);
561
564
  --rp-color-red-filled-hover : var(--rp-color-red-9);
562
- --rp-color-red-contrast : var(--rp-color-black);
565
+ --rp-color-red-contrast : var(--rp-color-red-8-contrast);
563
566
  --rp-color-red-light : color-mix(in srgb, var(--rp-color-red-9) 50%, var(--rp-color-black));
564
567
  --rp-color-red-light-hover : color-mix(in srgb, var(--rp-color-red-9) 70%, var(--rp-color-black));
565
568
  --rp-color-red-light-color : var(--rp-color-red-0);
@@ -567,7 +570,7 @@ html.dark,
567
570
  --rp-color-red-outline-hover : color-mix(in srgb, var(--rp-color-red-4) 5%, transparent);
568
571
  --rp-color-pink-filled : var(--rp-color-pink-8);
569
572
  --rp-color-pink-filled-hover : var(--rp-color-pink-9);
570
- --rp-color-pink-contrast : var(--rp-color-white);
573
+ --rp-color-pink-contrast : var(--rp-color-pink-8-contrast);
571
574
  --rp-color-pink-light : color-mix(in srgb, var(--rp-color-pink-9) 50%, var(--rp-color-black));
572
575
  --rp-color-pink-light-hover : color-mix(in srgb, var(--rp-color-pink-9) 70%, var(--rp-color-black));
573
576
  --rp-color-pink-light-color : var(--rp-color-pink-0);
@@ -575,7 +578,7 @@ html.dark,
575
578
  --rp-color-pink-outline-hover : color-mix(in srgb, var(--rp-color-pink-4) 5%, transparent);
576
579
  --rp-color-grape-filled : var(--rp-color-grape-8);
577
580
  --rp-color-grape-filled-hover : var(--rp-color-grape-9);
578
- --rp-color-grape-contrast : var(--rp-color-white);
581
+ --rp-color-grape-contrast : var(--rp-color-grape-8-contrast);
579
582
  --rp-color-grape-light : color-mix(in srgb, var(--rp-color-grape-9) 50%, var(--rp-color-black));
580
583
  --rp-color-grape-light-hover : color-mix(in srgb, var(--rp-color-grape-9) 70%, var(--rp-color-black));
581
584
  --rp-color-grape-light-color : var(--rp-color-grape-0);
@@ -583,7 +586,7 @@ html.dark,
583
586
  --rp-color-grape-outline-hover : color-mix(in srgb, var(--rp-color-grape-4) 5%, transparent);
584
587
  --rp-color-violet-filled : var(--rp-color-violet-8);
585
588
  --rp-color-violet-filled-hover : var(--rp-color-violet-9);
586
- --rp-color-violet-contrast : var(--rp-color-white);
589
+ --rp-color-violet-contrast : var(--rp-color-violet-8-contrast);
587
590
  --rp-color-violet-light : color-mix(in srgb, var(--rp-color-violet-9) 50%, var(--rp-color-black));
588
591
  --rp-color-violet-light-hover : color-mix(in srgb, var(--rp-color-violet-9) 70%, var(--rp-color-black));
589
592
  --rp-color-violet-light-color : var(--rp-color-violet-0);
@@ -591,7 +594,7 @@ html.dark,
591
594
  --rp-color-violet-outline-hover: color-mix(in srgb, var(--rp-color-violet-4) 5%, transparent);
592
595
  --rp-color-indigo-filled : var(--rp-color-indigo-8);
593
596
  --rp-color-indigo-filled-hover : var(--rp-color-indigo-9);
594
- --rp-color-indigo-contrast : var(--rp-color-white);
597
+ --rp-color-indigo-contrast : var(--rp-color-indigo-8-contrast);
595
598
  --rp-color-indigo-light : color-mix(in srgb, var(--rp-color-indigo-9) 50%, var(--rp-color-black));
596
599
  --rp-color-indigo-light-hover : color-mix(in srgb, var(--rp-color-indigo-9) 70%, var(--rp-color-black));
597
600
  --rp-color-indigo-light-color : var(--rp-color-indigo-0);
@@ -599,7 +602,7 @@ html.dark,
599
602
  --rp-color-indigo-outline-hover: color-mix(in srgb, var(--rp-color-indigo-4) 5%, transparent);
600
603
  --rp-color-blue-filled : var(--rp-color-blue-8);
601
604
  --rp-color-blue-filled-hover : var(--rp-color-blue-9);
602
- --rp-color-blue-contrast : var(--rp-color-white);
605
+ --rp-color-blue-contrast : var(--rp-color-blue-8-contrast);
603
606
  --rp-color-blue-light : color-mix(in srgb, var(--rp-color-blue-9) 50%, var(--rp-color-black));
604
607
  --rp-color-blue-light-hover : color-mix(in srgb, var(--rp-color-blue-9) 70%, var(--rp-color-black));
605
608
  --rp-color-blue-light-color : var(--rp-color-blue-0);
@@ -607,7 +610,7 @@ html.dark,
607
610
  --rp-color-blue-outline-hover : color-mix(in srgb, var(--rp-color-blue-4) 5%, transparent);
608
611
  --rp-color-cyan-filled : var(--rp-color-cyan-8);
609
612
  --rp-color-cyan-filled-hover : var(--rp-color-cyan-9);
610
- --rp-color-cyan-contrast : var(--rp-color-black);
613
+ --rp-color-cyan-contrast : var(--rp-color-cyan-8-contrast);
611
614
  --rp-color-cyan-light : color-mix(in srgb, var(--rp-color-cyan-9) 50%, var(--rp-color-black));
612
615
  --rp-color-cyan-light-hover : color-mix(in srgb, var(--rp-color-cyan-9) 70%, var(--rp-color-black));
613
616
  --rp-color-cyan-light-color : var(--rp-color-cyan-0);
@@ -615,7 +618,7 @@ html.dark,
615
618
  --rp-color-cyan-outline-hover : color-mix(in srgb, var(--rp-color-cyan-4) 5%, transparent);
616
619
  --rp-color-teal-filled : var(--rp-color-teal-8);
617
620
  --rp-color-teal-filled-hover : var(--rp-color-teal-9);
618
- --rp-color-teal-contrast : var(--rp-color-black);
621
+ --rp-color-teal-contrast : var(--rp-color-teal-8-contrast);
619
622
  --rp-color-teal-light : color-mix(in srgb, var(--rp-color-teal-9) 50%, var(--rp-color-black));
620
623
  --rp-color-teal-light-hover : color-mix(in srgb, var(--rp-color-teal-9) 70%, var(--rp-color-black));
621
624
  --rp-color-teal-light-color : var(--rp-color-teal-0);
@@ -623,7 +626,7 @@ html.dark,
623
626
  --rp-color-teal-outline-hover : color-mix(in srgb, var(--rp-color-teal-4) 5%, transparent);
624
627
  --rp-color-green-filled : var(--rp-color-green-8);
625
628
  --rp-color-green-filled-hover : var(--rp-color-green-9);
626
- --rp-color-green-contrast : var(--rp-color-black);
629
+ --rp-color-green-contrast : var(--rp-color-green-8-contrast);
627
630
  --rp-color-green-light : color-mix(in srgb, var(--rp-color-green-9) 50%, var(--rp-color-black));
628
631
  --rp-color-green-light-hover : color-mix(in srgb, var(--rp-color-green-9) 70%, var(--rp-color-black));
629
632
  --rp-color-green-light-color : var(--rp-color-green-0);
@@ -631,7 +634,7 @@ html.dark,
631
634
  --rp-color-green-outline-hover : color-mix(in srgb, var(--rp-color-green-4) 5%, transparent);
632
635
  --rp-color-lime-filled : var(--rp-color-lime-8);
633
636
  --rp-color-lime-filled-hover : var(--rp-color-lime-9);
634
- --rp-color-lime-contrast : var(--rp-color-black);
637
+ --rp-color-lime-contrast : var(--rp-color-lime-8-contrast);
635
638
  --rp-color-lime-light : color-mix(in srgb, var(--rp-color-lime-9) 50%, var(--rp-color-black));
636
639
  --rp-color-lime-light-hover : color-mix(in srgb, var(--rp-color-lime-9) 70%, var(--rp-color-black));
637
640
  --rp-color-lime-light-color : var(--rp-color-lime-0);
@@ -639,7 +642,7 @@ html.dark,
639
642
  --rp-color-lime-outline-hover : color-mix(in srgb, var(--rp-color-lime-4) 5%, transparent);
640
643
  --rp-color-yellow-filled : var(--rp-color-yellow-8);
641
644
  --rp-color-yellow-filled-hover : var(--rp-color-yellow-9);
642
- --rp-color-yellow-contrast : var(--rp-color-black);
645
+ --rp-color-yellow-contrast : var(--rp-color-yellow-8-contrast);
643
646
  --rp-color-yellow-light : color-mix(in srgb, var(--rp-color-yellow-9) 50%, var(--rp-color-black));
644
647
  --rp-color-yellow-light-hover : color-mix(in srgb, var(--rp-color-yellow-9) 70%, var(--rp-color-black));
645
648
  --rp-color-yellow-light-color : var(--rp-color-yellow-0);
@@ -647,7 +650,7 @@ html.dark,
647
650
  --rp-color-yellow-outline-hover: color-mix(in srgb, var(--rp-color-yellow-4) 5%, transparent);
648
651
  --rp-color-orange-filled : var(--rp-color-orange-8);
649
652
  --rp-color-orange-filled-hover : var(--rp-color-orange-9);
650
- --rp-color-orange-contrast : var(--rp-color-black);
653
+ --rp-color-orange-contrast : var(--rp-color-orange-8-contrast);
651
654
  --rp-color-orange-light : color-mix(in srgb, var(--rp-color-orange-9) 50%, var(--rp-color-black));
652
655
  --rp-color-orange-light-hover : color-mix(in srgb, var(--rp-color-orange-9) 70%, var(--rp-color-black));
653
656
  --rp-color-orange-light-color : var(--rp-color-orange-0);
@@ -688,3 +691,5 @@ html.dark,
688
691
  --rp-shadow-lg : 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
689
692
 
690
693
  }
694
+
695
+ }
package/src/styles/_utilities.scss CHANGED
@@ -1,13 +1,15 @@
1
1
  @use 'mixins' as *;
2
2
 
3
- .rp-spinner {
4
- @include spinner-icon($display: inline-block);
5
- }
3
+ @layer ropav.components {
4
+ .rp-spinner {
5
+ @include spinner-icon($display: inline-block);
6
+ }
6
7
 
7
- .rp-spinner > svg {
8
- display: block;
9
- width: 100%;
10
- height: 100%;
11
- }
8
+ .rp-spinner > svg {
9
+ display: block;
10
+ width: 100%;
11
+ height: 100%;
12
+ }
12
13
 
13
- @include spinner-keyframes;
14
+ @include spinner-keyframes;
15
+ }