@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/extrude.css CHANGED
@@ -23,197 +23,197 @@
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
36
  }
37
37
  @layer greese.overrides {
38
- .greese-Alert {
38
+ .greese-Alert:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
39
39
  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.25rem 0 0 color-mix(in oklab, var(--greese-alert-tone) 40%, transparent);
40
40
  padding-block-end: calc(var(--greese-space-3) + 0.25rem);
41
41
  }
42
42
  }
43
43
  @layer greese.overrides {
44
- .greese-Avatar {
44
+ .greese-Avatar:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
45
45
  border-radius: var(--greese-radius-md);
46
46
  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.1875rem 0 0 color-mix(in oklab, black 24%, transparent);
47
47
  }
48
48
  }
49
49
  @layer greese.overrides {
50
- .greese-Badge {
50
+ .greese-Badge:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
51
51
  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.125rem 0 0 color-mix(in oklab, black 24%, transparent);
52
52
  }
53
53
  }
54
54
  @layer greese.overrides {
55
- .greese-Button:not(.greese-Button--ghost) {
55
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):not(.greese-Button--ghost) {
56
56
  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.25rem 0 0 color-mix(in oklab, black 24%, transparent);
57
57
  }
58
- .greese-Button:not(.greese-Button--ghost):active:not(:disabled, [aria-disabled=true]) {
58
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):not(.greese-Button--ghost):active:not(:disabled, [aria-disabled=true]) {
59
59
  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.0625rem 0 0 color-mix(in oklab, black 24%, transparent);
60
60
  }
61
61
  @supports (color: color(from red srgb-linear calc(r * 1) g b/calc(alpha * 1))) {
62
- .greese-Button:not(.greese-Button--ghost) {
62
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):not(.greese-Button--ghost) {
63
63
  --greese-button-edge: color(from var(--greese-button-bg) srgb-linear calc(clamp(0, (alpha - 0.98) * 100, 1) * (clamp(0, (((0.2126 * r + 0.7152 * g + 0.0722 * b) + 0.05) / 3.1 - 0.05) * 1000000, 1) * r * max(0, (((0.2126 * r + 0.7152 * g + 0.0722 * b) + 0.05) / 3.1 - 0.05)) / max(0.0001, (0.2126 * r + 0.7152 * g + 0.0722 * b)) + (1 - clamp(0, (((0.2126 * r + 0.7152 * g + 0.0722 * b) + 0.05) / 3.1 - 0.05) * 1000000, 1)) * (r + (1 - r) * (min(1, 3.1 * ((0.2126 * r + 0.7152 * g + 0.0722 * b) + 0.05) - 0.05) - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.0001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b))))) calc(clamp(0, (alpha - 0.98) * 100, 1) * (clamp(0, (((0.2126 * r + 0.7152 * g + 0.0722 * b) + 0.05) / 3.1 - 0.05) * 1000000, 1) * g * max(0, (((0.2126 * r + 0.7152 * g + 0.0722 * b) + 0.05) / 3.1 - 0.05)) / max(0.0001, (0.2126 * r + 0.7152 * g + 0.0722 * b)) + (1 - clamp(0, (((0.2126 * r + 0.7152 * g + 0.0722 * b) + 0.05) / 3.1 - 0.05) * 1000000, 1)) * (g + (1 - g) * (min(1, 3.1 * ((0.2126 * r + 0.7152 * g + 0.0722 * b) + 0.05) - 0.05) - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.0001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b))))) calc(clamp(0, (alpha - 0.98) * 100, 1) * (clamp(0, (((0.2126 * r + 0.7152 * g + 0.0722 * b) + 0.05) / 3.1 - 0.05) * 1000000, 1) * b * max(0, (((0.2126 * r + 0.7152 * g + 0.0722 * b) + 0.05) / 3.1 - 0.05)) / max(0.0001, (0.2126 * r + 0.7152 * g + 0.0722 * b)) + (1 - clamp(0, (((0.2126 * r + 0.7152 * g + 0.0722 * b) + 0.05) / 3.1 - 0.05) * 1000000, 1)) * (b + (1 - b) * (min(1, 3.1 * ((0.2126 * r + 0.7152 * g + 0.0722 * b) + 0.05) - 0.05) - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.0001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b))))) / calc(0.24 + clamp(0, (alpha - 0.98) * 100, 1) * 0.76));
64
64
  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.25rem 0 0 var(--greese-button-edge);
65
65
  }
66
- .greese-Button:not(.greese-Button--ghost):active:not(:disabled, [aria-disabled=true]) {
66
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):not(.greese-Button--ghost):active:not(:disabled, [aria-disabled=true]) {
67
67
  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.0625rem 0 0 var(--greese-button-edge);
68
68
  }
69
69
  }
70
70
  @media (prefers-reduced-motion: no-preference) {
71
- .greese-Button {
71
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
72
72
  transition: transform var(--greese-duration-fast) var(--greese-easing-standard), box-shadow var(--greese-duration-fast) var(--greese-easing-standard), 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);
73
73
  }
74
74
  }
75
- .greese-Button:active:not(:disabled, [aria-disabled=true]) {
75
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):active:not(:disabled, [aria-disabled=true]) {
76
76
  transform: translateY(0.1875rem);
77
77
  }
78
78
  }
79
79
  @layer greese.overrides {
80
- .greese-Card {
80
+ .greese-Card:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
81
81
  box-shadow: inset 0 0 0 1px var(--greese-color-border), inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.375rem 0 0 color-mix(in oklab, black 24%, transparent);
82
82
  }
83
83
  }
84
84
  @layer greese.overrides {
85
- .greese-Chip {
85
+ .greese-Chip:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
86
86
  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.1875rem 0 0 color-mix(in oklab, black 24%, transparent);
87
87
  }
88
88
  @media (prefers-reduced-motion: no-preference) {
89
- .greese-Chip {
89
+ .greese-Chip:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
90
90
  transition: transform var(--greese-duration-fast) var(--greese-easing-standard), box-shadow var(--greese-duration-fast) var(--greese-easing-standard), 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);
91
91
  }
92
92
  }
93
- .greese-Chip:active:not(:disabled, [aria-disabled=true]) {
93
+ .greese-Chip:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):active:not(:disabled, [aria-disabled=true]) {
94
94
  transform: translateY(0.125rem);
95
95
  }
96
96
  }
97
97
  @layer greese.overrides {
98
- .greese-Collapsible > .greese-Collapsible-trigger {
98
+ .greese-Collapsible:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) > .greese-Collapsible-trigger {
99
99
  padding-inline: var(--greese-space-4);
100
100
  background-color: var(--greese-color-surface);
101
101
  border: 1px solid var(--greese-collapsible-border, var(--greese-color-border));
102
102
  border-radius: var(--greese-corner-control);
103
103
  }
104
104
  @media (hover: hover) {
105
- .greese-Collapsible > .greese-Collapsible-trigger:hover {
105
+ .greese-Collapsible:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) > .greese-Collapsible-trigger:hover {
106
106
  background-color: color-mix(in oklab, var(--greese-color-fg) 5%, var(--greese-color-surface));
107
107
  }
108
108
  }
109
- .greese-Collapsible[open] > .greese-Collapsible-trigger {
109
+ .greese-Collapsible:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))[open] > .greese-Collapsible-trigger {
110
110
  margin-block-end: var(--greese-space-2);
111
111
  }
112
- .greese-Collapsible > .greese-Collapsible-content {
112
+ .greese-Collapsible:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) > .greese-Collapsible-content {
113
113
  padding-inline: var(--greese-space-4);
114
114
  }
115
- .greese-Collapsible > .greese-Collapsible-trigger {
115
+ .greese-Collapsible:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) > .greese-Collapsible-trigger {
116
116
  border-color: transparent;
117
117
  box-shadow: inset 0 0 0 1px var(--greese-color-border), inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.25rem 0 0 color-mix(in oklab, black 24%, transparent);
118
118
  }
119
119
  @media (prefers-reduced-motion: no-preference) {
120
- .greese-Collapsible > .greese-Collapsible-trigger {
120
+ .greese-Collapsible:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) > .greese-Collapsible-trigger {
121
121
  transition: transform var(--greese-duration-fast) var(--greese-easing-standard), box-shadow var(--greese-duration-fast) var(--greese-easing-standard), 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);
122
122
  }
123
123
  }
124
- .greese-Collapsible > .greese-Collapsible-trigger:active:not(:disabled, [aria-disabled=true]) {
124
+ .greese-Collapsible:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) > .greese-Collapsible-trigger:active:not(:disabled, [aria-disabled=true]) {
125
125
  transform: translateY(0.1875rem);
126
126
  }
127
- .greese-Collapsible[open] > .greese-Collapsible-trigger {
127
+ .greese-Collapsible:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))[open] > .greese-Collapsible-trigger {
128
128
  box-shadow: inset 0 0 0 1px var(--greese-color-border), inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.0625rem 0 0 color-mix(in oklab, black 24%, transparent);
129
129
  }
130
130
  }
131
131
  @layer greese.overrides {
132
- .greese-Input {
132
+ .greese-Input:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
133
133
  box-shadow: inset 0 0.1875rem 0 0 color-mix(in oklab, var(--greese-color-fg) 10%, transparent);
134
134
  }
135
135
  }
136
136
  @layer greese.overrides {
137
- .greese-Key {
137
+ .greese-Key:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
138
138
  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.1875rem 0 0 color-mix(in oklab, black 24%, transparent);
139
139
  }
140
140
  }
141
141
  @layer greese.overrides {
142
- .greese-OtpField .greese-OtpField-slot {
142
+ .greese-OtpField:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) .greese-OtpField-slot {
143
143
  box-shadow: inset 0 0.1875rem 0 0 color-mix(in oklab, var(--greese-color-fg) 10%, transparent);
144
144
  }
145
145
  }
146
146
  @layer greese.overrides {
147
- .greese-Progress {
147
+ .greese-Progress:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
148
148
  box-shadow: inset 0 0.1875rem 0 0 color-mix(in oklab, var(--greese-color-fg) 10%, transparent);
149
149
  }
150
- .greese-Progress::-webkit-progress-value {
150
+ .greese-Progress:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::-webkit-progress-value {
151
151
  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 calc(-1 * max(1px, var(--greese-progress-height) / 3)) 0 0 color-mix(in oklab, black 24%, transparent);
152
152
  }
153
- .greese-Progress::-moz-progress-bar {
153
+ .greese-Progress:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))::-moz-progress-bar {
154
154
  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 calc(-1 * max(1px, var(--greese-progress-height) / 3)) 0 0 color-mix(in oklab, black 24%, transparent);
155
155
  }
156
156
  }
157
157
  @layer greese.overrides {
158
- .greese-Segment:has(:checked) {
158
+ .greese-Segment:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):has(:checked) {
159
159
  box-shadow: inset 0 0 0 1.5px var(--greese-segment-current-ring, transparent), inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.1875rem 0 0 color-mix(in oklab, black 24%, transparent);
160
160
  }
161
161
  @media (prefers-reduced-motion: no-preference) {
162
- .greese-Segment {
162
+ .greese-Segment:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
163
163
  transition: transform var(--greese-duration-fast) var(--greese-easing-standard), box-shadow var(--greese-duration-fast) var(--greese-easing-standard), 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);
164
164
  }
165
165
  }
166
- .greese-Segment:active:not(:disabled, [aria-disabled=true]) {
166
+ .greese-Segment:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):active:not(:disabled, [aria-disabled=true]) {
167
167
  transform: translateY(0.125rem);
168
168
  }
169
169
  }
170
170
  @layer greese.overrides {
171
- .greese-SegmentedControl .greese-SegmentedControl-track {
171
+ .greese-SegmentedControl:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) .greese-SegmentedControl-track {
172
172
  padding: 0.25rem;
173
173
  box-shadow: inset 0 0.1875rem 0 0 color-mix(in oklab, var(--greese-color-fg) 10%, transparent);
174
174
  }
175
175
  }
176
176
  @layer greese.overrides {
177
- .greese-Select {
177
+ .greese-Select:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
178
178
  box-shadow: inset 0 0.1875rem 0 0 color-mix(in oklab, var(--greese-color-fg) 10%, transparent);
179
179
  }
180
180
  }
181
181
  @layer greese.overrides {
182
- .greese-SpeedDial .greese-SpeedDial-trigger {
182
+ .greese-SpeedDial:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) .greese-SpeedDial-trigger {
183
183
  border-radius: var(--greese-radius-lg);
184
184
  }
185
- .greese-SpeedDial .greese-SpeedDialAction-icon {
185
+ .greese-SpeedDial:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) .greese-SpeedDialAction-icon {
186
186
  border-radius: var(--greese-radius-md);
187
187
  }
188
188
  }
189
189
  @layer greese.overrides {
190
- .greese-Tab {
190
+ .greese-Tab:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
191
191
  background-color: var(--greese-color-surface);
192
192
  border-radius: var(--greese-corner-control) var(--greese-corner-control) 0 0;
193
193
  box-shadow: inset 0 -1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 0.25rem 0 0 color-mix(in oklab, black 22%, transparent);
194
194
  padding-block-start: 0.25rem;
195
195
  }
196
- .greese-Tab[aria-selected=true] {
196
+ .greese-Tab:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))[aria-selected=true] {
197
197
  background-color: var(--greese-tab-current-bg, color-mix(in oklab, var(--greese-color-primary) 12%, var(--greese-color-canvas)));
198
198
  box-shadow: inset 0 0 0 1.5px var(--greese-tab-current-ring, transparent), inset 0 -2px 0 var(--greese-color-primary), inset 0 0.1875rem 0 0 color-mix(in oklab, var(--greese-color-fg) 10%, transparent);
199
199
  transform: translateY(0.125rem);
200
200
  }
201
201
  @media (prefers-reduced-motion: no-preference) {
202
- .greese-Tab {
202
+ .greese-Tab:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
203
203
  transition: transform var(--greese-duration-fast) var(--greese-easing-standard), box-shadow var(--greese-duration-fast) var(--greese-easing-standard), 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);
204
204
  }
205
205
  }
206
- .greese-Tab:active:not(:disabled, [aria-disabled=true]) {
206
+ .greese-Tab:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)):active:not(:disabled, [aria-disabled=true]) {
207
207
  transform: translateY(0.125rem);
208
208
  }
209
209
  }
210
210
  @layer greese.overrides {
211
- .greese-Textarea {
211
+ .greese-Textarea:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
212
212
  box-shadow: inset 0 0.1875rem 0 0 color-mix(in oklab, var(--greese-color-fg) 10%, transparent);
213
213
  }
214
214
  }
215
215
  @layer greese.overrides {
216
- .greese-Tile {
216
+ .greese-Tile:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
217
217
  box-shadow: inset 0 0 0 1px var(--greese-color-border), inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent), inset 0 -0.375rem 0 0 color-mix(in oklab, black 24%, transparent);
218
218
  }
219
219
  }