@aurodesignsystem-dev/auro-hyperlink 0.0.0-pr303.0 → 0.0.0-pr306.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 (8) hide show
  1. package/demo/api.md +73 -72
  2. package/demo/auro-hyperlink.min.js +45 -20
  3. package/demo/index.md +26 -26
  4. package/dist/{auro-hyperlink-JpDRNbp2.js → auro-hyperlink-C3d_7inK.js} +50 -46
  5. package/dist/index.d.ts +21 -17
  6. package/dist/index.js +1 -1
  7. package/dist/registered.js +1 -1
  8. package/package.json +3 -3
package/demo/api.md CHANGED
@@ -12,20 +12,21 @@
12
12
 
13
13
  ## Properties
14
14
 
15
- | Property | Attribute | Modifiers | Type | Default | Description |
16
- |------------------|------------------|-----------|-----------|-----------|--------------------------------------------------|
17
- | [download](#download) | `download` | | `boolean` | false | If true, the linked resource will be downloaded when the hyperlink is clicked. |
18
- | [fluid](#fluid) | `fluid` | | `boolean` | | If true and `type="cta"`, the hyperlink will have a fluid-width UI. |
19
- | [href](#href) | `href` | | `string` | | Defines the URL of the linked page. |
20
- | [ondark](#ondark) | `ondark` | | `boolean` | false | If true, the hyperlink will be styled for use on a dark background. |
21
- | [referrerpolicy](#referrerpolicy) | `referrerpolicy` | | `boolean` | | If true, sets `strict-origin-when-cross-origin` to control the referrer information sent with requests. |
22
- | [rel](#rel) | `rel` | | `string` | | Defines the relationship between the current document and the linked document. |
23
- | [relative](#relative) | `relative` | | `boolean` | false | If true, the auto URL re-write feature will be disabled. |
24
- | [role](#role) | | | `String` | | Defines ARIA roles; currently supports `button` for extended experiences. |
25
- | [safeUri](#safeUri) | | readonly | `string` | | Returns a safe URI based on the provided `href` and `relative` parameters.<br />If `href` is truthy, it generates a safe URL using the `safeUrl` function.<br />Otherwise, it returns an empty string. |
26
- | [target](#target) | `target` | | `string` | | Defines where to open the linked document. |
27
- | [type](#type) | `type` | | `string` | | Defines the type of hyperlink; accepts `nav` or `cta`. |
28
- | [variant](#variant) | `variant` | | `string` | "primary" | Sets button variant option. |
15
+ | Property | Attribute | Modifiers | Type | Default | Description |
16
+ |------------------|------------------|-----------|-----------|-------------|--------------------------------------------------|
17
+ | [appearance](#appearance) | `appearance` | | `string` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
18
+ | [download](#download) | `download` | | `boolean` | false | If true, the linked resource will be downloaded when the hyperlink is clicked. |
19
+ | [fluid](#fluid) | `fluid` | | `boolean` | | If true and `type="cta"`, the hyperlink will have a fluid-width UI. |
20
+ | [href](#href) | `href` | | `string` | | Defines the URL of the linked page. |
21
+ | [ondark](#ondark) | `ondark` | | `boolean` | false | DEPRECATED - use `appearance` instead. |
22
+ | [referrerpolicy](#referrerpolicy) | `referrerpolicy` | | `boolean` | | If true, sets `strict-origin-when-cross-origin` to control the referrer information sent with requests. |
23
+ | [rel](#rel) | `rel` | | `string` | | Defines the relationship between the current document and the linked document. |
24
+ | [relative](#relative) | `relative` | | `boolean` | false | If true, the auto URL re-write feature will be disabled. |
25
+ | [role](#role) | | | `String` | | Defines ARIA roles; currently supports `button` for extended experiences. |
26
+ | [safeUri](#safeUri) | | readonly | `string` | | Returns a safe URI based on the provided `href` and `relative` parameters.<br />If `href` is truthy, it generates a safe URL using the `safeUrl` function.<br />Otherwise, it returns an empty string. |
27
+ | [target](#target) | `target` | | `string` | | Defines where to open the linked document. |
28
+ | [type](#type) | `type` | | `string` | | Defines the type of hyperlink; accepts `nav` or `cta`. |
29
+ | [variant](#variant) | `variant` | | `string` | "primary" | Sets button variant option. |
29
30
 
30
31
  ## CSS Shadow Parts
31
32
 
@@ -47,10 +48,10 @@
47
48
  <!-- AURO-GENERATED-CONTENT:END -->
48
49
  </div>
49
50
  <div class="exampleWrapper--ondark">
50
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-ondark.html) -->
51
- <!-- The below content is automatically added from ./../apiExamples/basic-ondark.html -->
52
- <auro-hyperlink ondark>No href supplied</auro-hyperlink><br>
53
- Welcome to <auro-hyperlink ondark href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
51
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-inverseAppearance.html) -->
52
+ <!-- The below content is automatically added from ./../apiExamples/basic-inverseAppearance.html -->
53
+ <auro-hyperlink appearance="inverse">No href supplied</auro-hyperlink><br>
54
+ Welcome to <auro-hyperlink appearance="inverse" href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
54
55
  <!-- AURO-GENERATED-CONTENT:END -->
55
56
  </div>
56
57
  <auro-accordion alignRight>
@@ -63,12 +64,12 @@
63
64
  Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
64
65
  ```
65
66
  <!-- AURO-GENERATED-CONTENT:END -->
66
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-ondark.html) -->
67
- <!-- The below code snippet is automatically added from ./../apiExamples/basic-ondark.html -->
67
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-inverseAppearance.html) -->
68
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic-inverseAppearance.html -->
68
69
 
69
70
  ```html
70
- <auro-hyperlink ondark>No href supplied</auro-hyperlink><br>
71
- Welcome to <auro-hyperlink ondark href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
71
+ <auro-hyperlink appearance="inverse">No href supplied</auro-hyperlink><br>
72
+ Welcome to <auro-hyperlink appearance="inverse" href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
72
73
  ```
73
74
  <!-- AURO-GENERATED-CONTENT:END -->
74
75
  </auro-accordion>
@@ -101,11 +102,11 @@ For link security purposes, when using the `target="_blank"` attribute, this imp
101
102
  <!-- AURO-GENERATED-CONTENT:END -->
102
103
  </div>
103
104
  <div class="exampleWrapper--ondark">
104
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-ondark.html) -->
105
- <!-- The below content is automatically added from ./../apiExamples/external-ondark.html -->
105
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-inverseAppearance.html) -->
106
+ <!-- The below content is automatically added from ./../apiExamples/external-inverseAppearance.html -->
106
107
  Example link with
107
108
  <auro-hyperlink
108
- ondark
109
+ appearance="inverse"
109
110
  target="_blank"
110
111
  href="https://www.alaskaair.com">
111
112
  external target
@@ -115,7 +116,7 @@ For link security purposes, when using the `target="_blank"` attribute, this imp
115
116
  <br>
116
117
  Example link with
117
118
  <auro-hyperlink
118
- ondark
119
+ appearance="inverse"
119
120
  target="_blank"
120
121
  href="https://www.portseattle.org/sea-tac">
121
122
  external target
@@ -147,13 +148,13 @@ Example link with
147
148
  with external domain
148
149
  ```
149
150
  <!-- AURO-GENERATED-CONTENT:END -->
150
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-ondark.html) -->
151
- <!-- The below code snippet is automatically added from ./../apiExamples/external-ondark.html -->
151
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-inverseAppearance.html) -->
152
+ <!-- The below code snippet is automatically added from ./../apiExamples/external-inverseAppearance.html -->
152
153
 
153
154
  ```html
154
155
  Example link with
155
156
  <auro-hyperlink
156
- ondark
157
+ appearance="inverse"
157
158
  target="_blank"
158
159
  href="https://www.alaskaair.com">
159
160
  external target
@@ -163,7 +164,7 @@ but same domain
163
164
  <br>
164
165
  Example link with
165
166
  <auro-hyperlink
166
- ondark
167
+ appearance="inverse"
167
168
  target="_blank"
168
169
  href="https://www.portseattle.org/sea-tac">
169
170
  external target
@@ -195,11 +196,11 @@ Example link with
195
196
  <!-- AURO-GENERATED-CONTENT:END -->
196
197
  </div>
197
198
  <div class="exampleWrapper--ondark">
198
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-referrer-ondark.html) -->
199
- <!-- The below content is automatically added from ./../apiExamples/external-referrer-ondark.html -->
199
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-referrer-inverseAppearance.html) -->
200
+ <!-- The below content is automatically added from ./../apiExamples/external-referrer-inverseAppearance.html -->
200
201
  Example link with
201
202
  <auro-hyperlink
202
- ondark
203
+ appearance="inverse"
203
204
  target="_blank"
204
205
  referrerpolicy
205
206
  href="https://www.portseattle.org/sea-tac">
@@ -224,13 +225,13 @@ Example link with
224
225
  , external domain with referrerpolicy attribute
225
226
  ```
226
227
  <!-- AURO-GENERATED-CONTENT:END -->
227
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-referrer-ondark.html) -->
228
- <!-- The below code snippet is automatically added from ./../apiExamples/external-referrer-ondark.html -->
228
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-referrer-inverseAppearance.html) -->
229
+ <!-- The below code snippet is automatically added from ./../apiExamples/external-referrer-inverseAppearance.html -->
229
230
 
230
231
  ```html
231
232
  Example link with
232
233
  <auro-hyperlink
233
- ondark
234
+ appearance="inverse"
234
235
  target="_blank"
235
236
  referrerpolicy
236
237
  href="https://www.portseattle.org/sea-tac">
@@ -256,10 +257,10 @@ When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alte
256
257
  <!-- AURO-GENERATED-CONTENT:END -->
257
258
  </div>
258
259
  <div class="exampleWrapper--ondark">
259
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navStyle-ondark.html) -->
260
- <!-- The below content is automatically added from ./../apiExamples/navStyle-ondark.html -->
260
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navStyle-inverseAppearance.html) -->
261
+ <!-- The below content is automatically added from ./../apiExamples/navStyle-inverseAppearance.html -->
261
262
  <auro-hyperlink
262
- ondark
263
+ appearance="inverse"
263
264
  type="nav"
264
265
  href="https://www.alaskaair.com">
265
266
  Navigation style link
@@ -279,12 +280,12 @@ When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alte
279
280
  </auro-hyperlink>
280
281
  ```
281
282
  <!-- AURO-GENERATED-CONTENT:END -->
282
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navStyle-ondark.html) -->
283
- <!-- The below code snippet is automatically added from ./../apiExamples/navStyle-ondark.html -->
283
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navStyle-inverseAppearance.html) -->
284
+ <!-- The below code snippet is automatically added from ./../apiExamples/navStyle-inverseAppearance.html -->
284
285
 
285
286
  ```html
286
287
  <auro-hyperlink
287
- ondark
288
+ appearance="inverse"
288
289
  type="nav"
289
290
  href="https://www.alaskaair.com">
290
291
  Navigation style link
@@ -407,13 +408,13 @@ Call to action (CTA) buttons combine hyperlink functionality with button styling
407
408
  <!-- AURO-GENERATED-CONTENT:END -->
408
409
  </div>
409
410
  <div class="exampleWrapper--ondark">
410
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-ondark.html) -->
411
- <!-- The below content is automatically added from ./../apiExamples/cta-ondark.html -->
412
- <auro-hyperlink type="cta" ondark href="https://www.alaskaair.com" variant="primary">Primary</auro-hyperlink>
413
- <auro-hyperlink type="cta" ondark href="https://www.alaskaair.com" variant="secondary">Secondary</auro-hyperlink>
414
- <auro-hyperlink type="cta" ondark href="https://www.alaskaair.com" variant="tertiary">Tertiary</auro-hyperlink>
415
- <auro-hyperlink type="cta" ondark href="https://www.alaskaair.com" variant="ghost">Ghost</auro-hyperlink>
416
- <auro-hyperlink type="cta" ondark href="https://www.alaskaair.com" variant="flat">Flat</auro-hyperlink>
411
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-inverseAppearance.html) -->
412
+ <!-- The below content is automatically added from ./../apiExamples/cta-inverseAppearance.html -->
413
+ <auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="primary">Primary</auro-hyperlink>
414
+ <auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="secondary">Secondary</auro-hyperlink>
415
+ <auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="tertiary">Tertiary</auro-hyperlink>
416
+ <auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="ghost">Ghost</auro-hyperlink>
417
+ <auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="flat">Flat</auro-hyperlink>
417
418
  <!-- AURO-GENERATED-CONTENT:END -->
418
419
  </div>
419
420
  <auro-accordion alignRight>
@@ -429,15 +430,15 @@ Call to action (CTA) buttons combine hyperlink functionality with button styling
429
430
  <auro-hyperlink type="cta" href="https://www.alaskaair.com" variant="flat">Flat</auro-hyperlink>
430
431
  ```
431
432
  <!-- AURO-GENERATED-CONTENT:END -->
432
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-ondark.html) -->
433
- <!-- The below code snippet is automatically added from ./../apiExamples/cta-ondark.html -->
433
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-inverseAppearance.html) -->
434
+ <!-- The below code snippet is automatically added from ./../apiExamples/cta-inverseAppearance.html -->
434
435
 
435
436
  ```html
436
- <auro-hyperlink type="cta" ondark href="https://www.alaskaair.com" variant="primary">Primary</auro-hyperlink>
437
- <auro-hyperlink type="cta" ondark href="https://www.alaskaair.com" variant="secondary">Secondary</auro-hyperlink>
438
- <auro-hyperlink type="cta" ondark href="https://www.alaskaair.com" variant="tertiary">Tertiary</auro-hyperlink>
439
- <auro-hyperlink type="cta" ondark href="https://www.alaskaair.com" variant="ghost">Ghost</auro-hyperlink>
440
- <auro-hyperlink type="cta" ondark href="https://www.alaskaair.com" variant="flat">Flat</auro-hyperlink>
437
+ <auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="primary">Primary</auro-hyperlink>
438
+ <auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="secondary">Secondary</auro-hyperlink>
439
+ <auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="tertiary">Tertiary</auro-hyperlink>
440
+ <auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="ghost">Ghost</auro-hyperlink>
441
+ <auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="flat">Flat</auro-hyperlink>
441
442
  ```
442
443
  <!-- AURO-GENERATED-CONTENT:END -->
443
444
  </auro-accordion>
@@ -459,13 +460,13 @@ CTA buttons share the same icon support as the standard hyperlink for targets th
459
460
  <!-- AURO-GENERATED-CONTENT:END -->
460
461
  </div>
461
462
  <div class="exampleWrapper--ondark">
462
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-external-link-ondark.html) -->
463
- <!-- The below content is automatically added from ./../apiExamples/cta-external-link-ondark.html -->
464
- <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" ondark variant="primary">Primary</auro-hyperlink>
465
- <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" ondark variant="secondary">Secondary</auro-hyperlink>
466
- <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" ondark variant="tertiary">Tertiary</auro-hyperlink>
467
- <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" ondark variant="ghost">Ghost</auro-hyperlink>
468
- <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" ondark variant="flat">Flat</auro-hyperlink>
463
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-external-link-inverseAppearance.html) -->
464
+ <!-- The below content is automatically added from ./../apiExamples/cta-external-link-inverseAppearance.html -->
465
+ <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="primary">Primary</auro-hyperlink>
466
+ <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="secondary">Secondary</auro-hyperlink>
467
+ <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="tertiary">Tertiary</auro-hyperlink>
468
+ <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="ghost">Ghost</auro-hyperlink>
469
+ <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="flat">Flat</auro-hyperlink>
469
470
  <!-- AURO-GENERATED-CONTENT:END -->
470
471
  </div>
471
472
  <auro-accordion alignRight>
@@ -481,15 +482,15 @@ CTA buttons share the same icon support as the standard hyperlink for targets th
481
482
  <auro-hyperlink target="_blank" type="cta" href="https://www.alaskaair.com" variant="flat">Flat</auro-hyperlink>
482
483
  ```
483
484
  <!-- AURO-GENERATED-CONTENT:END -->
484
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-external-link-ondark.html) -->
485
- <!-- The below code snippet is automatically added from ./../apiExamples/cta-external-link-ondark.html -->
485
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-external-link-inverseAppearance.html) -->
486
+ <!-- The below code snippet is automatically added from ./../apiExamples/cta-external-link-inverseAppearance.html -->
486
487
 
487
488
  ```html
488
- <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" ondark variant="primary">Primary</auro-hyperlink>
489
- <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" ondark variant="secondary">Secondary</auro-hyperlink>
490
- <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" ondark variant="tertiary">Tertiary</auro-hyperlink>
491
- <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" ondark variant="ghost">Ghost</auro-hyperlink>
492
- <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" ondark variant="flat">Flat</auro-hyperlink>
489
+ <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="primary">Primary</auro-hyperlink>
490
+ <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="secondary">Secondary</auro-hyperlink>
491
+ <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="tertiary">Tertiary</auro-hyperlink>
492
+ <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="ghost">Ghost</auro-hyperlink>
493
+ <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="flat">Flat</auro-hyperlink>
493
494
  ```
494
495
  <!-- AURO-GENERATED-CONTENT:END -->
495
496
  </auro-accordion>
@@ -566,7 +567,7 @@ The `shape` attribute accepts three values: `rounded`, `pill`, or `circle`.
566
567
  <auro-icon customColor category="interface" name="arrow-up"></auro-icon>
567
568
  </auro-hyperlink>
568
569
  <auro-hyperlink type="cta" href="https://www.alaskaair.com" shape="circle">
569
- <auro-icon customcolor category="interface" name="account-filled" ondark></auro-icon>
570
+ <auro-icon customcolor category="interface" name="account-filled" appearance="inverse"></auro-icon>
570
571
  </auro-hyperlink>
571
572
  <!-- AURO-GENERATED-CONTENT:END -->
572
573
  </div>
@@ -583,7 +584,7 @@ The `shape` attribute accepts three values: `rounded`, `pill`, or `circle`.
583
584
  <auro-icon customColor category="interface" name="arrow-up"></auro-icon>
584
585
  </auro-hyperlink>
585
586
  <auro-hyperlink type="cta" href="https://www.alaskaair.com" shape="circle">
586
- <auro-icon customcolor category="interface" name="account-filled" ondark></auro-icon>
587
+ <auro-icon customcolor category="interface" name="account-filled" appearance="inverse"></auro-icon>
587
588
  </auro-hyperlink>
588
589
  ```
589
590
  <!-- AURO-GENERATED-CONTENT:END -->