@fusion.dev/helix 0.144.0 → 0.146.0

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

@@ -5,8 +5,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, HelixElement, reportRuntime } from '@fusion.dev/helix-core';
+import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { literal, html as staticHtml } from 'lit/static-html.js';
+import { clampOf } from '../clamp.js';
 import { styles } from './text-root.css.js';
 const TAGS = {
     code: literal `code`,
@@ -25,25 +27,20 @@ const TAGS = {
 let HelixText = class HelixText extends HelixElement {
     updated(changed) {
         super.updated(changed);
-        if (changed.has('as') && this.as === 'label' && this.labelsNothing()) {
+        if (changed.has('as') && this.as === 'label') {
             reportRuntime({
                 kind: 'unreachable-label',
-                message: '<helix-text as="label"> names no control: its label is in a shadow root, which ' +
-                    '`for` and a wrapped control cannot reach. Give a Helix field its own `label`, or ' +
-                    'write `<label data-text="label">` for a native control.',
+                message: '<helix-text as="label"> is deprecated: its label is in a shadow root, which `for` ' +
+                    'and a wrapped control cannot reach, so it labels nothing. Write `variant="label"` ' +
+                    'for the look, `<label data-text="label">` for a native control, and give a Helix ' +
+                    'field its own `label`.',
                 tag: this.localName,
             });
         }
     }
-    labelsNothing() {
-        const fields = [...this.querySelectorAll('*')].some((element) => element.constructor.formAssociated === true);
-        return (fields ||
-            this.hasAttribute('for') ||
-            this.querySelector('input, select, textarea, button, meter, output, progress') !== null);
-    }
     render() {
         const tag = (this.as && Object.hasOwn(TAGS, this.as) ? TAGS[this.as] : undefined) ?? literal `span`;
-        return staticHtml `<${tag} part="text"><slot></slot></${tag}>`;
+        return staticHtml `<${tag} part="text" style=${clampOf(this.lines) ?? nothing}><slot></slot></${tag}>`;
     }
     static { this.styles = styles; }
 };
@@ -53,6 +50,15 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixText.prototype, "emphasis", void 0);
+__decorate([
+    property({ reflect: true, type: Number })
+], HelixText.prototype, "lines", void 0);
+__decorate([
+    property({ attribute: 'text-align', reflect: true })
+], HelixText.prototype, "textAlign", void 0);
+__decorate([
+    property({ attribute: 'text-wrap', reflect: true })
+], HelixText.prototype, "textWrap", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixText.prototype, "tone", void 0);

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

@@ -25,6 +25,33 @@ 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;

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

@@ -69,6 +69,18 @@ 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"] {

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

@@ -109,7 +109,7 @@ transition: background-color var(--helix-duration-fast) var(--helix-easing-stand
 }
 
 [part="column"] [part~="option"]:not([disabled]):hover::part(label),
-[part="column"] [part~="option"][data-active]::part(label) {
+[part="column"] [part~="option"]:state(active)::part(label) {
 background-color: var(--helix-color-surface-sunken);
 }
 

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

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

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

@@ -0,0 +1,32 @@
+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;
+}
+}`);

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

@@ -0,0 +1,25 @@
+import { HelixHeadlessTimelineGroup } from '@fusion.dev/helix-headless/timeline';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A run of timeline entries under a heading, such as a day.
+ *
+ * @description
+ * The heading sits at the start edge, over the entries, in the small heavy
+ * type of a section label, and the space under one group is the space between
+ * two entries.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @aliases Day, Section, Date group
+ * @documentation https://fusion.dev/helix/components/timeline
+ *
+ * @cssproperty --timeline-group-heading-color - The color of the heading.
+ */
+export declare class HelixTimelineGroup extends HelixHeadlessTimelineGroup {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-timeline-group': HelixTimelineGroup;
+    }
+}

package/dist/timeline/group/timeline-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 { HelixHeadlessTimelineGroup } from '@fusion.dev/helix-headless/timeline';
+import { styles } from './timeline-group.css.js';
+let HelixTimelineGroup = class HelixTimelineGroup extends HelixHeadlessTimelineGroup {
+    static { this.styles = styles; }
+};
+HelixTimelineGroup = __decorate([
+    customElement('helix-timeline-group')
+], HelixTimelineGroup);
+export { HelixTimelineGroup };

package/dist/timeline/index.d.ts

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

package/dist/timeline/index.js

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

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

@@ -2,21 +2,26 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 column-gap: var(--helix-space-md);
 display: grid;
-grid-template-columns: auto minmax(0, 1fr);
-grid-template-rows: auto minmax(0, 1fr);
+
+grid-template-columns: var(--_timeline-columns, auto minmax(0, 1fr));
+grid-template-rows: var(--_timeline-rows, auto minmax(0, 1fr));
 }
 
 [part="rail"] {
+align-items: var(--_timeline-rail-align, normal);
 display: grid;
-grid-row: 1 / -1;
-grid-template-rows: subgrid;
-justify-items: center;
+grid-column: var(--_timeline-rail-column, auto);
+grid-row: var(--_timeline-rail-row, 1 / -1);
+grid-template-columns: var(--_timeline-rail-columns, none);
+grid-template-rows: var(--_timeline-rail-rows, subgrid);
+justify-items: var(--_timeline-rail-justify, center);
 }
 
 [part="rail"]::before {
 background-color: var(--helix-color-border);
 block-size: 100%;
 content: "";
+display: var(--_timeline-arrive-display, block);
 grid-column: 1;
 grid-row: 1;
 inline-size: var(--timeline-rail-size, var(--helix-border-thin));
@@ -27,14 +32,22 @@ visibility: hidden;
 }
 
 [part="rail"]::after {
-align-self: stretch;
+align-self: var(--_timeline-leave-align, stretch);
 background-color: var(--helix-color-border);
+block-size: var(--_timeline-leave-block-size, auto);
 content: "";
 
-grid-column: 1;
-grid-row: 2;
-inline-size: var(--timeline-rail-size, var(--helix-border-thin));
-margin-block-start: var(--timeline-marker-size, var(--helix-size-icon-md));
+grid-column: var(--_timeline-leave-column, 1);
+grid-row: var(--_timeline-leave-row, 2);
+inline-size: var(
+--_timeline-leave-inline-size,
+var(--timeline-rail-size, var(--helix-border-thin))
+);
+justify-self: var(--_timeline-leave-justify, auto);
+margin-block-start: var(
+--_timeline-leave-margin-block,
+var(--timeline-marker-size, var(--helix-size-icon-md))
+);
 }
 
 :host(:last-child) [part="rail"]::after {
@@ -52,7 +65,7 @@ border-radius: var(--timeline-marker-radius, var(--helix-radii-full));
 color: var(--_timeline-tone, var(--helix-color-foreground-subtle));
 display: inline-flex;
 grid-column: 1;
-grid-row: 2;
+grid-row: var(--_timeline-marker-row, 2);
 inline-size: var(--timeline-marker-size, var(--helix-size-icon-md));
 justify-content: center;
 }
@@ -92,21 +105,35 @@ color: var(--helix-color-foreground-muted);
 font-family: var(--helix-font-sans);
 font-size: var(--helix-text-xs);
 font-weight: var(--helix-weight-medium);
-grid-column: 2;
-grid-row: 1;
+grid-column: var(--_timeline-time-column, 2);
+grid-row: var(--_timeline-time-row, 1);
 padding-block-end: var(--helix-space-2xs);
+
+text-align: var(--_timeline-time-align);
 }
 
 [part="content"] {
 display: flex;
 flex-direction: column;
 gap: var(--helix-space-2xs);
-grid-column: 2;
-grid-row: 2;
+grid-column: var(--_timeline-content-column, 2);
+grid-row: var(--_timeline-content-row, 2);
 min-inline-size: 0;
-padding-block-end: var(--timeline-gap, var(--helix-space-lg));
+padding-block-end: var(--_timeline-content-block-end, var(--timeline-gap, var(--helix-space-lg)));
+padding-inline-end: var(--_timeline-content-inline-end, var(--helix-space-none));
 }
 
 :host(:last-child) [part="content"] {
 padding-block-end: var(--helix-space-none);
+padding-inline-end: var(--helix-space-none);
+}
+
+:host(:nth-child(even)) [part="time"] {
+grid-column: var(--_timeline-even-column, var(--_timeline-time-column, 2));
+text-align: var(--_timeline-even-align, var(--_timeline-time-align));
+}
+
+:host(:nth-child(even)) [part="content"] {
+grid-column: var(--_timeline-even-column, var(--_timeline-content-column, 2));
+text-align: var(--_timeline-even-align);
 }`);

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

@@ -4,6 +4,62 @@ display: flex;
 flex-direction: column;
 }
 
+:host([layout="opposite"]) {
+--_timeline-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+--_timeline-content-column: 3;
+--_timeline-rail-column: 2;
+--_timeline-time-align: end;
+--_timeline-time-column: 1;
+--_timeline-time-row: 2;
+}
+
+:host([layout="alternate"]) {
+--_timeline-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+--_timeline-content-column: 3;
+--_timeline-even-align: end;
+--_timeline-even-column: 1;
+--_timeline-rail-column: 2;
+--_timeline-time-column: 3;
+}
+
+:host([orientation="horizontal"]) {
+--_timeline-arrive-display: none;
+--_timeline-columns: minmax(0, 1fr);
+--_timeline-content-block-end: var(--helix-space-none);
+--_timeline-content-column: 1;
+--_timeline-content-inline-end: var(--timeline-gap, var(--helix-space-lg));
+--_timeline-content-row: 3;
+--_timeline-direction: row;
+--_timeline-entry-flex: 1 1 0;
+--_timeline-even-align: initial;
+--_timeline-even-column: initial;
+--_timeline-leave-align: center;
+--_timeline-leave-block-size: var(--timeline-rail-size, var(--helix-border-thin));
+--_timeline-leave-column: 2;
+--_timeline-leave-inline-size: auto;
+--_timeline-leave-justify: stretch;
+--_timeline-leave-margin-block: var(--helix-space-none);
+--_timeline-leave-row: 1;
+--_timeline-marker-row: 1;
+--_timeline-rail-align: center;
+--_timeline-rail-column: 1;
+--_timeline-rail-columns: auto minmax(0, 1fr);
+--_timeline-rail-justify: start;
+--_timeline-rail-row: 1;
+--_timeline-rail-rows: auto;
+--_timeline-rows: auto auto minmax(0, 1fr);
+--_timeline-time-align: initial;
+--_timeline-time-column: 1;
+--_timeline-time-row: 2;
+
+flex-direction: row;
+}
+
+:host([orientation="horizontal"]) ::slotted(*) {
+flex: 1 1 0;
+min-inline-size: 0;
+}
+
 @media print {
 :host {
 print-color-adjust: economy;

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

@@ -7,6 +7,19 @@ import type { CSSResultGroup } from 'lit';
  * Sets the direction time runs in and the spacing between events. Each entry
  * draws its own mark and line.
  *
+ * `layout` and `orientation` move where the entries are drawn, and never the
+ * order they are read in, which is the order you write them in:
+ *
+ * - Unset, the line runs down the start edge, with each time over what
+ *   happened.
+ * - `layout="opposite"` runs the line down the middle, with each time on the
+ *   start side and what happened on the end side.
+ * - `layout="alternate"` runs the line down the middle, with the first entry on
+ *   the end side, the second on the start side, and so on.
+ * - `orientation="horizontal"` runs the line across the top, with the entries
+ *   side by side in the order they are read, and the time over what happened
+ *   under each mark. Use it for a few entries, since they share the width.
+ *
  * @since 0.1.0
  * @status stable
  * @category data
@@ -17,6 +30,19 @@ import type { CSSResultGroup } from 'lit';
  */
 export declare class HelixTimeline extends HelixHeadlessTimeline {
     static styles: CSSResultGroup;
+    /**
+     * Where the entries sit beside the line: `opposite` puts the times on one
+     * side and what happened on the other, and `alternate` puts every other
+     * entry on the other side. Unset, the line runs down the start edge.
+     *
+     * Down the page only: across the page it is set aside.
+     */
+    layout?: 'alternate' | 'opposite';
+    /**
+     * Which way time runs: `horizontal` lays the entries across the page. Unset,
+     * they run down it.
+     */
+    orientation?: 'horizontal';
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/timeline/root/timeline-root.js

@@ -6,10 +6,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessTimeline } from '@fusion.dev/helix-headless/timeline';
+import { property } from 'lit/decorators.js';
 import { styles } from './timeline-root.css.js';
 let HelixTimeline = class HelixTimeline extends HelixHeadlessTimeline {
     static { this.styles = styles; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixTimeline.prototype, "layout", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixTimeline.prototype, "orientation", void 0);
 HelixTimeline = __decorate([
     customElement('helix-timeline')
 ], HelixTimeline);

package/dist/toast/item/toast-item.css.js

@@ -84,6 +84,16 @@ grid-area: 1 / 2;
 min-inline-size: 0;
 }
 
+::slotted([slot="heading"]) {
+display: block;
+font-weight: var(--helix-weight-semibold);
+}
+
+::slotted([slot="description"]) {
+color: var(--helix-color-foreground-muted);
+display: block;
+}
+
 [part="actions"] {
 display: flex;
 gap: var(--helix-space-2xs);

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

@@ -23,6 +23,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --toast-inset - Distance from the edges of the window.
  */
 export declare class HelixToast extends HelixHeadlessToast {
+    static tier: string;
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/toast/root/toast-root.js

@@ -8,6 +8,7 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessToast } from '@fusion.dev/helix-headless/toast';
 import { styles } from './toast-root.css.js';
 let HelixToast = class HelixToast extends HelixHeadlessToast {
+    static { this.tier = 'helix-'; }
     static { this.styles = styles; }
 };
 HelixToast = __decorate([

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

@@ -34,7 +34,7 @@ align-items: start;
 [part="track"] {
 --_toggle-height: calc(var(--helix-size-control) - var(--helix-space-2xs) * 2);
 
---_toggle-radius: var(--helix-radii-sm);
+--_toggle-radius: var(--toggle-group-item-radius, var(--helix-radii-sm));
 
 --_indicator-surface: var(--helix-color-surface-raised);
 display: inline-flex;
@@ -51,7 +51,10 @@ padding: var(--helix-space-2xs);
 :host(:not([separation])) [part="track"],
 :host([separation="outlined"]) [part="track"] {
 
---_toggle-radius: calc(var(--helix-radii-sm) - var(--helix-border-thin));
+--_toggle-radius: var(
+--toggle-group-item-radius,
+calc(var(--toggle-group-radius, var(--helix-radii-sm)) - var(--helix-border-thin))
+);
 
 --_toggle-height: calc(
 var(--helix-size-control) -
@@ -62,9 +65,9 @@ var(--helix-border-thin) *
 );
 
 --_indicator-surface: var(--helix-color-surface-overlay);
-background-color: var(--helix-color-surface-sunken);
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
+background-color: var(--toggle-group-background-color, var(--helix-color-surface-sunken));
+border: var(--helix-border-thin) solid var(--toggle-group-border-color, var(--helix-color-border));
+border-radius: var(--toggle-group-radius, var(--helix-radii-sm));
 padding: var(--helix-space-2xs);
 }
 
@@ -79,7 +82,7 @@ flex: 1 1 auto;
 background-color: var(--toggle-group-indicator-color, var(--_indicator-surface));
 block-size: var(--indicator-block-size, 0);
 border-radius: var(--_toggle-radius, var(--helix-radii-sm));
-box-shadow: var(--helix-shadow-sm);
+box-shadow: var(--toggle-group-indicator-shadow, var(--helix-shadow-sm));
 inline-size: var(--indicator-inline-size, 0);
 inset-block-start: 0;
 inset-inline-start: 0;
@@ -116,7 +119,7 @@ flex: 1 1 auto;
 :host([selection-mode="multiple"]) ::slotted(helix-toggle:state(pressed)) {
 background-color: var(--toggle-group-indicator-color, var(--_indicator-surface));
 border-radius: var(--_toggle-radius, var(--helix-radii-sm));
-box-shadow: var(--helix-shadow-sm);
+box-shadow: var(--toggle-group-indicator-shadow, var(--helix-shadow-sm));
 }
 
 :host([orientation="vertical"]) [part="track"] {

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

@@ -26,7 +26,12 @@ import type { CSSResultGroup } from 'lit';
  *
  * @csspart indicator - The moving marker behind the selected item.
  *
- * @cssproperty --toggle-group-indicator-color - The fill of the moving marker.
+ * @cssproperty --toggle-group-background-color - The groove behind the items, when the group is framed.
+ * @cssproperty --toggle-group-border-color - The edge of the groove, when the group is framed.
+ * @cssproperty --toggle-group-indicator-color - The fill of the moving marker, and of each pressed item under `selection-mode="multiple"`.
+ * @cssproperty --toggle-group-indicator-shadow - The shadow of the moving marker and of each pressed item.
+ * @cssproperty --toggle-group-item-radius - Corner radius of each item, the marker, and a pressed item's fill. Without it, the curve stays concentric with the groove.
+ * @cssproperty --toggle-group-radius - Corner radius of the groove, when the group is framed.
  */
 export declare class HelixToggleGroup extends HelixHeadlessToggleGroup {
     /**

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

@@ -16,6 +16,12 @@ import type { CSSResultGroup } from 'lit';
  * @slot - The item's label.
  *
  * @csspart item - The radio button.
+ *
+ * @cssproperty --toggle-item-color - Text color of an item that is not chosen. Read by the base
+ *   layer, which styles the `item` part.
+ * @cssproperty --toggle-item-color-selected - Text color of the chosen item, and of each pressed
+ *   item in a group that allows several.
+ * @cssproperty --toggle-item-padding-inline - Space either side of an item's label.
  */
 export declare class HelixToggle extends HelixHeadlessToggle {
     static styles: CSSResultGroup;

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

@@ -18,8 +18,12 @@ display: inline-flex;
 
 [part="toolbar"] {
 align-items: center;
+background-color: var(--toolbar-background-color, transparent);
+border: var(--toolbar-border-width, 0) solid var(--toolbar-border-color, transparent);
+border-radius: var(--toolbar-radius, var(--helix-radii-none));
 display: flex;
 gap: var(--toolbar-gap, var(--helix-space-2xs));
+padding: var(--toolbar-padding, var(--helix-space-none));
 }
 
 :host([orientation="vertical"]) [part="toolbar"] {

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

@@ -17,7 +17,12 @@ import type { CSSResultGroup } from 'lit';
  *
  * @csspart toolbar - The toolbar container.
  *
+ * @cssproperty --toolbar-background-color - The fill behind the controls. Transparent unless set.
+ * @cssproperty --toolbar-border-color - The color of the toolbar's edge, once it has a width.
+ * @cssproperty --toolbar-border-width - The width of the toolbar's edge. None unless set.
  * @cssproperty --toolbar-gap - The space between controls.
+ * @cssproperty --toolbar-padding - The space between the toolbar's edge and its controls.
+ * @cssproperty --toolbar-radius - The corner radius of the toolbar's fill.
  */
 export declare class HelixToolbar extends HelixHeadlessToolbar {
     static styles: CSSResultGroup;

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

@@ -11,10 +11,10 @@ gap: var(--helix-space-2xs);
 
 background-color: var(--tooltip-background-color, var(--helix-color-surface-inverse));
 border: none;
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-inverse);
+border-radius: var(--tooltip-radius, var(--helix-radii-sm));
+color: var(--tooltip-color, var(--helix-color-foreground-inverse));
 font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
+font-size: var(--tooltip-font-size, var(--helix-text-xs));
 
 font-weight: var(--helix-weight-regular);
 inline-size: max-content;
@@ -23,7 +23,7 @@ margin: var(--helix-space-none);
 max-inline-size: var(--tooltip-max-inline-size, 16rem);
 
 opacity: 0;
-padding: var(--helix-space-2xs) var(--helix-space-xs);
+padding: var(--tooltip-padding, var(--helix-space-2xs) var(--helix-space-xs));
 position: fixed;
 scale: 0;
 
@@ -63,7 +63,7 @@ background-color: var(--tooltip-background-color, var(--helix-material-transluce
 :host([material="frosted"]) [part~="tooltip"],
 :host([material="glass"]) [part~="tooltip"] {
 border: var(--helix-border-thin) solid var(--helix-color-border);
-color: var(--helix-color-foreground);
+color: var(--tooltip-color, var(--helix-color-foreground));
 }
 
 [part~="tooltip"][data-placement^="top"] {

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

@@ -20,7 +20,11 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --tooltip-arrow-size - The size of the arrow on the bubble's edge.
  * @cssproperty --tooltip-backdrop - The blur behind a `frosted` or `glass` bubble.
  * @cssproperty --tooltip-background-color - The fill of the bubble.
+ * @cssproperty --tooltip-color - The color of the bubble's words.
+ * @cssproperty --tooltip-font-size - The size of the bubble's words.
  * @cssproperty --tooltip-max-inline-size - The widest the bubble grows before its text wraps.
+ * @cssproperty --tooltip-padding - The space between the bubble's edge and its words.
+ * @cssproperty --tooltip-radius - The bubble's corner radius.
  */
 export declare class HelixTooltip extends HelixHeadlessTooltip {
     /**