@duskmoon-dev/el-art-color-spin 0.8.3

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 (17) hide show
  1. package/README.md +10 -0
  2. package/dist/cjs/index.js +306 -0
  3. package/dist/cjs/index.js.map +11 -0
  4. package/dist/cjs/register.js +309 -0
  5. package/dist/cjs/register.js.map +12 -0
  6. package/dist/esm/index.js +264 -0
  7. package/dist/esm/index.js.map +11 -0
  8. package/dist/esm/register.js +263 -0
  9. package/dist/esm/register.js.map +12 -0
  10. package/dist/tsconfig.tsbuildinfo +1 -0
  11. package/dist/types/el-dm-art-color-spin.d.ts +13 -0
  12. package/dist/types/el-dm-art-color-spin.d.ts.map +1 -0
  13. package/dist/types/index.d.ts +4 -0
  14. package/dist/types/index.d.ts.map +1 -0
  15. package/dist/types/register.d.ts +2 -0
  16. package/dist/types/register.d.ts.map +1 -0
  17. package/package.json +58 -0
package/dist/esm/index.js ADDED
@@ -0,0 +1,264 @@
1
+ // src/el-dm-art-color-spin.ts
2
+ import { BaseElement, css } from "@duskmoon-dev/el-base";
3
+
4
+ // ../../node_modules/.bun/@duskmoon-dev+css-art@0.3.0/node_modules/@duskmoon-dev/css-art/dist/art/color-spin.css
5
+ var color_spin_default = `@layer css-art {
6
+ @keyframes art-color-spin-spin {
7
+ 0%,
8
+ 1% {
9
+ transform: translateX(-50%) translateY(calc(var(--art-color-spin-size) * 0.026))
10
+ rotateY(0deg) scale(1.05);
11
+ }
12
+ 99%,
13
+ 100% {
14
+ transform: translateX(-50%) translateY(calc(var(--art-color-spin-size) * 0.026))
15
+ rotateY(360deg) scale(1.05);
16
+ }
17
+ }
18
+
19
+ .art-color-spin {
20
+ --art-color-spin-size: 770px;
21
+ --art-color-spin-color1: #ffd700;
22
+ --art-color-spin-color2: #20a7db;
23
+ --art-color-spin-color3: #8fce00;
24
+ --art-color-spin-color4: #ff0000;
25
+
26
+ position: relative;
27
+ width: var(--art-color-spin-size);
28
+ height: calc(var(--art-color-spin-size) * 0.26);
29
+ background: repeating-linear-gradient(
30
+ -45deg,
31
+ #000,
32
+ #000 5px,
33
+ #111 5px,
34
+ #111 10px
35
+ );
36
+ perspective: calc(var(--art-color-spin-size) * 1.039);
37
+ font-family: "Google Sans", sans-serif;
38
+ font-weight: 440;
39
+ overflow: visible;
40
+ }
41
+
42
+ .art-color-spin * {
43
+ box-sizing: border-box;
44
+ }
45
+
46
+ /* Decorative "c" letter */
47
+ .art-color-spin::before {
48
+ content: "c";
49
+ font-size: calc(var(--art-color-spin-size) * 0.461);
50
+ color: #eee;
51
+ position: absolute;
52
+ top: calc(var(--art-color-spin-size) * -0.169);
53
+ left: 0;
54
+ text-indent: calc(var(--art-color-spin-size) * -0.026);
55
+ line-height: calc(var(--art-color-spin-size) * 0.519);
56
+ z-index: 2;
57
+ -webkit-box-reflect: below calc(var(--art-color-spin-size) * -0.169)
58
+ linear-gradient(transparent, rgb(255 255 255 / 0.06));
59
+ }
60
+
61
+ /* Decorative "r" letter */
62
+ .art-color-spin::after {
63
+ content: "r";
64
+ font-size: calc(var(--art-color-spin-size) * 0.461);
65
+ color: #eee;
66
+ position: absolute;
67
+ top: calc(var(--art-color-spin-size) * -0.169);
68
+ right: calc(var(--art-color-spin-size) * 0.039);
69
+ line-height: calc(var(--art-color-spin-size) * 0.519);
70
+ z-index: 2;
71
+ -webkit-box-reflect: below calc(var(--art-color-spin-size) * -0.169)
72
+ linear-gradient(transparent, rgb(255 255 255 / 0.06));
73
+ }
74
+
75
+ /* 3D spinner container */
76
+ .art-color-spin > ul {
77
+ width: 0;
78
+ height: calc(var(--art-color-spin-size) * 0.195);
79
+ display: block;
80
+ left: 50%;
81
+ position: relative;
82
+ transform-style: preserve-3d;
83
+ transform-origin: center center;
84
+ z-index: 3;
85
+ margin: 0;
86
+ padding: 0;
87
+ list-style: none;
88
+ animation: art-color-spin-spin 11s linear infinite alternate-reverse;
89
+ }
90
+
91
+ .art-color-spin > ul * {
92
+ transform-style: preserve-3d;
93
+ }
94
+
95
+ /* White vertical bars (axis indicators) */
96
+ .art-color-spin > ul::before,
97
+ .art-color-spin > ul::after {
98
+ content: "";
99
+ display: block;
100
+ position: absolute;
101
+ width: calc(var(--art-color-spin-size) * 0.052);
102
+ height: calc(var(--art-color-spin-size) * 0.286);
103
+ border-radius: calc(var(--art-color-spin-size) * 0.026);
104
+ top: calc(var(--art-color-spin-size) * -0.039);
105
+ left: calc(var(--art-color-spin-size) * -0.026);
106
+ background: #fff;
107
+ }
108
+
109
+ .art-color-spin > ul::before {
110
+ background: #eee;
111
+ transform: rotateY(-90deg);
112
+ }
113
+
114
+ /* Colored rings */
115
+ .art-color-spin > ul > li {
116
+ display: block;
117
+ width: calc(var(--art-color-spin-size) * 0.234);
118
+ height: calc(var(--art-color-spin-size) * 0.234);
119
+ border: solid calc(var(--art-color-spin-size) * 0.032) #fff;
120
+ border-radius: 50%;
121
+ top: calc(var(--art-color-spin-size) * -0.013);
122
+ left: 0;
123
+ position: absolute;
124
+ transform: rotateY(calc(var(--i) * -90deg)) translateZ(0px)
125
+ translateX(calc(var(--art-color-spin-size) * 0.052));
126
+ transform-origin: top left;
127
+ -webkit-box-reflect: below 2px linear-gradient(transparent, rgb(255 255 255 / 0.1));
128
+ margin: 0;
129
+ padding: 0;
130
+ list-style: none;
131
+ }
132
+
133
+ /* Inner colored circles (mix-blend-mode creates glow effect) */
134
+ .art-color-spin > ul > li::before,
135
+ .art-color-spin > ul > li::after {
136
+ content: "";
137
+ width: calc(var(--art-color-spin-size) * 0.13);
138
+ height: calc(var(--art-color-spin-size) * 0.13);
139
+ display: block;
140
+ opacity: 0.75;
141
+ border-radius: 50%;
142
+ position: absolute;
143
+ left: 50%;
144
+ top: 50%;
145
+ mix-blend-mode: color-burn;
146
+ }
147
+
148
+ .art-color-spin > ul > li::after {
149
+ transform: translate3d(-50%, -50%, 1px);
150
+ }
151
+
152
+ .art-color-spin > ul > li::before {
153
+ transform: translate3d(-50%, -50%, -1px);
154
+ }
155
+
156
+ /* Ring 1: Gold */
157
+ .art-color-spin > ul > li:nth-child(1) {
158
+ outline: solid 1px var(--art-color-spin-color1);
159
+ outline-offset: 1px;
160
+ }
161
+ .art-color-spin > ul > li:nth-child(1)::after {
162
+ background: var(--art-color-spin-color1);
163
+ }
164
+ .art-color-spin > ul > li:nth-child(1)::before {
165
+ background: color-mix(in hsl, var(--art-color-spin-color1), white 30%);
166
+ }
167
+
168
+ /* Ring 2: Blue */
169
+ .art-color-spin > ul > li:nth-child(2) {
170
+ outline: solid 1px var(--art-color-spin-color2);
171
+ outline-offset: 1px;
172
+ }
173
+ .art-color-spin > ul > li:nth-child(2)::after {
174
+ background: var(--art-color-spin-color2);
175
+ }
176
+ .art-color-spin > ul > li:nth-child(2)::before {
177
+ background: color-mix(in hsl, var(--art-color-spin-color2), white 30%);
178
+ }
179
+
180
+ /* Ring 3: Green */
181
+ .art-color-spin > ul > li:nth-child(3) {
182
+ outline: solid 1px var(--art-color-spin-color3);
183
+ outline-offset: 1px;
184
+ }
185
+ .art-color-spin > ul > li:nth-child(3)::after {
186
+ background: var(--art-color-spin-color3);
187
+ }
188
+ .art-color-spin > ul > li:nth-child(3)::before {
189
+ background: color-mix(in hsl, var(--art-color-spin-color3), white 30%);
190
+ }
191
+
192
+ /* Ring 4: Red */
193
+ .art-color-spin > ul > li:nth-child(4) {
194
+ outline: solid 1px var(--art-color-spin-color4);
195
+ outline-offset: 1px;
196
+ }
197
+ .art-color-spin > ul > li:nth-child(4)::after {
198
+ background: var(--art-color-spin-color4);
199
+ }
200
+ .art-color-spin > ul > li:nth-child(4)::before {
201
+ background: color-mix(in hsl, var(--art-color-spin-color4), white 30%);
202
+ }
203
+
204
+ .art-color-spin-sm {
205
+ --art-color-spin-size: 385px;
206
+ }
207
+
208
+ .art-color-spin-lg {
209
+ --art-color-spin-size: 1000px;
210
+ }
211
+ }
212
+ `;
213
+
214
+ // src/el-dm-art-color-spin.ts
215
+ var layerMatch = color_spin_default.match(/@layer\s+css-art\s*\{([\s\S]*)\}\s*$/);
216
+ var coreCss = layerMatch ? layerMatch[1] : color_spin_default;
217
+ var styles = css`
218
+ :host {
219
+ display: inline-block;
220
+ }
221
+ :host([hidden]) {
222
+ display: none !important;
223
+ }
224
+ ${coreCss}
225
+ `;
226
+
227
+ class ElDmArtColorSpin extends BaseElement {
228
+ static properties = {
229
+ size: { type: String, reflect: true }
230
+ };
231
+ constructor() {
232
+ super();
233
+ this.attachStyles(styles);
234
+ }
235
+ render() {
236
+ const classes = ["art-color-spin"];
237
+ if (this.size && this.size !== "md")
238
+ classes.push(`art-color-spin-${this.size}`);
239
+ return `
240
+ <div class="${classes.join(" ")}">
241
+ <ul>
242
+ <li style="--i:1"></li>
243
+ <li style="--i:2"></li>
244
+ <li style="--i:3"></li>
245
+ <li style="--i:4"></li>
246
+ </ul>
247
+ </div>
248
+ `;
249
+ }
250
+ }
251
+
252
+ // src/index.ts
253
+ function register() {
254
+ if (!customElements.get("el-dm-art-color-spin")) {
255
+ customElements.define("el-dm-art-color-spin", ElDmArtColorSpin);
256
+ }
257
+ }
258
+ export {
259
+ register,
260
+ ElDmArtColorSpin
261
+ };
262
+
263
+ //# debugId=0E1BB487A83C1D8264756E2164756E21
264
+ //# sourceMappingURL=index.js.map
package/dist/esm/index.js.map ADDED
@@ -0,0 +1,11 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/el-dm-art-color-spin.ts", "../../src/index.ts"],
4
+ "sourcesContent": [
5
+ "import { BaseElement, css } from '@duskmoon-dev/el-base';\nimport rawCss from '@duskmoon-dev/css-art/dist/art/color-spin.css' with { type: 'text' };\n\nconst layerMatch = rawCss.match(/@layer\\s+css-art\\s*\\{([\\s\\S]*)\\}\\s*$/);\nconst coreCss = layerMatch ? layerMatch[1] : rawCss;\n\nconst styles = css`\n :host {\n display: inline-block;\n }\n :host([hidden]) {\n display: none !important;\n }\n ${coreCss}\n`;\n\nexport class ElDmArtColorSpin extends BaseElement {\n static properties = {\n size: { type: String, reflect: true },\n };\n\n declare size: string;\n\n constructor() {\n super();\n this.attachStyles(styles);\n }\n\n render(): string {\n const classes = ['art-color-spin'];\n if (this.size && this.size !== 'md') classes.push(`art-color-spin-${this.size}`);\n return `\n <div class=\"${classes.join(' ')}\">\n <ul>\n <li style=\"--i:1\"></li>\n <li style=\"--i:2\"></li>\n <li style=\"--i:3\"></li>\n <li style=\"--i:4\"></li>\n </ul>\n </div>\n `;\n }\n}\n",
6
+ "import { ElDmArtColorSpin } from './el-dm-art-color-spin.js';\n\nexport { ElDmArtColorSpin };\n\nexport function register(): void {\n if (!customElements.get('el-dm-art-color-spin')) {\n customElements.define('el-dm-art-color-spin', ElDmArtColorSpin);\n }\n}\n"
7
+ ],
8
+ "mappings": ";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,IAAM,aAAa,mBAAO,MAAM,sCAAsC;AACtE,IAAM,UAAU,aAAa,WAAW,KAAK;AAE7C,IAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOX;AAAA;AAAA;AAGG,MAAM,yBAAyB,YAAY;AAAA,SACzC,aAAa;AAAA,IAClB,MAAM,EAAE,MAAM,QAAQ,SAAS,KAAK;AAAA,EACtC;AAAA,EAIA,WAAW,GAAG;AAAA,IACZ,MAAM;AAAA,IACN,KAAK,aAAa,MAAM;AAAA;AAAA,EAG1B,MAAM,GAAW;AAAA,IACf,MAAM,UAAU,CAAC,gBAAgB;AAAA,IACjC,IAAI,KAAK,QAAQ,KAAK,SAAS;AAAA,MAAM,QAAQ,KAAK,kBAAkB,KAAK,MAAM;AAAA,IAC/E,OAAO;AAAA,oBACS,QAAQ,KAAK,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUpC;;;ACtCO,SAAS,QAAQ,GAAS;AAAA,EAC/B,IAAI,CAAC,eAAe,IAAI,sBAAsB,GAAG;AAAA,IAC/C,eAAe,OAAO,wBAAwB,gBAAgB;AAAA,EAChE;AAAA;",
9
+ "debugId": "0E1BB487A83C1D8264756E2164756E21",
10
+ "names": []
11
+ }
package/dist/esm/register.js ADDED
@@ -0,0 +1,263 @@
1
+ // src/el-dm-art-color-spin.ts
2
+ import { BaseElement, css } from "@duskmoon-dev/el-base";
3
+
4
+ // ../../node_modules/.bun/@duskmoon-dev+css-art@0.3.0/node_modules/@duskmoon-dev/css-art/dist/art/color-spin.css
5
+ var color_spin_default = `@layer css-art {
6
+ @keyframes art-color-spin-spin {
7
+ 0%,
8
+ 1% {
9
+ transform: translateX(-50%) translateY(calc(var(--art-color-spin-size) * 0.026))
10
+ rotateY(0deg) scale(1.05);
11
+ }
12
+ 99%,
13
+ 100% {
14
+ transform: translateX(-50%) translateY(calc(var(--art-color-spin-size) * 0.026))
15
+ rotateY(360deg) scale(1.05);
16
+ }
17
+ }
18
+
19
+ .art-color-spin {
20
+ --art-color-spin-size: 770px;
21
+ --art-color-spin-color1: #ffd700;
22
+ --art-color-spin-color2: #20a7db;
23
+ --art-color-spin-color3: #8fce00;
24
+ --art-color-spin-color4: #ff0000;
25
+
26
+ position: relative;
27
+ width: var(--art-color-spin-size);
28
+ height: calc(var(--art-color-spin-size) * 0.26);
29
+ background: repeating-linear-gradient(
30
+ -45deg,
31
+ #000,
32
+ #000 5px,
33
+ #111 5px,
34
+ #111 10px
35
+ );
36
+ perspective: calc(var(--art-color-spin-size) * 1.039);
37
+ font-family: "Google Sans", sans-serif;
38
+ font-weight: 440;
39
+ overflow: visible;
40
+ }
41
+
42
+ .art-color-spin * {
43
+ box-sizing: border-box;
44
+ }
45
+
46
+ /* Decorative "c" letter */
47
+ .art-color-spin::before {
48
+ content: "c";
49
+ font-size: calc(var(--art-color-spin-size) * 0.461);
50
+ color: #eee;
51
+ position: absolute;
52
+ top: calc(var(--art-color-spin-size) * -0.169);
53
+ left: 0;
54
+ text-indent: calc(var(--art-color-spin-size) * -0.026);
55
+ line-height: calc(var(--art-color-spin-size) * 0.519);
56
+ z-index: 2;
57
+ -webkit-box-reflect: below calc(var(--art-color-spin-size) * -0.169)
58
+ linear-gradient(transparent, rgb(255 255 255 / 0.06));
59
+ }
60
+
61
+ /* Decorative "r" letter */
62
+ .art-color-spin::after {
63
+ content: "r";
64
+ font-size: calc(var(--art-color-spin-size) * 0.461);
65
+ color: #eee;
66
+ position: absolute;
67
+ top: calc(var(--art-color-spin-size) * -0.169);
68
+ right: calc(var(--art-color-spin-size) * 0.039);
69
+ line-height: calc(var(--art-color-spin-size) * 0.519);
70
+ z-index: 2;
71
+ -webkit-box-reflect: below calc(var(--art-color-spin-size) * -0.169)
72
+ linear-gradient(transparent, rgb(255 255 255 / 0.06));
73
+ }
74
+
75
+ /* 3D spinner container */
76
+ .art-color-spin > ul {
77
+ width: 0;
78
+ height: calc(var(--art-color-spin-size) * 0.195);
79
+ display: block;
80
+ left: 50%;
81
+ position: relative;
82
+ transform-style: preserve-3d;
83
+ transform-origin: center center;
84
+ z-index: 3;
85
+ margin: 0;
86
+ padding: 0;
87
+ list-style: none;
88
+ animation: art-color-spin-spin 11s linear infinite alternate-reverse;
89
+ }
90
+
91
+ .art-color-spin > ul * {
92
+ transform-style: preserve-3d;
93
+ }
94
+
95
+ /* White vertical bars (axis indicators) */
96
+ .art-color-spin > ul::before,
97
+ .art-color-spin > ul::after {
98
+ content: "";
99
+ display: block;
100
+ position: absolute;
101
+ width: calc(var(--art-color-spin-size) * 0.052);
102
+ height: calc(var(--art-color-spin-size) * 0.286);
103
+ border-radius: calc(var(--art-color-spin-size) * 0.026);
104
+ top: calc(var(--art-color-spin-size) * -0.039);
105
+ left: calc(var(--art-color-spin-size) * -0.026);
106
+ background: #fff;
107
+ }
108
+
109
+ .art-color-spin > ul::before {
110
+ background: #eee;
111
+ transform: rotateY(-90deg);
112
+ }
113
+
114
+ /* Colored rings */
115
+ .art-color-spin > ul > li {
116
+ display: block;
117
+ width: calc(var(--art-color-spin-size) * 0.234);
118
+ height: calc(var(--art-color-spin-size) * 0.234);
119
+ border: solid calc(var(--art-color-spin-size) * 0.032) #fff;
120
+ border-radius: 50%;
121
+ top: calc(var(--art-color-spin-size) * -0.013);
122
+ left: 0;
123
+ position: absolute;
124
+ transform: rotateY(calc(var(--i) * -90deg)) translateZ(0px)
125
+ translateX(calc(var(--art-color-spin-size) * 0.052));
126
+ transform-origin: top left;
127
+ -webkit-box-reflect: below 2px linear-gradient(transparent, rgb(255 255 255 / 0.1));
128
+ margin: 0;
129
+ padding: 0;
130
+ list-style: none;
131
+ }
132
+
133
+ /* Inner colored circles (mix-blend-mode creates glow effect) */
134
+ .art-color-spin > ul > li::before,
135
+ .art-color-spin > ul > li::after {
136
+ content: "";
137
+ width: calc(var(--art-color-spin-size) * 0.13);
138
+ height: calc(var(--art-color-spin-size) * 0.13);
139
+ display: block;
140
+ opacity: 0.75;
141
+ border-radius: 50%;
142
+ position: absolute;
143
+ left: 50%;
144
+ top: 50%;
145
+ mix-blend-mode: color-burn;
146
+ }
147
+
148
+ .art-color-spin > ul > li::after {
149
+ transform: translate3d(-50%, -50%, 1px);
150
+ }
151
+
152
+ .art-color-spin > ul > li::before {
153
+ transform: translate3d(-50%, -50%, -1px);
154
+ }
155
+
156
+ /* Ring 1: Gold */
157
+ .art-color-spin > ul > li:nth-child(1) {
158
+ outline: solid 1px var(--art-color-spin-color1);
159
+ outline-offset: 1px;
160
+ }
161
+ .art-color-spin > ul > li:nth-child(1)::after {
162
+ background: var(--art-color-spin-color1);
163
+ }
164
+ .art-color-spin > ul > li:nth-child(1)::before {
165
+ background: color-mix(in hsl, var(--art-color-spin-color1), white 30%);
166
+ }
167
+
168
+ /* Ring 2: Blue */
169
+ .art-color-spin > ul > li:nth-child(2) {
170
+ outline: solid 1px var(--art-color-spin-color2);
171
+ outline-offset: 1px;
172
+ }
173
+ .art-color-spin > ul > li:nth-child(2)::after {
174
+ background: var(--art-color-spin-color2);
175
+ }
176
+ .art-color-spin > ul > li:nth-child(2)::before {
177
+ background: color-mix(in hsl, var(--art-color-spin-color2), white 30%);
178
+ }
179
+
180
+ /* Ring 3: Green */
181
+ .art-color-spin > ul > li:nth-child(3) {
182
+ outline: solid 1px var(--art-color-spin-color3);
183
+ outline-offset: 1px;
184
+ }
185
+ .art-color-spin > ul > li:nth-child(3)::after {
186
+ background: var(--art-color-spin-color3);
187
+ }
188
+ .art-color-spin > ul > li:nth-child(3)::before {
189
+ background: color-mix(in hsl, var(--art-color-spin-color3), white 30%);
190
+ }
191
+
192
+ /* Ring 4: Red */
193
+ .art-color-spin > ul > li:nth-child(4) {
194
+ outline: solid 1px var(--art-color-spin-color4);
195
+ outline-offset: 1px;
196
+ }
197
+ .art-color-spin > ul > li:nth-child(4)::after {
198
+ background: var(--art-color-spin-color4);
199
+ }
200
+ .art-color-spin > ul > li:nth-child(4)::before {
201
+ background: color-mix(in hsl, var(--art-color-spin-color4), white 30%);
202
+ }
203
+
204
+ .art-color-spin-sm {
205
+ --art-color-spin-size: 385px;
206
+ }
207
+
208
+ .art-color-spin-lg {
209
+ --art-color-spin-size: 1000px;
210
+ }
211
+ }
212
+ `;
213
+
214
+ // src/el-dm-art-color-spin.ts
215
+ var layerMatch = color_spin_default.match(/@layer\s+css-art\s*\{([\s\S]*)\}\s*$/);
216
+ var coreCss = layerMatch ? layerMatch[1] : color_spin_default;
217
+ var styles = css`
218
+ :host {
219
+ display: inline-block;
220
+ }
221
+ :host([hidden]) {
222
+ display: none !important;
223
+ }
224
+ ${coreCss}
225
+ `;
226
+
227
+ class ElDmArtColorSpin extends BaseElement {
228
+ static properties = {
229
+ size: { type: String, reflect: true }
230
+ };
231
+ constructor() {
232
+ super();
233
+ this.attachStyles(styles);
234
+ }
235
+ render() {
236
+ const classes = ["art-color-spin"];
237
+ if (this.size && this.size !== "md")
238
+ classes.push(`art-color-spin-${this.size}`);
239
+ return `
240
+ <div class="${classes.join(" ")}">
241
+ <ul>
242
+ <li style="--i:1"></li>
243
+ <li style="--i:2"></li>
244
+ <li style="--i:3"></li>
245
+ <li style="--i:4"></li>
246
+ </ul>
247
+ </div>
248
+ `;
249
+ }
250
+ }
251
+
252
+ // src/index.ts
253
+ function register() {
254
+ if (!customElements.get("el-dm-art-color-spin")) {
255
+ customElements.define("el-dm-art-color-spin", ElDmArtColorSpin);
256
+ }
257
+ }
258
+
259
+ // src/register.ts
260
+ register();
261
+
262
+ //# debugId=B56FD0E76E0FBD6464756E2164756E21
263
+ //# sourceMappingURL=register.js.map
package/dist/esm/register.js.map ADDED
@@ -0,0 +1,12 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/el-dm-art-color-spin.ts", "../../src/index.ts", "../../src/register.ts"],
4
+ "sourcesContent": [
5
+ "import { BaseElement, css } from '@duskmoon-dev/el-base';\nimport rawCss from '@duskmoon-dev/css-art/dist/art/color-spin.css' with { type: 'text' };\n\nconst layerMatch = rawCss.match(/@layer\\s+css-art\\s*\\{([\\s\\S]*)\\}\\s*$/);\nconst coreCss = layerMatch ? layerMatch[1] : rawCss;\n\nconst styles = css`\n :host {\n display: inline-block;\n }\n :host([hidden]) {\n display: none !important;\n }\n ${coreCss}\n`;\n\nexport class ElDmArtColorSpin extends BaseElement {\n static properties = {\n size: { type: String, reflect: true },\n };\n\n declare size: string;\n\n constructor() {\n super();\n this.attachStyles(styles);\n }\n\n render(): string {\n const classes = ['art-color-spin'];\n if (this.size && this.size !== 'md') classes.push(`art-color-spin-${this.size}`);\n return `\n <div class=\"${classes.join(' ')}\">\n <ul>\n <li style=\"--i:1\"></li>\n <li style=\"--i:2\"></li>\n <li style=\"--i:3\"></li>\n <li style=\"--i:4\"></li>\n </ul>\n </div>\n `;\n }\n}\n",
6
+ "import { ElDmArtColorSpin } from './el-dm-art-color-spin.js';\n\nexport { ElDmArtColorSpin };\n\nexport function register(): void {\n if (!customElements.get('el-dm-art-color-spin')) {\n customElements.define('el-dm-art-color-spin', ElDmArtColorSpin);\n }\n}\n",
7
+ "import { register } from './index.js';\n\nregister();\n"
8
+ ],
9
+ "mappings": ";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,IAAM,aAAa,mBAAO,MAAM,sCAAsC;AACtE,IAAM,UAAU,aAAa,WAAW,KAAK;AAE7C,IAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOX;AAAA;AAAA;AAGG,MAAM,yBAAyB,YAAY;AAAA,SACzC,aAAa;AAAA,IAClB,MAAM,EAAE,MAAM,QAAQ,SAAS,KAAK;AAAA,EACtC;AAAA,EAIA,WAAW,GAAG;AAAA,IACZ,MAAM;AAAA,IACN,KAAK,aAAa,MAAM;AAAA;AAAA,EAG1B,MAAM,GAAW;AAAA,IACf,MAAM,UAAU,CAAC,gBAAgB;AAAA,IACjC,IAAI,KAAK,QAAQ,KAAK,SAAS;AAAA,MAAM,QAAQ,KAAK,kBAAkB,KAAK,MAAM;AAAA,IAC/E,OAAO;AAAA,oBACS,QAAQ,KAAK,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUpC;;;ACtCO,SAAS,QAAQ,GAAS;AAAA,EAC/B,IAAI,CAAC,eAAe,IAAI,sBAAsB,GAAG;AAAA,IAC/C,eAAe,OAAO,wBAAwB,gBAAgB;AAAA,EAChE;AAAA;;;ACLF,SAAS;",
10
+ "debugId": "B56FD0E76E0FBD6464756E2164756E21",
11
+ "names": []
12
+ }