@fusion.dev/helix 0.145.0 → 0.147.0

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

@@ -1,175 +1,10 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[part="field"] {
-align-items: center;
-position: relative;
-background-color: var(--file-input-background-color, var(--helix-color-well));
-border: var(--helix-border-thin) dashed var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
-display: flex;
-gap: var(--helix-space-xs);
-justify-content: center;
-padding: var(--file-input-padding, var(--helix-space-md));
-transition:
+export const styles = createSheet(`[part="field"] {align-items: center;position: relative;background-color: var(--file-input-background-color, var(--helix-color-well));border: var(--helix-border-thin) dashed var(--file-input-border-color, var(--helix-color-border));border-radius: var(--file-input-radius, var(--helix-radii-sm));display: flex;gap: var(--helix-space-xs);justify-content: center;padding: var(--file-input-padding, var(--helix-space-md));transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-border-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="control"] {
-cursor: pointer;
-inset: 0;
-opacity: 0;
-position: absolute;
-}
-
-:host(:focus-within) [part="field"]:not(:focus-within) {
-outline: none;
-}
-
-[part="field"][data-dropping] {
-background-color: var(--helix-color-primary-subtle);
-border-color: var(--helix-color-primary);
-border-style: solid;
-}
-
-[part="trigger"] {
-align-items: center;
-color: var(--helix-color-foreground);
-display: flex;
-flex-direction: column;
-font-family: var(--helix-font-sans);
-gap: var(--helix-space-2xs);
-text-align: center;
-font-size: var(--helix-text-md);
-font-weight: var(--helix-weight-medium);
-
-pointer-events: none;
-}
-
-[part="list"] {
-display: flex;
-flex-direction: column;
-gap: var(--helix-space-2xs);
-list-style: none;
-margin-block: var(--helix-space-2xs) 0;
-padding: var(--helix-space-none);
-}
-
-[part="file"] {
-align-items: center;
-background-color: var(--helix-color-surface);
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
-display: flex;
-gap: var(--helix-space-sm);
-opacity: 1;
-padding-block: var(--helix-space-xs);
-padding-inline: var(--helix-space-sm);
-scale: 1 1;
-transform-origin: top;
-transition:
+border-color var(--helix-duration-fast) var(--helix-easing-standard);}[part="control"] {cursor: pointer;inset: 0;opacity: 0;position: absolute;}:host(:focus-within) [part="field"]:not(:focus-within) {outline: none;}[part="field"][data-dropping] {background-color: var(--file-input-drop-background-color, var(--helix-color-primary-subtle));border-color: var(--file-input-drop-border-color, var(--helix-color-primary));border-style: solid;}[part="trigger"] {align-items: center;color: var(--helix-color-foreground);display: flex;flex-direction: column;font-family: var(--helix-font-sans);gap: var(--helix-space-2xs);text-align: center;font-size: var(--helix-text-md);font-weight: var(--helix-weight-medium);pointer-events: none;}[part="list"] {display: flex;flex-direction: column;gap: var(--helix-space-2xs);list-style: none;margin-block: var(--helix-space-2xs) 0;padding: var(--helix-space-none);}[part~="file"] {align-items: center;background-color: var(--file-input-file-background-color, var(--helix-color-surface));border: var(--helix-border-thin) solid
+var(--file-input-file-border-color, var(--helix-color-border));border-radius: var(--file-input-file-radius, var(--helix-radii-sm));display: flex;gap: var(--helix-space-sm);opacity: 1;padding-block: var(--file-input-file-padding-block, var(--helix-space-xs));padding-inline: var(--file-input-file-padding-inline, var(--helix-space-sm));scale: 1 1;transform-origin: top;transition:
 opacity var(--helix-duration-fast) var(--helix-easing-standard),
-scale var(--helix-duration-fast) var(--helix-easing-emphasized);
-}
-
-@starting-style {
-[part="file"] {
-opacity: 0;
-scale: 1 0.9;
-}
-}
-
-[part="detail"] {
-align-items: center;
-column-gap: var(--helix-space-sm);
-display: flex;
-flex: 1 1 auto;
-flex-wrap: wrap;
-min-inline-size: 0;
-row-gap: var(--helix-space-2xs);
-}
-
-[part="name"] {
-min-inline-size: min(100%, 16ch);
-}
-
-[part="meta"] {
---helix-size-tag: var(--helix-size-tag-sm);
-
-display: flex;
-flex-wrap: wrap;
-gap: var(--helix-space-2xs);
-}
-
-[part="size"] {
-font-variant-numeric: tabular-nums;
-}
-
-[part="name"] {
-color: var(--helix-color-foreground);
-flex: 1 1 auto;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-
-overflow-wrap: anywhere;
-}
-
-[part="remove"] {
---icon-size: var(--helix-size-icon-tight);
-all: unset;
-
-align-items: center;
-border-radius: var(--helix-radii-sm);
-box-sizing: border-box;
-color: var(--helix-color-foreground-muted);
-cursor: pointer;
-display: flex;
-flex: none;
-justify-content: center;
-min-block-size: var(--helix-size-icon-loose);
-min-inline-size: var(--helix-size-icon-loose);
-transition: color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="remove"]:hover {
-color: var(--helix-color-danger);
-}
-
-[part="remove"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host(:disabled) [part="field"] {
-border-style: solid;
-color: var(--helix-color-foreground-subtle);
-}
-
-:host(:disabled) [part="control"],
-:host(:disabled) [part="trigger"] {
-cursor: not-allowed;
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="field"],
-[part="file"],
-[part="remove"] {
-transition: none;
-}
-
-[part="file"] {
-opacity: 1;
-scale: 1 1;
-}
-}
-
-::slotted(helix-icon[slot="trigger"]) {
---icon-size: var(--helix-size-icon-loose);
-
-color: var(--helix-color-foreground-muted);
-}
-
-@media print {
-:host {
-print-color-adjust: exact;
-}
-}`);
+scale var(--helix-duration-fast) var(--helix-easing-emphasized);}@starting-style {[part~="file"] {opacity: 0;scale: 1 0.9;}}[part="detail"] {align-items: center;column-gap: var(--helix-space-sm);display: flex;flex: 1 1 auto;flex-wrap: wrap;min-inline-size: 0;row-gap: var(--helix-space-2xs);}[part="name"] {min-inline-size: min(100%, 16ch);}[part="meta"] {--helix-size-tag: var(--helix-size-tag-sm);display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs);}[part="size"] {font-variant-numeric: tabular-nums;}[part="name"] {color: var(--helix-color-foreground);flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);overflow-wrap: anywhere;}[part="status"] {align-items: center;color: var(--file-input-status-color, var(--helix-color-foreground-muted));display: flex;flex: 1 1 100%;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-xs);}[part~="file-error"] [part="status"] {color: var(--file-input-status-color-error, var(--helix-color-danger));}[part="progress"] {appearance: none;background-color: var(--file-input-progress-track-color, var(--helix-color-border));block-size: var(--helix-border-thick);border: 0;border-radius: var(--helix-radii-full);flex: 1 1 auto;overflow: hidden;}[part="progress"]::-webkit-progress-bar {background-color: transparent;}[part="progress"]::-webkit-progress-value {background-color: var(--file-input-progress-color, var(--helix-color-primary));}[part="progress"]::-moz-progress-bar {background-color: var(--file-input-progress-color, var(--helix-color-primary));}[part="remove"] {--icon-size: var(--helix-size-icon-tight);all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--file-input-remove-color, var(--helix-color-foreground-muted));cursor: pointer;display: flex;flex: none;justify-content: center;min-block-size: var(--helix-size-icon-loose);min-inline-size: var(--helix-size-icon-loose);transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[part="remove"]:hover {color: var(--file-input-remove-color-hover, var(--helix-color-danger));}[part="remove"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host(:disabled) [part="field"] {border-style: solid;color: var(--helix-color-foreground-subtle);}:host(:disabled) [part="control"],
+:host(:disabled) [part="trigger"] {cursor: not-allowed;}@media (prefers-reduced-motion: reduce) {[part="field"],
+[part~="file"],
+[part="remove"] {transition: none;}[part~="file"] {opacity: 1;scale: 1 1;}}::slotted(helix-icon[slot="trigger"]) {--icon-size: var(--helix-size-icon-loose);color: var(--helix-color-foreground-muted);}@media print {:host {print-color-adjust: exact;}}`);

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

@@ -22,7 +22,22 @@ import '../../tag/index.js';
  * @documentation https://fusion.dev/helix/components/file-input
  *
  * @cssproperty --file-input-background-color - Fill behind the field.
+ * @cssproperty --file-input-border-color - The field's dashed edge at rest.
+ * @cssproperty --file-input-drop-background-color - Fill behind the field while files are dragged over it.
+ * @cssproperty --file-input-drop-border-color - The field's edge while files are dragged over it.
+ * @cssproperty --file-input-file-background-color - Fill behind each chosen file.
+ * @cssproperty --file-input-file-border-color - The edge of each chosen file.
+ * @cssproperty --file-input-file-padding-block - Padding above and below each chosen file.
+ * @cssproperty --file-input-file-padding-inline - Padding at each side of each chosen file.
+ * @cssproperty --file-input-file-radius - Corner radius of each chosen file.
  * @cssproperty --file-input-padding - Padding inside the field.
+ * @cssproperty --file-input-progress-color - The filled part of a file's upload bar.
+ * @cssproperty --file-input-progress-track-color - The unfilled part of a file's upload bar.
+ * @cssproperty --file-input-radius - Corner radius of the field.
+ * @cssproperty --file-input-remove-color - The remove button's icon at rest.
+ * @cssproperty --file-input-remove-color-hover - The remove button's icon under the pointer.
+ * @cssproperty --file-input-status-color - The words beside a file's upload bar.
+ * @cssproperty --file-input-status-color-error - The words beside a file whose upload failed.
  */
 export declare class HelixFileInput extends HelixHeadlessFileInput {
     static tier: string;

package/dist/filter-input/chip/filter-chip.css.js

@@ -1,85 +1,3 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-align-items: center;
-background-color: var(--filter-input-chip-background-color, var(--helix-color-surface-sunken));
-border: var(--helix-border-thin) solid
-var(--filter-input-chip-border-color, var(--helix-color-border));
-border-radius: var(--filter-input-chip-radius, var(--helix-radii-sm));
-color: var(--helix-color-foreground);
-display: inline-flex;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-
-gap: var(--helix-space-none);
-line-height: var(--helix-leading-normal);
-max-inline-size: 100%;
-
-min-block-size: var(--helix-size-tag);
-padding-inline: var(--helix-space-xs);
-}
-
-:host {
---helix-size-control: var(--helix-size-control-sm);
---helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
---helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
---helix-size-icon: var(--helix-size-icon-sm);
---helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
---helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
-}
-
-[part="field"] {
-color: var(--helix-color-foreground-muted);
-padding-inline-end: var(--helix-space-2xs);
-white-space: nowrap;
-}
-
-[part="operator"] {
-align-items: center;
-color: var(--helix-color-foreground-subtle);
-display: inline-flex;
-padding-inline-end: var(--helix-space-2xs);
-white-space: nowrap;
-}
-
-[part="values"] {
-font-weight: var(--helix-weight-medium);
-min-inline-size: 0;
-overflow: hidden;
-text-overflow: ellipsis;
-white-space: nowrap;
-}
-
-[part="dismiss"] {
-background: none;
-block-size: var(--helix-size-icon);
-border: 0;
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-subtle);
-cursor: pointer;
-display: grid;
-inline-size: var(--helix-size-icon);
-margin-inline-start: var(--helix-space-2xs);
-padding: var(--helix-space-none);
-place-items: center;
-}
-
-[part="dismiss-mark"] {
-block-size: var(--icon-size, 0.85em);
-inline-size: var(--icon-size, 0.85em);
-}
-
-[part="dismiss"]:hover {
-background-color: color-mix(in oklab, currentcolor 12%, transparent);
-color: var(--helix-color-foreground);
-}
-
-[part="dismiss"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-@media print {
-[part="dismiss"] {
-display: none;
-}
-}`);
+export const styles = createSheet(`:host {align-items: center;background-color: var(--filter-input-chip-background-color, var(--helix-color-surface-sunken));border: var(--helix-border-thin) solid
+var(--filter-input-chip-border-color, var(--helix-color-border));border-radius: var(--filter-input-chip-radius, var(--helix-radii-sm));color: var(--helix-color-foreground);display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);gap: var(--helix-space-none);line-height: var(--helix-leading-normal);max-inline-size: 100%;min-block-size: var(--helix-size-tag);padding-inline: var(--helix-space-xs);}:host {--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);}[part="field"] {color: var(--helix-color-foreground-muted);padding-inline-end: var(--helix-space-2xs);white-space: nowrap;}[part="operator"] {align-items: center;color: var(--helix-color-foreground-subtle);display: inline-flex;padding-inline-end: var(--helix-space-2xs);white-space: nowrap;}[part="values"] {font-weight: var(--helix-weight-medium);min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}[part="dismiss"] {background: none;block-size: var(--helix-size-icon);border: 0;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-subtle);cursor: pointer;display: grid;inline-size: var(--helix-size-icon);margin-inline-start: var(--helix-space-2xs);padding: var(--helix-space-none);place-items: center;}[part="dismiss-mark"] {block-size: var(--icon-size, 0.85em);inline-size: var(--icon-size, 0.85em);}[part="dismiss"]:hover {background-color: color-mix(in oklab, currentcolor 12%, transparent);color: var(--helix-color-foreground);}[part="dismiss"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}@media print {[part="dismiss"] {display: none;}}`);

package/dist/filter-input/field/filter-field.css.js

@@ -1,4 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: none;
-}`);
+export const styles = createSheet(`:host {display: none;}`);

package/dist/filter-input/menu/filter-menu.css.js

@@ -1,4 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: contents;
-}`);
+export const styles = createSheet(`:host {display: contents;}`);

package/dist/filter-input/operator/filter-operator.css.js

@@ -1,4 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: none;
-}`);
+export const styles = createSheet(`:host {display: none;}`);

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

@@ -1,114 +1,8 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
---_filter-input-size: var(--filter-input-size, var(--helix-size-control));
-}
-
-[part="field"] {
-align-items: center;
-background-color: var(--filter-input-background-color, var(--helix-color-well));
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-subtle);
-display: flex;
-flex-wrap: wrap;
-gap: var(--helix-space-2xs);
-min-block-size: var(--_filter-input-size);
-
-padding-block: var(--helix-space-2xs);
-padding-inline: var(--helix-space-xs);
-transition:
+export const styles = createSheet(`:host {--_filter-input-size: var(--filter-input-size, var(--helix-size-control));}[part="field"] {align-items: center;background-color: var(--filter-input-background-color, var(--helix-color-well));border: var(--helix-border-thin) solid
+var(--filter-input-field-border-color, var(--helix-color-border));border-radius: var(--filter-input-radius, var(--helix-radii-sm));color: var(--helix-color-foreground-subtle);display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs);min-block-size: var(--_filter-input-size);padding-block: var(--helix-space-2xs);padding-inline: var(--filter-input-padding-inline, var(--helix-space-xs));transition:
 border-color var(--helix-duration-fast) var(--helix-easing-standard),
-background-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-::slotted([slot="tags"]) {
-flex: 0 0 auto;
-max-inline-size: 100%;
-}
-
-[part="control"] {
-flex: 1 1 var(--filter-input-control-size, 6ch);
-}
-
-[part="lead"] {
-align-items: center;
-align-self: stretch;
-border-inline-end: var(--helix-border-thin) solid
-var(--filter-input-lead-border-color, var(--helix-color-border));
-display: flex;
-margin-block: calc(var(--helix-space-2xs) * -1);
-margin-inline-start: calc(var(--helix-space-xs) * -1);
-padding-inline: var(--helix-space-2xs) var(--helix-space-xs);
-}
-
-[part="lead"][hidden] {
-display: none;
-}
-
-[part="lead"],
-slot[name="end"] {
---button-size: var(--filter-input-action-size, var(--helix-size-tag));
---icon-button-size: var(--filter-input-action-size, var(--helix-size-tag));
---button-padding-inline: var(--filter-input-action-padding-inline, var(--helix-space-xs));
-}
-
-slot[name="start"]::slotted(*),
-slot[name="end"]::slotted(*) {
-color: var(--helix-color-foreground-subtle);
-flex: 0 0 auto;
-}
-
-[part="clear"] {
---icon-size: 0.85em;
-all: unset;
-
-align-items: center;
-align-self: center;
-border-radius: var(--helix-radii-sm);
-box-sizing: border-box;
-color: var(--helix-color-foreground-subtle);
-cursor: pointer;
-display: flex;
-flex: 0 0 auto;
-justify-content: center;
-min-block-size: var(--helix-size-icon-loose);
-min-inline-size: var(--helix-size-icon-loose);
-transition: color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="clear"]:hover {
-background-color: color-mix(in oklab, currentcolor 12%, transparent);
-color: var(--helix-color-foreground);
-}
-
-[part="clear"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host(:disabled) [part="field"] {
-cursor: not-allowed;
-opacity: 0.5;
-}
-
-@media print {
-:host {
-print-color-adjust: exact;
-}
-}
-
-[part="surface"] {
---_floating-border-color: var(--filter-input-border-color, var(--helix-color-border));
---_floating-border-width: var(--filter-input-border-width, var(--helix-border-floating));
---_floating-shadow: var(--filter-input-shadow, var(--helix-shadow-floating));
-
-box-sizing: border-box;
-inline-size: var(--filter-input-panel-size, var(--floating-anchor-inline-size, 100%));
-
-max-block-size: var(--floating-available-block-size, 20rem);
-min-inline-size: max-content;
-overflow-y: auto;
-padding-block: var(--helix-space-2xs);
-padding-inline: var(--helix-space-none);
-position: absolute;
-}`);
+background-color var(--helix-duration-fast) var(--helix-easing-standard);}::slotted([slot="tags"]) {flex: 0 0 auto;max-inline-size: 100%;}[part="control"] {flex: 1 1 var(--filter-input-control-size, 6ch);}[part="lead"] {align-items: center;align-self: stretch;border-inline-end: var(--helix-border-thin) solid
+var(--filter-input-lead-border-color, var(--helix-color-border));display: flex;margin-block: calc(var(--helix-space-2xs) * -1);margin-inline-start: calc(var(--helix-space-xs) * -1);padding-inline: var(--helix-space-2xs) var(--helix-space-xs);}[part="lead"][hidden] {display: none;}[part="lead"],
+slot[name="end"] {--button-size: var(--filter-input-action-size, var(--helix-size-tag));--icon-button-size: var(--filter-input-action-size, var(--helix-size-tag));--button-padding-inline: var(--filter-input-action-padding-inline, var(--helix-space-xs));}slot[name="start"]::slotted(*),
+slot[name="end"]::slotted(*) {color: var(--helix-color-foreground-subtle);flex: 0 0 auto;}[part="clear"] {--icon-size: 0.85em;all: unset;align-items: center;align-self: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--filter-input-clear-color, var(--helix-color-foreground-subtle));cursor: pointer;display: flex;flex: 0 0 auto;justify-content: center;min-block-size: var(--helix-size-icon-loose);min-inline-size: var(--helix-size-icon-loose);transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[part="clear"]:hover {background-color: color-mix(in oklab, currentcolor 12%, transparent);color: var(--filter-input-clear-color-hover, var(--helix-color-foreground));}[part="clear"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host(:disabled) [part="field"] {cursor: not-allowed;opacity: 0.5;}@media print {:host {print-color-adjust: exact;}}[part="surface"] {--_floating-border-color: var(--filter-input-border-color, var(--helix-color-border));--_floating-border-width: var(--filter-input-border-width, var(--helix-border-floating));--_floating-shadow: var(--filter-input-shadow, var(--helix-shadow-floating));box-sizing: border-box;inline-size: var(--filter-input-panel-size, var(--floating-anchor-inline-size, 100%));max-block-size: var(--floating-available-block-size, 20rem);min-inline-size: max-content;overflow-y: auto;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-none);position: absolute;}`);

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

@@ -32,9 +32,14 @@ import '../../option/index.js';
  * @cssproperty --filter-input-background-color - The fill behind the field.
  * @cssproperty --filter-input-border-color - The color of the suggestion panel's border.
  * @cssproperty --filter-input-border-width - The width of the suggestion panel's border. It follows `--helix-border-floating`.
+ * @cssproperty --filter-input-clear-color - The clear button's icon at rest.
+ * @cssproperty --filter-input-clear-color-hover - The clear button's icon under the pointer.
  * @cssproperty --filter-input-control-size - The smallest width the text keeps as tokens fill the line. Below it, the text wraps to its own line.
+ * @cssproperty --filter-input-field-border-color - The field's edge at rest. Hover, focus, and an error still draw their own.
  * @cssproperty --filter-input-lead-border-color - The color of the line between the leading box and the text.
+ * @cssproperty --filter-input-padding-inline - Space at each side of the field, inside its edge.
  * @cssproperty --filter-input-panel-size - The width of the suggestion panel. It matches the field by default.
+ * @cssproperty --filter-input-radius - Corner radius of the field.
  * @cssproperty --filter-input-shadow - The shadow under the panel. It follows
  *   `--helix-shadow-floating`. The panel can sit over any content, so it has a
  *   shadow by default.

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

@@ -1,201 +1,7 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---_flex-column-gap: var(--_flex-gap);
---_flex-gap: var(--helix-space-none);
---_flex-row-gap: var(--_flex-gap);
-
-column-gap: var(--_flex-column-gap);
-display: flex;
-flex-direction: row;
-row-gap: var(--_flex-row-gap);
-}
-
-:host([inline]) {
-display: inline-flex;
-}
-
-:host([direction="column"]) {
-flex-direction: column;
-}
-
-:host([direction="row-reverse"]) {
-flex-direction: row-reverse;
-}
-
-:host([direction="column-reverse"]) {
-flex-direction: column-reverse;
-}
-
-:host([layout="cluster"]),
+export const styles = createSheet(`:host {--_flex-column-gap: var(--_flex-gap);--_flex-gap: var(--helix-space-none);--_flex-row-gap: var(--_flex-gap);column-gap: var(--_flex-column-gap);display: flex;flex-direction: row;row-gap: var(--_flex-row-gap);}:host([inline]) {display: inline-flex;}:host([direction="column"]) {flex-direction: column;}:host([direction="row-reverse"]) {flex-direction: row-reverse;}:host([direction="column-reverse"]) {flex-direction: column-reverse;}:host([layout="cluster"]),
 :host([layout="flank"]),
 :host([layout="flank-end"]),
-:host([layout="split"]) {
-align-items: center;
-flex-wrap: wrap;
-}
-
-:host([layout="split"]) {
-justify-content: space-between;
-}
-
-:host([layout="flank"]) ::slotted(:first-child),
-:host([layout="flank-end"]) ::slotted(:last-child) {
-flex-basis: var(--flex-flank-size, auto);
-flex-grow: 1;
-}
-
-:host([layout="flank"]) ::slotted(:last-child),
-:host([layout="flank-end"]) ::slotted(:first-child) {
-flex-basis: 0;
-flex-grow: 999;
-min-inline-size: var(--flex-flank-min, 50%);
-}
-
-:host([wrap]) {
-flex-wrap: wrap;
-}
-
-:host([wrap="reverse"]) {
-flex-wrap: wrap-reverse;
-}
-
-:host([gap="2xs"]) {
---_flex-gap: var(--helix-space-2xs);
-}
-:host([gap="xs"]) {
---_flex-gap: var(--helix-space-xs);
-}
-:host([gap="sm"]) {
---_flex-gap: var(--helix-space-sm);
-}
-:host([gap="md"]) {
---_flex-gap: var(--helix-space-md);
-}
-:host([gap="lg"]) {
---_flex-gap: var(--helix-space-lg);
-}
-:host([gap="xl"]) {
---_flex-gap: var(--helix-space-xl);
-}
-:host([gap="2xl"]) {
---_flex-gap: var(--helix-space-2xl);
-}
-
-:host([gap="3xl"]) {
---_flex-gap: var(--helix-space-3xl);
-}
-
-:host([row-gap="none"]) {
---_flex-row-gap: var(--helix-space-none);
-}
-:host([row-gap="2xs"]) {
---_flex-row-gap: var(--helix-space-2xs);
-}
-:host([row-gap="xs"]) {
---_flex-row-gap: var(--helix-space-xs);
-}
-:host([row-gap="sm"]) {
---_flex-row-gap: var(--helix-space-sm);
-}
-:host([row-gap="md"]) {
---_flex-row-gap: var(--helix-space-md);
-}
-:host([row-gap="lg"]) {
---_flex-row-gap: var(--helix-space-lg);
-}
-:host([row-gap="xl"]) {
---_flex-row-gap: var(--helix-space-xl);
-}
-:host([row-gap="2xl"]) {
---_flex-row-gap: var(--helix-space-2xl);
-}
-:host([row-gap="3xl"]) {
---_flex-row-gap: var(--helix-space-3xl);
-}
-
-:host([column-gap="none"]) {
---_flex-column-gap: var(--helix-space-none);
-}
-:host([column-gap="2xs"]) {
---_flex-column-gap: var(--helix-space-2xs);
-}
-:host([column-gap="xs"]) {
---_flex-column-gap: var(--helix-space-xs);
-}
-:host([column-gap="sm"]) {
---_flex-column-gap: var(--helix-space-sm);
-}
-:host([column-gap="md"]) {
---_flex-column-gap: var(--helix-space-md);
-}
-:host([column-gap="lg"]) {
---_flex-column-gap: var(--helix-space-lg);
-}
-:host([column-gap="xl"]) {
---_flex-column-gap: var(--helix-space-xl);
-}
-:host([column-gap="2xl"]) {
---_flex-column-gap: var(--helix-space-2xl);
-}
-:host([column-gap="3xl"]) {
---_flex-column-gap: var(--helix-space-3xl);
-}
-
-:host([align-items="start"]) {
-align-items: flex-start;
-}
-:host([align-items="center"]) {
-align-items: center;
-}
-:host([align-items="end"]) {
-align-items: flex-end;
-}
-:host([align-items="baseline"]) {
-align-items: baseline;
-}
-
-:host([align-content="start"]) {
-align-content: flex-start;
-}
-:host([align-content="center"]) {
-align-content: center;
-}
-:host([align-content="end"]) {
-align-content: flex-end;
-}
-:host([align-content="between"]) {
-align-content: space-between;
-}
-:host([align-content="around"]) {
-align-content: space-around;
-}
-:host([align-content="stretch"]) {
-align-content: stretch;
-}
-
-:host([align-items="stretch"]) {
-align-items: stretch;
-}
-
-:host([justify-content="start"]) {
-justify-content: flex-start;
-}
-:host([justify-content="center"]) {
-justify-content: center;
-}
-:host([justify-content="end"]) {
-justify-content: flex-end;
-}
-:host([justify-content="between"]) {
-justify-content: space-between;
-}
-:host([justify-content="around"]) {
-justify-content: space-around;
-}
-
-@media print {
-:host {
-print-color-adjust: economy;
-}
-}`);
+:host([layout="split"]) {align-items: center;flex-wrap: wrap;}:host([layout="split"]) {justify-content: space-between;}:host([layout="flank"]) ::slotted(:first-child),
+:host([layout="flank-end"]) ::slotted(:last-child) {flex-basis: var(--flex-flank-size, auto);flex-grow: 1;}:host([layout="flank"]) ::slotted(:last-child),
+:host([layout="flank-end"]) ::slotted(:first-child) {flex-basis: 0;flex-grow: 999;min-inline-size: var(--flex-flank-min, 50%);}:host([layout="switch"]) {flex-wrap: wrap;}:host([layout="switch"]) ::slotted(*) {flex-basis: calc((var(--flex-switch-at, 30rem) - 100%) * 999);flex-grow: 1;}:host([wrap]) {flex-wrap: wrap;}:host([wrap="reverse"]) {flex-wrap: wrap-reverse;}:host([gap="2xs"]) {--_flex-gap: var(--helix-space-2xs);}:host([gap="xs"]) {--_flex-gap: var(--helix-space-xs);}:host([gap="sm"]) {--_flex-gap: var(--helix-space-sm);}:host([gap="md"]) {--_flex-gap: var(--helix-space-md);}:host([gap="lg"]) {--_flex-gap: var(--helix-space-lg);}:host([gap="xl"]) {--_flex-gap: var(--helix-space-xl);}:host([gap="2xl"]) {--_flex-gap: var(--helix-space-2xl);}:host([gap="3xl"]) {--_flex-gap: var(--helix-space-3xl);}:host([row-gap="none"]) {--_flex-row-gap: var(--helix-space-none);}:host([row-gap="2xs"]) {--_flex-row-gap: var(--helix-space-2xs);}:host([row-gap="xs"]) {--_flex-row-gap: var(--helix-space-xs);}:host([row-gap="sm"]) {--_flex-row-gap: var(--helix-space-sm);}:host([row-gap="md"]) {--_flex-row-gap: var(--helix-space-md);}:host([row-gap="lg"]) {--_flex-row-gap: var(--helix-space-lg);}:host([row-gap="xl"]) {--_flex-row-gap: var(--helix-space-xl);}:host([row-gap="2xl"]) {--_flex-row-gap: var(--helix-space-2xl);}:host([row-gap="3xl"]) {--_flex-row-gap: var(--helix-space-3xl);}:host([column-gap="none"]) {--_flex-column-gap: var(--helix-space-none);}:host([column-gap="2xs"]) {--_flex-column-gap: var(--helix-space-2xs);}:host([column-gap="xs"]) {--_flex-column-gap: var(--helix-space-xs);}:host([column-gap="sm"]) {--_flex-column-gap: var(--helix-space-sm);}:host([column-gap="md"]) {--_flex-column-gap: var(--helix-space-md);}:host([column-gap="lg"]) {--_flex-column-gap: var(--helix-space-lg);}:host([column-gap="xl"]) {--_flex-column-gap: var(--helix-space-xl);}:host([column-gap="2xl"]) {--_flex-column-gap: var(--helix-space-2xl);}:host([column-gap="3xl"]) {--_flex-column-gap: var(--helix-space-3xl);}:host([align-items="start"]) {align-items: flex-start;}:host([align-items="center"]) {align-items: center;}:host([align-items="end"]) {align-items: flex-end;}:host([align-items="baseline"]) {align-items: baseline;}:host([align-content="start"]) {align-content: flex-start;}:host([align-content="center"]) {align-content: center;}:host([align-content="end"]) {align-content: flex-end;}:host([align-content="between"]) {align-content: space-between;}:host([align-content="around"]) {align-content: space-around;}:host([align-content="stretch"]) {align-content: stretch;}:host([align-items="stretch"]) {align-items: stretch;}:host([justify-content="start"]) {justify-content: flex-start;}:host([justify-content="center"]) {justify-content: center;}:host([justify-content="end"]) {justify-content: flex-end;}:host([justify-content="between"]) {justify-content: space-between;}:host([justify-content="around"]) {justify-content: space-around;}@media print {:host {print-color-adjust: economy;}}`);