@fusion.dev/helix 0.143.0 → 0.145.0

package/dist/table/row/table-row.css.js

@@ -1,4 +1,22 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: contents;
+}
+
+[part~="select"] {
+align-items: center;
+border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
+box-sizing: border-box;
+display: flex;
+min-block-size: var(--helix-size-control);
+padding-inline: var(--helix-space-none) var(--helix-space-md);
+}
+
+:host(:state(selected)) [part~="select"],
+:host(:state(selected)) ::slotted(*) {
+background-color: color-mix(
+in srgb,
+var(--helix-color-primary) 10%,
+var(--helix-color-background)
+);
 }`);

package/dist/table/row/table-row.d.ts

@@ -1,5 +1,6 @@
 import { HelixHeadlessTableRow } from '@fusion.dev/helix-headless/table';
 import type { CSSResultGroup } from 'lit';
+import '../../checkbox/index.js';
 /**
  * @summary One row of a table.
  *
@@ -16,6 +17,7 @@ import type { CSSResultGroup } from 'lit';
  * @slot - The row's cells.
  */
 export declare class HelixTableRow extends HelixHeadlessTableRow {
+    static tier: string;
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/table/row/table-row.js

@@ -7,7 +7,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessTableRow } from '@fusion.dev/helix-headless/table';
 import { styles } from './table-row.css.js';
+import '../../checkbox/index.js';
 let HelixTableRow = class HelixTableRow extends HelixHeadlessTableRow {
+    static { this.tier = 'helix-'; }
     static { this.styles = styles; }
 };
 HelixTableRow = __decorate([

package/dist/tabs/panel/tab-panel.css.js

@@ -8,7 +8,11 @@ display: contents;
 min-block-size: 0;
 min-inline-size: 0;
 outline: none;
-padding-block-start: var(--tabs-panel-padding-block-start, var(--helix-space-md));
+padding-block-start: var(
+--tabs-panel-padding-block-start,
+var(--_tabs-panel-padding-block-start, var(--helix-space-md))
+);
+padding-inline-start: var(--_tabs-panel-padding-inline-start, var(--helix-space-none));
 }
 
 [part="panel"][hidden] {

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

@@ -67,7 +67,8 @@ inset-inline-start: 0;
 opacity: 0;
 position: absolute;
 
-translate: var(--indicator-x, 0) calc(var(--indicator-y, 0px) + var(--_indicator-offset, 0px));
+translate: calc(var(--indicator-x, 0px) + var(--_indicator-offset-x, 0px))
+calc(var(--indicator-y, 0px) + var(--_indicator-offset, 0px));
 
 transition:
 translate var(--helix-duration-normal) var(--helix-easing-emphasized),
@@ -126,6 +127,60 @@ var(--tabs-indicator-thickness, var(--helix-border-thick))
 --_tab-selected-shadow: none;
 }
 
+:host([orientation="vertical"]) {
+
+--_tabs-inline-sign: 1;
+--_tabs-panel-padding-block-start: var(--helix-space-none);
+--_tabs-panel-padding-inline-start: var(--helix-space-md);
+
+grid-template-columns: auto minmax(0, 1fr);
+grid-template-rows: minmax(0, 1fr);
+}
+
+:host([orientation="vertical"]:dir(rtl)) {
+--_tabs-inline-sign: -1;
+}
+
+:host([orientation="vertical"]) [part="tabs"] {
+align-content: start;
+background-position: right;
+background-repeat: repeat-y;
+background-size: var(--helix-border-thin) 100%;
+flex-direction: column;
+overflow-x: visible;
+overflow-y: auto;
+}
+
+:host([orientation="vertical"]:dir(rtl)) [part="tabs"] {
+background-position: left;
+}
+
+:host([orientation="vertical"]) ::slotted(helix-tab) {
+--_tab-inline-size: 100%;
+--_tab-justify: flex-start;
+}
+
+:host([orientation="vertical"][variant="segmented"]) [part="tabs"] {
+--_tab-height: initial;
+
+block-size: auto;
+justify-self: start;
+}
+
+:host([orientation="vertical"][variant="underlined"]) [part="indicator"] {
+--_indicator-block: var(--indicator-block-size, 0);
+--_indicator-offset: 0px;
+--_indicator-offset-x: calc(
+(
+var(--indicator-inline-size, 0px) -
+var(--tabs-indicator-thickness, var(--helix-border-thick))
+) *
+var(--_tabs-inline-sign, 1)
+);
+
+inline-size: var(--tabs-indicator-thickness, var(--helix-border-thick));
+}
+
 @media print {
 :host {
 box-shadow: none;

package/dist/tabs/tab/tab.css.js

@@ -18,8 +18,12 @@ font: inherit;
 font-size: var(--helix-text-sm);
 font-weight: var(--helix-weight-medium);
 display: inline-flex;
-justify-content: center;
+
+inline-size: var(--_tab-inline-size, auto);
+justify-content: var(--_tab-justify, center);
 padding-inline: var(--tabs-tab-padding-inline, var(--helix-space-sm));
+
+text-decoration: none;
 transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
 border-color var(--helix-duration-normal) var(--helix-easing-emphasized),

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/text/clamp.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The line count `lines` asks for, as the declaration that clamps it, or
+ * `undefined` where it is no whole number above zero.
+ *
+ * Written on the part inside the shadow root, so any count works with no rule
+ * per number, and the server renders it with the rest of the template.
+ */
+export declare const clampOf: (lines: number | undefined) => string | undefined;

package/dist/text/clamp.js

@@ -0,0 +1 @@
+export const clampOf = (lines) => Number.isInteger(lines) && lines > 0 ? `-webkit-line-clamp: ${lines}` : undefined;

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

@@ -1,6 +1,12 @@
 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"]),
@@ -15,84 +21,84 @@ display: block;
 
 :host([variant="display"]),
 :host(:not([variant])[as="h1"]) {
-font-family: var(--helix-font-display);
-font-size: var(--helix-text-3xl);
-font-weight: var(--helix-weight-semibold);
-letter-spacing: var(--helix-tracking-tight);
-line-height: var(--helix-leading-heading);
+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(--helix-font-sans);
-font-size: var(--helix-text-2xl);
-font-weight: var(--helix-weight-semibold);
-letter-spacing: var(--helix-tracking-tight);
-line-height: var(--helix-leading-heading);
+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(--helix-font-sans);
-font-size: var(--helix-text-xl);
-font-weight: var(--helix-weight-semibold);
-letter-spacing: var(--helix-tracking-tight);
-line-height: var(--helix-leading-heading);
+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(--helix-font-sans);
-font-size: var(--helix-text-lg);
-font-weight: var(--helix-weight-semibold);
-letter-spacing: var(--helix-tracking-normal);
-line-height: var(--helix-leading-heading);
+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(--helix-font-sans);
-font-size: var(--helix-text-md);
-font-weight: var(--helix-weight-regular);
-letter-spacing: var(--helix-tracking-normal);
-line-height: var(--helix-leading-normal);
+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(--helix-font-sans);
-font-size: var(--helix-text-md);
-font-weight: var(--helix-weight-medium);
-letter-spacing: var(--helix-tracking-normal);
-line-height: var(--helix-leading-normal);
+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(--helix-font-sans);
-font-size: var(--helix-text-sm);
-font-weight: var(--helix-weight-regular);
-letter-spacing: var(--helix-tracking-normal);
-line-height: var(--helix-leading-normal);
+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(--helix-font-sans);
-font-size: var(--helix-text-xs);
-font-weight: var(--helix-weight-medium);
-letter-spacing: var(--helix-tracking-wide);
-line-height: var(--helix-leading-normal);
+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(--helix-font-mono);
-font-size: var(--helix-text-xs);
-font-weight: var(--helix-weight-regular);
-letter-spacing: var(--helix-tracking-normal);
-line-height: var(--helix-leading-normal);
+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(
@@ -175,6 +181,40 @@ 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;
 }

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

@@ -25,6 +25,14 @@ import type { CSSResultGroup, PropertyValues } from 'lit';
  * state. Combining them would need a variant for every pair, such as
  * `caption-danger` and `label-muted`.
  *
+ * `lines` cuts the text off after that many lines and ends it with an
+ * ellipsis. `text-wrap` balances or tidies the line breaks, and `text-align`
+ * sets the alignment. Each `--text-*` property overrides one value of the
+ * ramp, for a text or for every text inside an element.
+ *
+ * **To label a control, write a native `<label data-text="label">`.** The
+ * base layer gives it the label ramp. A Helix field takes its own `label`.
+ *
  * @since 0.1.0
  * @status stable
  * @category typography
@@ -34,6 +42,12 @@ import type { CSSResultGroup, PropertyValues } from 'lit';
  * @slot - The text.
  *
  * @csspart text - The rendered element.
+ *
+ * @cssproperty --text-font-family - The typeface. Overrides the ramp's.
+ * @cssproperty --text-font-size - The size. Overrides the ramp's.
+ * @cssproperty --text-font-weight - The weight. Overrides the ramp's.
+ * @cssproperty --text-letter-spacing - The tracking. Overrides the ramp's.
+ * @cssproperty --text-line-height - The leading. Overrides the ramp's.
  */
 export declare class HelixText extends HelixElement {
     /**
@@ -41,12 +55,14 @@ export declare class HelixText extends HelixElement {
      *
      * Decides the outline and the semantics.
      *
-     * **`label` gives the label ramp and labels no control.** The element is in
-     * this one's shadow root, which neither `for` nor a wrapped control can
-     * reach, so a page that writes either is warned. Name a Helix field with its
-     * own `label`, and a native control with `<label data-text="label">`.
+     * **`label` is deprecated and no longer listed.** The element is in this
+     * one's shadow root, which neither `for` nor a wrapped control can reach, so
+     * it labeled nothing. Written anyway, it still renders a `<label>` in the
+     * label ramp and warns. Use `variant="label"` for the look, a native
+     * `<label data-text="label">` to label a native control, and a Helix field's
+     * own `label`.
      */
-    as?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'strong' | 'em' | 'code' | 'label';
+    as?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'strong' | 'em' | 'code';
     /**
      * Makes the text quieter: `muted`, or the quieter `subtle`.
      *
@@ -64,6 +80,33 @@ export declare class HelixText extends HelixElement {
      * The resting case is the absent attribute, full strength.
      */
     emphasis?: 'muted' | 'subtle';
+    /**
+     * The most lines to show. Text past the last one is cut off with an
+     * ellipsis.
+     *
+     * 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.
+     */
+    lines?: number;
+    /**
+     * How the lines align, set as `text-align`.
+     *
+     * Named for the CSS property it sets. `align` alone is a legacy HTML
+     * attribute the browser maps to `text-align` by itself on any element, and
+     * it has no `start` or `end`.
+     */
+    textAlign?: 'start' | 'center' | 'end' | 'justify';
+    /**
+     * How the lines break, set as `text-wrap`.
+     *
+     * `balance` evens out the length of every line, for a heading of a few
+     * lines. `pretty` avoids a last line of one short word, for a paragraph.
+     * `nowrap` keeps the text on one line. Absent, the lines break as the
+     * browser breaks them.
+     */
+    textWrap?: 'balance' | 'pretty' | 'nowrap';
     /**
      * The meaning of the text, shown by its color, such as `danger` or `success`.
      * It is set separately from `variant`.
@@ -84,8 +127,6 @@ export declare class HelixText extends HelixElement {
      */
     variant?: 'display' | 'heading' | 'subheading' | 'title' | 'body' | 'body-strong' | 'caption' | 'label' | 'code';
     protected updated(changed: PropertyValues): void;
-    /** Whether the page wrote this as the label of a control, which it cannot be. */
-    private labelsNothing;
     protected render(): unknown;
     static styles: CSSResultGroup;
 }

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

@@ -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"] {