Skip to content

Commit e8415b3

Browse files
semantic-release-botsemantic-release-bot
committed
chore(release): 4.1.1 [skip ci]
## [4.1.1](v4.1.0...v4.1.1) (2025-07-02) ### Bug Fixes * add type token integration ([820e3aa](820e3aa)) * update docs head content ([0fa05dd](0fa05dd))
1 parent 820e3aa commit e8415b3

File tree

5 files changed

+268
-2
lines changed

5 files changed

+268
-2
lines changed

‎CHANGELOG.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
# Semantic Release Automated Changelog
22

3+
## [4.1.1](https://github.com/AlaskaAirlines/auro-skeleton/compare/v4.1.0...v4.1.1) (2025-07-02)
4+
5+
6+
### Bug Fixes
7+
8+
* add type token integration ([820e3aa](https://github.com/AlaskaAirlines/auro-skeleton/commit/820e3aaf21b458513469324a66762479054e8a0e))
9+
* update docs head content ([0fa05dd](https://github.com/AlaskaAirlines/auro-skeleton/commit/0fa05ddf7bdd8ff8999c184f1f7363f038aecd8d))
10+
311
# [4.1.0](https://github.com/AlaskaAirlines/auro-skeleton/compare/v4.0.0...v4.1.0) (2025-04-28)
412

513

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
102102
```html
103103
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@/dist/auro-classic/CSSCustomProperties.css" />
104104
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@/dist/bundled/essentials.css" />
105-
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected].0/dist/auro-skeleton__bundled.js" type="module"></script>
105+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected].1/dist/auro-skeleton__bundled.js" type="module"></script>
106106
```
107107

108108
<!-- AURO-GENERATED-CONTENT:END -->

‎demo/api.md‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/api.md) -->
2+
<!-- The below content is automatically added from ../docs/api.md -->
3+
4+
# auro-skeleton
5+
6+
The auro-skeleton element provides users a way to indicate the loading of asynchronous content on a page.
7+
8+
## Attributes
9+
10+
| Attribute | Type | Description |
11+
|-----------|----------|----------------------------------------------|
12+
| [shape](#shape) | `String` | Renders a circle, oval, or rectangle loader. |
13+
<!-- AURO-GENERATED-CONTENT:END -->
14+
15+
## API Examples
16+
17+
### Attribute Examples
18+
19+
#### shape
20+
21+
The `<auro-skeleton>` element makes use of a single `shape` enumerated attribute. Options are [`circle`, `oval`, `rectangle`]
22+
23+
<div class="exampleWrapper">
24+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/api_shape_circle.html) -->
25+
<!-- The below content is automatically added from ../apiExamples/api_shape_circle.html -->
26+
<auro-skeleton shape="circle" style="width: 40px; height: 40px"></auro-skeleton>
27+
<auro-skeleton shape="circle" style="width: 100px; height: 100px"></auro-skeleton>
28+
<auro-skeleton shape="circle" style="width: 300px; height: 300px"></auro-skeleton>
29+
<!-- AURO-GENERATED-CONTENT:END -->
30+
</div>
31+
<auro-accordion alignRight>
32+
<span slot="trigger">See code</span>
33+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/api_shape_circle.html) -->
34+
<!-- The below code snippet is automatically added from ../apiExamples/api_shape_circle.html -->
35+
36+
```html
37+
<auro-skeleton shape="circle" style="width: 40px; height: 40px"></auro-skeleton>
38+
<auro-skeleton shape="circle" style="width: 100px; height: 100px"></auro-skeleton>
39+
<auro-skeleton shape="circle" style="width: 300px; height: 300px"></auro-skeleton>
40+
```
41+
<!-- AURO-GENERATED-CONTENT:END -->
42+
</auro-accordion>
43+
<div class="exampleWrapper">
44+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/api_shape_oval.html) -->
45+
<!-- The below content is automatically added from ../apiExamples/api_shape_oval.html -->
46+
<auro-skeleton shape="oval" style="width: 80px; height: 40px"></auro-skeleton>
47+
<auro-skeleton shape="oval" style="width: 200px; height: 100px;"></auro-skeleton>
48+
<auro-skeleton shape="oval" style="width: 600px; height: 300px"></auro-skeleton>
49+
<!-- AURO-GENERATED-CONTENT:END -->
50+
</div>
51+
<auro-accordion alignRight>
52+
<span slot="trigger">See code</span>
53+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/api_shape_oval.html) -->
54+
<!-- The below code snippet is automatically added from ../apiExamples/api_shape_oval.html -->
55+
56+
```html
57+
<auro-skeleton shape="oval" style="width: 80px; height: 40px"></auro-skeleton>
58+
<auro-skeleton shape="oval" style="width: 200px; height: 100px;"></auro-skeleton>
59+
<auro-skeleton shape="oval" style="width: 600px; height: 300px"></auro-skeleton>
60+
```
61+
<!-- AURO-GENERATED-CONTENT:END -->
62+
</auro-accordion>
63+
<div class="exampleWrapper">
64+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/api_shape_rectangle.html) -->
65+
<!-- The below content is automatically added from ../apiExamples/api_shape_rectangle.html -->
66+
<auro-skeleton shape="rectangle" style="width: 100px; height: 50px"></auro-skeleton>
67+
<auro-skeleton shape="rectangle" style="width: 400px; height: 150px"></auro-skeleton>
68+
<auro-skeleton shape="rectangle" style="width: 800px; height: 300px"></auro-skeleton>
69+
<!-- AURO-GENERATED-CONTENT:END -->
70+
</div>
71+
<auro-accordion alignRight>
72+
<span slot="trigger">See code</span>
73+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/api_shape_rectangle.html) -->
74+
<!-- The below code snippet is automatically added from ../apiExamples/api_shape_rectangle.html -->
75+
76+
```html
77+
<auro-skeleton shape="rectangle" style="width: 100px; height: 50px"></auro-skeleton>
78+
<auro-skeleton shape="rectangle" style="width: 400px; height: 150px"></auro-skeleton>
79+
<auro-skeleton shape="rectangle" style="width: 800px; height: 300px"></auro-skeleton>
80+
```
81+
<!-- AURO-GENERATED-CONTENT:END -->
82+
</auro-accordion>
83+
84+
### Theme Support
85+
86+
The component may be restyled using the following code sample and changing the values of the following token(s).
87+
88+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../src/tokens.scss) -->
89+
<!-- The below code snippet is automatically added from ../src/tokens.scss -->
90+
91+
```scss
92+
@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
93+
94+
:host {
95+
--ds-auro-skeleton-container-color: var(--ds-advanced-color-skeleton-background, #{v.$ds-advanced-color-skeleton-background});
96+
--ds-auro-skeleton-container-gradient-color-one: var(--ds-advanced-color-skeleton-background, #{v.$ds-advanced-color-skeleton-background});
97+
--ds-auro-skeleton-container-gradient-color-two: var(--ds-advanced-color-skeleton-wave, #{v.$ds-advanced-color-skeleton-wave});
98+
}
99+
```
100+
<!-- AURO-GENERATED-CONTENT:END -->

‎demo/index.md‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<!--
2+
The index.md file is a compiled document. No edits should be made directly to this file.
3+
README.md is created by running `npm run build:docs`.
4+
This file is generated based on a template fetched from `./docs/partials/index.md`
5+
-->
6+
7+
# Skeleton
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+
The `<auro-skeleton>` custom element is for use when display content takes an extended amount of time to process and render on-screen. This indicator communicates to the user that data is being loaded and that the page is not frozen.
12+
13+
[Research](https://www.nngroup.com/articles/progress-indicators/) conducted by the Nielsen Norman Group states that using skeleton states and [loading indicators](https://auro.alaskaair.com/components/auro/loader) improve user satisfaction.
14+
15+
The `<auro-skeleton>` element uses animation to convey that the page is still loading in order to reduce user uncertainty.
16+
<!-- AURO-GENERATED-CONTENT:END -->
17+
18+
## auro-skeleton use cases
19+
20+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/useCases.md) -->
21+
<!-- The below content is automatically added from ../docs/partials/useCases.md -->
22+
The `<auro-skeleton>` element can be used on container-based components like `<auro-card>` and other structured lists.
23+
<!-- AURO-GENERATED-CONTENT:END -->
24+
25+
## Do not...
26+
27+
`<auro-skeleton>` should not be used on action components like `<auro-button>`, `<auro-input>` or `<auro-radio>`.
28+
29+
Do not represent a loading state with `<auro-skeleton>` for an entire component such as a toast notification, dropdown menus, or a modal dialog. It is appropriate to use `<auro-skeleton>` for content inside those components, but never for the entire component.
30+
31+
## Default examples
32+
33+
The `<auro-skeleton>` API consists of a standardized enumerated `shape` attribute and the use of customized CSS. The following examples illustrate use cases to include `circle`, `oval` and `rectangle`. With the use of CSS the user has infinite options for how the animated skeleton can be used in their loading UI.
34+
35+
<div class="exampleWrapper">
36+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
37+
<!-- The below content is automatically added from ../apiExamples/basic.html -->
38+
<auro-skeleton shape="circle" style="width: 40px; height: 40px"></auro-skeleton>
39+
<auro-skeleton shape="oval" style="width: 200px; height: 100px;"></auro-skeleton>
40+
<auro-skeleton shape="rectangle" style="width: 400px; height: 300px"></auro-skeleton>
41+
<!-- AURO-GENERATED-CONTENT:END -->
42+
</div>
43+
<auro-accordion alignRight>
44+
<span slot="trigger">See code</span>
45+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
46+
<!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
47+
48+
```html
49+
<auro-skeleton shape="circle" style="width: 40px; height: 40px"></auro-skeleton>
50+
<auro-skeleton shape="oval" style="width: 200px; height: 100px;"></auro-skeleton>
51+
<auro-skeleton shape="rectangle" style="width: 400px; height: 300px"></auro-skeleton>
52+
```
53+
<!-- AURO-GENERATED-CONTENT:END -->
54+
</auro-accordion>
55+
56+
## Be creative
57+
58+
Use your imagination. Wherever data can be placed, an `<auro-skeleton>` element can be used. In the following example see how `<auro-skeleton>` is used in place where data will be filled once the process is completed.
59+
60+
<div class="exampleWrapper">
61+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/table_example.html) -->
62+
<!-- The below content is automatically added from ../apiExamples/table_example.html -->
63+
<table class="auro_table">
64+
<thead>
65+
<tr>
66+
<th>The table header</th>
67+
<th>The table header</th>
68+
</tr>
69+
</thead>
70+
<tbody>
71+
<tr>
72+
<td colspan="2">
73+
<auro-skeleton shape="oval" style="height: 20px;"></auro-skeleton>
74+
</td>
75+
</tr>
76+
<tr>
77+
<td colspan="2">
78+
<auro-skeleton shape="oval" style="height: 20px;"></auro-skeleton>
79+
</td>
80+
</tr>
81+
<tr>
82+
<td colspan="2">
83+
<auro-skeleton shape="oval" style="height: 20px;"></auro-skeleton>
84+
</td>
85+
</tr>
86+
</tbody>
87+
</table>
88+
<!-- AURO-GENERATED-CONTENT:END -->
89+
</div>
90+
<auro-accordion alignRight>
91+
<span slot="trigger">See code</span>
92+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/table_example.html) -->
93+
<!-- The below code snippet is automatically added from ../apiExamples/table_example.html -->
94+
95+
```html
96+
<table class="auro_table">
97+
<thead>
98+
<tr>
99+
<th>The table header</th>
100+
<th>The table header</th>
101+
</tr>
102+
</thead>
103+
<tbody>
104+
<tr>
105+
<td colspan="2">
106+
<auro-skeleton shape="oval" style="height: 20px;"></auro-skeleton>
107+
</td>
108+
</tr>
109+
<tr>
110+
<td colspan="2">
111+
<auro-skeleton shape="oval" style="height: 20px;"></auro-skeleton>
112+
</td>
113+
</tr>
114+
<tr>
115+
<td colspan="2">
116+
<auro-skeleton shape="oval" style="height: 20px;"></auro-skeleton>
117+
</td>
118+
</tr>
119+
</tbody>
120+
</table>
121+
```
122+
<!-- AURO-GENERATED-CONTENT:END -->
123+
</auro-accordion>
124+
125+
## Recommended Use and Version Control
126+
127+
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-skeleton` custom element is defined automatically.
128+
129+
To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroSkeleton.register(name)` method and pass in a unique name.
130+
131+
```js
132+
import { AuroSkeleton } from './src/auro-skeleton.js';
133+
134+
AuroSkeleton.register('custom-skeleton');
135+
```
136+
137+
This will create a new custom element that you can use in your HTML that will function identically to the `<auro-skeleton>` element.
138+
139+
<div class="exampleWrapper exampleWrapper--flex">
140+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom.html) -->
141+
<!-- The below content is automatically added from ../apiExamples/custom.html -->
142+
<custom-skeleton shape="circle" style="width: 40px; height: 40px"></custom-skeleton>
143+
<custom-skeleton shape="oval" style="width: 200px; height: 100px;"></custom-skeleton>
144+
<custom-skeleton shape="rectangle" style="width: 400px; height: 300px"></custom-skeleton>
145+
<!-- AURO-GENERATED-CONTENT:END -->
146+
</div>
147+
<auro-accordion alignRight>
148+
<span slot="trigger">See code</span>
149+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom.html) -->
150+
<!-- The below code snippet is automatically added from ../apiExamples/custom.html -->
151+
152+
```html
153+
<custom-skeleton shape="circle" style="width: 40px; height: 40px"></custom-skeleton>
154+
<custom-skeleton shape="oval" style="width: 200px; height: 100px;"></custom-skeleton>
155+
<custom-skeleton shape="rectangle" style="width: 400px; height: 300px"></custom-skeleton>
156+
```
157+
<!-- AURO-GENERATED-CONTENT:END -->
158+
</auro-accordion>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"================================================================================"
88
],
99
"name": "@aurodesignsystem/auro-skeleton",
10-
"version": "4.1.0",
10+
"version": "4.1.1",
1111
"description": "auro-skeleton HTML custom element",
1212
"repository": {
1313
"type": "git",

0 commit comments

Comments
 (0)