@fusion.dev/helix 0.143.0 → 0.144.0

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

@@ -18,7 +18,12 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Progress bar, Loading bar
  * @documentation https://fusion.dev/helix/components/progress
  *
+ * @slot label - A visible label, above a bar and under a ring. Its words name it in place of `label`.
+ *
  * @cssproperty --progress-color - Fill of the part that is done.
+ * @cssproperty --progress-label-color - Color of a slotted label.
+ * @cssproperty --progress-label-gap - Space between a slotted label and the bar.
+ * @cssproperty --progress-label-size - Type size of a slotted label.
  * @cssproperty --progress-ring-size - Diameter of the ring.
  * @cssproperty --progress-ring-width - Thickness of the ring's stroke.
  * @cssproperty --progress-size - Thickness of the bar.

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

@@ -8,7 +8,7 @@ font: inherit;
 
 color: var(--quote-color, var(--helix-color-foreground-muted));
 font: inherit;
-font-style: italic;
+font-style: var(--quote-font-style, italic);
 }
 
 @media print {

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

@@ -14,6 +14,7 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/quote
  *
  * @cssproperty --quote-color - Color of the quoted text.
+ * @cssproperty --quote-font-style - The slant of the quoted text, `italic` by default. Set `normal` for a face whose italic is too loud, or `oblique` for one with no italic of its own.
  */
 export declare class HelixQuote extends HelixHeadlessQuote {
     static styles: CSSResultGroup;

package/dist/shared/chart/tooltip.css.js

@@ -18,7 +18,7 @@ font-weight: var(--helix-weight-medium);
 margin-block-end: var(--helix-space-2xs);
 }
 
-[part="tooltip-cell"] {
+[part~="tooltip-cell"] {
 align-items: baseline;
 column-gap: var(--helix-space-sm);
 display: grid;
@@ -36,11 +36,34 @@ font-variant-numeric: tabular-nums;
 grid-column: 3;
 }
 
-[part="tooltip-cell"][data-series]::before {
+[part~="tooltip-cell"][data-series]::before {
 background-color: var(--chart-series);
 block-size: 0.5em;
 border-radius: var(--helix-radii-full);
 content: "";
 grid-column: 1;
 inline-size: 0.5em;
+}
+
+[part~="tooltip-cell-current"] {
+font-weight: var(--helix-weight-medium);
+}
+
+[part~="tooltip-cell-current"] [part="tooltip-name"] {
+opacity: 1;
+}
+
+[part="plot"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="live"] {
+block-size: 1px;
+clip-path: inset(50%);
+inline-size: 1px;
+margin: var(--helix-space-none);
+overflow: hidden;
+position: absolute;
+white-space: nowrap;
 }`);

package/dist/shared/field/field-segments.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/shared/field/field-segments.css.js

@@ -0,0 +1,40 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[part="segments"] {
+align-items: center;
+color: var(--helix-color-foreground);
+display: flex;
+flex: 1 1 auto;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-md);
+
+font-variant-numeric: tabular-nums;
+font-weight: var(--helix-weight-medium);
+min-inline-size: 0;
+white-space: nowrap;
+}
+
+[part~="segment"] {
+border-radius: var(--helix-radii-sm);
+caret-color: transparent;
+outline: none;
+padding-inline: calc(var(--helix-space-2xs) / 2);
+}
+
+[part~="segment"]:focus {
+background-color: var(--_segment-focus-background-color, var(--helix-color-primary));
+color: var(--_segment-focus-color, var(--helix-color-foreground-on-primary));
+}
+
+[part~="segment-placeholder"] {
+color: var(--_segment-placeholder-color, var(--helix-color-foreground-subtle));
+}
+
+[part="literal"] {
+color: var(--_segment-literal-color, var(--helix-color-foreground-muted));
+white-space: pre;
+}
+
+:host(:disabled) [part="segments"] {
+color: var(--helix-color-foreground-subtle);
+cursor: not-allowed;
+}`);

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

@@ -19,9 +19,12 @@ inline-size: var(--skeleton-size, var(--helix-size-control));
 }
 
 [part="skeleton"] {
-background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
+background-color: var(
+--skeleton-color,
+color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
+);
 block-size: 100%;
-border-radius: var(--helix-radii-sm);
+border-radius: var(--skeleton-radius, var(--helix-radii-sm));
 display: block;
 inline-size: 100%;
 
@@ -30,11 +33,13 @@ position: relative;
 }
 
 [part="skeleton"]::after {
-animation: helix-skeleton-sweep calc(var(--helix-duration-slow) * 4) ease-in-out infinite;
+animation: helix-skeleton-sweep var(--skeleton-duration, calc(var(--helix-duration-slow) * 4))
+ease-in-out infinite;
 background-image: linear-gradient(
 90deg,
 transparent 0%,
-color-mix(in oklab, var(--helix-color-foreground) 8%, transparent) 50%,
+var(--skeleton-sheen-color, color-mix(in oklab, var(--helix-color-foreground) 8%, transparent))
+50%,
 transparent 100%
 );
 content: "";
@@ -53,6 +58,48 @@ border-radius: var(--helix-radii-full);
 border-radius: var(--helix-radii-full);
 }
 
+:host([effect="pulse"]) [part="skeleton"]::after,
+:host([effect="none"]) [part="skeleton"]::after {
+animation: none;
+background-image: none;
+}
+
+:host([effect="pulse"]) [part="skeleton"] {
+animation: helix-skeleton-pulse var(--skeleton-duration, calc(var(--helix-duration-slow) * 4))
+ease-in-out infinite;
+}
+
+@keyframes helix-skeleton-pulse {
+50% {
+opacity: 0.4;
+}
+}
+
+:host(:not(:empty)) {
+block-size: auto;
+inline-size: fit-content;
+max-inline-size: 100%;
+position: relative;
+}
+
+:host(:not(:empty)) [part="content"] {
+display: block;
+}
+
+:host(:not(:empty)) [part="skeleton"] {
+block-size: auto;
+inset: 0;
+position: absolute;
+}
+
+:host(:not(:empty):not([loading])) [part="skeleton"] {
+display: none;
+}
+
+:host([loading]:not(:empty)) [part="content"] {
+visibility: hidden;
+}
+
 @keyframes helix-skeleton-sweep {
 from {
 translate: -50% 0;
@@ -64,8 +111,12 @@ translate: 50% 0;
 }
 
 @media (prefers-reduced-motion: reduce) {
-[part="skeleton"]::after {
+[part="skeleton"]::after,
+:host([effect="pulse"]) [part="skeleton"] {
 animation: none;
+}
+
+[part="skeleton"]::after {
 background-image: none;
 }
 }

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

@@ -5,7 +5,11 @@ import type { CSSResultGroup } from 'lit';
  *
  * @description
  * Animates a highlight sweeping across the block, which reads as work in
- * progress. A block fading in and out can look broken.
+ * progress. A block fading in and out can look broken, so `effect="pulse"` is
+ * a choice rather than the default.
+ *
+ * Around content with `loading`, the skeleton takes the content's box and
+ * paints over it, and the content is hidden until `loading` is taken off.
  *
  * @since 0.1.0
  * @status stable
@@ -13,12 +17,24 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Placeholder, Shimmer, Ghost
  * @documentation https://fusion.dev/helix/components/skeleton
  *
+ * @csspart content - The box around the content, hidden while `loading`.
  * @csspart skeleton - The placeholder shape.
  *
  * @cssproperty --skeleton-block-size - The height of the block shape, which is the shape when `shape` is unset. Defaults to the control height.
+ * @cssproperty --skeleton-color - The placeholder's fill.
+ * @cssproperty --skeleton-duration - How long one sweep or one pulse takes.
+ * @cssproperty --skeleton-radius - The corner of the block shape.
+ * @cssproperty --skeleton-sheen-color - The highlight the sweep carries across the fill.
  * @cssproperty --skeleton-size - The diameter of the circle shape.
  */
 export declare class HelixSkeleton extends HelixHeadlessSkeleton {
+    /**
+     * How the placeholder shows it is waiting: a sweep when unset, `pulse` to
+     * fade the fill in and out, or `none` to sit still.
+     *
+     * Reduced motion stills both.
+     */
+    effect?: 'none' | 'pulse';
     /**
      * The shape of the placeholder: `text`, `circle`, or a block when unset.
      *

package/dist/skeleton/root/skeleton-root.js

@@ -11,6 +11,9 @@ import { styles } from './skeleton-root.css.js';
 let HelixSkeleton = class HelixSkeleton extends HelixHeadlessSkeleton {
     static { this.styles = styles; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixSkeleton.prototype, "effect", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixSkeleton.prototype, "shape", void 0);

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

@@ -5,20 +5,20 @@ align-content: start;
 
 align-items: baseline;
 display: grid;
-gap: var(--helix-space-2xs);
+gap: var(--stat-gap, var(--helix-space-2xs));
 grid-template-columns: auto 1fr;
 }
 
 slot[name="label"]::slotted(*) {
-color: var(--helix-color-foreground-muted);
-font-size: calc(var(--helix-text-xs) / var(--helix-text-md) * 1em);
+color: var(--stat-label-color, var(--helix-color-foreground-muted));
+font-size: var(--stat-label-size, calc(var(--helix-text-xs) / var(--helix-text-md) * 1em));
 font-weight: var(--helix-weight-medium);
 grid-column: 1 / -1;
 letter-spacing: var(--helix-tracking-wide);
 }
 
 slot:not([name]) {
-color: var(--helix-color-foreground);
+color: var(--stat-value-color, var(--helix-color-foreground));
 font-family: var(--helix-font-display);
 font-size: var(--stat-value-size, calc(var(--helix-text-3xl) / var(--helix-text-md) * 1em));
 font-weight: var(--helix-weight-semibold);
@@ -27,8 +27,8 @@ line-height: var(--helix-leading-tight);
 }
 
 slot[name="unit"]::slotted(*) {
-color: var(--helix-color-foreground-muted);
-font-size: calc(var(--helix-text-md) / var(--helix-text-md) * 1em);
+color: var(--stat-unit-color, var(--helix-color-foreground-muted));
+font-size: var(--stat-unit-size, calc(var(--helix-text-md) / var(--helix-text-md) * 1em));
 font-weight: var(--helix-weight-medium);
 }
 
@@ -40,7 +40,7 @@ order: 1;
 :host([direction="row-reverse"]) {
 align-items: baseline;
 display: flex;
-gap: var(--helix-space-xs);
+gap: var(--stat-gap, var(--helix-space-xs));
 }
 
 :host([direction="row"]) slot[name="label"]::slotted(*),

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

@@ -14,6 +14,14 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Metric, KPI, Figure
  * @documentation https://fusion.dev/helix/components/stat
  *
+ * @csspart value - The slot the value is written in. A slot draws no box, so it takes the inherited properties, such as color and font, and passes them to the value.
+ *
+ * @cssproperty --stat-gap - Space between the label and the value, and between the value and the unit in a row.
+ * @cssproperty --stat-label-color - Color of the label.
+ * @cssproperty --stat-label-size - Size of the label.
+ * @cssproperty --stat-unit-color - Color of the unit.
+ * @cssproperty --stat-unit-size - Size of the unit.
+ * @cssproperty --stat-value-color - Color of the figure.
  * @cssproperty --stat-value-size - Size of the figure.
  */
 export declare class HelixStat extends HelixHeadlessStat {

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

@@ -41,13 +41,16 @@ background-color var(--helix-duration-fast) var(--helix-easing-standard),
 border-color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
-[part="track"]::after {
+[part="thumb"] {
+align-items: center;
+color: var(--switch-icon-color, var(--helix-color-foreground-muted));
+display: flex;
+justify-content: center;
 
 background-color: var(--switch-thumb-color, var(--helix-color-surface-overlay));
 block-size: calc(var(--_switch-height) - var(--_switch-inset) * 2);
 border: var(--helix-border-thin) solid var(--helix-color-border);
 border-radius: var(--helix-radii-full);
-content: "";
 inline-size: calc(var(--_switch-height) - var(--_switch-inset) * 2);
 inset-block-start: 50%;
 
@@ -58,8 +61,13 @@ translate: 0 -50%;
 transition: translate var(--helix-duration-fast) var(--helix-easing-emphasized);
 }
 
-:host(:state(checked)) [part="track"]::after {
+:host(:state(checked)) [part="thumb"] {
 border-color: transparent;
+color: var(--switch-icon-color, var(--switch-on-color, var(--helix-color-primary)));
+}
+
+[part="thumb"] ::slotted(*) {
+--icon-size: calc((var(--_switch-height) - var(--_switch-inset) * 2) * 0.7);
 }
 
 :host(:state(checked)) [part="track"] {
@@ -77,14 +85,14 @@ margin: var(--helix-space-none);
 opacity: 0;
 }
 
-:host(:state(checked)) [part="track"]::after {
+:host(:state(checked)) [part="thumb"] {
 
 background-color: var(--switch-thumb-color, var(--helix-color-foreground-on-primary));
 
 translate: calc(var(--_switch-width) - var(--_switch-height)) -50%;
 }
 
-[part="track"]:has([part="control"]:focus-visible)::after {
+[part="track"]:has([part="control"]:focus-visible) [part="thumb"] {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);
 }

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

@@ -1,5 +1,5 @@
 import { HelixHeadlessSwitch } from '@fusion.dev/helix-headless/switch';
-import type { CSSResultGroup } from 'lit';
+import { type CSSResultGroup, type TemplateResult } from 'lit';
 /**
  * @summary A control that turns something on or off.
  *
@@ -17,19 +17,43 @@ import type { CSSResultGroup } from 'lit';
  * it, and the control looks like a small dash. The width follows the height, so
  * setting `--switch-block-size` widens the switch too and keeps the proportion.
  *
+ * The thumb is an element, the `thumb` part, and holds an icon for each state:
+ * one in the `on` slot shows while the switch is on, and one in the `off` slot
+ * while it is off.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
  * @aliases Toggle switch, On/off
  * @documentation https://fusion.dev/helix/components/switch
  *
+ * @slot - The label that names what the switch turns on.
+ * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
+ * @slot hint - Help under the control, for content richer than the `hint` text.
+ * @slot off - An icon on the thumb while the switch is off.
+ * @slot on - An icon on the thumb while the switch is on.
+ *
+ * @csspart control - The input.
+ * @csspart feedback - The message that says what is wrong.
+ * @csspart field - The row: the track and its label.
+ * @csspart hint - Help under the control, while nothing is wrong.
+ * @csspart label - The label beside the track.
+ * @csspart thumb - The thumb that travels along the track, and the icon on it.
+ * @csspart track - The track.
+ *
  * @cssproperty --switch-block-size - Height of the track. The width follows it.
+ * @cssproperty --switch-icon-color - Color of the icon on the thumb. Without it, the icon is muted while off and takes the on color while on.
  * @cssproperty --switch-inline-size - Length of the track. Set it to override the length derived from the height.
  * @cssproperty --switch-on-color - Fill when the switch is on.
  * @cssproperty --switch-thumb-color - Color of the thumb, in both states.
  */
 export declare class HelixSwitch extends HelixHeadlessSwitch {
     static styles: CSSResultGroup;
+    /**
+     * The thumb as an element, so it is a part and holds an icon for each state.
+     * The slot for the other state is `hidden`, which takes its icon out.
+     */
+    protected renderThumb(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/switch/root/switch-root.js

@@ -6,11 +6,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessSwitch } from '@fusion.dev/helix-headless/switch';
+import { html } from 'lit';
 import { styles as fieldStyles } from '../../shared/field/field.css.js';
 import { styles as fieldInlineStyles } from '../../shared/field/field-inline.css.js';
 import { styles } from './switch-root.css.js';
 let HelixSwitch = class HelixSwitch extends HelixHeadlessSwitch {
     static { this.styles = [fieldStyles, fieldInlineStyles, styles]; }
+    renderThumb() {
+        return html `<span part="thumb" aria-hidden="true"
+      ><slot name="on" ?hidden=${!this.checked}></slot
+      ><slot name="off" ?hidden=${this.checked}></slot
+    ></span>`;
+    }
 };
 HelixSwitch = __decorate([
     customElement('helix-switch')

package/dist/tag/group/tag-group.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,6 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: flex;
+flex-wrap: wrap;
+gap: var(--tag-group-gap, var(--helix-space-2xs));
+}`);

package/dist/tag/group/tag-group.d.ts

@@ -0,0 +1,25 @@
+import { HelixHeadlessTagGroup } from '@fusion.dev/helix-headless/tag';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A set of tags that the arrow keys move through, and that can be removed and selected from the keyboard.
+ *
+ * @description
+ * The tags sit in a row that wraps. A selected tag is filled with its tone, as
+ * `emphasis="solid"` draws one, and the focused tag takes the focus ring round
+ * its whole box.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @aliases Tag list, Chip group, Token list
+ * @documentation https://fusion.dev/helix/components/tag
+ *
+ * @cssproperty --tag-group-gap - The space between tags, across and between rows.
+ */
+export declare class HelixTagGroup extends HelixHeadlessTagGroup {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-tag-group': HelixTagGroup;
+    }
+}

package/dist/tag/group/tag-group.js

@@ -0,0 +1,16 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessTagGroup } from '@fusion.dev/helix-headless/tag';
+import { styles } from './tag-group.css.js';
+let HelixTagGroup = class HelixTagGroup extends HelixHeadlessTagGroup {
+    static { this.styles = styles; }
+};
+HelixTagGroup = __decorate([
+    customElement('helix-tag-group')
+], HelixTagGroup);
+export { HelixTagGroup };

package/dist/tag/index.d.ts

@@ -1 +1,2 @@
+export * from './group/tag-group.js';
 export * from './root/tag-root.js';

package/dist/tag/index.js

@@ -1 +1,2 @@
+export * from './group/tag-group.js';
 export * from './root/tag-root.js';

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

@@ -110,6 +110,56 @@ margin-inline-end: var(--_tag-inset);
 opacity: 0.75;
 }
 
+[part="link"] {
+color: inherit;
+display: block;
+min-inline-size: 0;
+text-decoration: none;
+}
+
+@media (hover: hover) {
+[part="link"][href]:hover {
+text-decoration: underline;
+}
+}
+
+[part="link"]:focus-visible {
+border-radius: var(--helix-radii-sm);
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+:host([disabled]) {
+opacity: var(--tag-disabled-opacity, 0.5);
+}
+
+:host([disabled]) [part="dismiss"] {
+cursor: not-allowed;
+}
+
+[part="cell"] {
+align-items: center;
+align-self: stretch;
+border-radius: inherit;
+cursor: default;
+display: inline-flex;
+gap: var(--helix-space-2xs);
+margin-inline: calc(var(--_tag-inset) * -1);
+min-inline-size: 0;
+padding-inline: var(--_tag-inset);
+}
+
+[part="cell"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+:host(:state(selected)) {
+--_tag-fill: color-mix(in oklab, var(--_tag-color) 82%, var(--helix-color-foreground));
+--_tag-edge: var(--_tag-fill);
+--_tag-label: var(--helix-color-foreground-inverse);
+}
+
 @media print {
 :host {
 print-color-adjust: economy;

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

@@ -14,13 +14,17 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/tag
  *
  * @slot - The tag's label.
+ * @slot dismiss-icon - Replaces the glyph on the remove button.
  *
  * @event {HelixDismissEvent} helix-dismiss - The remove button was pressed. The tag does not remove itself, so remove it in response. Cancelable.
  *
+ * @csspart cell - The grid cell in a `Tag.Group`, which takes focus and draws the ring round the whole tag.
  * @csspart dismiss - The remove button, when `dismissible`.
+ * @csspart link - The link around the label, under `href`.
  *
  * @cssproperty --tag-background-color - The fill behind the tag.
  * @cssproperty --tag-border-color - The color of the tag's edge.
+ * @cssproperty --tag-disabled-opacity - How strongly a `disabled` tag is drawn.
  * @cssproperty --tag-foreground-color - The label color.
  * @cssproperty --tag-radius - The corner radius of the tag.
  */

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

@@ -1,10 +1,11 @@
 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(--helix-color-border);
-border-radius: var(--helix-radii-sm);
+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;
-padding: var(--helix-space-xs);
+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);
@@ -14,7 +15,14 @@ background-color var(--helix-duration-fast) var(--helix-easing-standard);
 line-height: var(--helix-leading-normal);
 overflow-wrap: break-word;
 
-resize: vertical;
+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"] {

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

@@ -15,6 +15,10 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/textarea
  *
  * @cssproperty --textarea-background-color - Fill behind the text.
+ * @cssproperty --textarea-border-color - Edge of the field at rest. Hover, focus and an error still draw their own.
+ * @cssproperty --textarea-padding - Space between the edge of the field and the text.
+ * @cssproperty --textarea-radius - Corner radius of the field.
+ * @cssproperty --textarea-resize - Which way a reader can drag the field: `vertical` by default, `none`, `both` or `horizontal`. A field under `auto-grow` has nothing to drag.
  */
 export declare class HelixTextarea extends HelixHeadlessTextarea {
     static styles: CSSResultGroup;

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

@@ -90,6 +90,25 @@ 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(
+--time-input-segment-focus-color,
+var(--helix-color-foreground-on-primary)
+);
+--_segment-literal-color: var(
+--time-input-segment-literal-color,
+var(--helix-color-foreground-muted)
+);
+--_segment-placeholder-color: var(
+--time-input-segment-placeholder-color,
+var(--helix-color-foreground-subtle)
+);
+}
+
 @media print {
 :host {
 print-color-adjust: exact;