@aurodesignsystem-dev/auro-tail 0.0.0-pr10.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 (18) hide show
  1. package/LICENSE +201 -0
  2. package/NOTICE +2 -0
  3. package/README.md +138 -0
  4. package/custom-elements.json +699 -0
  5. package/demo/api.html +53 -0
  6. package/demo/api.js +1 -0
  7. package/demo/api.md +490 -0
  8. package/demo/api.min.js +4 -0
  9. package/demo/auro-tail-group.min.js +834 -0
  10. package/demo/index.html +53 -0
  11. package/demo/index.js +7 -0
  12. package/demo/index.md +115 -0
  13. package/demo/index.min.js +7 -0
  14. package/dist/auro-tail-group-BoJt8IFn.js +188 -0
  15. package/dist/index.d.ts +205 -0
  16. package/dist/index.js +1 -0
  17. package/dist/registered.js +1 -0
  18. package/package.json +92 -0
package/demo/api.html ADDED
@@ -0,0 +1,53 @@
1
+ <!--
2
+ Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
3
+ See LICENSE in the project root for license information.
4
+
5
+ HTML in this document is standardized and NOT to be edited.
6
+ All demo code should be added/edited in ./demo/api.md
7
+
8
+ With the exception of adding custom elements if needed for the demo.
9
+
10
+ ----------------------- DO NOT EDIT -----------------------------
11
+
12
+ -->
13
+
14
+ <!DOCTYPE html>
15
+ <html lang="en">
16
+ <head>
17
+ <meta charset="UTF-8" />
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
+ <title>Auro Web Component Demo | auro-tail</title>
20
+
21
+ <!-- Prism.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
+
24
+ <!-- Design Token Alaska Theme -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
26
+
27
+ <!-- Webcore Stylesheet Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
29
+
30
+ <!-- Demo Specific Styles -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
32
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
33
+ </head>
34
+ <body class="auro-markdown">
35
+ <main></main>
36
+
37
+ <script type="module">
38
+ import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
39
+ import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
40
+ fetch('./api.md')
41
+ .then((response) => response.text())
42
+ .then((text) => {
43
+ const rawHtml = marked.parse(text);
44
+ document.querySelector('main').innerHTML = rawHtml;
45
+ Prism.highlightAll();
46
+ });
47
+ </script>
48
+ <script type="module" data-demo-script="true" src="./api.min.js"></script>
49
+
50
+ <!-- If additional elements are needed for the demo, add them here. -->
51
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
52
+ </body>
53
+ </html>
package/demo/api.js ADDED
@@ -0,0 +1 @@
1
+ import "../src/registered";
package/demo/api.md ADDED
@@ -0,0 +1,490 @@
1
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/api.md) -->
2
+ <!-- The below content is automatically added from ../docs/api.md -->
3
+
4
+ # auro-tail
5
+
6
+ ### Properties & Attributes
7
+
8
+ | Properties | Attributes | Modifiers | Type | Default | Description |
9
+ | ---------- | ---------- | --------- | --------------------------------------------- | ------- | ----------------------------------------------------------------------------------------- |
10
+ | badge | badge | | string | | Sets the badge type to display (e.g., `oneworld`). |
11
+ | href | href | | string | | Sets the href for the tail. |
12
+ | size | size | | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `2xl` | `lg` | Sets the size of the tail. |
13
+ | tail | tail | | string | `AS` | Sets the airline tail based on the tail codes used in auro-icon (e.g., `AS`, `HA`, `PR`). |
14
+ | variant | variant | | `outline` | | Sets the visual variant of the tail. |
15
+
16
+ ### Methods
17
+
18
+ | Name | Parameters | Return | Description |
19
+ | -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
20
+ | register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
21
+
22
+ # auro-tail-group
23
+
24
+ ### Properties & Attributes
25
+
26
+ | Properties | Attributes | Modifiers | Type | Default | Description |
27
+ | ---------- | ---------- | --------- | ---------------------------- | ------------ | ----------------------------------------------- |
28
+ | layout | layout | | `horizontal` \| `diagonal` | `horizontal` | Sets the layout direction for the group. |
29
+ | size | size | | `xs` \| `sm` \| `md` \| `lg` | `lg` | Sets the size for all child tails in the group. |
30
+
31
+ ### Methods
32
+
33
+ | Name | Parameters | Return | Description |
34
+ | -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
35
+ | register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
36
+ <!-- AURO-GENERATED-CONTENT:END -->
37
+
38
+ ## API Examples
39
+
40
+ ## Basic
41
+
42
+ <div class="exampleWrapper">
43
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
44
+ <!-- The below content is automatically added from ../apiExamples/basic.html -->
45
+ <auro-tail tail="AS"></auro-tail>
46
+ <!-- AURO-GENERATED-CONTENT:END -->
47
+ </div>
48
+ <auro-accordion alignRight>
49
+ <span slot="trigger">See code</span>
50
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
51
+ <!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
52
+
53
+ ```html
54
+ <auro-tail tail="AS"></auro-tail>
55
+ ```
56
+ <!-- AURO-GENERATED-CONTENT:END -->
57
+ </auro-accordion>
58
+
59
+ ## Badge
60
+
61
+ Display predefined badges such as OneWorld Alliance using the `badge` attribute.
62
+
63
+ ### Supported sizes:
64
+ - `md`, `lg`, `xl`, `2xl`
65
+
66
+ > `badge` prop is not displayed when in an `<auro-tail-group>`.
67
+
68
+ <div class="exampleWrapper">
69
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/badges.html) -->
70
+ <!-- The below content is automatically added from ../apiExamples/badges.html -->
71
+ <auro-tail tail="AS" size="md" badge="oneworld"></auro-tail>
72
+ <auro-tail tail="AS" size="lg" badge="oneworld"></auro-tail>
73
+ <auro-tail tail="AS" size="xl" badge="oneworld"></auro-tail>
74
+ <auro-tail tail="AS" size="2xl" badge="oneworld"></auro-tail>
75
+ <!-- AURO-GENERATED-CONTENT:END -->
76
+ </div>
77
+ <auro-accordion alignRight>
78
+ <span slot="trigger">See code</span>
79
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/badges.html) -->
80
+ <!-- The below code snippet is automatically added from ../apiExamples/badges.html -->
81
+
82
+ ```html
83
+ <auro-tail tail="AS" size="md" badge="oneworld"></auro-tail>
84
+ <auro-tail tail="AS" size="lg" badge="oneworld"></auro-tail>
85
+ <auro-tail tail="AS" size="xl" badge="oneworld"></auro-tail>
86
+ <auro-tail tail="AS" size="2xl" badge="oneworld"></auro-tail>
87
+ ```
88
+ <!-- AURO-GENERATED-CONTENT:END -->
89
+ </auro-accordion>
90
+
91
+ ## Href
92
+
93
+ Make tails clickable by adding an `href` attribute. This displays a clickable link below the tail using the `<auro-hyperlink>` component.
94
+
95
+ ### Supported sizes:
96
+ - `md`, `lg`, `xl`, `2xl`
97
+
98
+ ### Customizing the label:
99
+ - Use the `display` slot to provide custom link text
100
+ - If no `slot` is provided, a default label is inserted automatically
101
+
102
+ ```html
103
+ <auro-tail tail="HA" size="md" href="https://hawaiianairlines.com/">
104
+ <span>Hawaiian Airlines</span>
105
+ </auro-tail>
106
+ ```
107
+
108
+ <div class="exampleWrapper">
109
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/href.html) -->
110
+ <!-- The below content is automatically added from ../apiExamples/href.html -->
111
+ <auro-tail tail="HA" size="md" href="https://hawaiianairlines.com/">
112
+ <span>Hawaiian Airlines</span>
113
+ </auro-tail>
114
+ <auro-tail tail="PR" size="lg" href="https://philippineairlines.com/">
115
+ <span>Philippine Airlines</span>
116
+ </auro-tail>
117
+ <auro-tail tail="AS" size="xl" href="https://hawaiianairlines.com/">
118
+ <span>Alaska Airlines</span>
119
+ </auro-tail>
120
+ <auro-tail tail="HA" size="2xl" href="https://hawaiianairlines.com/">
121
+ <span>Custom Label</span>
122
+ </auro-tail>
123
+ <!-- AURO-GENERATED-CONTENT:END -->
124
+ </div>
125
+ <auro-accordion alignRight>
126
+ <span slot="trigger">See code</span>
127
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/href.html) -->
128
+ <!-- The below code snippet is automatically added from ../apiExamples/href.html -->
129
+
130
+ ```html
131
+ <auro-tail tail="HA" size="md" href="https://hawaiianairlines.com/">
132
+ <span>Hawaiian Airlines</span>
133
+ </auro-tail>
134
+ <auro-tail tail="PR" size="lg" href="https://philippineairlines.com/">
135
+ <span>Philippine Airlines</span>
136
+ </auro-tail>
137
+ <auro-tail tail="AS" size="xl" href="https://hawaiianairlines.com/">
138
+ <span>Alaska Airlines</span>
139
+ </auro-tail>
140
+ <auro-tail tail="HA" size="2xl" href="https://hawaiianairlines.com/">
141
+ <span>Custom Label</span>
142
+ </auro-tail>
143
+ ```
144
+ <!-- AURO-GENERATED-CONTENT:END -->
145
+ </auro-accordion>
146
+
147
+ ## Size
148
+
149
+ Control the size of `<auro-tail>` with the `size` attribute.
150
+
151
+ Certain properties are not available for all `<auto-tail>` sizes. See the table below for details.
152
+
153
+ | Size | `href` | `badge` |
154
+ |------|-----------------|------------------|
155
+ | xs | ✗ | ✗ |
156
+ | sm | ✗ | ✗ |
157
+ | md | ✓ | ✓ |
158
+ | lg | ✓ | ✓ |
159
+ | xl | ✓ | ✓ |
160
+ | 2xl | ✓ | ✓ |
161
+
162
+ <div class="exampleWrapper">
163
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/sizes.html) -->
164
+ <!-- The below content is automatically added from ../apiExamples/sizes.html -->
165
+ <auro-tail tail="AS" size="xs"></auro-tail>
166
+ <auro-tail tail="AS" size="sm"></auro-tail>
167
+ <auro-tail tail="HA" size="md"></auro-tail>
168
+ <auro-tail tail="PR" size="lg"></auro-tail>
169
+ <auro-tail tail="AS" size="xl"></auro-tail>
170
+ <auro-tail tail="HA" size="2xl"></auro-tail>
171
+ <!-- AURO-GENERATED-CONTENT:END -->
172
+ </div>
173
+ <auro-accordion alignRight>
174
+ <span slot="trigger">See code</span>
175
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/sizes.html) -->
176
+ <!-- The below code snippet is automatically added from ../apiExamples/sizes.html -->
177
+
178
+ ```html
179
+ <auro-tail tail="AS" size="xs"></auro-tail>
180
+ <auro-tail tail="AS" size="sm"></auro-tail>
181
+ <auro-tail tail="HA" size="md"></auro-tail>
182
+ <auro-tail tail="PR" size="lg"></auro-tail>
183
+ <auro-tail tail="AS" size="xl"></auro-tail>
184
+ <auro-tail tail="HA" size="2xl"></auro-tail>
185
+ ```
186
+ <!-- AURO-GENERATED-CONTENT:END -->
187
+ </auro-accordion>
188
+
189
+ ## Tail
190
+
191
+ Set the `tail` attribute to insert a tail graphic from the `<auro-icon>` repository with the corresponding icon code.
192
+
193
+ Tail codes from `<auro-icon>` are expected to be UPPERCASE (e.g., `AS`, not `as`).
194
+
195
+ The `tail` attribute is required.
196
+
197
+ <div class="exampleWrapper">
198
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/tail.html) -->
199
+ <!-- The below content is automatically added from ../apiExamples/tail.html -->
200
+ <auro-tail tail="AS"></auro-tail>
201
+ <auro-tail tail="HA"></auro-tail>
202
+ <auro-tail tail="PR"></auro-tail>
203
+ <!-- AURO-GENERATED-CONTENT:END -->
204
+ </div>
205
+ <auro-accordion alignRight>
206
+ <span slot="trigger">See code</span>
207
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/tail.html) -->
208
+ <!-- The below code snippet is automatically added from ../apiExamples/tail.html -->
209
+
210
+ ```html
211
+ <auro-tail tail="AS"></auro-tail>
212
+ <auro-tail tail="HA"></auro-tail>
213
+ <auro-tail tail="PR"></auro-tail>
214
+ ```
215
+ <!-- AURO-GENERATED-CONTENT:END -->
216
+ </auro-accordion>
217
+
218
+ ## Variant
219
+
220
+ Set the `variant` attribute to change the visual style of the tail.
221
+
222
+ ### Available variants:
223
+ - `outline` - Adds an outline around the tail graphic
224
+ - Outlines apply only to partner (OA) tails
225
+ - AAG tails (`AS` & `HA`) never feature outlines
226
+ - Width & color are predefined and not customizable
227
+
228
+ <div class="exampleWrapper">
229
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/variant.html) -->
230
+ <!-- The below content is automatically added from ../apiExamples/variant.html -->
231
+ <auro-tail tail="S7" variant="outline"></auro-tail>
232
+ <auro-tail tail="KE" variant="outline"></auro-tail>
233
+ <auro-tail tail="AS" variant="outline"></auro-tail>
234
+ <auro-tail tail="HA" variant="outline"></auro-tail>
235
+ <!-- AURO-GENERATED-CONTENT:END -->
236
+ </div>
237
+ <auro-accordion alignRight>
238
+ <span slot="trigger">See code</span>
239
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/variant.html) -->
240
+ <!-- The below code snippet is automatically added from ../apiExamples/variant.html -->
241
+
242
+ ```html
243
+ <auro-tail tail="S7" variant="outline"></auro-tail>
244
+ <auro-tail tail="KE" variant="outline"></auro-tail>
245
+ <auro-tail tail="AS" variant="outline"></auro-tail>
246
+ <auro-tail tail="HA" variant="outline"></auro-tail>
247
+ ```
248
+ <!-- AURO-GENERATED-CONTENT:END -->
249
+ </auro-accordion>
250
+
251
+ ## CSS Customization
252
+
253
+ ## Borders
254
+
255
+ Optional border ring around `<auro-tail>`.
256
+
257
+ Use CSS custom properties to style borders:
258
+
259
+ - `--ds-auro-tail-border-width`
260
+ - Set the border width (e.g., `3px`, `4px`)
261
+ - `--ds-auro-tail-border-color`
262
+ - Set the border color (any valid CSS color value)
263
+
264
+ ### Styling individual tails:
265
+
266
+ Set CSS custom properties directly on the `<auro-tail>` element:
267
+
268
+ ```html
269
+ <auro-tail tail="AS" style="--ds-auro-tail-border-width: 3px; --ds-auro-tail-border-color: var(--ds-basic-color-brand-primary)"></auro-tail>
270
+ ```
271
+
272
+ <div class="exampleWrapper">
273
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/borders.html) -->
274
+ <!-- The below content is automatically added from ../apiExamples/borders.html -->
275
+ <auro-tail tail="HA" style="--ds-auro-tail-border-width: 2px"></auro-tail>
276
+ <auro-tail tail="AS" style="--ds-auro-tail-border-width: 3px; --ds-auro-tail-border-color: var(--ds-basic-color-brand-primary)"></auro-tail>
277
+ <auro-tail tail="HA" style="--ds-auro-tail-border-width: 4px; --ds-auro-tail-border-color: #FF1493"></auro-tail>
278
+ <auro-tail tail="PR" style="--ds-auro-tail-border-width: 5px; --ds-auro-tail-border-color: red"></auro-tail>
279
+ <!-- AURO-GENERATED-CONTENT:END -->
280
+ </div>
281
+ <auro-accordion alignRight>
282
+ <span slot="trigger">See code</span>
283
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/borders.html) -->
284
+ <!-- The below code snippet is automatically added from ../apiExamples/borders.html -->
285
+
286
+ ```html
287
+ <auro-tail tail="HA" style="--ds-auro-tail-border-width: 2px"></auro-tail>
288
+ <auro-tail tail="AS" style="--ds-auro-tail-border-width: 3px; --ds-auro-tail-border-color: var(--ds-basic-color-brand-primary)"></auro-tail>
289
+ <auro-tail tail="HA" style="--ds-auro-tail-border-width: 4px; --ds-auro-tail-border-color: #FF1493"></auro-tail>
290
+ <auro-tail tail="PR" style="--ds-auro-tail-border-width: 5px; --ds-auro-tail-border-color: red"></auro-tail>
291
+ ```
292
+ <!-- AURO-GENERATED-CONTENT:END -->
293
+ </auro-accordion>
294
+
295
+ ## auro-tail-group
296
+ Use `<auro-tail-group>` to display paired `<auro-tail>` components in a group layout with specific behavioral constraints and visual treatments.
297
+
298
+ ### Supported sizes:
299
+ - `xs`, `sm`, `md`, `lg`
300
+
301
+ ### Limitations
302
+ * **Maximum Display Count:** Only 2 tails are supported in any group.
303
+ * **Size Override:** The group's `size` property will override individual `<auro-tail>` `size` properties
304
+ * **Suppressed Features:**
305
+ * `badge` will not be shown
306
+ * `href` will not be displayed
307
+
308
+ ### Styling tails in a group
309
+
310
+ CSS custom properties set on the `<auro-tail-group>` element will automatically apply to all child `<auro-tail>` elements:
311
+
312
+ ```html
313
+ <auro-tail-group layout="horizontal" style="--ds-auro-tail-border-color: var(--ds-basic-color-brand-primary)">
314
+ <auro-tail tail="AS"></auro-tail>
315
+ <auro-tail tail="HA"></auro-tail>
316
+ </auro-tail-group>
317
+ ```
318
+
319
+ Border styling availability varies by layout type (see sections below).
320
+
321
+ ### Diagonal
322
+
323
+ - Border styles (`--ds-auro-tail-border-width` and `--ds-auro-tail-border-color`) are not applicable to diagonal groups and will be ignored.
324
+
325
+ <div class="exampleWrapper">
326
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/group-diagonal.html) -->
327
+ <!-- The below content is automatically added from ../apiExamples/group-diagonal.html -->
328
+ <auro-tail-group layout="diagonal" size="xs">
329
+ <auro-tail tail="AS"></auro-tail>
330
+ <auro-tail tail="HA"></auro-tail>
331
+ </auro-tail-group>
332
+ <auro-tail-group layout="diagonal" size="sm">
333
+ <auro-tail tail="AS"></auro-tail>
334
+ <auro-tail tail="HA"></auro-tail>
335
+ </auro-tail-group>
336
+ <auro-tail-group layout="diagonal" size="md">
337
+ <auro-tail tail="AS"></auro-tail>
338
+ <auro-tail tail="HA"></auro-tail>
339
+ </auro-tail-group>
340
+ <auro-tail-group layout="diagonal" size="lg">
341
+ <auro-tail tail="AS"></auro-tail>
342
+ <auro-tail tail="HA"></auro-tail>
343
+ </auro-tail-group>
344
+ <!-- AURO-GENERATED-CONTENT:END -->
345
+ </div>
346
+ <auro-accordion alignRight>
347
+ <span slot="trigger">See code</span>
348
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/group-diagonal.html) -->
349
+ <!-- The below code snippet is automatically added from ../apiExamples/group-diagonal.html -->
350
+
351
+ ```html
352
+ <auro-tail-group layout="diagonal" size="xs">
353
+ <auro-tail tail="AS"></auro-tail>
354
+ <auro-tail tail="HA"></auro-tail>
355
+ </auro-tail-group>
356
+ <auro-tail-group layout="diagonal" size="sm">
357
+ <auro-tail tail="AS"></auro-tail>
358
+ <auro-tail tail="HA"></auro-tail>
359
+ </auro-tail-group>
360
+ <auro-tail-group layout="diagonal" size="md">
361
+ <auro-tail tail="AS"></auro-tail>
362
+ <auro-tail tail="HA"></auro-tail>
363
+ </auro-tail-group>
364
+ <auro-tail-group layout="diagonal" size="lg">
365
+ <auro-tail tail="AS"></auro-tail>
366
+ <auro-tail tail="HA"></auro-tail>
367
+ </auro-tail-group>
368
+ ```
369
+ <!-- AURO-GENERATED-CONTENT:END -->
370
+ </auro-accordion>
371
+
372
+ ### Horizontal
373
+
374
+ - Border width (`--ds-auro-tail-border-width`) is not customizable.
375
+
376
+ <div class="exampleWrapper">
377
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/group-horizontal.html) -->
378
+ <!-- The below content is automatically added from ../apiExamples/group-horizontal.html -->
379
+ <auro-tail-group layout="horizontal" size="xs">
380
+ <auro-tail tail="AS"></auro-tail>
381
+ <auro-tail tail="HA"></auro-tail>
382
+ </auro-tail-group>
383
+ <auro-tail-group layout="horizontal" size="sm">
384
+ <auro-tail tail="AS"></auro-tail>
385
+ <auro-tail tail="HA"></auro-tail>
386
+ </auro-tail-group>
387
+ <auro-tail-group layout="horizontal" size="md">
388
+ <auro-tail tail="AS"></auro-tail>
389
+ <auro-tail tail="HA"></auro-tail>
390
+ </auro-tail-group>
391
+ <auro-tail-group layout="horizontal" size="lg">
392
+ <auro-tail tail="AS"></auro-tail>
393
+ <auro-tail tail="HA"></auro-tail>
394
+ </auro-tail-group>
395
+ <!-- AURO-GENERATED-CONTENT:END -->
396
+ </div>
397
+ <auro-accordion alignRight>
398
+ <span slot="trigger">See code</span>
399
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/group-horizontal.html) -->
400
+ <!-- The below code snippet is automatically added from ../apiExamples/group-horizontal.html -->
401
+
402
+ ```html
403
+ <auro-tail-group layout="horizontal" size="xs">
404
+ <auro-tail tail="AS"></auro-tail>
405
+ <auro-tail tail="HA"></auro-tail>
406
+ </auro-tail-group>
407
+ <auro-tail-group layout="horizontal" size="sm">
408
+ <auro-tail tail="AS"></auro-tail>
409
+ <auro-tail tail="HA"></auro-tail>
410
+ </auro-tail-group>
411
+ <auro-tail-group layout="horizontal" size="md">
412
+ <auro-tail tail="AS"></auro-tail>
413
+ <auro-tail tail="HA"></auro-tail>
414
+ </auro-tail-group>
415
+ <auro-tail-group layout="horizontal" size="lg">
416
+ <auro-tail tail="AS"></auro-tail>
417
+ <auro-tail tail="HA"></auro-tail>
418
+ </auro-tail-group>
419
+ ```
420
+ <!-- AURO-GENERATED-CONTENT:END -->
421
+ </auro-accordion>
422
+
423
+ #### Horizontal with custom border color:
424
+
425
+ - Set `--ds-auro-tail-border-color` on the group element to customize border color for all child tails.
426
+
427
+ <div class="exampleWrapper">
428
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/group-horizontal-border.html) -->
429
+ <!-- The below content is automatically added from ../apiExamples/group-horizontal-border.html -->
430
+ <auro-tail-group layout="horizontal" size="sm" style="--ds-auro-tail-border-color: var(--ds-basic-color-brand-secondary-bold)">
431
+ <auro-tail tail="AS"></auro-tail>
432
+ <auro-tail tail="HA"></auro-tail>
433
+ </auro-tail-group>
434
+ <auro-tail-group layout="horizontal" size="md" style="--ds-auro-tail-border-color: #FF69B4">
435
+ <auro-tail tail="AS"></auro-tail>
436
+ <auro-tail tail="HA"></auro-tail>
437
+ </auro-tail-group>
438
+ <auro-tail-group layout="horizontal" size="xs" style="--ds-auro-tail-border-color: red">
439
+ <auro-tail tail="AS"></auro-tail>
440
+ <auro-tail tail="HA"></auro-tail>
441
+ </auro-tail-group>
442
+ <auro-tail-group layout="horizontal" size="lg" style="--ds-auro-tail-border-color: rgba(70, 60, 143, 1)">
443
+ <auro-tail tail="AS"></auro-tail>
444
+ <auro-tail tail="HA"></auro-tail>
445
+ </auro-tail-group>
446
+ <!-- AURO-GENERATED-CONTENT:END -->
447
+ </div>
448
+ <auro-accordion alignRight>
449
+ <span slot="trigger">See code</span>
450
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/group-horizontal-border.html) -->
451
+ <!-- The below code snippet is automatically added from ../apiExamples/group-horizontal-border.html -->
452
+
453
+ ```html
454
+ <auro-tail-group layout="horizontal" size="sm" style="--ds-auro-tail-border-color: var(--ds-basic-color-brand-secondary-bold)">
455
+ <auro-tail tail="AS"></auro-tail>
456
+ <auro-tail tail="HA"></auro-tail>
457
+ </auro-tail-group>
458
+ <auro-tail-group layout="horizontal" size="md" style="--ds-auro-tail-border-color: #FF69B4">
459
+ <auro-tail tail="AS"></auro-tail>
460
+ <auro-tail tail="HA"></auro-tail>
461
+ </auro-tail-group>
462
+ <auro-tail-group layout="horizontal" size="xs" style="--ds-auro-tail-border-color: red">
463
+ <auro-tail tail="AS"></auro-tail>
464
+ <auro-tail tail="HA"></auro-tail>
465
+ </auro-tail-group>
466
+ <auro-tail-group layout="horizontal" size="lg" style="--ds-auro-tail-border-color: rgba(70, 60, 143, 1)">
467
+ <auro-tail tail="AS"></auro-tail>
468
+ <auro-tail tail="HA"></auro-tail>
469
+ </auro-tail-group>
470
+ ```
471
+ <!-- AURO-GENERATED-CONTENT:END -->
472
+ </auro-accordion>
473
+
474
+ ### Theme Support
475
+
476
+ The component may be restyled using the following code sample and changing the values of the following token(s).
477
+
478
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../src/styles/tokens.scss) -->
479
+ <!-- The below code snippet is automatically added from ../src/styles/tokens.scss -->
480
+
481
+ ```scss
482
+ /* Public API Tokens - Consumer Customizable */
483
+
484
+ :host {
485
+ /* Border tokens */
486
+ --ds-auro-tail-border-color: var(--ds-auro-tail-border-color-default);
487
+ --ds-auro-tail-border-width: var(--ds-auro-tail-border-w-default);
488
+ }
489
+ ```
490
+ <!-- AURO-GENERATED-CONTENT:END -->
package/demo/api.min.js ADDED
@@ -0,0 +1,4 @@
1
+ import { A as AuroTail, a as AuroTailGroup } from './auro-tail-group.min.js';
2
+
3
+ AuroTail.register();
4
+ AuroTailGroup.register();