@fusion.dev/helix 0.146.0 → 0.148.0

package/dist/pagination/root/pagination-root.css.js

@@ -1,133 +1,37 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-align-items: center;
-display: flex;
-flex-wrap: wrap;
-font-size: var(--helix-text-sm);
-gap: var(--pagination-gap, var(--helix-space-2xs));
-}
-
-[part="list"] {
-align-items: center;
-display: flex;
-flex-wrap: wrap;
-gap: var(--pagination-gap, var(--helix-space-2xs));
-
-list-style: none;
-margin: var(--helix-space-none);
-padding: var(--helix-space-none);
-}
-
-[part="item"] {
-display: inline-flex;
-}
-
-[part="first"],
+export const styles = createSheet(`:host {align-items: center;display: flex;flex-wrap: wrap;font-size: var(--pagination-font-size, var(--helix-text-sm));gap: var(--pagination-gap, var(--helix-space-2xs));}[part="list"] {align-items: center;display: flex;flex-wrap: wrap;gap: var(--pagination-gap, var(--helix-space-2xs));list-style: none;margin: var(--helix-space-none);padding: var(--helix-space-none);}[part="item"] {display: inline-flex;}[part="first"],
 [part="gap"],
 [part="last"],
 [part~="page"],
 [part="previous"],
-[part="next"] {
-align-items: center;
-appearance: none;
-background-color: transparent;
-block-size: var(--pagination-size, var(--helix-size-control-tight));
-border: var(--helix-border-thin) solid transparent;
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-muted);
-cursor: pointer;
-display: inline-flex;
-font: inherit;
-font-variant-numeric: tabular-nums;
-font-weight: var(--helix-weight-medium);
-justify-content: center;
-min-inline-size: var(--pagination-size, var(--helix-size-control-tight));
-padding-inline: var(--helix-space-2xs);
-text-decoration: none;
-transition:
+[part="next"] {align-items: center;appearance: none;background-color: transparent;block-size: var(--pagination-size, var(--helix-size-control-tight));border: var(--helix-border-thin) solid transparent;border-radius: var(--pagination-radius, var(--helix-radii-sm));color: var(--pagination-foreground-color, var(--helix-color-foreground-muted));cursor: pointer;display: inline-flex;font: inherit;font-variant-numeric: tabular-nums;font-weight: var(--pagination-font-weight, var(--helix-weight-medium));justify-content: center;min-inline-size: var(--pagination-size, var(--helix-size-control-tight));padding-inline: var(--pagination-padding, var(--helix-space-2xs));text-decoration: none;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="first"]:hover,
+color var(--helix-duration-fast) var(--helix-easing-standard);}[part="first"]:hover,
 [part="gap"]:hover,
 [part="last"]:hover,
 [part~="page"]:hover,
 [part="previous"]:hover,
-[part="next"]:hover {
-background-color: var(--pagination-hover-color, var(--helix-color-surface-sunken));
-color: var(--helix-color-foreground);
-}
-
-[part="first"]:focus-visible,
+[part="next"]:hover {background-color: var(--pagination-hover-color, var(--helix-color-surface-sunken));color: var(--pagination-hover-foreground-color, var(--helix-color-foreground));}[part="first"]:focus-visible,
 [part="gap"]:focus-visible,
 [part="last"]:focus-visible,
 [part~="page"]:focus-visible,
 [part="previous"]:focus-visible,
-[part="next"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part~="page"][aria-current="page"],
-[part~="page"][aria-current="page"]:hover {
-background-color: var(--pagination-current-color, var(--helix-color-surface-raised));
-border-color: var(--helix-color-border);
-color: var(--helix-color-foreground);
-font-weight: var(--helix-weight-semibold);
-}
-
-[part="first"]:disabled,
+[part="next"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part~="page"][aria-current="page"],
+[part~="page"][aria-current="page"]:hover {background-color: var(--pagination-current-color, var(--helix-color-surface-raised));border-color: var(--pagination-current-border-color, var(--helix-color-border));color: var(--pagination-current-foreground-color, var(--helix-color-foreground));font-weight: var(--pagination-current-font-weight, var(--helix-weight-semibold));}[part="first"]:disabled,
 [part="last"]:disabled,
 [part="previous"]:disabled,
 [part="next"]:disabled,
 [part="first"][aria-disabled="true"],
 [part="last"][aria-disabled="true"],
 [part="previous"][aria-disabled="true"],
-[part="next"][aria-disabled="true"] {
-color: var(--helix-color-foreground-subtle);
-cursor: default;
-opacity: 0.5;
-pointer-events: none;
-}
-
-[part="first"] svg,
+[part="next"][aria-disabled="true"] {color: var(--pagination-disabled-foreground-color, var(--helix-color-foreground-subtle));cursor: default;opacity: var(--pagination-disabled-opacity, 0.5);pointer-events: none;}[part="first"] svg,
 [part="last"] svg,
 [part="previous"] svg,
 [part="next"] svg,
 ::slotted([slot="first-icon"]),
 ::slotted([slot="last-icon"]),
 ::slotted([slot="previous-icon"]),
-::slotted([slot="next-icon"]) {
-block-size: var(--helix-size-icon-tight);
-inline-size: var(--helix-size-icon-tight);
-}
-
-:host(:dir(rtl)) ::slotted([slot="first-icon"]),
+::slotted([slot="next-icon"]) {block-size: var(--pagination-icon-size, var(--helix-size-icon-tight));inline-size: var(--pagination-icon-size, var(--helix-size-icon-tight));}:host(:dir(rtl)) ::slotted([slot="first-icon"]),
 :host(:dir(rtl)) ::slotted([slot="last-icon"]),
 :host(:dir(rtl)) ::slotted([slot="previous-icon"]),
-:host(:dir(rtl)) ::slotted([slot="next-icon"]) {
-scale: -1 1;
-}
-
-[part="gap"] {
-color: var(--helix-color-foreground-subtle);
-user-select: none;
-}
-
-:host(:state(empty)) {
-display: none;
-}
-
-[part="status"] {
-color: var(--helix-color-foreground-muted);
-font-variant-numeric: tabular-nums;
-font-weight: var(--helix-weight-medium);
-padding-inline: var(--helix-space-xs);
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+:host(:dir(rtl)) ::slotted([slot="next-icon"]) {scale: -1 1;}[part="gap"] {color: var(--pagination-ellipsis-foreground-color, var(--helix-color-foreground-subtle));user-select: none;}:host(:state(empty)) {display: none;}[part="status"] {color: var(--pagination-status-foreground-color, var(--helix-color-foreground-muted));font-variant-numeric: tabular-nums;font-weight: var(--pagination-font-weight, var(--helix-weight-medium));padding-inline: var(--helix-space-xs);}@media print {:host {display: none;}}`);

package/dist/pagination/root/pagination-root.d.ts

@@ -35,10 +35,24 @@ import type { CSSResultGroup } from 'lit';
  * @csspart previous - The control that moves back one page.
  * @csspart status - The text that says which page you are on, in `compact`.
  *
+ * @cssproperty --pagination-current-border-color - Edge of the page you are on.
  * @cssproperty --pagination-current-color - Fill behind the page you are on.
+ * @cssproperty --pagination-current-font-weight - Weight of the number of the page you are on.
+ * @cssproperty --pagination-current-foreground-color - Color of the number of the page you are on.
+ * @cssproperty --pagination-disabled-foreground-color - Color of a first, previous, next or last control with nowhere to go.
+ * @cssproperty --pagination-disabled-opacity - How faint a control with nowhere to go is drawn.
+ * @cssproperty --pagination-ellipsis-foreground-color - Color of the control that stands in for hidden pages.
+ * @cssproperty --pagination-font-size - Size of the numbers and the status text.
+ * @cssproperty --pagination-font-weight - Weight of the numbers and the status text.
+ * @cssproperty --pagination-foreground-color - Color of the numbers and the marks on every control.
  * @cssproperty --pagination-gap - Space between one control and the next.
  * @cssproperty --pagination-hover-color - Fill behind a control under the pointer.
+ * @cssproperty --pagination-hover-foreground-color - Color of a control's number or mark under the pointer.
+ * @cssproperty --pagination-icon-size - Size of the mark on a first, previous, next or last control, drawn or slotted.
+ * @cssproperty --pagination-padding - Space either side of a control's number or mark.
+ * @cssproperty --pagination-radius - Corner radius of every control in the row.
  * @cssproperty --pagination-size - The box every control in the row takes.
+ * @cssproperty --pagination-status-foreground-color - Color of the text that says which page you are on, in `compact`.
  */
 export declare class HelixPagination extends HelixHeadlessPagination {
     static styles: CSSResultGroup;

package/dist/pagination/size/pagination-size.css.js

@@ -1,23 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: inline-flex;
-}
-
-:host(:state(empty)) {
-display: none;
-}
-
-[part="control"] {
-align-items: center;
-flex-direction: row;
-gap: var(--helix-space-xs);
-}
-
-[part="control"]::part(label) {
-padding-block-end: var(--helix-space-none);
-white-space: nowrap;
-}
-
-[part="control"]::part(trigger) {
-block-size: var(--helix-size-control-tight);
-}`);
+export const styles = createSheet(`:host {display: inline-flex;}:host(:state(empty)) {display: none;}[part="control"] {align-items: center;flex-direction: row;gap: var(--pagination-size-gap, var(--helix-space-xs));}[part="control"]::part(label) {padding-block-end: var(--helix-space-none);white-space: nowrap;}[part="control"]::part(trigger) {block-size: var(--pagination-size, var(--helix-size-control-tight));}`);

package/dist/pagination/size/pagination-size.d.ts

@@ -20,6 +20,9 @@ import '../../select/index.js';
  * @documentation https://fusion.dev/helix/components/pagination
  *
  * @csspart control - The select.
+ *
+ * @cssproperty --pagination-size - Height of the select's trigger, the same hook that sizes every control in the page row.
+ * @cssproperty --pagination-size-gap - Space between the label and the select.
  */
 export declare class HelixPaginationSize extends HelixHeadlessPaginationSize {
     static tier: string;

package/dist/pagination/summary/pagination-summary.css.js

@@ -1,8 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-color: var(--helix-color-foreground-subtle);
-display: inline-block;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-font-variant-numeric: tabular-nums;
-}`);
+export const styles = createSheet(`:host {color: var(--pagination-summary-foreground-color, var(--helix-color-foreground-subtle));display: inline-block;font-family: var(--helix-font-sans);font-size: var(--pagination-font-size, var(--helix-text-sm));font-variant-numeric: tabular-nums;}`);

package/dist/pagination/summary/pagination-summary.d.ts

@@ -11,6 +11,9 @@ import type { CSSResultGroup } from 'lit';
  * @status stable
  * @aliases Result count, Range
  * @documentation https://fusion.dev/helix/components/pagination
+ *
+ * @cssproperty --pagination-font-size - Size of the text, the same hook that sizes the page numbers.
+ * @cssproperty --pagination-summary-foreground-color - Color of the text.
  */
 export declare class HelixPaginationSummary extends HelixHeadlessPaginationSummary {
     static styles: CSSResultGroup;

package/dist/pin-input/root/pin-input-root.css.js

@@ -1,74 +1,3 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: flex;
-flex-direction: column;
-gap: var(--helix-space-2xs);
-}
-
-[part="field"] {
-align-self: start;
-display: flex;
-gap: var(--pin-input-gap, var(--helix-space-xs));
-}
-
-[part="cell"] {
-all: unset;
-background-color: var(--pin-input-cell-background-color, var(--helix-color-well));
-block-size: var(--pin-input-cell-size, var(--helix-size-control));
-border: var(--helix-border-thin) solid
-var(--pin-input-cell-border-color, var(--helix-color-border));
-border-radius: var(--pin-input-cell-radius, var(--helix-radii-sm));
-box-sizing: border-box;
-color: var(--pin-input-cell-color, var(--helix-color-foreground));
-font-family: var(--helix-font-sans);
-font-size: var(--pin-input-cell-font-size, var(--helix-text-lg));
-
-font-variant-numeric: tabular-nums;
-font-weight: var(--helix-weight-medium);
-inline-size: var(--pin-input-cell-size, var(--helix-size-control));
-text-align: center;
-transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host(:not(:disabled)) [part="cell"]:hover {
-border-color: var(--helix-color-foreground-muted);
-}
-
-[part="cell"]:focus-visible {
-border-color: var(--pin-input-cell-border-color-focus, var(--helix-color-primary));
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: 0;
-}
-
-:host(:state(invalid)) [part="cell"] {
-border-color: var(--helix-color-danger);
-}
-
-:host(:disabled) [part="cell"] {
-cursor: not-allowed;
-opacity: 0.5;
-}
-
-:host([readonly]) [part="cell"] {
-background-color: transparent;
-}
-
-:host([mask]) [part="cell"] {
-font-size: var(--helix-text-xl);
-}
-
-[part="separator"] {
-align-self: center;
-color: var(--pin-input-separator-color, var(--helix-color-foreground-muted));
-font-size: var(--helix-text-lg);
-}
-
-[part="cell"]::placeholder {
-color: var(--helix-color-foreground-subtle);
-}
-
-@media print {
-:host {
-print-color-adjust: exact;
-}
-}`);
+export const styles = createSheet(`:host {display: flex;flex-direction: column;gap: var(--helix-space-2xs);}[part="field"] {align-self: start;display: flex;gap: var(--pin-input-gap, var(--helix-space-xs));}[part~="cell"] {all: unset;align-items: center;background-color: var(--pin-input-cell-background-color, var(--helix-color-well));block-size: var(--pin-input-cell-size, var(--helix-size-control));border: var(--helix-border-thin) solid
+var(--pin-input-cell-border-color, var(--helix-color-border));border-radius: var(--pin-input-cell-radius, var(--helix-radii-sm));box-sizing: border-box;color: var(--pin-input-cell-color, var(--helix-color-foreground));cursor: text;display: flex;font-family: var(--helix-font-sans);font-size: var(--pin-input-cell-font-size, var(--helix-text-lg));font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-medium);inline-size: var(--pin-input-cell-size, var(--helix-size-control));justify-content: center;text-align: center;transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:not(:disabled)) [part~="cell"]:hover {border-color: var(--helix-color-foreground-muted);}[part~="cell-active"] {border-color: var(--pin-input-cell-border-color-focus, var(--helix-color-primary));outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0;}:host(:state(invalid)) [part~="cell"] {border-color: var(--helix-color-danger);}:host(:disabled) [part~="cell"] {cursor: not-allowed;opacity: 0.5;}:host([readonly]) [part~="cell"] {background-color: transparent;}:host([mask]) [part~="cell"] {font-size: var(--helix-text-xl);}[part="separator"] {align-self: center;color: var(--pin-input-separator-color, var(--helix-color-foreground-muted));font-size: var(--helix-text-lg);}[part="placeholder"] {color: var(--pin-input-placeholder-color, var(--helix-color-foreground-subtle));}[part="caret"] {background-color: var(--pin-input-caret-color, currentcolor);block-size: 1em;inline-size: var(--helix-border-thin);}@media print {:host {print-color-adjust: exact;}}`);

package/dist/pin-input/root/pin-input-root.d.ts

@@ -7,8 +7,8 @@ import type { CSSResultGroup } from 'lit';
  * Square boxes at the control height, with space between them so the code reads
  * as separate characters.
  *
- * The focus ring is on the current box, so you can see which character comes
- * next.
+ * The focus ring is on the box the caret is in, so you can see which character
+ * comes next, and the caret is drawn there while it is empty.
  *
  * Figures are tabular, so every digit takes the same width and the row does not
  * shift as you type.
@@ -19,18 +19,24 @@ import type { CSSResultGroup } from 'lit';
  * @aliases PinField, OTP, One-time code, Verification code, InputPin
  * @documentation https://fusion.dev/helix/components/pin-input
  *
+ * @csspart caret - The caret, drawn in the empty box it is in while the field has focus.
  * @csspart cell - One box.
+ * @csspart cell-active - The box the caret is in, while the field has focus. Set together with `cell`.
+ * @csspart cell-filled - A box that holds a character. Set together with `cell`.
  * @csspart field - The row of boxes.
+ * @csspart placeholder - The `placeholder` text in an empty box.
  * @csspart separator - The text `format` draws between two boxes.
  *
+ * @cssproperty --pin-input-caret-color - The color of the caret drawn in an empty box. Without it, the character color applies.
  * @cssproperty --pin-input-cell-background-color - Fill behind each box.
  * @cssproperty --pin-input-cell-border-color - Edge of each box at rest. Hover, focus and an error still draw their own.
- * @cssproperty --pin-input-cell-border-color-focus - Edge of the box holding focus.
+ * @cssproperty --pin-input-cell-border-color-focus - Edge of the box the caret is in.
  * @cssproperty --pin-input-cell-color - The color of a typed character.
  * @cssproperty --pin-input-cell-font-size - The size of a typed character.
  * @cssproperty --pin-input-cell-radius - Corner radius of each box.
  * @cssproperty --pin-input-cell-size - Width and height of each box.
  * @cssproperty --pin-input-gap - The space between one box and the next.
+ * @cssproperty --pin-input-placeholder-color - The color of the `placeholder` text in an empty box.
  * @cssproperty --pin-input-separator-color - The color of the text `format` draws between boxes.
  */
 export declare class HelixPinInput extends HelixHeadlessPinInput {

package/dist/popover/root/popover-root.css.js

@@ -1,132 +1,11 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
-display: contents;
-}
-
-[part="popover"] {
-overflow: visible;
-background-color: var(--helix-color-surface-overlay);
-
-border: var(--popover-border-width, var(--helix-border-floating)) solid
-var(--popover-border-color, var(--helix-color-border));
-
---_popover-edge: var(--popover-border-width, var(--helix-border-floating)) solid
-var(--popover-border-color, var(--helix-color-border));
-
-border-radius: var(--helix-radii-sm);
-box-shadow: var(--popover-shadow, var(--helix-shadow-floating));
-box-sizing: border-box;
-color: var(--helix-color-foreground);
-
-inset: auto;
-margin: var(--helix-space-none);
-
-max-inline-size: calc(100vw - var(--helix-space-lg));
-
-padding: var(--helix-space-none);
-inline-size: var(--popover-inline-size, max-content);
-}
-
-[part="popover"]:not(:popover-open) {
-display: none;
-}
-
-[part="popover"] {
---_travel: calc(var(--helix-space-2xs) * -1);
-
---_popover-from: 0.96;
-opacity: 0;
-transform: translateY(var(--_travel));
-scale: var(--_popover-from);
-transition:
+export const styles = createSheet(`:host {display: contents;}[part="popover"] {overflow: visible;background-color: var(--helix-color-surface-overlay);border: var(--popover-border-width, var(--helix-border-floating)) solid
+var(--popover-border-color, var(--helix-color-border));--_popover-edge: var(--popover-border-width, var(--helix-border-floating)) solid
+var(--popover-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-shadow: var(--popover-shadow, var(--helix-shadow-floating));box-sizing: border-box;color: var(--helix-color-foreground);inset: auto;margin: var(--helix-space-none);max-inline-size: calc(100vw - var(--helix-space-lg));padding: var(--helix-space-none);inline-size: var(--popover-inline-size, max-content);}[part="popover"]:not(:popover-open) {display: none;}[part="popover"] {--_travel: calc(var(--helix-space-2xs) * -1);--_popover-from: 0.96;opacity: 0;transform: translateY(var(--_travel));scale: var(--_popover-from);transition:
 opacity var(--helix-duration-fast) var(--helix-easing-standard),
 scale var(--helix-duration-fast) var(--helix-easing-emphasized),
 transform var(--helix-duration-fast) var(--helix-easing-emphasized),
 display var(--helix-duration-fast) allow-discrete,
-overlay var(--helix-duration-fast) allow-discrete;
-}
-
-[part="popover"][data-placement^="top"] {
---_travel: var(--helix-space-2xs);
-}
-
-[part="popover"][data-placed] {
-opacity: 1;
-scale: 1;
-transform: none;
-}
-
-[part="popover"][data-placement^="top"] {
-transform-origin: var(--floating-arrow-x, 50%) 100%;
-}
-
-[part="popover"][data-placement^="bottom"] {
-transform-origin: var(--floating-arrow-x, 50%) 0;
-}
-
-[part="popover"][data-placement^="left"] {
-transform-origin: 100% var(--floating-arrow-y, 50%);
-}
-
-[part="popover"][data-placement^="right"] {
-transform-origin: 0 var(--floating-arrow-y, 50%);
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="popover"],
-[part="popover"][data-placed] {
-scale: 1;
-transform: none;
-transition: none;
-}
-}
-
-[part="content"] {
-max-block-size: var(--popover-max-block-size, var(--floating-available-block-size, none));
-overflow: auto;
-padding: var(--popover-padding, var(--helix-space-md));
-}
-
-:host([separation="plain"]) [part="content"] {
-padding: var(--popover-padding, var(--helix-space-none));
-}
-
-[part="popover"]:focus,
-[part="popover"]:focus-visible {
-outline: none;
-}
-
-[part~="arrow"] {
-background-color: var(--helix-color-surface-overlay);
-block-size: var(--popover-arrow-size, 0.5rem);
-inline-size: var(--popover-arrow-size, 0.5rem);
-position: absolute;
-rotate: 45deg;
-}
-
-[part="popover"][data-placement^="bottom"] [part~="arrow"] {
-border-left: var(--_popover-edge);
-border-top: var(--_popover-edge);
-}
-
-[part="popover"][data-placement^="top"] [part~="arrow"] {
-border-bottom: var(--_popover-edge);
-border-right: var(--_popover-edge);
-}
-
-[part="popover"][data-placement^="right"] [part~="arrow"] {
-border-bottom: var(--_popover-edge);
-border-left: var(--_popover-edge);
-}
-
-[part="popover"][data-placement^="left"] [part~="arrow"] {
-border-right: var(--_popover-edge);
-border-top: var(--_popover-edge);
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+overlay var(--helix-duration-fast) allow-discrete;}[part="popover"][data-placement^="top"] {--_travel: var(--helix-space-2xs);}[part="popover"][data-placed] {opacity: 1;scale: 1;transform: none;}[part="popover"][data-placement^="top"] {transform-origin: var(--floating-arrow-x, 50%) 100%;}[part="popover"][data-placement^="bottom"] {transform-origin: var(--floating-arrow-x, 50%) 0;}[part="popover"][data-placement^="left"] {transform-origin: 100% var(--floating-arrow-y, 50%);}[part="popover"][data-placement^="right"] {transform-origin: 0 var(--floating-arrow-y, 50%);}@media (prefers-reduced-motion: reduce) {[part="popover"],
+[part="popover"][data-placed] {scale: 1;transform: none;transition: none;}}[part="content"] {max-block-size: var(--popover-max-block-size, var(--floating-available-block-size, none));overflow: auto;padding: var(--popover-padding, var(--helix-space-md));}:host([separation="plain"]) [part="content"] {padding: var(--popover-padding, var(--helix-space-none));}[part="popover"]:focus,
+[part="popover"]:focus-visible {outline: none;}[part~="arrow"] {background-color: var(--helix-color-surface-overlay);block-size: var(--popover-arrow-size, 0.5rem);inline-size: var(--popover-arrow-size, 0.5rem);position: absolute;rotate: 45deg;}[part="popover"][data-placement^="bottom"] [part~="arrow"] {border-left: var(--_popover-edge);border-top: var(--_popover-edge);}[part="popover"][data-placement^="top"] [part~="arrow"] {border-bottom: var(--_popover-edge);border-right: var(--_popover-edge);}[part="popover"][data-placement^="right"] [part~="arrow"] {border-bottom: var(--_popover-edge);border-left: var(--_popover-edge);}[part="popover"][data-placement^="left"] [part~="arrow"] {border-right: var(--_popover-edge);border-top: var(--_popover-edge);}@media print {:host {display: none;}}`);