@aurodesignsystem-dev/auro-button 0.0.0-pr356.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 (21) hide show
  1. package/CHANGELOG.md +779 -0
  2. package/LICENSE +201 -0
  3. package/NOTICE +2 -0
  4. package/README.md +161 -0
  5. package/demo/api.html +60 -0
  6. package/demo/api.js +21 -0
  7. package/demo/api.md +708 -0
  8. package/demo/api.min.js +66 -0
  9. package/demo/auro-button.min.js +1134 -0
  10. package/demo/button-sheet.html +379 -0
  11. package/demo/form.html +49 -0
  12. package/demo/icon-sheet.html +279 -0
  13. package/demo/index.html +47 -0
  14. package/demo/index.js +20 -0
  15. package/demo/index.md +415 -0
  16. package/demo/index.min.js +22 -0
  17. package/dist/auro-button-CqedMd4x.js +47 -0
  18. package/dist/index.d.ts +54 -0
  19. package/dist/index.js +1 -0
  20. package/dist/registered.js +1 -0
  21. package/package.json +84 -0
package/demo/icon-sheet.html ADDED
@@ -0,0 +1,279 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Auro Web Component Demo | auro-button</title>
7
+
8
+ <!-- Prism.js Stylesheet -->
9
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
10
+
11
+ <!-- Tailwind CSS -->
12
+ <script src="https://cdn.tailwindcss.com"></script>
13
+
14
+ <!-- Legacy reference is still needed to support auro-button's use of legacy token values at this time -->
15
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
16
+
17
+ <!-- Design Token Alaska Theme -->
18
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
19
+
20
+ <!-- Webcore Stylesheet Alaska Theme -->
21
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
22
+
23
+ <!-- Demo Specific Styles -->
24
+
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
26
+ </head>
27
+ <body class="auro-markdown">
28
+ <main class="flex flex-col items-center justify-center py-4 bg-gray-100 gap-4">
29
+ <p>Primary - Secondary - Tertiary - Flat - Ghost</p>
30
+
31
+ <div class="flex flex-row justify-between w-full">
32
+ <h4 class="text-3xl font-bold w-full text-center">Square</h4>
33
+
34
+ <h4 class="text-3xl font-bold w-full text-center">Circle</h4>
35
+ </div>
36
+
37
+ <h4 class="text-3xl font-bold w-full text-center">XL</h4>
38
+ <div class="grid grid-cols-2 gap-4">
39
+
40
+ <div class="flex flex-col items-center justify-center gap-4 p-8 w-full">
41
+ <div>
42
+ <auro-button size="xl" shape="square"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
43
+ <auro-button size="xl" shape="square" variant="secondary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
44
+ <auro-button size="xl" shape="square" variant="tertiary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
45
+ <auro-button size="xl" shape="square" variant="flat"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
46
+ <auro-button size="xl" shape="square" variant="ghost"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
47
+ </div>
48
+ </div>
49
+
50
+ <div class="flex flex-col items-center justify-center gap-4 w-full">
51
+ <div>
52
+ <auro-button size="xl" shape="circle"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
53
+ <auro-button size="xl" shape="circle" variant="secondary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
54
+ <auro-button size="xl" shape="circle" variant="tertiary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
55
+ <auro-button size="xl" shape="circle" variant="flat"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
56
+ <auro-button size="xl" shape="circle" variant="ghost"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
57
+ </div>
58
+ </div>
59
+ </div>
60
+
61
+ <div class="grid grid-cols-2 gap-4 bg-[--ds-basic-color-surface-inverse]">
62
+ <div class="flex flex-col items-center justify-center gap-4 p-8 w-full">
63
+ <div>
64
+ <auro-button ondark size="xl" shape="square"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
65
+ <auro-button ondark size="xl" shape="square" variant="secondary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
66
+ <auro-button ondark size="xl" shape="square" variant="tertiary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
67
+ <auro-button ondark size="xl" shape="square" variant="flat"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
68
+ <auro-button ondark size="xl" shape="square" variant="ghost"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
69
+ </div>
70
+ </div>
71
+
72
+ <div class="flex flex-col items-center justify-center gap-4 w-full">
73
+ <div>
74
+ <auro-button ondark size="xl" shape="circle"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
75
+ <auro-button ondark size="xl" shape="circle" variant="secondary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
76
+ <auro-button ondark size="xl" shape="circle" variant="tertiary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
77
+ <auro-button ondark size="xl" shape="circle" variant="flat"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
78
+ <auro-button ondark size="xl" shape="circle" variant="ghost"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
79
+ </div>
80
+ </div>
81
+ </div>
82
+
83
+ <h4 class="text-3xl font-bold w-full text-center pt-8">LG</h4>
84
+ <div class="grid grid-cols-2 gap-4">
85
+
86
+ <div class="flex flex-col items-center justify-center gap-4 p-8 w-full">
87
+ <div>
88
+ <auro-button size="lg" shape="square"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
89
+ <auro-button size="lg" shape="square" variant="secondary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
90
+ <auro-button size="lg" shape="square" variant="tertiary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
91
+ <auro-button size="lg" shape="square" variant="flat"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
92
+ <auro-button size="lg" shape="square" variant="ghost"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
93
+ </div>
94
+ </div>
95
+
96
+ <div class="flex flex-col items-center justify-center gap-4 w-full">
97
+ <div>
98
+ <auro-button size="lg" shape="circle"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
99
+ <auro-button size="lg" shape="circle" variant="secondary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
100
+ <auro-button size="lg" shape="circle" variant="tertiary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
101
+ <auro-button size="lg" shape="circle" variant="flat"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
102
+ <auro-button size="lg" shape="circle" variant="ghost"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
103
+ </div>
104
+ </div>
105
+ </div>
106
+
107
+ <div class="grid grid-cols-2 gap-4 bg-[--ds-basic-color-surface-inverse]">
108
+ <div class="flex flex-col items-center justify-center gap-4 p-8 w-full">
109
+ <div>
110
+ <auro-button ondark size="lg" shape="square"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
111
+ <auro-button ondark size="lg" shape="square" variant="secondary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
112
+ <auro-button ondark size="lg" shape="square" variant="tertiary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
113
+ <auro-button ondark size="lg" shape="square" variant="flat"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
114
+ <auro-button ondark size="lg" shape="square" variant="ghost"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
115
+ </div>
116
+ </div>
117
+
118
+ <div class="flex flex-col items-center justify-center gap-4 w-full">
119
+ <div>
120
+ <auro-button ondark size="lg" shape="circle"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
121
+ <auro-button ondark size="lg" shape="circle" variant="secondary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
122
+ <auro-button ondark size="lg" shape="circle" variant="tertiary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
123
+ <auro-button ondark size="lg" shape="circle" variant="flat"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
124
+ <auro-button ondark size="lg" shape="circle" variant="ghost"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <h4 class="text-3xl font-bold w-full text-center pt-8">MD</h4>
130
+ <div class="grid grid-cols-2 gap-4">
131
+
132
+ <div class="flex flex-col items-center justify-center gap-4 p-8 w-full">
133
+ <div>
134
+ <auro-button size="md" shape="square"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
135
+ <auro-button size="md" shape="square" variant="secondary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
136
+ <auro-button size="md" shape="square" variant="tertiary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
137
+ <auro-button size="md" shape="square" variant="flat"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
138
+ <auro-button size="md" shape="square" variant="ghost"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
139
+ </div>
140
+ </div>
141
+
142
+ <div class="flex flex-col items-center justify-center gap-4 w-full">
143
+ <div>
144
+ <auro-button size="md" shape="circle"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
145
+ <auro-button size="md" shape="circle" variant="secondary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
146
+ <auro-button size="md" shape="circle" variant="tertiary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
147
+ <auro-button size="md" shape="circle" variant="flat"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
148
+ <auro-button size="md" shape="circle" variant="ghost"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
149
+ </div>
150
+ </div>
151
+ </div>
152
+
153
+ <div class="grid grid-cols-2 gap-4 bg-[--ds-basic-color-surface-inverse]">
154
+ <div class="flex flex-col items-center justify-center gap-4 p-8 w-full">
155
+ <div>
156
+ <auro-button ondark size="md" shape="square"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
157
+ <auro-button ondark size="md" shape="square" variant="secondary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
158
+ <auro-button ondark size="md" shape="square" variant="tertiary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
159
+ <auro-button ondark size="md" shape="square" variant="flat"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
160
+ <auro-button ondark size="md" shape="square" variant="ghost"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
161
+ </div>
162
+ </div>
163
+
164
+ <div class="flex flex-col items-center justify-center gap-4 w-full">
165
+ <div>
166
+ <auro-button ondark size="md" shape="circle"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
167
+ <auro-button ondark size="md" shape="circle" variant="secondary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
168
+ <auro-button ondark size="md" shape="circle" variant="tertiary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
169
+ <auro-button ondark size="md" shape="circle" variant="flat"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
170
+ <auro-button ondark size="md" shape="circle" variant="ghost"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <h4 class="text-3xl font-bold w-full text-center pt-8">SM</h4>
176
+ <div class="grid grid-cols-2 gap-4">
177
+
178
+ <div class="flex flex-col items-center justify-center gap-4 p-8 w-full">
179
+ <div>
180
+ <auro-button size="sm" shape="square"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
181
+ <auro-button size="sm" shape="square" variant="secondary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
182
+ <auro-button size="sm" shape="square" variant="tertiary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
183
+ <auro-button size="sm" shape="square" variant="flat"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
184
+ <auro-button size="sm" shape="square" variant="ghost"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
185
+ </div>
186
+ </div>
187
+
188
+ <div class="flex flex-col items-center justify-center gap-4 w-full">
189
+ <div>
190
+ <auro-button size="sm" shape="circle"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
191
+ <auro-button size="sm" shape="circle" variant="secondary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
192
+ <auro-button size="sm" shape="circle" variant="tertiary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
193
+ <auro-button size="sm" shape="circle" variant="flat"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
194
+ <auro-button size="sm" shape="circle" variant="ghost"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <div class="grid grid-cols-2 gap-4 bg-[--ds-basic-color-surface-inverse]">
200
+ <div class="flex flex-col items-center justify-center gap-4 p-8 w-full">
201
+ <div>
202
+ <auro-button ondark size="sm" shape="square"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
203
+ <auro-button ondark size="sm" shape="square" variant="secondary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
204
+ <auro-button ondark size="sm" shape="square" variant="tertiary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
205
+ <auro-button ondark size="sm" shape="square" variant="flat"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
206
+ <auro-button ondark size="sm" shape="square" variant="ghost"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
207
+ </div>
208
+ </div>
209
+
210
+ <div class="flex flex-col items-center justify-center gap-4 w-full">
211
+ <div>
212
+ <auro-button ondark size="sm" shape="circle"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
213
+ <auro-button ondark size="sm" shape="circle" variant="secondary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
214
+ <auro-button ondark size="sm" shape="circle" variant="tertiary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
215
+ <auro-button ondark size="sm" shape="circle" variant="flat"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
216
+ <auro-button ondark size="sm" shape="circle" variant="ghost"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
217
+ </div>
218
+ </div>
219
+ </div>
220
+
221
+ <h4 class="text-3xl font-bold w-full text-center pt-8">XS</h4>
222
+ <div class="grid grid-cols-2 gap-4">
223
+
224
+ <div class="flex flex-col items-center justify-center gap-4 p-8 w-full">
225
+ <div>
226
+ <auro-button size="xs" shape="square"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
227
+ <auro-button size="xs" shape="square" variant="secondary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
228
+ <auro-button size="xs" shape="square" variant="tertiary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
229
+ <auro-button size="xs" shape="square" variant="flat"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
230
+ <auro-button size="xs" shape="square" variant="ghost"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
231
+ </div>
232
+ </div>
233
+
234
+ <div class="flex flex-col items-center justify-center gap-4 w-full">
235
+ <div>
236
+ <auro-button size="xs" shape="circle"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
237
+ <auro-button size="xs" shape="circle" variant="secondary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
238
+ <auro-button size="xs" shape="circle" variant="tertiary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
239
+ <auro-button size="xs" shape="circle" variant="flat"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
240
+ <auro-button size="xs" shape="circle" variant="ghost"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
241
+ </div>
242
+ </div>
243
+ </div>
244
+
245
+ <div class="grid grid-cols-2 gap-4 bg-[--ds-basic-color-surface-inverse]">
246
+ <div class="flex flex-col items-center justify-center gap-4 p-8 w-full">
247
+ <div>
248
+ <auro-button ondark size="xs" shape="square"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
249
+ <auro-button ondark size="xs" shape="square" variant="secondary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
250
+ <auro-button ondark size="xs" shape="square" variant="tertiary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
251
+ <auro-button ondark size="xs" shape="square" variant="flat"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
252
+ <auro-button ondark size="xs" shape="square" variant="ghost"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
253
+ </div>
254
+ </div>
255
+
256
+ <div class="flex flex-col items-center justify-center gap-4 w-full">
257
+ <div>
258
+ <auro-button ondark size="xs" shape="circle"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
259
+ <auro-button ondark size="xs" shape="circle" variant="secondary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
260
+ <auro-button ondark size="xs" shape="circle" variant="tertiary"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
261
+ <auro-button ondark size="xs" shape="circle" variant="flat"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
262
+ <auro-button ondark size="xs" shape="circle" variant="ghost"><auro-icon customColor category="interface" name="home-filled"></auro-icon></auro-button>
263
+ </div>
264
+ </div>
265
+ </div>
266
+
267
+ </main>
268
+ <script type="module" data-demo-script="true">
269
+ import { initExamples } from './index.min.js';
270
+ initExamples();
271
+ </script>
272
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
273
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-alert@latest/dist/auro-alert__bundled.js" type="module"></script>
274
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
275
+
276
+ <script src="https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js"></script>
277
+ <script src="https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js"></script>
278
+ </body>
279
+ </html>
package/demo/index.html ADDED
@@ -0,0 +1,47 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Auro Web Component Demo | auro-button</title>
7
+
8
+ <!-- Prism.js Stylesheet -->
9
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
10
+
11
+ <!-- Legacy reference is still needed to support auro-button's use of legacy token values at this time -->
12
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
13
+
14
+ <!-- Design Token Alaska Theme -->
15
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
16
+
17
+ <!-- Webcore Stylesheet Alaska Theme -->
18
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
19
+
20
+ <!-- Demo Specific Styles -->
21
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
23
+ </head>
24
+ <body class="auro-markdown">
25
+ <main></main>
26
+
27
+ <script type="module">
28
+ fetch('./index.md')
29
+ .then((response) => response.text())
30
+ .then((text) => {
31
+ const rawHtml = marked.parse(text);
32
+ document.querySelector('main').innerHTML = rawHtml;
33
+ Prism.highlightAll();
34
+ });
35
+ </script>
36
+ <script type="module" data-demo-script="true">
37
+ import { initExamples } from './index.min.js';
38
+ initExamples();
39
+ </script>
40
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
41
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-alert@latest/dist/auro-alert__bundled.js" type="module"></script>
42
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
43
+
44
+ <script src="https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js"></script>
45
+ <script src="https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js"></script>
46
+ </body>
47
+ </html>
package/demo/index.js ADDED
@@ -0,0 +1,20 @@
1
+ import { AuroButton } from "../src/index";
2
+
3
+ AuroButton.register();
4
+ AuroButton.register("custom-button");
5
+
6
+ export function initExamples(initCount) {
7
+ // biome-ignore lint: no-unused-vars
8
+ initCount = initCount || 0;
9
+
10
+ try {
11
+ console.log("Initializing examples");
12
+ } catch {
13
+ if (initCount <= 20) {
14
+ // setTimeout handles issue where content is sometimes loaded after the functions get called
15
+ setTimeout(() => {
16
+ initExamples(initCount + 1);
17
+ }, 100);
18
+ }
19
+ }
20
+ }