@aurodesignsystem-dev/auro-icon 0.0.0-pr224.1 → 0.0.0-pr228.1

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 (13) hide show
  1. package/README.md +44 -51
  2. package/demo/alaska.html +1 -1
  3. package/demo/api.html +1 -1
  4. package/demo/api.md +225 -131
  5. package/demo/api.min.js +8 -4
  6. package/demo/auro-icon.min.js +41 -14
  7. package/demo/index.html +1 -1
  8. package/demo/index.md +23 -89
  9. package/dist/{auro-icon-Q-6YPBJ5.js → auro-icon-Sh0BP5x6.js} +8 -8
  10. package/dist/index.d.ts +250 -36
  11. package/dist/index.js +1 -1
  12. package/dist/registered.js +1 -1
  13. package/package.json +17 -11
package/demo/api.md CHANGED
@@ -1,55 +1,80 @@
1
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/api.md) -->
2
- <!-- The below content is automatically added from ../docs/api.md -->
1
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
2
+ <!-- The below content is automatically added from ./../docs/api.md -->
3
3
 
4
+ # auro-alaska
5
+
6
+ The `auro-alaska` element provides users a way to use the Alaska Airline logos.
7
+
8
+ ### Properties & Attributes
9
+
10
+ | Properties | Attributes | Modifiers | Type | Default | Description |
11
+ | ---------- | ---------- | --------- | ------- | --------- | -------------------------------------------------------------------- |
12
+ | appearance | appearance | | string | `default` | Defines whether the button will be on lighter or darker backgrounds. |
13
+ | official | official | | boolean | | Set value for alaska airlines logo with official tagline. |
14
+ | onDark | onDark | | boolean | | DEPRECATED - use `appearance` instead. |
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
+ ### Slots
23
+
24
+ | Name | Description |
25
+ | --------- | ------------------------------------------------------------------- |
26
+ | (default) | Hidden from visibility, used for a11y if icon description is needed |
27
+
4
28
  # auro-icon
5
29
 
6
- auro-icon provides users a way to use the Auro Icons by simply passing in the category and name.
7
-
8
- ## Properties
9
-
10
- | Property | Attribute | Type | Default | Description |
11
- |------------------|------------------|-----------|-------------|--------------------------------------------------|
12
- | [appearance](#appearance) | `appearance` | `string` | "'default'" | Defines whether the button will be on lighter or darker backgrounds. |
13
- | [ariaHidden](#ariaHidden) | `ariaHidden` | `string` | | Set aria-hidden value. Default is `true`. Option is `false`. |
14
- | [category](#category) | `category` | `string` | | The category of the icon you are looking for. See https://auro.alaskaair.com/icons/ways-to-use. |
15
- | [customColor](#customColor) | `customColor` | `boolean` | | Allows custom color to be set. |
16
- | [customSvg](#customSvg) | `customSvg` | `boolean` | | When true, auro-icon will render a custom SVG inside the default slot. |
17
- | [hidden](#hidden) | `hidden` | `Boolean` | | If present, the component will be hidden both visually and from screen readers |
18
- | [hiddenAudible](#hiddenAudible) | `hiddenAudible` | `Boolean` | | If present, the component will be hidden from screen readers, but seen visually |
19
- | [hiddenVisually](#hiddenVisually) | `hiddenVisually` | `Boolean` | | If present, the component will be hidden visually, but still read by screen readers |
20
- | [label](#label) | `label` | `boolean` | | Exposes content in slot as icon label. |
21
- | [name](#name) | `name` | `string` | | The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/ways-to-use. |
22
- | [onDark](#onDark) | `onDark` | `boolean` | false | DEPRECATED - use `appearance` instead. |
23
- | [variant](#variant) | `variant` | `string` | "undefined" | The style of the icon. The accepted variants are `accent1`, `disabled`, `muted`, `statusDefault`, `statusInfo`, `statusSuccess`, `statusWarning`, `statusError`, `statusInfoSubtle`, `statusSuccessSubtle`, `statusWarningSubtle`, `statusErrorSubtle`, `fareBasicEconomy`, `fareBusiness`, `fareEconomy`, `fareFirst`, `farePremiumEconomy`, `tierOneWorldEmerald`, `tierOneWorldSapphire`, `tierOneWorldRuby`. |
24
-
25
- ## Slots
26
-
27
- | Name | Description |
28
- |-------|--------------------------------------------------|
29
- | | Hidden from visibility, used for a11y if icon description is needed. |
30
- | [svg](#svg) | Used for custom SVG content. |
31
-
32
- ## CSS Shadow Parts
33
-
34
- | Part | Description |
35
- |---------|--------------------------------------------------|
36
- | [label](#label) | Used for customizing the style of the icon label. |
37
- <!-- AURO-GENERATED-CONTENT:END -->
30
+ The `auro-icon` element provides users a way to use the Alaska Airlines icon library.
38
31
 
39
- ## API Examples
32
+ ### Properties & Attributes
33
+
34
+ | Properties | Attributes | Modifiers | Type | Default | Description |
35
+ | ----------- | ----------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------- |
36
+ | appearance | appearance | | string | `default` | Defines whether the button will be on lighter or darker backgrounds. |
37
+ | ariaHidden | ariaHidden | | `true` \| `false` | `true` | Set aria-hidden value. Default is `true`. Option is `false`. |
38
+ | category | category | | string | | The category of the icon you are looking for. See https://auro.alaskaair.com/icons/ways-to-use. |
39
+ | customColor | customColor | | boolean | | Allows custom color to be set. |
40
+ | customSvg | customSvg | | boolean | | When true, auro-icon will render a custom SVG inside the default slot. |
41
+ | label | label | | boolean | | Exposes content in slot as icon label. |
42
+ | name | name | | string | | The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/ways-to-use. |
43
+ | onDark | onDark | | boolean | | DEPRECATED - use `appearance` instead. |
44
+ | variant | variant | | `accent1` \| `disabled` \| `muted` \| `statusDefault` \| `statusInfo` \| `statusSuccess` \| `statusWarning` \| `statusError` \| `statusInfoSubtle` \| `statusSuccessSubtle` \| `statusWarningSubtle` \| `statusErrorSubtle` \| `fareBasicEconomy` \| `fareBusiness` \| `fareEconomy` \| `fareFirst` \| `farePremiumEconomy` \| `tierOneWorldEmerald` \| `tierOneWorldSapphire` \| `tierOneWorldRuby` | | The style of the icon. |
45
+
46
+ ### Methods
47
+
48
+ | Name | Parameters | Return | Description |
49
+ | -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
50
+ | register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
51
+
52
+ ### Slots
53
+
54
+ | Name | Description |
55
+ | --------- | -------------------------------------------------------------------- |
56
+ | (default) | Hidden from visibility, used for a11y if icon description is needed. |
57
+ | svg | Used for custom SVG content. |
58
+
59
+ ### CSS Shadow Parts
60
+
61
+ | Name | Description |
62
+ | ----- | ------------------------------------------------- |
63
+ | label | Used for customizing the style of the icon label. |
64
+ <!-- AURO-GENERATED-CONTENT:END -->
40
65
 
41
- ### Basic
66
+ ## Basic
42
67
 
43
68
  <div class="exampleWrapper">
44
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
45
- <!-- The below content is automatically added from ../apiExamples/basic.html -->
69
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
70
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
46
71
  <auro-icon category="interface" name="pin-trip"></auro-icon>
47
72
  <!-- AURO-GENERATED-CONTENT:END -->
48
73
  </div>
49
74
  <auro-accordion alignRight>
50
75
  <span slot="trigger">See code</span>
51
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
52
- <!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
76
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
77
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
53
78
 
54
79
  ```html
55
80
  <auro-icon category="interface" name="pin-trip"></auro-icon>
@@ -57,13 +82,131 @@ auro-icon provides users a way to use the Auro Icons by simply passing in the ca
57
82
  <!-- AURO-GENERATED-CONTENT:END -->
58
83
  </auro-accordion>
59
84
 
60
- ### Custom SVG icons
85
+ ## Property & Attribute Examples
86
+
87
+ ### Accessibility
88
+
89
+ #### Default Component with Label (Accessibility Recommendation)
90
+
91
+ While you may place the icon alone, it is considered best practice to combine the icon with a description statement.
92
+ The `auro-icon` element easily supports this with the use of the `label` attribute.
93
+ By using the `label` attribute, content you enter into the `slot` of the element will appear next to the icon of choice.
94
+ Changing the `aria-hidden` state of the icon is NOT needed. The assistive technologies will bypass the icon and announce the label string of content.
95
+
96
+ In situations where the icon is to be listed with a descriptive label, simply use the `label` attribute and the text in the `slot` will appear next to the icon.
97
+
98
+ <div class="exampleWrapper">
99
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/access-rec.html) -->
100
+ <!-- The below content is automatically added from ../apiExamples/access-rec.html -->
101
+ <auro-icon label category="in-flight" name="wifi">Your flight is enabled with super fast Wi-Fi</auro-icon>
102
+ <!-- AURO-GENERATED-CONTENT:END -->
103
+ </div>
104
+ <auro-accordion alignRight>
105
+ <span slot="trigger">See code</span>
106
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/access-rec.html) -->
107
+ <!-- The below code snippet is automatically added from ../apiExamples/access-rec.html -->
108
+
109
+ ```html
110
+ <auro-icon label category="in-flight" name="wifi">Your flight is enabled with super fast Wi-Fi</auro-icon>
111
+ ```
112
+ <!-- AURO-GENERATED-CONTENT:END -->
113
+ </auro-accordion>
114
+
115
+ #### Aria Hidden
116
+
117
+ By default `aria-hidden` on the SVG inside the `auro-icon` element is set to `true`. Using the `ariaHidden` attribute on `auro-icon` you can set that value to `false`. This will allow the screen reader to announce the content from the SVG's `title` element.
118
+
119
+ <div class="exampleWrapper">
120
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/aria-hidden.html) -->
121
+ <!-- The below content is automatically added from ../apiExamples/aria-hidden.html -->
122
+ <auro-icon category="interface" name="pin-trip" ariaHidden="false"></auro-icon>
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/aria-hidden.html) -->
128
+ <!-- The below code snippet is automatically added from ../apiExamples/aria-hidden.html -->
129
+
130
+ ```html
131
+ <auro-icon category="interface" name="pin-trip" ariaHidden="false"></auro-icon>
132
+ ```
133
+ <!-- AURO-GENERATED-CONTENT:END -->
134
+ </auro-accordion>
135
+
136
+ #### Alter the Accessibility Description
137
+
138
+ If the description you intend to be read back is different than the content in the default `title` element of the SVG, leave the `aria-hidden="true"` default on the SVG and enter the custom description into the `auro-icon` slot.
139
+
140
+ <div class="exampleWrapper">
141
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/access-descr.html) -->
142
+ <!-- The below content is automatically added from ../apiExamples/access-descr.html -->
143
+ <auro-icon category="interface" name="pin-trip">Your trip starts here!</auro-icon>
144
+ <!-- AURO-GENERATED-CONTENT:END -->
145
+ </div>
146
+ <auro-accordion alignRight>
147
+ <span slot="trigger">See code</span>
148
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/access-descr.html) -->
149
+ <!-- The below code snippet is automatically added from ../apiExamples/access-descr.html -->
150
+
151
+ ```html
152
+ <auro-icon category="interface" name="pin-trip">Your trip starts here!</auro-icon>
153
+ ```
154
+ <!-- AURO-GENERATED-CONTENT:END -->
155
+ </auro-accordion>
156
+
157
+ ### Custom Color
158
+
159
+ The `auro-icon` by default apply the `primary` selector for color application. This can be over written using the defined API listed above. Custom colors are also allowed when using the `customColor` attribute and a parent element with a color setting.
160
+
161
+ <div class="exampleWrapper">
162
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom-color.html) -->
163
+ <!-- The below content is automatically added from ../apiExamples/custom-color.html -->
164
+ <auro-icon category="interface" name="pin-trip" ></auro-icon> default inherits color<br/>
165
+ <auro-icon category="interface" name="pin-trip" customColor></auro-icon> applies primary color selector<br/>
166
+ <auro-icon category="interface" name="pin-trip" customColor style="color: orange;"></auro-icon> applies the color from the style attribute
167
+ <!-- AURO-GENERATED-CONTENT:END -->
168
+ </div>
169
+ <auro-accordion alignRight>
170
+ <span slot="trigger">See code</span>
171
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom-color.html) -->
172
+ <!-- The below code snippet is automatically added from ../apiExamples/custom-color.html -->
173
+
174
+ ```html
175
+ <auro-icon category="interface" name="pin-trip" ></auro-icon> default inherits color<br/>
176
+ <auro-icon category="interface" name="pin-trip" customColor></auro-icon> applies primary color selector<br/>
177
+ <auro-icon category="interface" name="pin-trip" customColor style="color: orange;"></auro-icon> applies the color from the style attribute
178
+ ```
179
+ <!-- AURO-GENERATED-CONTENT:END -->
180
+ </auro-accordion>
181
+
182
+ ### Custom Size
183
+
184
+ Auro Icon supports setting a custom size using the `--ds-auro-icon-size` token. The icons height and width will be set to the token value, preserving the square shape that is standard for all icons.
185
+
186
+ <div class="exampleWrapper">
187
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom-size.html) -->
188
+ <!-- The below content is automatically added from ../apiExamples/custom-size.html -->
189
+ <auro-icon style="--ds-auro-icon-size: 30rem;" category="interface" name="pin-trip" variant="statusSuccess"></auro-icon>
190
+ <!-- AURO-GENERATED-CONTENT:END -->
191
+ </div>
192
+ <auro-accordion alignRight>
193
+ <span slot="trigger">See code</span>
194
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom-size.html) -->
195
+ <!-- The below code snippet is automatically added from ../apiExamples/custom-size.html -->
196
+
197
+ ```html
198
+ <auro-icon style="--ds-auro-icon-size: 30rem;" category="interface" name="pin-trip" variant="statusSuccess"></auro-icon>
199
+ ```
200
+ <!-- AURO-GENERATED-CONTENT:END -->
201
+ </auro-accordion>
202
+
203
+ ### Custom SVG
61
204
 
62
205
  Using the `customSvg` attribute, the component may render any icon svg content required. The `auro-icon` component will continue to render with all the variant and theme styles applied.
63
206
 
64
207
  <div class="exampleWrapper">
65
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/customSvg.html) -->
66
- <!-- The below content is automatically added from ../apiExamples/customSvg.html -->
208
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom-svg.html) -->
209
+ <!-- The below content is automatically added from ../apiExamples/custom-svg.html -->
67
210
  <auro-icon customSvg>
68
211
  <svg slot="svg" aria-labelledby="pin-trip-filled__desc" class="ico_squareLarge" role="img" viewBox="0 0 24 24" part="svg" style="min-width: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); height: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); fill: currentcolor;"><title></title><desc id="pin-trip-filled__desc">drop pin with circles.</desc><path d="M10.045 3.345a.75.75 0 0 1 .785-.714l.05.003a.75.75 0 0 1-.082 1.498l-.04-.002a.75.75 0 0 1-.713-.785m-1.217.22a.75.75 0 0 1-.357 1l-.034.016a.75.75 0 0 1-.655-1.35l.047-.022a.75.75 0 0 1 .999.357m3.949.186a.75.75 0 0 1 1.012-.318l.045.023a.75.75 0 0 1-.703 1.326l-.035-.019a.75.75 0 0 1-.319-1.012M6.508 5.057a.75.75 0 0 1 .2 1.041l-.01.017a.75.75 0 1 1-1.246-.836l.014-.022a.75.75 0 0 1 1.042-.2m8.577.22a.75.75 0 0 1 1.038.218l.028.044a.75.75 0 0 1-1.264.808l-.02-.032a.75.75 0 0 1 .218-1.038m6.02 7.014c0-2.789-2.44-4.88-4.88-4.88s-4.881 2.091-4.881 4.88q0 2.559 4.11 8.496l.199.285.055.068a.697.697 0 0 0 1.088-.068q4.31-6.16 4.309-8.781m-6.275 0a1.394 1.394 0 1 1 2.789 0 1.394 1.394 0 0 1-2.789 0M4.635 10.704a1.74 1.74 0 1 0 0-3.48 1.74 1.74 0 0 0 0 3.48"></path></svg>
69
212
  </auro-icon>
@@ -77,8 +220,8 @@ Using the `customSvg` attribute, the component may render any icon svg content r
77
220
  </div>
78
221
  <auro-accordion alignRight>
79
222
  <span slot="trigger">See code</span>
80
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/customSvg.html) -->
81
- <!-- The below code snippet is automatically added from ../apiExamples/customSvg.html -->
223
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom-svg.html) -->
224
+ <!-- The below code snippet is automatically added from ../apiExamples/custom-svg.html -->
82
225
 
83
226
  ```html
84
227
  <auro-icon customSvg>
@@ -94,40 +237,15 @@ Using the `customSvg` attribute, the component may render any icon svg content r
94
237
  <!-- AURO-GENERATED-CONTENT:END -->
95
238
  </auro-accordion>
96
239
 
97
- ### Default component with label (accessibility recommendation) <a name="label"></a>
98
- While you may place the icon alone, it is considered best practice to combine the icon with a description statement.
99
- The `auro-icon` element easily supports this with the use of the `label` attribute.
100
- By using the `label` attribute, content you enter into the `slot` of the element will appear next to the icon of choice.
101
- Changing the `aria-hidden` state of the icon is NOT needed. The assistive technologies will bypass the icon and announce the label string of content.
102
-
103
- In situations where the icon is to be listed with a descriptive label, simply use the `label` attribute and the text in the `slot` will appear next to the icon.
104
-
105
- <div class="exampleWrapper">
106
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/accessRec.html) -->
107
- <!-- The below content is automatically added from ../apiExamples/accessRec.html -->
108
- <auro-icon label category="in-flight" name="wifi">Your flight is enabled with super fast Wi-Fi</auro-icon>
109
- <!-- AURO-GENERATED-CONTENT:END -->
110
- </div>
111
- <auro-accordion alignRight>
112
- <span slot="trigger">See code</span>
113
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/accessRec.html) -->
114
- <!-- The below code snippet is automatically added from ../apiExamples/accessRec.html -->
115
-
116
- ```html
117
- <auro-icon label category="in-flight" name="wifi">Your flight is enabled with super fast Wi-Fi</auro-icon>
118
- ```
119
- <!-- AURO-GENERATED-CONTENT:END -->
120
- </auro-accordion>
121
-
122
- ### label with typography classes
240
+ ### Label with typography classes
123
241
 
124
242
  When using the `label` attribute, you may apply typography classes to the `slot` element to match your design system needs.
125
243
 
126
244
  Below is an example of mixing and matching typography styles with the `auro-icon` component.
127
245
 
128
246
  <div class="exampleWrapper">
129
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/mixMatchTypography.html) -->
130
- <!-- The below content is automatically added from ../apiExamples/mixMatchTypography.html -->
247
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/typography.html) -->
248
+ <!-- The below content is automatically added from ../apiExamples/typography.html -->
131
249
  <auro-icon category="interface" name="chevron-right" label>Icon with body-default slot (Recommended)</span></auro-icon>
132
250
  <div class="body-default"><auro-icon category="interface" name="chevron-right"></auro-icon>Icon inside of body-default container</div>
133
251
  <auro-icon category="interface" name="chevron-right"></auro-icon><span class="body-default">Icon next to body-default text</span>
@@ -149,8 +267,8 @@ Below is an example of mixing and matching typography styles with the `auro-icon
149
267
  </div>
150
268
  <auro-accordion alignRight>
151
269
  <span slot="trigger">See code</span>
152
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/mixMatchTypography.html) -->
153
- <!-- The below code snippet is automatically added from ../apiExamples/mixMatchTypography.html -->
270
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/typography.html) -->
271
+ <!-- The below code snippet is automatically added from ../apiExamples/typography.html -->
154
272
 
155
273
  ```html
156
274
  <auro-icon category="interface" name="chevron-right" label>Icon with body-default slot (Recommended)</span></auro-icon>
@@ -174,13 +292,15 @@ Below is an example of mixing and matching typography styles with the `auro-icon
174
292
  <!-- AURO-GENERATED-CONTENT:END -->
175
293
  </auro-accordion>
176
294
 
177
- ### Icons illustrating visual state
295
+ ### Variants
296
+
297
+ #### Icons illustrating Visual State
178
298
 
179
- Mono-color icons support the following attributes to illustrate visual state.
299
+ Mono-color icons support the following `variant` types to illustrate visual state.
180
300
 
181
301
  <div class="exampleWrapper">
182
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/visualState.html) -->
183
- <!-- The below content is automatically added from ../apiExamples/visualState.html -->
302
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/visual-state.html) -->
303
+ <!-- The below content is automatically added from ../apiExamples/visual-state.html -->
184
304
  <auro-icon category="interface" name="pin-trip"></auro-icon> default<br />
185
305
  <auro-icon category="interface" name="pin-trip" variant="disabled"></auro-icon> disabled<br />
186
306
  <auro-icon category="interface" name="pin-trip" variant="muted"></auro-icon> muted<br />
@@ -206,8 +326,8 @@ Mono-color icons support the following attributes to illustrate visual state.
206
326
  </div>
207
327
  <auro-accordion alignRight>
208
328
  <span slot="trigger">See code</span>
209
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/visualState.html) -->
210
- <!-- The below code snippet is automatically added from ../apiExamples/visualState.html -->
329
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/visual-state.html) -->
330
+ <!-- The below code snippet is automatically added from ../apiExamples/visual-state.html -->
211
331
 
212
332
  ```html
213
333
  <auro-icon category="interface" name="pin-trip"></auro-icon> default<br />
@@ -235,13 +355,13 @@ Mono-color icons support the following attributes to illustrate visual state.
235
355
  <!-- AURO-GENERATED-CONTENT:END -->
236
356
  </auro-accordion>
237
357
 
238
- #### Visual state on Dark background
358
+ #### Visual State on Dark background
239
359
 
240
360
  All compatible with `appearance="inverse"` attribute.
241
361
 
242
362
  <div class="exampleWrapper--ondark">
243
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/inverseAppearance.html) -->
244
- <!-- The below content is automatically added from ../apiExamples/inverseAppearance.html -->
363
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/appearance-inverse.html) -->
364
+ <!-- The below content is automatically added from ../apiExamples/appearance-inverse.html -->
245
365
  <span style="color: var(--ds-basic-color-texticon-inverse)">
246
366
  <auro-icon category="interface" name="pin-trip" appearance="inverse"></auro-icon> default<br />
247
367
  <auro-icon category="interface" name="pin-trip" appearance="inverse" variant="disabled"></auro-icon> disabled<br />
@@ -252,8 +372,8 @@ All compatible with `appearance="inverse"` attribute.
252
372
  </div>
253
373
  <auro-accordion alignRight>
254
374
  <span slot="trigger">See code</span>
255
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/inverseAppearance.html) -->
256
- <!-- The below code snippet is automatically added from ../apiExamples/inverseAppearance.html -->
375
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/appearance-inverse.html) -->
376
+ <!-- The below code snippet is automatically added from ../apiExamples/appearance-inverse.html -->
257
377
 
258
378
  ```html
259
379
  <span style="color: var(--ds-basic-color-texticon-inverse)">
@@ -266,34 +386,29 @@ All compatible with `appearance="inverse"` attribute.
266
386
  <!-- AURO-GENERATED-CONTENT:END -->
267
387
  </auro-accordion>
268
388
 
269
- ### Custom Color
389
+ ## Method Examples
270
390
 
271
- The `auro-icon` by default apply the `primary` selector for color application. This can be over written using the defined API listed above. Custom colors are also allowed when using the `customColor` attribute and a parent element with a color setting.
391
+ <!-- Add all method examples here, remove section if none exist -->
392
+
393
+ ## Event Examples
272
394
 
273
- <div class="exampleWrapper">
274
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/customColor.html) -->
275
- <!-- The below content is automatically added from ../apiExamples/customColor.html -->
276
- <auro-icon category="interface" name="pin-trip" ></auro-icon> default inherits color<br/>
277
- <auro-icon category="interface" name="pin-trip" customColor></auro-icon> applies primary color selector<br/>
278
- <auro-icon category="interface" name="pin-trip" customColor style="color: orange;"></auro-icon> applies the color from the style attribute
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/customColor.html) -->
284
- <!-- The below code snippet is automatically added from ../apiExamples/customColor.html -->
395
+ <!-- Add all event examples here, remove section if none exist -->
285
396
 
286
- ```html
287
- <auro-icon category="interface" name="pin-trip" ></auro-icon> default inherits color<br/>
288
- <auro-icon category="interface" name="pin-trip" customColor></auro-icon> applies primary color selector<br/>
289
- <auro-icon category="interface" name="pin-trip" customColor style="color: orange;"></auro-icon> applies the color from the style attribute
290
- ```
291
- <!-- AURO-GENERATED-CONTENT:END -->
292
- </auro-accordion>
397
+ ## Slot Examples
398
+
399
+ <!-- Add all slot examples here, remove section if none exist -->
293
400
 
294
- ## Theme Support
401
+ ## CSS Shadow Part Examples
295
402
 
296
- The component may be restyled using the following code sample and changing the values of the following token(s).
403
+ <!-- Add all CSS Shadow Part examples here, remove section if none exist -->
404
+
405
+ ## Common Usage Patterns & Functional Examples
406
+
407
+ <!-- Add any common usage patterns or functional examples here, remove section if none exist -->
408
+
409
+ ## Restyle Component with CSS Variables
410
+
411
+ The component may be restyled by changing the values of the following token(s).
297
412
 
298
413
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
299
414
  <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
@@ -311,25 +426,4 @@ The component may be restyled using the following code sample and changing the v
311
426
  --ds-auro-icon-size: var(--ds-size-300, #{vac.$ds-size-300});
312
427
  }
313
428
  ```
314
- <!-- AURO-GENERATED-CONTENT:END -->
315
-
316
- ### Custom Size
317
-
318
- Auro Icon supports setting a custom size using the `--ds-auro-icon-size` token. The icons height and width will be set to the token value, preserving the square shape that is standard for all icons.
319
-
320
- <div class="exampleWrapper">
321
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/customSize.html) -->
322
- <!-- The below content is automatically added from ../apiExamples/customSize.html -->
323
- <auro-icon style="--ds-auro-icon-size: 30rem;" category="interface" name="pin-trip" variant="statusSuccess"></auro-icon>
324
- <!-- AURO-GENERATED-CONTENT:END -->
325
- </div>
326
- <auro-accordion alignRight>
327
- <span slot="trigger">See code</span>
328
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/customSize.html) -->
329
- <!-- The below code snippet is automatically added from ../apiExamples/customSize.html -->
330
-
331
- ```html
332
- <auro-icon style="--ds-auro-icon-size: 30rem;" category="interface" name="pin-trip" variant="statusSuccess"></auro-icon>
333
- ```
334
- <!-- AURO-GENERATED-CONTENT:END -->
335
- </auro-accordion>
429
+ <!-- AURO-GENERATED-CONTENT:END -->
package/demo/api.min.js CHANGED
@@ -22,9 +22,9 @@ var official400 = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=
22
22
 
23
23
  // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
24
24
  /**
25
- * auro-alaska provides users a way to use the Alaska Airline logos.
25
+ * The `auro-alaska` element provides users a way to use the Alaska Airline logos.
26
+ * @customElement auro-alaska
26
27
  *
27
- * @attr {Boolean} official - Set value for alaska airlines logo with official tagline
28
28
  * @slot - Hidden from visibility, used for a11y if icon description is needed
29
29
  */
30
30
 
@@ -33,7 +33,7 @@ class AuroAlaska extends BaseIcon {
33
33
  constructor() {
34
34
  super();
35
35
 
36
- this.privateDefaults();
36
+ this._initializeDefaults();
37
37
  }
38
38
 
39
39
  /**
@@ -41,7 +41,7 @@ class AuroAlaska extends BaseIcon {
41
41
  * @private
42
42
  * @returns {void}
43
43
  */
44
- privateDefaults() {
44
+ _initializeDefaults() {
45
45
  this.uri = "https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist";
46
46
  this.sm = 107;
47
47
  this.md = 191;
@@ -63,6 +63,10 @@ class AuroAlaska extends BaseIcon {
63
63
  type: Boolean,
64
64
  reflect: true,
65
65
  },
66
+
67
+ /**
68
+ * Set value for alaska airlines logo with official tagline.
69
+ */
66
70
  official: {
67
71
  type: Boolean,
68
72
  reflect: true,
package/demo/auro-icon.min.js CHANGED
@@ -66,6 +66,19 @@ class AuroLibraryRuntimeUtils {
66
66
 
67
67
  return elemTag === tag || elem.hasAttribute(tag);
68
68
  }
69
+
70
+ /**
71
+ * Gets the text content of a named slot.
72
+ * @returns {String}
73
+ * @private
74
+ */
75
+ getSlotText(elem, name) {
76
+ const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
77
+ const nodes = slot?.assignedNodes({ flatten: true }) || [];
78
+ const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
79
+
80
+ return text || null;
81
+ }
69
82
  }
70
83
 
71
84
  /**
@@ -185,11 +198,19 @@ var styleCss$1 = i$4`:focus:not(:focus-visible){outline:3px solid transparent}.u
185
198
  /**
186
199
  * @slot - Hidden from visibility, used for a11y if icon description is needed
187
200
  */
188
-
189
- // build the component class
190
201
  class BaseIcon extends AuroElement {
191
202
  constructor() {
192
203
  super();
204
+
205
+ this._initializeDefaults();
206
+ }
207
+
208
+ /**
209
+ * Internal defaults.
210
+ * @private
211
+ * @returns {void}
212
+ */
213
+ _initializeDefaults() {
193
214
  this.onDark = false;
194
215
  this.appearance = "default";
195
216
  }
@@ -209,7 +230,7 @@ class BaseIcon extends AuroElement {
209
230
 
210
231
  /**
211
232
  * Defines whether the button will be on lighter or darker backgrounds.
212
- * @property {'default', 'inverse'}
233
+ * @property {'default' | 'inverse'}
213
234
  * @default 'default'
214
235
  */
215
236
  appearance: {
@@ -296,6 +317,9 @@ var colorCss = i$4`:host{color:var(--ds-auro-icon-color)}:host([customColor]){co
296
317
 
297
318
 
298
319
  /**
320
+ * The `auro-icon` element provides users a way to use the Alaska Airlines icon library.
321
+ * @customElement auro-icon
322
+ *
299
323
  * @slot - Hidden from visibility, used for a11y if icon description is needed.
300
324
  * @slot svg - Used for custom SVG content.
301
325
  * @csspart label - Used for customizing the style of the icon label.
@@ -304,8 +328,7 @@ class AuroIcon extends BaseIcon {
304
328
  constructor() {
305
329
  super();
306
330
 
307
- this.variant = undefined;
308
- this.privateDefaults();
331
+ this._initializeDefaults();
309
332
  }
310
333
 
311
334
  /**
@@ -313,7 +336,8 @@ class AuroIcon extends BaseIcon {
313
336
  * @private
314
337
  * @returns {void}
315
338
  */
316
- privateDefaults() {
339
+ _initializeDefaults() {
340
+ this.variant = undefined;
317
341
  this.uri = "https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist";
318
342
  this.runtimeUtils = new AuroLibraryRuntimeUtils();
319
343
  }
@@ -325,10 +349,12 @@ class AuroIcon extends BaseIcon {
325
349
 
326
350
  /**
327
351
  * Set aria-hidden value. Default is `true`. Option is `false`.
352
+ * @type {'true' | 'false'}
353
+ * @default 'true'
328
354
  */
329
355
  ariaHidden: {
330
356
  type: String,
331
- reflect: true,
357
+ reflect: true
332
358
  },
333
359
 
334
360
  /**
@@ -336,7 +362,7 @@ class AuroIcon extends BaseIcon {
336
362
  */
337
363
  category: {
338
364
  type: String,
339
- reflect: true,
365
+ reflect: true
340
366
  },
341
367
 
342
368
  /**
@@ -344,14 +370,14 @@ class AuroIcon extends BaseIcon {
344
370
  */
345
371
  customColor: {
346
372
  type: Boolean,
347
- reflect: true,
373
+ reflect: true
348
374
  },
349
375
 
350
376
  /**
351
377
  * When true, auro-icon will render a custom SVG inside the default slot.
352
378
  */
353
379
  customSvg: {
354
- type: Boolean,
380
+ type: Boolean
355
381
  },
356
382
 
357
383
  /**
@@ -359,7 +385,7 @@ class AuroIcon extends BaseIcon {
359
385
  */
360
386
  label: {
361
387
  type: Boolean,
362
- reflect: true,
388
+ reflect: true
363
389
  },
364
390
 
365
391
  /**
@@ -367,15 +393,16 @@ class AuroIcon extends BaseIcon {
367
393
  */
368
394
  name: {
369
395
  type: String,
370
- reflect: true,
396
+ reflect: true
371
397
  },
372
398
 
373
399
  /**
374
- * The style of the icon. The accepted variants are `accent1`, `disabled`, `muted`, `statusDefault`, `statusInfo`, `statusSuccess`, `statusWarning`, `statusError`, `statusInfoSubtle`, `statusSuccessSubtle`, `statusWarningSubtle`, `statusErrorSubtle`, `fareBasicEconomy`, `fareBusiness`, `fareEconomy`, `fareFirst`, `farePremiumEconomy`, `tierOneWorldEmerald`, `tierOneWorldSapphire`, `tierOneWorldRuby`.
400
+ * The style of the icon.
401
+ * @type {'accent1' | 'disabled' | 'muted' | 'statusDefault' | 'statusInfo' | 'statusSuccess' | 'statusWarning' | 'statusError' | 'statusInfoSubtle' | 'statusSuccessSubtle' | 'statusWarningSubtle' | 'statusErrorSubtle' | 'fareBasicEconomy' | 'fareBusiness' | 'fareEconomy' | 'fareFirst' | 'farePremiumEconomy' | 'tierOneWorldEmerald' | 'tierOneWorldSapphire' | 'tierOneWorldRuby'}
375
402
  */
376
403
  variant: {
377
404
  type: String,
378
- reflect: true,
405
+ reflect: true
379
406
  },
380
407
  };
381
408
  }