@fusion.dev/helix 0.145.0 → 0.147.0

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

@@ -1,140 +1,42 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---outline-rail: var(--helix-space-2xs);
-display: block;
-}
-
-[part="nav"] {
-background-image: linear-gradient(var(--helix-color-border), var(--helix-color-border));
-
-background-position: calc((var(--outline-rail) - var(--helix-border-thin)) / 2) 0;
-background-repeat: repeat-y;
-background-size: var(--helix-border-thin) 100%;
-display: flex;
-flex-direction: column;
-
-position: relative;
-}
-
-[part="indicator"] {
---_mark-width: var(--helix-border-thin);
-
-background-color: var(--helix-color-primary);
-block-size: var(--indicator-block-size, 0);
-border-radius: var(--helix-radii-full);
-inline-size: var(--_mark-width);
-inset-block-start: 0;
-inset-inline-start: calc((var(--outline-rail) - var(--_mark-width)) / 2);
-opacity: 0;
-position: absolute;
-translate: 0 var(--indicator-y, 0);
-
-transition:
+export const styles = createSheet(`:host {--outline-rail: var(--helix-space-2xs);display: block;}[part="nav"] {background-image: linear-gradient(
+var(--outline-rule-color, var(--helix-color-border)),
+var(--outline-rule-color, var(--helix-color-border))
+);background-position: calc((var(--outline-rail) - var(--helix-border-thin)) / 2) 0;background-repeat: repeat-y;background-size: var(--helix-border-thin) 100%;display: flex;flex-direction: column;position: relative;}[part="indicator"] {--_mark-width: var(--helix-border-thin);background-color: var(--outline-indicator-color, var(--helix-color-primary));block-size: var(--indicator-block-size, 0);border-radius: var(--helix-radii-full);inline-size: var(--_mark-width);inset-block-start: 0;inset-inline-start: calc((var(--outline-rail) - var(--_mark-width)) / 2);opacity: 0;position: absolute;translate: 0 var(--indicator-y, 0);transition:
 translate var(--helix-duration-normal) var(--helix-easing-spring),
 block-size var(--helix-duration-slow) var(--helix-easing-decelerate),
 inline-size var(--helix-duration-normal) var(--helix-easing-standard),
 inset-inline-start var(--helix-duration-normal) var(--helix-easing-standard),
-opacity var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="indicator"][data-placed] {
-opacity: 1;
-}
-
-:host(:hover) [part="indicator"]:not([data-moving]) {
---_mark-width: var(--helix-border-thick);
-}
-
-[part="indicator"][data-moving] {
---_mark-width: var(--outline-rail);
-
-transition:
+opacity var(--helix-duration-fast) var(--helix-easing-standard);}[part="indicator"][data-placed] {opacity: 1;}:host(:hover) [part="indicator"]:not([data-moving]) {--_mark-width: var(--helix-border-thick);}[part="indicator"][data-moving] {--_mark-width: var(--outline-rail);transition:
 translate var(--helix-duration-normal) var(--helix-easing-spring),
 block-size var(--helix-duration-slow) var(--helix-easing-decelerate),
 inline-size var(--helix-duration-fast) var(--helix-easing-decelerate),
 inset-inline-start var(--helix-duration-fast) var(--helix-easing-decelerate),
-opacity var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-::slotted(a) {
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-muted);
-
-font-size: var(--helix-text-xs);
-
-font-weight: var(--helix-weight-medium);
-line-height: var(--helix-leading-normal);
-
-margin-inline-start: var(--outline-rail, var(--helix-border-thick));
-padding-block: var(--helix-space-2xs);
-padding-inline: var(--helix-space-sm);
-text-decoration: none;
-transition:
+opacity var(--helix-duration-fast) var(--helix-easing-standard);}::slotted(a) {border-radius: var(--outline-link-radius, var(--helix-radii-sm));color: var(--outline-link-color, var(--helix-color-foreground-muted));font-size: var(--outline-link-font-size, var(--helix-text-xs));font-weight: var(--helix-weight-medium);line-height: var(--helix-leading-normal);margin-inline-start: var(--outline-rail, var(--helix-border-thick));padding-block: var(--outline-link-padding-block, var(--helix-space-2xs));padding-inline: var(--outline-link-padding-inline, var(--helix-space-sm));text-decoration: none;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-::slotted(a):hover {
-background-color: color-mix(in oklab, var(--helix-color-foreground) 5%, transparent);
-color: var(--helix-color-foreground);
-text-decoration: none;
-}
-
-::slotted(a[aria-current]) {
-color: var(--helix-color-foreground);
-
-font-weight: var(--helix-weight-semibold);
-}
-
-::slotted(a[data-level="2"]) {
-padding-inline-start: calc(var(--helix-space-sm) + var(--outline-indent, var(--helix-space-sm)));
-}
-
-::slotted(a[data-level="3"]) {
-padding-inline-start: calc(
-var(--helix-space-sm) +
+color var(--helix-duration-fast) var(--helix-easing-standard);}::slotted(a):hover {background-color: var(
+--outline-link-hover-background-color,
+color-mix(in oklab, var(--helix-color-foreground) 5%, transparent)
+);color: var(--outline-link-hover-color, var(--helix-color-foreground));text-decoration: none;}::slotted(a[aria-current]) {color: var(--outline-link-current-color, var(--helix-color-foreground));font-weight: var(--outline-link-current-weight, var(--helix-weight-semibold));}::slotted(a[data-level="2"]) {padding-inline-start: calc(
+var(--outline-link-padding-inline, var(--helix-space-sm)) +
+var(--outline-indent, var(--helix-space-sm))
+);}::slotted(a[data-level="3"]) {padding-inline-start: calc(
+var(--outline-link-padding-inline, var(--helix-space-sm)) +
 2 *
 var(--outline-indent, var(--helix-space-sm))
-);
-}
-
-::slotted(a[data-level="4"]) {
-padding-inline-start: calc(
-var(--helix-space-sm) +
+);}::slotted(a[data-level="4"]) {padding-inline-start: calc(
+var(--outline-link-padding-inline, var(--helix-space-sm)) +
 3 *
 var(--outline-indent, var(--helix-space-sm))
-);
-}
-
-::slotted(a[data-level="5"]) {
-padding-inline-start: calc(
-var(--helix-space-sm) +
+);}::slotted(a[data-level="5"]) {padding-inline-start: calc(
+var(--outline-link-padding-inline, var(--helix-space-sm)) +
 4 *
 var(--outline-indent, var(--helix-space-sm))
-);
-}
-
-::slotted(a[data-level="6"]) {
-padding-inline-start: calc(
-var(--helix-space-sm) +
+);}::slotted(a[data-level="6"]) {padding-inline-start: calc(
+var(--outline-link-padding-inline, var(--helix-space-sm)) +
 5 *
 var(--outline-indent, var(--helix-space-sm))
-);
-}
-
-::slotted([slot="heading"]) {
-color: var(--helix-color-foreground);
-font-size: var(--helix-text-xs);
-font-weight: var(--helix-weight-semibold);
-line-height: var(--helix-leading-normal);
-margin-block: 0 var(--helix-space-xs);
-margin-inline: 0;
-padding-inline-start: calc(var(--outline-rail) + var(--helix-space-sm));
-}
-
-@media print {
-:host {
-print-color-adjust: economy;
-}
-}`);
+);}::slotted([slot="heading"]) {color: var(--outline-heading-color, var(--helix-color-foreground));font-size: var(--helix-text-xs);font-weight: var(--helix-weight-semibold);line-height: var(--helix-leading-normal);margin-block: 0 var(--helix-space-xs);margin-inline: 0;padding-inline-start: calc(
+var(--outline-rail) +
+var(--outline-link-padding-inline, var(--helix-space-sm))
+);}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -12,10 +12,11 @@ import type { CSSResultGroup } from 'lit';
  * `data-level` is at the top level. The outline does not read heading levels
  * from the document, because the headings are not always in the document.
  *
- * Links in a nested `<ul>` take their indentation from your own stylesheet:
- * the outline's styles reach the elements slotted into it and nothing inside
- * them. Write the links flat with `data-level` for the indentation drawn here,
- * and screen readers still hear them as nested lists.
+ * Links in a nested `<ul>` are styled by `helix.css`, since the outline's own
+ * styles reach the elements slotted into it and nothing inside them: the lists
+ * lose their bullets, each inner list is inset by `--outline-indent`, and the
+ * links read the same hooks as flat ones. Those rules have no specificity, so
+ * any rule of yours wins. Screen readers hear the levels either way.
  *
  * A heading slotted into `heading` is set above the links, lined up with them.
  *
@@ -25,8 +26,20 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Table of contents, On this page, Outline
  * @documentation https://fusion.dev/helix/components/outline
  *
+ * @cssproperty --outline-heading-color - The color of the heading in the `heading` slot.
  * @cssproperty --outline-indent - How far each level is inset from the one above.
+ * @cssproperty --outline-indicator-color - The color of the mark that moves to the section in view.
+ * @cssproperty --outline-link-color - The color of a link.
+ * @cssproperty --outline-link-current-color - The color of the link to the section in view.
+ * @cssproperty --outline-link-current-weight - The weight of the link to the section in view.
+ * @cssproperty --outline-link-font-size - The size of a link's text.
+ * @cssproperty --outline-link-hover-background-color - The fill behind a link under the pointer.
+ * @cssproperty --outline-link-hover-color - The color of a link under the pointer.
+ * @cssproperty --outline-link-padding-block - The space above and below a link's text.
+ * @cssproperty --outline-link-padding-inline - The space either side of a link's text, before any indent.
+ * @cssproperty --outline-link-radius - The corner radius of a link's hover fill.
  * @cssproperty --outline-rail - The width of the gutter that holds the line and the moving mark.
+ * @cssproperty --outline-rule-color - The color of the line down the leading edge.
  */
 export declare class HelixOutline extends HelixHeadlessOutline {
     static styles: CSSResultGroup;

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(--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(--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:
 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(--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(--helix-color-border);color: var(--helix-color-foreground);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(--helix-color-foreground-subtle);cursor: default;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(--helix-size-icon-tight);inline-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(--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;}}`);

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(--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);}`);

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(--helix-color-foreground-subtle);display: inline-block;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-variant-numeric: tabular-nums;}`);

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(--helix-color-foreground);
-font-family: var(--helix-font-sans);
-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(--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(--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,15 +19,25 @@ 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 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 {
     static styles: CSSResultGroup;

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;}}`);