@absolutejs/absolute 0.19.0-beta.1082 → 0.19.0-beta.1083

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 (148) hide show
  1. package/dist/.absolutejs/generated/angular/indexes/angular-example.1g23yr9r.js +167 -0
  2. package/dist/.absolutejs/generated/react/indexes/ReactExample.e6kzvjqy.js +3 -0
  3. package/dist/.absolutejs/generated/svelte/client/pages/SvelteExample.5pq2wmw6.js +1 -0
  4. package/dist/.absolutejs/generated/svelte/indexes/pages/SvelteExample.9zcw5vtg.js +1 -0
  5. package/dist/.absolutejs/generated/vue/client/pages/VueExample.q47m56s4.js +1 -0
  6. package/dist/.absolutejs/generated/vue/indexes/VueExample.6bqszcxv.js +1 -0
  7. package/dist/_prerendered/angular.html +45 -0
  8. package/dist/_prerendered/angular.meta +1 -0
  9. package/dist/_prerendered/html.html +70 -0
  10. package/dist/_prerendered/html.meta +1 -0
  11. package/dist/_prerendered/htmx.html +239 -0
  12. package/dist/_prerendered/htmx.meta +1 -0
  13. package/dist/_prerendered/index.html +70 -0
  14. package/dist/_prerendered/index.meta +1 -0
  15. package/dist/_prerendered/react.html +1 -0
  16. package/dist/_prerendered/react.meta +1 -0
  17. package/dist/_prerendered/vue.html +41 -0
  18. package/dist/_prerendered/vue.meta +1 -0
  19. package/dist/angular/browser.js +18 -18
  20. package/dist/angular/components/core/streamingSlotRegistrar.js +1 -1
  21. package/dist/angular/components/core/streamingSlotRegistry.js +2 -2
  22. package/dist/angular/components/defer-slot-templates.directive.js +2 -2
  23. package/dist/angular/components/defer-slot.component.js +3 -3
  24. package/dist/angular/components/image.component.js +3 -3
  25. package/dist/angular/components/stream-slot.component.js +3 -3
  26. package/dist/angular/example/angular/pages/angular-example.djr1v9hj.js +373 -0
  27. package/dist/angular/index.js +43 -43
  28. package/dist/angular/server.js +31 -31
  29. package/dist/angular/vendor/angular_common.js +310 -0
  30. package/dist/angular/vendor/angular_common_http.js +129 -0
  31. package/dist/angular/vendor/angular_core.js +1177 -0
  32. package/dist/angular/vendor/angular_core_primitives_di.js +36 -0
  33. package/dist/angular/vendor/angular_core_primitives_signals.js +132 -0
  34. package/dist/angular/vendor/angular_platform-browser.js +117 -0
  35. package/dist/angular/vendor/angular_router.js +6410 -0
  36. package/dist/angular/vendor/chunk-2c9evnn0.js +4764 -0
  37. package/dist/angular/vendor/chunk-3evcs0sk.js +2567 -0
  38. package/dist/angular/vendor/chunk-5h3qyvpj.js +729 -0
  39. package/dist/angular/vendor/chunk-hgg0w52m.js +62 -0
  40. package/dist/angular/vendor/chunk-n6rt7w2y.js +23 -0
  41. package/dist/angular/vendor/chunk-t4tc7c8b.js +28013 -0
  42. package/dist/angular/vendor/chunk-vqd7j0kb.js +1786 -0
  43. package/dist/angular/vendor/chunk-yqjkhk8j.js +145 -0
  44. package/dist/angular/vendor/server/angular_common.js +311 -0
  45. package/dist/angular/vendor/server/angular_common_http.js +130 -0
  46. package/dist/angular/vendor/server/angular_core.js +1178 -0
  47. package/dist/angular/vendor/server/angular_core_primitives_di.js +37 -0
  48. package/dist/angular/vendor/server/angular_core_primitives_signals.js +133 -0
  49. package/dist/angular/vendor/server/angular_platform-browser.js +118 -0
  50. package/dist/angular/vendor/server/angular_platform-server.js +59 -0
  51. package/dist/angular/vendor/server/angular_router.js +261 -0
  52. package/dist/angular/vendor/server/angular_ssr.js +11669 -0
  53. package/dist/angular/vendor/server/chunk-2akxms5e.js +2566 -0
  54. package/dist/angular/vendor/server/chunk-659a9c3p.js +6218 -0
  55. package/dist/angular/vendor/server/chunk-8eecnjd1.js +16686 -0
  56. package/dist/angular/vendor/server/chunk-9jz2apvp.js +743 -0
  57. package/dist/angular/vendor/server/chunk-dhs2bg35.js +48 -0
  58. package/dist/angular/vendor/server/chunk-hs2gc8sr.js +1787 -0
  59. package/dist/angular/vendor/server/chunk-k46n34mb.js +63 -0
  60. package/dist/angular/vendor/server/chunk-p2fdvyh1.js +4767 -0
  61. package/dist/angular/vendor/server/chunk-r0w9r4bg.js +730 -0
  62. package/dist/angular/vendor/server/chunk-vthxj7kd.js +146 -0
  63. package/dist/angular/vendor/server/chunk-xahr7f2f.js +35534 -0
  64. package/dist/assets/css/tailwind.generated.css +218 -0
  65. package/dist/assets/css/vue-example-compiled.abzaxheq.css +32 -0
  66. package/dist/assets/ico/favicon.ico +0 -0
  67. package/dist/assets/png/absolutejs-temp.png +0 -0
  68. package/dist/assets/svg/HTML5_Badge.svg +7 -0
  69. package/dist/assets/svg/angular.svg +18 -0
  70. package/dist/assets/svg/htmx-logo-black.svg +9 -0
  71. package/dist/assets/svg/htmx-logo-white.svg +9 -0
  72. package/dist/assets/svg/react.svg +1 -0
  73. package/dist/assets/svg/svelte-logo.svg +1 -0
  74. package/dist/assets/svg/vue-logo.svg +4 -0
  75. package/dist/build.js +42 -42
  76. package/dist/chunk-7pp6gkg8.js +2 -0
  77. package/dist/chunk-ek2qyx2c.js +11 -0
  78. package/dist/chunk-ysr5ycdt.js +2 -0
  79. package/dist/cli/config/server.js +11 -11
  80. package/dist/cli/index.js +12 -1
  81. package/dist/client/index.js +13 -13
  82. package/dist/client.tsx +15 -0
  83. package/dist/example/html/scripts/typescript-example.fqn9zkdh.js +1 -0
  84. package/dist/html/pages/HTMLExample.html +70 -0
  85. package/dist/htmx/htmx.min.js +1 -0
  86. package/dist/htmx/pages/HTMXExample.html +239 -0
  87. package/dist/htmx.min.js +1 -0
  88. package/dist/index.js +62 -62
  89. package/dist/indexes/angular-example.xsx88ph0.css +227 -0
  90. package/dist/indexes/html-example.s3banzdc.css +221 -0
  91. package/dist/indexes/htmx-example.5vgssc3f.css +221 -0
  92. package/dist/indexes/react-example.bz1k8xa2.css +245 -0
  93. package/dist/indexes/svelte-example.vy3015es.css +221 -0
  94. package/dist/indexes/vue-example.q4vf2wtq.css +228 -0
  95. package/dist/islands/index.js +14 -14
  96. package/dist/manifest.json +26 -0
  97. package/dist/nested/dynamic-module.txt +1 -0
  98. package/dist/package-asset.txt +1 -0
  99. package/dist/react/browser.js +3 -3
  100. package/dist/react/components/browser/index.js +5 -5
  101. package/dist/react/components/index.js +7 -7
  102. package/dist/react/hooks/index.js +2 -2
  103. package/dist/react/index.js +30 -30
  104. package/dist/react/jsxDevRuntimeCompat.js +1 -1
  105. package/dist/react/router/browser.js +2 -2
  106. package/dist/react/router/index.js +2 -2
  107. package/dist/react/server.js +13 -13
  108. package/dist/react/vendor/chunk-2kh60w9b.js +33 -0
  109. package/dist/react/vendor/chunk-9g12fvrw.js +236 -0
  110. package/dist/react/vendor/chunk-rejbymp5.js +837 -0
  111. package/dist/react/vendor/chunk-wwy122hz.js +200 -0
  112. package/dist/react/vendor/react-dom.js +44 -0
  113. package/dist/react/vendor/react-dom_client.js +15864 -0
  114. package/dist/react/vendor/react-refresh_runtime.js +304 -0
  115. package/dist/react/vendor/react.js +103 -0
  116. package/dist/react/vendor/react_jsx-dev-runtime.js +17 -0
  117. package/dist/react/vendor/react_jsx-runtime.js +22 -0
  118. package/dist/robots.txt +2 -0
  119. package/dist/runtime/blob.txt +1 -0
  120. package/dist/runtime/dir-join.txt +1 -0
  121. package/dist/runtime/nested/binary.bin +1 -0
  122. package/dist/runtime/nested/readfile.txt +1 -0
  123. package/dist/runtime/template.html +1 -0
  124. package/dist/server.js +92156 -0
  125. package/dist/sitemap.xml +48 -0
  126. package/dist/svelte/index.js +26 -26
  127. package/dist/svelte/router/page.js +1 -1
  128. package/dist/svelte/server/pages/SvelteExample.fxs20w1b.js +290 -0
  129. package/dist/svelte/server.js +13 -13
  130. package/dist/svelte/vendor/chunk-5qdxn1p3.js +4586 -0
  131. package/dist/svelte/vendor/chunk-8qdfbbez.js +12 -0
  132. package/dist/svelte/vendor/chunk-r2jyyfjt.js +4495 -0
  133. package/dist/svelte/vendor/svelte.js +49 -0
  134. package/dist/svelte/vendor/svelte_internal.js +2 -0
  135. package/dist/svelte/vendor/svelte_internal_client.js +395 -0
  136. package/dist/svelte/vendor/svelte_internal_disclose-version.js +7 -0
  137. package/dist/svelte/vendor/svelte_internal_flags_async.js +6 -0
  138. package/dist/svelte/vendor/svelte_internal_flags_legacy.js +6 -0
  139. package/dist/svelte/vendor/svelte_store.js +99 -0
  140. package/dist/vue/browser.js +3 -3
  141. package/dist/vue/components/Image.js +1 -1
  142. package/dist/vue/components/index.js +5 -5
  143. package/dist/vue/index.js +36 -36
  144. package/dist/vue/server/pages/VueExample.fyhmna2p.css +32 -0
  145. package/dist/vue/server/pages/VueExample.fyhmna2p.js +75 -0
  146. package/dist/vue/server.js +13 -13
  147. package/dist/vue/vendor/vue.js +11011 -0
  148. package/package.json +1 -1
@@ -0,0 +1,227 @@
1
+ /* example/styles/reset.css */
2
+ * {
3
+ box-sizing: border-box;
4
+ margin: 0;
5
+ padding: 0;
6
+ line-height: 1.5;
7
+ }
8
+
9
+ html {
10
+ height: 100%;
11
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Avenir, Helvetica, Arial, sans-serif;
12
+ }
13
+
14
+ body {
15
+ color: #f5f5f5;
16
+ --buncss-light: initial;
17
+ --buncss-dark: ;
18
+ color-scheme: light dark;
19
+ display: flex;
20
+ font-synthesis: none;
21
+ -moz-osx-font-smoothing: grayscale;
22
+ text-rendering: optimizeLegibility;
23
+ -webkit-font-smoothing: antialiased;
24
+ background-color: #2c2c2c;
25
+ flex-direction: column;
26
+ height: 100%;
27
+ font-weight: 400;
28
+ }
29
+
30
+ @media (prefers-color-scheme: dark) {
31
+ body {
32
+ --buncss-light: ;
33
+ --buncss-dark: initial;
34
+ }
35
+ }
36
+
37
+ main {
38
+ display: flex;
39
+ text-align: center;
40
+ flex-direction: column;
41
+ flex: 1;
42
+ justify-content: center;
43
+ align-items: center;
44
+ }
45
+
46
+ h1, h2, h3, h4, h5, h6 {
47
+ line-height: 1.1;
48
+ }
49
+
50
+ p {
51
+ max-width: 1280px;
52
+ font-size: 1.2rem;
53
+ }
54
+
55
+ a {
56
+ color: #5fbeeb;
57
+ position: relative;
58
+ text-decoration: none;
59
+ font-size: 1.5rem;
60
+ font-weight: 500;
61
+ }
62
+
63
+ button {
64
+ cursor: pointer;
65
+ background-color: #1a1a1a;
66
+ border: 1px solid #0000;
67
+ border-radius: .5rem;
68
+ margin: 2rem 0;
69
+ padding: .6rem 1.2rem;
70
+ transition: border-color .25s;
71
+ font-family: inherit;
72
+ font-size: 1.1rem;
73
+ font-weight: 500;
74
+ box-shadow: 0 2px 4px #0000001a;
75
+ }
76
+
77
+ button:hover {
78
+ border-color: #5fbeeb;
79
+ }
80
+
81
+ button:focus {
82
+ outline: 4px auto -webkit-focus-ring-color;
83
+ }
84
+
85
+ button:focus-visible {
86
+ outline: 4px auto -webkit-focus-ring-color;
87
+ }
88
+
89
+ @media (prefers-color-scheme: light) {
90
+ body {
91
+ color: #1a1a1a;
92
+ background-color: #f5f5f5;
93
+ }
94
+ }
95
+
96
+ /* example/styles/main.css */
97
+ header {
98
+ display: flex;
99
+ text-align: center;
100
+ background-color: #1a1a1a;
101
+ justify-content: space-between;
102
+ align-items: center;
103
+ padding: 2rem;
104
+ box-shadow: 0 2px 4px #0000001a;
105
+ }
106
+
107
+ header a {
108
+ position: relative;
109
+ color: #5fbeeb;
110
+ text-decoration: none;
111
+ }
112
+
113
+ header a:after {
114
+ content: "";
115
+ position: absolute;
116
+ transform-origin: left;
117
+ background: linear-gradient(90deg, #5fbeeb 0%, #35d5a2 50%, #ff4b91 100%);
118
+ width: 100%;
119
+ height: 2px;
120
+ transition: transform .25s ease-in-out;
121
+ bottom: 0;
122
+ left: 0;
123
+ transform: scaleX(0);
124
+ }
125
+
126
+ header a:hover:after {
127
+ transform: scaleX(1);
128
+ }
129
+
130
+ h1 {
131
+ margin-top: 2rem;
132
+ font-size: 2.5rem;
133
+ }
134
+
135
+ .logo {
136
+ will-change: filter;
137
+ width: 8rem;
138
+ height: 8rem;
139
+ transition: filter .3s;
140
+ }
141
+
142
+ .logo:hover {
143
+ filter: drop-shadow(0 0 2rem #5fbeeb);
144
+ }
145
+
146
+ nav {
147
+ display: flex;
148
+ justify-content: center;
149
+ gap: 4rem;
150
+ }
151
+
152
+ header details {
153
+ position: relative;
154
+ }
155
+
156
+ header details summary {
157
+ list-style: none;
158
+ appearance: none;
159
+ -webkit-appearance: none;
160
+ cursor: pointer;
161
+ user-select: none;
162
+ color: #5fbeeb;
163
+ padding: .5rem 1rem;
164
+ font-size: 1.5rem;
165
+ font-weight: 500;
166
+ }
167
+
168
+ header summary:after {
169
+ content: "▼";
170
+ display: inline-block;
171
+ margin-left: .5rem;
172
+ transition: transform .3s;
173
+ font-size: .75rem;
174
+ }
175
+
176
+ header details[open] summary:after {
177
+ transform: rotate(180deg);
178
+ }
179
+
180
+ header details nav {
181
+ position: absolute;
182
+ display: flex;
183
+ backdrop-filter: blur(4px);
184
+ opacity: 0;
185
+ pointer-events: none;
186
+ z-index: 1000;
187
+ background: #b9b9b91a;
188
+ border: 1px solid #5fbeeb;
189
+ border-radius: 1rem;
190
+ flex-direction: column;
191
+ gap: .75rem;
192
+ padding: 1rem 1.5rem;
193
+ transition: opacity .3s, transform .3s;
194
+ top: 100%;
195
+ right: -.5rem;
196
+ transform: translateY(-8px);
197
+ box-shadow: 0 4px 12px #00000040;
198
+ }
199
+
200
+ header details[open] nav {
201
+ opacity: 1;
202
+ pointer-events: auto;
203
+ transform: translateY(0);
204
+ }
205
+
206
+ header details nav a {
207
+ white-space: nowrap;
208
+ padding: .25rem 0;
209
+ font-size: 1.1rem;
210
+ }
211
+
212
+ @media (prefers-color-scheme: light) {
213
+ header, button {
214
+ background-color: #fff;
215
+ }
216
+ }
217
+
218
+ /* example/styles/indexes/angular-example.css */
219
+ .logo.angular:hover {
220
+ filter: drop-shadow(0 0 2rem #dc087d);
221
+ }
222
+
223
+ angular-page, app-root {
224
+ display: flex;
225
+ flex-direction: column;
226
+ flex: 1;
227
+ }
@@ -0,0 +1,221 @@
1
+ /* example/styles/reset.css */
2
+ * {
3
+ box-sizing: border-box;
4
+ margin: 0;
5
+ padding: 0;
6
+ line-height: 1.5;
7
+ }
8
+
9
+ html {
10
+ height: 100%;
11
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Avenir, Helvetica, Arial, sans-serif;
12
+ }
13
+
14
+ body {
15
+ color: #f5f5f5;
16
+ --buncss-light: initial;
17
+ --buncss-dark: ;
18
+ color-scheme: light dark;
19
+ display: flex;
20
+ font-synthesis: none;
21
+ -moz-osx-font-smoothing: grayscale;
22
+ text-rendering: optimizeLegibility;
23
+ -webkit-font-smoothing: antialiased;
24
+ background-color: #2c2c2c;
25
+ flex-direction: column;
26
+ height: 100%;
27
+ font-weight: 400;
28
+ }
29
+
30
+ @media (prefers-color-scheme: dark) {
31
+ body {
32
+ --buncss-light: ;
33
+ --buncss-dark: initial;
34
+ }
35
+ }
36
+
37
+ main {
38
+ display: flex;
39
+ text-align: center;
40
+ flex-direction: column;
41
+ flex: 1;
42
+ justify-content: center;
43
+ align-items: center;
44
+ }
45
+
46
+ h1, h2, h3, h4, h5, h6 {
47
+ line-height: 1.1;
48
+ }
49
+
50
+ p {
51
+ max-width: 1280px;
52
+ font-size: 1.2rem;
53
+ }
54
+
55
+ a {
56
+ color: #5fbeeb;
57
+ position: relative;
58
+ text-decoration: none;
59
+ font-size: 1.5rem;
60
+ font-weight: 500;
61
+ }
62
+
63
+ button {
64
+ cursor: pointer;
65
+ background-color: #1a1a1a;
66
+ border: 1px solid #0000;
67
+ border-radius: .5rem;
68
+ margin: 2rem 0;
69
+ padding: .6rem 1.2rem;
70
+ transition: border-color .25s;
71
+ font-family: inherit;
72
+ font-size: 1.1rem;
73
+ font-weight: 500;
74
+ box-shadow: 0 2px 4px #0000001a;
75
+ }
76
+
77
+ button:hover {
78
+ border-color: #5fbeeb;
79
+ }
80
+
81
+ button:focus {
82
+ outline: 4px auto -webkit-focus-ring-color;
83
+ }
84
+
85
+ button:focus-visible {
86
+ outline: 4px auto -webkit-focus-ring-color;
87
+ }
88
+
89
+ @media (prefers-color-scheme: light) {
90
+ body {
91
+ color: #1a1a1a;
92
+ background-color: #f5f5f5;
93
+ }
94
+ }
95
+
96
+ /* example/styles/main.css */
97
+ header {
98
+ display: flex;
99
+ text-align: center;
100
+ background-color: #1a1a1a;
101
+ justify-content: space-between;
102
+ align-items: center;
103
+ padding: 2rem;
104
+ box-shadow: 0 2px 4px #0000001a;
105
+ }
106
+
107
+ header a {
108
+ position: relative;
109
+ color: #5fbeeb;
110
+ text-decoration: none;
111
+ }
112
+
113
+ header a:after {
114
+ content: "";
115
+ position: absolute;
116
+ transform-origin: left;
117
+ background: linear-gradient(90deg, #5fbeeb 0%, #35d5a2 50%, #ff4b91 100%);
118
+ width: 100%;
119
+ height: 2px;
120
+ transition: transform .25s ease-in-out;
121
+ bottom: 0;
122
+ left: 0;
123
+ transform: scaleX(0);
124
+ }
125
+
126
+ header a:hover:after {
127
+ transform: scaleX(1);
128
+ }
129
+
130
+ h1 {
131
+ margin-top: 2rem;
132
+ font-size: 2.5rem;
133
+ }
134
+
135
+ .logo {
136
+ will-change: filter;
137
+ width: 8rem;
138
+ height: 8rem;
139
+ transition: filter .3s;
140
+ }
141
+
142
+ .logo:hover {
143
+ filter: drop-shadow(0 0 2rem #5fbeeb);
144
+ }
145
+
146
+ nav {
147
+ display: flex;
148
+ justify-content: center;
149
+ gap: 4rem;
150
+ }
151
+
152
+ header details {
153
+ position: relative;
154
+ }
155
+
156
+ header details summary {
157
+ list-style: none;
158
+ appearance: none;
159
+ -webkit-appearance: none;
160
+ cursor: pointer;
161
+ user-select: none;
162
+ color: #5fbeeb;
163
+ padding: .5rem 1rem;
164
+ font-size: 1.5rem;
165
+ font-weight: 500;
166
+ }
167
+
168
+ header summary:after {
169
+ content: "▼";
170
+ display: inline-block;
171
+ margin-left: .5rem;
172
+ transition: transform .3s;
173
+ font-size: .75rem;
174
+ }
175
+
176
+ header details[open] summary:after {
177
+ transform: rotate(180deg);
178
+ }
179
+
180
+ header details nav {
181
+ position: absolute;
182
+ display: flex;
183
+ backdrop-filter: blur(4px);
184
+ opacity: 0;
185
+ pointer-events: none;
186
+ z-index: 1000;
187
+ background: #b9b9b91a;
188
+ border: 1px solid #5fbeeb;
189
+ border-radius: 1rem;
190
+ flex-direction: column;
191
+ gap: .75rem;
192
+ padding: 1rem 1.5rem;
193
+ transition: opacity .3s, transform .3s;
194
+ top: 100%;
195
+ right: -.5rem;
196
+ transform: translateY(-8px);
197
+ box-shadow: 0 4px 12px #00000040;
198
+ }
199
+
200
+ header details[open] nav {
201
+ opacity: 1;
202
+ pointer-events: auto;
203
+ transform: translateY(0);
204
+ }
205
+
206
+ header details nav a {
207
+ white-space: nowrap;
208
+ padding: .25rem 0;
209
+ font-size: 1.1rem;
210
+ }
211
+
212
+ @media (prefers-color-scheme: light) {
213
+ header, button {
214
+ background-color: #fff;
215
+ }
216
+ }
217
+
218
+ /* example/styles/indexes/html-example.css */
219
+ .logo.html:hover {
220
+ filter: drop-shadow(0 0 2rem #e34f26);
221
+ }
@@ -0,0 +1,221 @@
1
+ /* example/styles/reset.css */
2
+ * {
3
+ box-sizing: border-box;
4
+ margin: 0;
5
+ padding: 0;
6
+ line-height: 1.5;
7
+ }
8
+
9
+ html {
10
+ height: 100%;
11
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Avenir, Helvetica, Arial, sans-serif;
12
+ }
13
+
14
+ body {
15
+ color: #f5f5f5;
16
+ --buncss-light: initial;
17
+ --buncss-dark: ;
18
+ color-scheme: light dark;
19
+ display: flex;
20
+ font-synthesis: none;
21
+ -moz-osx-font-smoothing: grayscale;
22
+ text-rendering: optimizeLegibility;
23
+ -webkit-font-smoothing: antialiased;
24
+ background-color: #2c2c2c;
25
+ flex-direction: column;
26
+ height: 100%;
27
+ font-weight: 400;
28
+ }
29
+
30
+ @media (prefers-color-scheme: dark) {
31
+ body {
32
+ --buncss-light: ;
33
+ --buncss-dark: initial;
34
+ }
35
+ }
36
+
37
+ main {
38
+ display: flex;
39
+ text-align: center;
40
+ flex-direction: column;
41
+ flex: 1;
42
+ justify-content: center;
43
+ align-items: center;
44
+ }
45
+
46
+ h1, h2, h3, h4, h5, h6 {
47
+ line-height: 1.1;
48
+ }
49
+
50
+ p {
51
+ max-width: 1280px;
52
+ font-size: 1.2rem;
53
+ }
54
+
55
+ a {
56
+ color: #5fbeeb;
57
+ position: relative;
58
+ text-decoration: none;
59
+ font-size: 1.5rem;
60
+ font-weight: 500;
61
+ }
62
+
63
+ button {
64
+ cursor: pointer;
65
+ background-color: #1a1a1a;
66
+ border: 1px solid #0000;
67
+ border-radius: .5rem;
68
+ margin: 2rem 0;
69
+ padding: .6rem 1.2rem;
70
+ transition: border-color .25s;
71
+ font-family: inherit;
72
+ font-size: 1.1rem;
73
+ font-weight: 500;
74
+ box-shadow: 0 2px 4px #0000001a;
75
+ }
76
+
77
+ button:hover {
78
+ border-color: #5fbeeb;
79
+ }
80
+
81
+ button:focus {
82
+ outline: 4px auto -webkit-focus-ring-color;
83
+ }
84
+
85
+ button:focus-visible {
86
+ outline: 4px auto -webkit-focus-ring-color;
87
+ }
88
+
89
+ @media (prefers-color-scheme: light) {
90
+ body {
91
+ color: #1a1a1a;
92
+ background-color: #f5f5f5;
93
+ }
94
+ }
95
+
96
+ /* example/styles/main.css */
97
+ header {
98
+ display: flex;
99
+ text-align: center;
100
+ background-color: #1a1a1a;
101
+ justify-content: space-between;
102
+ align-items: center;
103
+ padding: 2rem;
104
+ box-shadow: 0 2px 4px #0000001a;
105
+ }
106
+
107
+ header a {
108
+ position: relative;
109
+ color: #5fbeeb;
110
+ text-decoration: none;
111
+ }
112
+
113
+ header a:after {
114
+ content: "";
115
+ position: absolute;
116
+ transform-origin: left;
117
+ background: linear-gradient(90deg, #5fbeeb 0%, #35d5a2 50%, #ff4b91 100%);
118
+ width: 100%;
119
+ height: 2px;
120
+ transition: transform .25s ease-in-out;
121
+ bottom: 0;
122
+ left: 0;
123
+ transform: scaleX(0);
124
+ }
125
+
126
+ header a:hover:after {
127
+ transform: scaleX(1);
128
+ }
129
+
130
+ h1 {
131
+ margin-top: 2rem;
132
+ font-size: 2.5rem;
133
+ }
134
+
135
+ .logo {
136
+ will-change: filter;
137
+ width: 8rem;
138
+ height: 8rem;
139
+ transition: filter .3s;
140
+ }
141
+
142
+ .logo:hover {
143
+ filter: drop-shadow(0 0 2rem #5fbeeb);
144
+ }
145
+
146
+ nav {
147
+ display: flex;
148
+ justify-content: center;
149
+ gap: 4rem;
150
+ }
151
+
152
+ header details {
153
+ position: relative;
154
+ }
155
+
156
+ header details summary {
157
+ list-style: none;
158
+ appearance: none;
159
+ -webkit-appearance: none;
160
+ cursor: pointer;
161
+ user-select: none;
162
+ color: #5fbeeb;
163
+ padding: .5rem 1rem;
164
+ font-size: 1.5rem;
165
+ font-weight: 500;
166
+ }
167
+
168
+ header summary:after {
169
+ content: "▼";
170
+ display: inline-block;
171
+ margin-left: .5rem;
172
+ transition: transform .3s;
173
+ font-size: .75rem;
174
+ }
175
+
176
+ header details[open] summary:after {
177
+ transform: rotate(180deg);
178
+ }
179
+
180
+ header details nav {
181
+ position: absolute;
182
+ display: flex;
183
+ backdrop-filter: blur(4px);
184
+ opacity: 0;
185
+ pointer-events: none;
186
+ z-index: 1000;
187
+ background: #b9b9b91a;
188
+ border: 1px solid #5fbeeb;
189
+ border-radius: 1rem;
190
+ flex-direction: column;
191
+ gap: .75rem;
192
+ padding: 1rem 1.5rem;
193
+ transition: opacity .3s, transform .3s;
194
+ top: 100%;
195
+ right: -.5rem;
196
+ transform: translateY(-8px);
197
+ box-shadow: 0 4px 12px #00000040;
198
+ }
199
+
200
+ header details[open] nav {
201
+ opacity: 1;
202
+ pointer-events: auto;
203
+ transform: translateY(0);
204
+ }
205
+
206
+ header details nav a {
207
+ white-space: nowrap;
208
+ padding: .25rem 0;
209
+ font-size: 1.1rem;
210
+ }
211
+
212
+ @media (prefers-color-scheme: light) {
213
+ header, button {
214
+ background-color: #fff;
215
+ }
216
+ }
217
+
218
+ /* example/styles/indexes/htmx-example.css */
219
+ .logo.htmx:hover {
220
+ filter: drop-shadow(0 0 2rem #3465a4);
221
+ }