@aurodesignsystem-dev/auro-popover 0.0.0-pr131.6 → 0.0.0-pr135.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 (10) hide show
  1. package/demo/api.html +1 -0
  2. package/demo/api.md +121 -10
  3. package/demo/api.min.js +103 -42
  4. package/demo/index.min.js +103 -42
  5. package/dist/auro-popover-C5oqJxu2.js +19 -0
  6. package/dist/index.d.ts +28 -4
  7. package/dist/index.js +1 -1
  8. package/dist/registered.js +1 -1
  9. package/package.json +5 -5
  10. package/dist/auro-popover-Bu7mQ0Hu.js +0 -19
package/demo/api.html CHANGED
@@ -58,6 +58,7 @@
58
58
 
59
59
  <script type="module" data-demo-script="true">
60
60
  import { initExamples } from "./api.min.js"
61
+
61
62
  initExamples();
62
63
  </script>
63
64
  </body>
package/demo/api.md CHANGED
@@ -9,12 +9,12 @@ The `auro-popover` element attaches to another element and displays on hover.
9
9
 
10
10
  | Properties | Attributes | Modifiers | Type | Default | Description |
11
11
  | ----------- | ----------- | --------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
12
- | addSpace | addSpace | | boolean | | Adds additional top and bottom space around the appearance of the popover in relation to the trigger. |
12
+ | addSpace | addspace | | boolean | | Adds additional top and bottom space around the appearance of the popover in relation to the trigger. |
13
13
  | boundary | boundary | | string \| object | | The element to use as the boundary for the popover. Can be a query selector or an HTML element. |
14
14
  | disabled | disabled | | boolean | | Disables the popover from showing on hover and focus. |
15
15
  | for | for | | string | | Directly associates the popover with a trigger element with the given ID. In most cases, this should not be necessary and set `slot="trigger"` on the element instead. |
16
16
  | placement | placement | | string | `top` | Position for popover in relation to the element {'top' \| 'bottom'}. |
17
- | removeSpace | removeSpace | | boolean | | Removes top and bottom space around the appearance of the popover in relation to the trigger. |
17
+ | removeSpace | removespace | | boolean | | Removes top and bottom space around the appearance of the popover in relation to the trigger. |
18
18
  | | data-show | | boolean | `false` | Whether the popover is currently visible. Reflected as the `data-show`<br>attribute so host-level CSS selectors (e.g. `:host([data-show])`) work.<br>Also drives `aria-hidden` on the popover div in the template. |
19
19
 
20
20
  ### Methods
@@ -29,6 +29,14 @@ The `auro-popover` element attaches to another element and displays on hover.
29
29
  | --------- | ----------------------------------------------------------------- |
30
30
  | (default) | Default unnamed slot for the use of popover content |
31
31
  | trigger | The element in this slot triggers hiding and showing the popover. |
32
+
33
+ ### CSS Shadow Parts
34
+
35
+ | Name | Description |
36
+ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
37
+ | arrow | Apply CSS to the arrow's positioning anchor. The visible arrow shape is its `::before` pseudo-element, so target `::part(arrow)::before` to restyle color, shadow, or size. Arrow position is set by Popper as inline styles and cannot be overridden through this part. |
38
+ | popover | Apply CSS to the popover bubble container. |
39
+ | trigger | Apply CSS to the wrapper around the trigger slot. Use to correct alignment between the trigger and the popover. |
32
40
  <!-- AURO-GENERATED-CONTENT:END -->
33
41
 
34
42
  ## Basic
@@ -107,12 +115,12 @@ The trigger can be any element, not just buttons or links. The component automat
107
115
 
108
116
  ### Add Space Around Popover
109
117
 
110
- Use the `addSpace` attribute to add more space between the popover and it's trigger.
118
+ Use the `addspace` attribute to add more space between the popover and it's trigger.
111
119
 
112
120
  <div class="exampleWrapper">
113
121
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/add-space.html) -->
114
122
  <!-- The below content is automatically added from ../apiExamples/add-space.html -->
115
- <auro-popover addSpace>
123
+ <auro-popover addspace>
116
124
  Notice this popover is a little<br>further away from the trigger.
117
125
  <auro-button slot="trigger">Popover w/additional space above</auro-button>
118
126
  </auro-popover>
@@ -123,7 +131,7 @@ Use the `addSpace` attribute to add more space between the popover and it's trig
123
131
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/add-space.html) -->
124
132
  <!-- The below code snippet is automatically added from ../apiExamples/add-space.html -->
125
133
 
126
- <pre class="language-html"><code class="language-html">&lt;auro-popover addSpace&gt;
134
+ <pre class="language-html"><code class="language-html">&lt;auro-popover addspace&gt;
127
135
  Notice this popover is a little&lt;br&gt;further away from the trigger.
128
136
  &lt;auro-button slot="trigger"&gt;Popover w/additional space above&lt;/auro-button&gt;
129
137
  &lt;/auro-popover&gt;</code></pre>
@@ -237,16 +245,16 @@ Use the `placement` attribute to set the position of the popover in relation to
237
245
 
238
246
  ### Remove Space Around Popover
239
247
 
240
- Use the `removeSpace` attribute to lessen the space between the popover and it's trigger.
248
+ Use the `removespace` attribute to lessen the space between the popover and it's trigger.
241
249
 
242
250
  <div class="exampleWrapper">
243
251
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/remove-space.html) -->
244
252
  <!-- The below content is automatically added from ../apiExamples/remove-space.html -->
245
- <auro-popover removeSpace>
253
+ <auro-popover removespace>
246
254
  Notice this popover is a little<br>closer to the trigger.
247
255
  <auro-button slot="trigger">Popover w/less space above</auro-button>
248
256
  </auro-popover>
249
- <auro-popover placement="bottom" removeSpace>
257
+ <auro-popover placement="bottom" removespace>
250
258
  Notice this popover is a little<br>closer to the trigger.
251
259
  <auro-button slot="trigger">Popover w/less space below</auro-button>
252
260
  </auro-popover>
@@ -257,11 +265,11 @@ Use the `removeSpace` attribute to lessen the space between the popover and it's
257
265
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/remove-space.html) -->
258
266
  <!-- The below code snippet is automatically added from ../apiExamples/remove-space.html -->
259
267
 
260
- <pre class="language-html"><code class="language-html">&lt;auro-popover removeSpace&gt;
268
+ <pre class="language-html"><code class="language-html">&lt;auro-popover removespace&gt;
261
269
  Notice this popover is a little&lt;br&gt;closer to the trigger.
262
270
  &lt;auro-button slot="trigger"&gt;Popover w/less space above&lt;/auro-button&gt;
263
271
  &lt;/auro-popover&gt;
264
- &lt;auro-popover placement="bottom" removeSpace&gt;
272
+ &lt;auro-popover placement="bottom" removespace&gt;
265
273
  Notice this popover is a little&lt;br&gt;closer to the trigger.
266
274
  &lt;auro-button slot="trigger"&gt;Popover w/less space below&lt;/auro-button&gt;
267
275
  &lt;/auro-popover&gt;</code></pre>
@@ -325,6 +333,109 @@ In the event that a hyperlink UI is desired, it is recommended to use the `role=
325
333
  <!-- AURO-GENERATED-CONTENT:END -->
326
334
  </auro-accordion>
327
335
 
336
+ ## Style Component with CSS Shadow Parts
337
+
338
+ The component exposes the `popover` bubble, the `arrow`, and the `trigger` wrapper as CSS shadow parts, so they can be styled from outside the shadow DOM.
339
+
340
+ Two things to know before reaching for these:
341
+
342
+ **The arrow's visible shape is a pseudo-element.** `::part(arrow)` selects an invisible positioning anchor; the diamond you see is its `::before`. Target `::part(arrow)::before` to change color, shadow, or size. Because the arrow and the bubble are painted separately, recolor both together or the seam between them will show.
343
+
344
+ **The arrow's position belongs to the component.** Placement is set by Popper as inline styles that are recalculated every time the popover opens, so `transform`, `top`, `left`, and `position` cannot be overridden through `::part(arrow)`. Use the `placement` attribute to choose which side the popover appears on. Resizing the arrow via `::part(arrow)::before` also shifts where it meets the bubble, so verify both `placement="top"` and `placement="bottom"` if you change its dimensions.
345
+
346
+ To adjust spacing between the popover and its trigger, prefer the `addspace` and `removespace` attributes over part overrides.
347
+
348
+ <div class="exampleWrapper">
349
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/cssParts.html) -->
350
+ <!-- The below content is automatically added from ../apiExamples/cssParts.html -->
351
+ <!-- Selectors are scoped to .cssPartsExample so this demo does not restyle
352
+ other popovers on the page. Keep every line in this <style> block at column
353
+ zero with no blank lines: the docs generator indents injected examples, and
354
+ markdown turns 4-space-indented lines into a code block, which silently
355
+ breaks the stylesheet. -->
356
+ <style>
357
+ /* The bubble container. */
358
+ .cssPartsExample auro-popover::part(popover) {
359
+ color: #fff;
360
+ border-radius: 0;
361
+ background-color: #01426a;
362
+ }
363
+ /* The visible arrow is the ::before pseudo-element of the arrow part, so
364
+ recolor that rather than ::part(arrow) itself. Keep it matched to the
365
+ bubble's background or the seam between them will show. */
366
+ .cssPartsExample auro-popover::part(arrow)::before {
367
+ box-shadow: none;
368
+ background-color: #01426a;
369
+ }
370
+ /* The trigger wrapper. Use it to line an icon trigger up with adjacent text
371
+ instead of resorting to layout workarounds. */
372
+ .cssPartsExample .iconTrigger auro-popover::part(trigger) {
373
+ display: inline-flex;
374
+ align-items: center;
375
+ }
376
+ </style>
377
+ <div class="cssPartsExample">
378
+ <auro-popover>
379
+ This bubble and its arrow are restyled from outside the shadow DOM.
380
+ <auro-button slot="trigger">Popover Test</auro-button>
381
+ </auro-popover>
382
+ <p class="iconTrigger">
383
+ Checked baggage fees apply
384
+ <auro-popover placement="bottom">
385
+ Fees vary by route and fare class.
386
+ <auro-icon slot="trigger" category="interface" name="info-stroke" aria-label="More information"></auro-icon>
387
+ </auro-popover>
388
+ </p>
389
+ </div>
390
+ <!-- AURO-GENERATED-CONTENT:END -->
391
+ </div>
392
+ <auro-accordion alignRight>
393
+ <span slot="trigger">See code</span>
394
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/cssParts.html) -->
395
+ <!-- The below code snippet is automatically added from ../apiExamples/cssParts.html -->
396
+
397
+ <pre class="language-html"><code class="language-html">&lt;!-- Selectors are scoped to .cssPartsExample so this demo does not restyle
398
+ other popovers on the page. Keep every line in this &lt;style&gt; block at column
399
+ zero with no blank lines: the docs generator indents injected examples, and
400
+ markdown turns 4-space-indented lines into a code block, which silently
401
+ breaks the stylesheet. --&gt;
402
+ &lt;style&gt;
403
+ /* The bubble container. */
404
+ .cssPartsExample auro-popover::part(popover) {
405
+ color: #fff;
406
+ border-radius: 0;
407
+ background-color: #01426a;
408
+ }
409
+ /* The visible arrow is the ::before pseudo-element of the arrow part, so
410
+ recolor that rather than ::part(arrow) itself. Keep it matched to the
411
+ bubble's background or the seam between them will show. */
412
+ .cssPartsExample auro-popover::part(arrow)::before {
413
+ box-shadow: none;
414
+ background-color: #01426a;
415
+ }
416
+ /* The trigger wrapper. Use it to line an icon trigger up with adjacent text
417
+ instead of resorting to layout workarounds. */
418
+ .cssPartsExample .iconTrigger auro-popover::part(trigger) {
419
+ display: inline-flex;
420
+ align-items: center;
421
+ }
422
+ &lt;/style&gt;
423
+ &lt;div class="cssPartsExample"&gt;
424
+ &lt;auro-popover&gt;
425
+ This bubble and its arrow are restyled from outside the shadow DOM.
426
+ &lt;auro-button slot="trigger"&gt;Popover Test&lt;/auro-button&gt;
427
+ &lt;/auro-popover&gt;
428
+ &lt;p class="iconTrigger"&gt;
429
+ Checked baggage fees apply
430
+ &lt;auro-popover placement="bottom"&gt;
431
+ Fees vary by route and fare class.
432
+ &lt;auro-icon slot="trigger" category="interface" name="info-stroke" aria-label="More information"&gt;&lt;/auro-icon&gt;
433
+ &lt;/auro-popover&gt;
434
+ &lt;/p&gt;
435
+ &lt;/div&gt;</code></pre>
436
+ <!-- AURO-GENERATED-CONTENT:END -->
437
+ </auro-accordion>
438
+
328
439
  ## Restyle Component with CSS Variables
329
440
 
330
441
  The component may be restyled by changing the values of the following token(s).
package/demo/api.min.js CHANGED
@@ -1998,7 +1998,10 @@ class Popover {
1998
1998
  return;
1999
1999
  }
2000
2000
  const reference = state.elements.reference;
2001
- if (!reference || typeof reference.getBoundingClientRect !== "function") {
2001
+ if (
2002
+ !reference ||
2003
+ typeof reference.getBoundingClientRect !== "function"
2004
+ ) {
2002
2005
  return;
2003
2006
  }
2004
2007
  const r = reference.getBoundingClientRect();
@@ -2049,10 +2052,10 @@ class Popover {
2049
2052
  }
2050
2053
  }
2051
2054
 
2052
- var colorCss = i$3`::slotted(*):not([onDark]),::slotted(*):not([appearance=inverse]){color:var(--ds-auro-popover-text-color)}.popover{background-color:var(--ds-auro-popover-container-color);box-shadow:var(--ds-auro-popover-boxshadow-color)}.arrow:before{background-color:var(--ds-auro-popover-container-color);box-shadow:2px 2px 1px 0 var(--ds-auro-popover-boxshadow-color)}
2055
+ var colorCss = i$3`::slotted(*):not([onDark]),::slotted(*):not([appearance=inverse]){color:var(--ds-auro-popover-text-color)}.popover{background-color:var(--ds-auro-popover-container-color);box-shadow:var(--ds-auro-popover-boxshadow-color)}.arrow:before{background-color:var(--ds-auro-popover-container-color)}
2053
2056
  `;
2054
2057
 
2055
- var styleCss = i$3`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, .875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, .75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, .875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, .625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host(:not([data-show])) .popover,:host([disabled]) .popover,:host([addSpace]) :host(:not([data-show])) .popover{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}::slotted(*){white-space:normal}::slotted(*:hover){cursor:pointer}[data-trigger-placement]::slotted(*:hover){position:relative}[data-trigger-placement]::slotted(*:hover):before{position:absolute;left:0;display:block;width:100%;height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, .25rem));content:""}[data-trigger-placement^=top]::slotted(*:hover):before{top:calc(-1 * (var(--ds-size-200, 1rem) + var(--ds-size-50, .25rem)))}[data-trigger-placement^=bottom]::slotted(*:hover):before{bottom:calc(-1 * (var(--ds-size-200, 1rem) + var(--ds-size-50, .25rem)))}:host([data-show]) .popover{z-index:var(--ds-depth-tooltip, 400)}:host([removeSpace]) .popover{margin:calc(-1 * (var(--ds-size-50, .25rem) + 1px)) 0!important}:host([addSpace]) .popover{margin:var(--ds-size-200, 1rem) 0!important}:host([addSpace]) [data-trigger-placement]::slotted(*:hover):before{height:var(--ds-size-500, 2.5rem)}:host([addSpace]) [data-trigger-placement^=top]::slotted(*:hover):before{top:calc(-1 * var(--ds-size-500, 2.5rem))}:host([addSpace]) [data-trigger-placement^=bottom]::slotted(*:hover):before{bottom:calc(-1 * var(--ds-size-500, 2.5rem))}.popover{display:inline-block;max-width:calc(100% - var(--ds-size-400, 2rem));border:0;overflow:visible;border-radius:var(--ds-border-radius, .375rem)}@media screen and (min-width:576px){.popover{max-width:50%}}@media screen and (min-width:768px){.popover{max-width:40%}}@media screen and (min-width:1024px){.popover{max-width:27rem}}[data-popper-placement^=top]>.arrow{bottom:calc(-1 * (var(--ds-size-100, .5rem) + var(--ds-size-25, .125rem)))}[data-popper-placement^=top]>.arrow:before{top:calc(-1 * var(--ds-size-200, 1rem));left:calc(-1 * var(--ds-size-75, .375rem));transform:rotate(45deg)}[data-popper-placement^=bottom]>.arrow{top:calc(-1 * (var(--ds-size-100, .5rem) + var(--ds-size-25, .125rem)))}[data-popper-placement^=bottom]>.arrow:before{top:var(--ds-size-50, .25rem);right:calc(-1 * var(--ds-size-200, 1rem));transform:rotate(-135deg)}.arrow{position:relative;margin-top:-var(--ds-size-100,.5rem)}.arrow:before{position:absolute;width:var(--ds-size-150, .75rem);height:var(--ds-size-150, .75rem);content:""}
2058
+ var styleCss = i$3`.body-default{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-default-font-size, 1rem);font-variant-ligatures:none;font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-variant-ligatures:none;font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-lg-font-size, 1.125rem);font-variant-ligatures:none;font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-variant-ligatures:none;font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-sm-font-size, .875rem);font-variant-ligatures:none;font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-sm-emphasized-font-size, .875rem);font-variant-ligatures:none;font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-xs-font-size, .75rem);font-variant-ligatures:none;font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-xs-emphasized-font-size, .75rem);font-variant-ligatures:none;font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-variant-ligatures:none;font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, .875rem)}.body-2xs,.body-2xs-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-emphasized-font-size, .625rem);font-variant-ligatures:none;font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-variant-ligatures:none;font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-variant-ligatures:none;font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-variant-ligatures:none;font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-variant-ligatures:none;font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-variant-ligatures:none;font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-variant-ligatures:none;font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host(:not([data-show])) .popover,:host([disabled]) .popover,:host([addspace]) :host(:not([data-show])) .popover{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}::slotted(*){white-space:normal}::slotted(*:hover){cursor:pointer}[data-trigger-placement]::slotted(*:hover){position:relative}[data-trigger-placement]::slotted(*:hover):before{position:absolute;left:0;display:block;width:100%;height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, .25rem));content:""}[data-trigger-placement^=top]::slotted(*:hover):before{top:calc(-1 * (var(--ds-size-200, 1rem) + var(--ds-size-50, .25rem)))}[data-trigger-placement^=bottom]::slotted(*:hover):before{bottom:calc(-1 * (var(--ds-size-200, 1rem) + var(--ds-size-50, .25rem)))}:host([data-show]) .popover{z-index:var(--ds-depth-tooltip, 400)}:host([removespace]) .popover{margin:calc(-1 * (var(--ds-size-50, .25rem) + 1px)) 0!important}:host([addspace]) .popover{margin:var(--ds-size-200, 1rem) 0!important}:host([addspace]) [data-trigger-placement]::slotted(*:hover):before{height:var(--ds-size-500, 2.5rem)}:host([addspace]) [data-trigger-placement^=top]::slotted(*:hover):before{top:calc(-1 * var(--ds-size-500, 2.5rem))}:host([addspace]) [data-trigger-placement^=bottom]::slotted(*:hover):before{bottom:calc(-1 * var(--ds-size-500, 2.5rem))}.popover{display:inline-block;max-width:calc(100% - var(--ds-size-400, 2rem));border:0;overflow:visible;border-radius:var(--ds-border-radius, .375rem)}@media screen and (min-width:576px){.popover{max-width:50%}}@media screen and (min-width:768px){.popover{max-width:40%}}@media screen and (min-width:1024px){.popover{max-width:27rem}}[data-popper-placement^=top]>.arrow{bottom:calc(-1 * (var(--ds-size-100, .5rem) + var(--ds-size-25, .125rem)))}[data-popper-placement^=top]>.arrow:before{top:calc(-1 * var(--ds-size-200, 1rem));left:calc(-1 * var(--ds-size-75, .375rem));transform:rotate(45deg)}[data-popper-placement^=bottom]>.arrow{top:calc(-1 * (var(--ds-size-100, .5rem) + var(--ds-size-25, .125rem)))}[data-popper-placement^=bottom]>.arrow:before{top:var(--ds-size-50, .25rem);right:calc(-1 * var(--ds-size-200, 1rem));transform:rotate(-135deg)}.arrow{position:relative}.arrow:before{position:absolute;width:var(--ds-size-150, .75rem);height:var(--ds-size-150, .75rem);content:""}
2056
2059
  `;
2057
2060
 
2058
2061
  var tokensCss = i$3`:host{--ds-auro-popover-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, .15));--ds-auro-popover-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-popover-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}
@@ -2068,6 +2071,10 @@ var tokensCss = i$3`:host{--ds-auro-popover-boxshadow-color: var(--ds-elevation-
2068
2071
  *
2069
2072
  * @slot - Default unnamed slot for the use of popover content
2070
2073
  * @slot trigger - The element in this slot triggers hiding and showing the popover.
2074
+ *
2075
+ * @csspart popover - Apply CSS to the popover bubble container.
2076
+ * @csspart arrow - Apply CSS to the arrow's positioning anchor. The visible arrow shape is its `::before` pseudo-element, so target `::part(arrow)::before` to restyle color, shadow, or size. Arrow position is set by Popper as inline styles and cannot be overridden through this part.
2077
+ * @csspart trigger - Apply CSS to the wrapper around the trigger slot. Use to correct alignment between the trigger and the popover.
2071
2078
  */
2072
2079
  class AuroPopover extends i {
2073
2080
  constructor() {
@@ -2106,7 +2113,8 @@ class AuroPopover extends i {
2106
2113
  */
2107
2114
  addSpace: {
2108
2115
  type: Boolean,
2109
- reflect: true
2116
+ reflect: true,
2117
+ attribute: "addspace",
2110
2118
  },
2111
2119
 
2112
2120
  /**
@@ -2120,7 +2128,7 @@ class AuroPopover extends i {
2120
2128
  */
2121
2129
  disabled: {
2122
2130
  type: Boolean,
2123
- reflect: true
2131
+ reflect: true,
2124
2132
  },
2125
2133
 
2126
2134
  /**
@@ -2128,7 +2136,7 @@ class AuroPopover extends i {
2128
2136
  */
2129
2137
  for: {
2130
2138
  type: String,
2131
- reflect: true
2139
+ reflect: true,
2132
2140
  },
2133
2141
 
2134
2142
  /**
@@ -2143,7 +2151,8 @@ class AuroPopover extends i {
2143
2151
  */
2144
2152
  removeSpace: {
2145
2153
  type: Boolean,
2146
- reflect: true
2154
+ reflect: true,
2155
+ attribute: "removespace",
2147
2156
  },
2148
2157
 
2149
2158
  /**
@@ -2155,10 +2164,10 @@ class AuroPopover extends i {
2155
2164
  isPopoverVisible: {
2156
2165
  type: Boolean,
2157
2166
  reflect: true,
2158
- attribute: 'data-show',
2167
+ attribute: "data-show",
2159
2168
  converter: {
2160
2169
  fromAttribute: (value) => value !== null,
2161
- toAttribute: (value) => (value ? 'true' : null),
2170
+ toAttribute: (value) => (value ? "true" : null),
2162
2171
  },
2163
2172
  },
2164
2173
  };
@@ -2209,10 +2218,16 @@ class AuroPopover extends i {
2209
2218
  if (this.trigger) {
2210
2219
  // Remove listeners attached to the trigger element.
2211
2220
  if (this._onTriggerMouseEnter) {
2212
- this._eventTarget.removeEventListener("mouseenter", this._onTriggerMouseEnter);
2221
+ this._eventTarget.removeEventListener(
2222
+ "mouseenter",
2223
+ this._onTriggerMouseEnter,
2224
+ );
2213
2225
  }
2214
2226
  if (this._onTriggerMouseLeave) {
2215
- this._eventTarget.removeEventListener("mouseleave", this._onTriggerMouseLeave);
2227
+ this._eventTarget.removeEventListener(
2228
+ "mouseleave",
2229
+ this._onTriggerMouseLeave,
2230
+ );
2216
2231
  }
2217
2232
  if (this._onTriggerFocus) {
2218
2233
  this.trigger.removeEventListener("focusin", this._onTriggerFocus);
@@ -2227,18 +2242,23 @@ class AuroPopover extends i {
2227
2242
  // Clean up aria-description and its sync listener set in firstUpdated.
2228
2243
  // Prevents stale descriptions if the trigger is reused after disconnect.
2229
2244
  if (this._onSlotChange) {
2230
- this.shadowRoot?.querySelector("slot:not([name])")?.removeEventListener("slotchange", this._onSlotChange);
2245
+ this.shadowRoot
2246
+ ?.querySelector("slot:not([name])")
2247
+ ?.removeEventListener("slotchange", this._onSlotChange);
2231
2248
  }
2232
2249
  // Remove aria-description from every element that received it in
2233
2250
  // firstUpdated (focusable descendants or the trigger itself).
2234
- for (const target of (this._ariaDescriptionTargets || [this.trigger])) {
2251
+ for (const target of this._ariaDescriptionTargets || [this.trigger]) {
2235
2252
  target.removeAttribute("aria-description");
2236
2253
  }
2237
2254
 
2238
2255
  // Remove tabindex only if the component added it and the current value
2239
2256
  // still matches the value managed by the component. This avoids removing
2240
2257
  // an author-updated tabindex that was set after connection.
2241
- if (this._addedTabIndex && this.trigger.getAttribute("tabindex") === "0") {
2258
+ if (
2259
+ this._addedTabIndex &&
2260
+ this.trigger.getAttribute("tabindex") === "0"
2261
+ ) {
2242
2262
  this.trigger.removeAttribute("tabindex");
2243
2263
  }
2244
2264
  }
@@ -2253,7 +2273,10 @@ class AuroPopover extends i {
2253
2273
  }
2254
2274
 
2255
2275
  // Destroy the Popper.js instance to release its internal references.
2256
- if (this.popper?.popper && typeof this.popper.popper.destroy === "function") {
2276
+ if (
2277
+ this.popper?.popper &&
2278
+ typeof this.popper.popper.destroy === "function"
2279
+ ) {
2257
2280
  this.popper.popper.destroy();
2258
2281
  this.popper.popper = null;
2259
2282
  }
@@ -2324,9 +2347,15 @@ class AuroPopover extends i {
2324
2347
  );
2325
2348
 
2326
2349
  this._onBodyMouseover = (evt) => this.handleMouseoverEvent(evt);
2327
- this._onTriggerMouseEnter = () => { this.toggleShow(); };
2328
- this._onTriggerMouseLeave = () => { this.toggleHide(); };
2329
- this._onTriggerFocus = () => { this.toggleShow(); };
2350
+ this._onTriggerMouseEnter = () => {
2351
+ this.toggleShow();
2352
+ };
2353
+ this._onTriggerMouseLeave = () => {
2354
+ this.toggleHide();
2355
+ };
2356
+ this._onTriggerFocus = () => {
2357
+ this.toggleShow();
2358
+ };
2330
2359
  this._onTriggerBlur = (event) => {
2331
2360
  // Only hide if focus leaves the trigger and popover entirely, not
2332
2361
  // when moving between focusable children within the trigger or into
@@ -2377,7 +2406,9 @@ class AuroPopover extends i {
2377
2406
  this.toggle();
2378
2407
  }
2379
2408
  };
2380
- this._onHidePopover = () => { this.toggleHide(); };
2409
+ this._onHidePopover = () => {
2410
+ this.toggleHide();
2411
+ };
2381
2412
 
2382
2413
  // mouseenter/mouseleave attach to the host when the trigger is a direct
2383
2414
  // child of auro-popover (slotted), otherwise they attach to the trigger itself.
@@ -2442,7 +2473,7 @@ class AuroPopover extends i {
2442
2473
  if (el.tabIndex < 0) return false;
2443
2474
  let node = el;
2444
2475
  while (node) {
2445
- if (node.closest('[hidden], [inert]')) return false;
2476
+ if (node.closest("[hidden], [inert]")) return false;
2446
2477
  const root = node.getRootNode();
2447
2478
  node = root instanceof ShadowRoot ? root.host : null;
2448
2479
  }
@@ -2450,18 +2481,26 @@ class AuroPopover extends i {
2450
2481
  };
2451
2482
 
2452
2483
  // Check light DOM children for focusable elements.
2453
- let hasInternalFocus = [...this.trigger.querySelectorAll(focusableSelector)].some(isReachable);
2484
+ let hasInternalFocus = [
2485
+ ...this.trigger.querySelectorAll(focusableSelector),
2486
+ ].some(isReachable);
2454
2487
 
2455
2488
  // Also check light DOM custom element descendants whose shadow DOM
2456
2489
  // contains focusable content. querySelector cannot reach into shadow
2457
2490
  // roots, so custom elements like auro-button inside a wrapper trigger
2458
2491
  // would otherwise be missed (e.g. <div><auro-button></auro-button></div>).
2459
2492
  if (!hasInternalFocus) {
2460
- const descendants = this.trigger.querySelectorAll('*');
2493
+ const descendants = this.trigger.querySelectorAll("*");
2461
2494
 
2462
2495
  for (const child of descendants) {
2463
- if (child.localName.includes('-') && (child.tabIndex >= 0 ||
2464
- (child.shadowRoot && [...child.shadowRoot.querySelectorAll(focusableSelector)].some(isReachable)))) {
2496
+ if (
2497
+ child.localName.includes("-") &&
2498
+ (child.tabIndex >= 0 ||
2499
+ (child.shadowRoot &&
2500
+ [...child.shadowRoot.querySelectorAll(focusableSelector)].some(
2501
+ isReachable,
2502
+ )))
2503
+ ) {
2465
2504
  hasInternalFocus = true;
2466
2505
  break;
2467
2506
  }
@@ -2473,11 +2512,21 @@ class AuroPopover extends i {
2473
2512
  // If the shadow root is inaccessible (closed mode or not yet upgraded),
2474
2513
  // we cannot inspect it — the element will receive tabindex if it is not
2475
2514
  // otherwise focusable. This is a known limitation documented above.
2476
- if (!hasInternalFocus && this.trigger.localName.includes('-') && this.trigger.shadowRoot) {
2477
- hasInternalFocus = [...this.trigger.shadowRoot.querySelectorAll(focusableSelector)].some(isReachable);
2515
+ if (
2516
+ !hasInternalFocus &&
2517
+ this.trigger.localName.includes("-") &&
2518
+ this.trigger.shadowRoot
2519
+ ) {
2520
+ hasInternalFocus = [
2521
+ ...this.trigger.shadowRoot.querySelectorAll(focusableSelector),
2522
+ ].some(isReachable);
2478
2523
  }
2479
2524
 
2480
- if (!isNativelyFocusable && !hasInternalFocus && !this.trigger.hasAttribute("tabindex")) {
2525
+ if (
2526
+ !isNativelyFocusable &&
2527
+ !hasInternalFocus &&
2528
+ !this.trigger.hasAttribute("tabindex")
2529
+ ) {
2481
2530
  this.trigger.setAttribute("tabindex", "0");
2482
2531
  this._addedTabIndex = true;
2483
2532
  }
@@ -2487,11 +2536,13 @@ class AuroPopover extends i {
2487
2536
  // in modern browsers and screen readers (Chrome 92+, Firefox 92+, Safari 15.4+)
2488
2537
  // but may be unfamiliar — do not replace with aria-describedby.
2489
2538
  const slot = this.shadowRoot.querySelector("slot:not([name])");
2490
- const getSlotText = () => slot.assignedNodes({ flatten: true })
2491
- .map((n) => n.textContent ?? "")
2492
- .join(" ")
2493
- .replace(/\s+/g, " ")
2494
- .trim();
2539
+ const getSlotText = () =>
2540
+ slot
2541
+ .assignedNodes({ flatten: true })
2542
+ .map((n) => n.textContent ?? "")
2543
+ .join(" ")
2544
+ .replace(/\s+/g, " ")
2545
+ .trim();
2495
2546
 
2496
2547
  // Determine which elements should receive aria-description.
2497
2548
  // When the trigger is a non-focusable wrapper around focusable content
@@ -2501,15 +2552,17 @@ class AuroPopover extends i {
2501
2552
 
2502
2553
  if (!isNativelyFocusable && hasInternalFocus) {
2503
2554
  // Gather all keyboard-reachable light DOM descendants.
2504
- const nativeMatches = [...this.trigger.querySelectorAll(focusableSelector)].filter(isReachable);
2555
+ const nativeMatches = [
2556
+ ...this.trigger.querySelectorAll(focusableSelector),
2557
+ ].filter(isReachable);
2505
2558
 
2506
2559
  this._ariaDescriptionTargets.push(...nativeMatches);
2507
2560
 
2508
2561
  // Check custom element descendants whose shadow DOM is focusable.
2509
- const allDescendants = this.trigger.querySelectorAll('*');
2562
+ const allDescendants = this.trigger.querySelectorAll("*");
2510
2563
 
2511
2564
  for (const child of allDescendants) {
2512
- if (!child.localName.includes('-')) continue;
2565
+ if (!child.localName.includes("-")) continue;
2513
2566
  // Skip if already matched by the native selector (e.g. has tabindex attribute).
2514
2567
  if (nativeMatches.includes(child)) continue;
2515
2568
 
@@ -2519,7 +2572,9 @@ class AuroPopover extends i {
2519
2572
  } else if (child.shadowRoot) {
2520
2573
  // Host is not keyboard-reachable; focus goes to internal elements.
2521
2574
  // Set description directly on the shadow DOM focusable controls.
2522
- const shadowFocusable = [...child.shadowRoot.querySelectorAll(focusableSelector)].filter(isReachable);
2575
+ const shadowFocusable = [
2576
+ ...child.shadowRoot.querySelectorAll(focusableSelector),
2577
+ ].filter(isReachable);
2523
2578
 
2524
2579
  for (const el of shadowFocusable) {
2525
2580
  this._ariaDescriptionTargets.push(el);
@@ -2532,8 +2587,10 @@ class AuroPopover extends i {
2532
2587
  // (e.g. mock-focusable, auro-button used directly as trigger).
2533
2588
  // Light DOM searches found nothing; add the shadow focusable controls
2534
2589
  // so the description is announced when focus lands inside the shadow root.
2535
- if (this.trigger.localName.includes('-') && this.trigger.shadowRoot) {
2536
- const shadowFocusable = [...this.trigger.shadowRoot.querySelectorAll(focusableSelector)].filter(isReachable);
2590
+ if (this.trigger.localName.includes("-") && this.trigger.shadowRoot) {
2591
+ const shadowFocusable = [
2592
+ ...this.trigger.shadowRoot.querySelectorAll(focusableSelector),
2593
+ ].filter(isReachable);
2537
2594
 
2538
2595
  this._ariaDescriptionTargets.push(...shadowFocusable);
2539
2596
  }
@@ -2649,7 +2706,11 @@ class AuroPopover extends i {
2649
2706
  // If disabled becomes true while the popover is visible, force-hide so
2650
2707
  // aria-hidden, the body mouseover listener, and Popper stay in sync with
2651
2708
  // the CSS that hides the popover via :host([disabled]).
2652
- if (changedProperties.has("disabled") && this.disabled && this.isPopoverVisible) {
2709
+ if (
2710
+ changedProperties.has("disabled") &&
2711
+ this.disabled &&
2712
+ this.isPopoverVisible
2713
+ ) {
2653
2714
  this.isPopoverVisible = false;
2654
2715
  }
2655
2716
  }
@@ -2663,12 +2724,12 @@ class AuroPopover extends i {
2663
2724
  popover="manual"
2664
2725
  part="popover"
2665
2726
  role="tooltip"
2666
- aria-hidden="${this.isPopoverVisible ? 'false' : 'true'}">
2667
- <div id="arrow" class="arrow" data-popper-arrow></div>
2727
+ aria-hidden="${this.isPopoverVisible ? "false" : "true"}">
2728
+ <div id="arrow" class="arrow" data-popper-arrow part="arrow"></div>
2668
2729
  <slot></slot>
2669
2730
  </div>
2670
2731
 
2671
- <span role="presentation">
2732
+ <span role="presentation" part="trigger">
2672
2733
  <slot name="trigger" data-trigger-placement="${this.placement}"></slot>
2673
2734
  </span>
2674
2735
  `;