@cdevhub/ngx-tw 0.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 (171) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +134 -0
  3. package/fesm2022/cdevhub-ngx-tw-accordion.mjs +108 -0
  4. package/fesm2022/cdevhub-ngx-tw-accordion.mjs.map +1 -0
  5. package/fesm2022/cdevhub-ngx-tw-alert.mjs +240 -0
  6. package/fesm2022/cdevhub-ngx-tw-alert.mjs.map +1 -0
  7. package/fesm2022/cdevhub-ngx-tw-avatar.mjs +287 -0
  8. package/fesm2022/cdevhub-ngx-tw-avatar.mjs.map +1 -0
  9. package/fesm2022/cdevhub-ngx-tw-badge.mjs +332 -0
  10. package/fesm2022/cdevhub-ngx-tw-badge.mjs.map +1 -0
  11. package/fesm2022/cdevhub-ngx-tw-breadcrumbs.mjs +452 -0
  12. package/fesm2022/cdevhub-ngx-tw-breadcrumbs.mjs.map +1 -0
  13. package/fesm2022/cdevhub-ngx-tw-button.mjs +227 -0
  14. package/fesm2022/cdevhub-ngx-tw-button.mjs.map +1 -0
  15. package/fesm2022/cdevhub-ngx-tw-calendar-luxon.mjs +417 -0
  16. package/fesm2022/cdevhub-ngx-tw-calendar-luxon.mjs.map +1 -0
  17. package/fesm2022/cdevhub-ngx-tw-calendar-testing.mjs +232 -0
  18. package/fesm2022/cdevhub-ngx-tw-calendar-testing.mjs.map +1 -0
  19. package/fesm2022/cdevhub-ngx-tw-calendar.mjs +4482 -0
  20. package/fesm2022/cdevhub-ngx-tw-calendar.mjs.map +1 -0
  21. package/fesm2022/cdevhub-ngx-tw-card.mjs +157 -0
  22. package/fesm2022/cdevhub-ngx-tw-card.mjs.map +1 -0
  23. package/fesm2022/cdevhub-ngx-tw-carousel.mjs +1454 -0
  24. package/fesm2022/cdevhub-ngx-tw-carousel.mjs.map +1 -0
  25. package/fesm2022/cdevhub-ngx-tw-checkbox.mjs +593 -0
  26. package/fesm2022/cdevhub-ngx-tw-checkbox.mjs.map +1 -0
  27. package/fesm2022/cdevhub-ngx-tw-code-block.mjs +228 -0
  28. package/fesm2022/cdevhub-ngx-tw-code-block.mjs.map +1 -0
  29. package/fesm2022/cdevhub-ngx-tw-collapsible.mjs +510 -0
  30. package/fesm2022/cdevhub-ngx-tw-collapsible.mjs.map +1 -0
  31. package/fesm2022/cdevhub-ngx-tw-combobox.mjs +1721 -0
  32. package/fesm2022/cdevhub-ngx-tw-combobox.mjs.map +1 -0
  33. package/fesm2022/cdevhub-ngx-tw-command-palette.mjs +721 -0
  34. package/fesm2022/cdevhub-ngx-tw-command-palette.mjs.map +1 -0
  35. package/fesm2022/cdevhub-ngx-tw-core.mjs +861 -0
  36. package/fesm2022/cdevhub-ngx-tw-core.mjs.map +1 -0
  37. package/fesm2022/cdevhub-ngx-tw-date-picker.mjs +1558 -0
  38. package/fesm2022/cdevhub-ngx-tw-date-picker.mjs.map +1 -0
  39. package/fesm2022/cdevhub-ngx-tw-date-range-picker.mjs +1833 -0
  40. package/fesm2022/cdevhub-ngx-tw-date-range-picker.mjs.map +1 -0
  41. package/fesm2022/cdevhub-ngx-tw-dialog.mjs +693 -0
  42. package/fesm2022/cdevhub-ngx-tw-dialog.mjs.map +1 -0
  43. package/fesm2022/cdevhub-ngx-tw-empty-state.mjs +331 -0
  44. package/fesm2022/cdevhub-ngx-tw-empty-state.mjs.map +1 -0
  45. package/fesm2022/cdevhub-ngx-tw-flip-card.mjs +289 -0
  46. package/fesm2022/cdevhub-ngx-tw-flip-card.mjs.map +1 -0
  47. package/fesm2022/cdevhub-ngx-tw-form-field.mjs +572 -0
  48. package/fesm2022/cdevhub-ngx-tw-form-field.mjs.map +1 -0
  49. package/fesm2022/cdevhub-ngx-tw-icon-lucide.mjs +36 -0
  50. package/fesm2022/cdevhub-ngx-tw-icon-lucide.mjs.map +1 -0
  51. package/fesm2022/cdevhub-ngx-tw-icon.mjs +278 -0
  52. package/fesm2022/cdevhub-ngx-tw-icon.mjs.map +1 -0
  53. package/fesm2022/cdevhub-ngx-tw-input.mjs +355 -0
  54. package/fesm2022/cdevhub-ngx-tw-input.mjs.map +1 -0
  55. package/fesm2022/cdevhub-ngx-tw-item.mjs +241 -0
  56. package/fesm2022/cdevhub-ngx-tw-item.mjs.map +1 -0
  57. package/fesm2022/cdevhub-ngx-tw-menu.mjs +433 -0
  58. package/fesm2022/cdevhub-ngx-tw-menu.mjs.map +1 -0
  59. package/fesm2022/cdevhub-ngx-tw-paginator.mjs +691 -0
  60. package/fesm2022/cdevhub-ngx-tw-paginator.mjs.map +1 -0
  61. package/fesm2022/cdevhub-ngx-tw-popover.mjs +678 -0
  62. package/fesm2022/cdevhub-ngx-tw-popover.mjs.map +1 -0
  63. package/fesm2022/cdevhub-ngx-tw-progress-bar.mjs +335 -0
  64. package/fesm2022/cdevhub-ngx-tw-progress-bar.mjs.map +1 -0
  65. package/fesm2022/cdevhub-ngx-tw-radio.mjs +708 -0
  66. package/fesm2022/cdevhub-ngx-tw-radio.mjs.map +1 -0
  67. package/fesm2022/cdevhub-ngx-tw-segmented-control.mjs +319 -0
  68. package/fesm2022/cdevhub-ngx-tw-segmented-control.mjs.map +1 -0
  69. package/fesm2022/cdevhub-ngx-tw-select.mjs +1722 -0
  70. package/fesm2022/cdevhub-ngx-tw-select.mjs.map +1 -0
  71. package/fesm2022/cdevhub-ngx-tw-separator.mjs +115 -0
  72. package/fesm2022/cdevhub-ngx-tw-separator.mjs.map +1 -0
  73. package/fesm2022/cdevhub-ngx-tw-sheet.mjs +768 -0
  74. package/fesm2022/cdevhub-ngx-tw-sheet.mjs.map +1 -0
  75. package/fesm2022/cdevhub-ngx-tw-skeleton.mjs +149 -0
  76. package/fesm2022/cdevhub-ngx-tw-skeleton.mjs.map +1 -0
  77. package/fesm2022/cdevhub-ngx-tw-slider.mjs +1147 -0
  78. package/fesm2022/cdevhub-ngx-tw-slider.mjs.map +1 -0
  79. package/fesm2022/cdevhub-ngx-tw-sort.mjs +346 -0
  80. package/fesm2022/cdevhub-ngx-tw-sort.mjs.map +1 -0
  81. package/fesm2022/cdevhub-ngx-tw-spinner.mjs +186 -0
  82. package/fesm2022/cdevhub-ngx-tw-spinner.mjs.map +1 -0
  83. package/fesm2022/cdevhub-ngx-tw-split.mjs +1082 -0
  84. package/fesm2022/cdevhub-ngx-tw-split.mjs.map +1 -0
  85. package/fesm2022/cdevhub-ngx-tw-stat.mjs +579 -0
  86. package/fesm2022/cdevhub-ngx-tw-stat.mjs.map +1 -0
  87. package/fesm2022/cdevhub-ngx-tw-stepper.mjs +443 -0
  88. package/fesm2022/cdevhub-ngx-tw-stepper.mjs.map +1 -0
  89. package/fesm2022/cdevhub-ngx-tw-switch.mjs +391 -0
  90. package/fesm2022/cdevhub-ngx-tw-switch.mjs.map +1 -0
  91. package/fesm2022/cdevhub-ngx-tw-tab-nav.mjs +315 -0
  92. package/fesm2022/cdevhub-ngx-tw-tab-nav.mjs.map +1 -0
  93. package/fesm2022/cdevhub-ngx-tw-table.mjs +994 -0
  94. package/fesm2022/cdevhub-ngx-tw-table.mjs.map +1 -0
  95. package/fesm2022/cdevhub-ngx-tw-tabs.mjs +508 -0
  96. package/fesm2022/cdevhub-ngx-tw-tabs.mjs.map +1 -0
  97. package/fesm2022/cdevhub-ngx-tw-textarea.mjs +147 -0
  98. package/fesm2022/cdevhub-ngx-tw-textarea.mjs.map +1 -0
  99. package/fesm2022/cdevhub-ngx-tw-theme.mjs +178 -0
  100. package/fesm2022/cdevhub-ngx-tw-theme.mjs.map +1 -0
  101. package/fesm2022/cdevhub-ngx-tw-time-picker.mjs +1344 -0
  102. package/fesm2022/cdevhub-ngx-tw-time-picker.mjs.map +1 -0
  103. package/fesm2022/cdevhub-ngx-tw-timeline.mjs +1136 -0
  104. package/fesm2022/cdevhub-ngx-tw-timeline.mjs.map +1 -0
  105. package/fesm2022/cdevhub-ngx-tw-toast.mjs +1311 -0
  106. package/fesm2022/cdevhub-ngx-tw-toast.mjs.map +1 -0
  107. package/fesm2022/cdevhub-ngx-tw-tooltip.mjs +533 -0
  108. package/fesm2022/cdevhub-ngx-tw-tooltip.mjs.map +1 -0
  109. package/fesm2022/cdevhub-ngx-tw.mjs +61 -0
  110. package/fesm2022/cdevhub-ngx-tw.mjs.map +1 -0
  111. package/package.json +265 -0
  112. package/theme/_base.css +394 -0
  113. package/theme/_dark.css +510 -0
  114. package/theme/_high-contrast.css +290 -0
  115. package/theme/_semantic.css +317 -0
  116. package/theme/_typography.css +9 -0
  117. package/theme/index.css +54 -0
  118. package/types/cdevhub-ngx-tw-accordion.d.ts +48 -0
  119. package/types/cdevhub-ngx-tw-alert.d.ts +67 -0
  120. package/types/cdevhub-ngx-tw-avatar.d.ts +79 -0
  121. package/types/cdevhub-ngx-tw-badge.d.ts +94 -0
  122. package/types/cdevhub-ngx-tw-breadcrumbs.d.ts +227 -0
  123. package/types/cdevhub-ngx-tw-button.d.ts +74 -0
  124. package/types/cdevhub-ngx-tw-calendar-luxon.d.ts +200 -0
  125. package/types/cdevhub-ngx-tw-calendar-testing.d.ts +113 -0
  126. package/types/cdevhub-ngx-tw-calendar.d.ts +1704 -0
  127. package/types/cdevhub-ngx-tw-card.d.ts +48 -0
  128. package/types/cdevhub-ngx-tw-carousel.d.ts +406 -0
  129. package/types/cdevhub-ngx-tw-checkbox.d.ts +136 -0
  130. package/types/cdevhub-ngx-tw-code-block.d.ts +93 -0
  131. package/types/cdevhub-ngx-tw-collapsible.d.ts +151 -0
  132. package/types/cdevhub-ngx-tw-combobox.d.ts +389 -0
  133. package/types/cdevhub-ngx-tw-command-palette.d.ts +215 -0
  134. package/types/cdevhub-ngx-tw-core.d.ts +719 -0
  135. package/types/cdevhub-ngx-tw-date-picker.d.ts +317 -0
  136. package/types/cdevhub-ngx-tw-date-range-picker.d.ts +313 -0
  137. package/types/cdevhub-ngx-tw-dialog.d.ts +303 -0
  138. package/types/cdevhub-ngx-tw-empty-state.d.ts +104 -0
  139. package/types/cdevhub-ngx-tw-flip-card.d.ts +95 -0
  140. package/types/cdevhub-ngx-tw-form-field.d.ts +210 -0
  141. package/types/cdevhub-ngx-tw-icon-lucide.d.ts +29 -0
  142. package/types/cdevhub-ngx-tw-icon.d.ts +134 -0
  143. package/types/cdevhub-ngx-tw-input.d.ts +110 -0
  144. package/types/cdevhub-ngx-tw-item.d.ts +70 -0
  145. package/types/cdevhub-ngx-tw-menu.d.ts +99 -0
  146. package/types/cdevhub-ngx-tw-paginator.d.ts +305 -0
  147. package/types/cdevhub-ngx-tw-popover.d.ts +157 -0
  148. package/types/cdevhub-ngx-tw-progress-bar.d.ts +100 -0
  149. package/types/cdevhub-ngx-tw-radio.d.ts +174 -0
  150. package/types/cdevhub-ngx-tw-segmented-control.d.ts +66 -0
  151. package/types/cdevhub-ngx-tw-select.d.ts +384 -0
  152. package/types/cdevhub-ngx-tw-separator.d.ts +28 -0
  153. package/types/cdevhub-ngx-tw-sheet.d.ts +335 -0
  154. package/types/cdevhub-ngx-tw-skeleton.d.ts +52 -0
  155. package/types/cdevhub-ngx-tw-slider.d.ts +258 -0
  156. package/types/cdevhub-ngx-tw-sort.d.ts +136 -0
  157. package/types/cdevhub-ngx-tw-spinner.d.ts +50 -0
  158. package/types/cdevhub-ngx-tw-split.d.ts +265 -0
  159. package/types/cdevhub-ngx-tw-stat.d.ts +140 -0
  160. package/types/cdevhub-ngx-tw-stepper.d.ts +127 -0
  161. package/types/cdevhub-ngx-tw-switch.d.ts +88 -0
  162. package/types/cdevhub-ngx-tw-tab-nav.d.ts +107 -0
  163. package/types/cdevhub-ngx-tw-table.d.ts +479 -0
  164. package/types/cdevhub-ngx-tw-tabs.d.ts +121 -0
  165. package/types/cdevhub-ngx-tw-textarea.d.ts +62 -0
  166. package/types/cdevhub-ngx-tw-theme.d.ts +106 -0
  167. package/types/cdevhub-ngx-tw-time-picker.d.ts +303 -0
  168. package/types/cdevhub-ngx-tw-timeline.d.ts +278 -0
  169. package/types/cdevhub-ngx-tw-toast.d.ts +388 -0
  170. package/types/cdevhub-ngx-tw-tooltip.d.ts +95 -0
  171. package/types/cdevhub-ngx-tw.d.ts +49 -0
package/theme/_base.css ADDED
@@ -0,0 +1,394 @@
1
+ :root {
2
+ color-scheme: light;
3
+ }
4
+
5
+ [data-theme="dark"] {
6
+ color-scheme: dark;
7
+ }
8
+
9
+ body {
10
+ background-color: var(--color-surface);
11
+ color: var(--color-fg);
12
+ }
13
+
14
+ /* ── Library utilities ── */
15
+
16
+ /* Hides scrollbars while preserving scroll behavior. Library-wide helper used
17
+ by components with internal scroll regions (e.g. code-block); also available
18
+ to consumers who import this theme. */
19
+ @layer utilities {
20
+ .tw-scrollbar-none { scrollbar-width: none; }
21
+ .tw-scrollbar-none::-webkit-scrollbar { display: none; }
22
+ }
23
+
24
+ /* Applied to <body> during a tw-split drag to suppress text selection
25
+ and unify the cursor across iframes / scroll containers. */
26
+ .tw-split-no-select {
27
+ user-select: none;
28
+ -webkit-user-select: none;
29
+ }
30
+
31
+ /* ── Animation keyframes ──
32
+ *
33
+ * Timing scale (single source of truth — keep paired enter/leave consistent):
34
+ * 100ms — bare-fade leave (tooltip-style exits)
35
+ * 120ms — overlay leave (scale-out, accelerate curve)
36
+ * 140ms — overlay enter (scale-in, expo-out curve)
37
+ * 150ms — content transitions (collapsible, toast slide, step panel, check pop)
38
+ * 300ms — full transforms (flip-card)
39
+ *
40
+ * Convention: enter uses ease-out / expo-out (decelerate into rest);
41
+ * leave uses ease-in / accelerate (get out of the way fast).
42
+ * leave duration ≤ enter duration.
43
+ */
44
+
45
+ @keyframes fade-in {
46
+ from { opacity: 0; }
47
+ to { opacity: 1; }
48
+ }
49
+ .fade-in {
50
+ animation: fade-in 120ms ease-out;
51
+ }
52
+
53
+ @keyframes fade-out {
54
+ from { opacity: 1; }
55
+ to { opacity: 0; }
56
+ }
57
+ .fade-out {
58
+ animation: fade-out 100ms ease-out;
59
+ }
60
+
61
+ @keyframes scale-in {
62
+ from { opacity: 0; transform: translateY(-4px) scale(0.97); }
63
+ to { opacity: 1; transform: translateY(0) scale(1); }
64
+ }
65
+ .scale-in {
66
+ animation: scale-in 140ms cubic-bezier(0.16, 1, 0.3, 1);
67
+ transform-origin: top;
68
+ will-change: opacity, transform;
69
+ }
70
+
71
+ @keyframes scale-out {
72
+ from { opacity: 1; transform: translateY(0) scale(1); }
73
+ to { opacity: 0; transform: translateY(-4px) scale(0.97); }
74
+ }
75
+ .scale-out {
76
+ animation: scale-out 120ms cubic-bezier(0.4, 0, 1, 1);
77
+ transform-origin: top;
78
+ will-change: opacity, transform;
79
+ }
80
+
81
+ @keyframes collapsible-enter {
82
+ from { opacity: 0; max-height: 0; }
83
+ to { opacity: 1; max-height: var(--collapsible-max-height, 500px); }
84
+ }
85
+ .collapsible-enter {
86
+ animation: collapsible-enter 150ms ease-out;
87
+ }
88
+
89
+ @keyframes collapsible-leave {
90
+ from { opacity: 1; max-height: var(--collapsible-max-height, 500px); }
91
+ to { opacity: 0; max-height: 0; }
92
+ }
93
+ .collapsible-leave {
94
+ animation: collapsible-leave 150ms ease-in;
95
+ }
96
+
97
+ /* Check / indeterminate glyph enter — combined scale + opacity pop for a tactile feel. */
98
+ @keyframes check-in {
99
+ from { opacity: 0; transform: scale(0.6); }
100
+ to { opacity: 1; transform: scale(1); }
101
+ }
102
+ .check-in {
103
+ animation: check-in 150ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
104
+ transform-origin: center;
105
+ }
106
+
107
+ /* keepAlive mode: CSS transitions for grid-based height animation */
108
+ .collapsible-keep-alive {
109
+ display: grid;
110
+ grid-template-rows: 1fr;
111
+ opacity: 1;
112
+ transition: grid-template-rows 150ms ease, opacity 150ms ease;
113
+ }
114
+ .collapsible-keep-alive[data-open="false"] {
115
+ grid-template-rows: 0fr;
116
+ opacity: 0;
117
+ }
118
+
119
+ /* Dialog backdrop fades in/out with CDK's backdrop-showing class. */
120
+ .tw-dialog-backdrop {
121
+ background-color: rgb(0 0 0 / 0.5);
122
+ opacity: 0;
123
+ transition: opacity 150ms ease-out;
124
+ }
125
+ .tw-dialog-backdrop.cdk-overlay-backdrop-showing {
126
+ opacity: 1;
127
+ }
128
+
129
+ /* Sheet backdrop fades in/out with CDK's backdrop-showing class. */
130
+ .tw-sheet-backdrop {
131
+ background-color: rgb(0 0 0 / 0.5);
132
+ opacity: 0;
133
+ transition: opacity 200ms ease-out;
134
+ }
135
+ .tw-sheet-backdrop.cdk-overlay-backdrop-showing {
136
+ opacity: 1;
137
+ }
138
+
139
+ /* ── Spinner — dots variant ── */
140
+
141
+ @keyframes tw-spinner-dots-bounce {
142
+ 0%, 80%, 100% { transform: scale(0.3); opacity: 0.4; }
143
+ 40% { transform: scale(1); opacity: 1; }
144
+ }
145
+ .tw-spinner-dot {
146
+ display: inline-block;
147
+ width: 25%;
148
+ height: 25%;
149
+ background: currentColor;
150
+ border-radius: 9999px;
151
+ animation: tw-spinner-dots-bounce 1.2s ease-in-out infinite both;
152
+ }
153
+
154
+ /* ── Spinner — bars variant ── */
155
+
156
+ @keyframes tw-spinner-bars-stretch {
157
+ 0%, 40%, 100% { transform: scaleY(0.4); }
158
+ 20% { transform: scaleY(1); }
159
+ }
160
+ .tw-spinner-bar {
161
+ display: inline-block;
162
+ width: 15%;
163
+ height: 100%;
164
+ background: currentColor;
165
+ border-radius: 2px;
166
+ transform-origin: center;
167
+ animation: tw-spinner-bars-stretch 1s ease-in-out infinite;
168
+ }
169
+
170
+ /* ── Skeleton ── */
171
+
172
+ /* Pulse: gentle opacity fade. Theme-friendly; works on any background color. */
173
+ @keyframes tw-skeleton-pulse {
174
+ 0%, 100% { opacity: 1; }
175
+ 50% { opacity: 0.5; }
176
+ }
177
+ .skeleton-pulse {
178
+ animation: tw-skeleton-pulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
179
+ }
180
+
181
+ /* Wave: shimmer band sweeps left-to-right via an absolutely-positioned
182
+ gradient pseudo-element. Requires the host to be position: relative;
183
+ overflow: hidden; (already on the .skeleton base classes). */
184
+ @keyframes tw-skeleton-wave {
185
+ 0% { transform: translateX(-100%); }
186
+ 100% { transform: translateX(100%); }
187
+ }
188
+ .skeleton-wave::after {
189
+ content: '';
190
+ position: absolute;
191
+ inset: 0;
192
+ transform: translateX(-100%);
193
+ background: linear-gradient(
194
+ 90deg,
195
+ transparent 0%,
196
+ rgb(255 255 255 / 0.08) 50%,
197
+ transparent 100%
198
+ );
199
+ animation: tw-skeleton-wave 1.6s linear infinite;
200
+ }
201
+
202
+ /* ── Progress bar — indeterminate sweep ── */
203
+
204
+ @keyframes progress-bar-indeterminate {
205
+ 0% { transform: translateX(-100%); }
206
+ 100% { transform: translateX(400%); }
207
+ }
208
+ .animate-progress-bar-indeterminate {
209
+ animation: progress-bar-indeterminate 1.5s linear infinite;
210
+ }
211
+
212
+ /* ── Stepper — panel transitions ── */
213
+
214
+ @keyframes step-panel-enter-forward {
215
+ from { opacity: 0; transform: translateX(12px); }
216
+ to { opacity: 1; transform: translateX(0); }
217
+ }
218
+ .step-panel-enter-forward {
219
+ animation: step-panel-enter-forward 150ms ease-out;
220
+ }
221
+
222
+ @keyframes step-panel-enter-backward {
223
+ from { opacity: 0; transform: translateX(-12px); }
224
+ to { opacity: 1; transform: translateX(0); }
225
+ }
226
+ .step-panel-enter-backward {
227
+ animation: step-panel-enter-backward 150ms ease-out;
228
+ }
229
+
230
+ /* ── Timeline — item enter ── */
231
+
232
+ @keyframes timeline-item-enter {
233
+ from { opacity: 0; transform: translateY(-4px); }
234
+ to { opacity: 1; transform: none; }
235
+ }
236
+ .timeline-item-enter {
237
+ animation: timeline-item-enter 200ms ease-out;
238
+ }
239
+
240
+ @keyframes timeline-item-enter-horizontal {
241
+ from { opacity: 0; transform: translateX(-4px); }
242
+ to { opacity: 1; transform: none; }
243
+ }
244
+ .timeline-item-enter-horizontal {
245
+ animation: timeline-item-enter-horizontal 200ms ease-out;
246
+ }
247
+
248
+ /* ── Carousel — loop-jump opacity mask ── */
249
+
250
+ @keyframes tw-carousel-loop-jump {
251
+ 0% { opacity: 1; }
252
+ 40% { opacity: 0.55; }
253
+ 100% { opacity: 1; }
254
+ }
255
+ .tw-carousel-loop-jump {
256
+ animation: tw-carousel-loop-jump 200ms ease-in-out;
257
+ }
258
+
259
+ /* ── Flip card — 3D transform primitives ── */
260
+
261
+ .tw-flip-perspective {
262
+ perspective: 1000px;
263
+ }
264
+
265
+ .tw-flip-inner {
266
+ transform-style: preserve-3d;
267
+ }
268
+
269
+ .tw-flip-face {
270
+ backface-visibility: hidden;
271
+ -webkit-backface-visibility: hidden;
272
+ }
273
+
274
+ .tw-flip-axis-y.tw-flip-rotated {
275
+ transform: rotateY(180deg);
276
+ }
277
+ .tw-flip-back-y {
278
+ transform: rotateY(180deg);
279
+ }
280
+
281
+ .tw-flip-axis-x.tw-flip-rotated {
282
+ transform: rotateX(180deg);
283
+ }
284
+ .tw-flip-back-x {
285
+ transform: rotateX(180deg);
286
+ }
287
+
288
+ /* ── Toast / snackbar ── */
289
+
290
+ /* The overlay pane lets clicks fall through between stacked toasts; each toast
291
+ re-enables pointer events on itself. */
292
+ .tw-toast-overlay {
293
+ pointer-events: none;
294
+ padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
295
+ }
296
+
297
+ @keyframes toast-slide-in-right {
298
+ from { opacity: 0; transform: translate3d(100%, 0, 0); }
299
+ to { opacity: 1; transform: translate3d(0, 0, 0); }
300
+ }
301
+ @keyframes toast-slide-out-right {
302
+ from { opacity: 1; transform: translate3d(0, 0, 0); }
303
+ to { opacity: 0; transform: translate3d(100%, 0, 0); }
304
+ }
305
+ @keyframes toast-slide-in-left {
306
+ from { opacity: 0; transform: translate3d(-100%, 0, 0); }
307
+ to { opacity: 1; transform: translate3d(0, 0, 0); }
308
+ }
309
+ @keyframes toast-slide-out-left {
310
+ from { opacity: 1; transform: translate3d(0, 0, 0); }
311
+ to { opacity: 0; transform: translate3d(-100%, 0, 0); }
312
+ }
313
+ @keyframes toast-slide-in-top {
314
+ from { opacity: 0; transform: translate3d(0, -100%, 0); }
315
+ to { opacity: 1; transform: translate3d(0, 0, 0); }
316
+ }
317
+ @keyframes toast-slide-out-top {
318
+ from { opacity: 1; transform: translate3d(0, 0, 0); }
319
+ to { opacity: 0; transform: translate3d(0, -100%, 0); }
320
+ }
321
+ @keyframes toast-slide-in-bottom {
322
+ from { opacity: 0; transform: translate3d(0, 100%, 0); }
323
+ to { opacity: 1; transform: translate3d(0, 0, 0); }
324
+ }
325
+ @keyframes toast-slide-out-bottom {
326
+ from { opacity: 1; transform: translate3d(0, 0, 0); }
327
+ to { opacity: 0; transform: translate3d(0, 100%, 0); }
328
+ }
329
+
330
+ .toast-enter-right { animation: toast-slide-in-right 150ms ease-out; }
331
+ .toast-leave-right { animation: toast-slide-out-right 150ms ease-in; }
332
+ .toast-enter-left { animation: toast-slide-in-left 150ms ease-out; }
333
+ .toast-leave-left { animation: toast-slide-out-left 150ms ease-in; }
334
+ .toast-enter-top { animation: toast-slide-in-top 150ms ease-out; }
335
+ .toast-leave-top { animation: toast-slide-out-top 150ms ease-in; }
336
+ .toast-enter-bottom { animation: toast-slide-in-bottom 150ms ease-out; }
337
+ .toast-leave-bottom { animation: toast-slide-out-bottom 150ms ease-in; }
338
+
339
+ @media (prefers-reduced-motion: reduce) {
340
+ .toast-enter-right, .toast-leave-right,
341
+ .toast-enter-left, .toast-leave-left,
342
+ .toast-enter-top, .toast-leave-top,
343
+ .toast-enter-bottom, .toast-leave-bottom {
344
+ animation-duration: 0ms;
345
+ }
346
+ }
347
+
348
+ @media (prefers-reduced-motion: reduce) {
349
+ .fade-out { animation-duration: 0ms; }
350
+ .fade-in { animation-duration: 0ms; }
351
+ .scale-in { animation-duration: 0ms; }
352
+ .scale-out { animation-duration: 0ms; }
353
+ .collapsible-enter { animation-duration: 0ms; }
354
+ .collapsible-leave { animation-duration: 0ms; }
355
+ .collapsible-keep-alive { transition-duration: 0ms; }
356
+ .check-in { animation-duration: 0ms; }
357
+ .step-panel-enter-forward,
358
+ .step-panel-enter-backward { animation-duration: 0ms; }
359
+ .timeline-item-enter,
360
+ .timeline-item-enter-horizontal { animation-duration: 0ms; transform: none; }
361
+ .tw-carousel-loop-jump { animation-duration: 0ms; }
362
+ .tw-dialog-backdrop { transition-duration: 0ms; }
363
+ .tw-sheet-backdrop { transition-duration: 0ms; }
364
+ .tw-spinner-dot,
365
+ .tw-spinner-bar { animation-duration: 0ms; animation-iteration-count: 1; }
366
+ .tw-flip-inner { transition-duration: 0ms; }
367
+ .animate-progress-bar-indeterminate {
368
+ animation-duration: 0ms;
369
+ transform: translateX(35%);
370
+ }
371
+ .skeleton-pulse,
372
+ .skeleton-wave::after {
373
+ animation-duration: 0ms;
374
+ animation-iteration-count: 1;
375
+ }
376
+ }
377
+
378
+ /* Universal reduced-motion guard. Components that use Tailwind utilities
379
+ without explicit `motion-reduce:` variants still need to honour user
380
+ preference (and pass the reduced-motion drift e2e). This sweeps the
381
+ long tail of inline `transition-*` / `animate-*` usages without
382
+ touching the per-component class strings. The named-class rules above
383
+ stay as the authoritative source for animation-specific tuning. */
384
+ @media (prefers-reduced-motion: reduce) {
385
+ *,
386
+ *::before,
387
+ *::after {
388
+ transition-duration: 0s !important;
389
+ transition-delay: 0s !important;
390
+ animation-duration: 1ms !important;
391
+ animation-iteration-count: 1 !important;
392
+ animation-delay: 0s !important;
393
+ }
394
+ }