@aurodesignsystem-dev/auro-hyperlink 0.0.0-pr306.0 → 0.0.0-pr308.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 (9) hide show
  1. package/custom-elements.json +2737 -0
  2. package/demo/api.md +55 -48
  3. package/demo/auro-hyperlink.min.js +13 -0
  4. package/demo/index.md +12 -12
  5. package/dist/{auro-hyperlink-C3d_7inK.js → auro-hyperlink-Db0vLkVZ.js} +4 -4
  6. package/dist/index.d.ts +4 -4
  7. package/dist/index.js +1 -1
  8. package/dist/registered.js +1 -1
  9. package/package.json +10 -6
package/demo/api.md CHANGED
@@ -10,30 +10,37 @@
10
10
 
11
11
  `<auro-hyperlink>` is a component that wraps an HTML `<a>` element, providing additional styling and behavior.
12
12
 
13
- ## Properties
14
-
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. |
30
-
31
- ## CSS Shadow Parts
32
-
33
- | Part | Description |
34
- |--------------|--------------------------------------------------|
35
- | [link](#link) | Allows styling to be applied to the `a` element. |
36
- | [targetIcon](#targetIcon) | Allows styling to be applied to the icon that appears next to the hyperlink. |
13
+ ### Properties & Attributes
14
+
15
+ | Properties | Attributes | Type | Default | Description |
16
+ | --- | --- | --- | --- | --- |
17
+ role | | String | | Defines ARIA roles; currently supports `button` for extended experiences.
18
+ safeUri | | | | 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.
19
+ includesDomain | | | | Checks whether the provided URI (if available) includes the 'http' protocol.<br>If the URI is truthy, it examines whether it contains 'http'.<br>Otherwise, it returns false.
20
+ appearance | appearance | string | 'default' | Defines whether the component will be on lighter or darker backgrounds.
21
+ download | download | boolean | false | If true, the linked resource will be downloaded when the hyperlink is clicked.
22
+ relative | relative | boolean | false | If true, the auto URL re-write feature will be disabled.
23
+ ondark | ondark | boolean | false | DEPRECATED - use `appearance` instead.
24
+ variant | variant | string | "primary" | Sets button variant option.
25
+ href | href | string | | Defines the URL of the linked page.
26
+ rel | rel | string | | Defines the relationship between the current document and the linked document.
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
+ fluid | fluid | boolean | | If true and `type="cta"`, the hyperlink will have a fluid-width UI.
30
+ referrerpolicy | referrerpolicy | boolean | | If true, sets `strict-origin-when-cross-origin` to control the referrer information sent with requests.
31
+
32
+ ### Methods
33
+
34
+ | Name | Parameters | Return | Description |
35
+ | --- | --- | --- | --- |
36
+ register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser.
37
+
38
+ ### CSS Shadow Parts
39
+
40
+ | Name | Description |
41
+ | --- | --- |
42
+ link | Allows styling to be applied to the `a` element.
43
+ targetIcon | Allows styling to be applied to the icon that appears next to the hyperlink.
37
44
  <!-- AURO-GENERATED-CONTENT:END -->
38
45
 
39
46
  ## API Examples
@@ -48,8 +55,8 @@
48
55
  <!-- AURO-GENERATED-CONTENT:END -->
49
56
  </div>
50
57
  <div class="exampleWrapper--ondark">
51
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-ondark.html) -->
52
- <!-- The below content is automatically added from ./../apiExamples/basic-ondark.html -->
58
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-inverseAppearance.html) -->
59
+ <!-- The below content is automatically added from ./../apiExamples/basic-inverseAppearance.html -->
53
60
  <auro-hyperlink appearance="inverse">No href supplied</auro-hyperlink><br>
54
61
  Welcome to <auro-hyperlink appearance="inverse" href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
55
62
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -64,8 +71,8 @@
64
71
  Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
65
72
  ```
66
73
  <!-- AURO-GENERATED-CONTENT:END -->
67
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-ondark.html) -->
68
- <!-- The below code snippet is automatically added from ./../apiExamples/basic-ondark.html -->
74
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-inverseAppearance.html) -->
75
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic-inverseAppearance.html -->
69
76
 
70
77
  ```html
71
78
  <auro-hyperlink appearance="inverse">No href supplied</auro-hyperlink><br>
@@ -102,8 +109,8 @@ For link security purposes, when using the `target="_blank"` attribute, this imp
102
109
  <!-- AURO-GENERATED-CONTENT:END -->
103
110
  </div>
104
111
  <div class="exampleWrapper--ondark">
105
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-ondark.html) -->
106
- <!-- The below content is automatically added from ./../apiExamples/external-ondark.html -->
112
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-inverseAppearance.html) -->
113
+ <!-- The below content is automatically added from ./../apiExamples/external-inverseAppearance.html -->
107
114
  Example link with
108
115
  <auro-hyperlink
109
116
  appearance="inverse"
@@ -148,8 +155,8 @@ Example link with
148
155
  with external domain
149
156
  ```
150
157
  <!-- AURO-GENERATED-CONTENT:END -->
151
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-ondark.html) -->
152
- <!-- The below code snippet is automatically added from ./../apiExamples/external-ondark.html -->
158
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-inverseAppearance.html) -->
159
+ <!-- The below code snippet is automatically added from ./../apiExamples/external-inverseAppearance.html -->
153
160
 
154
161
  ```html
155
162
  Example link with
@@ -196,8 +203,8 @@ Example link with
196
203
  <!-- AURO-GENERATED-CONTENT:END -->
197
204
  </div>
198
205
  <div class="exampleWrapper--ondark">
199
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-referrer-ondark.html) -->
200
- <!-- The below content is automatically added from ./../apiExamples/external-referrer-ondark.html -->
206
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-referrer-inverseAppearance.html) -->
207
+ <!-- The below content is automatically added from ./../apiExamples/external-referrer-inverseAppearance.html -->
201
208
  Example link with
202
209
  <auro-hyperlink
203
210
  appearance="inverse"
@@ -225,8 +232,8 @@ Example link with
225
232
  , external domain with referrerpolicy attribute
226
233
  ```
227
234
  <!-- AURO-GENERATED-CONTENT:END -->
228
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-referrer-ondark.html) -->
229
- <!-- The below code snippet is automatically added from ./../apiExamples/external-referrer-ondark.html -->
235
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-referrer-inverseAppearance.html) -->
236
+ <!-- The below code snippet is automatically added from ./../apiExamples/external-referrer-inverseAppearance.html -->
230
237
 
231
238
  ```html
232
239
  Example link with
@@ -257,8 +264,8 @@ When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alte
257
264
  <!-- AURO-GENERATED-CONTENT:END -->
258
265
  </div>
259
266
  <div class="exampleWrapper--ondark">
260
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navStyle-ondark.html) -->
261
- <!-- The below content is automatically added from ./../apiExamples/navStyle-ondark.html -->
267
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navStyle-inverseAppearance.html) -->
268
+ <!-- The below content is automatically added from ./../apiExamples/navStyle-inverseAppearance.html -->
262
269
  <auro-hyperlink
263
270
  appearance="inverse"
264
271
  type="nav"
@@ -280,8 +287,8 @@ When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alte
280
287
  </auro-hyperlink>
281
288
  ```
282
289
  <!-- AURO-GENERATED-CONTENT:END -->
283
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navStyle-ondark.html) -->
284
- <!-- The below code snippet is automatically added from ./../apiExamples/navStyle-ondark.html -->
290
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navStyle-inverseAppearance.html) -->
291
+ <!-- The below code snippet is automatically added from ./../apiExamples/navStyle-inverseAppearance.html -->
285
292
 
286
293
  ```html
287
294
  <auro-hyperlink
@@ -408,8 +415,8 @@ Call to action (CTA) buttons combine hyperlink functionality with button styling
408
415
  <!-- AURO-GENERATED-CONTENT:END -->
409
416
  </div>
410
417
  <div class="exampleWrapper--ondark">
411
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-ondark.html) -->
412
- <!-- The below content is automatically added from ./../apiExamples/cta-ondark.html -->
418
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-inverseAppearance.html) -->
419
+ <!-- The below content is automatically added from ./../apiExamples/cta-inverseAppearance.html -->
413
420
  <auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="primary">Primary</auro-hyperlink>
414
421
  <auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="secondary">Secondary</auro-hyperlink>
415
422
  <auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="tertiary">Tertiary</auro-hyperlink>
@@ -430,8 +437,8 @@ Call to action (CTA) buttons combine hyperlink functionality with button styling
430
437
  <auro-hyperlink type="cta" href="https://www.alaskaair.com" variant="flat">Flat</auro-hyperlink>
431
438
  ```
432
439
  <!-- AURO-GENERATED-CONTENT:END -->
433
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-ondark.html) -->
434
- <!-- The below code snippet is automatically added from ./../apiExamples/cta-ondark.html -->
440
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-inverseAppearance.html) -->
441
+ <!-- The below code snippet is automatically added from ./../apiExamples/cta-inverseAppearance.html -->
435
442
 
436
443
  ```html
437
444
  <auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="primary">Primary</auro-hyperlink>
@@ -460,8 +467,8 @@ CTA buttons share the same icon support as the standard hyperlink for targets th
460
467
  <!-- AURO-GENERATED-CONTENT:END -->
461
468
  </div>
462
469
  <div class="exampleWrapper--ondark">
463
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-external-link-ondark.html) -->
464
- <!-- The below content is automatically added from ./../apiExamples/cta-external-link-ondark.html -->
470
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-external-link-inverseAppearance.html) -->
471
+ <!-- The below content is automatically added from ./../apiExamples/cta-external-link-inverseAppearance.html -->
465
472
  <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="primary">Primary</auro-hyperlink>
466
473
  <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="secondary">Secondary</auro-hyperlink>
467
474
  <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="tertiary">Tertiary</auro-hyperlink>
@@ -482,8 +489,8 @@ CTA buttons share the same icon support as the standard hyperlink for targets th
482
489
  <auro-hyperlink target="_blank" type="cta" href="https://www.alaskaair.com" variant="flat">Flat</auro-hyperlink>
483
490
  ```
484
491
  <!-- AURO-GENERATED-CONTENT:END -->
485
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-external-link-ondark.html) -->
486
- <!-- The below code snippet is automatically added from ./../apiExamples/cta-external-link-ondark.html -->
492
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-external-link-inverseAppearance.html) -->
493
+ <!-- The below code snippet is automatically added from ./../apiExamples/cta-external-link-inverseAppearance.html -->
487
494
 
488
495
  ```html
489
496
  <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="primary">Primary</auro-hyperlink>
package/demo/auro-hyperlink.min.js CHANGED
@@ -517,6 +517,19 @@ class AuroLibraryRuntimeUtils {
517
517
 
518
518
  return elemTag === tag || elem.hasAttribute(tag);
519
519
  }
520
+
521
+ /**
522
+ * Gets the text content of a named slot.
523
+ * @returns {String}
524
+ * @private
525
+ */
526
+ getSlotText(elem, name) {
527
+ const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
528
+ const nodes = slot?.assignedNodes({ flatten: true }) || [];
529
+ const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
530
+
531
+ return text || null;
532
+ }
520
533
  }
521
534
 
522
535
  /**
package/demo/index.md CHANGED
@@ -24,8 +24,8 @@ If the `href` attribute is not added, the hyperlink element will render back sim
24
24
  <!-- AURO-GENERATED-CONTENT:END -->
25
25
  </div>
26
26
  <div class="exampleWrapper--ondark" aria-hidden>
27
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-ondark.html) -->
28
- <!-- The below content is automatically added from ./../apiExamples/basic-ondark.html -->
27
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-inverseAppearance.html) -->
28
+ <!-- The below content is automatically added from ./../apiExamples/basic-inverseAppearance.html -->
29
29
  <auro-hyperlink appearance="inverse">No href supplied</auro-hyperlink><br>
30
30
  Welcome to <auro-hyperlink appearance="inverse" href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
31
31
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -40,8 +40,8 @@ If the `href` attribute is not added, the hyperlink element will render back sim
40
40
  Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
41
41
  ```
42
42
  <!-- AURO-GENERATED-CONTENT:END -->
43
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-ondark.html) -->
44
- <!-- The below code snippet is automatically added from ./../apiExamples/basic-ondark.html -->
43
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-inverseAppearance.html) -->
44
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic-inverseAppearance.html -->
45
45
 
46
46
  ```html
47
47
  <auro-hyperlink appearance="inverse">No href supplied</auro-hyperlink><br>
@@ -70,8 +70,8 @@ The `auro-icon` element comes with some pre-defined opinions, but these are easi
70
70
  <!-- AURO-GENERATED-CONTENT:END -->
71
71
  </div>
72
72
  <div class="exampleWrapper--ondark" style="display: flex; justify-content: space-between;">
73
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navPattern-ondark.html) -->
74
- <!-- The below content is automatically added from ./../apiExamples/navPattern-ondark.html -->
73
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navPattern-inverseAppearance.html) -->
74
+ <!-- The below content is automatically added from ./../apiExamples/navPattern-inverseAppearance.html -->
75
75
  <auro-hyperlink appearance="inverse" href="/last" type="nav">
76
76
  <auro-icon appearance="inverse" category="interface" name="chevron-left" customColor style="line-height: 1"></auro-icon>
77
77
  Click here to go back
@@ -98,8 +98,8 @@ The `auro-icon` element comes with some pre-defined opinions, but these are easi
98
98
  </auro-hyperlink>
99
99
  ```
100
100
  <!-- AURO-GENERATED-CONTENT:END -->
101
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navPattern-ondark.html) -->
102
- <!-- The below code snippet is automatically added from ./../apiExamples/navPattern-ondark.html -->
101
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navPattern-inverseAppearance.html) -->
102
+ <!-- The below code snippet is automatically added from ./../apiExamples/navPattern-inverseAppearance.html -->
103
103
 
104
104
  ```html
105
105
  <auro-hyperlink appearance="inverse" href="/last" type="nav">
@@ -129,8 +129,8 @@ Aside from the standard hyperlink use-case, the `auro-hyperlink` element is inte
129
129
  <!-- AURO-GENERATED-CONTENT:END -->
130
130
  </div>
131
131
  <div class="exampleWrapper--ondark">
132
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/roleButton-ondark.html) -->
133
- <!-- The below content is automatically added from ./../apiExamples/roleButton-ondark.html -->
132
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/roleButton-inverseAppearance.html) -->
133
+ <!-- The below content is automatically added from ./../apiExamples/roleButton-inverseAppearance.html -->
134
134
  <auro-hyperlink appearance="inverse" href="http://www.alaskaair.com" role="button" id="roleButton-ondark">Cancel button</auro-hyperlink>
135
135
  <!-- AURO-GENERATED-CONTENT:END -->
136
136
  </div>
@@ -143,8 +143,8 @@ Aside from the standard hyperlink use-case, the `auro-hyperlink` element is inte
143
143
  <auro-hyperlink href="http://www.alaskaair.com" role="button" id="roleButton">Cancel button</auro-hyperlink>
144
144
  ```
145
145
  <!-- AURO-GENERATED-CONTENT:END -->
146
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/roleButton-ondark.html) -->
147
- <!-- The below code snippet is automatically added from ./../apiExamples/roleButton-ondark.html -->
146
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/roleButton-inverseAppearance.html) -->
147
+ <!-- The below code snippet is automatically added from ./../apiExamples/roleButton-inverseAppearance.html -->
148
148
 
149
149
  ```html
150
150
  <auro-hyperlink appearance="inverse" href="http://www.alaskaair.com" role="button" id="roleButton-ondark">Cancel button</auro-hyperlink>