@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.
- package/NOTICE +1 -1
- package/README.md +54 -88
- package/custom-elements.json +148 -780
- package/demo/api.html +1 -4
- package/demo/api.md +257 -469
- package/demo/auro-tail-group.min.js +189 -288
- package/demo/index.html +1 -4
- package/demo/index.js +2 -1
- package/demo/index.md +25 -13
- package/demo/index.min.js +2 -1
- package/dist/{auro-tail-group-7TRu6-ht.js → auro-tail-group-DPP1Aw94.js} +83 -83
- package/dist/index.d.ts +205 -196
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +8 -4
package/demo/api.md
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/api.md) -->
|
|
2
2
|
<!-- The below content is automatically added from ../docs/api.md -->
|
|
3
3
|
|
|
4
|
-
# auro-tail
|
|
5
|
-
|
|
6
|
-
The auro-tail-group element displays multiple auro-tail elements in a grouped layout.
|
|
4
|
+
# auro-tail
|
|
7
5
|
|
|
8
6
|
### Properties & Attributes
|
|
9
7
|
|
|
10
|
-
| Properties
|
|
11
|
-
|
|
|
12
|
-
|
|
|
13
|
-
|
|
|
14
|
-
| size
|
|
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
15
|
|
|
16
16
|
### Methods
|
|
17
17
|
|
|
@@ -19,81 +19,127 @@ The auro-tail-group element displays multiple auro-tail elements in a grouped la
|
|
|
19
19
|
| -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
|
|
20
20
|
| register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
# auro-tail
|
|
25
|
-
|
|
26
|
-
The auro-tail element displays Alaska, Hawaiian, and partner airline tail graphics for consistent visual representation across Auro applications.
|
|
22
|
+
# auro-tail-group
|
|
27
23
|
|
|
28
24
|
### Properties & Attributes
|
|
29
25
|
|
|
30
|
-
| Properties
|
|
31
|
-
|
|
|
32
|
-
|
|
|
33
|
-
|
|
|
34
|
-
| borderColor | border-color | string \| undefined | undefined | Sets the border color around the tail. |
|
|
35
|
-
| borderWidth | border-width | string \| undefined | undefined | Sets the border width around the tail. |
|
|
36
|
-
| hasBorder | | | | Checks if tail has border properties defined. |
|
|
37
|
-
| href | href | string \| undefined | undefined | Sets the href for the tail. |
|
|
38
|
-
| isInGroup | | | | Checks if this tail is inside an auro-tail-group element. |
|
|
39
|
-
| isInHorizontalGroup | | | | Checks if this tail is in a horizontal group layout. |
|
|
40
|
-
| labelTypeClass | | | | Gets the appropriate CSS type class based on tail size. |
|
|
41
|
-
| outline | outline | boolean | false | Renders the tail with an outline style. |
|
|
42
|
-
| shouldShowLink | | | | Checks if the tail should display as a clickable link. |
|
|
43
|
-
| size | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' | 'lg' | Sets the size of the tail. |
|
|
44
|
-
| tail | tail | string | 'AS' | Sets the airline tail based on the tail codes used in auro-icon (e.g., AS, HA, PR). |
|
|
45
|
-
| variant | | | | Gets the carrier variant based on the current tail code. |
|
|
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. |
|
|
46
30
|
|
|
47
31
|
### Methods
|
|
48
32
|
|
|
49
33
|
| Name | Parameters | Return | Description |
|
|
50
34
|
| -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
|
|
51
35
|
| register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
|
|
52
|
-
|
|
53
|
-
### Events
|
|
54
|
-
|
|
55
|
-
| Name | Description |
|
|
56
|
-
| ---------- | ----------------------------------------- |
|
|
57
|
-
| href-click | Fired when the auro-hyperlink is clicked. |
|
|
58
36
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
59
37
|
|
|
60
38
|
## API Examples
|
|
61
39
|
|
|
62
|
-
|
|
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 -->
|
|
63
52
|
|
|
64
|
-
|
|
53
|
+
```html
|
|
54
|
+
<auro-tail tail="AS"></auro-tail>
|
|
55
|
+
```
|
|
56
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
57
|
+
</auro-accordion>
|
|
65
58
|
|
|
66
|
-
|
|
59
|
+
## Badge
|
|
67
60
|
|
|
68
|
-
|
|
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>`.
|
|
69
67
|
|
|
70
|
-
>
|
|
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>
|
|
71
90
|
|
|
72
|
-
|
|
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`
|
|
73
97
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
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
|
+
```
|
|
79
107
|
|
|
80
108
|
<div class="exampleWrapper">
|
|
81
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/
|
|
82
|
-
<!-- The below content is automatically added from ../apiExamples/
|
|
83
|
-
<auro-tail tail="
|
|
84
|
-
|
|
85
|
-
|
|
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>
|
|
86
123
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
87
124
|
</div>
|
|
88
125
|
<auro-accordion alignRight>
|
|
89
126
|
<span slot="trigger">See code</span>
|
|
90
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/
|
|
91
|
-
<!-- The below code snippet is automatically added from ../apiExamples/
|
|
127
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/href.html) -->
|
|
128
|
+
<!-- The below code snippet is automatically added from ../apiExamples/href.html -->
|
|
92
129
|
|
|
93
130
|
```html
|
|
94
|
-
<auro-tail tail="
|
|
95
|
-
<
|
|
96
|
-
|
|
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>
|
|
97
143
|
```
|
|
98
144
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
99
145
|
</auro-accordion>
|
|
@@ -116,12 +162,12 @@ Certain properties are not available for all `<auto-tail>` sizes. See the table
|
|
|
116
162
|
<div class="exampleWrapper">
|
|
117
163
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/sizes.html) -->
|
|
118
164
|
<!-- The below content is automatically added from ../apiExamples/sizes.html -->
|
|
119
|
-
<auro-tail tail="
|
|
120
|
-
<auro-tail tail="
|
|
121
|
-
<auro-tail tail="
|
|
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>
|
|
122
168
|
<auro-tail tail="PR" size="lg"></auro-tail>
|
|
123
|
-
<auro-tail tail="
|
|
124
|
-
<auro-tail tail="
|
|
169
|
+
<auro-tail tail="AS" size="xl"></auro-tail>
|
|
170
|
+
<auro-tail tail="HA" size="2xl"></auro-tail>
|
|
125
171
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
126
172
|
</div>
|
|
127
173
|
<auro-accordion alignRight>
|
|
@@ -130,233 +176,170 @@ Certain properties are not available for all `<auto-tail>` sizes. See the table
|
|
|
130
176
|
<!-- The below code snippet is automatically added from ../apiExamples/sizes.html -->
|
|
131
177
|
|
|
132
178
|
```html
|
|
133
|
-
<auro-tail tail="
|
|
134
|
-
<auro-tail tail="
|
|
135
|
-
<auro-tail tail="
|
|
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>
|
|
136
182
|
<auro-tail tail="PR" size="lg"></auro-tail>
|
|
137
|
-
<auro-tail tail="
|
|
138
|
-
<auro-tail tail="
|
|
183
|
+
<auro-tail tail="AS" size="xl"></auro-tail>
|
|
184
|
+
<auro-tail tail="HA" size="2xl"></auro-tail>
|
|
139
185
|
```
|
|
140
186
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
141
187
|
</auro-accordion>
|
|
142
188
|
|
|
143
|
-
##
|
|
144
|
-
|
|
145
|
-
Display predefined badges such as OneWorld Alliance using the `badge` attribute.
|
|
189
|
+
## Tail
|
|
146
190
|
|
|
147
|
-
|
|
148
|
-
- `md`, `lg`, `xl`, `2xl`
|
|
191
|
+
Set the `tail` attribute to insert a tail graphic from the `<auro-icon>` repository with the corresponding icon code.
|
|
149
192
|
|
|
150
|
-
|
|
193
|
+
Tail codes from `<auro-icon>` are expected to be UPPERCASE (e.g., `AS`, not `as`).
|
|
194
|
+
|
|
195
|
+
The `tail` attribute is required.
|
|
151
196
|
|
|
152
197
|
<div class="exampleWrapper">
|
|
153
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/
|
|
154
|
-
<!-- The below content is automatically added from ../apiExamples/
|
|
155
|
-
<auro-tail tail="
|
|
156
|
-
<auro-tail tail="
|
|
157
|
-
<auro-tail tail="
|
|
158
|
-
<auro-tail tail="AS" size="lg" badge="oneworld"></auro-tail>
|
|
159
|
-
<auro-tail tail="AS" size="xl" badge="oneworld"></auro-tail>
|
|
160
|
-
<auro-tail tail="AS" size="2xl" badge="oneworld"></auro-tail>
|
|
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>
|
|
161
203
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
162
204
|
</div>
|
|
163
205
|
<auro-accordion alignRight>
|
|
164
206
|
<span slot="trigger">See code</span>
|
|
165
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/
|
|
166
|
-
<!-- The below code snippet is automatically added from ../apiExamples/
|
|
207
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/tail.html) -->
|
|
208
|
+
<!-- The below code snippet is automatically added from ../apiExamples/tail.html -->
|
|
167
209
|
|
|
168
210
|
```html
|
|
169
|
-
<auro-tail tail="
|
|
170
|
-
<auro-tail tail="
|
|
171
|
-
<auro-tail tail="
|
|
172
|
-
<auro-tail tail="AS" size="lg" badge="oneworld"></auro-tail>
|
|
173
|
-
<auro-tail tail="AS" size="xl" badge="oneworld"></auro-tail>
|
|
174
|
-
<auro-tail tail="AS" size="2xl" badge="oneworld"></auro-tail>
|
|
211
|
+
<auro-tail tail="AS"></auro-tail>
|
|
212
|
+
<auro-tail tail="HA"></auro-tail>
|
|
213
|
+
<auro-tail tail="PR"></auro-tail>
|
|
175
214
|
```
|
|
176
215
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
177
216
|
</auro-accordion>
|
|
178
217
|
|
|
179
|
-
##
|
|
180
|
-
|
|
181
|
-
Optional border ring around `<auro-tail>`.
|
|
218
|
+
## Variant
|
|
182
219
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
- Hex: `#FF1493`
|
|
191
|
-
- Named colors: `"hotpink"`
|
|
192
|
-
- RGB/RGBA: `rgb(255, 20, 147)`, `rgba(255, 20, 147, 0.5)`
|
|
193
|
-
- HSL: `hsl(328, 100%, 54%)`
|
|
194
|
-
- CSS variables: `var(--custom-color)`
|
|
195
|
-
- Default color: `rgba(88, 94, 103, 1)` when `border-width` is specified
|
|
196
|
-
- `border-width` & `border-color` can be used in combination
|
|
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
|
|
197
227
|
|
|
198
228
|
<div class="exampleWrapper">
|
|
199
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/
|
|
200
|
-
<!-- The below content is automatically added from ../apiExamples/
|
|
201
|
-
<auro-tail tail="
|
|
202
|
-
<auro-tail tail="
|
|
203
|
-
<auro-tail tail="
|
|
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>
|
|
204
235
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
205
236
|
</div>
|
|
206
237
|
<auro-accordion alignRight>
|
|
207
238
|
<span slot="trigger">See code</span>
|
|
208
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/
|
|
209
|
-
<!-- The below code snippet is automatically added from ../apiExamples/
|
|
239
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/variant.html) -->
|
|
240
|
+
<!-- The below code snippet is automatically added from ../apiExamples/variant.html -->
|
|
210
241
|
|
|
211
242
|
```html
|
|
212
|
-
<auro-tail tail="
|
|
213
|
-
<auro-tail tail="
|
|
214
|
-
<auro-tail tail="
|
|
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>
|
|
215
247
|
```
|
|
216
248
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
217
249
|
</auro-accordion>
|
|
218
250
|
|
|
219
|
-
##
|
|
251
|
+
## CSS Customization
|
|
252
|
+
|
|
253
|
+
## Borders
|
|
220
254
|
|
|
221
|
-
|
|
255
|
+
Optional border ring around `<auro-tail>`.
|
|
222
256
|
|
|
223
|
-
|
|
224
|
-
- AAG tails (AS & HA) never feature outlines
|
|
225
|
-
- Width & color are predefined and not customizable
|
|
257
|
+
Use CSS custom properties to style borders:
|
|
226
258
|
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
<auro-tail tail="PR" outline></auro-tail>
|
|
232
|
-
<!--Does not apply to AAG carriers such as AS & HS-->
|
|
233
|
-
<auro-tail tail="HA" outline></auro-tail>
|
|
234
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
235
|
-
</div>
|
|
236
|
-
<auro-accordion alignRight>
|
|
237
|
-
<span slot="trigger">See code</span>
|
|
238
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/outline.html) -->
|
|
239
|
-
<!-- The below code snippet is automatically added from ../apiExamples/outline.html -->
|
|
240
|
-
|
|
241
|
-
```html
|
|
242
|
-
<auro-tail tail="FI" outline></auro-tail>
|
|
243
|
-
<auro-tail tail="PR" outline></auro-tail>
|
|
244
|
-
<!--Does not apply to AAG carriers such as AS & HS-->
|
|
245
|
-
<auro-tail tail="HA" outline></auro-tail>
|
|
246
|
-
```
|
|
247
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
248
|
-
</auro-accordion>
|
|
249
|
-
|
|
250
|
-
## Hyperlink
|
|
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)
|
|
251
263
|
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
- `md`, `lg`, `xl`, `2xl`
|
|
256
|
-
|
|
257
|
-
### Customizing the label:
|
|
258
|
-
- Use the `display` slot to provide custom link text
|
|
259
|
-
- If no `slot` is provided, a default label is inserted automatically
|
|
264
|
+
### Styling individual tails:
|
|
265
|
+
|
|
266
|
+
Set CSS custom properties directly on the `<auro-tail>` element:
|
|
260
267
|
|
|
261
268
|
```html
|
|
262
|
-
<auro-tail tail="
|
|
263
|
-
<span slot="display">Hawaiian Airlines</span>
|
|
264
|
-
</auro-tail>
|
|
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>
|
|
265
270
|
```
|
|
266
271
|
|
|
267
272
|
<div class="exampleWrapper">
|
|
268
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/
|
|
269
|
-
<!-- The below content is automatically added from ../apiExamples/
|
|
270
|
-
<auro-tail tail="HA"
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
<auro-tail tail="
|
|
274
|
-
<span slot="display">Hawaiian Airlines</span>
|
|
275
|
-
</auro-tail>
|
|
276
|
-
<auro-tail tail="HA" size="md" href="https://hawaiianairlines.com/">
|
|
277
|
-
<span slot="display">Hawaiian Airlines</span>
|
|
278
|
-
</auro-tail>
|
|
279
|
-
<auro-tail tail="PR" size="lg" href="https://philippineairlines.com/">
|
|
280
|
-
<span slot="display">Philippine Airlines</span>
|
|
281
|
-
</auro-tail>
|
|
282
|
-
<auro-tail tail="HA" size="xl" href="https://hawaiianairlines.com/">
|
|
283
|
-
<span slot="display">Hawaiian Airlines</span>
|
|
284
|
-
</auro-tail>
|
|
285
|
-
<!--No slot passed, default display text will be used-->
|
|
286
|
-
<auro-tail tail="AS" size="2xl" href="https://alaskaair.com/"></auro-tail>
|
|
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>
|
|
287
279
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
288
280
|
</div>
|
|
289
281
|
<auro-accordion alignRight>
|
|
290
282
|
<span slot="trigger">See code</span>
|
|
291
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/
|
|
292
|
-
<!-- The below code snippet is automatically added from ../apiExamples/
|
|
283
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/borders.html) -->
|
|
284
|
+
<!-- The below code snippet is automatically added from ../apiExamples/borders.html -->
|
|
293
285
|
|
|
294
286
|
```html
|
|
295
|
-
<auro-tail tail="HA"
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
<auro-tail tail="
|
|
299
|
-
<span slot="display">Hawaiian Airlines</span>
|
|
300
|
-
</auro-tail>
|
|
301
|
-
<auro-tail tail="HA" size="md" href="https://hawaiianairlines.com/">
|
|
302
|
-
<span slot="display">Hawaiian Airlines</span>
|
|
303
|
-
</auro-tail>
|
|
304
|
-
<auro-tail tail="PR" size="lg" href="https://philippineairlines.com/">
|
|
305
|
-
<span slot="display">Philippine Airlines</span>
|
|
306
|
-
</auro-tail>
|
|
307
|
-
<auro-tail tail="HA" size="xl" href="https://hawaiianairlines.com/">
|
|
308
|
-
<span slot="display">Hawaiian Airlines</span>
|
|
309
|
-
</auro-tail>
|
|
310
|
-
<!--No slot passed, default display text will be used-->
|
|
311
|
-
<auro-tail tail="AS" size="2xl" href="https://alaskaair.com/"></auro-tail>
|
|
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>
|
|
312
291
|
```
|
|
313
292
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
314
293
|
</auro-accordion>
|
|
315
294
|
|
|
316
|
-
##
|
|
295
|
+
## auro-tail-group
|
|
317
296
|
Use `<auro-tail-group>` to display paired `<auro-tail>` components in a group layout with specific behavioral constraints and visual treatments.
|
|
318
297
|
|
|
319
298
|
### Supported sizes:
|
|
320
299
|
- `xs`, `sm`, `md`, `lg`
|
|
321
300
|
|
|
322
301
|
### Limitations
|
|
323
|
-
* **Maximum Display Count:** Only 2
|
|
302
|
+
* **Maximum Display Count:** Only 2 tails are supported in any group.
|
|
324
303
|
* **Size Override:** The group's `size` property will override individual `<auro-tail>` `size` properties
|
|
325
304
|
* **Suppressed Features:**
|
|
326
305
|
* `badge` will not be shown
|
|
327
306
|
* `href` will not be displayed
|
|
328
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
|
+
|
|
329
321
|
### Diagonal
|
|
330
322
|
|
|
331
|
-
|
|
323
|
+
- Border styles (`--ds-auro-tail-border-width` and `--ds-auro-tail-border-color`) are not applicable to diagonal groups and will be ignored.
|
|
332
324
|
|
|
333
325
|
<div class="exampleWrapper">
|
|
334
326
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/group-diagonal.html) -->
|
|
335
327
|
<!-- The below content is automatically added from ../apiExamples/group-diagonal.html -->
|
|
336
|
-
<auro-tail-group layout="diagonal" size="xs"
|
|
337
|
-
<auro-tail tail="
|
|
338
|
-
<auro-tail tail="
|
|
328
|
+
<auro-tail-group layout="diagonal" size="xs">
|
|
329
|
+
<auro-tail tail="AS"></auro-tail>
|
|
330
|
+
<auro-tail tail="HA"></auro-tail>
|
|
339
331
|
</auro-tail-group>
|
|
340
332
|
<auro-tail-group layout="diagonal" size="sm">
|
|
341
|
-
<auro-tail tail="
|
|
342
|
-
<auro-tail tail="
|
|
333
|
+
<auro-tail tail="AS"></auro-tail>
|
|
334
|
+
<auro-tail tail="HA"></auro-tail>
|
|
343
335
|
</auro-tail-group>
|
|
344
336
|
<auro-tail-group layout="diagonal" size="md">
|
|
345
|
-
<auro-tail tail="
|
|
346
|
-
<auro-tail tail="
|
|
337
|
+
<auro-tail tail="AS"></auro-tail>
|
|
338
|
+
<auro-tail tail="HA"></auro-tail>
|
|
347
339
|
</auro-tail-group>
|
|
348
340
|
<auro-tail-group layout="diagonal" size="lg">
|
|
349
|
-
<auro-tail tail="
|
|
350
|
-
<auro-tail tail="
|
|
351
|
-
</auro-tail-group>
|
|
352
|
-
<!-- Demonstration: The following sizes are not supported and will be hidden -->
|
|
353
|
-
<auro-tail-group layout="diagonal" size="xl">
|
|
354
|
-
<auro-tail tail="as"></auro-tail>
|
|
355
|
-
<auro-tail tail="ha"></auro-tail>
|
|
356
|
-
</auro-tail-group>
|
|
357
|
-
<auro-tail-group layout="diagonal" size="2xl">
|
|
358
|
-
<auro-tail tail="as"></auro-tail>
|
|
359
|
-
<auro-tail tail="ha"></auro-tail>
|
|
341
|
+
<auro-tail tail="AS"></auro-tail>
|
|
342
|
+
<auro-tail tail="HA"></auro-tail>
|
|
360
343
|
</auro-tail-group>
|
|
361
344
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
362
345
|
</div>
|
|
@@ -366,30 +349,21 @@ Use `<auro-tail-group>` to display paired `<auro-tail>` components in a group la
|
|
|
366
349
|
<!-- The below code snippet is automatically added from ../apiExamples/group-diagonal.html -->
|
|
367
350
|
|
|
368
351
|
```html
|
|
369
|
-
<auro-tail-group layout="diagonal" size="xs"
|
|
370
|
-
<auro-tail tail="
|
|
371
|
-
<auro-tail tail="
|
|
352
|
+
<auro-tail-group layout="diagonal" size="xs">
|
|
353
|
+
<auro-tail tail="AS"></auro-tail>
|
|
354
|
+
<auro-tail tail="HA"></auro-tail>
|
|
372
355
|
</auro-tail-group>
|
|
373
356
|
<auro-tail-group layout="diagonal" size="sm">
|
|
374
|
-
<auro-tail tail="
|
|
375
|
-
<auro-tail tail="
|
|
357
|
+
<auro-tail tail="AS"></auro-tail>
|
|
358
|
+
<auro-tail tail="HA"></auro-tail>
|
|
376
359
|
</auro-tail-group>
|
|
377
360
|
<auro-tail-group layout="diagonal" size="md">
|
|
378
|
-
<auro-tail tail="
|
|
379
|
-
<auro-tail tail="
|
|
361
|
+
<auro-tail tail="AS"></auro-tail>
|
|
362
|
+
<auro-tail tail="HA"></auro-tail>
|
|
380
363
|
</auro-tail-group>
|
|
381
364
|
<auro-tail-group layout="diagonal" size="lg">
|
|
382
|
-
<auro-tail tail="
|
|
383
|
-
<auro-tail tail="
|
|
384
|
-
</auro-tail-group>
|
|
385
|
-
<!-- Demonstration: The following sizes are not supported and will be hidden -->
|
|
386
|
-
<auro-tail-group layout="diagonal" size="xl">
|
|
387
|
-
<auro-tail tail="as"></auro-tail>
|
|
388
|
-
<auro-tail tail="ha"></auro-tail>
|
|
389
|
-
</auro-tail-group>
|
|
390
|
-
<auro-tail-group layout="diagonal" size="2xl">
|
|
391
|
-
<auro-tail tail="as"></auro-tail>
|
|
392
|
-
<auro-tail tail="ha"></auro-tail>
|
|
365
|
+
<auro-tail tail="AS"></auro-tail>
|
|
366
|
+
<auro-tail tail="HA"></auro-tail>
|
|
393
367
|
</auro-tail-group>
|
|
394
368
|
```
|
|
395
369
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
@@ -397,35 +371,26 @@ Use `<auro-tail-group>` to display paired `<auro-tail>` components in a group la
|
|
|
397
371
|
|
|
398
372
|
### Horizontal
|
|
399
373
|
|
|
400
|
-
|
|
374
|
+
- Border width (`--ds-auro-tail-border-width`) is not customizable.
|
|
401
375
|
|
|
402
376
|
<div class="exampleWrapper">
|
|
403
377
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/group-horizontal.html) -->
|
|
404
378
|
<!-- The below content is automatically added from ../apiExamples/group-horizontal.html -->
|
|
405
|
-
<auro-tail-group layout="horizontal" size="xs"
|
|
406
|
-
<auro-tail tail="
|
|
407
|
-
<auro-tail tail="
|
|
379
|
+
<auro-tail-group layout="horizontal" size="xs">
|
|
380
|
+
<auro-tail tail="AS"></auro-tail>
|
|
381
|
+
<auro-tail tail="HA"></auro-tail>
|
|
408
382
|
</auro-tail-group>
|
|
409
383
|
<auro-tail-group layout="horizontal" size="sm">
|
|
410
|
-
<auro-tail tail="
|
|
411
|
-
<auro-tail tail="
|
|
384
|
+
<auro-tail tail="AS"></auro-tail>
|
|
385
|
+
<auro-tail tail="HA"></auro-tail>
|
|
412
386
|
</auro-tail-group>
|
|
413
387
|
<auro-tail-group layout="horizontal" size="md">
|
|
414
|
-
<auro-tail tail="
|
|
415
|
-
<auro-tail tail="
|
|
388
|
+
<auro-tail tail="AS"></auro-tail>
|
|
389
|
+
<auro-tail tail="HA"></auro-tail>
|
|
416
390
|
</auro-tail-group>
|
|
417
391
|
<auro-tail-group layout="horizontal" size="lg">
|
|
418
|
-
<auro-tail tail="
|
|
419
|
-
<auro-tail tail="
|
|
420
|
-
</auro-tail-group>
|
|
421
|
-
<!-- Demonstration: The following sizes are not supported and will be hidden -->
|
|
422
|
-
<auro-tail-group layout="horizontal" size="xl">
|
|
423
|
-
<auro-tail tail="as"></auro-tail>
|
|
424
|
-
<auro-tail tail="ha"></auro-tail>
|
|
425
|
-
</auro-tail-group>
|
|
426
|
-
<auro-tail-group layout="horizontal" size="2xl">
|
|
427
|
-
<auro-tail tail="as"></auro-tail>
|
|
428
|
-
<auro-tail tail="ha"></auro-tail>
|
|
392
|
+
<auro-tail tail="AS"></auro-tail>
|
|
393
|
+
<auro-tail tail="HA"></auro-tail>
|
|
429
394
|
</auro-tail-group>
|
|
430
395
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
431
396
|
</div>
|
|
@@ -435,55 +400,48 @@ Use `<auro-tail-group>` to display paired `<auro-tail>` components in a group la
|
|
|
435
400
|
<!-- The below code snippet is automatically added from ../apiExamples/group-horizontal.html -->
|
|
436
401
|
|
|
437
402
|
```html
|
|
438
|
-
<auro-tail-group layout="horizontal" size="xs"
|
|
439
|
-
<auro-tail tail="
|
|
440
|
-
<auro-tail tail="
|
|
403
|
+
<auro-tail-group layout="horizontal" size="xs">
|
|
404
|
+
<auro-tail tail="AS"></auro-tail>
|
|
405
|
+
<auro-tail tail="HA"></auro-tail>
|
|
441
406
|
</auro-tail-group>
|
|
442
407
|
<auro-tail-group layout="horizontal" size="sm">
|
|
443
|
-
<auro-tail tail="
|
|
444
|
-
<auro-tail tail="
|
|
408
|
+
<auro-tail tail="AS"></auro-tail>
|
|
409
|
+
<auro-tail tail="HA"></auro-tail>
|
|
445
410
|
</auro-tail-group>
|
|
446
411
|
<auro-tail-group layout="horizontal" size="md">
|
|
447
|
-
<auro-tail tail="
|
|
448
|
-
<auro-tail tail="
|
|
412
|
+
<auro-tail tail="AS"></auro-tail>
|
|
413
|
+
<auro-tail tail="HA"></auro-tail>
|
|
449
414
|
</auro-tail-group>
|
|
450
415
|
<auro-tail-group layout="horizontal" size="lg">
|
|
451
|
-
<auro-tail tail="
|
|
452
|
-
<auro-tail tail="
|
|
453
|
-
</auro-tail-group>
|
|
454
|
-
<!-- Demonstration: The following sizes are not supported and will be hidden -->
|
|
455
|
-
<auro-tail-group layout="horizontal" size="xl">
|
|
456
|
-
<auro-tail tail="as"></auro-tail>
|
|
457
|
-
<auro-tail tail="ha"></auro-tail>
|
|
458
|
-
</auro-tail-group>
|
|
459
|
-
<auro-tail-group layout="horizontal" size="2xl">
|
|
460
|
-
<auro-tail tail="as"></auro-tail>
|
|
461
|
-
<auro-tail tail="ha"></auro-tail>
|
|
416
|
+
<auro-tail tail="AS"></auro-tail>
|
|
417
|
+
<auro-tail tail="HA"></auro-tail>
|
|
462
418
|
</auro-tail-group>
|
|
463
419
|
```
|
|
464
420
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
465
421
|
</auro-accordion>
|
|
466
422
|
|
|
467
|
-
#### Horizontal with
|
|
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.
|
|
468
426
|
|
|
469
427
|
<div class="exampleWrapper">
|
|
470
428
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/group-horizontal-border.html) -->
|
|
471
429
|
<!-- The below content is automatically added from ../apiExamples/group-horizontal-border.html -->
|
|
472
|
-
<auro-tail-group layout="horizontal" size="
|
|
473
|
-
<auro-tail tail="
|
|
474
|
-
<auro-tail tail="
|
|
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>
|
|
475
433
|
</auro-tail-group>
|
|
476
|
-
<auro-tail-group layout="horizontal" size="
|
|
477
|
-
<auro-tail tail="
|
|
478
|
-
<auro-tail tail="
|
|
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>
|
|
479
437
|
</auro-tail-group>
|
|
480
|
-
<auro-tail-group layout="horizontal" size="
|
|
481
|
-
<auro-tail tail="
|
|
482
|
-
<auro-tail tail="
|
|
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>
|
|
483
441
|
</auro-tail-group>
|
|
484
|
-
<auro-tail-group layout="horizontal" size="lg" border-color
|
|
485
|
-
<auro-tail tail="
|
|
486
|
-
<auro-tail tail="
|
|
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>
|
|
487
445
|
</auro-tail-group>
|
|
488
446
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
489
447
|
</div>
|
|
@@ -493,21 +451,21 @@ Use `<auro-tail-group>` to display paired `<auro-tail>` components in a group la
|
|
|
493
451
|
<!-- The below code snippet is automatically added from ../apiExamples/group-horizontal-border.html -->
|
|
494
452
|
|
|
495
453
|
```html
|
|
496
|
-
<auro-tail-group layout="horizontal" size="
|
|
497
|
-
<auro-tail tail="
|
|
498
|
-
<auro-tail tail="
|
|
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>
|
|
499
457
|
</auro-tail-group>
|
|
500
|
-
<auro-tail-group layout="horizontal" size="
|
|
501
|
-
<auro-tail tail="
|
|
502
|
-
<auro-tail tail="
|
|
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>
|
|
503
461
|
</auro-tail-group>
|
|
504
|
-
<auro-tail-group layout="horizontal" size="
|
|
505
|
-
<auro-tail tail="
|
|
506
|
-
<auro-tail tail="
|
|
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>
|
|
507
465
|
</auro-tail-group>
|
|
508
|
-
<auro-tail-group layout="horizontal" size="lg" border-color
|
|
509
|
-
<auro-tail tail="
|
|
510
|
-
<auro-tail tail="
|
|
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>
|
|
511
469
|
</auro-tail-group>
|
|
512
470
|
```
|
|
513
471
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
@@ -521,182 +479,12 @@ The component may be restyled using the following code sample and changing the v
|
|
|
521
479
|
<!-- The below code snippet is automatically added from ../src/styles/tokens.scss -->
|
|
522
480
|
|
|
523
481
|
```scss
|
|
524
|
-
|
|
525
|
-
@use 'sass:map';
|
|
526
|
-
@use 'sass:list';
|
|
527
|
-
|
|
528
|
-
/* Constants */
|
|
529
|
-
$tail-sizes: (xs, sm, md, lg, xl, 2xl);
|
|
530
|
-
$tail-sizes-with-badge: (md, lg, xl, 2xl);
|
|
531
|
-
$tail-sizes-with-href: (md, lg, xl, 2xl);
|
|
532
|
-
$tail-group-sizes: (xs, sm, md, lg);
|
|
533
|
-
$tail-variants: (as, ha, oa);
|
|
534
|
-
|
|
535
|
-
/* Size Maps */
|
|
536
|
-
$avatar-width: (
|
|
537
|
-
'xs': 24px,
|
|
538
|
-
'sm': 32px,
|
|
539
|
-
'md': 48px,
|
|
540
|
-
'lg': 60px,
|
|
541
|
-
'xl': 96px,
|
|
542
|
-
'2xl': 134px
|
|
543
|
-
);
|
|
544
|
-
|
|
545
|
-
$tail-width: (
|
|
546
|
-
'xs': 19px,
|
|
547
|
-
'sm': 26px,
|
|
548
|
-
'md': 39px,
|
|
549
|
-
'lg': 48px,
|
|
550
|
-
'xl': 77px,
|
|
551
|
-
'2xl': 107px
|
|
552
|
-
);
|
|
553
|
-
|
|
554
|
-
/* Adjust vertical offset to visually center tail icon within circular avatar */
|
|
555
|
-
$tail-offset-y: (
|
|
556
|
-
'xs': 3px,
|
|
557
|
-
'sm': 4px,
|
|
558
|
-
'md': 6px,
|
|
559
|
-
'lg': 7px,
|
|
560
|
-
'xl': 13px,
|
|
561
|
-
'2xl': 17px
|
|
562
|
-
);
|
|
563
|
-
|
|
564
|
-
$href-label-gap: (
|
|
565
|
-
'md': 2px,
|
|
566
|
-
'lg': 4px,
|
|
567
|
-
'xl': 6px,
|
|
568
|
-
'2xl': 8px
|
|
569
|
-
);
|
|
570
|
-
|
|
571
|
-
$badge-width: (
|
|
572
|
-
'md': 11px,
|
|
573
|
-
'lg': 14px,
|
|
574
|
-
'xl': 22px,
|
|
575
|
-
'2xl': 31px
|
|
576
|
-
);
|
|
577
|
-
|
|
578
|
-
$group-diagonal-width: (
|
|
579
|
-
'xs': 42px,
|
|
580
|
-
'sm': 56px,
|
|
581
|
-
'md': 84px,
|
|
582
|
-
'lg': 105px
|
|
583
|
-
);
|
|
584
|
-
|
|
585
|
-
/* Group - Horizontal Map */
|
|
586
|
-
$group-horizontal: (
|
|
587
|
-
'lg': (border-width: 4px, overlap: -10px),
|
|
588
|
-
'md': (border-width: 4px, overlap: -6px),
|
|
589
|
-
'sm': (border-width: 3px, overlap: -2px),
|
|
590
|
-
'xs': (border-width: 3px, overlap: -2px)
|
|
591
|
-
);
|
|
592
|
-
|
|
593
|
-
/* Token Definitions */
|
|
594
|
-
:host {
|
|
595
|
-
/* Host dimensions to match container */
|
|
596
|
-
width: var(--avatar-width);
|
|
597
|
-
height: var(--avatar-width);
|
|
598
|
-
min-width: var(--avatar-width);
|
|
599
|
-
|
|
600
|
-
/* Default Values */
|
|
601
|
-
--avatar-width: var(--avatar-width-lg);
|
|
602
|
-
--avatar-gradient: var(--gradient-oa);
|
|
603
|
-
--tail-width: var(--tail-width-lg);
|
|
604
|
-
--tail-offset-y: var(--tail-offset-y-lg);
|
|
605
|
-
--href-label-gap: var(--href-label-gap-lg);
|
|
606
|
-
--badge-width: var(--badge-width-lg);
|
|
607
|
-
|
|
608
|
-
/* Border defaults */
|
|
609
|
-
--border-color-default: rgba(88, 94, 103, 1);
|
|
610
|
-
--border-color-white: #ffffff;
|
|
611
|
-
--border-width-default: 4px;
|
|
612
|
-
--border-display: none;
|
|
613
|
-
--border-padding: 0;
|
|
614
|
-
--border-radius-full: 999px;
|
|
615
|
-
|
|
616
|
-
/* Tail outline defaults */
|
|
617
|
-
--tail-outline-color: var(--border-color-default);
|
|
618
|
-
--tail-outline-width: 1px;
|
|
619
|
-
|
|
620
|
-
/* Avatar Gradients */
|
|
621
|
-
--gradient-as: linear-gradient(180deg, #6899C6 0%, #CFE0EF 100%);
|
|
622
|
-
--gradient-ha: linear-gradient(181deg, #CCB7ED -6.38%, #F9C2E7 99.46%);
|
|
623
|
-
--gradient-oa: linear-gradient(181deg, #C5D0D9 -6.38%, #E8F1F8 99.46%);
|
|
624
|
-
|
|
625
|
-
/* Drop Shadow */
|
|
626
|
-
--tail-drop-shadow: drop-shadow(0 3px 3px rgba(0,0,0,.24)) drop-shadow(0 6px 14px rgba(0,0,0,.24));
|
|
627
|
-
|
|
628
|
-
/* Tail default z-index */
|
|
629
|
-
--z-index-border: 1;
|
|
630
|
-
--z-index-badge: 2;
|
|
631
|
-
|
|
632
|
-
/* Group z-index */
|
|
633
|
-
--z-index-group-back: 1;
|
|
634
|
-
--z-index-group-front: 2;
|
|
635
|
-
|
|
636
|
-
/* Badge transform defaults */
|
|
637
|
-
--badge-translate-x: 0;
|
|
638
|
-
--badge-translate-y: 0;
|
|
639
|
-
|
|
640
|
-
/* Generate Tail size-based tokens */
|
|
641
|
-
@each $property, $map in (
|
|
642
|
-
'avatar-width': $avatar-width,
|
|
643
|
-
'tail-width': $tail-width,
|
|
644
|
-
'tail-offset-y': $tail-offset-y,
|
|
645
|
-
'href-label-gap': $href-label-gap,
|
|
646
|
-
'badge-width': $badge-width
|
|
647
|
-
) {
|
|
648
|
-
@each $tailSize, $value in $map {
|
|
649
|
-
--#{$property}-#{$tailSize}: #{$value};
|
|
650
|
-
}
|
|
651
|
-
}
|
|
652
|
-
|
|
653
|
-
/* Generate Group - Diagonal tokens */
|
|
654
|
-
@each $groupSize, $value in $group-diagonal-width {
|
|
655
|
-
--group-diagonal-width-#{$groupSize}: #{$value};
|
|
656
|
-
}
|
|
657
|
-
|
|
658
|
-
/* Generate Group - Horizontal tokens */
|
|
659
|
-
@each $size in $tail-group-sizes {
|
|
660
|
-
--group-horizontal-border-width-#{$size}: #{map.get(map.get($group-horizontal, $size), border-width)};
|
|
661
|
-
--group-horizontal-overlap-#{$size}: #{map.get(map.get($group-horizontal, $size), overlap)};
|
|
662
|
-
}
|
|
663
|
-
}
|
|
482
|
+
/* Public API Tokens - Consumer Customizable */
|
|
664
483
|
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
:
|
|
668
|
-
|
|
669
|
-
--tail-width: var(--tail-width-#{$size});
|
|
670
|
-
--tail-offset-y: var(--tail-offset-y-#{$size});
|
|
671
|
-
|
|
672
|
-
@if list.index($tail-sizes-with-badge, $size) {
|
|
673
|
-
--badge-width: var(--badge-width-#{$size});
|
|
674
|
-
}
|
|
675
|
-
|
|
676
|
-
@if list.index($tail-sizes-with-href, $size) {
|
|
677
|
-
--href-label-gap: var(--href-label-gap-#{$size});
|
|
678
|
-
}
|
|
679
|
-
|
|
680
|
-
/* Badge transform overrides */
|
|
681
|
-
@if $size == 'md' {
|
|
682
|
-
--badge-translate-x: 2px;
|
|
683
|
-
--badge-translate-y: -7px;
|
|
684
|
-
}
|
|
685
|
-
|
|
686
|
-
@if $size == 'lg' {
|
|
687
|
-
--badge-translate-x: 2px;
|
|
688
|
-
--badge-translate-y: -4px;
|
|
689
|
-
}
|
|
690
|
-
}
|
|
691
|
-
}
|
|
692
|
-
|
|
693
|
-
/* Apply gradients to variants */
|
|
694
|
-
/* Support lowercase and uppercase attribute values */
|
|
695
|
-
@each $variant in $tail-variants {
|
|
696
|
-
:host([tail="#{$variant}"]),
|
|
697
|
-
:host([tail="#{string.to-upper-case($variant)}"]) {
|
|
698
|
-
--avatar-gradient: var(--gradient-#{$variant});
|
|
699
|
-
}
|
|
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);
|
|
700
488
|
}
|
|
701
489
|
```
|
|
702
490
|
<!-- AURO-GENERATED-CONTENT:END -->
|