@rokkit/themes 1.0.0-next.124 → 1.0.0-next.127

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 (130) hide show
  1. package/README.md +118 -9
  2. package/package.json +31 -27
  3. package/src/base/breadcrumbs.css +46 -0
  4. package/src/base/button.css +243 -0
  5. package/src/base/card.css +36 -0
  6. package/src/base/carousel.css +122 -12
  7. package/src/base/connector.css +106 -0
  8. package/src/base/display.css +91 -0
  9. package/src/base/floating-action.css +388 -0
  10. package/src/base/floating-navigation.css +381 -0
  11. package/src/base/index.css +36 -0
  12. package/src/base/input.css +194 -39
  13. package/src/base/item.css +52 -0
  14. package/src/base/list.css +258 -0
  15. package/src/base/menu.css +322 -0
  16. package/src/base/pill.css +57 -0
  17. package/src/base/progress.css +28 -15
  18. package/src/base/range.css +121 -0
  19. package/src/base/rating.css +40 -0
  20. package/src/base/reveal.css +37 -0
  21. package/src/base/search-filter.css +132 -0
  22. package/src/base/select.css +411 -0
  23. package/src/base/shine.css +14 -0
  24. package/src/base/stepper.css +140 -0
  25. package/src/base/switch.css +152 -0
  26. package/src/base/table.css +143 -33
  27. package/src/base/tabs.css +171 -0
  28. package/src/base/tilt.css +14 -0
  29. package/src/base/timeline.css +84 -0
  30. package/src/base/toggle.css +134 -0
  31. package/src/base/toolbar.css +337 -0
  32. package/src/base/tree.css +156 -11
  33. package/src/glass/button.css +152 -0
  34. package/src/glass/floating-action.css +61 -0
  35. package/src/glass/floating-navigation.css +74 -0
  36. package/src/glass/index.css +23 -0
  37. package/src/glass/input.css +124 -0
  38. package/src/glass/list.css +122 -0
  39. package/src/glass/menu.css +92 -0
  40. package/src/glass/range.css +61 -0
  41. package/src/glass/search-filter.css +49 -0
  42. package/src/glass/select.css +178 -0
  43. package/src/glass/switch.css +28 -0
  44. package/src/glass/table.css +87 -0
  45. package/src/glass/tabs.css +58 -0
  46. package/src/glass/timeline.css +46 -0
  47. package/src/glass/toggle.css +48 -0
  48. package/src/glass/toolbar.css +84 -0
  49. package/src/glass/tree.css +104 -0
  50. package/src/index.css +18 -0
  51. package/src/index.js +25 -2
  52. package/src/material/button.css +153 -0
  53. package/src/material/floating-action.css +60 -0
  54. package/src/material/floating-navigation.css +74 -0
  55. package/src/material/index.css +23 -0
  56. package/src/material/input.css +118 -40
  57. package/src/material/list.css +90 -64
  58. package/src/material/menu.css +92 -0
  59. package/src/material/range.css +62 -0
  60. package/src/material/search-filter.css +49 -0
  61. package/src/material/select.css +170 -0
  62. package/src/material/switch.css +28 -0
  63. package/src/material/table.css +87 -0
  64. package/src/material/tabs.css +62 -0
  65. package/src/material/timeline.css +46 -0
  66. package/src/material/toggle.css +48 -0
  67. package/src/material/toolbar.css +84 -0
  68. package/src/material/tree.css +100 -0
  69. package/src/minimal/button.css +152 -0
  70. package/src/minimal/floating-action.css +59 -0
  71. package/src/minimal/floating-navigation.css +70 -0
  72. package/src/minimal/index.css +23 -0
  73. package/src/minimal/input.css +81 -120
  74. package/src/minimal/list.css +90 -104
  75. package/src/minimal/menu.css +88 -0
  76. package/src/minimal/range.css +61 -0
  77. package/src/minimal/search-filter.css +49 -0
  78. package/src/minimal/select.css +168 -0
  79. package/src/minimal/switch.css +28 -0
  80. package/src/minimal/table.css +87 -0
  81. package/src/minimal/tabs.css +53 -31
  82. package/src/minimal/timeline.css +45 -0
  83. package/src/minimal/toggle.css +48 -0
  84. package/src/minimal/toolbar.css +84 -0
  85. package/src/minimal/tree.css +100 -0
  86. package/src/rokkit/button.css +225 -0
  87. package/src/rokkit/connector.css +11 -0
  88. package/src/rokkit/floating-action.css +65 -0
  89. package/src/rokkit/floating-navigation.css +83 -0
  90. package/src/rokkit/index.css +24 -0
  91. package/src/rokkit/input.css +130 -0
  92. package/src/rokkit/list.css +141 -0
  93. package/src/rokkit/menu.css +123 -0
  94. package/src/rokkit/range.css +62 -0
  95. package/src/rokkit/search-filter.css +49 -0
  96. package/src/rokkit/select.css +185 -0
  97. package/src/rokkit/switch.css +28 -0
  98. package/src/rokkit/table.css +68 -38
  99. package/src/rokkit/tabs.css +82 -0
  100. package/src/rokkit/timeline.css +46 -0
  101. package/src/rokkit/toggle.css +36 -52
  102. package/src/rokkit/toolbar.css +84 -0
  103. package/src/rokkit/tree.css +123 -0
  104. package/src/base/alert.css +0 -30
  105. package/src/base/animation.css +0 -37
  106. package/src/base/atoms.css +0 -58
  107. package/src/base/core.css +0 -107
  108. package/src/base/layout.css +0 -65
  109. package/src/base/molecules.css +0 -109
  110. package/src/base/organisms.css +0 -66
  111. package/src/base/scrollbar.css +0 -16
  112. package/src/base/toggles.css +0 -17
  113. package/src/base.css +0 -13
  114. package/src/markdown.css +0 -955
  115. package/src/material/base.css +0 -12
  116. package/src/material/form.css +0 -30
  117. package/src/material.css +0 -9
  118. package/src/minimal/base.css +0 -8
  119. package/src/minimal/form.css +0 -87
  120. package/src/minimal.css +0 -11
  121. package/src/mixins/mixins.scss +0 -66
  122. package/src/mixins/palette.scss +0 -48
  123. package/src/prism.css +0 -102
  124. package/src/rokkit/alert.css +0 -4
  125. package/src/rokkit/atoms.css +0 -52
  126. package/src/rokkit/carousel.css +0 -19
  127. package/src/rokkit/layout.css +0 -17
  128. package/src/rokkit/molecules.css +0 -124
  129. package/src/rokkit/organisms.css +0 -307
  130. package/src/rokkit.css +0 -11
package/README.md CHANGED
@@ -1,13 +1,122 @@
1
- # Themes
1
+ # @rokkit/themes
2
2
 
3
- Contains the following themes for use with `Rokkit` components.
3
+ Theme styles for `@rokkit/ui` headless components.
4
4
 
5
- - Rokkit
6
- - Modern
7
- - Material
5
+ ## Architecture
8
6
 
9
- This package also includes some mixins which make it easy to implement `light` and `dark` modes.
7
+ This package follows a **headless component + themed styles** pattern:
10
8
 
11
- - markdown.css: A customized variant of Github flavored markdown
12
- - prism.css: A variation of the prism syntax highlighting colors using CSS variables to support light and dark modes.
13
- - palette.css: Light and dark palettes using CSS variables.
9
+ - **Components** (`@rokkit/ui`) - Provide structure, behavior, and accessibility via data attributes
10
+ - **Themes** (`@rokkit/themes`) - Provide visual styling that targets those data attributes
11
+
12
+ ### Directory Structure
13
+
14
+ ```
15
+ src/
16
+ ├── base/ # Structural styles (layout, positioning)
17
+ │ ├── index.css # All base styles
18
+ │ └── menu.css # Menu structural styles
19
+ ├── rokkit/ # Default theme (gradients + borders)
20
+ │ ├── index.css # All rokkit theme styles
21
+ │ └── menu.css # Menu themed styles
22
+ ├── minimal/ # Clean + subtle theme
23
+ ├── material/ # Elevation + shadows theme
24
+ ├── glass/ # Blur + transparency theme
25
+ └── index.css # Main entry (imports base + all themes)
26
+ ```
27
+
28
+ ## Usage
29
+
30
+ ### Full Theme (base + all themes)
31
+
32
+ ```ts
33
+ import '@rokkit/themes'
34
+ ```
35
+
36
+ ### Base Only (for custom theming)
37
+
38
+ ```ts
39
+ import '@rokkit/themes/base'
40
+ ```
41
+
42
+ ### Rokkit Theme Only
43
+
44
+ ```ts
45
+ import '@rokkit/themes/rokkit'
46
+ ```
47
+
48
+ ### Individual Component Styles
49
+
50
+ ```ts
51
+ import '@rokkit/themes/base/menu.css'
52
+ import '@rokkit/themes/rokkit/menu.css'
53
+ ```
54
+
55
+ ## Data Attributes
56
+
57
+ Components use semantic data attributes for styling hooks:
58
+
59
+ ### Common Attributes
60
+
61
+ | Attribute | Values | Description |
62
+ | --------------- | ---------------- | -------------- |
63
+ | `data-size` | `sm`, `md`, `lg` | Size variant |
64
+ | `data-disabled` | `true` | Disabled state |
65
+ | `data-align` | `left`, `right` | Alignment |
66
+
67
+ ### Menu-Specific Attributes
68
+
69
+ | Attribute | Description |
70
+ | ----------------------- | ----------------------- |
71
+ | `data-menu` | Menu container |
72
+ | `data-menu-trigger` | Trigger button |
73
+ | `data-menu-dropdown` | Dropdown panel |
74
+ | `data-menu-item` | Menu item |
75
+ | `data-menu-item-custom` | Custom snippet wrapper |
76
+ | `data-menu-group` | Group container |
77
+ | `data-menu-group-label` | Group header |
78
+ | `data-menu-divider` | Divider line |
79
+ | `data-menu-open` | Open state on container |
80
+
81
+ ## Theme Scoping
82
+
83
+ Rokkit is the default theme — its styles apply without any wrapper.
84
+
85
+ Other themes are scoped with `data-style` to allow switching:
86
+
87
+ ```html
88
+ <div data-style="minimal">
89
+ <!-- Components here use minimal theme -->
90
+ </div>
91
+ ```
92
+
93
+ For global application, set on the root element:
94
+
95
+ ```html
96
+ <html data-style="material"></html>
97
+ ```
98
+
99
+ ## Creating Custom Themes
100
+
101
+ 1. Copy `src/rokkit/` to `src/my-theme/`
102
+ 2. Modify styles using same data attribute selectors
103
+ 3. Wrap selectors with `[data-style='my-theme']` scope
104
+ 4. Import your theme alongside or instead of rokkit
105
+
106
+ ## CSS Custom Properties
107
+
108
+ Themes use semantic CSS custom properties for consistency:
109
+
110
+ ```css
111
+ /* Surface colors (backgrounds) */
112
+ --surface-z0 through --surface-z10
113
+
114
+ /* Text colors */
115
+ --text-primary, --text-secondary, --text-muted
116
+
117
+ /* Interactive colors */
118
+ --primary, --primary-hover, --primary-active
119
+
120
+ /* State colors */
121
+ --success, --warning, --error, --info
122
+ ```
package/package.json CHANGED
@@ -1,37 +1,41 @@
1
1
  {
2
2
  "name": "@rokkit/themes",
3
- "version": "1.0.0-next.124",
4
- "description": "Themes for use with rokkit components.",
5
- "author": "Jerry Thomas <me@jerrythomas.name>",
6
- "license": "MIT",
7
- "module": "src/index.js",
8
- "types": "dist/index.d.ts",
3
+ "version": "1.0.0-next.127",
4
+ "description": "Theme styles for @rokkit/ui components",
9
5
  "type": "module",
10
- "publishConfig": {
11
- "access": "public"
12
- },
13
- "scripts": {
14
- "prepublishOnly": "tsc --project tsconfig.build.json",
15
- "clean": "rm -rf dist",
16
- "build": "bun clean && bun prepublishOnly"
6
+ "main": "./src/index.js",
7
+ "exports": {
8
+ ".": {
9
+ "style": "./src/index.css",
10
+ "import": "./src/index.js",
11
+ "default": "./src/index.js"
12
+ },
13
+ "./styles": "./src/index.css",
14
+ "./base": "./src/base/index.css",
15
+ "./base/*": "./src/base/*.css",
16
+ "./rokkit": "./src/rokkit/index.css",
17
+ "./rokkit/*": "./src/rokkit/*.css",
18
+ "./minimal": "./src/minimal/index.css",
19
+ "./minimal/*": "./src/minimal/*.css",
20
+ "./material": "./src/material/index.css",
21
+ "./material/*": "./src/material/*.css",
22
+ "./glass": "./src/glass/index.css",
23
+ "./glass/*": "./src/glass/*.css",
24
+ "./palette.css": "./src/palette.css"
17
25
  },
18
26
  "files": [
19
27
  "src"
20
28
  ],
21
- "exports": {
22
- "./modern.css": "./src/modern.css",
23
- "./material.css": "./src/material.css",
24
- "./minimal.css": "./src/minimal.css",
25
- "./rokkit.css": "./src/rokkit.css",
26
- "./prism.css": "./src/prism.css",
27
- "./palette.css": "./src/palette.css",
28
- "./markdown.css": "./src/markdown.css",
29
- "./package.json": "./src/package.json",
30
- ".": {
31
- "import": "./src/index.js"
32
- }
29
+ "scripts": {
30
+ "build": "echo 'No build step needed for CSS-only package'"
33
31
  },
34
32
  "dependencies": {
35
- "@rokkit/core": "latest"
36
- }
33
+ "@rokkit/core": "1.0.0-next.127"
34
+ },
35
+ "keywords": [
36
+ "themes",
37
+ "css",
38
+ "styles",
39
+ "ui"
40
+ ]
37
41
  }
package/src/base/breadcrumbs.css ADDED
@@ -0,0 +1,46 @@
1
+ /* BreadCrumbs — base structural styles */
2
+
3
+ [data-breadcrumbs] {
4
+ display: block;
5
+ }
6
+
7
+ [data-breadcrumb-list] {
8
+ display: flex;
9
+ align-items: center;
10
+ list-style: none;
11
+ padding: 0;
12
+ margin: 0;
13
+ gap: 0.25rem;
14
+ }
15
+
16
+ [data-breadcrumb-item] {
17
+ display: flex;
18
+ align-items: center;
19
+ }
20
+
21
+ [data-breadcrumb-separator] {
22
+ display: flex;
23
+ align-items: center;
24
+ opacity: 0.5;
25
+ }
26
+
27
+ [data-breadcrumb-link] {
28
+ display: flex;
29
+ align-items: center;
30
+ gap: 0.25rem;
31
+ background: none;
32
+ border: none;
33
+ cursor: pointer;
34
+ padding: 0.25rem 0.5rem;
35
+ border-radius: 0.25rem;
36
+ font: inherit;
37
+ color: inherit;
38
+ }
39
+
40
+ [data-breadcrumb-current] {
41
+ display: flex;
42
+ align-items: center;
43
+ gap: 0.25rem;
44
+ padding: 0.25rem 0.5rem;
45
+ font-weight: 600;
46
+ }
package/src/base/button.css ADDED
@@ -0,0 +1,243 @@
1
+ /**
2
+ * Button - Base Structural Styles
3
+ *
4
+ * These styles provide layout, positioning, and basic structure.
5
+ * No colors, shadows, or visual theming - those belong in theme styles.
6
+ */
7
+
8
+ /* =============================================================================
9
+ Button
10
+ ============================================================================= */
11
+
12
+ [data-button] {
13
+ display: inline-flex;
14
+ align-items: center;
15
+ justify-content: center;
16
+ gap: 0.5rem;
17
+ border-radius: 0.5rem;
18
+ font-weight: 500;
19
+ cursor: pointer;
20
+ border: 1px solid transparent;
21
+ white-space: nowrap;
22
+ user-select: none;
23
+ text-decoration: none;
24
+ transition: all 150ms ease;
25
+ background: transparent;
26
+ color: inherit;
27
+ font-family: inherit;
28
+ line-height: 1;
29
+ }
30
+
31
+ [data-button]:focus {
32
+ outline: none;
33
+ }
34
+
35
+ [data-button]:focus-visible {
36
+ outline: 2px solid currentColor;
37
+ outline-offset: 2px;
38
+ }
39
+
40
+ /* Disabled */
41
+ [data-button][data-disabled],
42
+ [data-button]:disabled {
43
+ pointer-events: none;
44
+ opacity: 0.5;
45
+ cursor: not-allowed;
46
+ }
47
+
48
+ /* Loading */
49
+ [data-button][data-loading] {
50
+ pointer-events: none;
51
+ position: relative;
52
+ }
53
+
54
+ /* Icon-only */
55
+ [data-button][data-icon-only] {
56
+ aspect-ratio: 1;
57
+ padding: 0;
58
+ }
59
+
60
+ /* =============================================================================
61
+ Size Variants
62
+ ============================================================================= */
63
+
64
+ /* Small */
65
+ [data-button][data-size='sm'] {
66
+ height: 1.75rem;
67
+ padding-inline: 0.625rem;
68
+ font-size: 0.75rem;
69
+ gap: 0.375rem;
70
+ }
71
+
72
+ [data-button][data-size='sm'][data-icon-only] {
73
+ width: 1.75rem;
74
+ }
75
+
76
+ [data-button][data-size='sm'] [data-item-icon],
77
+ [data-button][data-size='sm'] [data-button-icon-right] {
78
+ font-size: 0.875rem;
79
+ }
80
+
81
+ /* Medium (default) */
82
+ [data-button][data-size='md'],
83
+ [data-button]:not([data-size]) {
84
+ height: 2.25rem;
85
+ padding-inline: 1rem;
86
+ font-size: 0.875rem;
87
+ gap: 0.5rem;
88
+ }
89
+
90
+ [data-button][data-size='md'][data-icon-only],
91
+ [data-button]:not([data-size])[data-icon-only] {
92
+ width: 2.25rem;
93
+ }
94
+
95
+ [data-button][data-size='md'] [data-item-icon],
96
+ [data-button][data-size='md'] [data-button-icon-right],
97
+ [data-button]:not([data-size]) [data-item-icon],
98
+ [data-button]:not([data-size]) [data-button-icon-right] {
99
+ font-size: 1rem;
100
+ }
101
+
102
+ /* Large */
103
+ [data-button][data-size='lg'] {
104
+ height: 2.75rem;
105
+ padding-inline: 1.5rem;
106
+ font-size: 1rem;
107
+ gap: 0.625rem;
108
+ }
109
+
110
+ [data-button][data-size='lg'][data-icon-only] {
111
+ width: 2.75rem;
112
+ }
113
+
114
+ [data-button][data-size='lg'] [data-item-icon],
115
+ [data-button][data-size='lg'] [data-button-icon-right] {
116
+ font-size: 1.25rem;
117
+ }
118
+
119
+ /* =============================================================================
120
+ Button Elements
121
+ ============================================================================= */
122
+
123
+ [data-button] [data-item-icon],
124
+ [data-button] [data-button-icon-right] {
125
+ flex-shrink: 0;
126
+ }
127
+
128
+ [data-button] [data-item-text] {
129
+ display: inline-flex;
130
+ align-items: center;
131
+ }
132
+
133
+ /* Hide description and badge inside buttons (ItemContent renders them but we don't need them) */
134
+ [data-button] [data-item-description],
135
+ [data-button] [data-item-badge] {
136
+ display: none;
137
+ }
138
+
139
+ /* =============================================================================
140
+ Gradient Style — Structural
141
+ ============================================================================= */
142
+
143
+ [data-button][data-style='gradient'] {
144
+ border: none;
145
+ }
146
+
147
+ /* =============================================================================
148
+ Link Style — Structural
149
+ ============================================================================= */
150
+
151
+ [data-button][data-style='link'] {
152
+ background: transparent;
153
+ border: none;
154
+ height: auto;
155
+ padding-inline: 0.25rem;
156
+ border-radius: 0;
157
+ font-weight: inherit;
158
+ }
159
+
160
+ [data-button][data-style='link']:hover:not(:disabled):not([data-disabled]) {
161
+ text-decoration: underline;
162
+ text-underline-offset: 2px;
163
+ }
164
+
165
+ /* =============================================================================
166
+ Micro-Animations
167
+ ============================================================================= */
168
+
169
+ /* Hover lift — subtle elevation on hover (not on link or ghost style) */
170
+ [data-button]:not([data-style='link']):not([data-style='ghost']):hover:not(:disabled):not([data-disabled]) {
171
+ transform: translateY(-1px);
172
+ }
173
+
174
+ /* Press feedback — scale down on active */
175
+ [data-button]:active:not(:disabled):not([data-disabled]) {
176
+ transform: scale(0.97) translateY(0);
177
+ }
178
+
179
+ /* Icon shift — trailing icon moves right on hover */
180
+ [data-button]:hover:not(:disabled):not([data-disabled]) [data-button-icon-right] {
181
+ translate: 0.125rem 0;
182
+ }
183
+
184
+ [data-button] [data-button-icon-right] {
185
+ transition: translate 150ms ease;
186
+ }
187
+
188
+ /* Loading pulse */
189
+ [data-button][data-loading] {
190
+ animation: button-loading-pulse 1.5s ease-in-out infinite;
191
+ }
192
+
193
+ @keyframes button-loading-pulse {
194
+ 0%, 100% { opacity: 1; }
195
+ 50% { opacity: 0.7; }
196
+ }
197
+
198
+ /* =============================================================================
199
+ Loading Spinner
200
+ ============================================================================= */
201
+
202
+ [data-button-spinner] {
203
+ width: 1em;
204
+ height: 1em;
205
+ border: 2px solid currentColor;
206
+ border-right-color: transparent;
207
+ border-radius: 50%;
208
+ animation: button-spin 0.6s linear infinite;
209
+ flex-shrink: 0;
210
+ }
211
+
212
+ @keyframes button-spin {
213
+ to {
214
+ transform: rotate(360deg);
215
+ }
216
+ }
217
+
218
+ /* =============================================================================
219
+ Button Group
220
+ ============================================================================= */
221
+
222
+ [data-button-group] {
223
+ display: inline-flex;
224
+ align-items: center;
225
+ }
226
+
227
+ [data-button-group] [data-button] {
228
+ border-radius: 0;
229
+ }
230
+
231
+ [data-button-group] [data-button]:first-child {
232
+ border-top-left-radius: 0.5rem;
233
+ border-bottom-left-radius: 0.5rem;
234
+ }
235
+
236
+ [data-button-group] [data-button]:last-child {
237
+ border-top-right-radius: 0.5rem;
238
+ border-bottom-right-radius: 0.5rem;
239
+ }
240
+
241
+ [data-button-group] [data-button]:not(:first-child) {
242
+ margin-left: -1px;
243
+ }
package/src/base/card.css ADDED
@@ -0,0 +1,36 @@
1
+ /* Card — base structural styles */
2
+
3
+ [data-card] {
4
+ display: flex;
5
+ flex-direction: column;
6
+ border-radius: 0.5rem;
7
+ overflow: hidden;
8
+ text-decoration: none;
9
+ color: inherit;
10
+ }
11
+
12
+ button[data-card] {
13
+ background: none;
14
+ border: none;
15
+ cursor: pointer;
16
+ text-align: inherit;
17
+ font: inherit;
18
+ padding: 0;
19
+ }
20
+
21
+ a[data-card] {
22
+ cursor: pointer;
23
+ }
24
+
25
+ [data-card-header] {
26
+ padding: 1rem 1rem 0.5rem;
27
+ }
28
+
29
+ [data-card-body] {
30
+ padding: 0.5rem 1rem;
31
+ flex: 1;
32
+ }
33
+
34
+ [data-card-footer] {
35
+ padding: 0.5rem 1rem 1rem;
36
+ }
package/src/base/carousel.css CHANGED
@@ -1,18 +1,128 @@
1
- rk-carousel rk-slide {
2
- @apply min-h-100 items-center gap-3 px-12;
1
+ /* Carousel — base structural styles */
2
+
3
+ [data-carousel] {
4
+ position: relative;
5
+ overflow: hidden;
6
+ outline: none;
3
7
  }
4
- rk-carousel rk-slide > img {
5
- @apply h-80 w-80 object-cover;
8
+
9
+ [data-carousel-viewport] {
10
+ overflow: hidden;
11
+ width: 100%;
6
12
  }
7
- rk-carousel rk-slide > p {
8
- @apply text-center text-xl;
13
+
14
+ /* ─── Slide transition ─── */
15
+
16
+ [data-carousel-transition="slide"] [data-carousel-track] {
17
+ display: flex;
18
+ transition: transform 0.4s ease;
19
+ transform: translateX(calc(-100% * var(--carousel-current, 0)));
9
20
  }
10
- rk-carousel rk-dot-nav {
11
- @apply flex h-4 w-full justify-center gap-2;
21
+
22
+ [data-carousel-transition="slide"] [data-carousel-slide] {
23
+ flex: 0 0 100%;
24
+ min-width: 0;
12
25
  }
13
- rk-carousel rk-dot {
14
- @apply m-0 block h-4 w-4 cursor-pointer rounded-full p-0 focus:outline-none;
26
+
27
+ /* ─── Fade transition ─── */
28
+
29
+ [data-carousel-transition="fade"] [data-carousel-track] {
30
+ position: relative;
15
31
  }
16
- rk-carousel rk-dot[aria-checked='true'] {
17
- @apply bg-primary;
32
+
33
+ [data-carousel-transition="fade"] [data-carousel-slide] {
34
+ position: absolute;
35
+ inset: 0;
36
+ opacity: 0;
37
+ transition: opacity 0.4s ease;
38
+ pointer-events: none;
39
+ }
40
+
41
+ [data-carousel-transition="fade"] [data-carousel-slide][data-active] {
42
+ position: relative;
43
+ opacity: 1;
44
+ pointer-events: auto;
45
+ }
46
+
47
+ /* ─── No transition ─── */
48
+
49
+ [data-carousel-transition="none"] [data-carousel-track] {
50
+ display: flex;
51
+ transform: translateX(calc(-100% * var(--carousel-current, 0)));
52
+ }
53
+
54
+ [data-carousel-transition="none"] [data-carousel-slide] {
55
+ flex: 0 0 100%;
56
+ min-width: 0;
57
+ }
58
+
59
+ /* ─── Arrow buttons ─── */
60
+
61
+ [data-carousel-prev],
62
+ [data-carousel-next] {
63
+ position: absolute;
64
+ top: 50%;
65
+ transform: translateY(-50%);
66
+ display: flex;
67
+ align-items: center;
68
+ justify-content: center;
69
+ width: 2.5rem;
70
+ height: 2.5rem;
71
+ border: none;
72
+ border-radius: 9999px;
73
+ cursor: pointer;
74
+ background: rgba(0, 0, 0, 0.3);
75
+ color: white;
76
+ font-size: 1.25rem;
77
+ z-index: 1;
78
+ opacity: 0.7;
79
+ transition: opacity 0.2s ease;
80
+ }
81
+
82
+ [data-carousel-prev]:hover,
83
+ [data-carousel-next]:hover {
84
+ opacity: 1;
85
+ }
86
+
87
+ [data-carousel-prev]:disabled,
88
+ [data-carousel-next]:disabled {
89
+ opacity: 0.3;
90
+ cursor: default;
91
+ }
92
+
93
+ [data-carousel-prev] {
94
+ left: 0.5rem;
95
+ }
96
+
97
+ [data-carousel-next] {
98
+ right: 0.5rem;
99
+ }
100
+
101
+ /* ─── Dots ─── */
102
+
103
+ [data-carousel-dots] {
104
+ display: flex;
105
+ justify-content: center;
106
+ gap: 0.5rem;
107
+ padding: 0.75rem 0;
108
+ }
109
+
110
+ [data-carousel-dot] {
111
+ width: 0.625rem;
112
+ height: 0.625rem;
113
+ border-radius: 9999px;
114
+ border: none;
115
+ cursor: pointer;
116
+ background: currentColor;
117
+ opacity: 0.3;
118
+ transition: opacity 0.2s ease;
119
+ padding: 0;
120
+ }
121
+
122
+ [data-carousel-dot][data-active] {
123
+ opacity: 1;
124
+ }
125
+
126
+ [data-carousel-dot]:hover {
127
+ opacity: 0.7;
18
128
  }