@greese/ui 1.1.0 → 1.2.0

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 (194) hide show
  1. package/README.md +19 -14
  2. package/dist/_maps.scss +1 -1
  3. package/dist/_tokens-base.scss +30 -6
  4. package/dist/_tokens.scss +31 -2
  5. package/dist/_utilities-table.scss +1615 -0
  6. package/dist/clipboard.d.ts +18 -0
  7. package/dist/clipboard.js +62 -0
  8. package/dist/css/Button.css +2 -2
  9. package/dist/css/Carousel.css +145 -47
  10. package/dist/css/Checkbox.css +2 -2
  11. package/dist/css/Chip.css +38 -8
  12. package/dist/css/ChoiceGroup.css +42 -1
  13. package/dist/css/Collapsible.css +1 -0
  14. package/dist/css/ColorPicker.css +84 -0
  15. package/dist/css/Combobox.css +2 -2
  16. package/dist/css/Dialog.css +24 -22
  17. package/dist/css/EditableField.css +219 -0
  18. package/dist/css/Input.css +11 -2
  19. package/dist/css/Menu.css +9 -0
  20. package/dist/css/NumberField.css +53 -8
  21. package/dist/css/NumberStepper.css +9 -0
  22. package/dist/css/OtpField.css +1 -1
  23. package/dist/css/Radio.css +2 -2
  24. package/dist/css/ScrollCarousel.css +225 -0
  25. package/dist/css/SegmentedControl.css +2 -2
  26. package/dist/css/Select.css +3 -2
  27. package/dist/css/Slider.css +45 -5
  28. package/dist/css/Switch.css +6 -6
  29. package/dist/css/Text.css +14 -14
  30. package/dist/css/Textarea.css +1 -1
  31. package/dist/css/core.css +36 -6
  32. package/dist/css/resets.css +162 -0
  33. package/dist/css.d.ts +2 -0
  34. package/dist/css.js +2 -0
  35. package/dist/greese.css +978 -138
  36. package/dist/index.d.ts +2 -1
  37. package/dist/index.js +2 -1
  38. package/dist/scss/components/_Accordion.scss +2 -0
  39. package/dist/scss/components/_ActionSelect.scss +2 -0
  40. package/dist/scss/components/_Alert.scss +2 -0
  41. package/dist/scss/components/_AppBar.scss +2 -0
  42. package/dist/scss/components/_AspectRatio.scss +2 -0
  43. package/dist/scss/components/_AutoLayout.scss +2 -0
  44. package/dist/scss/components/_Avatar.scss +2 -0
  45. package/dist/scss/components/_Badge.scss +2 -0
  46. package/dist/scss/components/_Box.scss +2 -0
  47. package/dist/scss/components/_Breadcrumbs.scss +2 -0
  48. package/dist/scss/components/_Button.scss +2 -0
  49. package/dist/scss/components/_ButtonGroup.scss +2 -0
  50. package/dist/scss/components/_Card.scss +2 -0
  51. package/dist/scss/components/_Carousel.scss +2 -0
  52. package/dist/scss/components/_Center.scss +2 -0
  53. package/dist/scss/components/_ChatBubble.scss +2 -0
  54. package/dist/scss/components/_Checkbox.scss +2 -0
  55. package/dist/scss/components/_Chip.scss +2 -0
  56. package/dist/scss/components/_ChoiceGroup.scss +2 -0
  57. package/dist/scss/components/_Code.scss +2 -0
  58. package/dist/scss/components/_Collapsible.scss +2 -0
  59. package/dist/scss/components/_ColorPicker.scss +2 -0
  60. package/dist/scss/components/_Combobox.scss +2 -0
  61. package/dist/scss/components/_Container.scss +2 -0
  62. package/dist/scss/components/_Countdown.scss +2 -0
  63. package/dist/scss/components/_DateField.scss +2 -0
  64. package/dist/scss/components/_Dialog.scss +2 -0
  65. package/dist/scss/components/_Diff.scss +2 -0
  66. package/dist/scss/components/_Divider.scss +2 -0
  67. package/dist/scss/components/_Dock.scss +2 -0
  68. package/dist/scss/components/_EditableField.scss +2 -0
  69. package/dist/scss/components/_Field.scss +2 -0
  70. package/dist/scss/components/_Fieldset.scss +2 -0
  71. package/dist/scss/components/_FileInput.scss +2 -0
  72. package/dist/scss/components/_Footer.scss +2 -0
  73. package/dist/scss/components/_Grid.scss +2 -0
  74. package/dist/scss/components/_Header.scss +2 -0
  75. package/dist/scss/components/_Heading.scss +2 -0
  76. package/dist/scss/components/_Icon.scss +2 -0
  77. package/dist/scss/components/_IconButton.scss +2 -0
  78. package/dist/scss/components/_Image.scss +2 -0
  79. package/dist/scss/components/_Indicator.scss +2 -0
  80. package/dist/scss/components/_Input.scss +2 -0
  81. package/dist/scss/components/_Key.scss +2 -0
  82. package/dist/scss/components/_Link.scss +2 -0
  83. package/dist/scss/components/_List.scss +2 -0
  84. package/dist/scss/components/_Media.scss +2 -0
  85. package/dist/scss/components/_Menu.scss +2 -0
  86. package/dist/scss/components/_Motion.scss +2 -0
  87. package/dist/scss/components/_NumberField.scss +2 -0
  88. package/dist/scss/components/_NumberStepper.scss +2 -0
  89. package/dist/scss/components/_OtpField.scss +2 -0
  90. package/dist/scss/components/_PageTransition.scss +2 -0
  91. package/dist/scss/components/_Pagination.scss +2 -0
  92. package/dist/scss/components/_Popover.scss +2 -0
  93. package/dist/scss/components/_Progress.scss +2 -0
  94. package/dist/scss/components/_RadialProgress.scss +2 -0
  95. package/dist/scss/components/_Radio.scss +2 -0
  96. package/dist/scss/components/_Rating.scss +2 -0
  97. package/dist/scss/components/_ScrollCarousel.scss +2 -0
  98. package/dist/scss/components/_ScrollSpy.scss +2 -0
  99. package/dist/scss/components/_SegmentedControl.scss +2 -0
  100. package/dist/scss/components/_Select.scss +2 -0
  101. package/dist/scss/components/_Sidebar.scss +2 -0
  102. package/dist/scss/components/_Skeleton.scss +2 -0
  103. package/dist/scss/components/_Slider.scss +2 -0
  104. package/dist/scss/components/_Spacer.scss +2 -0
  105. package/dist/scss/components/_SpeedDial.scss +2 -0
  106. package/dist/scss/components/_Spinner.scss +2 -0
  107. package/dist/scss/components/_Stack.scss +2 -0
  108. package/dist/scss/components/_Stat.scss +2 -0
  109. package/dist/scss/components/_Status.scss +2 -0
  110. package/dist/scss/components/_Steps.scss +2 -0
  111. package/dist/scss/components/_Swap.scss +2 -0
  112. package/dist/scss/components/_Switch.scss +2 -0
  113. package/dist/scss/components/_Table.scss +2 -0
  114. package/dist/scss/components/_Tabs.scss +2 -0
  115. package/dist/scss/components/_Text.scss +2 -0
  116. package/dist/scss/components/_TextRotate.scss +2 -0
  117. package/dist/scss/components/_Textarea.scss +2 -0
  118. package/dist/scss/components/_ThemeProvider.scss +2 -0
  119. package/dist/scss/components/_Tile.scss +2 -0
  120. package/dist/scss/components/_Toast.scss +2 -0
  121. package/dist/scss/components/_ToggleButton.scss +2 -0
  122. package/dist/scss/components/_Tooltip.scss +2 -0
  123. package/dist/scss/components/_Type.scss +2 -0
  124. package/dist/scss/components/_Visibility.scss +2 -0
  125. package/dist/scss/components/_VisuallyHidden.scss +2 -0
  126. package/dist/shapes.d.ts +12 -1
  127. package/dist/shapes.js +11 -10
  128. package/dist/style-manifest.json +18830 -132
  129. package/dist/theme.js +6 -1
  130. package/dist/themeFiles/index.d.ts +9 -0
  131. package/dist/themeFiles/index.js +9 -0
  132. package/dist/themeFiles/scssModule.d.ts +100 -0
  133. package/dist/themeFiles/scssModule.js +384 -0
  134. package/dist/themeFiles/spec.d.ts +198 -0
  135. package/dist/themeFiles/spec.js +877 -0
  136. package/dist/tokens.css +30 -1
  137. package/dist/typography.js +1 -1
  138. package/dist/utilities.css +435 -0
  139. package/dist/utilities.d.ts +8 -0
  140. package/dist/utilities.js +75 -0
  141. package/package.json +20 -1
  142. package/src/components/AutoLayout/AutoLayout.scss +2 -26
  143. package/src/components/Carousel/Carousel.scss +122 -126
  144. package/src/components/Checkbox/Checkbox.scss +2 -2
  145. package/src/components/Chip/Chip.scss +63 -8
  146. package/src/components/ChoiceGroup/ChoiceGroup.scss +19 -1
  147. package/src/components/Collapsible/Collapsible.scss +3 -0
  148. package/src/components/ColorPicker/ColorPicker.scss +95 -0
  149. package/src/components/Combobox/Combobox.scss +4 -2
  150. package/src/components/Dialog/Dialog.scss +24 -7
  151. package/src/components/EditableField/EditableField.scss +275 -0
  152. package/src/components/Grid/Grid.scss +2 -70
  153. package/src/components/Input/Input.scss +29 -0
  154. package/src/components/Menu/Menu.scss +18 -0
  155. package/src/components/NumberField/NumberField.scss +56 -9
  156. package/src/components/NumberStepper/NumberStepper.scss +13 -0
  157. package/src/components/Radio/Radio.scss +2 -2
  158. package/src/components/ScrollCarousel/ScrollCarousel.scss +142 -0
  159. package/src/components/Select/Select.scss +4 -0
  160. package/src/components/Slider/Slider.scss +51 -6
  161. package/src/components/Stack/Stack.scss +2 -48
  162. package/src/components/Switch/Switch.scss +9 -6
  163. package/src/components/Text/Text.scss +5 -2
  164. package/src/styles/_breakpoint-vars.scss +17 -11
  165. package/src/styles/_controls.scss +2 -2
  166. package/src/styles/_core.scss +1 -0
  167. package/src/styles/_kit.scss +483 -56
  168. package/src/styles/_layout-props.scss +197 -0
  169. package/src/styles/_manifest.scss +53 -23
  170. package/src/styles/_mixins.scss +53 -15
  171. package/src/styles/_slides.scss +112 -0
  172. package/src/styles/_utilities.scss +104 -0
  173. package/src/styles/breakpoints.test.ts +21 -1
  174. package/src/styles/entryPoints.test.ts +25 -2
  175. package/src/styles/index.scss +3 -1
  176. package/src/styles/kit.test.ts +171 -1
  177. package/src/styles/public/_breakpoints.scss +43 -0
  178. package/src/styles/public/_slides.scss +3 -0
  179. package/src/styles/public/_utilities.scss +3 -0
  180. package/src/styles/resets.scss +7 -0
  181. package/src/styles/utilities.test.ts +39 -0
  182. package/themes/bevel.css +187 -187
  183. package/themes/bevel.scss +960 -958
  184. package/themes/extrude.css +42 -42
  185. package/themes/folio.css +200 -200
  186. package/themes/folio.scss +880 -878
  187. package/themes/outline.css +18 -18
  188. package/themes/pebble.css +8 -8
  189. package/themes/ridge.css +188 -188
  190. package/themes/ridge.scss +820 -818
  191. package/themes/soft.css +11 -11
  192. package/themes/ticket.css +180 -180
  193. package/themes/ticket.scss +881 -879
  194. package/themes/tilt.css +25 -25
package/themes/ridge.css CHANGED
@@ -23,57 +23,57 @@
23
23
  }
24
24
  }
25
25
  @layer greese.overrides {
26
- .greese-Accordion {
26
+ .greese-Accordion:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
27
27
  display: grid;
28
28
  gap: var(--greese-space-2);
29
29
  border-block-start: 0;
30
30
  }
31
31
  }
32
32
  @layer greese.overrides {
33
- .greese-AccordionItem {
33
+ .greese-AccordionItem:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
34
34
  border-block-end: 0;
35
35
  }
36
- .greese-AccordionItem > .greese-Collapsible-content {
36
+ .greese-AccordionItem:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) > .greese-Collapsible-content {
37
37
  padding-block-start: var(--greese-space-3);
38
38
  }
39
39
  }
40
40
  @layer greese.overrides {
41
- .greese-Collapsible > .greese-Collapsible-trigger {
41
+ .greese-Collapsible:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) > .greese-Collapsible-trigger {
42
42
  padding-inline: var(--greese-space-4);
43
43
  background-color: var(--greese-color-surface);
44
44
  border: 1px solid var(--greese-collapsible-border, var(--greese-color-border));
45
45
  border-radius: var(--greese-corner-control);
46
46
  }
47
47
  @media (hover: hover) {
48
- .greese-Collapsible > .greese-Collapsible-trigger:hover {
48
+ .greese-Collapsible:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) > .greese-Collapsible-trigger:hover {
49
49
  background-color: color-mix(in oklab, var(--greese-color-fg) 5%, var(--greese-color-surface));
50
50
  }
51
51
  }
52
- .greese-Collapsible[open] > .greese-Collapsible-trigger {
52
+ .greese-Collapsible:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))[open] > .greese-Collapsible-trigger {
53
53
  margin-block-end: var(--greese-space-2);
54
54
  }
55
- .greese-Collapsible > .greese-Collapsible-content {
55
+ .greese-Collapsible:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) > .greese-Collapsible-content {
56
56
  padding-inline: var(--greese-space-4);
57
57
  }
58
58
  }
59
59
  @layer greese.overrides {
60
- .greese-Radio .greese-Radio-input {
60
+ .greese-Radio:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) .greese-Radio-input {
61
61
  rotate: 45deg;
62
62
  scale: 0.7;
63
63
  }
64
64
  }
65
65
  @layer greese.overrides {
66
- .greese-Slider::-webkit-slider-thumb {
66
+ .greese-Slider:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::-webkit-slider-thumb {
67
67
  rotate: 45deg;
68
68
  scale: 0.85;
69
69
  }
70
- .greese-Slider::-moz-range-thumb {
70
+ .greese-Slider:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::-moz-range-thumb {
71
71
  rotate: 45deg;
72
72
  scale: 0.85;
73
73
  }
74
74
  }
75
75
  @layer greese.overrides {
76
- .greese-Switch .greese-Switch-track::before {
76
+ .greese-Switch:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) .greese-Switch-track::before {
77
77
  position: absolute;
78
78
  inset: 0;
79
79
  content: "";
@@ -81,14 +81,14 @@
81
81
  clip-path: polygon(0 50%, 0.625rem 0, calc(100% - 0.625rem) 0, 100% 50%, calc(100% - 0.625rem) 100%, 0.625rem 100%);
82
82
  transition: background-color var(--greese-duration-fast) var(--greese-easing-standard);
83
83
  }
84
- .greese-Switch .greese-Switch-track:has(.greese-Switch-input:checked)::before {
84
+ .greese-Switch:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) .greese-Switch-track:has(.greese-Switch-input:checked)::before {
85
85
  background-color: var(--greese-color-primary);
86
86
  }
87
- .greese-Switch .greese-Switch-input,
88
- .greese-Switch .greese-Switch-input:checked {
87
+ .greese-Switch:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) .greese-Switch-input,
88
+ .greese-Switch:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) .greese-Switch-input:checked {
89
89
  background-color: transparent;
90
90
  }
91
- .greese-Switch .greese-Switch-thumb {
91
+ .greese-Switch:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) .greese-Switch-thumb {
92
92
  rotate: 45deg;
93
93
  scale: 0.8;
94
94
  }
@@ -206,18 +206,18 @@
206
206
  display: none;
207
207
  }
208
208
  }
209
- .greese-AccordionItem > .greese-Collapsible-content,
210
- .greese-SegmentedControl-track,
211
- .greese-Tile {
209
+ .greese-AccordionItem > .greese-Collapsible-content:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
210
+ .greese-SegmentedControl-track:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
211
+ .greese-Tile:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
212
212
  --greese-shape-ring: var(--greese-color-border);
213
213
  position: relative;
214
214
  isolation: isolate;
215
215
  border-color: transparent;
216
216
  clip-path: var(--greese-shape-clip) padding-box;
217
217
  }
218
- .greese-AccordionItem > .greese-Collapsible-content::after,
219
- .greese-SegmentedControl-track::after,
220
- .greese-Tile::after {
218
+ .greese-AccordionItem > .greese-Collapsible-content:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after,
219
+ .greese-SegmentedControl-track:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after,
220
+ .greese-Tile:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
221
221
  position: absolute;
222
222
  inset: 0;
223
223
  inline-size: auto;
@@ -230,33 +230,33 @@
230
230
  clip-path: var(--greese-shape-ring-clip);
231
231
  }
232
232
  @media (prefers-reduced-motion: no-preference) {
233
- .greese-AccordionItem > .greese-Collapsible-content,
234
- .greese-SegmentedControl-track,
235
- .greese-Tile {
233
+ .greese-AccordionItem > .greese-Collapsible-content:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
234
+ .greese-SegmentedControl-track:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
235
+ .greese-Tile:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
236
236
  transition: --greese-shape-z var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
237
237
  }
238
238
  }
239
239
  @media (forced-colors: active) {
240
- .greese-AccordionItem > .greese-Collapsible-content,
241
- .greese-SegmentedControl-track,
242
- .greese-Tile {
240
+ .greese-AccordionItem > .greese-Collapsible-content:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
241
+ .greese-SegmentedControl-track:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
242
+ .greese-Tile:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
243
243
  clip-path: none;
244
244
  border-color: CanvasText;
245
245
  }
246
- .greese-AccordionItem > .greese-Collapsible-content::after,
247
- .greese-SegmentedControl-track::after,
248
- .greese-Tile::after {
246
+ .greese-AccordionItem > .greese-Collapsible-content:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after,
247
+ .greese-SegmentedControl-track:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after,
248
+ .greese-Tile:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
249
249
  display: none;
250
250
  }
251
251
  }
252
- .greese-Alert {
252
+ .greese-Alert:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
253
253
  --greese-shape-ring: color-mix(in oklab, var(--greese-alert-tone) 30%, transparent);
254
254
  position: relative;
255
255
  isolation: isolate;
256
256
  border-color: transparent;
257
257
  clip-path: var(--greese-shape-clip) padding-box;
258
258
  }
259
- .greese-Alert::after {
259
+ .greese-Alert:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
260
260
  position: absolute;
261
261
  inset: 0;
262
262
  inline-size: auto;
@@ -269,37 +269,37 @@
269
269
  clip-path: var(--greese-shape-ring-clip);
270
270
  }
271
271
  @media (prefers-reduced-motion: no-preference) {
272
- .greese-Alert {
272
+ .greese-Alert:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
273
273
  transition: --greese-shape-z var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
274
274
  }
275
275
  }
276
276
  @media (forced-colors: active) {
277
- .greese-Alert {
277
+ .greese-Alert:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
278
278
  clip-path: none;
279
279
  border-color: CanvasText;
280
280
  }
281
- .greese-Alert::after {
281
+ .greese-Alert:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
282
282
  display: none;
283
283
  }
284
284
  }
285
- .greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar),
286
- .greese-Status:not(.greese-Status--pulse) {
285
+ .greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar):where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
286
+ .greese-Status:not(.greese-Status--pulse):where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
287
287
  clip-path: var(--greese-shape-clip) border-box;
288
288
  }
289
289
  @media (forced-colors: active) {
290
- .greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar),
291
- .greese-Status:not(.greese-Status--pulse) {
290
+ .greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar):where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
291
+ .greese-Status:not(.greese-Status--pulse):where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
292
292
  clip-path: none;
293
293
  }
294
294
  }
295
- .greese-Badge {
295
+ .greese-Badge:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
296
296
  --greese-shape-ring: color-mix(in oklab, var(--greese-badge-tone) 35%, transparent);
297
297
  position: relative;
298
298
  isolation: isolate;
299
299
  border-color: transparent;
300
300
  clip-path: var(--greese-shape-clip) padding-box;
301
301
  }
302
- .greese-Badge::after {
302
+ .greese-Badge:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
303
303
  position: absolute;
304
304
  inset: 0;
305
305
  inline-size: auto;
@@ -312,27 +312,27 @@
312
312
  clip-path: var(--greese-shape-ring-clip);
313
313
  }
314
314
  @media (prefers-reduced-motion: no-preference) {
315
- .greese-Badge {
315
+ .greese-Badge:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
316
316
  transition: --greese-shape-z var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
317
317
  }
318
318
  }
319
319
  @media (forced-colors: active) {
320
- .greese-Badge {
320
+ .greese-Badge:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
321
321
  clip-path: none;
322
322
  border-color: CanvasText;
323
323
  }
324
- .greese-Badge::after {
324
+ .greese-Badge:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
325
325
  display: none;
326
326
  }
327
327
  }
328
- .greese-Button {
328
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
329
329
  --greese-shape-ring: var(--greese-button-border, transparent);
330
330
  position: relative;
331
331
  isolation: isolate;
332
332
  border-color: transparent;
333
333
  clip-path: var(--greese-shape-clip) padding-box;
334
334
  }
335
- .greese-Button::after {
335
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
336
336
  position: absolute;
337
337
  inset: 0;
338
338
  inline-size: auto;
@@ -345,27 +345,27 @@
345
345
  clip-path: var(--greese-shape-ring-clip);
346
346
  }
347
347
  @media (prefers-reduced-motion: no-preference) {
348
- .greese-Button {
348
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
349
349
  transition: background-color var(--greese-duration-fast) var(--greese-easing-standard), border-color var(--greese-duration-fast) var(--greese-easing-standard), color var(--greese-duration-fast) var(--greese-easing-standard), --greese-shape-z var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
350
350
  }
351
351
  }
352
352
  @media (forced-colors: active) {
353
- .greese-Button {
353
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
354
354
  clip-path: none;
355
355
  border-color: CanvasText;
356
356
  }
357
- .greese-Button::after {
357
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
358
358
  display: none;
359
359
  }
360
360
  }
361
- .greese-Card {
361
+ .greese-Card:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
362
362
  --greese-shape-ring: transparent;
363
363
  position: relative;
364
364
  isolation: isolate;
365
365
  border-color: transparent;
366
366
  clip-path: var(--greese-shape-clip) padding-box;
367
367
  }
368
- .greese-Card::after {
368
+ .greese-Card:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
369
369
  position: absolute;
370
370
  inset: 0;
371
371
  inline-size: auto;
@@ -377,37 +377,37 @@
377
377
  background: var(--greese-shape-ring);
378
378
  clip-path: var(--greese-shape-ring-clip);
379
379
  }
380
- .greese-Card.greese-Card--outline {
380
+ .greese-Card:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-Card--outline {
381
381
  --greese-shape-ring: var(--greese-color-border);
382
382
  }
383
- .greese-Card.greese-Card--elevated {
383
+ .greese-Card:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-Card--elevated {
384
384
  --greese-shape-ring: var(--greese-color-border-strong);
385
385
  }
386
386
  @media (prefers-reduced-motion: no-preference) {
387
- .greese-Card {
387
+ .greese-Card:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
388
388
  transition: --greese-shape-z var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
389
389
  }
390
- .greese-Card.greese-Card--interactive {
390
+ .greese-Card:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-Card--interactive {
391
391
  transition: --greese-shape-z var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear, box-shadow var(--greese-duration-normal) var(--greese-easing-standard), border-color var(--greese-duration-normal) var(--greese-easing-standard), translate var(--greese-duration-normal) var(--greese-easing-standard);
392
392
  }
393
393
  }
394
394
  @media (forced-colors: active) {
395
- .greese-Card {
395
+ .greese-Card:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
396
396
  clip-path: none;
397
397
  border-color: CanvasText;
398
398
  }
399
- .greese-Card::after {
399
+ .greese-Card:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
400
400
  display: none;
401
401
  }
402
402
  }
403
- .greese-Chip {
403
+ .greese-Chip:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
404
404
  --greese-shape-ring: var(--greese-color-border);
405
405
  position: relative;
406
406
  isolation: isolate;
407
407
  border-color: transparent;
408
408
  clip-path: var(--greese-shape-clip) padding-box;
409
409
  }
410
- .greese-Chip::after {
410
+ .greese-Chip:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
411
411
  position: absolute;
412
412
  inset: 0;
413
413
  inline-size: auto;
@@ -420,27 +420,27 @@
420
420
  clip-path: var(--greese-shape-ring-clip);
421
421
  }
422
422
  @media (prefers-reduced-motion: no-preference) {
423
- .greese-Chip {
423
+ .greese-Chip:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
424
424
  transition: background-color var(--greese-duration-fast) var(--greese-easing-standard), color var(--greese-duration-fast) var(--greese-easing-standard), --greese-shape-z var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
425
425
  }
426
426
  }
427
427
  @media (forced-colors: active) {
428
- .greese-Chip {
428
+ .greese-Chip:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
429
429
  clip-path: none;
430
430
  border-color: CanvasText;
431
431
  }
432
- .greese-Chip::after {
432
+ .greese-Chip:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
433
433
  display: none;
434
434
  }
435
435
  }
436
- .greese-Collapsible-trigger {
436
+ .greese-Collapsible-trigger:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
437
437
  --greese-shape-ring: var(--greese-collapsible-border, var(--greese-color-border));
438
438
  position: relative;
439
439
  isolation: isolate;
440
440
  border-color: transparent;
441
441
  clip-path: var(--greese-shape-clip) padding-box;
442
442
  }
443
- .greese-Collapsible-trigger::after {
443
+ .greese-Collapsible-trigger:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
444
444
  position: absolute;
445
445
  inset: 0;
446
446
  inline-size: auto;
@@ -453,30 +453,30 @@
453
453
  clip-path: var(--greese-shape-ring-clip);
454
454
  }
455
455
  @media (prefers-reduced-motion: no-preference) {
456
- .greese-Collapsible-trigger {
456
+ .greese-Collapsible-trigger:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
457
457
  transition: background-color var(--greese-duration-fast) var(--greese-easing-standard), --greese-shape-z var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
458
458
  }
459
459
  }
460
460
  @media (forced-colors: active) {
461
- .greese-Collapsible-trigger {
461
+ .greese-Collapsible-trigger:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
462
462
  clip-path: none;
463
463
  border-color: CanvasText;
464
464
  }
465
- .greese-Collapsible-trigger::after {
465
+ .greese-Collapsible-trigger:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
466
466
  display: none;
467
467
  }
468
468
  }
469
- .greese-Dialog,
470
- .greese-Menu,
471
- .greese-Popover {
469
+ .greese-Dialog:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
470
+ .greese-Menu:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
471
+ .greese-Popover:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
472
472
  --greese-shape-ring: var(--greese-color-border);
473
473
  isolation: isolate;
474
474
  border-color: transparent;
475
475
  clip-path: var(--greese-shape-clip) padding-box;
476
476
  }
477
- .greese-Dialog::after,
478
- .greese-Menu::after,
479
- .greese-Popover::after {
477
+ .greese-Dialog:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after,
478
+ .greese-Menu:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after,
479
+ .greese-Popover:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
480
480
  position: absolute;
481
481
  inset: 0;
482
482
  inline-size: auto;
@@ -489,30 +489,30 @@
489
489
  clip-path: var(--greese-shape-ring-clip);
490
490
  }
491
491
  @media (forced-colors: active) {
492
- .greese-Dialog,
493
- .greese-Menu,
494
- .greese-Popover {
492
+ .greese-Dialog:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
493
+ .greese-Menu:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
494
+ .greese-Popover:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
495
495
  clip-path: none;
496
496
  border-color: CanvasText;
497
497
  }
498
- .greese-Dialog::after,
499
- .greese-Menu::after,
500
- .greese-Popover::after {
498
+ .greese-Dialog:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after,
499
+ .greese-Menu:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after,
500
+ .greese-Popover:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
501
501
  display: none;
502
502
  }
503
503
  }
504
- .greese-Input,
505
- .greese-Select,
506
- .greese-Textarea {
504
+ .greese-Input:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
505
+ .greese-Select:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
506
+ .greese-Textarea:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
507
507
  --greese-shape-ring: var(--greese-color-border-strong);
508
508
  position: relative;
509
509
  isolation: isolate;
510
510
  border-color: transparent;
511
511
  clip-path: var(--greese-shape-clip) padding-box;
512
512
  }
513
- .greese-Input::after,
514
- .greese-Select::after,
515
- .greese-Textarea::after {
513
+ .greese-Input:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after,
514
+ .greese-Select:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after,
515
+ .greese-Textarea:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
516
516
  position: absolute;
517
517
  inset: 0;
518
518
  inline-size: auto;
@@ -524,44 +524,44 @@
524
524
  background: var(--greese-shape-ring);
525
525
  clip-path: var(--greese-shape-ring-clip);
526
526
  }
527
- .greese-Input:hover,
528
- .greese-Select:hover,
529
- .greese-Textarea:hover {
527
+ .greese-Input:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):hover,
528
+ .greese-Select:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):hover,
529
+ .greese-Textarea:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):hover {
530
530
  --greese-shape-ring: var(--greese-color-fg-muted);
531
531
  }
532
- .greese-Input[aria-invalid=true], .greese-Input[data-invalid],
533
- .greese-Select[aria-invalid=true], .greese-Select[data-invalid],
534
- .greese-Textarea[aria-invalid=true], .greese-Textarea[data-invalid] {
532
+ .greese-Input:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))[aria-invalid=true], .greese-Input:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))[data-invalid],
533
+ .greese-Select:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))[aria-invalid=true], .greese-Select:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))[data-invalid],
534
+ .greese-Textarea:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))[aria-invalid=true], .greese-Textarea:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))[data-invalid] {
535
535
  --greese-shape-ring: var(--greese-color-negative);
536
536
  }
537
537
  @media (prefers-reduced-motion: no-preference) {
538
- .greese-Input,
539
- .greese-Select,
540
- .greese-Textarea {
538
+ .greese-Input:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
539
+ .greese-Select:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
540
+ .greese-Textarea:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
541
541
  transition: box-shadow var(--greese-duration-fast) var(--greese-easing-standard), --greese-shape-z var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
542
542
  }
543
543
  }
544
544
  @media (forced-colors: active) {
545
- .greese-Input,
546
- .greese-Select,
547
- .greese-Textarea {
545
+ .greese-Input:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
546
+ .greese-Select:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
547
+ .greese-Textarea:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
548
548
  clip-path: none;
549
549
  border-color: CanvasText;
550
550
  }
551
- .greese-Input::after,
552
- .greese-Select::after,
553
- .greese-Textarea::after {
551
+ .greese-Input:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after,
552
+ .greese-Select:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after,
553
+ .greese-Textarea:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
554
554
  display: none;
555
555
  }
556
556
  }
557
- .greese-OtpField-slot {
557
+ .greese-OtpField-slot:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
558
558
  --greese-shape-ring: var(--greese-color-border-strong);
559
559
  position: relative;
560
560
  isolation: isolate;
561
561
  border-color: transparent;
562
562
  clip-path: var(--greese-shape-clip) padding-box;
563
563
  }
564
- .greese-OtpField-slot::before {
564
+ .greese-OtpField-slot:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::before {
565
565
  position: absolute;
566
566
  inset: 0;
567
567
  inline-size: auto;
@@ -573,35 +573,35 @@
573
573
  background: var(--greese-shape-ring);
574
574
  clip-path: var(--greese-shape-ring-clip);
575
575
  }
576
- .greese-OtpField[data-invalid] .greese-OtpField-slot {
576
+ .greese-OtpField[data-invalid] .greese-OtpField-slot:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
577
577
  --greese-shape-ring: var(--greese-color-negative);
578
578
  }
579
- .greese-OtpField-slot.greese-OtpField-slot--active {
579
+ .greese-OtpField-slot:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-OtpField-slot--active {
580
580
  --greese-shape-ring: var(--greese-color-focus-ring);
581
581
  --greese-shape-border: 2px;
582
582
  }
583
583
  @media (prefers-reduced-motion: no-preference) {
584
- .greese-OtpField-slot {
584
+ .greese-OtpField-slot:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
585
585
  transition: box-shadow var(--greese-duration-fast) var(--greese-easing-standard), --greese-shape-z var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
586
586
  }
587
587
  }
588
588
  @media (forced-colors: active) {
589
- .greese-OtpField-slot {
589
+ .greese-OtpField-slot:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
590
590
  clip-path: none;
591
591
  border-color: CanvasText;
592
592
  }
593
- .greese-OtpField-slot::before {
593
+ .greese-OtpField-slot:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::before {
594
594
  display: none;
595
595
  }
596
596
  }
597
- .greese-Segment {
597
+ .greese-Segment:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
598
598
  --greese-shape-ring: transparent;
599
599
  position: relative;
600
600
  isolation: isolate;
601
601
  border-color: transparent;
602
602
  clip-path: var(--greese-shape-clip) padding-box;
603
603
  }
604
- .greese-Segment::after {
604
+ .greese-Segment:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
605
605
  position: absolute;
606
606
  inset: 0;
607
607
  inline-size: auto;
@@ -613,31 +613,31 @@
613
613
  background: var(--greese-shape-ring);
614
614
  clip-path: var(--greese-shape-ring-clip);
615
615
  }
616
- .greese-Segment:has(:checked) {
616
+ .greese-Segment:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):has(:checked) {
617
617
  --greese-shape-ring: var(--greese-segment-current-ring, transparent);
618
618
  }
619
619
  @media (prefers-reduced-motion: no-preference) {
620
- .greese-Segment {
620
+ .greese-Segment:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
621
621
  transition: background-color var(--greese-duration-fast) var(--greese-easing-standard), color var(--greese-duration-fast) var(--greese-easing-standard), --greese-shape-z var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
622
622
  }
623
623
  }
624
624
  @media (forced-colors: active) {
625
- .greese-Segment {
625
+ .greese-Segment:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
626
626
  clip-path: none;
627
627
  border-color: CanvasText;
628
628
  }
629
- .greese-Segment::after {
629
+ .greese-Segment:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
630
630
  display: none;
631
631
  }
632
632
  }
633
- .greese-Tab {
633
+ .greese-Tab:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
634
634
  --greese-shape-ring: transparent;
635
635
  position: relative;
636
636
  isolation: isolate;
637
637
  border-color: transparent;
638
638
  clip-path: var(--greese-shape-clip) padding-box;
639
639
  }
640
- .greese-Tab::after {
640
+ .greese-Tab:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
641
641
  position: absolute;
642
642
  inset: 0;
643
643
  inline-size: auto;
@@ -649,32 +649,32 @@
649
649
  background: var(--greese-shape-ring);
650
650
  clip-path: var(--greese-shape-ring-clip);
651
651
  }
652
- .greese-Tab[aria-selected=true] {
652
+ .greese-Tab:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))[aria-selected=true] {
653
653
  --greese-shape-ring: var(--greese-tab-current-ring, transparent);
654
654
  --greese-shape-border: 1.5px;
655
655
  }
656
656
  @media (prefers-reduced-motion: no-preference) {
657
- .greese-Tab {
657
+ .greese-Tab:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
658
658
  transition: color var(--greese-duration-fast) var(--greese-easing-standard), background-color var(--greese-duration-fast) var(--greese-easing-standard), box-shadow var(--greese-duration-fast) var(--greese-easing-standard), --greese-shape-z var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard), --greese-shape-bleed 0s linear;
659
659
  }
660
660
  }
661
661
  @media (forced-colors: active) {
662
- .greese-Tab {
662
+ .greese-Tab:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
663
663
  clip-path: none;
664
664
  border-color: CanvasText;
665
665
  }
666
- .greese-Tab::after {
666
+ .greese-Tab:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
667
667
  display: none;
668
668
  }
669
669
  }
670
- .greese-Toast {
670
+ .greese-Toast:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
671
671
  --greese-shape-ring: color-mix(in oklab, var(--greese-toast-edge) 45%, var(--greese-color-border-strong));
672
672
  position: relative;
673
673
  isolation: isolate;
674
674
  border-color: transparent;
675
675
  clip-path: var(--greese-shape-clip) padding-box;
676
676
  }
677
- .greese-Toast::after {
677
+ .greese-Toast:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
678
678
  position: absolute;
679
679
  inset: 0;
680
680
  inline-size: auto;
@@ -686,28 +686,28 @@
686
686
  background: var(--greese-shape-ring);
687
687
  clip-path: var(--greese-shape-ring-clip);
688
688
  }
689
- .greese-Toast {
689
+ .greese-Toast:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
690
690
  box-shadow: inset 3px 0 0 var(--greese-toast-edge);
691
691
  }
692
- .greese-Toast:dir(rtl) {
692
+ .greese-Toast:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):dir(rtl) {
693
693
  box-shadow: inset -3px 0 0 var(--greese-toast-edge);
694
694
  }
695
695
  @media (forced-colors: active) {
696
- .greese-Toast {
696
+ .greese-Toast:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
697
697
  clip-path: none;
698
698
  border-color: CanvasText;
699
699
  }
700
- .greese-Toast::after {
700
+ .greese-Toast:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
701
701
  display: none;
702
702
  }
703
703
  }
704
- .greese-Tooltip {
704
+ .greese-Tooltip:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
705
705
  --greese-shape-ring: var(--greese-tooltip-border, transparent);
706
706
  isolation: isolate;
707
707
  border-color: transparent;
708
708
  clip-path: var(--greese-shape-clip) padding-box;
709
709
  }
710
- .greese-Tooltip::after {
710
+ .greese-Tooltip:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
711
711
  position: absolute;
712
712
  inset: 0;
713
713
  inline-size: auto;
@@ -720,52 +720,52 @@
720
720
  clip-path: var(--greese-shape-ring-clip);
721
721
  }
722
722
  @media (forced-colors: active) {
723
- .greese-Tooltip {
723
+ .greese-Tooltip:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
724
724
  clip-path: none;
725
725
  border-color: CanvasText;
726
726
  }
727
- .greese-Tooltip::after {
727
+ .greese-Tooltip:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::after {
728
728
  display: none;
729
729
  }
730
730
  }
731
731
  .greese-shape-ridge-control,
732
- .greese-Button {
732
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
733
733
  --greese-shape-z: 4px;
734
734
  --greese-shape-border: 1px;
735
735
  --greese-shape-clip: polygon(calc(100% - var(--greese-shape-z) + 0.82 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + 1.02 * var(--greese-shape-bleed)) 16.667%, calc(100% - var(--greese-shape-z) + 1.02 * var(--greese-shape-bleed)) 33.333%, calc(100% + 1.02 * var(--greese-shape-bleed)) 50%, calc(100% - var(--greese-shape-z) + 1.02 * var(--greese-shape-bleed)) 66.667%, calc(100% + 1.02 * var(--greese-shape-bleed)) 83.333%, calc(100% - var(--greese-shape-z) + 0.82 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-z) - 0.82 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 1.02 * var(--greese-shape-bleed)) 83.333%, calc(var(--greese-shape-z) - 1.02 * var(--greese-shape-bleed)) 66.667%, calc(-1 * 1.02 * var(--greese-shape-bleed)) 50%, calc(var(--greese-shape-z) - 1.02 * var(--greese-shape-bleed)) 33.333%, calc(-1 * 1.02 * var(--greese-shape-bleed)) 16.667%, calc(var(--greese-shape-z) - 0.82 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
736
736
  --greese-shape-ring-clip: polygon(evenodd, calc(100% - var(--greese-shape-z)) 0, 100% 16.667%, calc(100% - var(--greese-shape-z)) 33.333%, 100% 50%, calc(100% - var(--greese-shape-z)) 66.667%, 100% 83.333%, calc(100% - var(--greese-shape-z)) 100%, calc(var(--greese-shape-z)) 100%, 0 83.333%, calc(var(--greese-shape-z)) 66.667%, 0 50%, calc(var(--greese-shape-z)) 33.333%, 0 16.667%, calc(var(--greese-shape-z)) 0, calc(100% - var(--greese-shape-z)) 0, calc(100% - var(--greese-shape-z) - 0.82 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-z) + 0.82 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(1.02 * var(--greese-shape-border)) 16.667%, calc(var(--greese-shape-z) + 1.02 * var(--greese-shape-border)) 33.333%, calc(1.02 * var(--greese-shape-border)) 50%, calc(var(--greese-shape-z) + 1.02 * var(--greese-shape-border)) 66.667%, calc(1.02 * var(--greese-shape-border)) 83.333%, calc(var(--greese-shape-z) + 0.82 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-z) - 0.82 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - 1.02 * var(--greese-shape-border)) 83.333%, calc(100% - var(--greese-shape-z) - 1.02 * var(--greese-shape-border)) 66.667%, calc(100% - 1.02 * var(--greese-shape-border)) 50%, calc(100% - var(--greese-shape-z) - 1.02 * var(--greese-shape-border)) 33.333%, calc(100% - 1.02 * var(--greese-shape-border)) 16.667%, calc(100% - var(--greese-shape-z) - 0.82 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
737
737
  }
738
- .greese-Button.greese-Button--size-sm {
738
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-Button--size-sm {
739
739
  --greese-shape-z: 2.8px;
740
740
  }
741
- .greese-Button.greese-Button--size-xs {
741
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-Button--size-xs {
742
742
  --greese-shape-z: 2px;
743
743
  }
744
- .greese-Button.greese-IconButton {
744
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-IconButton {
745
745
  --greese-shape-z: 2px;
746
746
  }
747
747
  @media (hover: hover) {
748
748
  .greese-shape-ridge-control:hover,
749
- .greese-Button:hover {
749
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):hover {
750
750
  --greese-shape-z: 6px;
751
751
  }
752
- .greese-Button.greese-Button--size-sm:hover {
752
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-Button--size-sm:hover {
753
753
  --greese-shape-z: 4.2px;
754
754
  }
755
- .greese-Button.greese-Button--size-xs:hover,
756
- .greese-Button.greese-IconButton:hover {
755
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-Button--size-xs:hover,
756
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-IconButton:hover {
757
757
  --greese-shape-z: 3px;
758
758
  }
759
759
  }
760
760
  .greese-shape-ridge-control:active,
761
- .greese-Button:active {
761
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):active {
762
762
  --greese-shape-z: 2px;
763
763
  }
764
- .greese-Button.greese-Button--size-sm:active {
764
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-Button--size-sm:active {
765
765
  --greese-shape-z: 1.4px;
766
766
  }
767
- .greese-Button.greese-Button--size-xs:active,
768
- .greese-Button.greese-IconButton:active {
767
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-Button--size-xs:active,
768
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-IconButton:active {
769
769
  --greese-shape-z: 1px;
770
770
  }
771
771
  .greese-shape-ridge-control:focus-visible {
@@ -773,32 +773,32 @@
773
773
  --greese-shape-bleed: 8px;
774
774
  transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
775
775
  }
776
- .greese-Button:focus-visible {
776
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):focus-visible {
777
777
  --greese-shape-z: 0px;
778
778
  --greese-shape-bleed: 8px;
779
779
  transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, var(--greese-duration-normal);
780
780
  }
781
781
  .greese-shape-ridge-field,
782
- .greese-Input,
783
- .greese-OtpField-slot,
784
- .greese-Select,
785
- .greese-Textarea {
782
+ .greese-Input:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
783
+ .greese-OtpField-slot:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
784
+ .greese-Select:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
785
+ .greese-Textarea:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
786
786
  --greese-shape-z: 3px;
787
787
  --greese-shape-border: 1px;
788
788
  --greese-shape-clip: polygon(calc(var(--greese-shape-z) - 0.876 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-z) - 0.876 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 1.009 * var(--greese-shape-bleed)) 87.5%, calc(var(--greese-shape-z) - 1.009 * var(--greese-shape-bleed)) 75%, calc(-1 * 1.009 * var(--greese-shape-bleed)) 62.5%, calc(var(--greese-shape-z) - 1.009 * var(--greese-shape-bleed)) 50%, calc(-1 * 1.009 * var(--greese-shape-bleed)) 37.5%, calc(var(--greese-shape-z) - 1.009 * var(--greese-shape-bleed)) 25%, calc(-1 * 1.009 * var(--greese-shape-bleed)) 12.5%);
789
789
  --greese-shape-ring-clip: polygon(evenodd, calc(var(--greese-shape-z)) 0, 100% 0, 100% 100%, calc(var(--greese-shape-z)) 100%, 0 87.5%, calc(var(--greese-shape-z)) 75%, 0 62.5%, calc(var(--greese-shape-z)) 50%, 0 37.5%, calc(var(--greese-shape-z)) 25%, 0 12.5%, calc(var(--greese-shape-z)) 0, calc(var(--greese-shape-z) + 0.876 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(1.009 * var(--greese-shape-border)) 12.5%, calc(var(--greese-shape-z) + 1.009 * var(--greese-shape-border)) 25%, calc(1.009 * var(--greese-shape-border)) 37.5%, calc(var(--greese-shape-z) + 1.009 * var(--greese-shape-border)) 50%, calc(1.009 * var(--greese-shape-border)) 62.5%, calc(var(--greese-shape-z) + 1.009 * var(--greese-shape-border)) 75%, calc(1.009 * var(--greese-shape-border)) 87.5%, calc(var(--greese-shape-z) + 0.876 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-z) + 0.876 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
790
790
  }
791
791
  .greese-shape-ridge-field:dir(rtl),
792
- .greese-Input:dir(rtl),
793
- .greese-OtpField-slot:dir(rtl),
794
- .greese-Select:dir(rtl),
795
- .greese-Textarea:dir(rtl) {
792
+ .greese-Input:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):dir(rtl),
793
+ .greese-OtpField-slot:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):dir(rtl),
794
+ .greese-Select:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):dir(rtl),
795
+ .greese-Textarea:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):dir(rtl) {
796
796
  --greese-shape-clip: polygon(calc(100% + 1.009 * var(--greese-shape-bleed)) 12.5%, calc(100% - var(--greese-shape-z) + 1.009 * var(--greese-shape-bleed)) 25%, calc(100% + 1.009 * var(--greese-shape-bleed)) 37.5%, calc(100% - var(--greese-shape-z) + 1.009 * var(--greese-shape-bleed)) 50%, calc(100% + 1.009 * var(--greese-shape-bleed)) 62.5%, calc(100% - var(--greese-shape-z) + 1.009 * var(--greese-shape-bleed)) 75%, calc(100% + 1.009 * var(--greese-shape-bleed)) 87.5%, calc(100% - var(--greese-shape-z) + 0.876 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-z) + 0.876 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
797
797
  --greese-shape-ring-clip: polygon(evenodd, 100% 12.5%, calc(100% - var(--greese-shape-z)) 25%, 100% 37.5%, calc(100% - var(--greese-shape-z)) 50%, 100% 62.5%, calc(100% - var(--greese-shape-z)) 75%, 100% 87.5%, calc(100% - var(--greese-shape-z)) 100%, 0 100%, 0 0, calc(100% - var(--greese-shape-z)) 0, 100% 12.5%, calc(100% - 1.009 * var(--greese-shape-border)) 12.5%, calc(100% - var(--greese-shape-z) - 0.876 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-z) - 0.876 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - 1.009 * var(--greese-shape-border)) 87.5%, calc(100% - var(--greese-shape-z) - 1.009 * var(--greese-shape-border)) 75%, calc(100% - 1.009 * var(--greese-shape-border)) 62.5%, calc(100% - var(--greese-shape-z) - 1.009 * var(--greese-shape-border)) 50%, calc(100% - 1.009 * var(--greese-shape-border)) 37.5%, calc(100% - var(--greese-shape-z) - 1.009 * var(--greese-shape-border)) 25%, calc(100% - 1.009 * var(--greese-shape-border)) 12.5%);
798
798
  }
799
- .greese-Input:has(:focus-visible),
800
- .greese-Select:has(:focus-visible),
801
- .greese-Textarea:has(:focus-visible) {
799
+ .greese-Input:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):has(:focus-visible),
800
+ .greese-Select:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):has(:focus-visible),
801
+ .greese-Textarea:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):has(:focus-visible) {
802
802
  --greese-shape-border: 3px;
803
803
  --greese-shape-ring: var(--greese-color-focus-ring);
804
804
  outline-color: transparent;
@@ -809,13 +809,13 @@
809
809
  transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
810
810
  }
811
811
  .greese-shape-ridge-container,
812
- .greese-AccordionItem > .greese-Collapsible-content,
813
- .greese-Card,
814
- .greese-Dialog,
815
- .greese-Menu,
816
- .greese-Popover,
817
- .greese-Tile,
818
- .greese-Toast {
812
+ .greese-AccordionItem > .greese-Collapsible-content:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
813
+ .greese-Card:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
814
+ .greese-Dialog:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
815
+ .greese-Menu:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
816
+ .greese-Popover:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
817
+ .greese-Tile:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
818
+ .greese-Toast:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
819
819
  --greese-shape-z: 6px;
820
820
  --greese-shape-border: 1px;
821
821
  --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% - var(--greese-shape-z) + 0.445 * var(--greese-shape-bleed)), 96.875% calc(100% + 1.345 * var(--greese-shape-bleed)), 93.75% calc(100% - var(--greese-shape-z) + 1.345 * var(--greese-shape-bleed)), 90.625% calc(100% + 1.345 * var(--greese-shape-bleed)), 87.5% calc(100% - var(--greese-shape-z) + 1.345 * var(--greese-shape-bleed)), 84.375% calc(100% + 1.345 * var(--greese-shape-bleed)), 81.25% calc(100% - var(--greese-shape-z) + 1.345 * var(--greese-shape-bleed)), 78.125% calc(100% + 1.345 * var(--greese-shape-bleed)), 75% calc(100% - var(--greese-shape-z) + 1.345 * var(--greese-shape-bleed)), 71.875% calc(100% + 1.345 * var(--greese-shape-bleed)), 68.75% calc(100% - var(--greese-shape-z) + 1.345 * var(--greese-shape-bleed)), 65.625% calc(100% + 1.345 * var(--greese-shape-bleed)), 62.5% calc(100% - var(--greese-shape-z) + 1.345 * var(--greese-shape-bleed)), 59.375% calc(100% + 1.345 * var(--greese-shape-bleed)), 56.25% calc(100% - var(--greese-shape-z) + 1.345 * var(--greese-shape-bleed)), 53.125% calc(100% + 1.345 * var(--greese-shape-bleed)), 50% calc(100% - var(--greese-shape-z) + 1.345 * var(--greese-shape-bleed)), 46.875% calc(100% + 1.345 * var(--greese-shape-bleed)), 43.75% calc(100% - var(--greese-shape-z) + 1.345 * var(--greese-shape-bleed)), 40.625% calc(100% + 1.345 * var(--greese-shape-bleed)), 37.5% calc(100% - var(--greese-shape-z) + 1.345 * var(--greese-shape-bleed)), 34.375% calc(100% + 1.345 * var(--greese-shape-bleed)), 31.25% calc(100% - var(--greese-shape-z) + 1.345 * var(--greese-shape-bleed)), 28.125% calc(100% + 1.345 * var(--greese-shape-bleed)), 25% calc(100% - var(--greese-shape-z) + 1.345 * var(--greese-shape-bleed)), 21.875% calc(100% + 1.345 * var(--greese-shape-bleed)), 18.75% calc(100% - var(--greese-shape-z) + 1.345 * var(--greese-shape-bleed)), 15.625% calc(100% + 1.345 * var(--greese-shape-bleed)), 12.5% calc(100% - var(--greese-shape-z) + 1.345 * var(--greese-shape-bleed)), 9.375% calc(100% + 1.345 * var(--greese-shape-bleed)), 6.25% calc(100% - var(--greese-shape-z) + 1.345 * var(--greese-shape-bleed)), 3.125% calc(100% + 1.345 * var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% - var(--greese-shape-z) + 0.445 * var(--greese-shape-bleed)));
@@ -823,86 +823,86 @@
823
823
  }
824
824
  @media (hover: hover) {
825
825
  .greese-shape-ridge-container:hover,
826
- .greese-Card.greese-Card--interactive:hover {
826
+ .greese-Card:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-Card--interactive:hover {
827
827
  --greese-shape-z: 9px;
828
828
  }
829
829
  }
830
830
  .greese-shape-ridge-container:focus-visible,
831
- .greese-AccordionItem > .greese-Collapsible-content:focus-visible,
832
- .greese-Card:focus-visible,
833
- .greese-Tile:focus-visible {
831
+ .greese-AccordionItem > .greese-Collapsible-content:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):focus-visible,
832
+ .greese-Card:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):focus-visible,
833
+ .greese-Tile:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):focus-visible {
834
834
  --greese-shape-z: 0px;
835
835
  --greese-shape-bleed: 8px;
836
836
  transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
837
837
  }
838
- .greese-Dialog:focus-visible,
839
- .greese-Menu:focus-visible,
840
- .greese-Popover:focus-visible,
841
- .greese-Toast:focus-visible {
838
+ .greese-Dialog:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):focus-visible,
839
+ .greese-Menu:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):focus-visible,
840
+ .greese-Popover:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):focus-visible,
841
+ .greese-Toast:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):focus-visible {
842
842
  --greese-shape-z: 0px;
843
843
  --greese-shape-bleed: 8px;
844
844
  }
845
845
  .greese-shape-ridge-small,
846
- .greese-Alert,
847
- .greese-Collapsible-trigger,
848
- .greese-Tooltip {
846
+ .greese-Alert:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
847
+ .greese-Collapsible-trigger:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
848
+ .greese-Tooltip:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
849
849
  --greese-shape-z: 4px;
850
850
  --greese-shape-border: 1px;
851
851
  --greese-shape-clip: polygon(calc(var(--greese-shape-z) - 0.802 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-z) - 0.802 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 1.024 * var(--greese-shape-bleed)) 90%, calc(var(--greese-shape-z) - 1.024 * var(--greese-shape-bleed)) 80%, calc(-1 * 1.024 * var(--greese-shape-bleed)) 70%, calc(var(--greese-shape-z) - 1.024 * var(--greese-shape-bleed)) 60%, calc(-1 * 1.024 * var(--greese-shape-bleed)) 50%, calc(var(--greese-shape-z) - 1.024 * var(--greese-shape-bleed)) 40%, calc(-1 * 1.024 * var(--greese-shape-bleed)) 30%, calc(var(--greese-shape-z) - 1.024 * var(--greese-shape-bleed)) 20%, calc(-1 * 1.024 * var(--greese-shape-bleed)) 10%);
852
852
  --greese-shape-ring-clip: polygon(evenodd, calc(var(--greese-shape-z)) 0, 100% 0, 100% 100%, calc(var(--greese-shape-z)) 100%, 0 90%, calc(var(--greese-shape-z)) 80%, 0 70%, calc(var(--greese-shape-z)) 60%, 0 50%, calc(var(--greese-shape-z)) 40%, 0 30%, calc(var(--greese-shape-z)) 20%, 0 10%, calc(var(--greese-shape-z)) 0, calc(var(--greese-shape-z) + 0.802 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(1.024 * var(--greese-shape-border)) 10%, calc(var(--greese-shape-z) + 1.024 * var(--greese-shape-border)) 20%, calc(1.024 * var(--greese-shape-border)) 30%, calc(var(--greese-shape-z) + 1.024 * var(--greese-shape-border)) 40%, calc(1.024 * var(--greese-shape-border)) 50%, calc(var(--greese-shape-z) + 1.024 * var(--greese-shape-border)) 60%, calc(1.024 * var(--greese-shape-border)) 70%, calc(var(--greese-shape-z) + 1.024 * var(--greese-shape-border)) 80%, calc(1.024 * var(--greese-shape-border)) 90%, calc(var(--greese-shape-z) + 0.802 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-z) + 0.802 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
853
853
  }
854
854
  .greese-shape-ridge-small:dir(rtl),
855
- .greese-Alert:dir(rtl),
856
- .greese-Collapsible-trigger:dir(rtl),
857
- .greese-Tooltip:dir(rtl) {
855
+ .greese-Alert:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):dir(rtl),
856
+ .greese-Collapsible-trigger:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):dir(rtl),
857
+ .greese-Tooltip:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):dir(rtl) {
858
858
  --greese-shape-clip: polygon(calc(100% + 1.024 * var(--greese-shape-bleed)) 10%, calc(100% - var(--greese-shape-z) + 1.024 * var(--greese-shape-bleed)) 20%, calc(100% + 1.024 * var(--greese-shape-bleed)) 30%, calc(100% - var(--greese-shape-z) + 1.024 * var(--greese-shape-bleed)) 40%, calc(100% + 1.024 * var(--greese-shape-bleed)) 50%, calc(100% - var(--greese-shape-z) + 1.024 * var(--greese-shape-bleed)) 60%, calc(100% + 1.024 * var(--greese-shape-bleed)) 70%, calc(100% - var(--greese-shape-z) + 1.024 * var(--greese-shape-bleed)) 80%, calc(100% + 1.024 * var(--greese-shape-bleed)) 90%, calc(100% - var(--greese-shape-z) + 0.802 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-z) + 0.802 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
859
859
  --greese-shape-ring-clip: polygon(evenodd, 100% 10%, calc(100% - var(--greese-shape-z)) 20%, 100% 30%, calc(100% - var(--greese-shape-z)) 40%, 100% 50%, calc(100% - var(--greese-shape-z)) 60%, 100% 70%, calc(100% - var(--greese-shape-z)) 80%, 100% 90%, calc(100% - var(--greese-shape-z)) 100%, 0 100%, 0 0, calc(100% - var(--greese-shape-z)) 0, 100% 10%, calc(100% - 1.024 * var(--greese-shape-border)) 10%, calc(100% - var(--greese-shape-z) - 0.802 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-z) - 0.802 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - 1.024 * var(--greese-shape-border)) 90%, calc(100% - var(--greese-shape-z) - 1.024 * var(--greese-shape-border)) 80%, calc(100% - 1.024 * var(--greese-shape-border)) 70%, calc(100% - var(--greese-shape-z) - 1.024 * var(--greese-shape-border)) 60%, calc(100% - 1.024 * var(--greese-shape-border)) 50%, calc(100% - var(--greese-shape-z) - 1.024 * var(--greese-shape-border)) 40%, calc(100% - 1.024 * var(--greese-shape-border)) 30%, calc(100% - var(--greese-shape-z) - 1.024 * var(--greese-shape-border)) 20%, calc(100% - 1.024 * var(--greese-shape-border)) 10%);
860
860
  }
861
861
  .greese-shape-ridge-small:focus-visible,
862
- .greese-Alert:focus-visible {
862
+ .greese-Alert:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):focus-visible {
863
863
  --greese-shape-z: 0px;
864
864
  --greese-shape-bleed: 8px;
865
865
  transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
866
866
  }
867
- .greese-Collapsible-trigger:focus-visible {
867
+ .greese-Collapsible-trigger:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):focus-visible {
868
868
  --greese-shape-z: 0px;
869
869
  --greese-shape-bleed: 8px;
870
870
  transition-delay: 0s, 0s, 0s, 0s, var(--greese-duration-normal);
871
871
  }
872
- .greese-Tooltip:focus-visible {
872
+ .greese-Tooltip:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):focus-visible {
873
873
  --greese-shape-z: 0px;
874
874
  --greese-shape-bleed: 8px;
875
875
  }
876
876
  .greese-shape-ridge-indicator,
877
- .greese-Badge,
878
- .greese-Chip,
879
- .greese-Segment,
880
- .greese-SegmentedControl-track {
877
+ .greese-Badge:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
878
+ .greese-Chip:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
879
+ .greese-Segment:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
880
+ .greese-SegmentedControl-track:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
881
881
  --greese-shape-z: 3px;
882
882
  --greese-shape-border: 1px;
883
883
  --greese-shape-clip: polygon(calc(100% - var(--greese-shape-z) + 0.936 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + 1.002 * var(--greese-shape-bleed)) 25%, calc(100% - var(--greese-shape-z) + 1.002 * var(--greese-shape-bleed)) 50%, calc(100% + 1.002 * var(--greese-shape-bleed)) 75%, calc(100% - var(--greese-shape-z) + 0.936 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-z) - 0.936 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 1.002 * var(--greese-shape-bleed)) 75%, calc(var(--greese-shape-z) - 1.002 * var(--greese-shape-bleed)) 50%, calc(-1 * 1.002 * var(--greese-shape-bleed)) 25%, calc(var(--greese-shape-z) - 0.936 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
884
884
  --greese-shape-ring-clip: polygon(evenodd, calc(100% - var(--greese-shape-z)) 0, 100% 25%, calc(100% - var(--greese-shape-z)) 50%, 100% 75%, calc(100% - var(--greese-shape-z)) 100%, calc(var(--greese-shape-z)) 100%, 0 75%, calc(var(--greese-shape-z)) 50%, 0 25%, calc(var(--greese-shape-z)) 0, calc(100% - var(--greese-shape-z)) 0, calc(100% - var(--greese-shape-z) - 0.936 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-z) + 0.936 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(1.002 * var(--greese-shape-border)) 25%, calc(var(--greese-shape-z) + 1.002 * var(--greese-shape-border)) 50%, calc(1.002 * var(--greese-shape-border)) 75%, calc(var(--greese-shape-z) + 0.936 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-z) - 0.936 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - 1.002 * var(--greese-shape-border)) 75%, calc(100% - var(--greese-shape-z) - 1.002 * var(--greese-shape-border)) 50%, calc(100% - 1.002 * var(--greese-shape-border)) 25%, calc(100% - var(--greese-shape-z) - 0.936 * var(--greese-shape-border)) calc(var(--greese-shape-border)));
885
885
  }
886
- .greese-Segment:has(:focus-visible) {
886
+ .greese-Segment:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):has(:focus-visible) {
887
887
  --greese-shape-border: 3px;
888
888
  --greese-shape-ring: var(--greese-color-focus-ring);
889
889
  outline-color: transparent;
890
890
  }
891
891
  .greese-shape-ridge-indicator:focus-visible,
892
- .greese-Badge:focus-visible,
893
- .greese-SegmentedControl-track:focus-visible {
892
+ .greese-Badge:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):focus-visible,
893
+ .greese-SegmentedControl-track:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):focus-visible {
894
894
  --greese-shape-z: 0px;
895
895
  --greese-shape-bleed: 8px;
896
896
  transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
897
897
  }
898
- .greese-Chip:focus-visible {
898
+ .greese-Chip:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):focus-visible {
899
899
  --greese-shape-z: 0px;
900
900
  --greese-shape-bleed: 8px;
901
901
  transition-delay: 0s, 0s, 0s, 0s, 0s, var(--greese-duration-normal);
902
902
  }
903
903
  .greese-shape-ridge-mark,
904
- .greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar),
905
- .greese-Status:not(.greese-Status--pulse) {
904
+ .greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar):where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)),
905
+ .greese-Status:not(.greese-Status--pulse):where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
906
906
  --greese-shape-border: 1px;
907
907
  --greese-shape-clip: polygon(50% calc(-1 * 1.147 * var(--greese-shape-bleed)), calc(100% + 2.04 * var(--greese-shape-bleed)) 50%, 50% calc(100% + 1.147 * var(--greese-shape-bleed)), calc(-1 * 2.04 * var(--greese-shape-bleed)) 50%);
908
908
  --greese-shape-ring-clip: polygon(evenodd, 50% 0, 100% 50%, 50% 100%, 0 50%, 50% 0, 50% calc(1.147 * var(--greese-shape-border)), calc(2.04 * var(--greese-shape-border)) 50%, 50% calc(100% - 1.147 * var(--greese-shape-border)), calc(100% - 2.04 * var(--greese-shape-border)) 50%, 50% calc(1.147 * var(--greese-shape-border)));
@@ -913,7 +913,7 @@
913
913
  outline-color: transparent;
914
914
  }
915
915
  .greese-shape-ridge-tab,
916
- .greese-Tab {
916
+ .greese-Tab:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
917
917
  --greese-shape-z: 3px;
918
918
  --greese-shape-border: 1px;
919
919
  --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-z) - 0.894 * var(--greese-shape-bleed)), 8.333% calc(-1 * 1.006 * var(--greese-shape-bleed)), 16.667% calc(var(--greese-shape-z) - 1.006 * var(--greese-shape-bleed)), 25% calc(-1 * 1.006 * var(--greese-shape-bleed)), 33.333% calc(var(--greese-shape-z) - 1.006 * var(--greese-shape-bleed)), 41.667% calc(-1 * 1.006 * var(--greese-shape-bleed)), 50% calc(var(--greese-shape-z) - 1.006 * var(--greese-shape-bleed)), 58.333% calc(-1 * 1.006 * var(--greese-shape-bleed)), 66.667% calc(var(--greese-shape-z) - 1.006 * var(--greese-shape-bleed)), 75% calc(-1 * 1.006 * var(--greese-shape-bleed)), 83.333% calc(var(--greese-shape-z) - 1.006 * var(--greese-shape-bleed)), 91.667% calc(-1 * 1.006 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-z) - 0.894 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)));