@ecopages/radiant-ui 0.1.0-beta.0 → 0.1.0-beta.2

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 (75) hide show
  1. package/README.md +4 -2
  2. package/dist/components/ui/alert/alert.css +56 -23
  3. package/dist/components/ui/breadcrumb/breadcrumb.css +85 -36
  4. package/dist/components/ui/carousel/carousel.css +465 -166
  5. package/dist/components/ui/checkbox/checkbox.css +196 -49
  6. package/dist/components/ui/combobox/combobox.css +213 -60
  7. package/dist/components/ui/dialog/dialog.css +176 -49
  8. package/dist/components/ui/disclosure/disclosure.css +228 -100
  9. package/dist/components/ui/feed/feed.css +30 -10
  10. package/dist/components/ui/field/field.css +18 -22
  11. package/dist/components/ui/form/form.css +7 -8
  12. package/dist/components/ui/grid/grid.css +172 -43
  13. package/dist/components/ui/input/input.css +126 -30
  14. package/dist/components/ui/label/label.css +20 -6
  15. package/dist/components/ui/listbox/listbox.css +137 -19
  16. package/dist/components/ui/menu-button/index.js +1 -1
  17. package/dist/components/ui/menu-button/index.js.map +4 -4
  18. package/dist/components/ui/menu-button/menu-button.css +158 -38
  19. package/dist/components/ui/menu-button/menu-button.script.d.ts +7 -7
  20. package/dist/components/ui/menubar/index.js +1 -1
  21. package/dist/components/ui/menubar/index.js.map +2 -2
  22. package/dist/components/ui/menubar/menubar.css +207 -39
  23. package/dist/components/ui/meter/meter.css +50 -13
  24. package/dist/components/ui/navigation-menu/navigation-menu.css +281 -85
  25. package/dist/components/ui/radio-group/radio-group.css +179 -40
  26. package/dist/components/ui/shared/floating-position.d.ts +37 -0
  27. package/dist/components/ui/shared/floating-position.test.d.ts +1 -0
  28. package/dist/components/ui/shared/placement.d.ts +2 -0
  29. package/dist/components/ui/sidebar/sidebar.css +407 -189
  30. package/dist/components/ui/slider/slider.css +220 -47
  31. package/dist/components/ui/spinbutton/spinbutton.css +65 -15
  32. package/dist/components/ui/switch/switch.css +164 -43
  33. package/dist/components/ui/tabs/tabs.css +145 -24
  34. package/dist/components/ui/textarea/textarea.css +128 -31
  35. package/dist/components/ui/toast/toast.css +388 -255
  36. package/dist/components/ui/toolbar/toolbar.css +118 -11
  37. package/dist/components/ui/tooltip/index.js +1 -1
  38. package/dist/components/ui/tooltip/index.js.map +4 -4
  39. package/dist/components/ui/tooltip/tooltip.css +119 -21
  40. package/dist/components/ui/tooltip/tooltip.script.d.ts +6 -6
  41. package/dist/components/ui/tree/tree.css +180 -49
  42. package/dist/components/ui/treegrid/treegrid.css +190 -72
  43. package/dist/components/ui/window-splitter/window-splitter.css +144 -31
  44. package/dist/index.js +1 -1
  45. package/dist/index.js.map +4 -4
  46. package/dist/styles/components/button.css +299 -113
  47. package/dist/styles/radiant-ui-core.css +828 -7
  48. package/dist/styles/radiant-ui.css +1497 -8
  49. package/dist/styles/styles.css +5830 -36
  50. package/dist/styles/tailwind.css +1607 -27
  51. package/dist/styles/themes/aurora.css +637 -15
  52. package/dist/styles/themes/default-compact-soft.css +580 -15
  53. package/dist/styles/themes/default.css +641 -2
  54. package/dist/styles/themes/glacier.css +637 -15
  55. package/dist/styles/tokens/colors/aurora.css +1 -73
  56. package/dist/styles/tokens/colors/basalt.css +1 -36
  57. package/dist/styles/tokens/colors/glacier.css +1 -45
  58. package/dist/styles/tokens/colors/palettes.css +1 -3
  59. package/dist/styles/tokens/elevation/default.css +11 -19
  60. package/dist/styles/tokens/elevation/flat.css +11 -19
  61. package/dist/styles/tokens/motion/default.css +6 -17
  62. package/dist/styles/tokens/motion/snappy.css +6 -17
  63. package/dist/styles/tokens/presets/colors/index.css +446 -4
  64. package/dist/styles/tokens/radius/default.css +17 -31
  65. package/dist/styles/tokens/radius/edgy.css +17 -32
  66. package/dist/styles/tokens/radius/sharp.css +20 -2
  67. package/dist/styles/tokens/radius/soft.css +17 -31
  68. package/dist/styles/tokens/semantic.css +445 -79
  69. package/dist/styles/tokens/spacing/compact.css +16 -21
  70. package/dist/styles/tokens/spacing/default.css +16 -21
  71. package/dist/styles/tokens/spacing/scale-bridge.css +1 -17
  72. package/dist/styles/tokens/spacing/wide.css +16 -21
  73. package/dist/styles/tokens/system.css +21 -33
  74. package/dist/styles/tokens/typography/default.css +23 -33
  75. package/package.json +5 -6
@@ -1,170 +1,469 @@
1
- @reference '../../../styles/radiant-ui.css';
2
-
1
+ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
2
+ @layer properties;
3
3
  rui-carousel {
4
- @apply block w-full max-w-full min-w-0;
4
+ display: block;
5
+ width: 100%;
6
+ max-width: 100%;
7
+ min-width: 0px;
5
8
  }
6
-
7
9
  @layer components {
8
- .rui-carousel {
9
- @apply flex w-full min-w-0 max-w-full flex-col gap-stack;
10
- }
11
-
12
- .rui-carousel:focus-visible {
13
- @apply outline-hidden ring-2 ring-focus-ring rounded-container;
14
- }
15
-
16
- .rui-carousel__stage {
17
- @apply relative w-full min-w-0;
18
- }
19
-
20
- .rui-carousel__viewport {
21
- @apply relative w-full min-w-0 overflow-hidden rounded-container border border-border bg-surface text-sm;
22
- touch-action: pan-y;
23
- }
24
-
25
- .rui-carousel--controls-toolbar .rui-carousel__viewport {
26
- @apply p-inset;
27
- }
28
-
29
- .rui-carousel--controls-overlay .rui-carousel__viewport {
30
- @apply p-0;
31
- }
32
-
33
- .rui-carousel__track {
34
- @apply relative w-full min-h-[clamp(8rem,40vw,16rem)];
35
- }
36
-
37
- .rui-carousel__slide {
38
- @apply flex w-full min-w-0 min-h-[clamp(8rem,40vw,16rem)] items-center justify-center;
39
- }
40
-
41
- .rui-carousel__footer {
42
- @apply w-full min-w-0;
43
- }
44
-
45
- .rui-carousel__toolbar {
46
- @apply grid w-full items-center gap-inline;
47
- grid-template-columns: 1fr auto 1fr;
48
- grid-template-rows: auto auto;
49
- }
50
-
51
- .rui-carousel__toolbar-rotation {
52
- @apply flex justify-center;
53
- grid-column: 2;
54
- grid-row: 1;
55
- }
56
-
57
- .rui-carousel__toolbar-center {
58
- @apply flex justify-center px-2;
59
- grid-column: 2;
60
- grid-row: 2;
61
- }
62
-
63
- .rui-carousel__toolbar-side--start {
64
- @apply flex min-w-0 items-center justify-start;
65
- grid-column: 1;
66
- grid-row: 2;
67
- }
68
-
69
- .rui-carousel__toolbar-side--end {
70
- @apply flex min-w-0 items-center justify-end;
71
- grid-column: 3;
72
- grid-row: 2;
73
- }
74
-
75
- .rui-carousel__nav-label {
76
- @apply inline-flex items-center gap-1;
77
- }
78
-
79
- .rui-carousel__overlay-chrome {
80
- @apply pointer-events-none absolute inset-0 z-dropdown;
81
- }
82
-
83
- .rui-carousel__overlay-rotation {
84
- top: var(--space-inset);
85
- right: var(--space-inset);
86
- @apply pointer-events-auto absolute;
87
- }
88
-
89
- .rui-carousel__controls--overlay {
90
- @apply pointer-events-none absolute inset-0 flex items-center justify-between;
91
- padding-inline: var(--space-inset);
92
- }
93
-
94
- .rui-carousel__controls--overlay > * {
95
- @apply pointer-events-auto;
96
- }
97
-
98
- .rui-carousel__indicators--overlay {
99
- top: var(--space-inset);
100
- @apply pointer-events-auto absolute left-1/2 max-w-[calc(100%-5rem)] -translate-x-1/2 rounded-full border border-border/80 bg-surface/80 px-3 py-1.5 shadow-sm backdrop-blur-sm;
101
- }
102
-
103
- .rui-carousel__nav--overlay {
104
- @apply min-h-11 min-w-11 shrink-0 rounded-full border-border/80 bg-surface/90 shadow-sm backdrop-blur-sm;
105
- }
106
-
107
- .rui-carousel__nav--overlay:focus-visible {
108
- @apply rounded-full;
109
- }
110
-
111
- .rui-carousel__nav--overlay:active:not(:disabled) {
112
- @apply rounded-full;
113
- }
114
-
115
- .rui-carousel__nav-icon {
116
- @apply block text-lg leading-none;
117
- }
118
-
119
- .rui-carousel__rotation--overlay {
120
- @apply rounded-full border border-border/80 bg-surface/90 px-3 shadow-sm backdrop-blur-sm;
121
- }
122
-
123
- .rui-carousel__indicators {
124
- @apply flex items-center justify-center gap-inline;
125
- }
126
-
127
- .rui-carousel__indicator {
128
- @apply h-2.5 w-2.5 shrink-0 rounded-full border border-border bg-background transition-[background-color,border-color] focus:rounded-full;
129
- }
130
-
131
- .rui-carousel__indicator[aria-selected='true'] {
132
- @apply rounded-full bg-primary border-primary;
133
- }
134
-
135
- .rui-carousel__indicator:focus-visible {
136
- @apply rounded-full outline-hidden ring-2 ring-focus-ring;
137
- }
138
-
139
- .rui-carousel__indicator:active {
140
- @apply rounded-full;
141
- }
142
-
143
- .rui-carousel--none .rui-carousel__slide[hidden] {
144
- display: none;
145
- }
146
-
147
- .rui-carousel--slide .rui-carousel__track {
148
- @apply flex w-full transition-transform duration-slow ease-in-out;
149
- transform: translateX(calc(var(--rui-carousel-index, 0) * -100%));
150
- }
151
-
152
- .rui-carousel--slide .rui-carousel__slide {
153
- @apply min-w-full w-full shrink-0;
154
- }
155
-
156
- .rui-carousel--fade .rui-carousel__track {
157
- @apply grid w-full;
158
- }
159
-
160
- .rui-carousel--fade .rui-carousel__slide {
161
- @apply col-start-1 row-start-1 w-full transition-opacity duration-slow ease-in-out;
162
- opacity: 0;
163
- pointer-events: none;
164
- }
165
-
166
- .rui-carousel--fade .rui-carousel__slide[data-active='true'] {
167
- opacity: 1;
168
- pointer-events: auto;
169
- }
10
+ .rui-carousel {
11
+ display: flex;
12
+ width: 100%;
13
+ max-width: 100%;
14
+ min-width: 0px;
15
+ flex-direction: column;
16
+ gap: var(--spacing-stack, var(--space-stack));
17
+ }
18
+ .rui-carousel:focus-visible {
19
+ border-radius: var(--radius-container, var(--radius-container));
20
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
21
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
22
+ --tw-ring-color: var(--color-focus-ring, var(--focus-ring));
23
+ --tw-outline-style: none;
24
+ outline-style: none;
25
+ @media (forced-colors: active) {
26
+ outline: 2px solid transparent;
27
+ outline-offset: 2px;
28
+ }
29
+ }
30
+ .rui-carousel__stage {
31
+ position: relative;
32
+ width: 100%;
33
+ min-width: 0px;
34
+ }
35
+ .rui-carousel__viewport {
36
+ position: relative;
37
+ width: 100%;
38
+ min-width: 0px;
39
+ overflow: hidden;
40
+ border-radius: var(--radius-container, var(--radius-container));
41
+ border-style: var(--tw-border-style);
42
+ border-width: 1px;
43
+ border-color: var(--color-border, var(--border));
44
+ background-color: var(--color-surface, var(--surface));
45
+ font-size: var(--text-sm, var(--text-sm));
46
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
47
+ touch-action: pan-y;
48
+ }
49
+ .rui-carousel--controls-toolbar .rui-carousel__viewport {
50
+ padding: var(--spacing-inset, var(--space-inset));
51
+ }
52
+ .rui-carousel--controls-overlay .rui-carousel__viewport {
53
+ padding: 0px;
54
+ }
55
+ .rui-carousel__track {
56
+ position: relative;
57
+ min-height: clamp(8rem, 40vw, 16rem);
58
+ width: 100%;
59
+ }
60
+ .rui-carousel__slide {
61
+ display: flex;
62
+ min-height: clamp(8rem, 40vw, 16rem);
63
+ width: 100%;
64
+ min-width: 0px;
65
+ align-items: center;
66
+ justify-content: center;
67
+ }
68
+ .rui-carousel__footer {
69
+ width: 100%;
70
+ min-width: 0px;
71
+ }
72
+ .rui-carousel__toolbar {
73
+ display: grid;
74
+ width: 100%;
75
+ align-items: center;
76
+ gap: var(--spacing-inline, var(--space-inline));
77
+ grid-template-columns: 1fr auto 1fr;
78
+ grid-template-rows: auto auto;
79
+ }
80
+ .rui-carousel__toolbar-rotation {
81
+ display: flex;
82
+ justify-content: center;
83
+ grid-column: 2;
84
+ grid-row: 1;
85
+ }
86
+ .rui-carousel__toolbar-center {
87
+ display: flex;
88
+ justify-content: center;
89
+ padding-inline: var(--spacing-2, var(--space-2));
90
+ grid-column: 2;
91
+ grid-row: 2;
92
+ }
93
+ .rui-carousel__toolbar-side--start {
94
+ display: flex;
95
+ min-width: 0px;
96
+ align-items: center;
97
+ justify-content: flex-start;
98
+ grid-column: 1;
99
+ grid-row: 2;
100
+ }
101
+ .rui-carousel__toolbar-side--end {
102
+ display: flex;
103
+ min-width: 0px;
104
+ align-items: center;
105
+ justify-content: flex-end;
106
+ grid-column: 3;
107
+ grid-row: 2;
108
+ }
109
+ .rui-carousel__nav-label {
110
+ display: inline-flex;
111
+ align-items: center;
112
+ gap: var(--spacing-1, var(--space-1));
113
+ }
114
+ .rui-carousel__overlay-chrome {
115
+ pointer-events: none;
116
+ position: absolute;
117
+ inset: 0px;
118
+ z-index: var(--z-index-dropdown, var(--z-dropdown));
119
+ }
120
+ .rui-carousel__overlay-rotation {
121
+ top: var(--space-inset);
122
+ right: var(--space-inset);
123
+ pointer-events: auto;
124
+ position: absolute;
125
+ }
126
+ .rui-carousel__controls--overlay {
127
+ pointer-events: none;
128
+ position: absolute;
129
+ inset: 0px;
130
+ display: flex;
131
+ align-items: center;
132
+ justify-content: space-between;
133
+ padding-inline: var(--space-inset);
134
+ }
135
+ .rui-carousel__controls--overlay > * {
136
+ pointer-events: auto;
137
+ }
138
+ .rui-carousel__indicators--overlay {
139
+ top: var(--space-inset);
140
+ pointer-events: auto;
141
+ position: absolute;
142
+ left: calc(1 / 2 * 100%);
143
+ max-width: calc(100% - 5rem);
144
+ --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
145
+ translate: var(--tw-translate-x) var(--tw-translate-y);
146
+ border-radius: var(--radius-full, var(--border-radius-full));
147
+ border-style: var(--tw-border-style);
148
+ border-width: 1px;
149
+ border-color: var(--color-border, var(--border));
150
+ @supports (color: color-mix(in lab, red, red)) {
151
+ border-color: color-mix(in oklab, var(--color-border, var(--border)) 80%, transparent);
152
+ }
153
+ background-color: var(--color-surface, var(--surface));
154
+ @supports (color: color-mix(in lab, red, red)) {
155
+ background-color: color-mix(in oklab, var(--color-surface, var(--surface)) 80%, transparent);
156
+ }
157
+ padding-inline: var(--spacing-3, var(--space-3));
158
+ padding-block: calc(var(--spacing, 0.25rem) * 1.5);
159
+ --tw-shadow: var(--shadow-control);
160
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
161
+ --tw-backdrop-blur: blur(var(--blur-sm, 8px));
162
+ -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
163
+ backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
164
+ }
165
+ .rui-carousel__nav--overlay {
166
+ min-height: calc(var(--spacing, 0.25rem) * 11);
167
+ min-width: calc(var(--spacing, 0.25rem) * 11);
168
+ flex-shrink: 0;
169
+ border-radius: var(--radius-full, var(--border-radius-full));
170
+ border-color: var(--color-border, var(--border));
171
+ @supports (color: color-mix(in lab, red, red)) {
172
+ border-color: color-mix(in oklab, var(--color-border, var(--border)) 80%, transparent);
173
+ }
174
+ background-color: var(--color-surface, var(--surface));
175
+ @supports (color: color-mix(in lab, red, red)) {
176
+ background-color: color-mix(in oklab, var(--color-surface, var(--surface)) 90%, transparent);
177
+ }
178
+ --tw-shadow: var(--shadow-control);
179
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
180
+ --tw-backdrop-blur: blur(var(--blur-sm, 8px));
181
+ -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
182
+ backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
183
+ }
184
+ .rui-carousel__nav--overlay:focus-visible {
185
+ border-radius: var(--radius-full, var(--border-radius-full));
186
+ }
187
+ .rui-carousel__nav--overlay:active:not(:disabled) {
188
+ border-radius: var(--radius-full, var(--border-radius-full));
189
+ }
190
+ .rui-carousel__nav-icon {
191
+ display: block;
192
+ font-size: var(--text-lg, var(--text-lg));
193
+ line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
194
+ --tw-leading: 1;
195
+ line-height: 1;
196
+ }
197
+ .rui-carousel__rotation--overlay {
198
+ border-radius: var(--radius-full, var(--border-radius-full));
199
+ border-style: var(--tw-border-style);
200
+ border-width: 1px;
201
+ border-color: var(--color-border, var(--border));
202
+ @supports (color: color-mix(in lab, red, red)) {
203
+ border-color: color-mix(in oklab, var(--color-border, var(--border)) 80%, transparent);
204
+ }
205
+ background-color: var(--color-surface, var(--surface));
206
+ @supports (color: color-mix(in lab, red, red)) {
207
+ background-color: color-mix(in oklab, var(--color-surface, var(--surface)) 90%, transparent);
208
+ }
209
+ padding-inline: var(--spacing-3, var(--space-3));
210
+ --tw-shadow: var(--shadow-control);
211
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
212
+ --tw-backdrop-blur: blur(var(--blur-sm, 8px));
213
+ -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
214
+ backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
215
+ }
216
+ .rui-carousel__indicators {
217
+ display: flex;
218
+ align-items: center;
219
+ justify-content: center;
220
+ gap: var(--spacing-inline, var(--space-inline));
221
+ }
222
+ .rui-carousel__indicator {
223
+ height: calc(var(--spacing, 0.25rem) * 2.5);
224
+ width: calc(var(--spacing, 0.25rem) * 2.5);
225
+ flex-shrink: 0;
226
+ border-radius: var(--radius-full, var(--border-radius-full));
227
+ border-style: var(--tw-border-style);
228
+ border-width: 1px;
229
+ border-color: var(--color-border, var(--border));
230
+ background-color: var(--color-background, var(--background));
231
+ transition-property: background-color,border-color;
232
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
233
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
234
+ &:focus {
235
+ border-radius: var(--radius-full, var(--border-radius-full));
236
+ }
237
+ }
238
+ .rui-carousel__indicator[aria-selected='true'] {
239
+ border-radius: var(--radius-full, var(--border-radius-full));
240
+ border-color: var(--color-primary, var(--primary));
241
+ background-color: var(--color-primary, var(--primary));
242
+ }
243
+ .rui-carousel__indicator:focus-visible {
244
+ border-radius: var(--radius-full, var(--border-radius-full));
245
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
246
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
247
+ --tw-ring-color: var(--color-focus-ring, var(--focus-ring));
248
+ --tw-outline-style: none;
249
+ outline-style: none;
250
+ @media (forced-colors: active) {
251
+ outline: 2px solid transparent;
252
+ outline-offset: 2px;
253
+ }
254
+ }
255
+ .rui-carousel__indicator:active {
256
+ border-radius: var(--radius-full, var(--border-radius-full));
257
+ }
258
+ .rui-carousel--none .rui-carousel__slide[hidden] {
259
+ display: none;
260
+ }
261
+ .rui-carousel--slide .rui-carousel__track {
262
+ display: flex;
263
+ width: 100%;
264
+ transition-property: transform, translate, scale, rotate;
265
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
266
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
267
+ --tw-duration: var(--transition-duration-slow, var(--duration-slow));
268
+ transition-duration: var(--transition-duration-slow, var(--duration-slow));
269
+ --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
270
+ transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
271
+ transform: translateX(calc(var(--rui-carousel-index, 0) * -100%));
272
+ }
273
+ .rui-carousel--slide .rui-carousel__slide {
274
+ width: 100%;
275
+ min-width: 100%;
276
+ flex-shrink: 0;
277
+ }
278
+ .rui-carousel--fade .rui-carousel__track {
279
+ display: grid;
280
+ width: 100%;
281
+ }
282
+ .rui-carousel--fade .rui-carousel__slide {
283
+ grid-column-start: 1;
284
+ grid-row-start: 1;
285
+ width: 100%;
286
+ transition-property: opacity;
287
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
288
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
289
+ --tw-duration: var(--transition-duration-slow, var(--duration-slow));
290
+ transition-duration: var(--transition-duration-slow, var(--duration-slow));
291
+ --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
292
+ transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
293
+ opacity: 0;
294
+ pointer-events: none;
295
+ }
296
+ .rui-carousel--fade .rui-carousel__slide[data-active='true'] {
297
+ opacity: 1;
298
+ pointer-events: auto;
299
+ }
300
+ }
301
+ @property --tw-shadow {
302
+ syntax: "*";
303
+ inherits: false;
304
+ initial-value: 0 0 #0000;
305
+ }
306
+ @property --tw-shadow-color {
307
+ syntax: "*";
308
+ inherits: false;
309
+ }
310
+ @property --tw-shadow-alpha {
311
+ syntax: "<percentage>";
312
+ inherits: false;
313
+ initial-value: 100%;
314
+ }
315
+ @property --tw-inset-shadow {
316
+ syntax: "*";
317
+ inherits: false;
318
+ initial-value: 0 0 #0000;
319
+ }
320
+ @property --tw-inset-shadow-color {
321
+ syntax: "*";
322
+ inherits: false;
323
+ }
324
+ @property --tw-inset-shadow-alpha {
325
+ syntax: "<percentage>";
326
+ inherits: false;
327
+ initial-value: 100%;
328
+ }
329
+ @property --tw-ring-color {
330
+ syntax: "*";
331
+ inherits: false;
332
+ }
333
+ @property --tw-ring-shadow {
334
+ syntax: "*";
335
+ inherits: false;
336
+ initial-value: 0 0 #0000;
337
+ }
338
+ @property --tw-inset-ring-color {
339
+ syntax: "*";
340
+ inherits: false;
341
+ }
342
+ @property --tw-inset-ring-shadow {
343
+ syntax: "*";
344
+ inherits: false;
345
+ initial-value: 0 0 #0000;
346
+ }
347
+ @property --tw-ring-inset {
348
+ syntax: "*";
349
+ inherits: false;
350
+ }
351
+ @property --tw-ring-offset-width {
352
+ syntax: "<length>";
353
+ inherits: false;
354
+ initial-value: 0px;
355
+ }
356
+ @property --tw-ring-offset-color {
357
+ syntax: "*";
358
+ inherits: false;
359
+ initial-value: #fff;
360
+ }
361
+ @property --tw-ring-offset-shadow {
362
+ syntax: "*";
363
+ inherits: false;
364
+ initial-value: 0 0 #0000;
365
+ }
366
+ @property --tw-border-style {
367
+ syntax: "*";
368
+ inherits: false;
369
+ initial-value: solid;
370
+ }
371
+ @property --tw-translate-x {
372
+ syntax: "*";
373
+ inherits: false;
374
+ initial-value: 0;
375
+ }
376
+ @property --tw-translate-y {
377
+ syntax: "*";
378
+ inherits: false;
379
+ initial-value: 0;
380
+ }
381
+ @property --tw-translate-z {
382
+ syntax: "*";
383
+ inherits: false;
384
+ initial-value: 0;
385
+ }
386
+ @property --tw-backdrop-blur {
387
+ syntax: "*";
388
+ inherits: false;
389
+ }
390
+ @property --tw-backdrop-brightness {
391
+ syntax: "*";
392
+ inherits: false;
393
+ }
394
+ @property --tw-backdrop-contrast {
395
+ syntax: "*";
396
+ inherits: false;
397
+ }
398
+ @property --tw-backdrop-grayscale {
399
+ syntax: "*";
400
+ inherits: false;
401
+ }
402
+ @property --tw-backdrop-hue-rotate {
403
+ syntax: "*";
404
+ inherits: false;
405
+ }
406
+ @property --tw-backdrop-invert {
407
+ syntax: "*";
408
+ inherits: false;
409
+ }
410
+ @property --tw-backdrop-opacity {
411
+ syntax: "*";
412
+ inherits: false;
413
+ }
414
+ @property --tw-backdrop-saturate {
415
+ syntax: "*";
416
+ inherits: false;
417
+ }
418
+ @property --tw-backdrop-sepia {
419
+ syntax: "*";
420
+ inherits: false;
421
+ }
422
+ @property --tw-leading {
423
+ syntax: "*";
424
+ inherits: false;
425
+ }
426
+ @property --tw-duration {
427
+ syntax: "*";
428
+ inherits: false;
429
+ }
430
+ @property --tw-ease {
431
+ syntax: "*";
432
+ inherits: false;
433
+ }
434
+ @layer properties {
435
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
436
+ *, ::before, ::after, ::backdrop {
437
+ --tw-shadow: 0 0 #0000;
438
+ --tw-shadow-color: initial;
439
+ --tw-shadow-alpha: 100%;
440
+ --tw-inset-shadow: 0 0 #0000;
441
+ --tw-inset-shadow-color: initial;
442
+ --tw-inset-shadow-alpha: 100%;
443
+ --tw-ring-color: initial;
444
+ --tw-ring-shadow: 0 0 #0000;
445
+ --tw-inset-ring-color: initial;
446
+ --tw-inset-ring-shadow: 0 0 #0000;
447
+ --tw-ring-inset: initial;
448
+ --tw-ring-offset-width: 0px;
449
+ --tw-ring-offset-color: #fff;
450
+ --tw-ring-offset-shadow: 0 0 #0000;
451
+ --tw-border-style: solid;
452
+ --tw-translate-x: 0;
453
+ --tw-translate-y: 0;
454
+ --tw-translate-z: 0;
455
+ --tw-backdrop-blur: initial;
456
+ --tw-backdrop-brightness: initial;
457
+ --tw-backdrop-contrast: initial;
458
+ --tw-backdrop-grayscale: initial;
459
+ --tw-backdrop-hue-rotate: initial;
460
+ --tw-backdrop-invert: initial;
461
+ --tw-backdrop-opacity: initial;
462
+ --tw-backdrop-saturate: initial;
463
+ --tw-backdrop-sepia: initial;
464
+ --tw-leading: initial;
465
+ --tw-duration: initial;
466
+ --tw-ease: initial;
467
+ }
468
+ }
170
469
  }