@fusion.dev/helix 0.144.0 → 0.146.0

package/dist/steps/step/step.js

@@ -7,10 +7,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessStep } from '@fusion.dev/helix-headless/steps';
 import '../../button/index.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './step.css.js';
 let HelixStep = class HelixStep extends HelixHeadlessStep {
     static { this.tier = 'helix-'; }
-    static { this.styles = styles; }
+    static { this.styles = [liveStyles, styles]; }
 };
 HelixStep = __decorate([
     customElement('helix-step')

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

@@ -15,6 +15,24 @@ inline-size: 100%;
 display: contents;
 }
 
+::slotted([slot="heading"]) {
+color: var(--table-title-color, var(--helix-color-foreground));
+display: block;
+font-family: var(--helix-font-sans);
+font-size: var(--table-title-text, var(--helix-text-md));
+font-weight: var(--helix-weight-semibold);
+margin-block: var(--helix-space-none) var(--table-title-gap, var(--helix-space-sm));
+}
+
+[part="select-all"] {
+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-loose);
+padding-inline: var(--helix-space-none) var(--helix-space-md);
+}
+
 :host([loading]) [part="table"] {
 opacity: 0.5;
 }

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

@@ -1,5 +1,6 @@
 import { HelixHeadlessTable } from '@fusion.dev/helix-headless/table';
 import type { CSSResultGroup } from 'lit';
+import '../../checkbox/index.js';
 /**
  * @summary A table of data, laid out on a grid.
  *
@@ -13,13 +14,18 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/table
  *
  * @slot - The table's rows.
+ * @slot heading - Words that name the table, shown above it in the weight of a heading.
  *
  * @csspart live - A live region that repeats the empty and loading text, so screen readers announce it when it changes. Visually hidden in the styled tier.
  * @csspart table - The grid.
  *
  * @cssproperty --table-columns - Track list for the columns. It overrides the track list worked out from the columns.
+ * @cssproperty --table-title-color - The color of the words in the `heading` slot.
+ * @cssproperty --table-title-gap - The space between the `heading` slot and the grid.
+ * @cssproperty --table-title-text - The font size of the words in the `heading` slot.
  */
 export declare class HelixTable extends HelixHeadlessTable {
+    static tier: string;
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/table/root/table-root.js

@@ -9,7 +9,9 @@ import { HelixHeadlessTable } from '@fusion.dev/helix-headless/table';
 import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
 import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './table-root.css.js';
+import '../../checkbox/index.js';
 let HelixTable = class HelixTable extends HelixHeadlessTable {
+    static { this.tier = 'helix-'; }
     static { this.styles = [liveStyles, collectionStateStyles, styles]; }
 };
 HelixTable = __decorate([

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

@@ -59,15 +59,16 @@ background-color: var(--_indicator-color, transparent);
 block-size: var(--_indicator-block, var(--helix-border-thick));
 
 border: var(--_indicator-border, 0) solid var(--_indicator-border-color, transparent);
-border-radius: var(--_indicator-radius, var(--helix-radii-none));
-box-shadow: var(--_indicator-shadow, none);
+border-radius: var(--tabs-indicator-radius, var(--_indicator-radius, var(--helix-radii-none)));
+box-shadow: var(--tabs-indicator-shadow, var(--_indicator-shadow, none));
 inline-size: var(--indicator-inline-size, 0);
 inset-block-start: 0;
 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/root/tabs-root.d.ts

@@ -22,13 +22,17 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/tabs
  *
  * @slot - The tabs, as direct children of this element.
+ * @slot indicator - A mark of your own, drawn inside the `indicator` part, where the selected tab's place and size reach it.
  * @slot panels - The panels, as direct children of this element. Panels inside a wrapper are not paired with tabs, because pairing reads only the direct children.
  *
+ * @csspart indicator - The mark that moves to the selected tab. It carries the selected tab's place and size as `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and `--indicator-block-size`.
  * @csspart panels - The panel container.
  * @csspart tabs - The tab list.
  *
  * @cssproperty --tabs-gap - The space between tabs.
  * @cssproperty --tabs-indicator-color - The fill of the mark on the current tab: the bar under `underlined`, and the pill otherwise.
+ * @cssproperty --tabs-indicator-radius - The corners of the mark.
+ * @cssproperty --tabs-indicator-shadow - The shadow under the mark, which the pill and `segmented` draw.
  * @cssproperty --tabs-indicator-thickness - The height of the bar under `underlined`.
  * @cssproperty --tabs-rule-color - The color of the rule under the row in `underlined`.
  */

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

@@ -11,15 +11,19 @@ block-size: var(--_tab-height, var(--tabs-tab-block-size, var(--helix-size-contr
 border: none;
 
 border-block-end: var(--helix-border-thick) solid transparent;
-border-radius: var(--_tab-radius, var(--helix-radii-none));
+border-radius: var(--tabs-tab-radius, var(--_tab-radius, var(--helix-radii-none)));
 color: var(--tabs-tab-color, var(--helix-color-foreground-subtle));
 cursor: pointer;
 font: inherit;
-font-size: var(--helix-text-sm);
-font-weight: var(--helix-weight-medium);
+font-size: var(--tabs-tab-font-size, var(--helix-text-sm));
+font-weight: var(--tabs-tab-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),
@@ -27,21 +31,28 @@ color var(--helix-duration-fast) var(--helix-easing-standard);
 white-space: nowrap;
 }
 
-[part="tab"]:hover:not(:disabled) {
-background-color: color-mix(in oklab, var(--helix-color-foreground) 5%, transparent);
-color: var(--helix-color-foreground);
+[part="tab"]:hover:not(:disabled, [aria-disabled="true"]) {
+background-color: var(
+--tabs-tab-hover-background-color,
+color-mix(in oklab, var(--helix-color-foreground) 5%, transparent)
+);
+color: var(--tabs-tab-hover-color, var(--helix-color-foreground));
 }
 
 :host(:state(selected)) [part="tab"],
 :host(:state(selected)) [part="tab"]:hover {
-background-color: var(--_tab-selected-surface, transparent);
+background-color: var(
+--tabs-tab-selected-background-color,
+var(--_tab-selected-surface, transparent)
+);
 box-shadow: var(--_tab-selected-shadow, none);
 color: var(--tabs-tab-selected-color, var(--helix-color-foreground));
 }
 
-[part="tab"]:disabled {
+[part="tab"]:disabled,
+[part="tab"][aria-disabled="true"] {
 cursor: not-allowed;
-opacity: 0.5;
+opacity: var(--tabs-tab-disabled-opacity, 0.5);
 }
 
 [part="tab"]:focus-visible {

package/dist/tabs/tab/tab.d.ts

@@ -19,7 +19,14 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --tabs-tab-block-size - The height of a tab. `segmented` sizes its tabs to the track and does not read it.
  * @cssproperty --tabs-tab-color - The label color of a tab that is not current.
+ * @cssproperty --tabs-tab-disabled-opacity - How faint a disabled tab is drawn.
+ * @cssproperty --tabs-tab-font-size - The size of a tab's label.
+ * @cssproperty --tabs-tab-font-weight - The weight of a tab's label.
+ * @cssproperty --tabs-tab-hover-background-color - The wash under the pointer.
+ * @cssproperty --tabs-tab-hover-color - The label color under the pointer.
  * @cssproperty --tabs-tab-padding-inline - The space either side of the label.
+ * @cssproperty --tabs-tab-radius - The corners of a tab, which the hover wash takes.
+ * @cssproperty --tabs-tab-selected-background-color - The fill of the current tab itself, under the moving mark.
  * @cssproperty --tabs-tab-selected-color - The label color of the current tab.
  */
 export declare class HelixTab extends HelixHeadlessTab {

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

@@ -3,4 +3,10 @@ export const styles = createSheet(`:host {
 display: flex;
 flex-wrap: wrap;
 gap: var(--tag-group-gap, var(--helix-space-2xs));
+}
+
+[part="empty"]: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);
 }`);

package/dist/text/clamp.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The line count `lines` asks for, as the declarations that clamp 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. The
+ * box and the overflow it needs are written with the count, so a count that
+ * is no count leaves the text as it was, with nothing cut off. A page's
+ * `::part(text)` rule still wins over each of them.
+ */
+export declare const clampOf: (lines: number | undefined) => string | undefined;

package/dist/text/clamp.js

@@ -0,0 +1,3 @@
+export const clampOf = (lines) => Number.isInteger(lines) && lines > 0
+    ? `display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -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,34 @@ 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;
 }

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,34 @@ 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. A count that is not a whole number above zero, such as `0`,
+     * cuts nothing off.
+     */
+    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 +128,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;
 }