@fusion.dev/helix 0.144.0 → 0.145.0

package/dist/skip-link/root/skip-link-root.css.js

@@ -1,26 +1,26 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: block;
-inset-block-start: var(--helix-space-sm);
-inset-inline-start: var(--helix-space-sm);
+inset-block-start: var(--skip-link-inset-block, var(--helix-space-sm));
+inset-inline-start: var(--skip-link-inset-inline, var(--helix-space-sm));
 position: fixed;
 z-index: var(--helix-layer-overlay);
 }
 
 [part="link"] {
-background-color: var(--helix-color-surface-inverse);
+background-color: var(--skip-link-background-color, var(--helix-color-surface-inverse));
 border: var(--skip-link-border-width, var(--helix-border-floating)) solid
 var(--skip-link-border-color, var(--helix-color-border));
-border-radius: var(--helix-radii-sm);
+border-radius: var(--skip-link-radius, var(--helix-radii-sm));
 box-shadow: var(--skip-link-shadow, var(--helix-shadow-floating));
-color: var(--helix-color-foreground-inverse);
+color: var(--skip-link-color, var(--helix-color-foreground-inverse));
 display: inline-block;
 font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
+font-size: var(--skip-link-font-size, var(--helix-text-sm));
 font-weight: var(--helix-weight-medium);
 line-height: var(--helix-leading-normal);
-padding-block: var(--helix-space-sm);
-padding-inline: var(--helix-space-md);
+padding-block: var(--skip-link-padding-block, var(--helix-space-sm));
+padding-inline: var(--skip-link-padding-inline, var(--helix-space-md));
 text-decoration: none;
 }
 

package/dist/skip-link/root/skip-link-root.d.ts

@@ -22,10 +22,19 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Skip navigation, Skip to content
  * @documentation https://fusion.dev/helix/components/skip-link
  *
+ * @cssproperty --skip-link-background-color - The background of the link while it is shown.
  * @cssproperty --skip-link-border-color - The border color of the link while it is shown.
  * @cssproperty --skip-link-border-width - The border width of the link while it is shown. Follows
  *   `--helix-border-floating`, which is `0`, so the link is set apart by its shadow unless a
  *   theme sets a border.
+ * @cssproperty --skip-link-color - The text color of the link while it is shown.
+ * @cssproperty --skip-link-font-size - The size of the link's text.
+ * @cssproperty --skip-link-inset-block - How far the shown link sits from the top of the viewport.
+ * @cssproperty --skip-link-inset-inline - How far the shown link sits from the start edge of the
+ *   viewport.
+ * @cssproperty --skip-link-padding-block - The space above and below the link's text.
+ * @cssproperty --skip-link-padding-inline - The space either side of the link's text.
+ * @cssproperty --skip-link-radius - The corner radius of the link.
  * @cssproperty --skip-link-shadow - The shadow under the link while it is shown. Follows
  *   `--helix-shadow-floating`, because the link sits over the corner of the page.
  */

package/dist/speed-dial/item/speed-dial-item.css.js

@@ -26,10 +26,10 @@ opacity: 0.5;
 
 align-items: center;
 aspect-ratio: 1;
-background-color: var(--helix-color-surface-overlay);
+background-color: var(--speed-dial-item-background-color, var(--helix-color-surface-overlay));
 border-radius: var(--helix-radii-full);
 box-shadow: var(--helix-shadow-md);
-color: var(--helix-color-foreground);
+color: var(--speed-dial-item-color, var(--helix-color-foreground));
 display: inline-flex;
 inline-size: var(--speed-dial-item-size, var(--helix-size-control-tight));
 justify-content: center;
@@ -57,13 +57,20 @@ outline-offset: var(--helix-size-focus-offset);
 }
 
 [part="label"] {
-background-color: var(--helix-color-surface-overlay);
+background-color: var(--speed-dial-label-background-color, var(--helix-color-surface-overlay));
 border-radius: var(--helix-radii-sm);
 box-shadow: var(--helix-shadow-sm);
-color: var(--helix-color-foreground);
+color: var(--speed-dial-label-color, var(--helix-color-foreground));
 font-family: var(--helix-font-sans);
 font-size: var(--helix-text-sm);
 font-weight: var(--helix-weight-medium);
+opacity: var(--_speed-dial-label-opacity, 1);
 padding: var(--helix-space-2xs) var(--helix-space-xs);
+transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
 white-space: nowrap;
+}
+
+[part="item"]:hover [part="label"],
+[part="item"]:focus-visible [part="label"] {
+opacity: 1;
 }`);

package/dist/speed-dial/item/speed-dial-item.d.ts

@@ -14,7 +14,11 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Speed dial action, FAB action, Quick action
  * @documentation https://fusion.dev/helix/components/speed-dial
  *
+ * @cssproperty --speed-dial-item-background-color - Fill of the round icon.
+ * @cssproperty --speed-dial-item-color - Color of the icon.
  * @cssproperty --speed-dial-item-size - Edge length of the icon.
+ * @cssproperty --speed-dial-label-background-color - Fill of the chip holding the action's name.
+ * @cssproperty --speed-dial-label-color - Color of the action's name.
  */
 export declare class HelixSpeedDialItem extends HelixHeadlessSpeedDialItem {
     static styles: CSSResultGroup;

package/dist/speed-dial/root/speed-dial-root.css.js

@@ -31,11 +31,11 @@ display: none;
 }
 
 [part="actions"] {
---_dial-from: var(--helix-space-md);
+--_dial-from: var(--speed-dial-travel, var(--helix-space-md));
 }
 
 [part="actions"][data-placement^="bottom"] {
---_dial-from: calc(var(--helix-space-md) * -1);
+--_dial-from: calc(var(--speed-dial-travel, var(--helix-space-md)) * -1);
 }
 
 [part="actions"] ::slotted(*) {
@@ -55,7 +55,7 @@ translate: 0 0;
 }
 
 [part="actions"] {
---_speed-dial-stagger: calc(var(--helix-duration-fast) / 3);
+--_speed-dial-stagger: var(--speed-dial-stagger, calc(var(--helix-duration-fast) / 3));
 }
 
 [part="actions"][data-placed] ::slotted(:nth-last-child(2)) {
@@ -140,4 +140,8 @@ outline-offset: var(--helix-size-focus-offset);
 :host {
 display: none;
 }
+}
+
+:host([labels="hover"]) {
+--_speed-dial-label-opacity: 0;
 }`);

package/dist/speed-dial/root/speed-dial-root.d.ts

@@ -15,9 +15,18 @@ import '../../icon/index.js';
  * @documentation https://fusion.dev/helix/components/speed-dial
  *
  * @cssproperty --speed-dial-gap - Space between the actions.
+ * @cssproperty --speed-dial-stagger - The wait between one action arriving and the next.
+ * @cssproperty --speed-dial-travel - How far each action moves as it arrives.
  */
 export declare class HelixSpeedDial extends HelixHeadlessSpeedDial {
     static styles: CSSResultGroup;
+    /**
+     * When the actions' names show. Unset, always, beside each action. `hover`
+     * shows a name only while its action is under the pointer or has focus, as
+     * a tooltip does, for a dial whose icons speak for themselves. The names stay
+     * the actions' accessible names either way.
+     */
+    labels?: 'hover';
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/speed-dial/root/speed-dial-root.js

@@ -6,12 +6,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessSpeedDial } from '@fusion.dev/helix-headless/speed-dial';
+import { property } from 'lit/decorators.js';
 import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
 import { styles } from './speed-dial-root.css.js';
 import '../../icon/index.js';
 let HelixSpeedDial = class HelixSpeedDial extends HelixHeadlessSpeedDial {
     static { this.styles = [glyphStyles, styles]; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixSpeedDial.prototype, "labels", void 0);
 HelixSpeedDial = __decorate([
     customElement('helix-speed-dial')
 ], HelixSpeedDial);

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

@@ -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/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;
 }