@aurodesignsystem-dev/auro-loader 0.0.0-pr83.0 → 0.0.0-pr86.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 (11) hide show
  1. package/README.md +46 -63
  2. package/demo/api.html +1 -1
  3. package/demo/api.md +142 -184
  4. package/demo/auro-loader.min.js +62 -13
  5. package/demo/index.html +1 -1
  6. package/demo/index.md +19 -192
  7. package/dist/{auro-loader-CQmwU8CR.js → auro-loader-BcZn60oi.js} +1 -1
  8. package/dist/index.d.ts +214 -21
  9. package/dist/index.js +1 -1
  10. package/dist/registered.js +1 -1
  11. package/package.json +10 -5
package/demo/api.md CHANGED
@@ -1,31 +1,31 @@
1
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/api.md) -->
2
- <!-- The below content is automatically added from ../docs/api.md -->
1
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
2
+ <!-- The below content is automatically added from ./../docs/api.md -->
3
3
 
4
4
  # auro-loader
5
5
 
6
- The auro-loader element is an easy to use animated loader component.
6
+ The `auro-loader` element displays a loading animation to indicate a loading state to users.
7
7
 
8
8
  ### Properties & Attributes
9
9
 
10
- | Properties | Attributes | Type | Default | Description |
11
- | ---------- | ---------- | ------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
12
- | appearance | appearance | string | "default" | Defines whether the loader is intended for lighter or darker backgrounds, or if it should use the brand color regardless of the background. |
13
- | laser | laser | boolean | false | Sets loader to laser type. |
14
- | orbit | orbit | boolean | false | Sets loader to orbit type. |
15
- | pulse | pulse | boolean | false | Sets loader to pulse type. |
16
- | ringworm | ringworm | boolean | false | Sets loader to ringworm type. |
17
- | | lg | Boolean | | Sets size to large. |
18
- | | md | Boolean | | Sets size to medium. |
19
- | | ondark | Boolean | | DEPRECATED - use `appearance="inverse"`. |
20
- | | onlight | Boolean | | DEPRECATED - use `appearance="brand"`. |
21
- | | sm | Boolean | | Sets size to small. |
22
- | | xs | Boolean | | Sets size to extra small. |
10
+ | Properties | Attributes | Modifiers | Type | Default | Description |
11
+ | ---------- | ---------- | --------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
12
+ | appearance | appearance | | `default` \| `inverse` \| `brand` | `default` | Defines whether the loader is intended for lighter or darker backgrounds, or if it should use the brand color regardless of the background. |
13
+ | laser | laser | | boolean | | Sets loader to laser type. |
14
+ | lg | lg | | boolean | | Sets size to large. |
15
+ | md | md | | boolean | | Sets size to medium. |
16
+ | onDark | onDark | | boolean | | DEPRECATED - use `appearance="inverse"`. |
17
+ | onLight | onLight | | boolean | | DEPRECATED - use `appearance="brand"`. |
18
+ | orbit | orbit | | boolean | | Sets loader to orbit type. |
19
+ | pulse | pulse | | boolean | | Sets loader to pulse type. |
20
+ | ringworm | ringworm | | boolean | | Sets loader to ringworm type. |
21
+ | sm | sm | | boolean | | Sets size to small. |
22
+ | xs | xs | | boolean | | Sets size to extra small. |
23
23
 
24
24
  ### Methods
25
25
 
26
- | Name | Parameters | Return | Description |
27
- | -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
28
- | register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
26
+ | Name | Parameters | Return | Description |
27
+ | -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
28
+ | register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
29
29
 
30
30
  ### Slots
31
31
 
@@ -40,25 +40,23 @@ The auro-loader element is an easy to use animated loader component.
40
40
  | element | Apply style to adjust speed of animation. |
41
41
  <!-- AURO-GENERATED-CONTENT:END -->
42
42
 
43
- ## API Examples
44
-
45
- ### Default examples
43
+ ## Basic Loaders
46
44
 
47
- The following illustrates the use of the base elements with default output. The `laser` example is shown at the top of the page due to its fixed positioning.
45
+ The following example illustrates the different loader types that the `<auro-loader>` element supports. The `laser` example is shown at the top of the page due to its fixed positioning.
48
46
 
49
47
  <div class="exampleWrapper">
50
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
51
- <!-- The below content is automatically added from ../apiExamples/basic.html -->
48
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
49
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
52
50
  <auro-loader ringworm></auro-loader>
53
51
  <auro-loader orbit></auro-loader>
54
52
  <auro-loader pulse></auro-loader>
55
53
  <auro-loader laser></auro-loader>
56
54
  <!-- AURO-GENERATED-CONTENT:END -->
57
- </div>
55
+ </div>
58
56
  <auro-accordion alignRight>
59
57
  <span slot="trigger">See code</span>
60
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
61
- <!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
58
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
59
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
62
60
 
63
61
  ```html
64
62
  <auro-loader ringworm></auro-loader>
@@ -69,113 +67,21 @@ The following illustrates the use of the base elements with default output. The
69
67
  <!-- AURO-GENERATED-CONTENT:END -->
70
68
  </auro-accordion>
71
69
 
72
- ### Attribute Examples
70
+ ## Property & Attribute Examples
73
71
 
74
- #### <a name="xs"></a>`xs`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
75
- Use the `xs` boolean attribute for a pre-defined size. Type `laser` does not support a size attribute.
72
+ ### Appearance
76
73
 
77
- <div class="exampleWrapper">
78
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/api_xs.html) -->
79
- <!-- The below content is automatically added from ../apiExamples/api_xs.html -->
80
- <auro-loader ringworm xs></auro-loader>
81
- <auro-loader orbit xs></auro-loader>
82
- <auro-loader pulse xs></auro-loader>
83
- <!-- AURO-GENERATED-CONTENT:END -->
84
- </div>
85
- <auro-accordion alignRight>
86
- <span slot="trigger">See code</span>
87
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/api_xs.html) -->
88
- <!-- The below code snippet is automatically added from ../apiExamples/api_xs.html -->
89
-
90
- ```html
91
- <auro-loader ringworm xs></auro-loader>
92
- <auro-loader orbit xs></auro-loader>
93
- <auro-loader pulse xs></auro-loader>
94
- ```
95
- <!-- AURO-GENERATED-CONTENT:END -->
96
- </auro-accordion>
97
-
98
- #### <a name="sm"></a>`sm`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
99
- Use the `sm` boolean attribute for a pre-defined size. Type `laser` does not support a size attribute.
74
+ The `<auro-loader>` element supports three appearance options via the `appearance` attribute. Options are `default`, `inverse` and `brand`.
100
75
 
101
- <div class="exampleWrapper">
102
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/api_small.html) -->
103
- <!-- The below content is automatically added from ../apiExamples/api_small.html -->
104
- <auro-loader ringworm sm></auro-loader>
105
- <auro-loader orbit sm></auro-loader>
106
- <auro-loader pulse sm></auro-loader>
107
- <!-- AURO-GENERATED-CONTENT:END -->
108
- </div>
109
- <auro-accordion alignRight>
110
- <span slot="trigger">See code</span>
111
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/api_small.html) -->
112
- <!-- The below code snippet is automatically added from ../apiExamples/api_small.html -->
76
+ **Note**: Type `laser` is supported, but not shown due to fixed positioning.
113
77
 
114
- ```html
115
- <auro-loader ringworm sm></auro-loader>
116
- <auro-loader orbit sm></auro-loader>
117
- <auro-loader pulse sm></auro-loader>
118
- ```
119
- <!-- AURO-GENERATED-CONTENT:END -->
120
- </auro-accordion>
121
-
122
- #### <a name="md"></a>`md`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
123
- Use the `md` boolean attribute for a pre-defined size. Type `laser` does not support a size attribute.
124
-
125
- <div class="exampleWrapper">
126
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/api_medium.html) -->
127
- <!-- The below content is automatically added from ../apiExamples/api_medium.html -->
128
- <auro-loader ringworm md></auro-loader>
129
- <auro-loader orbit md></auro-loader>
130
- <auro-loader pulse md></auro-loader>
131
- <!-- AURO-GENERATED-CONTENT:END -->
132
- </div>
133
- <auro-accordion alignRight>
134
- <span slot="trigger">See code</span>
135
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/api_medium.html) -->
136
- <!-- The below code snippet is automatically added from ../apiExamples/api_medium.html -->
137
-
138
- ```html
139
- <auro-loader ringworm md></auro-loader>
140
- <auro-loader orbit md></auro-loader>
141
- <auro-loader pulse md></auro-loader>
142
- ```
143
- <!-- AURO-GENERATED-CONTENT:END -->
144
- </auro-accordion>
145
-
146
- #### <a name="lg"></a>`lg`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
147
- Use the `lg` boolean attribute for a pre-defined size. Type `laser` does not support a size attribute.
148
-
149
- <div class="exampleWrapper">
150
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/api_large.html) -->
151
- <!-- The below content is automatically added from ../apiExamples/api_large.html -->
152
- <auro-loader ringworm lg></auro-loader>
153
- <auro-loader orbit lg></auro-loader>
154
- <auro-loader pulse lg></auro-loader>
155
- <!-- AURO-GENERATED-CONTENT:END -->
156
- </div>
157
- <auro-accordion alignRight>
158
- <span slot="trigger">See code</span>
159
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/api_large.html) -->
160
- <!-- The below code snippet is automatically added from ../apiExamples/api_large.html -->
161
-
162
- ```html
163
- <auro-loader ringworm lg></auro-loader>
164
- <auro-loader orbit lg></auro-loader>
165
- <auro-loader pulse lg></auro-loader>
166
- ```
167
- <!-- AURO-GENERATED-CONTENT:END -->
168
- </auro-accordion>
169
-
170
- ### Appearance Examples <a name="appearance"></a>
171
-
172
- #### `appearance="brand"`
78
+ #### Brand
173
79
 
174
80
  Use the `appearance="brand"` attribute for a brand color. Type `laser` is supported, but not shown due to fixed positioning.
175
81
 
176
82
  <div class="exampleWrapper">
177
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/brandAppearance.html) -->
178
- <!-- The below content is automatically added from ../apiExamples/brandAppearance.html -->
83
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/brand-appearance.html) -->
84
+ <!-- The below content is automatically added from ../apiExamples/brand-appearance.html -->
179
85
  <auro-loader ringworm appearance="brand"></auro-loader>
180
86
  <auro-loader orbit appearance="brand"></auro-loader>
181
87
  <auro-loader pulse appearance="brand"></auro-loader>
@@ -183,8 +89,8 @@ Use the `appearance="brand"` attribute for a brand color. Type `laser` is suppor
183
89
  </div>
184
90
  <auro-accordion alignRight>
185
91
  <span slot="trigger">See code</span>
186
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/brandAppearance.html) -->
187
- <!-- The below code snippet is automatically added from ../apiExamples/brandAppearance.html -->
92
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/brand-appearance.html) -->
93
+ <!-- The below code snippet is automatically added from ../apiExamples/brand-appearance.html -->
188
94
 
189
95
  ```html
190
96
  <auro-loader ringworm appearance="brand"></auro-loader>
@@ -194,13 +100,13 @@ Use the `appearance="brand"` attribute for a brand color. Type `laser` is suppor
194
100
  <!-- AURO-GENERATED-CONTENT:END -->
195
101
  </auro-accordion>
196
102
 
197
- #### `appearance="inverse"`
103
+ #### Inverse
198
104
 
199
- Use the `appearance="inverse"` attribute for a pre-defined color. Type `laser` is supported, but not shown due to fixed positioning.
105
+ Use the `appearance="inverse"` attribute for a pre-defined color.
200
106
 
201
107
  <div class="exampleWrapper--ondark">
202
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/inverseAppearance.html) -->
203
- <!-- The below content is automatically added from ../apiExamples/inverseAppearance.html -->
108
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/inverse-appearance.html) -->
109
+ <!-- The below content is automatically added from ../apiExamples/inverse-appearance.html -->
204
110
  <auro-loader ringworm appearance="inverse"></auro-loader>
205
111
  <auro-loader orbit appearance="inverse"></auro-loader>
206
112
  <auro-loader pulse appearance="inverse"></auro-loader>
@@ -208,8 +114,8 @@ Use the `appearance="inverse"` attribute for a pre-defined color. Type `laser` i
208
114
  </div>
209
115
  <auro-accordion alignRight>
210
116
  <span slot="trigger">See code</span>
211
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/inverseAppearance.html) -->
212
- <!-- The below code snippet is automatically added from ../apiExamples/inverseAppearance.html -->
117
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/inverse-appearance.html) -->
118
+ <!-- The below code snippet is automatically added from ../apiExamples/inverse-appearance.html -->
213
119
 
214
120
  ```html
215
121
  <auro-loader ringworm appearance="inverse"></auro-loader>
@@ -219,101 +125,124 @@ Use the `appearance="inverse"` attribute for a pre-defined color. Type `laser` i
219
125
  <!-- AURO-GENERATED-CONTENT:END -->
220
126
  </auro-accordion>
221
127
 
222
- ### Property Examples
128
+ ### Size
129
+
130
+ The `<auro-loader>` element supports a scale of sizes. Options are `[xs, sm, md, lg]`.
223
131
 
224
- Use the following `orbit`, `laser`, `ringworm`, and `pulse` properties as illustrated.
132
+ **Note**: Type `laser` does not support a size attribute.
225
133
 
226
- #### <a name="orbit"></a>`orbit`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
227
- Use the `orbit` property for the desired animated loader.
134
+ #### Extra Small
135
+
136
+ Use the `xs` boolean attribute for a pre-defined size.
228
137
 
229
138
  <div class="exampleWrapper">
230
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/property_orbit.html) -->
231
- <!-- The below content is automatically added from ../apiExamples/property_orbit.html -->
232
- <auro-loader orbit></auro-loader>
139
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/xs.html) -->
140
+ <!-- The below content is automatically added from ../apiExamples/xs.html -->
141
+ <auro-loader ringworm xs></auro-loader>
142
+ <auro-loader orbit xs></auro-loader>
143
+ <auro-loader pulse xs></auro-loader>
233
144
  <!-- AURO-GENERATED-CONTENT:END -->
234
145
  </div>
235
146
  <auro-accordion alignRight>
236
147
  <span slot="trigger">See code</span>
237
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/property_orbit.html) -->
238
- <!-- The below code snippet is automatically added from ../apiExamples/property_orbit.html -->
148
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/xs.html) -->
149
+ <!-- The below code snippet is automatically added from ../apiExamples/xs.html -->
239
150
 
240
151
  ```html
241
- <auro-loader orbit></auro-loader>
152
+ <auro-loader ringworm xs></auro-loader>
153
+ <auro-loader orbit xs></auro-loader>
154
+ <auro-loader pulse xs></auro-loader>
242
155
  ```
243
156
  <!-- AURO-GENERATED-CONTENT:END -->
244
157
  </auro-accordion>
245
158
 
246
- #### <a name="laser"></a>`laser`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
247
- Use the `laser` property for the desired animated loader. Example is shown at the top of the page due its fixed positioning.
159
+ #### Small
160
+
161
+ Use the `sm` boolean attribute for a pre-defined size.
248
162
 
249
163
  <div class="exampleWrapper">
250
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/property_laser.html) -->
251
- <!-- The below content is automatically added from ../apiExamples/property_laser.html -->
252
- <auro-loader laser></auro-loader>
164
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/sm.html) -->
165
+ <!-- The below content is automatically added from ../apiExamples/sm.html -->
166
+ <auro-loader ringworm sm></auro-loader>
167
+ <auro-loader orbit sm></auro-loader>
168
+ <auro-loader pulse sm></auro-loader>
253
169
  <!-- AURO-GENERATED-CONTENT:END -->
254
170
  </div>
255
171
  <auro-accordion alignRight>
256
172
  <span slot="trigger">See code</span>
257
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/property_laser.html) -->
258
- <!-- The below code snippet is automatically added from ../apiExamples/property_laser.html -->
173
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/sm.html) -->
174
+ <!-- The below code snippet is automatically added from ../apiExamples/sm.html -->
259
175
 
260
176
  ```html
261
- <auro-loader laser></auro-loader>
177
+ <auro-loader ringworm sm></auro-loader>
178
+ <auro-loader orbit sm></auro-loader>
179
+ <auro-loader pulse sm></auro-loader>
262
180
  ```
263
181
  <!-- AURO-GENERATED-CONTENT:END -->
264
182
  </auro-accordion>
265
183
 
266
- #### <a name="pulse"></a>`pulse`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
267
- Use the `pulse` property for the desired animated loader.
184
+ #### Medium
185
+
186
+ Use the `md` boolean attribute for a pre-defined size.
268
187
 
269
188
  <div class="exampleWrapper">
270
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/property_pulse.html) -->
271
- <!-- The below content is automatically added from ../apiExamples/property_pulse.html -->
272
- <auro-loader pulse></auro-loader>
189
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/md.html) -->
190
+ <!-- The below content is automatically added from ../apiExamples/md.html -->
191
+ <auro-loader ringworm md></auro-loader>
192
+ <auro-loader orbit md></auro-loader>
193
+ <auro-loader pulse md></auro-loader>
273
194
  <!-- AURO-GENERATED-CONTENT:END -->
274
195
  </div>
275
196
  <auro-accordion alignRight>
276
197
  <span slot="trigger">See code</span>
277
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/property_pulse.html) -->
278
- <!-- The below code snippet is automatically added from ../apiExamples/property_pulse.html -->
198
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/md.html) -->
199
+ <!-- The below code snippet is automatically added from ../apiExamples/md.html -->
279
200
 
280
201
  ```html
281
- <auro-loader pulse></auro-loader>
202
+ <auro-loader ringworm md></auro-loader>
203
+ <auro-loader orbit md></auro-loader>
204
+ <auro-loader pulse md></auro-loader>
282
205
  ```
283
206
  <!-- AURO-GENERATED-CONTENT:END -->
284
207
  </auro-accordion>
285
208
 
286
- #### <a name="ringworm"></a>`ringworm`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
287
- Use the `ringworm` property for the desired animated loader.
209
+ #### Large
210
+
211
+ Use the `lg` boolean attribute for a pre-defined size.
288
212
 
289
213
  <div class="exampleWrapper">
290
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/property_ringworm.html) -->
291
- <!-- The below content is automatically added from ../apiExamples/property_ringworm.html -->
292
- <auro-loader ringworm></auro-loader>
214
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/lg.html) -->
215
+ <!-- The below content is automatically added from ../apiExamples/lg.html -->
216
+ <auro-loader ringworm lg></auro-loader>
217
+ <auro-loader orbit lg></auro-loader>
218
+ <auro-loader pulse lg></auro-loader>
293
219
  <!-- AURO-GENERATED-CONTENT:END -->
294
220
  </div>
295
221
  <auro-accordion alignRight>
296
222
  <span slot="trigger">See code</span>
297
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/property_ringworm.html) -->
298
- <!-- The below code snippet is automatically added from ../apiExamples/property_ringworm.html -->
223
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/lg.html) -->
224
+ <!-- The below code snippet is automatically added from ../apiExamples/lg.html -->
299
225
 
300
226
  ```html
301
- <auro-loader ringworm></auro-loader>
227
+ <auro-loader ringworm lg></auro-loader>
228
+ <auro-loader orbit lg></auro-loader>
229
+ <auro-loader pulse lg></auro-loader>
302
230
  ```
303
231
  <!-- AURO-GENERATED-CONTENT:END -->
304
232
  </auro-accordion>
305
233
 
306
- ### Slot Examples
234
+ ## Slot Examples
307
235
 
308
- #### <a name="staticLabel"></a>`staticLabel`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
236
+ ### Static Label
237
+
309
238
  Use the `staticLabel` slot to provide custom text that replaces the `auro-loader` component when the user has the `prefers-reduced-motion` accessibility feature enabled.
310
239
  The default text is `Loading...`
311
240
 
312
241
  In order to see the example in action, please enable your system's "Reduce Motion" accessibility setting.
313
242
 
314
243
  <div class="exampleWrapper">
315
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/staticLabel.html) -->
316
- <!-- The below content is automatically added from ../apiExamples/staticLabel.html -->
244
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/static-label.html) -->
245
+ <!-- The below content is automatically added from ../apiExamples/static-label.html -->
317
246
  <auro-loader ringworm>Ringworm</auro-loader>
318
247
  <auro-loader orbit>Orbit</auro-loader>
319
248
  <auro-loader pulse>Pulse</auro-loader>
@@ -322,8 +251,8 @@ In order to see the example in action, please enable your system's "Reduce Motio
322
251
  </div>
323
252
  <auro-accordion alignRight>
324
253
  <span slot="trigger">See code</span>
325
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/staticLabel.html) -->
326
- <!-- The below code snippet is automatically added from ../apiExamples/staticLabel.html -->
254
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/static-label.html) -->
255
+ <!-- The below code snippet is automatically added from ../apiExamples/static-label.html -->
327
256
 
328
257
  ```html
329
258
  <auro-loader ringworm>Ringworm</auro-loader>
@@ -334,14 +263,15 @@ In order to see the example in action, please enable your system's "Reduce Motio
334
263
  <!-- AURO-GENERATED-CONTENT:END -->
335
264
  </auro-accordion>
336
265
 
337
- ### CSS Shadow Parts Examples
266
+ ## CSS Shadow Part Examples
338
267
 
339
- #### <a name="element"></a>`element`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
340
- Use the `element` CSS Part with your CSS as illustrated to effect things like the speed of the animation.
268
+ ### Element
269
+
270
+ Use the `::part(element)` with your CSS as illustrated to effect things like the speed of the animation.
341
271
 
342
272
  <div class="exampleWrapper">
343
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom_speed.html) -->
344
- <!-- The below content is automatically added from ../apiExamples/custom_speed.html -->
273
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom-speed.html) -->
274
+ <!-- The below content is automatically added from ../apiExamples/custom-speed.html -->
345
275
  <style>
346
276
  .slow::part(element) {
347
277
  animation-duration: 8s;
@@ -356,8 +286,8 @@ Use the `element` CSS Part with your CSS as illustrated to effect things like th
356
286
  </div>
357
287
  <auro-accordion alignRight>
358
288
  <span slot="trigger">See code</span>
359
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom_speed.html) -->
360
- <!-- The below code snippet is automatically added from ../apiExamples/custom_speed.html -->
289
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom-speed.html) -->
290
+ <!-- The below code snippet is automatically added from ../apiExamples/custom-speed.html -->
361
291
 
362
292
  ```html
363
293
  <style>
@@ -374,10 +304,38 @@ Use the `element` CSS Part with your CSS as illustrated to effect things like th
374
304
  <!-- AURO-GENERATED-CONTENT:END -->
375
305
  </auro-accordion>
376
306
 
377
- ### Theme Support
307
+ ## Common Usage Patterns & Functional Examples
308
+
309
+ ### Custom Color Support
310
+
311
+ The `<auro-loader>` element supports any custom color defined at the root level of the element.
312
+
313
+ <div class="exampleWrapper">
314
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom-color.html) -->
315
+ <!-- The below content is automatically added from ../apiExamples/custom-color.html -->
316
+ <auro-loader style="color: var(--ds-color-brand-tropical-300)" ringworm md></auro-loader>
317
+ <auro-loader style="color: var(--ds-color-brand-goldcoast-300)" orbit md></auro-loader>
318
+ <auro-loader style="color: var(--ds-color-brand-alpine-400)" pulse md></auro-loader>
319
+ <!-- AURO-GENERATED-CONTENT:END -->
320
+ </div>
321
+ <auro-accordion alignRight>
322
+ <span slot="trigger">See code</span>
323
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom-color.html) -->
324
+ <!-- The below code snippet is automatically added from ../apiExamples/custom-color.html -->
325
+
326
+ ```html
327
+ <auro-loader style="color: var(--ds-color-brand-tropical-300)" ringworm md></auro-loader>
328
+ <auro-loader style="color: var(--ds-color-brand-goldcoast-300)" orbit md></auro-loader>
329
+ <auro-loader style="color: var(--ds-color-brand-alpine-400)" pulse md></auro-loader>
330
+ ```
331
+ <!-- AURO-GENERATED-CONTENT:END -->
332
+ </auro-accordion>
333
+
334
+ ## Restyle Component with CSS Variables
378
335
 
379
- The component may be restyled using the following code sample and changing the values of the following token(s).
336
+ The component may be restyled by changing the values of the following token(s).
380
337
 
338
+ <!-- Remove section if component does not have any component specific tokens -->
381
339
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
382
340
  <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
383
341
 
package/demo/auro-loader.min.js CHANGED
@@ -121,12 +121,9 @@ var tokensCss = i$3`:host{--ds-auro-loader-background-color: currentcolor;--ds-a
121
121
 
122
122
 
123
123
  /**
124
- * @attr {Boolean} ondark - DEPRECATED - use `appearance="inverse"`.
125
- * @attr {Boolean} onlight - DEPRECATED - use `appearance="brand"`.
126
- * @attr {Boolean} xs - Sets size to extra small.
127
- * @attr {Boolean} sm - Sets size to small.
128
- * @attr {Boolean} md - Sets size to medium.
129
- * @attr {Boolean} lg - Sets size to large.
124
+ * The `auro-loader` element displays a loading animation to indicate a loading state to users.
125
+ * @customElement auro-loader
126
+ *
130
127
  * @slot - Default slot for text that replaces `auro-loader` component when user has the "Reduce Motion" a11y feature enabled.
131
128
  * @csspart element - Apply style to adjust speed of animation.
132
129
  */
@@ -134,8 +131,16 @@ class AuroLoader extends i {
134
131
  constructor() {
135
132
  super();
136
133
 
134
+ this._initializeDefaults();
135
+ }
137
136
 
137
+ _initializeDefaults() {
138
+ this.orbit = false;
139
+ this.ringworm = false;
140
+ this.laser = false;
141
+ this.pulse = false;
138
142
  this.appearance = "default";
143
+
139
144
  /**
140
145
  * @private
141
146
  */
@@ -155,11 +160,6 @@ class AuroLoader extends i {
155
160
  * @private
156
161
  */
157
162
  this.runtimeUtils = new AuroLibraryRuntimeUtils();
158
-
159
- this.orbit = false;
160
- this.ringworm = false;
161
- this.laser = false;
162
- this.pulse = false;
163
163
  }
164
164
 
165
165
  // function to define props used within the scope of this component
@@ -168,7 +168,7 @@ class AuroLoader extends i {
168
168
 
169
169
  /**
170
170
  * Defines whether the loader is intended for lighter or darker backgrounds, or if it should use the brand color regardless of the background.
171
- * @property {'default', 'inverse', 'brand'}
171
+ * @type {'default' | 'inverse' | 'brand'}
172
172
  * @default 'default'
173
173
  */
174
174
  appearance: {
@@ -184,6 +184,38 @@ class AuroLoader extends i {
184
184
  reflect: true,
185
185
  },
186
186
 
187
+ /**
188
+ * Sets size to large.
189
+ */
190
+ lg: {
191
+ type: Boolean,
192
+ reflect: true
193
+ },
194
+
195
+ /**
196
+ * Sets size to medium.
197
+ */
198
+ md: {
199
+ type: Boolean,
200
+ reflect: true,
201
+ },
202
+
203
+ /**
204
+ * DEPRECATED - use `appearance="inverse"`.
205
+ */
206
+ onDark: {
207
+ type: Boolean,
208
+ reflect: true
209
+ },
210
+
211
+ /**
212
+ * DEPRECATED - use `appearance="brand"`.
213
+ */
214
+ onLight: {
215
+ type: Boolean,
216
+ reflect: true
217
+ },
218
+
187
219
  /**
188
220
  * Sets loader to orbit type.
189
221
  */
@@ -207,6 +239,23 @@ class AuroLoader extends i {
207
239
  type: Boolean,
208
240
  reflect: true,
209
241
  },
242
+
243
+
244
+ /**
245
+ * Sets size to small.
246
+ */
247
+ sm: {
248
+ type: Boolean,
249
+ reflect: true,
250
+ },
251
+
252
+ /**
253
+ * Sets size to extra small.
254
+ */
255
+ xs: {
256
+ type: Boolean,
257
+ reflect: true,
258
+ }
210
259
  };
211
260
  }
212
261
 
@@ -216,7 +265,7 @@ class AuroLoader extends i {
216
265
 
217
266
  /**
218
267
  * This will register this element with the browser.
219
- * @param {string} [name="auro-loader"] - The name of element that you want to register to.
268
+ * @param {string} [name="auro-loader"] - The name of the element that you want to register.
220
269
  *
221
270
  * @example
222
271
  * AuroLoader.register("custom-loader") // this will register this element to <custom-loader/>
package/demo/index.html CHANGED
@@ -51,6 +51,6 @@
51
51
  <script type="module" data-demo-script="true" src="./index.min.js"></script>
52
52
 
53
53
  <!-- If additional elements are needed for the demo, add them here. -->
54
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
54
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
55
55
  </body>
56
56
  </html>