@aurodesignsystem-dev/auro-hyperlink 0.0.0-pr322.1 → 0.0.0-pr328.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/README.md +12 -3
  2. package/custom-elements.json +64 -1799
  3. package/demo/a11y.html +3 -3
  4. package/demo/a11y.md +11 -9
  5. package/demo/api.html +2 -2
  6. package/demo/api.js +2 -1
  7. package/demo/api.md +311 -168
  8. package/demo/api.min.js +14 -1
  9. package/demo/auro-hyperlink.min.js +64 -52
  10. package/demo/index.html +2 -2
  11. package/demo/index.js +0 -2
  12. package/demo/index.md +23 -259
  13. package/demo/index.min.js +0 -31
  14. package/dist/{auro-hyperlink-isNf5eLk.js → auro-hyperlink-SowfvvPT.js} +4 -4
  15. package/dist/index.d.ts +227 -124
  16. package/dist/index.js +1 -1
  17. package/dist/registered.js +1 -1
  18. package/package.json +9 -5
package/demo/api.md CHANGED
@@ -8,31 +8,30 @@
8
8
 
9
9
  # auro-hyperlink
10
10
 
11
- `<auro-hyperlink>` is a component that wraps an HTML `<a>` element, providing additional styling and behavior.
11
+ The `auro-hyperlink` element wraps an HTML `<a>` element, providing additional styling and behavior.
12
12
 
13
13
  ### Properties & Attributes
14
14
 
15
- | Properties | Attributes | Modifiers | Type | Default | Description |
16
- | -------------- | -------------- | --------- | ------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
17
- | appearance | appearance | | string | "default" | Defines whether the component will be on lighter or darker backgrounds. |
18
- | download | download | | boolean | false | If true, the linked resource will be downloaded when the hyperlink is clicked. |
19
- | fluid | fluid | | boolean | | If true and `type="cta"`, the hyperlink will have a fluid-width UI. |
20
- | href | href | | string | | Defines the URL of the linked page. |
21
- | layout | layout | | string | {'default'} | Defines the language of an element. |
22
- | ondark | ondark | | boolean | false | DEPRECATED - use `appearance` instead. |
23
- | referrerpolicy | referrerpolicy | | boolean | | If true, sets `strict-origin-when-cross-origin` to control the referrer information sent with requests. |
24
- | rel | rel | | string | | Defines the relationship between the current document and the linked document. |
25
- | role | | | String | | Defines ARIA roles; currently supports `button` for extended experiences. |
26
- | safeUri | | readonly | string | | Returns a safe URI based on the provided `href`.<br>If `href` is truthy, it generates a safe URL using the `safeUrl` function.<br>Otherwise, it returns an empty string. |
27
- | target | target | | string | | Defines where to open the linked document. |
28
- | type | type | | string | | Defines the type of hyperlink; accepts `nav` or `cta`. |
29
- | variant | variant | | string | "primary" | Sets button variant option. |
15
+ | Properties | Attributes | Modifiers | Type | Default | Description |
16
+ | -------------- | -------------- | --------- | ----------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
17
+ | appearance | appearance | | string | `default` | Defines whether the component will be on lighter or darker backgrounds. |
18
+ | download | download | | boolean | | If true, the linked resource will be downloaded when the hyperlink is clicked. |
19
+ | fluid | fluid | | boolean | | If true and `type="cta"`, the hyperlink will have a fluid-width UI. |
20
+ | href | href | | string | | Defines the URL of the linked page. |
21
+ | ondark | ondark | | boolean | | DEPRECATED - use `appearance="inverse"` instead. |
22
+ | referrerpolicy | referrerpolicy | | boolean | | If true, sets `strict-origin-when-cross-origin` to control the referrer information sent with requests. |
23
+ | rel | rel | | string | | Defines the relationship between the current document and the linked document. Visit [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel) for more information. |
24
+ | role | | | string | | Defines ARIA roles; currently supports `button` for extended experiences. |
25
+ | safeUri | | readonly | string | | Returns a safe URI based on the provided `href`.<br>If `href` is truthy, it generates a safe URL using the `safeUrl` function.<br>Otherwise, it returns an empty string. |
26
+ | target | target | | string | | Defines where to open the linked document. |
27
+ | type | type | | `nav` \| `cta` | | Defines the type of hyperlink. |
28
+ | variant | variant | | `primary` \| `secondary` \| `tertiary` \| `ghost` \| `flat` | `primary` | Sets button variant option when using `type="cta"`. |
30
29
 
31
30
  ### Methods
32
31
 
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. |
32
+ | Name | Parameters | Return | Description |
33
+ | -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
34
+ | register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
36
35
 
37
36
  ### CSS Shadow Parts
38
37
 
@@ -42,9 +41,7 @@
42
41
  | targetIcon | Allows styling to be applied to the icon that appears next to the hyperlink. |
43
42
  <!-- AURO-GENERATED-CONTENT:END -->
44
43
 
45
- ## API Examples
46
-
47
- ### Basic
44
+ ## Basic
48
45
 
49
46
  <div class="exampleWrapper">
50
47
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
@@ -53,13 +50,6 @@
53
50
  Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
54
51
  <!-- AURO-GENERATED-CONTENT:END -->
55
52
  </div>
56
- <div class="exampleWrapper--ondark">
57
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-inverseAppearance.html) -->
58
- <!-- The below content is automatically added from ./../apiExamples/basic-inverseAppearance.html -->
59
- <auro-hyperlink appearance="inverse">No href supplied</auro-hyperlink><br>
60
- Welcome to <auro-hyperlink appearance="inverse" href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
61
- <!-- AURO-GENERATED-CONTENT:END -->
62
- </div>
63
53
  <auro-accordion alignRight>
64
54
  <span slot="trigger">See code</span>
65
55
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
@@ -69,9 +59,26 @@
69
59
  <auro-hyperlink>No href supplied</auro-hyperlink><br>
70
60
  Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
71
61
  ```
72
- <!-- AURO-GENERATED-CONTENT:END -->
73
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-inverseAppearance.html) -->
74
- <!-- The below code snippet is automatically added from ./../apiExamples/basic-inverseAppearance.html -->
62
+ <!-- AURO-GENERATED-CONTENT:END -->
63
+ </auro-accordion>
64
+
65
+ ## Property & Attribute Examples
66
+
67
+ ### Appearance
68
+
69
+ Difference appearance options through the `appearance` attribute. This example shows the `inverse` appearance.
70
+
71
+ <div class="exampleWrapper--ondark">
72
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
73
+ <!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
74
+ <auro-hyperlink appearance="inverse">No href supplied</auro-hyperlink><br>
75
+ Welcome to <auro-hyperlink appearance="inverse" href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
76
+ <!-- AURO-GENERATED-CONTENT:END -->
77
+ </div>
78
+ <auro-accordion alignRight>
79
+ <span slot="trigger">See code</span>
80
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse.html) -->
81
+ <!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse.html -->
75
82
 
76
83
  ```html
77
84
  <auro-hyperlink appearance="inverse">No href supplied</auro-hyperlink><br>
@@ -80,9 +87,108 @@ Welcome to <auro-hyperlink appearance="inverse" href="https://www.alaskaair.com"
80
87
  <!-- AURO-GENERATED-CONTENT:END -->
81
88
  </auro-accordion>
82
89
 
83
- ## External Links
90
+ ### Relative vs Absolute URLs and HTTPS Enforcement
91
+
92
+ By default the `auro-hyperlink` will assume that the url passed is an absolute URL to `www.alaskaair.com` with the `https` protocol.
93
+
94
+ <div class="exampleWrapper">
95
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/relative-vs-absolute.html) -->
96
+ <!-- The below content is automatically added from ./../apiExamples/relative-vs-absolute.html -->
97
+ Relative href converted to absolute URL to <auro-hyperlink href="/components/hyperlink/api">Hyperlink API page</auro-hyperlink>.
98
+ <!-- AURO-GENERATED-CONTENT:END -->
99
+ </div>
100
+ <auro-accordion alignRight>
101
+ <span slot="trigger">See code</span>
102
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/relative-vs-absolute_code.html) -->
103
+ <!-- The below code snippet is automatically added from ./../apiExamples/relative-vs-absolute_code.html -->
104
+
105
+ ```html
106
+ <!-- Web component example -->
107
+ Relative href converted to absolute URL to <auro-hyperlink href="/components/hyperlink/api">Hyperlink API page</auro-hyperlink>.
108
+
109
+ <!-- Output code in shadow DOM element -->
110
+ Relative href converted to absolute URL to <a class="hyperlink" href="https://www.auro.alaskaair.com/components/hyperlink/api"><slot>Hyperlink API page</slot></a>.
111
+ ```
112
+ <!-- AURO-GENERATED-CONTENT:END -->
113
+ </auro-accordion>
114
+
115
+ #### HTTPS Enforcement
116
+
117
+ Regardless of protocol used with `http` property, `auro-hyperlink` will rewrite the final reference with the correct `https` protocol.
118
+
119
+ <div class="exampleWrapper">
120
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/https-enforcement.html) -->
121
+ <!-- The below content is automatically added from ./../apiExamples/https-enforcement.html -->
122
+ http absolute URL <auro-hyperlink href="http://www.alaskaair.com/route-map">to route map</auro-hyperlink> or
123
+ no hypertext transfer protocol absolute URL to <auro-hyperlink href="//www.alaskaair.com/route-map">route map</auro-hyperlink>
124
+ <!-- AURO-GENERATED-CONTENT:END -->
125
+ </div>
126
+ <auro-accordion alignRight>
127
+ <span slot="trigger">See code</span>
128
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/https-enforcement_code.html) -->
129
+ <!-- The below code snippet is automatically added from ./../apiExamples/https-enforcement_code.html -->
130
+
131
+ ```html
132
+ <!-- Web component example -->
133
+ http absolute URL <auro-hyperlink href="http://www.alaskaair.com/route-map">to route map</auro-hyperlink> or
134
+ no hypertext transfer protocol absolute URL to <auro-hyperlink href="//www.alaskaair.com/route-map">route map</auro-hyperlink>
135
+ <!-- Output code in shadow DOM element -->
136
+ http absolute URL <a class="hyperlink" href="https://www.alaskaair.com/route-map"><slot>to route map</slot></a>
137
+ no hypertext transfer protocol absolute URL to <a class="hyperlink" href="https://www.alaskaair.com/route-map"><slot>route map</slot></a>
138
+ ```
139
+ <!-- AURO-GENERATED-CONTENT:END -->
140
+ </auro-accordion>
141
+
142
+ #### Relative URLs
143
+
144
+ Absolute URLs are not always preferred. When using relative URLs `auro-hyperlink` will insert the `https://` protocol and hostname into the `<a>` element in the shadowDOM.
145
+
146
+ <div class="exampleWrapper">
147
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/relative-url.html) -->
148
+ <!-- The below content is automatically added from ./../apiExamples/relative-url.html -->
149
+ Example of a <auro-hyperlink href="#">relative URL</auro-hyperlink>.
150
+ <!-- AURO-GENERATED-CONTENT:END -->
151
+ </div>
152
+ <auro-accordion alignRight>
153
+ <span slot="trigger">See code</span>
154
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/relative-url_code.html) -->
155
+ <!-- The below code snippet is automatically added from ./../apiExamples/relative-url_code.html -->
156
+
157
+ ```html
158
+ <!-- Web component example -->
159
+ Example of a <auro-hyperlink href="#">relative URL</auro-hyperlink>
160
+ <!-- Output code in shadow DOM element -->
161
+ Example of a <a class="hyperlink" href="https://auro.alaskaair.com/components/auro/hyperlink/api#"><slot>relative URL</slot></a>
162
+ ```
163
+ <!-- AURO-GENERATED-CONTENT:END -->
164
+ </auro-accordion>
165
+
166
+ #### Using telephone/text/mailto URLs protocols
167
+
168
+ <div class="exampleWrapper">
169
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/URLscheme.html) -->
170
+ <!-- The below content is automatically added from ./../apiExamples/URLscheme.html -->
171
+ Example <auro-hyperlink href="sms:+18002527522">sms link</auro-hyperlink>.
172
+ Example <auro-hyperlink href="tel:+18002527522">telephone link</auro-hyperlink>.
173
+ Example <auro-hyperlink href="mailto:someone@alaskaair.com?cc=someone-else@alaskaair.com&bcc=someone-else-else@alaskaiar.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">email link</auro-hyperlink>.
174
+ <!-- AURO-GENERATED-CONTENT:END -->
175
+ </div>
176
+ <auro-accordion alignRight>
177
+ <span slot="trigger">See code</span>
178
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/URLscheme.html) -->
179
+ <!-- The below code snippet is automatically added from ./../apiExamples/URLscheme.html -->
180
+
181
+ ```html
182
+ Example <auro-hyperlink href="sms:+18002527522">sms link</auro-hyperlink>.
183
+ Example <auro-hyperlink href="tel:+18002527522">telephone link</auro-hyperlink>.
184
+ Example <auro-hyperlink href="mailto:someone@alaskaair.com?cc=someone-else@alaskaair.com&bcc=someone-else-else@alaskaiar.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">email link</auro-hyperlink>.
185
+ ```
186
+ <!-- AURO-GENERATED-CONTENT:END -->
187
+ </auro-accordion>
188
+
189
+ ### External Links
84
190
 
85
- Hyperlinks when used with the `target="_blank"` attribute are domain aware and return either an internal domain new-window icon versus an icon that communicates users will be taken to a new domain.
191
+ Hyperlinks when used with the `target="_blank"` attribute are domain aware and return either an internal domain "new-window" icon, or an icon that communicates users will be taken to a new domain.
86
192
 
87
193
  For link security purposes, when using the `target="_blank"` attribute, this implicitly provides the same `rel` behavior as setting `rel="noopener"`. For additional security, Auro applies `noreferrer` to the `rel` attribute by default.
88
194
 
@@ -108,8 +214,8 @@ For link security purposes, when using the `target="_blank"` attribute, this imp
108
214
  <!-- AURO-GENERATED-CONTENT:END -->
109
215
  </div>
110
216
  <div class="exampleWrapper--ondark">
111
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-inverseAppearance.html) -->
112
- <!-- The below content is automatically added from ./../apiExamples/external-inverseAppearance.html -->
217
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-appearance-inverse.html) -->
218
+ <!-- The below content is automatically added from ./../apiExamples/external-appearance-inverse.html -->
113
219
  Example link with
114
220
  <auro-hyperlink
115
221
  appearance="inverse"
@@ -154,8 +260,8 @@ Example link with
154
260
  with external domain
155
261
  ```
156
262
  <!-- AURO-GENERATED-CONTENT:END -->
157
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-inverseAppearance.html) -->
158
- <!-- The below code snippet is automatically added from ./../apiExamples/external-inverseAppearance.html -->
263
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-appearance-inverse.html) -->
264
+ <!-- The below code snippet is automatically added from ./../apiExamples/external-appearance-inverse.html -->
159
265
 
160
266
  ```html
161
267
  Example link with
@@ -180,9 +286,9 @@ Example link with
180
286
  <!-- AURO-GENERATED-CONTENT:END -->
181
287
  </auro-accordion>
182
288
 
183
- ### External links with referrerpolicy
289
+ ### External Links with Referrerpolicy
184
290
 
185
- When using the `target="_blank"` attribute, to override the default use of `rel="noreferrer"` use the `referrerpolicy` attribute.
291
+ When using the `target="_blank"` attribute, use the `referrerpolicy` attribute to override the default use of `rel="noreferrer"`.
186
292
 
187
293
  Using this attribute will use the `strict-origin-when-cross-origin` policy type. This sends a full URL when performing a same-origin request, only sends the origin when the protocol security level stays the same (HTTPS→HTTPS), and sends no header to a less secure destination (HTTPS→HTTP).
188
294
 
@@ -202,8 +308,8 @@ Example link with
202
308
  <!-- AURO-GENERATED-CONTENT:END -->
203
309
  </div>
204
310
  <div class="exampleWrapper--ondark">
205
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-referrer-inverseAppearance.html) -->
206
- <!-- The below content is automatically added from ./../apiExamples/external-referrer-inverseAppearance.html -->
311
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-referrer-appearance-inverse.html) -->
312
+ <!-- The below content is automatically added from ./../apiExamples/external-referrer-appearance-inverse.html -->
207
313
  Example link with
208
314
  <auro-hyperlink
209
315
  appearance="inverse"
@@ -231,8 +337,8 @@ Example link with
231
337
  , external domain with referrerpolicy attribute
232
338
  ```
233
339
  <!-- AURO-GENERATED-CONTENT:END -->
234
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-referrer-inverseAppearance.html) -->
235
- <!-- The below code snippet is automatically added from ./../apiExamples/external-referrer-inverseAppearance.html -->
340
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-referrer-appearance-inverse.html) -->
341
+ <!-- The below code snippet is automatically added from ./../apiExamples/external-referrer-appearance-inverse.html -->
236
342
 
237
343
  ```html
238
344
  Example link with
@@ -248,13 +354,13 @@ Example link with
248
354
  <!-- AURO-GENERATED-CONTENT:END -->
249
355
  </auro-accordion>
250
356
 
251
- ## Navigation style links
357
+ ### Navigation Links
252
358
 
253
- When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alternate UI. With this type, links will appear without an underline, but present the underline feedback on hover.
359
+ When using `auro-hyperlink` as a navigation style, use `type="nav"` for an alternate UI. With this type, links will appear without an underline, but present the underline feedback on hover.
254
360
 
255
361
  <div class="exampleWrapper">
256
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navStyle.html) -->
257
- <!-- The below content is automatically added from ./../apiExamples/navStyle.html -->
362
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/nav.html) -->
363
+ <!-- The below content is automatically added from ./../apiExamples/nav.html -->
258
364
  <auro-hyperlink
259
365
  type="nav"
260
366
  href="https://www.alaskaair.com">
@@ -263,8 +369,8 @@ When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alte
263
369
  <!-- AURO-GENERATED-CONTENT:END -->
264
370
  </div>
265
371
  <div class="exampleWrapper--ondark">
266
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navStyle-inverseAppearance.html) -->
267
- <!-- The below content is automatically added from ./../apiExamples/navStyle-inverseAppearance.html -->
372
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/nav-appearance-inverse.html) -->
373
+ <!-- The below content is automatically added from ./../apiExamples/nav-appearance-inverse.html -->
268
374
  <auro-hyperlink
269
375
  appearance="inverse"
270
376
  type="nav"
@@ -275,8 +381,8 @@ When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alte
275
381
  </div>
276
382
  <auro-accordion alignRight>
277
383
  <span slot="trigger">See code</span>
278
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navStyle.html) -->
279
- <!-- The below code snippet is automatically added from ./../apiExamples/navStyle.html -->
384
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/nav.html) -->
385
+ <!-- The below code snippet is automatically added from ./../apiExamples/nav.html -->
280
386
 
281
387
  ```html
282
388
  <auro-hyperlink
@@ -286,8 +392,8 @@ When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alte
286
392
  </auro-hyperlink>
287
393
  ```
288
394
  <!-- AURO-GENERATED-CONTENT:END -->
289
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navStyle-inverseAppearance.html) -->
290
- <!-- The below code snippet is automatically added from ./../apiExamples/navStyle-inverseAppearance.html -->
395
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/nav-appearance-inverse.html) -->
396
+ <!-- The below code snippet is automatically added from ./../apiExamples/nav-appearance-inverse.html -->
291
397
 
292
398
  ```html
293
399
  <auro-hyperlink
@@ -300,106 +406,7 @@ When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alte
300
406
  <!-- AURO-GENERATED-CONTENT:END -->
301
407
  </auro-accordion>
302
408
 
303
- ## Relative vs absolute URLs and https enforcement
304
-
305
- By default the `auro-hyperlink` will assume that the url passed is an absolute URL to `www.alaskaair.com` with the `https` protocol.
306
-
307
- <div class="exampleWrapper">
308
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/relativevsabsolute.html) -->
309
- <!-- The below content is automatically added from ./../apiExamples/relativevsabsolute.html -->
310
- Relative href converted to absolute URL to <auro-hyperlink href="/route-map">route map</auro-hyperlink>.
311
- <!-- AURO-GENERATED-CONTENT:END -->
312
- </div>
313
- <auro-accordion alignRight>
314
- <span slot="trigger">See code</span>
315
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/relativevsabsolute_code.html) -->
316
- <!-- The below code snippet is automatically added from ./../apiExamples/relativevsabsolute_code.html -->
317
-
318
- ```html
319
- <!-- Web component example -->
320
- Relative href converted to absolute URL to <auro-hyperlink href="/route-map">route map</auro-hyperlink>.
321
-
322
- <!-- Output code in shadow DOM element -->
323
- Relative href converted to absolute URL to <a class="hyperlink" href="https://www.alaskaair.com/route-map"><slot>route map</slot></a>.
324
- ```
325
- <!-- AURO-GENERATED-CONTENT:END -->
326
- </auro-accordion>
327
-
328
- #### https enforcement
329
-
330
- Regardless of protocol used with `http` property, `auro-hyperlink` will rewrite the final reference with the correct `https` protocol.
331
-
332
- <div class="exampleWrapper">
333
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/httpsEnforcement.html) -->
334
- <!-- The below content is automatically added from ./../apiExamples/httpsEnforcement.html -->
335
- http absolute URL <auro-hyperlink href="http://www.alaskaair.com/route-map">to route map</auro-hyperlink> or
336
- no hypertext transfer protocol absolute URL to <auro-hyperlink href="//www.alaskaair.com/route-map">route map</auro-hyperlink>
337
- <!-- AURO-GENERATED-CONTENT:END -->
338
- </div>
339
- <auro-accordion alignRight>
340
- <span slot="trigger">See code</span>
341
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/httpsEnforcement_code.html) -->
342
- <!-- The below code snippet is automatically added from ./../apiExamples/httpsEnforcement_code.html -->
343
-
344
- ```html
345
- <!-- Web component example -->
346
- http absolute URL <auro-hyperlink href="http://www.alaskaair.com/route-map">to route map</auro-hyperlink> or
347
- no hypertext transfer protocol absolute URL to <auro-hyperlink href="//www.alaskaair.com/route-map">route map</auro-hyperlink>
348
- <!-- Output code in shadow DOM element -->
349
- http absolute URL <a class="hyperlink" href="https://www.alaskaair.com/route-map"><slot>to route map</slot></a>
350
- no hypertext transfer protocol absolute URL to <a class="hyperlink" href="https://www.alaskaair.com/route-map"><slot>route map</slot></a>
351
- ```
352
- <!-- AURO-GENERATED-CONTENT:END -->
353
- </auro-accordion>
354
-
355
- #### Relative URLs
356
-
357
- Absolute URLs are not always preferred. When using relative URLs `auro-hyperlink` will insert the `https://` protocol and hostname into the `<a>` element in the shadowDOM.
358
-
359
- <div class="exampleWrapper">
360
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/relativeUrl.html) -->
361
- <!-- The below content is automatically added from ./../apiExamples/relativeUrl.html -->
362
- Example of a <auro-hyperlink href="#">relative URL</auro-hyperlink>.
363
- <!-- AURO-GENERATED-CONTENT:END -->
364
- </div>
365
- <auro-accordion alignRight>
366
- <span slot="trigger">See code</span>
367
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/relativeUrl_code.html) -->
368
- <!-- The below code snippet is automatically added from ./../apiExamples/relativeUrl_code.html -->
369
-
370
- ```html
371
- <!-- Web component example -->
372
- Example of a <auro-hyperlink href="#">relative URL</auro-hyperlink>
373
- <!-- Output code in shadow DOM element -->
374
- Example of a <a class="hyperlink" href="https://auro.alaskaair.com/components/auro/hyperlink/api#"><slot>relative URL</slot></a>
375
- ```
376
- <!-- AURO-GENERATED-CONTENT:END -->
377
- </auro-accordion>
378
-
379
- #### Using telephone/text/mailto URLs protocols
380
-
381
- <div class="exampleWrapper">
382
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/URLscheme.html) -->
383
- <!-- The below content is automatically added from ./../apiExamples/URLscheme.html -->
384
- Example <auro-hyperlink href="sms:+18002527522">sms link</auro-hyperlink>.
385
- Example <auro-hyperlink href="tel:+18002527522">telephone link</auro-hyperlink>.
386
- Example <auro-hyperlink href="mailto:someone@alaskaair.com?cc=someone-else@alaskaair.com&bcc=someone-else-else@alaskaiar.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">email link</auro-hyperlink>.
387
- <!-- AURO-GENERATED-CONTENT:END -->
388
- </div>
389
- <auro-accordion alignRight>
390
- <span slot="trigger">See code</span>
391
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/URLscheme.html) -->
392
- <!-- The below code snippet is automatically added from ./../apiExamples/URLscheme.html -->
393
-
394
- ```html
395
- Example <auro-hyperlink href="sms:+18002527522">sms link</auro-hyperlink>.
396
- Example <auro-hyperlink href="tel:+18002527522">telephone link</auro-hyperlink>.
397
- Example <auro-hyperlink href="mailto:someone@alaskaair.com?cc=someone-else@alaskaair.com&bcc=someone-else-else@alaskaiar.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">email link</auro-hyperlink>.
398
- ```
399
- <!-- AURO-GENERATED-CONTENT:END -->
400
- </auro-accordion>
401
-
402
- ## Call to action buttons
409
+ ### Call to Action Buttons
403
410
 
404
411
  Call to action (CTA) buttons combine hyperlink functionality with button styling. While semantically these are hyperlinks, they visually appear as buttons. Use the `variant` attribute with values `primary`, `secondary`, `tertiary`, `ghost`, or `flat` to modify their appearance as shown below. The `ondark` attribute can be combined with any `type="cta"` option.
405
412
 
@@ -414,8 +421,8 @@ Call to action (CTA) buttons combine hyperlink functionality with button styling
414
421
  <!-- AURO-GENERATED-CONTENT:END -->
415
422
  </div>
416
423
  <div class="exampleWrapper--ondark">
417
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-inverseAppearance.html) -->
418
- <!-- The below content is automatically added from ./../apiExamples/cta-inverseAppearance.html -->
424
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-appearance-inverse.html) -->
425
+ <!-- The below content is automatically added from ./../apiExamples/cta-appearance-inverse.html -->
419
426
  <auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="primary">Primary</auro-hyperlink>
420
427
  <auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="secondary">Secondary</auro-hyperlink>
421
428
  <auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="tertiary">Tertiary</auro-hyperlink>
@@ -436,8 +443,8 @@ Call to action (CTA) buttons combine hyperlink functionality with button styling
436
443
  <auro-hyperlink type="cta" href="https://www.alaskaair.com" variant="flat">Flat</auro-hyperlink>
437
444
  ```
438
445
  <!-- AURO-GENERATED-CONTENT:END -->
439
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-inverseAppearance.html) -->
440
- <!-- The below code snippet is automatically added from ./../apiExamples/cta-inverseAppearance.html -->
446
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-appearance-inverse.html) -->
447
+ <!-- The below code snippet is automatically added from ./../apiExamples/cta-appearance-inverse.html -->
441
448
 
442
449
  ```html
443
450
  <auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="primary">Primary</auro-hyperlink>
@@ -449,7 +456,7 @@ Call to action (CTA) buttons combine hyperlink functionality with button styling
449
456
  <!-- AURO-GENERATED-CONTENT:END -->
450
457
  </auro-accordion>
451
458
 
452
- ### CTA External links
459
+ #### CTA External links
453
460
 
454
461
  (CTA) buttons can also be used in combinaton with external links. In the following example, see how the `target="_blank"` attribute acts like external links.
455
462
 
@@ -466,8 +473,8 @@ CTA buttons share the same icon support as the standard hyperlink for targets th
466
473
  <!-- AURO-GENERATED-CONTENT:END -->
467
474
  </div>
468
475
  <div class="exampleWrapper--ondark">
469
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-external-link-inverseAppearance.html) -->
470
- <!-- The below content is automatically added from ./../apiExamples/cta-external-link-inverseAppearance.html -->
476
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-external-link-appearance-inverse.html) -->
477
+ <!-- The below content is automatically added from ./../apiExamples/cta-external-link-appearance-inverse.html -->
471
478
  <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="primary">Primary</auro-hyperlink>
472
479
  <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="secondary">Secondary</auro-hyperlink>
473
480
  <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="tertiary">Tertiary</auro-hyperlink>
@@ -488,8 +495,8 @@ CTA buttons share the same icon support as the standard hyperlink for targets th
488
495
  <auro-hyperlink target="_blank" type="cta" href="https://www.alaskaair.com" variant="flat">Flat</auro-hyperlink>
489
496
  ```
490
497
  <!-- AURO-GENERATED-CONTENT:END -->
491
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-external-link-inverseAppearance.html) -->
492
- <!-- The below code snippet is automatically added from ./../apiExamples/cta-external-link-inverseAppearance.html -->
498
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-external-link-appearance-inverse.html) -->
499
+ <!-- The below code snippet is automatically added from ./../apiExamples/cta-external-link-appearance-inverse.html -->
493
500
 
494
501
  ```html
495
502
  <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="primary">Primary</auro-hyperlink>
@@ -501,7 +508,7 @@ CTA buttons share the same icon support as the standard hyperlink for targets th
501
508
  <!-- AURO-GENERATED-CONTENT:END -->
502
509
  </auro-accordion>
503
510
 
504
- ### Fluid CTA links
511
+ #### Fluid CTA links
505
512
 
506
513
  In the following example, see how the `fluid` attribute alters the shape of the button to take up the full width of its parent container.
507
514
 
@@ -530,7 +537,7 @@ In the following example, see how the `fluid` attribute alters the shape of the
530
537
  <!-- AURO-GENERATED-CONTENT:END -->
531
538
  </auro-accordion>
532
539
 
533
- ### CTA sizes
540
+ #### CTA sizes
534
541
 
535
542
  In the following example, see how the `size` attribute alters the size of the cta link. Available sizes are `xs`, `sm`, `md`, `lg`, `xl`.
536
543
 
@@ -559,7 +566,7 @@ In the following example, see how the `size` attribute alters the size of the ct
559
566
  <!-- AURO-GENERATED-CONTENT:END -->
560
567
  </auro-accordion>
561
568
 
562
- ### CTA shape
569
+ #### CTA shape
563
570
 
564
571
  The `shape` attribute accepts three values: `rounded`, `pill`, or `circle`.
565
572
 
@@ -596,9 +603,145 @@ The `shape` attribute accepts three values: `rounded`, `pill`, or `circle`.
596
603
  <!-- AURO-GENERATED-CONTENT:END -->
597
604
  </auro-accordion>
598
605
 
599
- ## Theme Support
606
+ ## Common Usage Patterns & Functional Examples
607
+
608
+ ### Using role="button"
609
+
610
+ Aside from the standard hyperlink use-case, the `auro-hyperlink` element is intended to be used for button situations as illustrated below. Assuming the role of button, `auro-hyperlink` also will track the `aria-pressed` state.
611
+
612
+ **Note:** Any `href` will be ignored when using `role="button"`. A click-event must be passed to the element as illustrated in the example below.
613
+
614
+ **Accessibility:** Review the code examples, the user of this element are responsible for keyboard support when using `role="button"`.
615
+
616
+ <div class="exampleWrapper">
617
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/role-button.html) -->
618
+ <!-- The below content is automatically added from ./../apiExamples/role-button.html -->
619
+ <auro-hyperlink href="http://www.alaskaair.com" role="button" id="roleButton">Cancel button</auro-hyperlink>
620
+ <!-- AURO-GENERATED-CONTENT:END -->
621
+ </div>
622
+ <div class="exampleWrapper--ondark">
623
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/role-button-appearance-inverse.html) -->
624
+ <!-- The below content is automatically added from ./../apiExamples/role-button-appearance-inverse.html -->
625
+ <auro-hyperlink appearance="inverse" href="http://www.alaskaair.com" role="button" id="roleButton-ondark">Cancel button</auro-hyperlink>
626
+ <!-- AURO-GENERATED-CONTENT:END -->
627
+ </div>
628
+ <auro-accordion alignRight>
629
+ <span slot="trigger">See code</span>
630
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/role-button.html) -->
631
+ <!-- The below code snippet is automatically added from ./../apiExamples/role-button.html -->
632
+
633
+ ```html
634
+ <auro-hyperlink href="http://www.alaskaair.com" role="button" id="roleButton">Cancel button</auro-hyperlink>
635
+ ```
636
+ <!-- AURO-GENERATED-CONTENT:END -->
637
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/role-button-appearance-inverse.html) -->
638
+ <!-- The below code snippet is automatically added from ./../apiExamples/role-button-appearance-inverse.html -->
639
+
640
+ ```html
641
+ <auro-hyperlink appearance="inverse" href="http://www.alaskaair.com" role="button" id="roleButton-ondark">Cancel button</auro-hyperlink>
642
+ ```
643
+ <!-- AURO-GENERATED-CONTENT:END -->
644
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/role-button.js) -->
645
+ <!-- The below code snippet is automatically added from ./../apiExamples/role-button.js -->
646
+
647
+ ```js
648
+ export function roleButtonExample() {
649
+ const roleButton = document.getElementById("roleButton");
650
+ const roleButtonOndark = document.getElementById("roleButton-ondark");
651
+
652
+ roleButton.addEventListener("click", () => {
653
+ alert("You clicked the role button!");
654
+ });
655
+
656
+ roleButtonOndark.addEventListener("click", () => {
657
+ alert("You clicked the role button!");
658
+ });
659
+ }
660
+ ```
661
+ <!-- AURO-GENERATED-CONTENT:END -->
662
+ </auro-accordion>
663
+
664
+ ### Unsupported types
665
+
666
+ Not all URL types are supported for security reasons. Two common types that are worth mentioning are `javaScript:` and `data:`.
667
+
668
+ The following examples illustrate the use of `<auro-hyperlink>` with either no `href`, `javaScript:` or `data:` protocols being used. Note that `javascript` returns a shadowDOM as simple text. Using an unsupported protocol like `data:`, the protocol is removed from the provided `href` value.
669
+
670
+ <div class="exampleWrapper">
671
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/non-supported.html) -->
672
+ <!-- The below content is automatically added from ./../apiExamples/non-supported.html -->
673
+ <p>
674
+ <auro-hyperlink>No href supplied</auro-hyperlink>
675
+ </p>
676
+ <p>
677
+ <auro-hyperlink href="javascript:;">JavaScript not supported</auro-hyperlink>
678
+ </p>
679
+ <p>
680
+ <auro-hyperlink href="data:text/plain;charset=utf-8,Hello%20World!">Data type not supported</auro-hyperlink>
681
+ </p>
682
+ <!-- AURO-GENERATED-CONTENT:END -->
683
+ </div>
684
+ <auro-accordion alignRight>
685
+ <span slot="trigger">See code</span>
686
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/non-supported.html) -->
687
+ <!-- The below code snippet is automatically added from ./../apiExamples/non-supported.html -->
688
+
689
+ ```html
690
+ <p>
691
+ <auro-hyperlink>No href supplied</auro-hyperlink>
692
+ </p>
693
+ <p>
694
+ <auro-hyperlink href="javascript:;">JavaScript not supported</auro-hyperlink>
695
+ </p>
696
+ <p>
697
+ <auro-hyperlink href="data:text/plain;charset=utf-8,Hello%20World!">Data type not supported</auro-hyperlink>
698
+ </p>
699
+ ```
700
+ <!-- AURO-GENERATED-CONTENT:END -->
701
+ </auro-accordion>
702
+
703
+ ### Typography
704
+
705
+ The `auro-hyperlink` component is designed to work with the typography classes provided by the Auro Design System.
706
+
707
+ The component will automatically inherit the typography styles from the parent element, allowing for consistent text styling across your application. Classes can also be applied directly onto the `auro-hyperlink` component.
708
+
709
+ <div class="exampleWrapper">
710
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/typography.html) -->
711
+ <!-- The below content is automatically added from ./../apiExamples/typography.html -->
712
+ <div class="body-xs">
713
+ Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
714
+ </div>
715
+ <div class="body-default">
716
+ Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
717
+ </div>
718
+ <div class="body-lg">
719
+ Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
720
+ </div>
721
+ <!-- AURO-GENERATED-CONTENT:END -->
722
+ </div>
723
+ <auro-accordion alignRight>
724
+ <span slot="trigger">See code</span>
725
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/typography.html) -->
726
+ <!-- The below code snippet is automatically added from ./../apiExamples/typography.html -->
727
+
728
+ ```html
729
+ <div class="body-xs">
730
+ Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
731
+ </div>
732
+ <div class="body-default">
733
+ Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
734
+ </div>
735
+ <div class="body-lg">
736
+ Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
737
+ </div>
738
+ ```
739
+ <!-- AURO-GENERATED-CONTENT:END -->
740
+ </auro-accordion>
741
+
742
+ ## Restyle Component with CSS Variables
600
743
 
601
- The component may be restyled using the following code sample and changing the values of the following token(s).
744
+ The component may be restyled by changing the values of the following token(s).
602
745
 
603
746
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
604
747
  <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->