@rafael_dias/akoma 0.3.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 (12) hide show
  1. package/README.md +101 -0
  2. package/dist/akoma.cjs +1 -0
  3. package/dist/akoma.css +2 -0
  4. package/dist/akoma.js +348 -0
  5. package/dist/favicon.svg +1 -0
  6. package/dist/icons.svg +24 -0
  7. package/dist/index.d.ts +267 -0
  8. package/package.json +64 -0
  9. package/src/styles/base.css +159 -0
  10. package/src/styles/index.css +3 -0
  11. package/src/styles/motion.css +206 -0
  12. package/src/styles/tokens.css +328 -0
package/dist/index.d.ts ADDED
@@ -0,0 +1,267 @@
1
+ import { ComponentOptionsMixin } from 'vue';
2
+ import { ComponentProvideOptions } from 'vue';
3
+ import { DefineComponent } from 'vue';
4
+ import { Plugin as Plugin_2 } from 'vue';
5
+ import { PublicProps } from 'vue';
6
+
7
+ declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
8
+ variant: ButtonVariant;
9
+ size: ButtonSize;
10
+ disabled: boolean;
11
+ loading: boolean;
12
+ type: "button" | "submit" | "reset";
13
+ block: boolean;
14
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
15
+
16
+ declare const __VLS_component_2: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{}>, {
17
+ variant: BadgeVariant;
18
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
19
+
20
+ declare const __VLS_component_3: DefineComponent<__VLS_Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
21
+ click: (event: MouseEvent) => any;
22
+ }, string, PublicProps, Readonly<__VLS_Props_3> & Readonly<{
23
+ onClick?: ((event: MouseEvent) => any) | undefined;
24
+ }>, {
25
+ disabled: boolean;
26
+ active: boolean;
27
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
28
+
29
+ declare const __VLS_component_4: DefineComponent<__VLS_Props_4, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_4> & Readonly<{}>, {
30
+ interactive: boolean;
31
+ padding: "none" | "sm" | "md" | "lg";
32
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
33
+
34
+ declare const __VLS_component_5: DefineComponent<__VLS_Props_7, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_7> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
35
+
36
+ declare type __VLS_Props = {
37
+ variant?: ButtonVariant;
38
+ size?: ButtonSize;
39
+ disabled?: boolean;
40
+ loading?: boolean;
41
+ type?: 'button' | 'submit' | 'reset';
42
+ block?: boolean;
43
+ };
44
+
45
+ declare type __VLS_Props_2 = {
46
+ variant?: BadgeVariant;
47
+ label?: string;
48
+ };
49
+
50
+ declare type __VLS_Props_3 = {
51
+ active?: boolean;
52
+ disabled?: boolean;
53
+ /** CSS color value used when active (e.g. var(--cat-1)) */
54
+ color?: string;
55
+ };
56
+
57
+ declare type __VLS_Props_4 = {
58
+ interactive?: boolean;
59
+ padding?: 'none' | 'sm' | 'md' | 'lg';
60
+ };
61
+
62
+ declare type __VLS_Props_5 = {
63
+ modelValue?: string | number;
64
+ label?: string;
65
+ placeholder?: string;
66
+ hint?: string;
67
+ error?: string;
68
+ type?: string;
69
+ disabled?: boolean;
70
+ required?: boolean;
71
+ size?: InputSize;
72
+ autocomplete?: string;
73
+ name?: string;
74
+ };
75
+
76
+ declare type __VLS_Props_6 = {
77
+ modelValue?: string;
78
+ label?: string;
79
+ placeholder?: string;
80
+ hint?: string;
81
+ error?: string;
82
+ disabled?: boolean;
83
+ required?: boolean;
84
+ rows?: number;
85
+ name?: string;
86
+ };
87
+
88
+ declare type __VLS_Props_7 = {
89
+ title: string;
90
+ description?: string;
91
+ };
92
+
93
+ declare type __VLS_Props_8 = {
94
+ width?: string;
95
+ height?: string;
96
+ radius?: 'sm' | 'md' | 'lg' | 'full' | string;
97
+ };
98
+
99
+ declare type __VLS_Props_9 = {
100
+ /** Use absolute positioning inside a relative parent (docs/previews). */
101
+ contained?: boolean;
102
+ };
103
+
104
+ declare function __VLS_template(): {
105
+ attrs: Partial<{}>;
106
+ slots: Readonly<{
107
+ default?: () => unknown;
108
+ icon?: () => unknown;
109
+ }> & {
110
+ default?: () => unknown;
111
+ icon?: () => unknown;
112
+ };
113
+ refs: {};
114
+ rootEl: HTMLButtonElement;
115
+ };
116
+
117
+ declare function __VLS_template_2(): {
118
+ attrs: Partial<{}>;
119
+ slots: Readonly<{
120
+ default?: () => unknown;
121
+ }> & {
122
+ default?: () => unknown;
123
+ };
124
+ refs: {};
125
+ rootEl: HTMLSpanElement;
126
+ };
127
+
128
+ declare function __VLS_template_3(): {
129
+ attrs: Partial<{}>;
130
+ slots: Readonly<{
131
+ default?: () => unknown;
132
+ }> & {
133
+ default?: () => unknown;
134
+ };
135
+ refs: {};
136
+ rootEl: HTMLButtonElement;
137
+ };
138
+
139
+ declare function __VLS_template_4(): {
140
+ attrs: Partial<{}>;
141
+ slots: Readonly<{
142
+ default?: () => unknown;
143
+ media?: () => unknown;
144
+ header?: () => unknown;
145
+ footer?: () => unknown;
146
+ }> & {
147
+ default?: () => unknown;
148
+ media?: () => unknown;
149
+ header?: () => unknown;
150
+ footer?: () => unknown;
151
+ };
152
+ refs: {};
153
+ rootEl: HTMLElement;
154
+ };
155
+
156
+ declare function __VLS_template_5(): {
157
+ attrs: Partial<{}>;
158
+ slots: Readonly<{
159
+ icon?: () => unknown;
160
+ action?: () => unknown;
161
+ }> & {
162
+ icon?: () => unknown;
163
+ action?: () => unknown;
164
+ };
165
+ refs: {};
166
+ rootEl: HTMLDivElement;
167
+ };
168
+
169
+ declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
170
+
171
+ declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
172
+
173
+ declare type __VLS_TemplateResult_3 = ReturnType<typeof __VLS_template_3>;
174
+
175
+ declare type __VLS_TemplateResult_4 = ReturnType<typeof __VLS_template_4>;
176
+
177
+ declare type __VLS_TemplateResult_5 = ReturnType<typeof __VLS_template_5>;
178
+
179
+ declare type __VLS_WithTemplateSlots<T, S> = T & {
180
+ new (): {
181
+ $slots: S;
182
+ };
183
+ };
184
+
185
+ declare type __VLS_WithTemplateSlots_2<T, S> = T & {
186
+ new (): {
187
+ $slots: S;
188
+ };
189
+ };
190
+
191
+ declare type __VLS_WithTemplateSlots_3<T, S> = T & {
192
+ new (): {
193
+ $slots: S;
194
+ };
195
+ };
196
+
197
+ declare type __VLS_WithTemplateSlots_4<T, S> = T & {
198
+ new (): {
199
+ $slots: S;
200
+ };
201
+ };
202
+
203
+ declare type __VLS_WithTemplateSlots_5<T, S> = T & {
204
+ new (): {
205
+ $slots: S;
206
+ };
207
+ };
208
+
209
+ export declare const AkAmbientBg: DefineComponent<__VLS_Props_9, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_9> & Readonly<{}>, {
210
+ contained: boolean;
211
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
212
+
213
+ export declare const AkBadge: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
214
+
215
+ export declare const AkButton: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
216
+
217
+ export declare const AkCard: __VLS_WithTemplateSlots_4<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
218
+
219
+ export declare const AkChip: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
220
+
221
+ export declare const AkEmptyState: __VLS_WithTemplateSlots_5<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
222
+
223
+ export declare const AkInput: DefineComponent<__VLS_Props_5, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
224
+ "update:modelValue": (value: string) => any;
225
+ }, string, PublicProps, Readonly<__VLS_Props_5> & Readonly<{
226
+ "onUpdate:modelValue"?: ((value: string) => any) | undefined;
227
+ }>, {
228
+ size: InputSize;
229
+ disabled: boolean;
230
+ type: string;
231
+ modelValue: string | number;
232
+ required: boolean;
233
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLLabelElement>;
234
+
235
+ export declare const Akoma: Plugin_2;
236
+
237
+ export declare type AkomaOptions = {
238
+ /** Prefix for global component registration. Default: none (uses Ak* names). */
239
+ prefix?: string;
240
+ };
241
+
242
+ export declare const AkShimmer: DefineComponent<__VLS_Props_8, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_8> & Readonly<{}>, {
243
+ width: string;
244
+ height: string;
245
+ radius: "sm" | "md" | "lg" | "full" | string;
246
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
247
+
248
+ export declare const AkTextarea: DefineComponent<__VLS_Props_6, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
249
+ "update:modelValue": (value: string) => any;
250
+ }, string, PublicProps, Readonly<__VLS_Props_6> & Readonly<{
251
+ "onUpdate:modelValue"?: ((value: string) => any) | undefined;
252
+ }>, {
253
+ disabled: boolean;
254
+ modelValue: string;
255
+ required: boolean;
256
+ rows: number;
257
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLLabelElement>;
258
+
259
+ export declare type BadgeVariant = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
260
+
261
+ export declare type ButtonSize = 'sm' | 'md' | 'lg';
262
+
263
+ export declare type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
264
+
265
+ export declare type InputSize = 'sm' | 'md' | 'lg';
266
+
267
+ export { }
package/package.json ADDED
@@ -0,0 +1,64 @@
1
+ {
2
+ "name": "@rafael_dias/akoma",
3
+ "version": "0.3.0",
4
+ "description": "A human Vue 3 design system with expressive App and trustworthy Site moods.",
5
+ "type": "module",
6
+ "author": "Rafael",
7
+ "license": "MIT",
8
+ "keywords": [
9
+ "vue",
10
+ "vue3",
11
+ "design-system",
12
+ "ui",
13
+ "components",
14
+ "akoma"
15
+ ],
16
+ "sideEffects": [
17
+ "**/*.css"
18
+ ],
19
+ "main": "./dist/akoma.cjs",
20
+ "module": "./dist/akoma.js",
21
+ "types": "./dist/index.d.ts",
22
+ "exports": {
23
+ ".": {
24
+ "types": "./dist/index.d.ts",
25
+ "import": "./dist/akoma.js",
26
+ "require": "./dist/akoma.cjs"
27
+ },
28
+ "./style.css": "./dist/akoma.css",
29
+ "./tokens.css": "./src/styles/tokens.css",
30
+ "./base.css": "./src/styles/base.css",
31
+ "./motion.css": "./src/styles/motion.css"
32
+ },
33
+ "files": [
34
+ "dist",
35
+ "src/styles"
36
+ ],
37
+ "publishConfig": {
38
+ "access": "public",
39
+ "registry": "https://registry.npmjs.org/"
40
+ },
41
+ "scripts": {
42
+ "dev": "vite",
43
+ "build": "vue-tsc -p tsconfig.lib.json --declaration --emitDeclarationOnly && vite build --config vite.lib.config.ts",
44
+ "build:docs": "vite build",
45
+ "preview": "vite preview",
46
+ "typecheck": "vue-tsc -p tsconfig.app.json --noEmit"
47
+ },
48
+ "peerDependencies": {
49
+ "vue": "^3.5.0"
50
+ },
51
+ "dependencies": {
52
+ "vue": "^3.5.39"
53
+ },
54
+ "devDependencies": {
55
+ "@types/node": "^24.13.2",
56
+ "@vitejs/plugin-vue": "^6.0.7",
57
+ "@vue/tsconfig": "^0.9.1",
58
+ "typescript": "~6.0.2",
59
+ "vite": "^8.1.1",
60
+ "vite-plugin-dts": "^4.5.4",
61
+ "vue-router": "^4.6.4",
62
+ "vue-tsc": "^3.3.5"
63
+ }
64
+ }
package/src/styles/base.css ADDED
@@ -0,0 +1,159 @@
1
+ /* Akoma — reset, typography and shared page primitives */
2
+
3
+ *,
4
+ *::before,
5
+ *::after {
6
+ box-sizing: border-box;
7
+ margin: 0;
8
+ padding: 0;
9
+ }
10
+
11
+ html {
12
+ -webkit-text-size-adjust: 100%;
13
+ -webkit-tap-highlight-color: transparent;
14
+ }
15
+
16
+ html,
17
+ body,
18
+ #app {
19
+ transition:
20
+ background-color 280ms var(--ease-smooth),
21
+ color 280ms var(--ease-smooth);
22
+ }
23
+
24
+ body {
25
+ min-height: 100dvh;
26
+ overflow-x: hidden;
27
+ color: var(--text);
28
+ background: var(--bg);
29
+ font-family: var(--font-body);
30
+ font-size: 15px;
31
+ font-weight: 400;
32
+ line-height: 1.6;
33
+ font-feature-settings: 'kern' 1, 'liga' 1;
34
+ text-rendering: optimizeLegibility;
35
+ -webkit-font-smoothing: antialiased;
36
+ }
37
+
38
+ #app {
39
+ min-height: 100dvh;
40
+ }
41
+
42
+ h1,
43
+ h2,
44
+ h3,
45
+ h4 {
46
+ color: var(--text);
47
+ font-family: var(--font-display);
48
+ font-weight: 650;
49
+ line-height: 1.16;
50
+ letter-spacing: -0.03em;
51
+ text-wrap: balance;
52
+ }
53
+
54
+ p {
55
+ text-wrap: pretty;
56
+ }
57
+
58
+ button {
59
+ border: 0;
60
+ background: none;
61
+ color: inherit;
62
+ font: inherit;
63
+ cursor: pointer;
64
+ }
65
+
66
+ input,
67
+ textarea,
68
+ select {
69
+ color: inherit;
70
+ font: inherit;
71
+ }
72
+
73
+ a {
74
+ color: inherit;
75
+ text-decoration: none;
76
+ }
77
+
78
+ img {
79
+ display: block;
80
+ max-width: 100%;
81
+ }
82
+
83
+ code,
84
+ pre {
85
+ font-family: var(--font-mono);
86
+ }
87
+
88
+ button:focus-visible,
89
+ a:focus-visible,
90
+ input:focus-visible,
91
+ textarea:focus-visible,
92
+ select:focus-visible {
93
+ outline: 2px solid var(--accent);
94
+ outline-offset: 3px;
95
+ }
96
+
97
+ .sr-only {
98
+ position: absolute;
99
+ width: 1px;
100
+ height: 1px;
101
+ padding: 0;
102
+ margin: -1px;
103
+ overflow: hidden;
104
+ clip: rect(0, 0, 0, 0);
105
+ white-space: nowrap;
106
+ border: 0;
107
+ }
108
+
109
+ .page-label {
110
+ display: block;
111
+ margin-bottom: var(--space-2);
112
+ color: var(--accent);
113
+ font-size: 13px;
114
+ font-weight: 700;
115
+ letter-spacing: 0.01em;
116
+ }
117
+
118
+ .page-title {
119
+ max-width: 18ch;
120
+ font-family: var(--font-display);
121
+ font-size: clamp(34px, 7vw, 46px);
122
+ font-weight: 650;
123
+ line-height: 1.08;
124
+ letter-spacing: -0.045em;
125
+ }
126
+
127
+ [data-mood='site'] .page-title {
128
+ font-size: clamp(34px, 6vw, 44px);
129
+ letter-spacing: -0.035em;
130
+ }
131
+
132
+ .akoma-page {
133
+ padding:
134
+ calc(var(--page-pad-top) + var(--safe-top))
135
+ var(--page-pad-x)
136
+ var(--page-pad-bottom);
137
+ }
138
+
139
+ .akoma-shell {
140
+ position: relative;
141
+ z-index: 1;
142
+ flex: 1;
143
+ width: 100%;
144
+ max-width: var(--shell-max);
145
+ margin: 0 auto;
146
+ padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 12px);
147
+ }
148
+
149
+ .numeric {
150
+ font-variant-numeric: tabular-nums lining-nums;
151
+ }
152
+
153
+ @media (prefers-reduced-motion: reduce) {
154
+ html,
155
+ body,
156
+ #app {
157
+ transition: none;
158
+ }
159
+ }
package/src/styles/index.css ADDED
@@ -0,0 +1,3 @@
1
+ @import './tokens.css';
2
+ @import './base.css';
3
+ @import './motion.css';
package/src/styles/motion.css ADDED
@@ -0,0 +1,206 @@
1
+ /* Akoma — motion utilities */
2
+
3
+ .ambient {
4
+ position: fixed;
5
+ inset: 0;
6
+ pointer-events: none;
7
+ z-index: 0;
8
+ overflow: hidden;
9
+ }
10
+
11
+ .ambient__orb {
12
+ position: absolute;
13
+ border-radius: 50%;
14
+ filter: blur(60px);
15
+ opacity: 0.45;
16
+ animation: ambient-drift 18s ease-in-out infinite;
17
+ }
18
+
19
+ .ambient__orb--1 {
20
+ width: 280px;
21
+ height: 280px;
22
+ background: var(--orb-1);
23
+ top: -80px;
24
+ right: -60px;
25
+ }
26
+
27
+ .ambient__orb--2 {
28
+ width: 220px;
29
+ height: 220px;
30
+ background: var(--orb-2);
31
+ bottom: 120px;
32
+ left: -80px;
33
+ animation-delay: -6s;
34
+ animation-duration: 22s;
35
+ }
36
+
37
+ .ambient__orb--3 {
38
+ width: 160px;
39
+ height: 160px;
40
+ background: var(--orb-3);
41
+ top: 40%;
42
+ right: 10%;
43
+ animation-delay: -12s;
44
+ animation-duration: 16s;
45
+ }
46
+
47
+ @keyframes ambient-drift {
48
+ 0%,
49
+ 100% {
50
+ transform: translate(0, 0) scale(1);
51
+ }
52
+ 33% {
53
+ transform: translate(12px, -18px) scale(1.05);
54
+ }
55
+ 66% {
56
+ transform: translate(-10px, 14px) scale(0.95);
57
+ }
58
+ }
59
+
60
+ .page-slide-left-enter-active,
61
+ .page-slide-left-leave-active,
62
+ .page-slide-right-enter-active,
63
+ .page-slide-right-leave-active,
64
+ .page-fade-enter-active,
65
+ .page-fade-leave-active {
66
+ transition:
67
+ opacity 0.28s var(--ease-out-expo),
68
+ transform 0.32s var(--ease-out-expo);
69
+ }
70
+
71
+ .page-slide-left-enter-from {
72
+ opacity: 0;
73
+ transform: translateX(28px);
74
+ }
75
+ .page-slide-left-leave-to {
76
+ opacity: 0;
77
+ transform: translateX(-20px);
78
+ }
79
+ .page-slide-right-enter-from {
80
+ opacity: 0;
81
+ transform: translateX(-28px);
82
+ }
83
+ .page-slide-right-leave-to {
84
+ opacity: 0;
85
+ transform: translateX(20px);
86
+ }
87
+ .page-fade-enter-from,
88
+ .page-fade-leave-to {
89
+ opacity: 0;
90
+ transform: translateY(8px);
91
+ }
92
+
93
+ .reveal {
94
+ animation: reveal-up 0.55s var(--ease-out-expo) both;
95
+ }
96
+ .reveal-d1 {
97
+ animation-delay: 0.06s;
98
+ }
99
+ .reveal-d2 {
100
+ animation-delay: 0.12s;
101
+ }
102
+ .reveal-d3 {
103
+ animation-delay: 0.18s;
104
+ }
105
+ .reveal-d4 {
106
+ animation-delay: 0.24s;
107
+ }
108
+ .reveal-d5 {
109
+ animation-delay: 0.3s;
110
+ }
111
+ .reveal-d6 {
112
+ animation-delay: 0.36s;
113
+ }
114
+
115
+ @keyframes reveal-up {
116
+ from {
117
+ opacity: 0;
118
+ transform: translateY(16px);
119
+ }
120
+ to {
121
+ opacity: 1;
122
+ transform: translateY(0);
123
+ }
124
+ }
125
+
126
+ .list-enter-active {
127
+ transition:
128
+ opacity 0.35s var(--ease-out-expo),
129
+ transform 0.4s var(--ease-spring);
130
+ }
131
+ .list-leave-active {
132
+ transition:
133
+ opacity 0.2s ease,
134
+ transform 0.25s ease;
135
+ position: absolute;
136
+ width: calc(100% - 40px);
137
+ }
138
+ .list-enter-from {
139
+ opacity: 0;
140
+ transform: translateY(12px) scale(0.97);
141
+ }
142
+ .list-leave-to {
143
+ opacity: 0;
144
+ transform: scale(0.95);
145
+ }
146
+ .list-move {
147
+ transition: transform 0.4s var(--ease-out-expo);
148
+ }
149
+
150
+ .tap-scale {
151
+ transition: transform 180ms var(--ease-spring);
152
+ }
153
+ .tap-scale:active {
154
+ transform: scale(0.985);
155
+ }
156
+
157
+ .toast-pop-enter-active {
158
+ animation: toast-in 0.45s var(--ease-spring);
159
+ }
160
+ .toast-pop-leave-active {
161
+ animation: toast-out 0.3s var(--ease-smooth) forwards;
162
+ }
163
+
164
+ @keyframes toast-in {
165
+ 0% {
166
+ opacity: 0;
167
+ transform: translateX(-50%) translateY(20px) scale(0.85);
168
+ }
169
+ 60% {
170
+ transform: translateX(-50%) translateY(-4px) scale(1.02);
171
+ }
172
+ 100% {
173
+ opacity: 1;
174
+ transform: translateX(-50%) translateY(0) scale(1);
175
+ }
176
+ }
177
+
178
+ @keyframes toast-out {
179
+ to {
180
+ opacity: 0;
181
+ transform: translateX(-50%) translateY(12px) scale(0.9);
182
+ }
183
+ }
184
+
185
+ @media (prefers-reduced-motion: reduce) {
186
+ .ambient__orb,
187
+ .reveal,
188
+ .page-slide-left-enter-active,
189
+ .page-slide-left-leave-active,
190
+ .page-slide-right-enter-active,
191
+ .page-slide-right-leave-active,
192
+ .page-fade-enter-active,
193
+ .page-fade-leave-active,
194
+ .list-enter-active,
195
+ .list-leave-active,
196
+ .list-move,
197
+ .toast-pop-enter-active,
198
+ .toast-pop-leave-active {
199
+ animation: none !important;
200
+ transition: none !important;
201
+ }
202
+ .reveal {
203
+ opacity: 1;
204
+ transform: none;
205
+ }
206
+ }