@aurodesignsystem-dev/auro-popover 0.0.0-pr131.2 → 0.0.0-pr131.4

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 (12) hide show
  1. package/README.md +29 -41
  2. package/demo/api.md +144 -166
  3. package/demo/api.min.js +2670 -2
  4. package/demo/index.md +10 -12
  5. package/demo/index.min.js +2669 -1
  6. package/demo/readme.md +139 -0
  7. package/dist/auro-popover-Bu7mQ0Hu.js +19 -0
  8. package/dist/index.js +1 -1
  9. package/dist/registered.js +1 -1
  10. package/package.json +5 -5
  11. package/demo/auro-popover.min.js +0 -2655
  12. package/dist/auro-popover-BmBnLXlx.js +0 -19
package/README.md CHANGED
@@ -47,9 +47,7 @@ The `auro-popover` element should be used in situations where users may:
47
47
  [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-popover?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
48
48
  ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
49
49
 
50
- ```shell
51
- $ npm i @aurodesignsystem/auro-popover
52
- ```
50
+ <pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-popover</code></pre>
53
51
 
54
52
  <!-- AURO-GENERATED-CONTENT:END -->
55
53
 
@@ -61,9 +59,7 @@ Defining the dependency within each project that is using the `<auro-popover>` c
61
59
  <!-- AURO-GENERATED-CONTENT:END -->
62
60
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
63
61
 
64
- ```js
65
- import "@aurodesignsystem/auro-popover";
66
- ```
62
+ <pre class="language-js"><code class="language-js">import "@aurodesignsystem/auro-popover";</code></pre>
67
63
 
68
64
  <!-- AURO-GENERATED-CONTENT:END -->
69
65
 
@@ -72,9 +68,7 @@ import "@aurodesignsystem/auro-popover";
72
68
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
73
69
  In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
74
70
 
75
- ```html
76
- <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-popover@latest/+esm"></script>
77
- ```
71
+ <pre class="language-html"><code class="language-html">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-popover@latest/+esm"&gt;&lt;/script&gt;</code></pre>
78
72
 
79
73
  <!-- AURO-GENERATED-CONTENT:END -->
80
74
 
@@ -83,12 +77,10 @@ In cases where the project is not able to process JS assets, there are pre-proce
83
77
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
84
78
  <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
85
79
 
86
- ```html
87
- <auro-popover>
80
+ <pre class="language-html"><code class="language-html">&lt;auro-popover&gt;
88
81
  Top popover content!
89
- <auro-button slot="trigger">Popover Test</auro-button>
90
- </auro-popover>
91
- ```
82
+ &lt;auro-button slot="trigger"&gt;Popover Test&lt;/auro-button&gt;
83
+ &lt;/auro-popover&gt;</code></pre>
92
84
  <!-- AURO-GENERATED-CONTENT:END -->
93
85
 
94
86
  ## Custom Component Registration for Version Management
@@ -105,47 +97,43 @@ You can do this by importing only the component class and using the `register(na
105
97
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
106
98
  <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
107
99
 
108
- ```js
109
- // Import the class only
100
+ <pre class="language-js"><code class="language-js">// Import the class only
110
101
  import { AuroPopover } from '@aurodesignsystem/auro-popover/class';
111
-
102
+ ​
112
103
  // Register with a custom name if desired
113
- AuroPopover.register('custom-popover');
114
- ```
104
+ AuroPopover.register('custom-popover');</code></pre>
115
105
 
116
106
  This will create a new custom element `<custom-popover>` that behaves exactly like `<auro-popover>`, allowing both to coexist on the same page without interfering with each other.
117
107
  <!-- AURO-GENERATED-CONTENT:END -->
118
108
  <div class="exampleWrapper exampleWrapper--flex">
119
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
120
- <!-- The below content is automatically added from ./apiExamples/custom.html -->
121
- <!-- The slot=trigger attribute is bound directly to the auro-button element -->
122
- <custom-popover>
109
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
110
+ <!-- The below content is automatically added from ./apiExamples/custom.html -->
111
+ <!-- The slot=trigger attribute is bound directly to the auro-button element -->
112
+ <custom-popover>
123
113
  Top popover content!
124
- <auro-button slot="trigger">Popover Test</auro-button>
125
- </custom-popover>
126
- <!-- Using the placement=bottom attribute -->
127
- <custom-popover placement="bottom">
114
+ <auro-button slot="trigger">Popover Test</auro-button>
115
+ </custom-popover>
116
+ <!-- Using the placement=bottom attribute -->
117
+ <custom-popover placement="bottom">
128
118
  Popover content!
129
- <auro-button slot="trigger">Popover Test</auro-button>
130
- </custom-popover>
131
- <!-- AURO-GENERATED-CONTENT:END -->
119
+ <auro-button slot="trigger">Popover Test</auro-button>
120
+ </custom-popover>
121
+ <!-- AURO-GENERATED-CONTENT:END -->
132
122
  </div>
133
123
  <auro-accordion alignRight>
134
- <span slot="trigger">See code</span>
124
+ <span slot="trigger">See code</span>
135
125
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
136
126
  <!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
137
127
 
138
- ```html
139
- <!-- The slot=trigger attribute is bound directly to the auro-button element -->
140
- <custom-popover>
128
+ <pre class="language-html"><code class="language-html">&lt;!-- The slot=trigger attribute is bound directly to the auro-button element --&gt;
129
+ &lt;custom-popover&gt;
141
130
  Top popover content!
142
- <auro-button slot="trigger">Popover Test</auro-button>
143
- </custom-popover>
144
- <!-- Using the placement=bottom attribute -->
145
- <custom-popover placement="bottom">
131
+ &lt;auro-button slot="trigger"&gt;Popover Test&lt;/auro-button&gt;
132
+ &lt;/custom-popover&gt;
133
+ &lt;!-- Using the placement=bottom attribute --&gt;
134
+ &lt;custom-popover placement="bottom"&gt;
146
135
  Popover content!
147
- <auro-button slot="trigger">Popover Test</auro-button>
148
- </custom-popover>
149
- ```
136
+ &lt;auro-button slot="trigger"&gt;Popover Test&lt;/auro-button&gt;
137
+ &lt;/custom-popover&gt;</code></pre>
150
138
  <!-- AURO-GENERATED-CONTENT:END -->
151
139
  </auro-accordion>
package/demo/api.md CHANGED
@@ -34,25 +34,23 @@ The `auro-popover` element attaches to another element and displays on hover.
34
34
  ## Basic
35
35
 
36
36
  <div class="exampleWrapper">
37
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
38
- <!-- The below content is automatically added from ./../apiExamples/basic.html -->
39
- <auro-popover>
37
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
38
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
39
+ <auro-popover>
40
40
  Top popover content!
41
- <auro-button slot="trigger">Popover Test</auro-button>
42
- </auro-popover>
43
- <!-- AURO-GENERATED-CONTENT:END -->
41
+ <auro-button slot="trigger">Popover Test</auro-button>
42
+ </auro-popover>
43
+ <!-- AURO-GENERATED-CONTENT:END -->
44
44
  </div>
45
45
  <auro-accordion alignRight>
46
- <span slot="trigger">See code</span>
46
+ <span slot="trigger">See code</span>
47
47
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
48
48
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
49
49
 
50
- ```html
51
- <auro-popover>
50
+ <pre class="language-html"><code class="language-html">&lt;auro-popover&gt;
52
51
  Top popover content!
53
- <auro-button slot="trigger">Popover Test</auro-button>
54
- </auro-popover>
55
- ```
52
+ &lt;auro-button slot="trigger"&gt;Popover Test&lt;/auro-button&gt;
53
+ &lt;/auro-popover&gt;</code></pre>
56
54
  <!-- AURO-GENERATED-CONTENT:END -->
57
55
  </auro-accordion>
58
56
 
@@ -65,45 +63,43 @@ The trigger can be any element, not just buttons or links. The component automat
65
63
  > **Keyboard behavior:** Non-interactive triggers (e.g. `<abbr>`, `<auro-icon>`) are automatically made keyboard accessible with `tabindex="0"`. `Space` and `Enter` toggle the popover open and closed, ensuring keyboard-only users have parity with mouse/hover users. This is intentional — accessibility covers more than screen readers, and without activation semantics a keyboard-only user has no way to interact with a non-interactive trigger.
66
64
 
67
65
  <div class="exampleWrapper">
68
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/non-interactive-triggers.html) -->
69
- <!-- The below content is automatically added from ./../apiExamples/non-interactive-triggers.html -->
70
- <!-- auro-icon has no internal focusable element, so the component automatically
66
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/non-interactive-triggers.html) -->
67
+ <!-- The below content is automatically added from ./../apiExamples/non-interactive-triggers.html -->
68
+ <!-- auro-icon has no internal focusable element, so the component automatically
71
69
  adds tabindex. aria-label is still required to provide an accessible name. -->
72
- <auro-popover>
70
+ <auro-popover>
73
71
  This flight offers priority boarding.
74
- <auro-icon slot="trigger" category="interface" name="info-stroke" aria-label="More information"></auro-icon>
75
- </auro-popover>
76
- <br><br>
77
- <!-- Native elements like <abbr> are automatically made keyboard accessible by the component -->
78
- <p>Congratulations, you just achieved
79
- <auro-popover>
72
+ <auro-icon slot="trigger" category="interface" name="info-stroke" aria-label="More information"></auro-icon>
73
+ </auro-popover>
74
+ <br><br>
75
+ <!-- Native elements like <abbr> are automatically made keyboard accessible by the component -->
76
+ <p>Congratulations, you just achieved
77
+ <auro-popover>
80
78
  Most Valuable Passenger — Alaska Airlines' mid-tier elite status level.
81
- <abbr slot="trigger" style="color: orangered">MVP</abbr>
82
- </auro-popover> status!
83
- </p>
84
- <!-- AURO-GENERATED-CONTENT:END -->
79
+ <abbr slot="trigger" style="color: orangered">MVP</abbr>
80
+ </auro-popover> status!
81
+ </p>
82
+ <!-- AURO-GENERATED-CONTENT:END -->
85
83
  </div>
86
84
  <auro-accordion alignRight>
87
- <span slot="trigger">See code</span>
85
+ <span slot="trigger">See code</span>
88
86
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/non-interactive-triggers.html) -->
89
87
  <!-- The below code snippet is automatically added from ./../apiExamples/non-interactive-triggers.html -->
90
88
 
91
- ```html
92
- <!-- auro-icon has no internal focusable element, so the component automatically
93
- adds tabindex. aria-label is still required to provide an accessible name. -->
94
- <auro-popover>
89
+ <pre class="language-html"><code class="language-html">&lt;!-- auro-icon has no internal focusable element, so the component automatically
90
+ adds tabindex. aria-label is still required to provide an accessible name. --&gt;
91
+ &lt;auro-popover&gt;
95
92
  This flight offers priority boarding.
96
- <auro-icon slot="trigger" category="interface" name="info-stroke" aria-label="More information"></auro-icon>
97
- </auro-popover>
98
- <br><br>
99
- <!-- Native elements like <abbr> are automatically made keyboard accessible by the component -->
100
- <p>Congratulations, you just achieved
101
- <auro-popover>
93
+ &lt;auro-icon slot="trigger" category="interface" name="info-stroke" aria-label="More information"&gt;&lt;/auro-icon&gt;
94
+ &lt;/auro-popover&gt;
95
+ &lt;br&gt;&lt;br&gt;
96
+ &lt;!-- Native elements like &lt;abbr&gt; are automatically made keyboard accessible by the component --&gt;
97
+ &lt;p&gt;Congratulations, you just achieved
98
+ &lt;auro-popover&gt;
102
99
  Most Valuable Passenger — Alaska Airlines' mid-tier elite status level.
103
- <abbr slot="trigger" style="color: orangered">MVP</abbr>
104
- </auro-popover> status!
105
- </p>
106
- ```
100
+ &lt;abbr slot="trigger" style="color: orangered"&gt;MVP&lt;/abbr&gt;
101
+ &lt;/auro-popover&gt; status!
102
+ &lt;/p&gt;</code></pre>
107
103
  <!-- AURO-GENERATED-CONTENT:END -->
108
104
  </auro-accordion>
109
105
 
@@ -114,25 +110,23 @@ The trigger can be any element, not just buttons or links. The component automat
114
110
  Use the `addSpace` attribute to add more space between the popover and it's trigger.
115
111
 
116
112
  <div class="exampleWrapper">
117
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/add-space.html) -->
118
- <!-- The below content is automatically added from ../apiExamples/add-space.html -->
119
- <auro-popover addSpace>
113
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/add-space.html) -->
114
+ <!-- The below content is automatically added from ../apiExamples/add-space.html -->
115
+ <auro-popover addSpace>
120
116
  Notice this popover is a little<br>further away from the trigger.
121
- <auro-button slot="trigger">Popover w/additional space above</auro-button>
122
- </auro-popover>
123
- <!-- AURO-GENERATED-CONTENT:END -->
117
+ <auro-button slot="trigger">Popover w/additional space above</auro-button>
118
+ </auro-popover>
119
+ <!-- AURO-GENERATED-CONTENT:END -->
124
120
  </div>
125
121
  <auro-accordion alignRight>
126
- <span slot="trigger">See code</span>
122
+ <span slot="trigger">See code</span>
127
123
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/add-space.html) -->
128
124
  <!-- The below code snippet is automatically added from ../apiExamples/add-space.html -->
129
125
 
130
- ```html
131
- <auro-popover addSpace>
132
- Notice this popover is a little<br>further away from the trigger.
133
- <auro-button slot="trigger">Popover w/additional space above</auro-button>
134
- </auro-popover>
135
- ```
126
+ <pre class="language-html"><code class="language-html">&lt;auro-popover addSpace&gt;
127
+ Notice this popover is a little&lt;br&gt;further away from the trigger.
128
+ &lt;auro-button slot="trigger"&gt;Popover w/additional space above&lt;/auro-button&gt;
129
+ &lt;/auro-popover&gt;</code></pre>
136
130
  <!-- AURO-GENERATED-CONTENT:END -->
137
131
  </auro-accordion>
138
132
 
@@ -141,57 +135,53 @@ Use the `addSpace` attribute to add more space between the popover and it's trig
141
135
  Use the `boundary` property to set the overflow boundary for the `auro-popover`, shifting the x-axis of the `auro-popover`. This example demonstrates an `auro-popover` in a container without a `boundary` set vs an `auro-popover` in a container with a `boundary` set. The value passed to the `boundary` attribute can be a valid selector string or HTML Element.
142
136
 
143
137
  <div class="exampleWrapper">
144
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/boundary.html) -->
145
- <!-- The below content is automatically added from ../apiExamples/boundary.html -->
146
- <strong>Example with no boundary set</strong>
147
- <div style="height: 150px; width: 200px; background-color: #fcfcfc; border: 1px solid darkgray;">
148
- <auro-popover placement="bottom">
138
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/boundary.html) -->
139
+ <!-- The below content is automatically added from ../apiExamples/boundary.html -->
140
+ <strong>Example with no boundary set</strong>
141
+ <div style="height: 150px; width: 200px; background-color: #fcfcfc; border: 1px solid darkgray;">
142
+ <auro-popover placement="bottom">
149
143
  Popover content!
150
- <auro-button slot="trigger">Popover Test</auro-button>
151
- </auro-popover>
152
- </div>
153
- <strong>Example with boundary set</strong>
154
- <div id="popoverBoundary" style="height: 150px; width: 200px; background-color: #fcfcfc; border: 1px solid darkgray;">
155
- <auro-popover class="boundaryExample" placement="bottom">
144
+ <auro-button slot="trigger">Popover Test</auro-button>
145
+ </auro-popover>
146
+ </div>
147
+ <strong>Example with boundary set</strong>
148
+ <div id="popoverBoundary" style="height: 150px; width: 200px; background-color: #fcfcfc; border: 1px solid darkgray;">
149
+ <auro-popover class="boundaryExample" placement="bottom">
156
150
  Popover content!
157
- <auro-button slot="trigger">Popover Test</auro-button>
158
- </auro-popover>
159
- </div>
160
- <!-- AURO-GENERATED-CONTENT:END -->
151
+ <auro-button slot="trigger">Popover Test</auro-button>
152
+ </auro-popover>
153
+ </div>
154
+ <!-- AURO-GENERATED-CONTENT:END -->
161
155
  </div>
162
156
  <auro-accordion alignRight>
163
- <span slot="trigger">See code</span>
157
+ <span slot="trigger">See code</span>
164
158
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/boundary.html) -->
165
159
  <!-- The below code snippet is automatically added from ../apiExamples/boundary.html -->
166
160
 
167
- ```html
168
- <strong>Example with no boundary set</strong>
169
- <div style="height: 150px; width: 200px; background-color: #fcfcfc; border: 1px solid darkgray;">
170
- <auro-popover placement="bottom">
161
+ <pre class="language-html"><code class="language-html">&lt;strong&gt;Example with no boundary set&lt;/strong&gt;
162
+ &lt;div style="height: 150px; width: 200px; background-color: #fcfcfc; border: 1px solid darkgray;"&gt;
163
+ &lt;auro-popover placement="bottom"&gt;
171
164
  Popover content!
172
- <auro-button slot="trigger">Popover Test</auro-button>
173
- </auro-popover>
174
- </div>
175
- <strong>Example with boundary set</strong>
176
- <div id="popoverBoundary" style="height: 150px; width: 200px; background-color: #fcfcfc; border: 1px solid darkgray;">
177
- <auro-popover class="boundaryExample" placement="bottom">
165
+ &lt;auro-button slot="trigger"&gt;Popover Test&lt;/auro-button&gt;
166
+ &lt;/auro-popover&gt;
167
+ &lt;/div&gt;
168
+ &lt;strong&gt;Example with boundary set&lt;/strong&gt;
169
+ &lt;div id="popoverBoundary" style="height: 150px; width: 200px; background-color: #fcfcfc; border: 1px solid darkgray;"&gt;
170
+ &lt;auro-popover class="boundaryExample" placement="bottom"&gt;
178
171
  Popover content!
179
- <auro-button slot="trigger">Popover Test</auro-button>
180
- </auro-popover>
181
- </div>
182
- ```
172
+ &lt;auro-button slot="trigger"&gt;Popover Test&lt;/auro-button&gt;
173
+ &lt;/auro-popover&gt;
174
+ &lt;/div&gt;</code></pre>
183
175
  <!-- AURO-GENERATED-CONTENT:END -->
184
176
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/boundary.js) -->
185
177
  <!-- The below code snippet is automatically added from ../apiExamples/boundary.js -->
186
178
 
187
- ```js
188
- export function boundaryExample() {
179
+ <pre class="language-js"><code class="language-js">export function boundaryExample() {
189
180
  const boundaryExample = document.querySelector(".boundaryExample");
190
181
  const popoverBoundary = document.querySelector("#popoverBoundary");
191
-
182
+ ​
192
183
  boundaryExample.boundary = popoverBoundary;
193
- }
194
- ```
184
+ }</code></pre>
195
185
  <!-- AURO-GENERATED-CONTENT:END -->
196
186
  </auro-accordion>
197
187
 
@@ -200,25 +190,23 @@ export function boundaryExample() {
200
190
  When the `disabled` attribute is present, the popover will not appear on hover or focus.
201
191
 
202
192
  <div class="exampleWrapper">
203
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/disabled.html) -->
204
- <!-- The below content is automatically added from ../apiExamples/disabled.html -->
205
- <auro-popover disabled>
193
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/disabled.html) -->
194
+ <!-- The below content is automatically added from ../apiExamples/disabled.html -->
195
+ <auro-popover disabled>
206
196
  Top popover content!
207
- <auro-button disabled slot="trigger">Popover Test</auro-button>
208
- </auro-popover>
209
- <!-- AURO-GENERATED-CONTENT:END -->
197
+ <auro-button disabled slot="trigger">Popover Test</auro-button>
198
+ </auro-popover>
199
+ <!-- AURO-GENERATED-CONTENT:END -->
210
200
  </div>
211
201
  <auro-accordion alignRight>
212
- <span slot="trigger">See code</span>
202
+ <span slot="trigger">See code</span>
213
203
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/disabled.html) -->
214
204
  <!-- The below code snippet is automatically added from ../apiExamples/disabled.html -->
215
205
 
216
- ```html
217
- <auro-popover disabled>
206
+ <pre class="language-html"><code class="language-html">&lt;auro-popover disabled&gt;
218
207
  Top popover content!
219
- <auro-button disabled slot="trigger">Popover Test</auro-button>
220
- </auro-popover>
221
- ```
208
+ &lt;auro-button disabled slot="trigger"&gt;Popover Test&lt;/auro-button&gt;
209
+ &lt;/auro-popover&gt;</code></pre>
222
210
  <!-- AURO-GENERATED-CONTENT:END -->
223
211
  </auro-accordion>
224
212
 
@@ -227,25 +215,23 @@ When the `disabled` attribute is present, the popover will not appear on hover o
227
215
  Use the `placement` attribute to set the position of the popover in relation to the trigger element. Options are `top` and `bottom`.
228
216
 
229
217
  <div class="exampleWrapper">
230
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/placement.html) -->
231
- <!-- The below content is automatically added from ../apiExamples/placement.html -->
232
- <auro-popover placement="bottom">
218
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/placement.html) -->
219
+ <!-- The below content is automatically added from ../apiExamples/placement.html -->
220
+ <auro-popover placement="bottom">
233
221
  Bottom popover content!
234
- <auro-button slot="trigger">Popover Test</auro-button>
235
- </auro-popover>
236
- <!-- AURO-GENERATED-CONTENT:END -->
222
+ <auro-button slot="trigger">Popover Test</auro-button>
223
+ </auro-popover>
224
+ <!-- AURO-GENERATED-CONTENT:END -->
237
225
  </div>
238
226
  <auro-accordion alignRight>
239
- <span slot="trigger">See code</span>
227
+ <span slot="trigger">See code</span>
240
228
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/placement.html) -->
241
229
  <!-- The below code snippet is automatically added from ../apiExamples/placement.html -->
242
230
 
243
- ```html
244
- <auro-popover placement="bottom">
231
+ <pre class="language-html"><code class="language-html">&lt;auro-popover placement="bottom"&gt;
245
232
  Bottom popover content!
246
- <auro-button slot="trigger">Popover Test</auro-button>
247
- </auro-popover>
248
- ```
233
+ &lt;auro-button slot="trigger"&gt;Popover Test&lt;/auro-button&gt;
234
+ &lt;/auro-popover&gt;</code></pre>
249
235
  <!-- AURO-GENERATED-CONTENT:END -->
250
236
  </auro-accordion>
251
237
 
@@ -254,33 +240,31 @@ Use the `placement` attribute to set the position of the popover in relation to
254
240
  Use the `removeSpace` attribute to lessen the space between the popover and it's trigger.
255
241
 
256
242
  <div class="exampleWrapper">
257
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/remove-space.html) -->
258
- <!-- The below content is automatically added from ../apiExamples/remove-space.html -->
259
- <auro-popover removeSpace>
243
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/remove-space.html) -->
244
+ <!-- The below content is automatically added from ../apiExamples/remove-space.html -->
245
+ <auro-popover removeSpace>
260
246
  Notice this popover is a little<br>closer to the trigger.
261
- <auro-button slot="trigger">Popover w/less space above</auro-button>
262
- </auro-popover>
263
- <auro-popover placement="bottom" removeSpace>
247
+ <auro-button slot="trigger">Popover w/less space above</auro-button>
248
+ </auro-popover>
249
+ <auro-popover placement="bottom" removeSpace>
264
250
  Notice this popover is a little<br>closer to the trigger.
265
- <auro-button slot="trigger">Popover w/less space below</auro-button>
266
- </auro-popover>
267
- <!-- AURO-GENERATED-CONTENT:END -->
251
+ <auro-button slot="trigger">Popover w/less space below</auro-button>
252
+ </auro-popover>
253
+ <!-- AURO-GENERATED-CONTENT:END -->
268
254
  </div>
269
255
  <auro-accordion alignRight>
270
- <span slot="trigger">See code</span>
256
+ <span slot="trigger">See code</span>
271
257
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/remove-space.html) -->
272
258
  <!-- The below code snippet is automatically added from ../apiExamples/remove-space.html -->
273
259
 
274
- ```html
275
- <auro-popover removeSpace>
276
- Notice this popover is a little<br>closer to the trigger.
277
- <auro-button slot="trigger">Popover w/less space above</auro-button>
278
- </auro-popover>
279
- <auro-popover placement="bottom" removeSpace>
280
- Notice this popover is a little<br>closer to the trigger.
281
- <auro-button slot="trigger">Popover w/less space below</auro-button>
282
- </auro-popover>
283
- ```
260
+ <pre class="language-html"><code class="language-html">&lt;auro-popover removeSpace&gt;
261
+ Notice this popover is a little&lt;br&gt;closer to the trigger.
262
+ &lt;auro-button slot="trigger"&gt;Popover w/less space above&lt;/auro-button&gt;
263
+ &lt;/auro-popover&gt;
264
+ &lt;auro-popover placement="bottom" removeSpace&gt;
265
+ Notice this popover is a little&lt;br&gt;closer to the trigger.
266
+ &lt;auro-button slot="trigger"&gt;Popover w/less space below&lt;/auro-button&gt;
267
+ &lt;/auro-popover&gt;</code></pre>
284
268
  <!-- AURO-GENERATED-CONTENT:END -->
285
269
  </auro-accordion>
286
270
 
@@ -295,53 +279,49 @@ Binding a `trigger` event to a hyperlink is **not** recommended. This is a poor
295
279
  The use of a hyperlink to trigger an event in the UI is semantically incorrect and this will present itself as a confusing scenario to assistive devices.
296
280
 
297
281
  <div class="exampleWrapper">
298
- <auro-alert type="error" noIcon>
299
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/not-recommended.html) -->
300
- <!-- The below content is automatically added from ../apiExamples/not-recommended.html -->
301
- <auro-popover>
282
+ <auro-alert type="error" noIcon>
283
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/not-recommended.html) -->
284
+ <!-- The below content is automatically added from ../apiExamples/not-recommended.html -->
285
+ <auro-popover>
302
286
  This works, but not recommended
303
- <auro-hyperlink href="#" relative nav slot="trigger">hyperlink popover trigger</auro-hyperlink>
304
- </auro-popover>
305
- <!-- AURO-GENERATED-CONTENT:END -->
306
- </auro-alert>
287
+ <auro-hyperlink href="#" relative nav slot="trigger">hyperlink popover trigger</auro-hyperlink>
288
+ </auro-popover>
289
+ <!-- AURO-GENERATED-CONTENT:END -->
290
+ </auro-alert>
307
291
  </div>
308
292
  <auro-accordion alignRight>
309
- <span slot="trigger">See code</span>
293
+ <span slot="trigger">See code</span>
310
294
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/not-recommended.html) -->
311
295
  <!-- The below code snippet is automatically added from ../apiExamples/not-recommended.html -->
312
296
 
313
- ```html
314
- <auro-popover>
297
+ <pre class="language-html"><code class="language-html">&lt;auro-popover&gt;
315
298
  This works, but not recommended
316
- <auro-hyperlink href="#" relative nav slot="trigger">hyperlink popover trigger</auro-hyperlink>
317
- </auro-popover>
318
- ```
299
+ &lt;auro-hyperlink href="#" relative nav slot="trigger"&gt;hyperlink popover trigger&lt;/auro-hyperlink&gt;
300
+ &lt;/auro-popover&gt;</code></pre>
319
301
  <!-- AURO-GENERATED-CONTENT:END -->
320
302
  </auro-accordion>
321
303
  In the event that a hyperlink UI is desired, it is recommended to use the `role="button"` semantic reassignment to the hyperlink element.
322
304
 
323
305
  <div class="exampleWrapper">
324
- <auro-alert type="success" noIcon>
325
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/recommended.html) -->
326
- <!-- The below content is automatically added from ../apiExamples/recommended.html -->
327
- <auro-popover>
306
+ <auro-alert type="success" noIcon>
307
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/recommended.html) -->
308
+ <!-- The below content is automatically added from ../apiExamples/recommended.html -->
309
+ <auro-popover>
328
310
  Role button is recommended
329
- <auro-hyperlink role="button" slot="trigger">hyperlink, role button</auro-hyperlink>
330
- </auro-popover>
331
- <!-- AURO-GENERATED-CONTENT:END -->
332
- </auro-alert>
311
+ <auro-hyperlink role="button" slot="trigger">hyperlink, role button</auro-hyperlink>
312
+ </auro-popover>
313
+ <!-- AURO-GENERATED-CONTENT:END -->
314
+ </auro-alert>
333
315
  </div>
334
316
  <auro-accordion alignRight>
335
- <span slot="trigger">See code</span>
317
+ <span slot="trigger">See code</span>
336
318
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/recommended.html) -->
337
319
  <!-- The below code snippet is automatically added from ../apiExamples/recommended.html -->
338
320
 
339
- ```html
340
- <auro-popover>
321
+ <pre class="language-html"><code class="language-html">&lt;auro-popover&gt;
341
322
  Role button is recommended
342
- <auro-hyperlink role="button" slot="trigger">hyperlink, role button</auro-hyperlink>
343
- </auro-popover>
344
- ```
323
+ &lt;auro-hyperlink role="button" slot="trigger"&gt;hyperlink, role button&lt;/auro-hyperlink&gt;
324
+ &lt;/auro-popover&gt;</code></pre>
345
325
  <!-- AURO-GENERATED-CONTENT:END -->
346
326
  </auro-accordion>
347
327
 
@@ -352,14 +332,12 @@ The component may be restyled by changing the values of the following token(s).
352
332
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
353
333
  <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
354
334
 
355
- ```scss
356
- @use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as vac;
335
+ <pre class="language-scss"><code class="language-scss">@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as vac;
357
336
  @use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
358
-
337
+ ​
359
338
  :host {
360
339
  --ds-auro-popover-boxshadow-color: var(--ds-elevation-200, #{vac.$ds-elevation-200});
361
340
  --ds-auro-popover-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
362
341
  --ds-auro-popover-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
363
- }
364
- ```
342
+ }</code></pre>
365
343
  <!-- AURO-GENERATED-CONTENT:END -->