@aurodesignsystem-dev/auro-tail 0.0.0-pr6.2 → 0.0.0-pr6.21

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 (15) hide show
  1. package/NOTICE +1 -1
  2. package/README.md +54 -88
  3. package/custom-elements.json +148 -780
  4. package/demo/api.html +1 -4
  5. package/demo/api.md +257 -469
  6. package/demo/auro-tail-group.min.js +189 -288
  7. package/demo/index.html +1 -4
  8. package/demo/index.js +2 -1
  9. package/demo/index.md +25 -13
  10. package/demo/index.min.js +2 -1
  11. package/dist/{auro-tail-group-7TRu6-ht.js → auro-tail-group-DPP1Aw94.js} +83 -83
  12. package/dist/index.d.ts +205 -196
  13. package/dist/index.js +1 -1
  14. package/dist/registered.js +1 -1
  15. package/package.json +8 -4
package/demo/index.html CHANGED
@@ -30,9 +30,6 @@
30
30
  <!-- Demo Specific Styles -->
31
31
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
32
32
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
33
-
34
- <!-- Custom demo styles -->
35
- <link rel="stylesheet" type="text/css" href="./demo-styles.css" />
36
33
  </head>
37
34
  <body class="auro-markdown">
38
35
  <main></main>
@@ -51,6 +48,6 @@
51
48
  <script type="module" data-demo-script="true" src="./index.min.js"></script>
52
49
 
53
50
  <!-- 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>
51
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
55
52
  </body>
56
53
  </html>
package/demo/index.js CHANGED
@@ -3,4 +3,5 @@ import { AuroTail, AuroTailGroup } from "../src/index";
3
3
  AuroTail.register();
4
4
  AuroTailGroup.register();
5
5
 
6
- AuroTail.register("custom-tail"); // custom demo
6
+ AuroTail.register("custom-tail");
7
+ AuroTailGroup.register("custom-tail-group");
package/demo/index.md CHANGED
@@ -8,7 +8,7 @@ This file is generated based on a template fetched from `./docs/partials/index.m
8
8
 
9
9
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
10
10
  <!-- The below content is automatically added from ./../docs/partials/description.md -->
11
- The `<auro-tail>` custom element displays Alaska, Hawaiian, and partner airline tail graphics for consistent visual representation across Auro applications.
11
+ The `<auro-tail>` custom element displays Alaska, Hawaiian, and partner airline tail graphics for consistent visual representation across Alaska applications.
12
12
  <!-- AURO-GENERATED-CONTENT:END -->
13
13
 
14
14
  ## Use cases
@@ -24,7 +24,7 @@ The `<auro-tail>` custom element displays Alaska, Hawaiian, and partner airline
24
24
 
25
25
  ### Features
26
26
 
27
- - **Partner Airlines**: Supports AAG & partner airlines, with logos provided by the `<auro-icon>` repository
27
+ - **AAG & Partner Airlines**: Logos provided by the `<auro-icon>` repository
28
28
  - **Flexible Sizing**: Offers a flexible size scale to accommodate various design requirements
29
29
  - **Group Layout**: Display multiple tails together in paired layouts
30
30
  - **Badge Support**: Display badges like OneWorld Alliance
@@ -35,11 +35,11 @@ The `<auro-tail>` custom element displays Alaska, Hawaiian, and partner airline
35
35
  ## Example(s)
36
36
 
37
37
  <div class="exampleWrapper">
38
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
39
- <!-- The below content is automatically added from ./../apiExamples/basic.html -->
38
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/overview.html) -->
39
+ <!-- The below content is automatically added from ./../apiExamples/overview.html -->
40
40
  <auro-tail tail="AS"></auro-tail>
41
41
  <auro-tail tail="HA" size="lg" badge="oneworld"></auro-tail>
42
- <auro-tail-group layout="horizontal" size="lg" border-color="red">
42
+ <auro-tail-group layout="horizontal" size="lg" style="--ds-auro-tail-border-color: var(--ds-basic-color-brand-primary)">
43
43
  <auro-tail tail="AS"></auro-tail>
44
44
  <auro-tail tail="HA"></auro-tail>
45
45
  </auro-tail-group>
@@ -47,18 +47,18 @@ The `<auro-tail>` custom element displays Alaska, Hawaiian, and partner airline
47
47
  <auro-tail tail="AS"></auro-tail>
48
48
  <auro-tail tail="HA"></auro-tail>
49
49
  </auro-tail-group>
50
- <auro-tail tail="PR" border-color="hotpink" size="xl" outline></auro-tail>
50
+ <auro-tail tail="PR" size="xl" variant="outline" style="--ds-auro-tail-border-width: 3px; --ds-auro-tail-border-color: red"></auro-tail>
51
51
  <!-- AURO-GENERATED-CONTENT:END -->
52
52
  </div>
53
53
  <auro-accordion alignRight>
54
54
  <span slot="trigger">See code</span>
55
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
56
- <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
55
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/overview.html) -->
56
+ <!-- The below code snippet is automatically added from ./../apiExamples/overview.html -->
57
57
 
58
58
  ```html
59
59
  <auro-tail tail="AS"></auro-tail>
60
60
  <auro-tail tail="HA" size="lg" badge="oneworld"></auro-tail>
61
- <auro-tail-group layout="horizontal" size="lg" border-color="red">
61
+ <auro-tail-group layout="horizontal" size="lg" style="--ds-auro-tail-border-color: var(--ds-basic-color-brand-primary)">
62
62
  <auro-tail tail="AS"></auro-tail>
63
63
  <auro-tail tail="HA"></auro-tail>
64
64
  </auro-tail-group>
@@ -66,7 +66,7 @@ The `<auro-tail>` custom element displays Alaska, Hawaiian, and partner airline
66
66
  <auro-tail tail="AS"></auro-tail>
67
67
  <auro-tail tail="HA"></auro-tail>
68
68
  </auro-tail-group>
69
- <auro-tail tail="PR" border-color="hotpink" size="xl" outline></auro-tail>
69
+ <auro-tail tail="PR" size="xl" variant="outline" style="--ds-auro-tail-border-width: 3px; --ds-auro-tail-border-color: red"></auro-tail>
70
70
  ```
71
71
  <!-- AURO-GENERATED-CONTENT:END -->
72
72
  </auro-accordion>
@@ -78,9 +78,13 @@ There are two important parts of every Auro component. The <a href="https://deve
78
78
  To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroTail.register(name)` method and pass in a unique name.
79
79
 
80
80
  ```js
81
- import { AuroTail } from '@aurodesignsystem/auro-tail/class';
81
+ import { AuroTail, AuroTailGroup } from '@aurodesignsystem/auro-tail/class';
82
82
 
83
- AuroTail.register('custom-tail');
83
+ AuroTail.register();
84
+ AuroTailGroup.register();
85
+
86
+ AuroTail.register("custom-tail");
87
+ AuroTailGroup.register("custom-tail-group");
84
88
  ```
85
89
 
86
90
  This will create a new custom element that you can use in your HTML that will function identically to the `<auro-tail>` element.
@@ -88,7 +92,11 @@ This will create a new custom element that you can use in your HTML that will fu
88
92
  <div class="exampleWrapper">
89
93
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom.html) -->
90
94
  <!-- The below content is automatically added from ./../apiExamples/custom.html -->
91
- <custom-tail tail="AS" size="2xl"></custom-tail>
95
+ <custom-tail tail="AS" size="2xl"></custom-tail>
96
+ <custom-tail-group size="lg">
97
+ <custom-tail tail="HA"></custom-tail>
98
+ <custom-tail tail="DL"></custom-tail>
99
+ </custom-tail-group>
92
100
  <!-- AURO-GENERATED-CONTENT:END -->
93
101
  </div>
94
102
  <auro-accordion alignRight>
@@ -98,6 +106,10 @@ This will create a new custom element that you can use in your HTML that will fu
98
106
 
99
107
  ```html
100
108
  <custom-tail tail="AS" size="2xl"></custom-tail>
109
+ <custom-tail-group size="lg">
110
+ <custom-tail tail="HA"></custom-tail>
111
+ <custom-tail tail="DL"></custom-tail>
112
+ </custom-tail-group>
101
113
  ```
102
114
  <!-- AURO-GENERATED-CONTENT:END -->
103
115
  </auro-accordion>
package/demo/index.min.js CHANGED
@@ -3,4 +3,5 @@ import { A as AuroTail, a as AuroTailGroup } from './auro-tail-group.min.js';
3
3
  AuroTail.register();
4
4
  AuroTailGroup.register();
5
5
 
6
- AuroTail.register("custom-tail"); // custom demo
6
+ AuroTail.register("custom-tail");
7
+ AuroTailGroup.register("custom-tail-group");