opui-css 5.4.2 → 5.4.3

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 (328) hide show
  1. package/CHANGELOG.md +373 -367
  2. package/LICENSE +21 -21
  3. package/MIGRATING.md +138 -138
  4. package/README.md +87 -87
  5. package/astro/index.ts +46 -46
  6. package/components/AGENTS.md +247 -247
  7. package/components/Accordion/Accordion.astro +48 -48
  8. package/components/Accordion/Accordion.vue +38 -38
  9. package/components/Accordion/types.astro.ts +4 -4
  10. package/components/Accordion/types.d.vue.ts +15 -15
  11. package/components/Accordion/types.solid.ts +6 -6
  12. package/components/Accordion/types.svelte.ts +7 -7
  13. package/components/Accordion/types.ts +10 -10
  14. package/components/Anchor/Anchor.astro +49 -49
  15. package/components/Anchor/Anchor.vue +41 -41
  16. package/components/Anchor/types.astro.ts +4 -4
  17. package/components/Anchor/types.d.vue.ts +10 -10
  18. package/components/Anchor/types.solid.ts +6 -6
  19. package/components/Anchor/types.svelte.ts +7 -7
  20. package/components/Anchor/types.ts +9 -9
  21. package/components/Avatar/Avatar.astro +29 -29
  22. package/components/Avatar/Avatar.vue +24 -24
  23. package/components/Avatar/types.astro.ts +10 -10
  24. package/components/Avatar/types.d.vue.ts +12 -12
  25. package/components/Avatar/types.solid.ts +11 -11
  26. package/components/Avatar/types.svelte.ts +12 -12
  27. package/components/Avatar/types.ts +29 -29
  28. package/components/Badge/Badge.astro +51 -51
  29. package/components/Badge/Badge.vue +40 -40
  30. package/components/Badge/types.astro.ts +4 -4
  31. package/components/Badge/types.d.vue.ts +10 -10
  32. package/components/Badge/types.solid.ts +4 -4
  33. package/components/Badge/types.svelte.ts +4 -4
  34. package/components/Badge/types.ts +12 -12
  35. package/components/Button/Button.astro +36 -36
  36. package/components/Button/Button.vue +27 -27
  37. package/components/Button/types.astro.ts +6 -6
  38. package/components/Button/types.d.vue.ts +10 -10
  39. package/components/Button/types.solid.ts +8 -8
  40. package/components/Button/types.svelte.ts +6 -6
  41. package/components/Button/types.ts +16 -16
  42. package/components/ButtonGroup/ButtonGroup.astro +29 -29
  43. package/components/ButtonGroup/ButtonGroup.vue +22 -22
  44. package/components/ButtonGroup/types.astro.ts +4 -4
  45. package/components/ButtonGroup/types.d.vue.ts +10 -10
  46. package/components/ButtonGroup/types.solid.ts +4 -4
  47. package/components/ButtonGroup/types.svelte.ts +4 -4
  48. package/components/ButtonGroup/types.ts +7 -7
  49. package/components/Callout/Callout.astro +76 -76
  50. package/components/Callout/Callout.vue +63 -63
  51. package/components/Callout/types.astro.ts +4 -4
  52. package/components/Callout/types.d.vue.ts +10 -10
  53. package/components/Callout/types.solid.ts +6 -6
  54. package/components/Callout/types.svelte.ts +7 -7
  55. package/components/Callout/types.ts +10 -10
  56. package/components/Card/Card.astro +34 -34
  57. package/components/Card/Card.vue +28 -28
  58. package/components/Card/types.astro.ts +4 -4
  59. package/components/Card/types.d.vue.ts +10 -10
  60. package/components/Card/types.solid.ts +6 -6
  61. package/components/Card/types.svelte.ts +7 -7
  62. package/components/Card/types.ts +11 -11
  63. package/components/Checkbox/Checkbox.astro +46 -46
  64. package/components/Checkbox/Checkbox.vue +43 -43
  65. package/components/Checkbox/CheckboxInput.astro +16 -16
  66. package/components/Checkbox/CheckboxInput.vue +32 -32
  67. package/components/Checkbox/types.astro.ts +8 -8
  68. package/components/Checkbox/types.d.vue.ts +11 -11
  69. package/components/Checkbox/types.solid.ts +9 -9
  70. package/components/Checkbox/types.svelte.ts +12 -12
  71. package/components/Checkbox/types.ts +16 -16
  72. package/components/Chip/Chip.astro +31 -31
  73. package/components/Chip/Chip.vue +37 -37
  74. package/components/Chip/types.astro.ts +9 -9
  75. package/components/Chip/types.d.vue.ts +10 -10
  76. package/components/Chip/types.solid.ts +10 -10
  77. package/components/Chip/types.svelte.ts +14 -14
  78. package/components/Chip/types.ts +13 -13
  79. package/components/ClassicSelect/ClassicSelect.astro +60 -60
  80. package/components/ClassicSelect/ClassicSelect.vue +54 -54
  81. package/components/ClassicSelect/types.d.vue.ts +10 -10
  82. package/components/ClassicSelect/types.ts +15 -15
  83. package/components/DescriptionList/Description.astro +9 -9
  84. package/components/DescriptionList/Description.vue +12 -12
  85. package/components/DescriptionList/DescriptionList.astro +18 -18
  86. package/components/DescriptionList/DescriptionList.vue +23 -23
  87. package/components/DescriptionList/Item.astro +9 -9
  88. package/components/DescriptionList/Item.vue +12 -12
  89. package/components/DescriptionList/Term.astro +9 -9
  90. package/components/DescriptionList/Term.vue +12 -12
  91. package/components/DescriptionList/index.ts +12 -12
  92. package/components/DescriptionList/types.astro.ts +10 -10
  93. package/components/DescriptionList/types.d.vue.ts +10 -10
  94. package/components/DescriptionList/types.solid.ts +4 -4
  95. package/components/DescriptionList/types.svelte.ts +4 -4
  96. package/components/DescriptionList/types.ts +3 -3
  97. package/components/Dialog/Dialog.astro +38 -38
  98. package/components/Dialog/Dialog.vue +35 -35
  99. package/components/Dialog/types.astro.ts +4 -4
  100. package/components/Dialog/types.d.vue.ts +10 -10
  101. package/components/Dialog/types.solid.ts +8 -8
  102. package/components/Dialog/types.svelte.ts +7 -7
  103. package/components/Dialog/types.ts +10 -10
  104. package/components/Divider/Divider.astro +12 -12
  105. package/components/Divider/Divider.vue +12 -12
  106. package/components/Divider/types.astro.ts +4 -4
  107. package/components/Divider/types.d.vue.ts +6 -6
  108. package/components/Divider/types.solid.ts +4 -4
  109. package/components/Divider/types.svelte.ts +4 -4
  110. package/components/Divider/types.ts +3 -3
  111. package/components/Drawer/Drawer.astro +47 -47
  112. package/components/Drawer/Drawer.vue +46 -46
  113. package/components/Drawer/DrawerFooter.astro +11 -11
  114. package/components/Drawer/DrawerFooter.vue +16 -16
  115. package/components/Drawer/DrawerHeader.astro +27 -27
  116. package/components/Drawer/DrawerHeader.vue +36 -36
  117. package/components/Drawer/types.astro.ts +8 -8
  118. package/components/Drawer/types.d.vue.ts +31 -31
  119. package/components/Drawer/types.solid.ts +12 -12
  120. package/components/Drawer/types.svelte.ts +15 -15
  121. package/components/Drawer/types.ts +20 -20
  122. package/components/FieldDescription/FieldDescription.astro +9 -9
  123. package/components/FieldDescription/FieldDescription.vue +12 -12
  124. package/components/FieldDescription/types.astro.ts +4 -4
  125. package/components/FieldDescription/types.d.vue.ts +10 -10
  126. package/components/FieldDescription/types.solid.ts +5 -5
  127. package/components/FieldDescription/types.svelte.ts +4 -4
  128. package/components/FieldDescription/types.ts +1 -1
  129. package/components/FieldGroup/FieldGroup.astro +24 -24
  130. package/components/FieldGroup/FieldGroup.vue +25 -25
  131. package/components/FieldGroup/types.astro.ts +4 -4
  132. package/components/FieldGroup/types.d.vue.ts +12 -12
  133. package/components/FieldGroup/types.solid.ts +5 -5
  134. package/components/FieldGroup/types.svelte.ts +4 -4
  135. package/components/FieldGroup/types.ts +4 -4
  136. package/components/FieldLegend/FieldLegend.astro +11 -11
  137. package/components/FieldLegend/FieldLegend.vue +18 -18
  138. package/components/FieldLegend/types.astro.ts +6 -6
  139. package/components/FieldLegend/types.d.vue.ts +11 -11
  140. package/components/FieldLegend/types.solid.ts +5 -5
  141. package/components/FieldLegend/types.svelte.ts +6 -6
  142. package/components/FieldLegend/types.ts +1 -1
  143. package/components/FieldSet/FieldSet.astro +11 -11
  144. package/components/FieldSet/FieldSet.vue +18 -18
  145. package/components/FieldSet/types.astro.ts +6 -6
  146. package/components/FieldSet/types.d.vue.ts +11 -11
  147. package/components/FieldSet/types.solid.ts +5 -5
  148. package/components/FieldSet/types.svelte.ts +8 -8
  149. package/components/FieldSet/types.ts +5 -5
  150. package/components/Form/Form.astro +10 -10
  151. package/components/Form/Form.vue +14 -14
  152. package/components/Form/types.astro.ts +6 -6
  153. package/components/Form/types.d.vue.ts +11 -11
  154. package/components/Form/types.solid.ts +5 -5
  155. package/components/Form/types.svelte.ts +7 -7
  156. package/components/Form/types.ts +1 -1
  157. package/components/IconButton/IconButton.astro +24 -24
  158. package/components/IconButton/IconButton.vue +24 -24
  159. package/components/IconButton/types.astro.ts +6 -6
  160. package/components/IconButton/types.d.vue.ts +10 -10
  161. package/components/IconButton/types.solid.ts +8 -8
  162. package/components/IconButton/types.svelte.ts +6 -6
  163. package/components/IconButton/types.ts +16 -16
  164. package/components/List/List.astro +29 -29
  165. package/components/List/List.vue +28 -28
  166. package/components/List/types.astro.ts +4 -4
  167. package/components/List/types.d.vue.ts +10 -10
  168. package/components/List/types.solid.ts +4 -4
  169. package/components/List/types.svelte.ts +4 -4
  170. package/components/List/types.ts +7 -7
  171. package/components/ListItem/ListItem.astro +108 -108
  172. package/components/ListItem/ListItem.vue +98 -98
  173. package/components/ListItem/types.astro.ts +10 -10
  174. package/components/ListItem/types.d.vue.ts +10 -10
  175. package/components/ListItem/types.solid.ts +12 -12
  176. package/components/ListItem/types.svelte.ts +14 -14
  177. package/components/ListItem/types.ts +32 -32
  178. package/components/Progress/Progress.astro +31 -31
  179. package/components/Progress/Progress.vue +34 -34
  180. package/components/Progress/types.astro.ts +4 -4
  181. package/components/Progress/types.d.vue.ts +10 -10
  182. package/components/Progress/types.solid.ts +4 -4
  183. package/components/Progress/types.svelte.ts +4 -4
  184. package/components/Progress/types.ts +10 -10
  185. package/components/Radio/Radio.astro +44 -44
  186. package/components/Radio/Radio.vue +41 -41
  187. package/components/Radio/RadioInput.astro +7 -7
  188. package/components/Radio/RadioInput.vue +14 -14
  189. package/components/Radio/types.astro.ts +6 -6
  190. package/components/Radio/types.d.vue.ts +11 -11
  191. package/components/Radio/types.solid.ts +9 -9
  192. package/components/Radio/types.svelte.ts +12 -12
  193. package/components/Radio/types.ts +12 -12
  194. package/components/Range/Range.astro +128 -128
  195. package/components/Range/Range.vue +85 -85
  196. package/components/Range/types.ts +25 -25
  197. package/components/Select/Select.astro +108 -108
  198. package/components/Select/Select.vue +85 -85
  199. package/components/Switch/Switch.astro +76 -76
  200. package/components/Switch/Switch.vue +63 -63
  201. package/components/Switch/SwitchInput.astro +7 -7
  202. package/components/Switch/SwitchInput.vue +14 -14
  203. package/components/Switch/types.astro.ts +5 -5
  204. package/components/Switch/types.d.vue.ts +13 -13
  205. package/components/Switch/types.solid.ts +9 -9
  206. package/components/Switch/types.svelte.ts +9 -9
  207. package/components/Switch/types.ts +16 -16
  208. package/components/Table/Body.astro +11 -11
  209. package/components/Table/Body.vue +5 -5
  210. package/components/Table/Cell.astro +11 -11
  211. package/components/Table/Cell.vue +5 -5
  212. package/components/Table/Column.astro +12 -12
  213. package/components/Table/Column.vue +19 -19
  214. package/components/Table/ColumnGroup.astro +11 -11
  215. package/components/Table/ColumnGroup.vue +5 -5
  216. package/components/Table/Head.astro +11 -11
  217. package/components/Table/Head.vue +5 -5
  218. package/components/Table/HeaderCell.astro +11 -11
  219. package/components/Table/HeaderCell.vue +5 -5
  220. package/components/Table/Row.astro +11 -11
  221. package/components/Table/Row.vue +5 -5
  222. package/components/Table/Table.astro +14 -14
  223. package/components/Table/Table.vue +19 -19
  224. package/components/Table/index.ts +20 -20
  225. package/components/Table/types.astro.ts +16 -16
  226. package/components/Table/types.d.vue.ts +10 -10
  227. package/components/Table/types.solid.ts +8 -8
  228. package/components/Table/types.svelte.ts +11 -11
  229. package/components/Table/types.ts +9 -9
  230. package/components/Tabs/Tabs.astro +24 -24
  231. package/components/Tabs/Tabs.vue +20 -20
  232. package/components/Tabs/TabsItem.astro +40 -40
  233. package/components/Tabs/TabsItem.vue +39 -39
  234. package/components/Tabs/TabsPanel.astro +16 -16
  235. package/components/Tabs/TabsPanel.vue +31 -31
  236. package/components/Tabs/TabsTab.astro +15 -15
  237. package/components/Tabs/TabsTab.vue +24 -24
  238. package/components/Tabs/index.ts +14 -14
  239. package/components/Tabs/types.astro.ts +11 -11
  240. package/components/Tabs/types.d.vue.ts +31 -31
  241. package/components/Tabs/types.solid.ts +12 -12
  242. package/components/Tabs/types.svelte.ts +10 -10
  243. package/components/Tabs/types.ts +19 -19
  244. package/components/TextField/TextField.astro +124 -124
  245. package/components/TextField/TextField.vue +74 -74
  246. package/components/TextField/types.astro.ts +17 -17
  247. package/components/Textarea/Textarea.astro +118 -118
  248. package/components/Textarea/Textarea.vue +64 -64
  249. package/components/Textarea/types.astro.ts +10 -10
  250. package/components/Textarea/types.d.vue.ts +19 -19
  251. package/components/Textarea/types.solid.ts +6 -6
  252. package/components/Textarea/types.svelte.ts +21 -21
  253. package/components/Textarea/types.ts +33 -33
  254. package/components/Toast/Toast.astro +42 -42
  255. package/components/Toast/Toast.vue +48 -48
  256. package/components/ToggleButton/ToggleButton.astro +43 -43
  257. package/components/ToggleButton/ToggleButton.vue +41 -41
  258. package/components/ToggleButton/types.astro.ts +4 -4
  259. package/components/ToggleButton/types.d.vue.ts +10 -10
  260. package/components/ToggleButton/types.solid.ts +7 -7
  261. package/components/ToggleButton/types.svelte.ts +7 -7
  262. package/components/ToggleButton/types.ts +10 -10
  263. package/components/ToggleGroup/ToggleGroup.astro +42 -42
  264. package/components/ToggleGroup/ToggleGroup.vue +36 -36
  265. package/components/ToggleGroup/types.astro.ts +4 -4
  266. package/components/ToggleGroup/types.d.vue.ts +15 -15
  267. package/components/ToggleGroup/types.solid.ts +4 -4
  268. package/components/ToggleGroup/types.svelte.ts +9 -9
  269. package/components/ToggleGroup/types.ts +15 -15
  270. package/components/Tooltip/Tooltip.astro +23 -23
  271. package/components/Tooltip/Tooltip.vue +22 -22
  272. package/components/Tooltip/types.astro.ts +4 -4
  273. package/components/Tooltip/types.d.vue.ts +10 -10
  274. package/components/Tooltip/types.solid.ts +6 -6
  275. package/components/Tooltip/types.svelte.ts +7 -7
  276. package/components/Tooltip/types.ts +11 -11
  277. package/core/normalize.css +214 -214
  278. package/core/palette.css +314 -314
  279. package/core/utils.css +68 -68
  280. package/css/components/accordion.css +173 -173
  281. package/css/components/anchor.css +27 -27
  282. package/css/components/avatar.css +65 -65
  283. package/css/components/badge.css +107 -107
  284. package/css/components/button-group.css +179 -179
  285. package/css/components/button.css +212 -212
  286. package/css/components/callout.css +112 -112
  287. package/css/components/card.css +116 -116
  288. package/css/components/checkbox.css +211 -211
  289. package/css/components/chip.css +92 -92
  290. package/css/components/description-list.css +81 -81
  291. package/css/components/dialog.css +64 -64
  292. package/css/components/divider.css +20 -20
  293. package/css/components/drawer.css +170 -170
  294. package/css/components/form.css +146 -146
  295. package/css/components/icon-button.css +139 -139
  296. package/css/components/link.css +21 -21
  297. package/css/components/list.css +343 -343
  298. package/css/components/progress.css +99 -99
  299. package/css/components/radio.css +170 -170
  300. package/css/components/range.css +320 -320
  301. package/css/components/select.css +170 -170
  302. package/css/components/spinner.css +38 -38
  303. package/css/components/switch.css +270 -270
  304. package/css/components/table.css +173 -173
  305. package/css/components/tabs.css +84 -84
  306. package/css/components/text-field.css +449 -449
  307. package/css/components/text-input.css +68 -68
  308. package/css/components/textarea.css +26 -26
  309. package/css/components/toast.css +157 -157
  310. package/css/components/toggle-button.css +91 -91
  311. package/css/components/toggle-group.css +56 -56
  312. package/css/components/tooltip.css +68 -68
  313. package/css/components/typography.css +580 -580
  314. package/css/components.css +41 -41
  315. package/css/imports.css +17 -17
  316. package/css/js/checkbox.js +21 -21
  317. package/css/js/toast.js +94 -94
  318. package/css/theme.css +124 -124
  319. package/dist/op.css +4 -4
  320. package/dist/op.css.map +1 -1
  321. package/dist/opui.components.css +5140 -5140
  322. package/dist/opui.components.css.map +1 -1
  323. package/dist/opui.css +5907 -5907
  324. package/dist/opui.css.map +1 -1
  325. package/env.d.ts +14 -14
  326. package/open-props.css +6 -6
  327. package/package.json +90 -90
  328. package/vue/index.ts +54 -54
@@ -1,214 +1,214 @@
1
- @layer normalize {
2
- *,
3
- ::before,
4
- ::after {
5
- /* Set box sizing instead of inheriting */
6
- /* https://www.oddbird.net/2025/09/04/box-model/ */
7
- box-sizing: border-box;
8
- }
9
-
10
- * {
11
- scrollbar-width: thin;
12
- }
13
-
14
- html {
15
- --motion: 1;
16
- }
17
-
18
- @media (prefers-reduced-motion: reduce) {
19
- html {
20
- --motion: 0;
21
- }
22
- }
23
-
24
- .ui-motion-off {
25
- --motion: 0 !important;
26
- }
27
-
28
- .ui-motion-on {
29
- --motion: 1 !important;
30
- }
31
-
32
- .ui-motion-debug {
33
- --motion: 10 !important;
34
- }
35
-
36
- :where(html) {
37
- --_page-bg-color: var(--surface-default);
38
-
39
- accent-color: var(--primary);
40
- background-color: var(--_page-bg-color);
41
- block-size: 100%;
42
- caret-color: var(--primary);
43
- color: var(--text-muted, var(--text-color-2));
44
- /* text-color-2 is for backwards compatibility */
45
- font-family: var(--font-sans);
46
- interpolate-size: allow-keywords;
47
- line-height: var(--font-lineheight-4);
48
-
49
- /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
50
- -moz-text-size-adjust: none;
51
- -webkit-text-size-adjust: none;
52
- text-size-adjust: none;
53
-
54
- @media (prefers-reduced-motion: no-preference) {
55
- scroll-behavior: smooth;
56
- }
57
- }
58
-
59
- :where(body) {
60
- -moz-osx-font-smoothing: grayscale;
61
- -webkit-font-smoothing: antialiased;
62
- container-type: inline-size;
63
- font-size: 16px;
64
- font-synthesis: style;
65
- font-weight: 400;
66
- inline-size: 100%;
67
- margin: 0;
68
- min-block-size: 100%;
69
- min-inline-size: 320px;
70
- position: relative;
71
- text-rendering: optimizeLegibility;
72
- }
73
-
74
- :where(:not(dialog, popover)) {
75
- margin: 0;
76
- }
77
-
78
- :where(dialog:not([open])) {
79
- outline: none !important;
80
- }
81
-
82
- :where(:not(fieldset, progress, meter)) {
83
- background-origin: border-box;
84
- background-repeat: no-repeat;
85
- border-style: solid;
86
- border-width: 0;
87
- }
88
-
89
- :where(fieldset) {
90
- border: var(--field-border-width) solid var(--field-border-color);
91
- border-radius: var(--field-border-radius);
92
- padding: var(--size-3);
93
- display: grid;
94
- gap: var(--size-3);
95
- }
96
-
97
- :where(input, button, textarea),
98
- :where(input[type="file"])::-webkit-file-upload-button {
99
- color: inherit;
100
- font: inherit;
101
- letter-spacing: inherit;
102
- }
103
-
104
- :where(input):-webkit-autofill,
105
- :where(input):-webkit-autofill:hover,
106
- :where(input):-webkit-autofill:focus,
107
- :where(textarea):-webkit-autofill,
108
- :where(textarea):-webkit-autofill:hover,
109
- :where(textarea):-webkit-autofill:focus,
110
- :where(select):-webkit-autofill,
111
- :where(select):-webkit-autofill:hover,
112
- :where(select):-webkit-autofill:focus,
113
- :where(input):autofill,
114
- :where(input):autofill:hover,
115
- :where(input):autofill:focus,
116
- :where(textarea):autofill,
117
- :where(textarea):autofill:hover,
118
- :where(textarea):autofill:focus,
119
- :where(select):autofill,
120
- :where(select):autofill:hover,
121
- :where(select):autofill:focus {
122
- -webkit-text-fill-color: var(--text-muted, var(--text-color-2));
123
- -webkit-box-shadow: 0 0 0px 1e5px var(--well-1) inset;
124
- transition: background-color 5000s ease-in-out 0s;
125
- }
126
-
127
- ::placeholder {
128
- color: var(--text-muted, var(--text-color-2));
129
- }
130
-
131
- ::-moz-placeholder {
132
- opacity: 1;
133
- }
134
-
135
- :focus-visible {
136
- /* Inverts the --_page-bg-color */
137
- --_focus-visible-color: rgb(
138
- from var(--_page-bg-color) calc(255 - r) calc(255 - g) calc(255 - b)
139
- );
140
-
141
- border-radius: var(--border-radius, 0px);
142
- outline: 2px solid var(--_focus-visible-color);
143
- outline-offset: 2px;
144
- transition: outline-offset calc(0.15s * var(--motion)) var(--ease-2);
145
- }
146
-
147
- :where(:not(:active):focus-visible) {
148
- transition-duration: calc(0.15s * var(--motion));
149
- outline-offset: var(--outline-offset, 0px);
150
- }
151
-
152
- :where(
153
- a[href],
154
- area,
155
- button,
156
- input:not(
157
- [type="text"],
158
- [type="email"],
159
- [type="number"],
160
- [type="password"],
161
- [type=""],
162
- [type="tel"],
163
- [type="url"]
164
- ),
165
- label[for],
166
- select,
167
- summary
168
- ) {
169
- cursor: pointer;
170
- }
171
-
172
- :where(
173
- a[href],
174
- area,
175
- button,
176
- [role="button"],
177
- input,
178
- label[for],
179
- select,
180
- summary,
181
- textarea,
182
- [tabindex]:not([tabindex*="-"])
183
- ) {
184
- -webkit-tap-highlight-color: transparent;
185
- touch-action: manipulation;
186
- }
187
-
188
- :where(img, svg, video, canvas, audio, iframe, embed, object) {
189
- display: block;
190
- }
191
-
192
- :where(img, svg, video) {
193
- block-size: auto;
194
- max-inline-size: 100%;
195
- }
196
-
197
- :where(svg:not([width])) {
198
- inline-size: var(--size-7);
199
- }
200
-
201
- :where(dt:not(:first-of-type)) {
202
- margin-block-start: var(--size-5);
203
- }
204
-
205
- :where(figure) {
206
- display: grid;
207
- gap: var(--size-2);
208
- place-items: center;
209
- }
210
-
211
- :target {
212
- scroll-margin-block-start: 2rem;
213
- }
214
- }
1
+ @layer normalize {
2
+ *,
3
+ ::before,
4
+ ::after {
5
+ /* Set box sizing instead of inheriting */
6
+ /* https://www.oddbird.net/2025/09/04/box-model/ */
7
+ box-sizing: border-box;
8
+ }
9
+
10
+ * {
11
+ scrollbar-width: thin;
12
+ }
13
+
14
+ html {
15
+ --motion: 1;
16
+ }
17
+
18
+ @media (prefers-reduced-motion: reduce) {
19
+ html {
20
+ --motion: 0;
21
+ }
22
+ }
23
+
24
+ .ui-motion-off {
25
+ --motion: 0 !important;
26
+ }
27
+
28
+ .ui-motion-on {
29
+ --motion: 1 !important;
30
+ }
31
+
32
+ .ui-motion-debug {
33
+ --motion: 10 !important;
34
+ }
35
+
36
+ :where(html) {
37
+ --_page-bg-color: var(--surface-default);
38
+
39
+ accent-color: var(--primary);
40
+ background-color: var(--_page-bg-color);
41
+ block-size: 100%;
42
+ caret-color: var(--primary);
43
+ color: var(--text-muted, var(--text-color-2));
44
+ /* text-color-2 is for backwards compatibility */
45
+ font-family: var(--font-sans);
46
+ interpolate-size: allow-keywords;
47
+ line-height: var(--font-lineheight-4);
48
+
49
+ /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
50
+ -moz-text-size-adjust: none;
51
+ -webkit-text-size-adjust: none;
52
+ text-size-adjust: none;
53
+
54
+ @media (prefers-reduced-motion: no-preference) {
55
+ scroll-behavior: smooth;
56
+ }
57
+ }
58
+
59
+ :where(body) {
60
+ -moz-osx-font-smoothing: grayscale;
61
+ -webkit-font-smoothing: antialiased;
62
+ container-type: inline-size;
63
+ font-size: 16px;
64
+ font-synthesis: style;
65
+ font-weight: 400;
66
+ inline-size: 100%;
67
+ margin: 0;
68
+ min-block-size: 100%;
69
+ min-inline-size: 320px;
70
+ position: relative;
71
+ text-rendering: optimizeLegibility;
72
+ }
73
+
74
+ :where(:not(dialog, popover)) {
75
+ margin: 0;
76
+ }
77
+
78
+ :where(dialog:not([open])) {
79
+ outline: none !important;
80
+ }
81
+
82
+ :where(:not(fieldset, progress, meter)) {
83
+ background-origin: border-box;
84
+ background-repeat: no-repeat;
85
+ border-style: solid;
86
+ border-width: 0;
87
+ }
88
+
89
+ :where(fieldset) {
90
+ border: var(--field-border-width) solid var(--field-border-color);
91
+ border-radius: var(--field-border-radius);
92
+ padding: var(--size-3);
93
+ display: grid;
94
+ gap: var(--size-3);
95
+ }
96
+
97
+ :where(input, button, textarea),
98
+ :where(input[type="file"])::-webkit-file-upload-button {
99
+ color: inherit;
100
+ font: inherit;
101
+ letter-spacing: inherit;
102
+ }
103
+
104
+ :where(input):-webkit-autofill,
105
+ :where(input):-webkit-autofill:hover,
106
+ :where(input):-webkit-autofill:focus,
107
+ :where(textarea):-webkit-autofill,
108
+ :where(textarea):-webkit-autofill:hover,
109
+ :where(textarea):-webkit-autofill:focus,
110
+ :where(select):-webkit-autofill,
111
+ :where(select):-webkit-autofill:hover,
112
+ :where(select):-webkit-autofill:focus,
113
+ :where(input):autofill,
114
+ :where(input):autofill:hover,
115
+ :where(input):autofill:focus,
116
+ :where(textarea):autofill,
117
+ :where(textarea):autofill:hover,
118
+ :where(textarea):autofill:focus,
119
+ :where(select):autofill,
120
+ :where(select):autofill:hover,
121
+ :where(select):autofill:focus {
122
+ -webkit-text-fill-color: var(--text-muted, var(--text-color-2));
123
+ -webkit-box-shadow: 0 0 0px 1e5px var(--well-1) inset;
124
+ transition: background-color 5000s ease-in-out 0s;
125
+ }
126
+
127
+ ::placeholder {
128
+ color: var(--text-muted, var(--text-color-2));
129
+ }
130
+
131
+ ::-moz-placeholder {
132
+ opacity: 1;
133
+ }
134
+
135
+ :focus-visible {
136
+ /* Inverts the --_page-bg-color */
137
+ --_focus-visible-color: rgb(
138
+ from var(--_page-bg-color) calc(255 - r) calc(255 - g) calc(255 - b)
139
+ );
140
+
141
+ border-radius: var(--border-radius, 0px);
142
+ outline: 2px solid var(--_focus-visible-color);
143
+ outline-offset: 2px;
144
+ transition: outline-offset calc(0.15s * var(--motion)) var(--ease-2);
145
+ }
146
+
147
+ :where(:not(:active):focus-visible) {
148
+ transition-duration: calc(0.15s * var(--motion));
149
+ outline-offset: var(--outline-offset, 0px);
150
+ }
151
+
152
+ :where(
153
+ a[href],
154
+ area,
155
+ button,
156
+ input:not(
157
+ [type="text"],
158
+ [type="email"],
159
+ [type="number"],
160
+ [type="password"],
161
+ [type=""],
162
+ [type="tel"],
163
+ [type="url"]
164
+ ),
165
+ label[for],
166
+ select,
167
+ summary
168
+ ) {
169
+ cursor: pointer;
170
+ }
171
+
172
+ :where(
173
+ a[href],
174
+ area,
175
+ button,
176
+ [role="button"],
177
+ input,
178
+ label[for],
179
+ select,
180
+ summary,
181
+ textarea,
182
+ [tabindex]:not([tabindex*="-"])
183
+ ) {
184
+ -webkit-tap-highlight-color: transparent;
185
+ touch-action: manipulation;
186
+ }
187
+
188
+ :where(img, svg, video, canvas, audio, iframe, embed, object) {
189
+ display: block;
190
+ }
191
+
192
+ :where(img, svg, video) {
193
+ block-size: auto;
194
+ max-inline-size: 100%;
195
+ }
196
+
197
+ :where(svg:not([width])) {
198
+ inline-size: var(--size-7);
199
+ }
200
+
201
+ :where(dt:not(:first-of-type)) {
202
+ margin-block-start: var(--size-5);
203
+ }
204
+
205
+ :where(figure) {
206
+ display: grid;
207
+ gap: var(--size-2);
208
+ place-items: center;
209
+ }
210
+
211
+ :target {
212
+ scroll-margin-block-start: 2rem;
213
+ }
214
+ }