@aurodesignsystem-dev/auro-popover 0.0.0-pr135.1 → 0.0.0-pr136.0

package/demo/api.html

@@ -58,7 +58,6 @@
 
     <script type="module" data-demo-script="true">
       import { initExamples } from "./api.min.js"
-
       initExamples();
     </script>
   </body>

package/demo/api.md

@@ -9,12 +9,12 @@ The `auro-popover` element attaches to another element and displays on hover.
 
 | Properties  | Attributes  | Modifiers | Type             | Default | Description                                                                                                                                                                                                        |
 | ----------- | ----------- | --------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| addSpace    | addspace    |           | boolean          |         | Adds additional top and bottom space around the appearance of the popover in relation to the trigger.                                                                                                              |
+| addSpace    | addSpace    |           | boolean          |         | Adds additional top and bottom space around the appearance of the popover in relation to the trigger.                                                                                                              |
 | boundary    | boundary    |           | string \| object |         | The element to use as the boundary for the popover. Can be a query selector or an HTML element.                                                                                                                    |
 | disabled    | disabled    |           | boolean          |         | Disables the popover from showing on hover and focus.                                                                                                                                                              |
 | 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.                                             |
 | placement   | placement   |           | string           | `top`   | Position for popover in relation to the element {'top' \| 'bottom'}.                                                                                                                                               |
-| removeSpace | removespace |           | boolean          |         | Removes top and bottom space around the appearance of the popover in relation to the trigger.                                                                                                                      |
+| removeSpace | removeSpace |           | boolean          |         | Removes top and bottom space around the appearance of the popover in relation to the trigger.                                                                                                                      |
 |             | 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. |
 
 ### Methods
@@ -29,14 +29,6 @@ The `auro-popover` element attaches to another element and displays on hover.
 | --------- | ----------------------------------------------------------------- |
 | (default) | Default unnamed slot for the use of popover content               |
 | trigger   | The element in this slot triggers hiding and showing the popover. |
-
-### CSS Shadow Parts
-
-| Name    | Description                                                                                                                                                                                                                                                              |
-| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| 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. |
-| popover | Apply CSS to the popover bubble container.                                                                                                                                                                                                                               |
-| trigger | Apply CSS to the wrapper around the trigger slot. Use to correct alignment between the trigger and the popover.                                                                                                                                                          |
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Basic
@@ -115,12 +107,12 @@ The trigger can be any element, not just buttons or links. The component automat
 
 ### Add Space Around Popover
 
-Use the `addspace` attribute to add more space between the popover and it's trigger.
+Use the `addSpace` attribute to add more space between the popover and it's trigger.
 
 <div class="exampleWrapper">
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/add-space.html) -->
 <!-- The below content is automatically added from ../apiExamples/add-space.html -->
-<auro-popover addspace>
+<auro-popover addSpace>
     Notice this popover is a little<br>further away from the trigger.
 <auro-button slot="trigger">Popover w/additional space above</auro-button>
 </auro-popover>
@@ -131,7 +123,7 @@ Use the `addspace` attribute to add more space between the popover and it's trig
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/add-space.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/add-space.html -->
 
-<pre class="language-html"><code class="language-html">&lt;auro-popover addspace&gt;
+<pre class="language-html"><code class="language-html">&lt;auro-popover addSpace&gt;
   Notice this popover is a little&lt;br&gt;further away from the trigger.
   &lt;auro-button slot="trigger"&gt;Popover w/additional space above&lt;/auro-button&gt;
 &lt;/auro-popover&gt;</code></pre>
@@ -245,16 +237,16 @@ Use the `placement` attribute to set the position of the popover in relation to
 
 ### Remove Space Around Popover
 
-Use the `removespace` attribute to lessen the space between the popover and it's trigger.
+Use the `removeSpace` attribute to lessen the space between the popover and it's trigger.
 
 <div class="exampleWrapper">
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/remove-space.html) -->
 <!-- The below content is automatically added from ../apiExamples/remove-space.html -->
-<auro-popover removespace>
+<auro-popover removeSpace>
     Notice this popover is a little<br>closer to the trigger.
 <auro-button slot="trigger">Popover w/less space above</auro-button>
 </auro-popover>
-<auro-popover placement="bottom" removespace>
+<auro-popover placement="bottom" removeSpace>
     Notice this popover is a little<br>closer to the trigger.
 <auro-button slot="trigger">Popover w/less space below</auro-button>
 </auro-popover>
@@ -265,11 +257,11 @@ Use the `removespace` attribute to lessen the space between the popover and it's
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/remove-space.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/remove-space.html -->
 
-<pre class="language-html"><code class="language-html">&lt;auro-popover removespace&gt;
+<pre class="language-html"><code class="language-html">&lt;auro-popover removeSpace&gt;
   Notice this popover is a little&lt;br&gt;closer to the trigger.
   &lt;auro-button slot="trigger"&gt;Popover w/less space above&lt;/auro-button&gt;
 &lt;/auro-popover&gt;
-&lt;auro-popover placement="bottom" removespace&gt;
+&lt;auro-popover placement="bottom" removeSpace&gt;
   Notice this popover is a little&lt;br&gt;closer to the trigger.
   &lt;auro-button slot="trigger"&gt;Popover w/less space below&lt;/auro-button&gt;
 &lt;/auro-popover&gt;</code></pre>
@@ -333,109 +325,6 @@ In the event that a hyperlink UI is desired, it is recommended to use the `role=
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-## Style Component with CSS Shadow Parts
-
-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.
-
-Two things to know before reaching for these:
-
-**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.
-
-**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.
-
-To adjust spacing between the popover and its trigger, prefer the `addspace` and `removespace` attributes over part overrides.
-
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/cssParts.html) -->
-<!-- The below content is automatically added from ../apiExamples/cssParts.html -->
-<!-- Selectors are scoped to .cssPartsExample so this demo does not restyle
-  other popovers on the page. Keep every line in this <style> block at column
-  zero with no blank lines: the docs generator indents injected examples, and
-  markdown turns 4-space-indented lines into a code block, which silently
-  breaks the stylesheet. -->
-<style>
-  /* The bubble container. */
-  .cssPartsExample auro-popover::part(popover) {
-  color: #fff;
-  border-radius: 0;
-  background-color: #01426a;
-  }
-  /* The visible arrow is the ::before pseudo-element of the arrow part, so
-  recolor that rather than ::part(arrow) itself. Keep it matched to the
-  bubble's background or the seam between them will show. */
-  .cssPartsExample auro-popover::part(arrow)::before {
-  box-shadow: none;
-  background-color: #01426a;
-  }
-  /* The trigger wrapper. Use it to line an icon trigger up with adjacent text
-  instead of resorting to layout workarounds. */
-  .cssPartsExample .iconTrigger auro-popover::part(trigger) {
-  display: inline-flex;
-  align-items: center;
-  }
-</style>
-<div class="cssPartsExample">
-<auro-popover>
-      This bubble and its arrow are restyled from outside the shadow DOM.
-<auro-button slot="trigger">Popover Test</auro-button>
-</auro-popover>
-<p class="iconTrigger">
-      Checked baggage fees apply
-<auro-popover placement="bottom">
-        Fees vary by route and fare class.
-<auro-icon slot="trigger" category="interface" name="info-stroke" aria-label="More information"></auro-icon>
-</auro-popover>
-</p>
-</div>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/cssParts.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/cssParts.html -->
-
-<pre class="language-html"><code class="language-html">&lt;!-- Selectors are scoped to .cssPartsExample so this demo does not restyle
-other popovers on the page. Keep every line in this &lt;style&gt; block at column
-zero with no blank lines: the docs generator indents injected examples, and
-markdown turns 4-space-indented lines into a code block, which silently
-breaks the stylesheet. --&gt;
-&lt;style&gt;
-/* The bubble container. */
-.cssPartsExample auro-popover::part(popover) {
-color: #fff;
-border-radius: 0;
-background-color: #01426a;
-}
-/* The visible arrow is the ::before pseudo-element of the arrow part, so
-recolor that rather than ::part(arrow) itself. Keep it matched to the
-bubble's background or the seam between them will show. */
-.cssPartsExample auro-popover::part(arrow)::before {
-box-shadow: none;
-background-color: #01426a;
-}
-/* The trigger wrapper. Use it to line an icon trigger up with adjacent text
-instead of resorting to layout workarounds. */
-.cssPartsExample .iconTrigger auro-popover::part(trigger) {
-display: inline-flex;
-align-items: center;
-}
-&lt;/style&gt;
-&lt;div class="cssPartsExample"&gt;
-  &lt;auro-popover&gt;
-    This bubble and its arrow are restyled from outside the shadow DOM.
-    &lt;auro-button slot="trigger"&gt;Popover Test&lt;/auro-button&gt;
-  &lt;/auro-popover&gt;
-  &lt;p class="iconTrigger"&gt;
-    Checked baggage fees apply
-    &lt;auro-popover placement="bottom"&gt;
-      Fees vary by route and fare class.
-      &lt;auro-icon slot="trigger" category="interface" name="info-stroke" aria-label="More information"&gt;&lt;/auro-icon&gt;
-    &lt;/auro-popover&gt;
-  &lt;/p&gt;
-&lt;/div&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
 ## Restyle Component with CSS Variables
 
 The component may be restyled by changing the values of the following token(s).

package/demo/api.min.js

@@ -1998,10 +1998,7 @@ class Popover {
               return;
             }
             const reference = state.elements.reference;
-            if (
-              !reference ||
-              typeof reference.getBoundingClientRect !== "function"
-            ) {
+            if (!reference || typeof reference.getBoundingClientRect !== "function") {
               return;
             }
             const r = reference.getBoundingClientRect();
@@ -2052,10 +2049,10 @@ class Popover {
   }
 }
 
-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)}
+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)}
 `;
 
-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:""}
+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:""}
 `;
 
 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)}
@@ -2071,10 +2068,6 @@ var tokensCss = i$3`:host{--ds-auro-popover-boxshadow-color: var(--ds-elevation-
  *
  * @slot - Default unnamed slot for the use of popover content
  * @slot trigger - The element in this slot triggers hiding and showing the popover.
- *
- * @csspart popover - Apply CSS to the popover bubble container.
- * @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.
- * @csspart trigger - Apply CSS to the wrapper around the trigger slot. Use to correct alignment between the trigger and the popover.
  */
 class AuroPopover extends i {
   constructor() {
@@ -2113,8 +2106,7 @@ class AuroPopover extends i {
        */
       addSpace: {
         type: Boolean,
-        reflect: true,
-        attribute: "addspace",
+        reflect: true
       },
 
       /**
@@ -2128,7 +2120,7 @@ class AuroPopover extends i {
        */
       disabled: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
 
       /**
@@ -2136,7 +2128,7 @@ class AuroPopover extends i {
        */
       for: {
         type: String,
-        reflect: true,
+        reflect: true
       },
 
       /**
@@ -2151,8 +2143,7 @@ class AuroPopover extends i {
        */
       removeSpace: {
         type: Boolean,
-        reflect: true,
-        attribute: "removespace",
+        reflect: true
       },
 
       /**
@@ -2164,10 +2155,10 @@ class AuroPopover extends i {
       isPopoverVisible: {
         type: Boolean,
         reflect: true,
-        attribute: "data-show",
+        attribute: 'data-show',
         converter: {
           fromAttribute: (value) => value !== null,
-          toAttribute: (value) => (value ? "true" : null),
+          toAttribute: (value) => (value ? 'true' : null),
         },
       },
     };
@@ -2218,16 +2209,10 @@ class AuroPopover extends i {
     if (this.trigger) {
       // Remove listeners attached to the trigger element.
       if (this._onTriggerMouseEnter) {
-        this._eventTarget.removeEventListener(
-          "mouseenter",
-          this._onTriggerMouseEnter,
-        );
+        this._eventTarget.removeEventListener("mouseenter", this._onTriggerMouseEnter);
       }
       if (this._onTriggerMouseLeave) {
-        this._eventTarget.removeEventListener(
-          "mouseleave",
-          this._onTriggerMouseLeave,
-        );
+        this._eventTarget.removeEventListener("mouseleave", this._onTriggerMouseLeave);
       }
       if (this._onTriggerFocus) {
         this.trigger.removeEventListener("focusin", this._onTriggerFocus);
@@ -2242,23 +2227,18 @@ class AuroPopover extends i {
       // Clean up aria-description and its sync listener set in firstUpdated.
       // Prevents stale descriptions if the trigger is reused after disconnect.
       if (this._onSlotChange) {
-        this.shadowRoot
-          ?.querySelector("slot:not([name])")
-          ?.removeEventListener("slotchange", this._onSlotChange);
+        this.shadowRoot?.querySelector("slot:not([name])")?.removeEventListener("slotchange", this._onSlotChange);
       }
       // Remove aria-description from every element that received it in
       // firstUpdated (focusable descendants or the trigger itself).
-      for (const target of this._ariaDescriptionTargets || [this.trigger]) {
+      for (const target of (this._ariaDescriptionTargets || [this.trigger])) {
         target.removeAttribute("aria-description");
       }
 
       // Remove tabindex only if the component added it and the current value
       // still matches the value managed by the component. This avoids removing
       // an author-updated tabindex that was set after connection.
-      if (
-        this._addedTabIndex &&
-        this.trigger.getAttribute("tabindex") === "0"
-      ) {
+      if (this._addedTabIndex && this.trigger.getAttribute("tabindex") === "0") {
         this.trigger.removeAttribute("tabindex");
       }
     }
@@ -2273,10 +2253,7 @@ class AuroPopover extends i {
     }
 
     // Destroy the Popper.js instance to release its internal references.
-    if (
-      this.popper?.popper &&
-      typeof this.popper.popper.destroy === "function"
-    ) {
+    if (this.popper?.popper && typeof this.popper.popper.destroy === "function") {
       this.popper.popper.destroy();
       this.popper.popper = null;
     }
@@ -2347,15 +2324,9 @@ class AuroPopover extends i {
     );
 
     this._onBodyMouseover = (evt) => this.handleMouseoverEvent(evt);
-    this._onTriggerMouseEnter = () => {
-      this.toggleShow();
-    };
-    this._onTriggerMouseLeave = () => {
-      this.toggleHide();
-    };
-    this._onTriggerFocus = () => {
-      this.toggleShow();
-    };
+    this._onTriggerMouseEnter = () => { this.toggleShow(); };
+    this._onTriggerMouseLeave = () => { this.toggleHide(); };
+    this._onTriggerFocus = () => { this.toggleShow(); };
     this._onTriggerBlur = (event) => {
       // Only hide if focus leaves the trigger and popover entirely, not
       // when moving between focusable children within the trigger or into
@@ -2406,9 +2377,7 @@ class AuroPopover extends i {
         this.toggle();
       }
     };
-    this._onHidePopover = () => {
-      this.toggleHide();
-    };
+    this._onHidePopover = () => { this.toggleHide(); };
 
     // mouseenter/mouseleave attach to the host when the trigger is a direct
     // child of auro-popover (slotted), otherwise they attach to the trigger itself.
@@ -2473,7 +2442,7 @@ class AuroPopover extends i {
       if (el.tabIndex < 0) return false;
       let node = el;
       while (node) {
-        if (node.closest("[hidden], [inert]")) return false;
+        if (node.closest('[hidden], [inert]')) return false;
         const root = node.getRootNode();
         node = root instanceof ShadowRoot ? root.host : null;
       }
@@ -2481,26 +2450,18 @@ class AuroPopover extends i {
     };
 
     // Check light DOM children for focusable elements.
-    let hasInternalFocus = [
-      ...this.trigger.querySelectorAll(focusableSelector),
-    ].some(isReachable);
+    let hasInternalFocus = [...this.trigger.querySelectorAll(focusableSelector)].some(isReachable);
 
     // Also check light DOM custom element descendants whose shadow DOM
     // contains focusable content. querySelector cannot reach into shadow
     // roots, so custom elements like auro-button inside a wrapper trigger
     // would otherwise be missed (e.g. <div><auro-button></auro-button></div>).
     if (!hasInternalFocus) {
-      const descendants = this.trigger.querySelectorAll("*");
+      const descendants = this.trigger.querySelectorAll('*');
 
       for (const child of descendants) {
-        if (
-          child.localName.includes("-") &&
-          (child.tabIndex >= 0 ||
-            (child.shadowRoot &&
-              [...child.shadowRoot.querySelectorAll(focusableSelector)].some(
-                isReachable,
-              )))
-        ) {
+        if (child.localName.includes('-') && (child.tabIndex >= 0 ||
+            (child.shadowRoot && [...child.shadowRoot.querySelectorAll(focusableSelector)].some(isReachable)))) {
           hasInternalFocus = true;
           break;
         }
@@ -2512,21 +2473,11 @@ class AuroPopover extends i {
     // If the shadow root is inaccessible (closed mode or not yet upgraded),
     // we cannot inspect it — the element will receive tabindex if it is not
     // otherwise focusable. This is a known limitation documented above.
-    if (
-      !hasInternalFocus &&
-      this.trigger.localName.includes("-") &&
-      this.trigger.shadowRoot
-    ) {
-      hasInternalFocus = [
-        ...this.trigger.shadowRoot.querySelectorAll(focusableSelector),
-      ].some(isReachable);
+    if (!hasInternalFocus && this.trigger.localName.includes('-') && this.trigger.shadowRoot) {
+      hasInternalFocus = [...this.trigger.shadowRoot.querySelectorAll(focusableSelector)].some(isReachable);
     }
 
-    if (
-      !isNativelyFocusable &&
-      !hasInternalFocus &&
-      !this.trigger.hasAttribute("tabindex")
-    ) {
+    if (!isNativelyFocusable && !hasInternalFocus && !this.trigger.hasAttribute("tabindex")) {
       this.trigger.setAttribute("tabindex", "0");
       this._addedTabIndex = true;
     }
@@ -2536,13 +2487,11 @@ class AuroPopover extends i {
     // in modern browsers and screen readers (Chrome 92+, Firefox 92+, Safari 15.4+)
     // but may be unfamiliar — do not replace with aria-describedby.
     const slot = this.shadowRoot.querySelector("slot:not([name])");
-    const getSlotText = () =>
-      slot
-        .assignedNodes({ flatten: true })
-        .map((n) => n.textContent ?? "")
-        .join(" ")
-        .replace(/\s+/g, " ")
-        .trim();
+    const getSlotText = () => slot.assignedNodes({ flatten: true })
+      .map((n) => n.textContent ?? "")
+      .join(" ")
+      .replace(/\s+/g, " ")
+      .trim();
 
     // Determine which elements should receive aria-description.
     // When the trigger is a non-focusable wrapper around focusable content
@@ -2552,17 +2501,15 @@ class AuroPopover extends i {
 
     if (!isNativelyFocusable && hasInternalFocus) {
       // Gather all keyboard-reachable light DOM descendants.
-      const nativeMatches = [
-        ...this.trigger.querySelectorAll(focusableSelector),
-      ].filter(isReachable);
+      const nativeMatches = [...this.trigger.querySelectorAll(focusableSelector)].filter(isReachable);
 
       this._ariaDescriptionTargets.push(...nativeMatches);
 
       // Check custom element descendants whose shadow DOM is focusable.
-      const allDescendants = this.trigger.querySelectorAll("*");
+      const allDescendants = this.trigger.querySelectorAll('*');
 
       for (const child of allDescendants) {
-        if (!child.localName.includes("-")) continue;
+        if (!child.localName.includes('-')) continue;
         // Skip if already matched by the native selector (e.g. has tabindex attribute).
         if (nativeMatches.includes(child)) continue;
 
@@ -2572,9 +2519,7 @@ class AuroPopover extends i {
         } else if (child.shadowRoot) {
           // Host is not keyboard-reachable; focus goes to internal elements.
           // Set description directly on the shadow DOM focusable controls.
-          const shadowFocusable = [
-            ...child.shadowRoot.querySelectorAll(focusableSelector),
-          ].filter(isReachable);
+          const shadowFocusable = [...child.shadowRoot.querySelectorAll(focusableSelector)].filter(isReachable);
 
           for (const el of shadowFocusable) {
             this._ariaDescriptionTargets.push(el);
@@ -2587,10 +2532,8 @@ class AuroPopover extends i {
         // (e.g. mock-focusable, auro-button used directly as trigger).
         // Light DOM searches found nothing; add the shadow focusable controls
         // so the description is announced when focus lands inside the shadow root.
-        if (this.trigger.localName.includes("-") && this.trigger.shadowRoot) {
-          const shadowFocusable = [
-            ...this.trigger.shadowRoot.querySelectorAll(focusableSelector),
-          ].filter(isReachable);
+        if (this.trigger.localName.includes('-') && this.trigger.shadowRoot) {
+          const shadowFocusable = [...this.trigger.shadowRoot.querySelectorAll(focusableSelector)].filter(isReachable);
 
           this._ariaDescriptionTargets.push(...shadowFocusable);
         }
@@ -2706,11 +2649,7 @@ class AuroPopover extends i {
     // If disabled becomes true while the popover is visible, force-hide so
     // aria-hidden, the body mouseover listener, and Popper stay in sync with
     // the CSS that hides the popover via :host([disabled]).
-    if (
-      changedProperties.has("disabled") &&
-      this.disabled &&
-      this.isPopoverVisible
-    ) {
+    if (changedProperties.has("disabled") && this.disabled && this.isPopoverVisible) {
       this.isPopoverVisible = false;
     }
   }
@@ -2724,12 +2663,12 @@ class AuroPopover extends i {
       popover="manual"
       part="popover"
       role="tooltip"
-      aria-hidden="${this.isPopoverVisible ? "false" : "true"}">
-        <div id="arrow" class="arrow" data-popper-arrow part="arrow"></div>
+      aria-hidden="${this.isPopoverVisible ? 'false' : 'true'}">
+        <div id="arrow" class="arrow" data-popper-arrow></div>
         <slot></slot>
       </div>
 
-      <span role="presentation" part="trigger">
+      <span role="presentation">
         <slot name="trigger" data-trigger-placement="${this.placement}"></slot>
       </span>
     `;