@fusion.dev/helix 0.145.0 → 0.147.0

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

@@ -1,107 +1,21 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: inline;
-
-font-family: var(--text-font-family);
-font-size: var(--text-font-size);
-font-weight: var(--text-font-weight);
-letter-spacing: var(--text-letter-spacing);
-line-height: var(--text-line-height);
-}
-
-:host([as="p"]),
+export const styles = createSheet(`:host {display: inline;font-family: var(--text-font-family);font-size: var(--text-font-size);font-weight: var(--text-font-weight);letter-spacing: var(--text-letter-spacing);line-height: var(--text-line-height);}:host([as="p"]),
 :host([as="h1"]),
 :host([as="h2"]),
 :host([as="h3"]),
 :host([as="h4"]),
 :host([as="h5"]),
-:host([as="h6"]) {
-display: block;
-}
-
-:host([variant="display"]),
-:host(:not([variant])[as="h1"]) {
-font-family: var(--text-font-family, var(--helix-font-display));
-font-size: var(--text-font-size, var(--helix-text-3xl));
-font-weight: var(--text-font-weight, var(--helix-weight-semibold));
-letter-spacing: var(--text-letter-spacing, var(--helix-tracking-tight));
-line-height: var(--text-line-height, var(--helix-leading-heading));
-}
-
-:host([variant="heading"]),
-:host(:not([variant])[as="h2"]) {
-font-family: var(--text-font-family, var(--helix-font-sans));
-font-size: var(--text-font-size, var(--helix-text-2xl));
-font-weight: var(--text-font-weight, var(--helix-weight-semibold));
-letter-spacing: var(--text-letter-spacing, var(--helix-tracking-tight));
-line-height: var(--text-line-height, var(--helix-leading-heading));
-}
-
-:host([variant="subheading"]),
-:host(:not([variant])[as="h3"]) {
-font-family: var(--text-font-family, var(--helix-font-sans));
-font-size: var(--text-font-size, var(--helix-text-xl));
-font-weight: var(--text-font-weight, var(--helix-weight-semibold));
-letter-spacing: var(--text-letter-spacing, var(--helix-tracking-tight));
-line-height: var(--text-line-height, var(--helix-leading-heading));
-}
-
-:host([variant="title"]),
-:host(:not([variant])[as="h4"]) {
-font-family: var(--text-font-family, var(--helix-font-sans));
-font-size: var(--text-font-size, var(--helix-text-lg));
-font-weight: var(--text-font-weight, var(--helix-weight-semibold));
-letter-spacing: var(--text-letter-spacing, var(--helix-tracking-normal));
-line-height: var(--text-line-height, var(--helix-leading-heading));
-}
-
-:host([variant="body"]),
-:host(:not([variant])[as="p"]) {
-font-family: var(--text-font-family, var(--helix-font-sans));
-font-size: var(--text-font-size, var(--helix-text-md));
-font-weight: var(--text-font-weight, var(--helix-weight-regular));
-letter-spacing: var(--text-letter-spacing, var(--helix-tracking-normal));
-line-height: var(--text-line-height, var(--helix-leading-normal));
-}
-
-:host([variant="body-strong"]),
+:host([as="h6"]) {display: block;}:host([variant="display"]),
+:host(:not([variant])[as="h1"]) {font-family: var(--text-font-family, var(--helix-font-display));font-size: var(--text-font-size, var(--helix-text-3xl));font-weight: var(--text-font-weight, var(--helix-weight-semibold));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-tight));line-height: var(--text-line-height, var(--helix-leading-heading));}:host([variant="heading"]),
+:host(:not([variant])[as="h2"]) {font-family: var(--text-font-family, var(--helix-font-sans));font-size: var(--text-font-size, var(--helix-text-2xl));font-weight: var(--text-font-weight, var(--helix-weight-semibold));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-tight));line-height: var(--text-line-height, var(--helix-leading-heading));}:host([variant="subheading"]),
+:host(:not([variant])[as="h3"]) {font-family: var(--text-font-family, var(--helix-font-sans));font-size: var(--text-font-size, var(--helix-text-xl));font-weight: var(--text-font-weight, var(--helix-weight-semibold));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-tight));line-height: var(--text-line-height, var(--helix-leading-heading));}:host([variant="title"]),
+:host(:not([variant])[as="h4"]) {font-family: var(--text-font-family, var(--helix-font-sans));font-size: var(--text-font-size, var(--helix-text-lg));font-weight: var(--text-font-weight, var(--helix-weight-semibold));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-normal));line-height: var(--text-line-height, var(--helix-leading-heading));}:host([variant="body"]),
+:host(:not([variant])[as="p"]) {font-family: var(--text-font-family, var(--helix-font-sans));font-size: var(--text-font-size, var(--helix-text-md));font-weight: var(--text-font-weight, var(--helix-weight-regular));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-normal));line-height: var(--text-line-height, var(--helix-leading-normal));}:host([variant="body-strong"]),
 :host(:not([variant])[as="h5"]),
 :host(:not([variant])[as="h6"]),
-:host(:not([variant])[as="strong"]) {
-font-family: var(--text-font-family, var(--helix-font-sans));
-font-size: var(--text-font-size, var(--helix-text-md));
-font-weight: var(--text-font-weight, var(--helix-weight-medium));
-letter-spacing: var(--text-letter-spacing, var(--helix-tracking-normal));
-line-height: var(--text-line-height, var(--helix-leading-normal));
-}
-
-:host([variant="caption"]) {
-font-family: var(--text-font-family, var(--helix-font-sans));
-font-size: var(--text-font-size, var(--helix-text-sm));
-font-weight: var(--text-font-weight, var(--helix-weight-regular));
-letter-spacing: var(--text-letter-spacing, var(--helix-tracking-normal));
-line-height: var(--text-line-height, var(--helix-leading-normal));
-}
-
-:host([variant="label"]),
-:host(:not([variant])[as="label"]) {
-font-family: var(--text-font-family, var(--helix-font-sans));
-font-size: var(--text-font-size, var(--helix-text-xs));
-font-weight: var(--text-font-weight, var(--helix-weight-medium));
-letter-spacing: var(--text-letter-spacing, var(--helix-tracking-wide));
-line-height: var(--text-line-height, var(--helix-leading-normal));
-}
-
-:host([variant="code"]),
-:host(:not([variant])[as="code"]) {
-font-family: var(--text-font-family, var(--helix-font-mono));
-font-size: var(--text-font-size, var(--helix-text-xs));
-font-weight: var(--text-font-weight, var(--helix-weight-regular));
-letter-spacing: var(--text-letter-spacing, var(--helix-tracking-normal));
-line-height: var(--text-line-height, var(--helix-leading-normal));
-}
-
-:host(
+:host(:not([variant])[as="strong"]) {font-family: var(--text-font-family, var(--helix-font-sans));font-size: var(--text-font-size, var(--helix-text-md));font-weight: var(--text-font-weight, var(--helix-weight-medium));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-normal));line-height: var(--text-line-height, var(--helix-leading-normal));}:host([variant="caption"]) {font-family: var(--text-font-family, var(--helix-font-sans));font-size: var(--text-font-size, var(--helix-text-sm));font-weight: var(--text-font-weight, var(--helix-weight-regular));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-normal));line-height: var(--text-line-height, var(--helix-leading-normal));}:host([variant="label"]),
+:host(:not([variant])[as="label"]) {font-family: var(--text-font-family, var(--helix-font-sans));font-size: var(--text-font-size, var(--helix-text-xs));font-weight: var(--text-font-weight, var(--helix-weight-medium));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-wide));line-height: var(--text-line-height, var(--helix-leading-normal));}:host([variant="code"]),
+:host(:not([variant])[as="code"]) {font-family: var(--text-font-family, var(--helix-font-mono));font-size: var(--text-font-size, var(--helix-text-xs));font-weight: var(--text-font-weight, var(--helix-weight-regular));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-normal));line-height: var(--text-line-height, var(--helix-leading-normal));}:host(
 :is(
 [as="h1"],
 [as="h2"],
@@ -114,113 +28,4 @@ line-height: var(--text-line-height, var(--helix-leading-normal));
 [variant="subheading"],
 [variant="title"]
 )
-) {
-color: var(--_heading-ink, currentColor);
-}
-
-:host([emphasis="muted"]) {
-color: var(--helix-color-foreground-muted);
-}
-
-:host([emphasis="subtle"]) {
-color: var(--helix-color-foreground-subtle);
-}
-
-:host([tone="accent"]) {
-color: var(--helix-color-accent);
-}
-
-:host([tone="danger"]) {
-color: var(--helix-color-danger);
-}
-
-:host([tone="info"]) {
-color: var(--helix-color-info);
-}
-
-:host([tone="primary"]) {
-color: var(--helix-color-primary);
-}
-
-:host([tone="success"]) {
-color: var(--helix-color-success);
-}
-
-:host([tone="warning"]) {
-color: var(--helix-color-warning);
-}
-
-:host([tone="accent"]:is([emphasis="muted"], [emphasis="subtle"])) {
-color: var(--helix-color-accent-muted);
-}
-
-:host([tone="danger"]:is([emphasis="muted"], [emphasis="subtle"])) {
-color: var(--helix-color-danger-muted);
-}
-
-:host([tone="info"]:is([emphasis="muted"], [emphasis="subtle"])) {
-color: var(--helix-color-info-muted);
-}
-
-:host([tone="primary"]:is([emphasis="muted"], [emphasis="subtle"])) {
-color: var(--helix-color-primary-muted);
-}
-
-:host([tone="success"]:is([emphasis="muted"], [emphasis="subtle"])) {
-color: var(--helix-color-success-muted);
-}
-
-:host([tone="warning"]:is([emphasis="muted"], [emphasis="subtle"])) {
-color: var(--helix-color-warning-muted);
-}
-
-[part="text"] {
-color: inherit;
-font: inherit;
-letter-spacing: inherit;
-margin: var(--helix-space-none);
-}
-
-:host([lines]) {
-display: block;
-min-inline-size: 0;
-}
-
-:host([lines]) [part="text"] {
--webkit-box-orient: vertical;
-display: -webkit-box;
-overflow: hidden;
-}
-
-:host([text-align="start"]) {
-text-align: start;
-}
-:host([text-align="center"]) {
-text-align: center;
-}
-:host([text-align="end"]) {
-text-align: end;
-}
-:host([text-align="justify"]) {
-text-align: justify;
-}
-
-:host([text-wrap="balance"]) {
-text-wrap: balance;
-}
-:host([text-wrap="pretty"]) {
-text-wrap: pretty;
-}
-:host([text-wrap="nowrap"]) {
-text-wrap: nowrap;
-}
-
-:host([as="em"]) [part="text"] {
-font-style: italic;
-}
-
-@media print {
-:host {
-print-color-adjust: economy;
-}
-}`);
+) {color: var(--_heading-ink, currentColor);}:host([emphasis="muted"]) {color: var(--helix-color-foreground-muted);}:host([emphasis="subtle"]) {color: var(--helix-color-foreground-subtle);}:host([tone="accent"]) {color: var(--helix-color-accent);}:host([tone="danger"]) {color: var(--helix-color-danger);}:host([tone="info"]) {color: var(--helix-color-info);}:host([tone="primary"]) {color: var(--helix-color-primary);}:host([tone="success"]) {color: var(--helix-color-success);}:host([tone="warning"]) {color: var(--helix-color-warning);}:host([tone="accent"]:is([emphasis="muted"], [emphasis="subtle"])) {color: var(--helix-color-accent-muted);}:host([tone="danger"]:is([emphasis="muted"], [emphasis="subtle"])) {color: var(--helix-color-danger-muted);}:host([tone="info"]:is([emphasis="muted"], [emphasis="subtle"])) {color: var(--helix-color-info-muted);}:host([tone="primary"]:is([emphasis="muted"], [emphasis="subtle"])) {color: var(--helix-color-primary-muted);}:host([tone="success"]:is([emphasis="muted"], [emphasis="subtle"])) {color: var(--helix-color-success-muted);}:host([tone="warning"]:is([emphasis="muted"], [emphasis="subtle"])) {color: var(--helix-color-warning-muted);}[part="text"] {color: inherit;font: inherit;letter-spacing: inherit;margin: var(--helix-space-none);}:host([lines]) {display: block;min-inline-size: 0;}:host([text-align="start"]) {text-align: start;}:host([text-align="center"]) {text-align: center;}:host([text-align="end"]) {text-align: end;}:host([text-align="justify"]) {text-align: justify;}:host([text-wrap="balance"]) {text-wrap: balance;}:host([text-wrap="pretty"]) {text-wrap: pretty;}:host([text-wrap="nowrap"]) {text-wrap: nowrap;}:host([as="em"]) [part="text"] {font-style: italic;}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -87,7 +87,8 @@ export declare class HelixText extends HelixElement {
      * Lays the text out as a block, because a line count needs a width to break
      * against. The whole text stays in the page, so a screen reader and a search
      * still read all of it. Set it as an attribute, such as `lines="1"` for a
-     * single line.
+     * single line. A count that is not a whole number above zero, such as `0`,
+     * cuts nothing off.
      */
     lines?: number;
     /**

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

@@ -1,46 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[part="field"] {
-background-color: var(--textarea-background-color, var(--helix-color-well));
-border: var(--helix-border-thin) solid var(--textarea-border-color, var(--helix-color-border));
-border-radius: var(--textarea-radius, var(--helix-radii-sm));
-display: flex;
-gap: var(--helix-space-2xs);
-padding: var(--textarea-padding, var(--helix-space-xs));
-transition:
+export const styles = createSheet(`[part="field"] {background-color: var(--textarea-background-color, var(--helix-color-well));border: var(--helix-border-thin) solid var(--textarea-border-color, var(--helix-color-border));border-radius: var(--textarea-radius, var(--helix-radii-sm));display: flex;gap: var(--helix-space-2xs);padding: var(--textarea-padding, 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);
-}
-
-[part="control"] {
-line-height: var(--helix-leading-normal);
-overflow-wrap: break-word;
-
-resize: var(--textarea-resize, vertical);
-}
-
-slot[name="start"]::slotted(*),
-slot[name="end"]::slotted(*) {
-align-self: flex-start;
-color: var(--helix-color-foreground-subtle);
-flex: 0 0 auto;
-}
-
-:host([auto-grow]) [part="control"] {
-overflow: hidden;
-resize: none;
-}
-
-:host(:disabled) [part="field"] {
-cursor: not-allowed;
-opacity: 0.5;
-}
-
-:host([readonly]) [part="field"] {
-background-color: transparent;
-}
-
-@media print {
-:host {
-print-color-adjust: exact;
-}
-}`);
+background-color var(--helix-duration-fast) var(--helix-easing-standard);}[part="control"] {line-height: var(--helix-leading-normal);overflow-wrap: break-word;resize: var(--textarea-resize, vertical);}slot[name="start"]::slotted(*),
+slot[name="end"]::slotted(*) {align-self: flex-start;color: var(--helix-color-foreground-subtle);flex: 0 0 auto;}[part="clear"] {--icon-size: var(--helix-size-icon-tight);all: unset;align-items: center;align-self: flex-start;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground-muted);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 {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([auto-grow]) [part="control"] {overflow: hidden;resize: none;}:host(:disabled) [part="field"] {cursor: not-allowed;opacity: 0.5;}:host([readonly]) [part="field"] {background-color: transparent;}@media print {:host {print-color-adjust: exact;}}`);

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

@@ -1,116 +1,17 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[part="field"] {
-align-items: center;
-background-color: var(--time-input-background-color, var(--helix-color-well));
-flex-wrap: wrap;
-min-block-size: var(--helix-size-control);
-padding-block: var(--helix-space-2xs);
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
-display: flex;
-gap: var(--helix-space-2xs);
-padding-inline: var(--helix-space-xs);
-transition:
+export const styles = createSheet(`[part="field"] {align-items: center;background-color: var(--time-input-background-color, var(--helix-color-well));flex-wrap: wrap;min-block-size: var(--helix-size-control);padding-block: var(--helix-space-2xs);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);display: flex;gap: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-border-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host(:disabled) [part="field"] {
-color: var(--helix-color-foreground-subtle);
-}
-
-[part="trigger"] {
---icon-size: var(--helix-size-icon);
-all: unset;
-
-align-items: center;
-
-box-sizing: border-box;
-color: var(--helix-color-foreground-muted);
-cursor: pointer;
-display: flex;
-flex: none;
-transition: color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host(:not([mode="multiple"])) [part="field"] {
-flex-wrap: nowrap;
-}
-
-[part="trigger-icon"] {
-block-size: var(--icon-size);
-inline-size: var(--icon-size);
-}
-
-[part="trigger"]:hover {
-color: var(--helix-color-foreground);
-}
-
-[part="trigger"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host(:disabled) [part="trigger"] {
-cursor: not-allowed;
-}
-
-[part="surface"] {
---_floating-border-color: var(--time-input-border-color, var(--helix-color-border));
---_floating-border-width: var(--time-input-border-width, var(--helix-border-floating));
---_floating-shadow: var(--time-input-shadow, var(--helix-shadow-floating));
-
-inline-size: var(--floating-anchor-inline-size, 100%);
-min-inline-size: max-content;
-
-overflow: hidden;
-padding-block: var(--helix-space-2xs);
-padding-inline: var(--helix-space-none);
-position: absolute;
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="field"],
-[part="trigger"] {
-transition: none;
-}
-}
-
-:host([variant="wheels"]) [part="surface"] {
-inline-size: max-content;
-}
-
-[part="time"] {
-flex: none;
-}
-
-:host([mode="multiple"]) [part="control"] {
-
-flex-basis: 0;
-min-inline-size: var(--helix-size-icon-loose);
-}
-
-[part="segments"] {
---_segment-focus-background-color: var(
+border-color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:disabled) [part="field"] {color: var(--helix-color-foreground-subtle);}[part="trigger"] {--icon-size: var(--helix-size-icon);all: unset;align-items: center;box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;flex: none;transition: color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:not([mode="multiple"])) [part="field"] {flex-wrap: nowrap;}[part="trigger-icon"] {block-size: var(--icon-size);inline-size: var(--icon-size);}[part="trigger"]:hover {color: var(--helix-color-foreground);}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host(:disabled) [part="trigger"] {cursor: not-allowed;}[part="surface"] {--_floating-border-color: var(--time-input-border-color, var(--helix-color-border));--_floating-border-width: var(--time-input-border-width, var(--helix-border-floating));--_floating-shadow: var(--time-input-shadow, var(--helix-shadow-floating));inline-size: var(--floating-anchor-inline-size, 100%);min-inline-size: max-content;overflow: hidden;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-none);position: absolute;}::slotted([slot="panel-header"]) {display: block;margin-block-end: var(--helix-space-sm);margin-inline: var(--helix-space-sm);}::slotted([slot="panel-footer"]) {display: block;margin-block-start: var(--helix-space-sm);margin-inline: var(--helix-space-sm);}@media (prefers-reduced-motion: reduce) {[part="field"],
+[part="trigger"] {transition: none;}}:host([variant="wheels"]) [part="surface"] {inline-size: max-content;}[part="time"] {flex: none;}:host([mode="multiple"]) [part="control"] {flex-basis: 0;min-inline-size: var(--helix-size-icon-loose);}[part="segments"] {--_segment-focus-background-color: var(
 --time-input-segment-focus-background-color,
 var(--helix-color-primary)
-);
---_segment-focus-color: var(
+);--_segment-focus-color: var(
 --time-input-segment-focus-color,
 var(--helix-color-foreground-on-primary)
-);
---_segment-literal-color: var(
+);--_segment-literal-color: var(
 --time-input-segment-literal-color,
 var(--helix-color-foreground-muted)
-);
---_segment-placeholder-color: var(
+);--_segment-placeholder-color: var(
 --time-input-segment-placeholder-color,
 var(--helix-color-foreground-subtle)
-);
-}
-
-@media print {
-:host {
-print-color-adjust: exact;
-}
-}`);
+);}@media print {:host {print-color-adjust: exact;}}`);

package/dist/time-picker/root/time-picker-root.css.js

@@ -1,142 +1,18 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-[part="list"] {
---listbox-max-block-size: var(
+export const styles = createSheet(`:host {display: block;}[part="list"] {--listbox-max-block-size: var(
 --time-picker-list-block-size,
 calc(var(--helix-size-control-tight) * 7)
-);
-
-display: block;
-}
-
-[part="list"]::part(items) {
-background-color: transparent;
-border: none;
-border-radius: var(--helix-radii-none);
-padding-block: var(--helix-space-none);
-}
-
-:host([mode="range"]) [part~="option"]:state(selected)::part(item) {
-
-background-color: var(--helix-color-surface-inverse);
-color: var(--helix-color-foreground-inverse);
-}
-
-[part~="option"][data-between]::part(item) {
-background-color: var(
+);display: block;}[part="list"]::part(items) {background-color: transparent;border: none;border-radius: var(--helix-radii-none);padding-block: var(--helix-space-none);}:host([mode="range"]) [part~="option"]:state(selected)::part(item) {background-color: var(--helix-color-surface-inverse);color: var(--helix-color-foreground-inverse);}[part~="option"][data-between]::part(item) {background-color: var(
 --time-picker-range-color,
 light-dark(
 color-mix(in oklab, var(--helix-color-foreground) 10%, transparent),
 color-mix(in oklab, var(--helix-color-foreground) 14%, transparent)
 )
-);
-}
-
-[part~="option"][data-between]::part(item)::after {
-content: "";
-background-color: currentColor;
-block-size: var(--helix-size-icon-tight);
-border-radius: var(--helix-radii-full);
-flex: 0 0 auto;
-inline-size: var(--helix-size-icon-tight);
-margin-inline-start: auto;
-opacity: 0.4;
-scale: 0.3;
-}
-
-[part="columns"] {
-display: flex;
-}
-
-[part="column"] {
-
---_time-row: var(--time-picker-row-size, var(--helix-size-control));
---listbox-max-block-size: var(--time-picker-wheel-block-size, calc(var(--_time-row) * 5));
-
-flex: 1 1 auto;
-min-inline-size: max-content;
-}
-
-[part="column"]::part(items) {
-background-color: transparent;
-border: none;
-border-radius: var(--helix-radii-none);
-
-mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
-padding-block: calc((var(--listbox-max-block-size) - var(--_time-row)) / 2);
-scroll-snap-type: y mandatory;
-
-scrollbar-width: none;
-}
-
-[part="column"] [part~="option"] {
-scroll-snap-align: center;
-}
-
-[part="column"] [part~="option"]::part(item) {
-justify-content: center;
-}
-
-[part="column"] [part~="option"]::part(label) {
-text-align: center;
-}
-
-[part="column"] [part~="option"]::part(item) {
-min-block-size: var(--_time-row);
-min-inline-size: var(--_time-row);
-
-padding-block: var(--helix-space-none);
-padding-inline: var(--helix-space-sm);
-}
-
-[part="column"] [part~="option"]::part(item) {
-background-color: transparent;
-}
-
-[part="column"] [part~="option"]::part(label) {
-align-items: center;
-block-size: var(--_time-row);
-
-border-radius: var(--helix-radii-sm);
-display: inline-flex;
-justify-content: center;
-min-inline-size: var(--_time-row);
-padding-inline: var(--helix-space-2xs);
-transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="column"] [part~="option"]:not([disabled]):hover::part(label),
-[part="column"] [part~="option"][data-active]::part(label) {
-background-color: var(--helix-color-surface-sunken);
-}
-
-[part="column"] [part~="option"]:state(selected)::part(label) {
-background-color: var(--time-picker-selected-color, var(--helix-color-surface-inverse));
-color: var(--helix-color-foreground-inverse);
-}
-
-[part="column"] [part~="option"]::part(item)::after {
-content: none;
-}
-
-:host([invalid]) [part~="option"]:state(selected)::part(item),
-:host([invalid]) [part="column"] [part~="option"]:state(selected)::part(label) {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-danger);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host([invalid]) [part="list"][data-unset],
-:host([invalid]) [part="columns"][data-unset] {
-border-radius: var(--helix-radii-sm);
-outline: var(--helix-size-focus-ring) solid var(--helix-color-danger);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-@media print {
-:host {
-print-color-adjust: exact;
-}
-}`);
+);}[part~="option"][data-between]::part(item)::after {content: "";background-color: currentColor;block-size: var(--helix-size-icon-tight);border-radius: var(--helix-radii-full);flex: 0 0 auto;inline-size: var(--helix-size-icon-tight);margin-inline-start: auto;opacity: 0.4;scale: 0.3;}[part="columns"] {display: flex;}[part="column"] {--_time-row: var(--time-picker-row-size, var(--helix-size-control));--listbox-max-block-size: var(--time-picker-wheel-block-size, calc(var(--_time-row) * 5));flex: 1 1 auto;min-inline-size: max-content;}[part="column"]::part(items) {background-color: transparent;border: none;border-radius: var(--helix-radii-none);mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);padding-block: calc((var(--listbox-max-block-size) - var(--_time-row)) / 2);scroll-snap-type: y mandatory;scrollbar-width: none;}[part="column"] [part~="option"] {scroll-snap-align: center;}[part="column"] [part~="option"]::part(item) {justify-content: center;}[part="column"] [part~="option"]::part(label) {text-align: center;}[part="column"] [part~="option"]::part(item) {min-block-size: var(--_time-row);min-inline-size: var(--_time-row);padding-block: var(--helix-space-none);padding-inline: var(--helix-space-sm);}[part="column"] [part~="option"]::part(item) {background-color: transparent;}[part="column"] [part~="option"]::part(label) {align-items: center;block-size: var(--_time-row);border-radius: var(--helix-radii-sm);display: inline-flex;justify-content: center;min-inline-size: var(--_time-row);padding-inline: var(--helix-space-2xs);transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);}[part="column"] [part~="option"]:not([disabled]):hover::part(label),
+[part="column"] [part~="option"]:state(active)::part(label) {background-color: var(--helix-color-surface-sunken);}[part="column"] [part~="option"]:state(selected)::part(label) {background-color: var(--time-picker-selected-color, var(--helix-color-surface-inverse));color: var(--helix-color-foreground-inverse);}[part="column"] [part~="option"]::part(item)::after {content: none;}:host([invalid]) [part~="option"]:state(selected)::part(item),
+:host([invalid]) [part="column"] [part~="option"]:state(selected)::part(label),
+:host(:state(invalid)) [part~="option"]:state(selected)::part(item),
+:host(:state(invalid)) [part="column"] [part~="option"]:state(selected)::part(label) {outline: var(--helix-size-focus-ring) solid var(--helix-color-danger);outline-offset: var(--helix-size-focus-offset);}:host([invalid]) [part="list"][data-unset],
+:host([invalid]) [part="columns"][data-unset],
+:host(:state(invalid)) [part="list"][data-unset],
+:host(:state(invalid)) [part="columns"][data-unset] {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-danger);outline-offset: var(--helix-size-focus-offset);}[part="feedback"] {color: var(--time-picker-feedback-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-sm) var(--helix-space-none) var(--helix-space-none);}@media print {:host {print-color-adjust: exact;}}`);

package/dist/time-picker/root/time-picker-root.d.ts

@@ -19,6 +19,7 @@ import '../../option/index.js';
  * @aliases Time, TimeList
  * @documentation https://fusion.dev/helix/components/time-picker
  *
+ * @cssproperty --time-picker-feedback-color - The color of the message under the times, while `feedback` is set.
  * @cssproperty --time-picker-list-block-size - How tall the list is before it scrolls.
  * @cssproperty --time-picker-range-color - Fill behind the times inside a range.
  * @cssproperty --time-picker-row-size - Height and minimum width of one row in a wheel.

package/dist/timeline/group/timeline-group.css.js

@@ -1,32 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-padding-block-end: var(--timeline-gap, var(--helix-space-lg));
-}
-
-:host(:last-child) {
-padding-block-end: var(--helix-space-none);
-}
-
-[part="heading"] {
-color: var(--timeline-group-heading-color, var(--helix-color-foreground));
-font-size: var(--helix-text-sm);
-font-weight: var(--helix-weight-semibold);
-padding-block-end: var(--helix-space-sm);
-}
-
-[part="entries"] {
-display: flex;
-flex-direction: var(--_timeline-direction, column);
-}
-
-::slotted(*) {
-flex: var(--_timeline-entry-flex, 0 1 auto);
-min-inline-size: 0;
-}
-
-@media print {
-:host {
-break-inside: avoid-page;
-}
-}`);
+export const styles = createSheet(`:host {display: block;padding-block-end: var(--timeline-gap, var(--helix-space-lg));}:host(:last-child) {padding-block-end: var(--helix-space-none);}[part="heading"] {color: var(--timeline-group-heading-color, var(--helix-color-foreground));font-size: var(--helix-text-sm);font-weight: var(--helix-weight-semibold);padding-block-end: var(--helix-space-sm);}[part="entries"] {display: flex;flex-direction: var(--_timeline-direction, column);}::slotted(*) {flex: var(--_timeline-entry-flex, 0 1 auto);min-inline-size: 0;}@media print {:host {break-inside: avoid-page;}}`);