@aurodesignsystem-dev/auro-loader 0.0.0-pr83.1 → 0.0.0-pr87.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.
- package/README.md +46 -63
- package/demo/api.html +1 -1
- package/demo/api.md +142 -184
- package/demo/auro-loader.min.js +62 -13
- package/demo/index.html +1 -1
- package/demo/index.md +19 -192
- package/dist/{auro-loader-CQmwU8CR.js → auro-loader-BcZn60oi.js} +1 -1
- package/dist/index.d.ts +214 -21
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +10 -5
package/demo/index.md
CHANGED
|
@@ -1,38 +1,32 @@
|
|
|
1
1
|
<!--
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
|
|
3
|
+
ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
|
|
4
|
+
ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
|
|
5
5
|
-->
|
|
6
6
|
|
|
7
|
-
# Loader
|
|
8
|
-
|
|
9
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
10
|
-
<!-- The below content is automatically added from
|
|
7
|
+
# Loader
|
|
8
|
+
|
|
9
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
|
|
10
|
+
<!-- The below content is automatically added from ./../docs/partials/description.md -->
|
|
11
11
|
`<auro-loader>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of illustrating animated loaders.
|
|
12
|
-
|
|
13
|
-
Things take time. Sometimes we just need to take a second for some data to show up. For this Auro supports the `<auro-loader>` custom element. This powerful element supports multiple modes for use, `ringworm`, `orbit`, `pulse`, and `laser`.
|
|
14
|
-
|
|
15
|
-
And each of these modes support five size settings, `default`, `sm`, `md`, `lg`, and `xl`.
|
|
16
|
-
|
|
17
|
-
For color support `<auro-loader>` supports `currentColor`, this allows for any color set on the parent element to influence the color of the loader.
|
|
18
|
-
|
|
19
|
-
The `<auro-loader>` custom element also supports two pre-defined appearance modes: `appearance="brand"` and `appearance="inverse"`.
|
|
20
12
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
21
13
|
|
|
22
|
-
##
|
|
23
|
-
|
|
24
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
25
|
-
<!-- The below content is automatically added from
|
|
14
|
+
## Use Cases
|
|
15
|
+
|
|
16
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
|
|
17
|
+
<!-- The below content is automatically added from ./../docs/partials/useCases.md -->
|
|
26
18
|
The `<auro-loader>` element should be used in situations where developers may need to illustrate a wait time for their users.
|
|
27
19
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
28
20
|
|
|
29
|
-
##
|
|
21
|
+
## Example(s)
|
|
30
22
|
|
|
31
|
-
|
|
23
|
+
### Basic Loaders
|
|
32
24
|
|
|
25
|
+
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.
|
|
26
|
+
|
|
33
27
|
<div class="exampleWrapper">
|
|
34
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
35
|
-
<!-- The below content is automatically added from
|
|
28
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
29
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
36
30
|
<auro-loader ringworm></auro-loader>
|
|
37
31
|
<auro-loader orbit></auro-loader>
|
|
38
32
|
<auro-loader pulse></auro-loader>
|
|
@@ -41,8 +35,8 @@ See in the following examples the different loader modes that the `<auro-loader>
|
|
|
41
35
|
</div>
|
|
42
36
|
<auro-accordion alignRight>
|
|
43
37
|
<span slot="trigger">See code</span>
|
|
44
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src
|
|
45
|
-
<!-- The below code snippet is automatically added from
|
|
38
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
39
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
46
40
|
|
|
47
41
|
```html
|
|
48
42
|
<auro-loader ringworm></auro-loader>
|
|
@@ -51,171 +45,4 @@ See in the following examples the different loader modes that the `<auro-loader>
|
|
|
51
45
|
<auro-loader laser></auro-loader>
|
|
52
46
|
```
|
|
53
47
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
54
|
-
</auro-accordion>
|
|
55
|
-
|
|
56
|
-
## Loader sizes
|
|
57
|
-
|
|
58
|
-
The `<auro-loader>` element supports a scale of sizes. Options are `[sm, md, lg, xl]`.
|
|
59
|
-
|
|
60
|
-
<div class="exampleWrapper">
|
|
61
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/loader_sizes.html) -->
|
|
62
|
-
<!-- The below content is automatically added from ../apiExamples/loader_sizes.html -->
|
|
63
|
-
<auro-loader ringworm xs></auro-loader>
|
|
64
|
-
<auro-loader ringworm></auro-loader>
|
|
65
|
-
<auro-loader ringworm sm></auro-loader>
|
|
66
|
-
<auro-loader ringworm md></auro-loader>
|
|
67
|
-
<auro-loader ringworm lg></auro-loader>
|
|
68
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
69
|
-
</div>
|
|
70
|
-
<auro-accordion alignRight>
|
|
71
|
-
<span slot="trigger">See code</span>
|
|
72
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/loader_sizes.html) -->
|
|
73
|
-
<!-- The below code snippet is automatically added from ../apiExamples/loader_sizes.html -->
|
|
74
|
-
|
|
75
|
-
```html
|
|
76
|
-
<auro-loader ringworm xs></auro-loader>
|
|
77
|
-
<auro-loader ringworm></auro-loader>
|
|
78
|
-
<auro-loader ringworm sm></auro-loader>
|
|
79
|
-
<auro-loader ringworm md></auro-loader>
|
|
80
|
-
<auro-loader ringworm lg></auro-loader>
|
|
81
|
-
```
|
|
82
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
83
|
-
</auro-accordion>
|
|
84
|
-
|
|
85
|
-
## Color support
|
|
86
|
-
|
|
87
|
-
The `<auro-loader>` element supports a scale of pre-defines color options. Options are `appearance="brand", appearance="inverse"`.
|
|
88
|
-
|
|
89
|
-
<div class="exampleWrapper">
|
|
90
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/loader_color.html) -->
|
|
91
|
-
<!-- The below content is automatically added from ../apiExamples/loader_color.html -->
|
|
92
|
-
<auro-loader pulse appearance="brand" md></auro-loader>
|
|
93
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
94
|
-
</div>
|
|
95
|
-
<auro-accordion alignRight>
|
|
96
|
-
<span slot="trigger">See code</span>
|
|
97
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/loader_color.html) -->
|
|
98
|
-
<!-- The below code snippet is automatically added from ../apiExamples/loader_color.html -->
|
|
99
|
-
|
|
100
|
-
```html
|
|
101
|
-
<auro-loader pulse appearance="brand" md></auro-loader>
|
|
102
|
-
```
|
|
103
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
104
|
-
</auro-accordion>
|
|
105
|
-
<div class="exampleWrapper--ondark">
|
|
106
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/loader_color_inverse.html) -->
|
|
107
|
-
<!-- The below content is automatically added from ../apiExamples/loader_color_inverse.html -->
|
|
108
|
-
<auro-loader pulse appearance="inverse" md></auro-loader>
|
|
109
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
110
|
-
</div>
|
|
111
|
-
<auro-accordion alignRight>
|
|
112
|
-
<span slot="trigger">See code</span>
|
|
113
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/loader_color_inverse.html) -->
|
|
114
|
-
<!-- The below code snippet is automatically added from ../apiExamples/loader_color_inverse.html -->
|
|
115
|
-
|
|
116
|
-
```html
|
|
117
|
-
<auro-loader pulse appearance="inverse" md></auro-loader>
|
|
118
|
-
```
|
|
119
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
120
|
-
</auro-accordion>
|
|
121
|
-
|
|
122
|
-
## Custom color support
|
|
123
|
-
|
|
124
|
-
The `<auro-loader>` element supports any custom color defined at the root level of the element.
|
|
125
|
-
|
|
126
|
-
<div class="exampleWrapper">
|
|
127
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom_color.html) -->
|
|
128
|
-
<!-- The below content is automatically added from ../apiExamples/custom_color.html -->
|
|
129
|
-
<auro-loader style="color: var(--ds-color-brand-tropical-300)" ringworm md></auro-loader>
|
|
130
|
-
<auro-loader style="color: var(--ds-color-brand-goldcoast-300)" orbit md></auro-loader>
|
|
131
|
-
<auro-loader style="color: var(--ds-color-brand-alpine-400)" pulse md></auro-loader>
|
|
132
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
133
|
-
</div>
|
|
134
|
-
<auro-accordion alignRight>
|
|
135
|
-
<span slot="trigger">See code</span>
|
|
136
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom_color.html) -->
|
|
137
|
-
<!-- The below code snippet is automatically added from ../apiExamples/custom_color.html -->
|
|
138
|
-
|
|
139
|
-
```html
|
|
140
|
-
<auro-loader style="color: var(--ds-color-brand-tropical-300)" ringworm md></auro-loader>
|
|
141
|
-
<auro-loader style="color: var(--ds-color-brand-goldcoast-300)" orbit md></auro-loader>
|
|
142
|
-
<auro-loader style="color: var(--ds-color-brand-alpine-400)" pulse md></auro-loader>
|
|
143
|
-
```
|
|
144
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
145
|
-
</auro-accordion>
|
|
146
|
-
|
|
147
|
-
## Custom animation speed support
|
|
148
|
-
|
|
149
|
-
The `<auro-loader>` custom element has a CSS shadow part included in it's API. Create a custom selector using `::part(element)` and easily adjust the `animation-duration` as seen in the examples below.
|
|
150
|
-
|
|
151
|
-
<div class="exampleWrapper">
|
|
152
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom_speed.html) -->
|
|
153
|
-
<!-- The below content is automatically added from ../apiExamples/custom_speed.html -->
|
|
154
|
-
<style>
|
|
155
|
-
.slow::part(element) {
|
|
156
|
-
animation-duration: 8s;
|
|
157
|
-
}
|
|
158
|
-
.fast::part(element) {
|
|
159
|
-
animation-duration: 1s;
|
|
160
|
-
}
|
|
161
|
-
</style>
|
|
162
|
-
<auro-loader class="slow" orbit md></auro-loader>
|
|
163
|
-
<auro-loader class="fast" orbit lg></auro-loader>
|
|
164
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
165
|
-
</div>
|
|
166
|
-
<auro-accordion alignRight>
|
|
167
|
-
<span slot="trigger">See code</span>
|
|
168
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom_speed.html) -->
|
|
169
|
-
<!-- The below code snippet is automatically added from ../apiExamples/custom_speed.html -->
|
|
170
|
-
|
|
171
|
-
```html
|
|
172
|
-
<style>
|
|
173
|
-
.slow::part(element) {
|
|
174
|
-
animation-duration: 8s;
|
|
175
|
-
}
|
|
176
|
-
.fast::part(element) {
|
|
177
|
-
animation-duration: 1s;
|
|
178
|
-
}
|
|
179
|
-
</style>
|
|
180
|
-
<auro-loader class="slow" orbit md></auro-loader>
|
|
181
|
-
<auro-loader class="fast" orbit lg></auro-loader>
|
|
182
|
-
```
|
|
183
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
184
|
-
</auro-accordion>
|
|
185
|
-
|
|
186
|
-
## Recommended Use and Version Control
|
|
187
|
-
|
|
188
|
-
There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-loader` custom element is defined automatically.
|
|
189
|
-
|
|
190
|
-
To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroLoader.register(name)` method and pass in a unique name.
|
|
191
|
-
|
|
192
|
-
```js
|
|
193
|
-
import { AuroLoader } from './src/auro-loader.js';
|
|
194
|
-
|
|
195
|
-
AuroLoader.register('custom-loader');
|
|
196
|
-
```
|
|
197
|
-
|
|
198
|
-
This will create a new custom element that you can use in your HTML that will function identically to the `<auro-loader>` element.
|
|
199
|
-
|
|
200
|
-
<div class="exampleWrapper exampleWrapper--flex">
|
|
201
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom.html) -->
|
|
202
|
-
<!-- The below content is automatically added from ../apiExamples/custom.html -->
|
|
203
|
-
<custom-loader ringworm></custom-loader>
|
|
204
|
-
<custom-loader orbit></custom-loader>
|
|
205
|
-
<custom-loader pulse></custom-loader>
|
|
206
|
-
<custom-loader laser></custom-loader>
|
|
207
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
208
|
-
</div>
|
|
209
|
-
<auro-accordion alignRight>
|
|
210
|
-
<span slot="trigger">See code</span>
|
|
211
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom.html) -->
|
|
212
|
-
<!-- The below code snippet is automatically added from ../apiExamples/custom.html -->
|
|
213
|
-
|
|
214
|
-
```html
|
|
215
|
-
<custom-loader ringworm></custom-loader>
|
|
216
|
-
<custom-loader orbit></custom-loader>
|
|
217
|
-
<custom-loader pulse></custom-loader>
|
|
218
|
-
<custom-loader laser></custom-loader>
|
|
219
|
-
```
|
|
220
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
221
48
|
</auro-accordion>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import{css as e,LitElement as s,html as a}from"lit";class t{registerComponent(e,s){customElements.get(e)||customElements.define(e,class extends s{})}closestElement(e,s=this,a=(s,t=s&&s.closest(e))=>s&&s!==document&&s!==window?t||a(s.getRootNode().host):null){return a(s)}handleComponentTagRename(e,s){const a=s.toLowerCase();e.tagName.toLowerCase()!==a&&e.setAttribute(a,!0)}elementMatch(e,s){const a=s.toLowerCase();return e.tagName.toLowerCase()===a||e.hasAttribute(a)}getSlotText(e,s){const a=e.shadowRoot?.querySelector(`slot[name="${s}"]`);return(a?.assignedNodes({flatten:!0})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}var i=e`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]),:host([appearance=brand]){--ds-auro-loader-color: var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-loader-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}
|
|
2
2
|
`,r=e`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0;box-sizing:border-box}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin) * 6);height:calc(1rem + var(--margin) * 2)}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(1.95rem + var(--margin-xs) * 6);height:calc(.65rem + var(--margin-xs) * 2)}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm) * 6);height:calc(2rem + var(--margin-sm) * 2)}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md) * 6);height:calc(3rem + var(--margin-md) * 2)}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg) * 6);height:calc(5rem + var(--margin-lg) * 2)}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-.4s}:host([pulse])>span:nth-child(2){animation-delay:-.2s}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,to{opacity:.1;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}to{left:110%}}:host>.no-animation{display:none}@media (prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}
|
|
3
3
|
`,l=e`:host{--ds-auro-loader-background-color: currentcolor;--ds-auro-loader-border-color: currentcolor;--ds-auro-loader-color: currentcolor}
|
|
4
|
-
`;class n extends s{constructor(){super(),this.appearance="default",this.keys=[0,1,2,3,4,5,6,7,8,9],this.mdCount=3,this.smCount=2,this.runtimeUtils=new t
|
|
4
|
+
`;class n extends s{constructor(){super(),this._initializeDefaults()}_initializeDefaults(){this.orbit=!1,this.ringworm=!1,this.laser=!1,this.pulse=!1,this.appearance="default",this.keys=[0,1,2,3,4,5,6,7,8,9],this.mdCount=3,this.smCount=2,this.runtimeUtils=new t}static get properties(){return{appearance:{type:String,reflect:!0},laser:{type:Boolean,reflect:!0},lg:{type:Boolean,reflect:!0},md:{type:Boolean,reflect:!0},onDark:{type:Boolean,reflect:!0},onLight:{type:Boolean,reflect:!0},orbit:{type:Boolean,reflect:!0},pulse:{type:Boolean,reflect:!0},ringworm:{type:Boolean,reflect:!0},sm:{type:Boolean,reflect:!0},xs:{type:Boolean,reflect:!0}}}static get styles(){return[r,i,l]}static register(e="auro-loader"){t.prototype.registerComponent(e,n)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-loader")}connectedCallback(){super.connectedCallback()}defineTemplate(){let e=Array.from(Array(this.mdCount).keys());return this.orbit||this.laser?e=Array.from(Array(this.smCount).keys()):this.ringworm&&(e=Array.from(Array(0).keys())),e}render(){return a`
|
|
5
5
|
${this.defineTemplate().map(e=>a`
|
|
6
6
|
<span part="element" class="loader node-${e}"></span>
|
|
7
7
|
`)}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,21 +1,214 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
`,r=css`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0;box-sizing:border-box}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin) * 6);height:calc(1rem + var(--margin) * 2)}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(1.95rem + var(--margin-xs) * 6);height:calc(.65rem + var(--margin-xs) * 2)}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm) * 6);height:calc(2rem + var(--margin-sm) * 2)}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md) * 6);height:calc(3rem + var(--margin-md) * 2)}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg) * 6);height:calc(5rem + var(--margin-lg) * 2)}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-.4s}:host([pulse])>span:nth-child(2){animation-delay:-.2s}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,to{opacity:.1;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}to{left:110%}}:host>.no-animation{display:none}@media (prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
1
|
+
|
|
2
|
+
import type { AuroLoader } from "src/auro-loader.js";
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* This type can be used to create scoped tags for your components.
|
|
6
|
+
*
|
|
7
|
+
* Usage:
|
|
8
|
+
*
|
|
9
|
+
* ```ts
|
|
10
|
+
* import type { ScopedElements } from "path/to/library/jsx-integration";
|
|
11
|
+
*
|
|
12
|
+
* declare module "my-library" {
|
|
13
|
+
* namespace JSX {
|
|
14
|
+
* interface IntrinsicElements
|
|
15
|
+
* extends ScopedElements<'test-', ''> {}
|
|
16
|
+
* }
|
|
17
|
+
* }
|
|
18
|
+
* ```
|
|
19
|
+
*
|
|
20
|
+
* @deprecated Runtime scoped elements result in duplicate types and can confusing for developers. It is recommended to use the `prefix` and `suffix` options to generate new types instead.
|
|
21
|
+
*/
|
|
22
|
+
export type ScopedElements<
|
|
23
|
+
Prefix extends string = "",
|
|
24
|
+
Suffix extends string = ""
|
|
25
|
+
> = {
|
|
26
|
+
[Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
type BaseProps<T extends HTMLElement> = {
|
|
30
|
+
|
|
31
|
+
/** Content added between the opening and closing tags of the element */
|
|
32
|
+
children?: any;
|
|
33
|
+
/** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
|
|
34
|
+
class?: string;
|
|
35
|
+
/** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
|
|
36
|
+
className?: string;
|
|
37
|
+
/** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
|
|
38
|
+
classList?: Record<string, boolean | undefined>;
|
|
39
|
+
/** Specifies the text direction of the element. */
|
|
40
|
+
dir?: "ltr" | "rtl";
|
|
41
|
+
/** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
|
|
42
|
+
exportparts?: string;
|
|
43
|
+
/** For <label> and <output>, lets you associate the label with some control. */
|
|
44
|
+
htmlFor?: string;
|
|
45
|
+
/** Specifies whether the element should be hidden. */
|
|
46
|
+
hidden?: boolean | string;
|
|
47
|
+
/** A unique identifier for the element. */
|
|
48
|
+
id?: string;
|
|
49
|
+
/** Keys tell React which array item each component corresponds to */
|
|
50
|
+
key?: string | number;
|
|
51
|
+
/** Specifies the language of the element. */
|
|
52
|
+
lang?: string;
|
|
53
|
+
/** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
|
|
54
|
+
part?: string;
|
|
55
|
+
/** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
|
|
56
|
+
ref?: T | ((e: T) => void);
|
|
57
|
+
/** Adds a reference for a custom element slot */
|
|
58
|
+
slot?: string;
|
|
59
|
+
/** Prop for setting inline styles */
|
|
60
|
+
style?: Record<string, string | number>;
|
|
61
|
+
/** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
|
|
62
|
+
tabIndex?: number;
|
|
63
|
+
/** Specifies the tooltip text for the element. */
|
|
64
|
+
title?: string;
|
|
65
|
+
/** Passing 'no' excludes the element content from being translated. */
|
|
66
|
+
translate?: "yes" | "no";
|
|
67
|
+
/** The popover global attribute is used to designate an element as a popover element. */
|
|
68
|
+
popover?: "auto" | "hint" | "manual";
|
|
69
|
+
/** Turns an element element into a popover control button; takes the ID of the popover element to control as its value. */
|
|
70
|
+
popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
|
|
71
|
+
/** Specifies the action to be performed on a popover element being controlled by a control element. */
|
|
72
|
+
popovertargetaction?: "show" | "hide" | "toggle";
|
|
73
|
+
|
|
74
|
+
} ;
|
|
75
|
+
|
|
76
|
+
type BaseEvents = {
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
export type AuroLoaderProps = {
|
|
84
|
+
/** Defines whether the loader is intended for lighter or darker backgrounds, or if it should use the brand color regardless of the background. */
|
|
85
|
+
"appearance"?: AuroLoader['appearance'];
|
|
86
|
+
/** Sets loader to laser type. */
|
|
87
|
+
"laser"?: AuroLoader['laser'];
|
|
88
|
+
/** Sets size to large. */
|
|
89
|
+
"lg"?: AuroLoader['lg'];
|
|
90
|
+
/** Sets size to medium. */
|
|
91
|
+
"md"?: AuroLoader['md'];
|
|
92
|
+
/** DEPRECATED - use `appearance="inverse"`. */
|
|
93
|
+
"onDark"?: AuroLoader['onDark'];
|
|
94
|
+
/** DEPRECATED - use `appearance="brand"`. */
|
|
95
|
+
"onLight"?: AuroLoader['onLight'];
|
|
96
|
+
/** Sets loader to orbit type. */
|
|
97
|
+
"orbit"?: AuroLoader['orbit'];
|
|
98
|
+
/** Sets loader to pulse type. */
|
|
99
|
+
"pulse"?: AuroLoader['pulse'];
|
|
100
|
+
/** Sets loader to ringworm type. */
|
|
101
|
+
"ringworm"?: AuroLoader['ringworm'];
|
|
102
|
+
/** Sets size to small. */
|
|
103
|
+
"sm"?: AuroLoader['sm'];
|
|
104
|
+
/** Sets size to extra small. */
|
|
105
|
+
"xs"?: AuroLoader['xs'];
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
export type CustomElements = {
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
/**
|
|
114
|
+
* The `auro-loader` element displays a loading animation to indicate a loading state to users.
|
|
115
|
+
*
|
|
116
|
+
* ## Attributes & Properties
|
|
117
|
+
*
|
|
118
|
+
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
119
|
+
*
|
|
120
|
+
* - `appearance`: Defines whether the loader is intended for lighter or darker backgrounds, or if it should use the brand color regardless of the background.
|
|
121
|
+
* - `laser`: Sets loader to laser type.
|
|
122
|
+
* - `lg`: Sets size to large.
|
|
123
|
+
* - `md`: Sets size to medium.
|
|
124
|
+
* - `onDark`: DEPRECATED - use `appearance="inverse"`.
|
|
125
|
+
* - `onLight`: DEPRECATED - use `appearance="brand"`.
|
|
126
|
+
* - `orbit`: Sets loader to orbit type.
|
|
127
|
+
* - `pulse`: Sets loader to pulse type.
|
|
128
|
+
* - `ringworm`: Sets loader to ringworm type.
|
|
129
|
+
* - `sm`: Sets size to small.
|
|
130
|
+
* - `xs`: Sets size to extra small.
|
|
131
|
+
*
|
|
132
|
+
* ## Slots
|
|
133
|
+
*
|
|
134
|
+
* Areas where markup can be added to the component.
|
|
135
|
+
*
|
|
136
|
+
* - `(default)`: Default slot for text that replaces `auro-loader` component when user has the "Reduce Motion" a11y feature enabled.
|
|
137
|
+
*
|
|
138
|
+
* ## Methods
|
|
139
|
+
*
|
|
140
|
+
* Methods that can be called to access component functionality.
|
|
141
|
+
*
|
|
142
|
+
* - `_initializeDefaults() => void`: undefined
|
|
143
|
+
* - `register(name?: string = "auro-loader") => void`: This will register this element with the browser.
|
|
144
|
+
*
|
|
145
|
+
* ## CSS Parts
|
|
146
|
+
*
|
|
147
|
+
* Custom selectors for styling elements within the component.
|
|
148
|
+
*
|
|
149
|
+
* - `element`: Apply style to adjust speed of animation.
|
|
150
|
+
*/
|
|
151
|
+
"auro-loader": Partial<AuroLoaderProps & BaseProps<AuroLoader> & BaseEvents>;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
export type CustomCssProperties = {
|
|
155
|
+
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
declare module 'react' {
|
|
160
|
+
namespace JSX {
|
|
161
|
+
interface IntrinsicElements extends CustomElements {}
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
declare module 'preact' {
|
|
167
|
+
namespace JSX {
|
|
168
|
+
interface IntrinsicElements extends CustomElements {}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
declare module '@builder.io/qwik' {
|
|
174
|
+
namespace JSX {
|
|
175
|
+
interface IntrinsicElements extends CustomElements {}
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
declare module '@stencil/core' {
|
|
181
|
+
namespace JSX {
|
|
182
|
+
interface IntrinsicElements extends CustomElements {}
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
declare module 'hono/jsx' {
|
|
188
|
+
namespace JSX {
|
|
189
|
+
interface IntrinsicElements extends CustomElements {}
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
declare module 'react-native' {
|
|
195
|
+
namespace JSX {
|
|
196
|
+
interface IntrinsicElements extends CustomElements {}
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
declare global {
|
|
202
|
+
namespace JSX {
|
|
203
|
+
interface IntrinsicElements extends CustomElements {}
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
}
|
|
207
|
+
declare global {
|
|
208
|
+
namespace svelteHTML {
|
|
209
|
+
interface IntrinsicElements extends CustomElements {}
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
|
|
214
|
+
export { AuroLoader } from "./index.js";
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{A as AuroLoader}from"./auro-loader-
|
|
1
|
+
export{A as AuroLoader}from"./auro-loader-BcZn60oi.js";import"lit";
|
package/dist/registered.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{A as r}from"./auro-loader-
|
|
1
|
+
import{A as r}from"./auro-loader-BcZn60oi.js";import"lit";r.register();
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"================================================================================"
|
|
8
8
|
],
|
|
9
9
|
"name": "@aurodesignsystem-dev/auro-loader",
|
|
10
|
-
"version": "0.0.0-
|
|
10
|
+
"version": "0.0.0-pr87.0",
|
|
11
11
|
"description": "auro-loader HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|
|
@@ -21,13 +21,13 @@
|
|
|
21
21
|
"node": ">=20"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"lit": "^3.3.
|
|
24
|
+
"lit": "^3.3.2"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@aurodesignsystem/auro-cli": "^3.
|
|
27
|
+
"@aurodesignsystem/auro-cli": "^3.5.0",
|
|
28
28
|
"@aurodesignsystem/auro-config": "^1.3.1",
|
|
29
29
|
"@aurodesignsystem/auro-library": "^5.5.4",
|
|
30
|
-
"@aurodesignsystem/design-tokens": "^8.
|
|
30
|
+
"@aurodesignsystem/design-tokens": "^8.7.0",
|
|
31
31
|
"@aurodesignsystem/webcorestylesheets": "^10.1.4",
|
|
32
32
|
"husky": "^9.1.6"
|
|
33
33
|
},
|
|
@@ -62,7 +62,12 @@
|
|
|
62
62
|
"exports": {
|
|
63
63
|
"./package.json": "./package.json",
|
|
64
64
|
"./readme.md": "./README.md",
|
|
65
|
-
".": "./
|
|
65
|
+
"./custom-elements.json": "./custom-elements.json",
|
|
66
|
+
".": {
|
|
67
|
+
"module": "./dist/registered.js",
|
|
68
|
+
"types": "./dist/index.d.ts",
|
|
69
|
+
"default": "./dist/registered.js"
|
|
70
|
+
},
|
|
66
71
|
"./demo/*.md": "./demo/*.md",
|
|
67
72
|
"./demo/*.js": "./demo/*.min.js",
|
|
68
73
|
"./class": {
|