@fusion.dev/helix-headless 0.228.0 → 0.229.1

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

@@ -56,7 +56,7 @@ import { type Branch } from '../levels.js';
  * marked, so `a[aria-current]` and `a[data-depth="2"]` are the hooks for a
  * rule of yours.
  *
- * **The rail.** `variant="rail"` draws a slim column of ticks at the edge of a
+ * **The rail.** `marker="rail"` draws a slim column of ticks at the edge of a
  * long scroll, one per link, with the section in view drawn longer and a deeper
  * level shorter. Hovering or focusing the rail opens a surface holding the
  * links, each on one line, and Escape closes it. A tap opens it too, and it stays
@@ -82,9 +82,9 @@ import { type Branch } from '../levels.js';
  *   `--indicator-block-size`, and `data-placed` once it has been placed, for a mark you draw
  *   and animate yourself.
  * @csspart nav - The navigation landmark.
- * @csspart surface - The box holding the heading and the navigation under `variant="rail"`, which opens over the ticks.
+ * @csspart surface - The box holding the heading and the navigation under `marker="rail"`, which opens over the ticks.
  * @csspart tick - One tick of the rail, for one link, with `data-current` while its section is in view. It carries the link's depth as `--outline-depth`.
- * @csspart ticks - The column of ticks under `variant="rail"`, hidden from assistive technology.
+ * @csspart ticks - The column of ticks under `marker="rail"`, hidden from assistive technology.
  *
  * @cssproperty --outline-depth - The depth of the link a tick stands for, from one, set on each tick.
  *
@@ -144,22 +144,23 @@ export declare class HelixHeadlessOutline extends HelixElement {
      * Empty by default, which leaves the name to `fallbackLabel`.
      */
     label: string;
+    /**
+     * The rail form: a slim column of ticks, one per link, that opens on hover,
+     * focus, or a tap into a surface holding the links.
+     *
+     * A marker because no registered axis (emphasis, material, nesting,
+     * orientation, separation, shape, size, tone, width) has a value for it, and
+     * a rail is an arrangement of this family alone, as Megamenu's
+     * `marker="band"` is. It has no default: the outline without it is the list
+     * of links.
+     */
+    marker?: 'rail';
     /**
      * Which links are marked. `reading` marks the one section being read, the
      * last whose heading has passed the reading line. `visible` marks every
      * section with part of it on screen, and the mark runs across their links.
      */
     marks: 'reading' | 'visible';
-    /**
-     * How far below the top of the scroll container a heading counts as reached,
-     * in pixels. The scroll container is the window or the panel the sections
-     * scroll in.
-     *
-     * The reading line. A page with a sticky masthead sets this to its height, or
-     * a little more: without it the current section changes as a heading slides
-     * under the chrome rather than as it reaches the top of what can be seen.
-     */
-    offset: number;
     /**
      * The id of the section in view, or empty before anything is measured.
      *
@@ -180,16 +181,15 @@ export declare class HelixHeadlessOutline extends HelixElement {
     /** What `marked` reports, which only `markTo` writes. */
     private markedIds;
     /**
-     * The rail form: a slim column of ticks, one per link, that opens on hover,
-     * focus, or a tap into a surface holding the links.
+     * How far below the top of the scroll container a heading counts as reached,
+     * in pixels. The scroll container is the window or the panel the sections
+     * scroll in.
      *
-     * A variant because no registered axis (emphasis, material, nesting,
-     * orientation, separation, shape, size, tone, width) has a value for it, and
-     * a rail is an arrangement of this family alone, as Megamenu's
-     * `variant="band"` is. It has no default: the outline without it is the list
-     * of links.
+     * The reading line. A page with a sticky masthead sets this to its height, or
+     * a little more: without it the current section changes as a heading slides
+     * under the chrome rather than as it reaches the top of what can be seen.
      */
-    variant?: 'rail';
+    offset: number;
     /**
      * What `current` reports, which only `mark` writes.
      *

package/dist/outline/root/outline-root.js

@@ -19,8 +19,8 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
         this.follow = false;
         this.label = '';
         this.marks = 'reading';
-        this.offset = 0;
         this.markedIds = [];
+        this.offset = 0;
         this.reading = '';
         this.frame = 0;
         this.handleScroll = () => {
@@ -319,7 +319,7 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
         }
     }
     get rail() {
-        return this.variant === 'rail';
+        return this.marker === 'rail';
     }
     setOpen(on) {
         if (!on) {
@@ -418,7 +418,7 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
     }
     updated(changed) {
         super.updated(changed);
-        if (changed.has('variant') && !this.rail) {
+        if (changed.has('marker') && !this.rail) {
             this.setOpen(false);
         }
         this.assign();
@@ -469,15 +469,15 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessOutline.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessOutline.prototype, "marker", void 0);
 __decorate([
     property()
 ], HelixHeadlessOutline.prototype, "marks", void 0);
 __decorate([
     property({ converter: numberConverter('offset', 0, 'pixels') })
 ], HelixHeadlessOutline.prototype, "offset", void 0);
-__decorate([
-    property({ reflect: true })
-], HelixHeadlessOutline.prototype, "variant", void 0);
 HelixHeadlessOutline = __decorate([
     customElement('helix-headless-outline')
 ], HelixHeadlessOutline);

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

@@ -25,7 +25,7 @@ declare const HelixHeadlessRadio_base: (new (...args: any[]) => import("@fusion.
  * @documentation https://fusion.dev/helix/components/radio
  *
  * @slot - The radio's label.
- * @slot icon - An icon shown beside the label. With `variant="chip"`, the icon
+ * @slot icon - An icon shown beside the label. With `chip`, the icon
  * replaces the visible label, and the label becomes the name read by screen
  * readers. The icon has its own slot so the chip can hide the label and show
  * the icon.

package/dist/select/root/select-root.js

@@ -374,7 +374,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         @keydown=${this.handleTriggerKeydown}
       >
         <slot name="start"></slot>
-        <span part="value" id="value">${this.renderValue()}</span>
+        <span part="value" id="value" ?data-placeholder=${this.chosen.length === 0}>${this.renderValue()}</span>
         <slot name="end"></slot>
         ${this.renderIndicator()}
       </button>

package/dist/spatial-bar-chart/root/spatial-bar-chart-root.d.ts

@@ -159,38 +159,6 @@ export declare class HelixHeadlessSpatialBarChart extends HelixHeadlessSpatialBa
      * height.
      */
     growAgain: boolean;
-    /**
-     * Draws no box: no edges, grid, numbers, or names, and in a `row` no
-     * floor, so the readings stand alone and fill the plot, as a picture on a
-     * product's own page does. The
-     * table, the summary, the tooltip, and the keys still carry every value,
-     * and a renderer draws no box either.
-     */
-    noBox: boolean;
-    /**
-     * What the readout says for a place with no value. `{category}` and
-     * `{series}` name the place.
-     */
-    openLabel: string;
-    /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
-    plotLabel: string;
-    /**
-     * Stacks a category's series into one column, each block standing on the
-     * ones before it, so the column is as tall as the category's total, as a
-     * flat `Bar Chart` stacks them.
-     *
-     * Absent stands the series one behind another in depth. Stacked, every
-     * series stands in the front row, so none hides another, and the parts of
-     * one total read together. A negative reading hangs below zero on the
-     * negatives before it. The scale fits the stacks.
-     */
-    stacked: boolean;
-    /**
-     * The `summary` part's sentence. `{count}`, `{series}`, and `{categories}`
-     * are the number of bars, series, and categories, written in the locale,
-     * and `{low}` and `{high}` the lowest and the highest value.
-     */
-    summaryLabel: string;
     /**
      * How the bars stand.
      *
@@ -224,7 +192,39 @@ export declare class HelixHeadlessSpatialBarChart extends HelixHeadlessSpatialBa
      * can give it the latest of a longer table. It is read when the plot's
      * size changes.
      */
-    variant?: 'diagonal' | 'row';
+    layout?: 'diagonal' | 'row';
+    /**
+     * Draws no box: no edges, grid, numbers, or names, and in a `row` no
+     * floor, so the readings stand alone and fill the plot, as a picture on a
+     * product's own page does. The
+     * table, the summary, the tooltip, and the keys still carry every value,
+     * and a renderer draws no box either.
+     */
+    noBox: boolean;
+    /**
+     * What the readout says for a place with no value. `{category}` and
+     * `{series}` name the place.
+     */
+    openLabel: string;
+    /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
+    plotLabel: string;
+    /**
+     * Stacks a category's series into one column, each block standing on the
+     * ones before it, so the column is as tall as the category's total, as a
+     * flat `Bar Chart` stacks them.
+     *
+     * Absent stands the series one behind another in depth. Stacked, every
+     * series stands in the front row, so none hides another, and the parts of
+     * one total read together. A negative reading hangs below zero on the
+     * negatives before it. The scale fits the stacks.
+     */
+    stacked: boolean;
+    /**
+     * The `summary` part's sentence. `{count}`, `{series}`, and `{categories}`
+     * are the number of bars, series, and categories, written in the locale,
+     * and `{low}` and `{high}` the lowest and the highest value.
+     */
+    summaryLabel: string;
     /** Whether a renderer has drawn the bars, which hides the chart's own drawing. */
     private rendered;
     /** Where the chart's own drawing is seen from, which a drag or Shift with an arrow turns. */

package/dist/spatial-bar-chart/root/spatial-bar-chart-root.js

@@ -197,7 +197,7 @@ let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends Mi
     }
     get fits() {
         const box = this.partNamed('fallback');
-        if (!box || !this.variant || typeof getComputedStyle !== 'function') {
+        if (!box || !this.layout || typeof getComputedStyle !== 'function') {
             return undefined;
         }
         const style = getComputedStyle(box);
@@ -331,7 +331,7 @@ let HelixHeadlessSpatialBarChart = class HelixHeadlessSpatialBarChart extends Mi
       ${readable ? this.renderSummary(field) : this.renderStatus()}${this.renderSonify()}${this.renderTable()}`;
     }
     renderFallback(read, at) {
-        const layout = this.variant ?? 'grid';
+        const layout = this.layout ?? 'grid';
         const lined = layout === 'grid' ? undefined : layout;
         const bare = this.noBox || lined !== undefined;
         const view = boxView(read.axes, this.camera, [], bare);
@@ -489,6 +489,9 @@ __decorate([
 __decorate([
     property({ attribute: 'grow-again', reflect: true, type: Boolean })
 ], HelixHeadlessSpatialBarChart.prototype, "growAgain", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessSpatialBarChart.prototype, "layout", void 0);
 __decorate([
     property({ attribute: 'no-box', reflect: true, type: Boolean })
 ], HelixHeadlessSpatialBarChart.prototype, "noBox", void 0);
@@ -507,9 +510,6 @@ __decorate([
     words,
     property({ attribute: 'summary-label' })
 ], HelixHeadlessSpatialBarChart.prototype, "summaryLabel", void 0);
-__decorate([
-    property({ reflect: true })
-], HelixHeadlessSpatialBarChart.prototype, "variant", void 0);
 __decorate([
     state()
 ], HelixHeadlessSpatialBarChart.prototype, "rendered", void 0);

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

@@ -118,6 +118,19 @@ export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
      * before going on to the next.
      */
     linear: boolean;
+    /**
+     * What each step is marked with.
+     *
+     * Absent is the state itself: a check where a stage is done, a target where
+     * the reader is, an empty ring ahead of them. Three marks that need no
+     * legend, which a number does: "3" says where a stage sits in the order and
+     * nothing about whether it is finished.
+     *
+     * `numeric` is the older convention and is still the right one where the
+     * order is the point, a form that says "step 3 of 5" beside it, or a sequence
+     * a reader is told to come back to by number.
+     */
+    marker?: 'numeric';
     /**
      * Which way the steps run.
      *
@@ -139,30 +152,17 @@ export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
      * number, for a sentence that places the sign itself.
      */
     progressLabel: string;
-    /**
-     * A function that answers whether a stage is valid, asked about the stage a
-     * reader is on before they move forward from it. Return `false` to keep them
-     * there. Not asked of an `optional` stage, nor for a move back.
-     */
-    validate?: (step: HelixHeadlessStep) => boolean;
     /**
      * How far through the sequence is, from 0 to 100: the share of its stages
      * that are `complete`, rounded to a whole number.
      */
     get progress(): number;
     /**
-     * What each step is marked with.
-     *
-     * Absent is the state itself: a check where a stage is done, a target where
-     * the reader is, an empty ring ahead of them. Three marks that need no
-     * legend, which a number does: "3" says where a stage sits in the order and
-     * nothing about whether it is finished.
-     *
-     * `numeric` is the older convention and is still the right one where the
-     * order is the point, a form that says "step 3 of 5" beside it, or a sequence
-     * a reader is told to come back to by number.
+     * A function that answers whether a stage is valid, asked about the stage a
+     * reader is on before they move forward from it. Return `false` to keep them
+     * there. Not asked of an `optional` stage, nor for a move back.
      */
-    variant?: 'numeric';
+    validate?: (step: HelixHeadlessStep) => boolean;
     protected readonly keys: KeyboardNavigationController;
     protected readonly commands: CommandController;
     /** The steps, in the order the consumer wrote them. */

package/dist/steps/root/steps-root.js

@@ -272,6 +272,9 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessSteps.prototype, "linear", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessSteps.prototype, "marker", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessSteps.prototype, "orientation", void 0);
@@ -282,9 +285,6 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessSteps.prototype, "validate", void 0);
-__decorate([
-    property({ reflect: true })
-], HelixHeadlessSteps.prototype, "variant", void 0);
 HelixHeadlessSteps = __decorate([
     customElement('helix-headless-steps')
 ], HelixHeadlessSteps);

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

@@ -83,6 +83,7 @@ export declare class HelixHeadlessSwitch extends HelixHeadlessSwitch_base {
     private sync;
     /** Returns the switch to the state its markup declared. */
     formResetCallback(): void;
+    protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /**
      * Says on the `label` region whether anything is in it.

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

@@ -33,6 +33,10 @@ let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerCheck
         super.formResetCallback();
         this.resetChecked();
     }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.renderRoot.addEventListener('slotchange', () => this.markEmpty());
+    }
     updated(changed) {
         super.updated(changed);
         this.markEmpty();

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

@@ -126,18 +126,6 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
      * panels on the way.
      */
     manual: boolean;
-    /**
-     * The direction the tabs run. `vertical` sets them in a column beside the
-     * panels and tells a screen reader the list is vertical.
-     *
-     * Optional, so the resting row writes no attribute onto the host.
-     */
-    orientation?: 'horizontal' | 'vertical';
-    /**
-     * Whether a strip with more tabs than fit shows a button at each end it can
-     * scroll toward.
-     */
-    scrollControls: boolean;
     /**
      * How the row of tabs is drawn.
      *
@@ -162,7 +150,19 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
      * Reflected and left unset by default, so the host carries nothing a
      * consumer's server markup does not already have.
      */
-    variant?: 'segmented' | 'underlined';
+    marker?: 'segmented' | 'underlined';
+    /**
+     * The direction the tabs run. `vertical` sets them in a column beside the
+     * panels and tells a screen reader the list is vertical.
+     *
+     * Optional, so the resting row writes no attribute onto the host.
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Whether a strip with more tabs than fit shows a button at each end it can
+     * scroll toward.
+     */
+    scrollControls: boolean;
     private get tabs();
     /** Whether any tab is a link, so arriving on one chooses nothing. */
     private get linked();

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

@@ -248,15 +248,15 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessTabs.prototype, "manual", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessTabs.prototype, "marker", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTabs.prototype, "orientation", void 0);
 __decorate([
     property({ attribute: 'scroll-controls', reflect: true, type: Boolean })
 ], HelixHeadlessTabs.prototype, "scrollControls", void 0);
-__decorate([
-    property({ reflect: true })
-], HelixHeadlessTabs.prototype, "variant", void 0);
 __decorate([
     state()
 ], HelixHeadlessTabs.prototype, "more", void 0);

package/dist/time-input/root/time-input-root.d.ts

@@ -30,7 +30,7 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * with `aria-haspopup="dialog"`, `aria-expanded`, and `aria-controls`, since
  * Down opens the list from it. In the list, the arrow keys, typed digits and PageUp and PageDown
  * move through the times, and Enter, Space or a click chooses one and closes
- * the panel. With `variant="wheels"` each wheel moves the time as you turn it,
+ * the panel. With `picker="wheels"` each wheel moves the time as you turn it,
  * the panel stays open, and Enter or Escape closes it.
  *
  * With `segmented`, the field is a row of segments in place of the text: an
@@ -232,6 +232,23 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * `show-now`.
      */
     nowLabel: string;
+    /**
+     * Whether the panel shows one list of times or a column for each part of the
+     * time.
+     *
+     * `list` offers whole times, which is what a product with slots or opening
+     * hours has. `wheels` splits them into an hour, a minute and a meridiem where
+     * the locale uses one, which is the only way to reach `23:45` without
+     * scrolling most of a day. `TimePicker` carries the longer note on the trade.
+     *
+     * **Optional rather than defaulted, which is not a style preference.** A
+     * reflecting property with a default writes its attribute onto every host the
+     * moment the element upgrades, including the ones a consumer rendered and did
+     * not touch, and React reads that as a hydration mismatch. The absent
+     * attribute *is* the list, which the stylesheet reads as the base rule, so
+     * only the departure has to be named.
+     */
+    picker?: 'list' | 'wheels';
     /**
      * Placeholder text shown before a time is entered.
      */
@@ -296,17 +313,6 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * The message shown when `disable-times` bars a time.
      */
     unavailableMessage: string;
-    /**
-     * The message for text that is no time, where `bad-input-message` is not
-     * set. `{mode}` is `single`, `range`, or `multiple`, `{example}` is a time
-     * written as the field writes one, `2:30 PM` in `en-US` and `14:30` in
-     * `de-DE`, and `{shape}` is `HH:mm`, or `HH:mm:ss` with `seconds`.
-     *
-     * **The default names a time the field reads back.** It said "Enter a time
-     * as HH:mm." to a reader whose field showed `2:30 PM`, and a pattern token
-     * is words for a developer.
-     */
-    unreadableMessage: string;
     /** Every time in the value, which may hold more than one. */
     private get held();
     /**
@@ -385,22 +391,16 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
     /** What is wrong with the times, which the text input cannot say. */
     protected validate(): string | readonly [keyof ValidityStateFlags, string];
     /**
-     * Whether the panel shows one list of times or a column for each part of the
-     * time.
-     *
-     * `list` offers whole times, which is what a product with slots or opening
-     * hours has. `wheels` splits them into an hour, a minute and a meridiem where
-     * the locale uses one, which is the only way to reach `23:45` without
-     * scrolling most of a day. `TimePicker` carries the longer note on the trade.
+     * The message for text that is no time, where `bad-input-message` is not
+     * set. `{mode}` is `single`, `range`, or `multiple`, `{example}` is a time
+     * written as the field writes one, `2:30 PM` in `en-US` and `14:30` in
+     * `de-DE`, and `{shape}` is `HH:mm`, or `HH:mm:ss` with `seconds`.
      *
-     * **Optional rather than defaulted, which is not a style preference.** A
-     * reflecting property with a default writes its attribute onto every host the
-     * moment the element upgrades, including the ones a consumer rendered and did
-     * not touch, and React reads that as a hydration mismatch. The absent
-     * attribute *is* the list, which the stylesheet reads as the base rule, so
-     * only the departure has to be named.
+     * **The default names a time the field reads back.** It said "Enter a time
+     * as HH:mm." to a reader whose field showed `2:30 PM`, and a pattern token
+     * is words for a developer.
      */
-    variant?: 'list' | 'wheels';
+    unreadableMessage: string;
     protected updated(changed: PropertyValues): void;
     /**
      * The clock the field opens, behind a seam the styled tier can move.

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

@@ -33,7 +33,6 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         this.timeStyle = 'local';
         this.triggerLabel = 'Choose a time';
         this.unavailableMessage = 'Choose a time that is available.';
-        this.unreadableMessage = '{mode, select, single {Enter a time such as {example}.} other {Enter times such as {example}, separated by commas.}}';
         this.draft = '';
         this.handleTextCommit = (event) => {
             if (this.mode !== 'multiple') {
@@ -90,18 +89,19 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
                 return;
             }
             this.restore();
-            if (this.mode === undefined && this.variant !== 'wheels') {
+            if (this.mode === undefined && this.picker !== 'wheels') {
                 this.requestOpen(false);
                 this.updateComplete.then(() => this.returnFocus());
             }
         };
         this.handleWheelEnter = (event) => {
-            if (event.key === 'Enter' && this.variant === 'wheels' && this.open) {
+            if (event.key === 'Enter' && this.picker === 'wheels' && this.open) {
                 event.preventDefault();
                 this.requestOpen(false);
                 this.returnFocus();
             }
         };
+        this.unreadableMessage = '{mode, select, single {Enter a time such as {example}.} other {Enter times such as {example}, separated by commas.}}';
         this.handleClear = () => {
             if (this.value !== '' && this.requestValue('')) {
                 this.announceChange();
@@ -242,7 +242,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         option-label: picker-option-label, option-text: picker-option-text"
       ?invalid=${this.resolvedFeedback !== ''}
       mode=${this.mode ?? nothing}
-      variant=${this.variant ?? nothing}
+      picker=${this.picker ?? nothing}
       disable-times=${this.disableTimes || nothing}
       manual
       label=${hostWords(this, slottedWords(this, ['label']) || this.label) || 'Time'}
@@ -410,6 +410,9 @@ __decorate([
     words,
     property({ attribute: 'now-label' })
 ], HelixHeadlessTimeInput.prototype, "nowLabel", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessTimeInput.prototype, "picker", void 0);
 __decorate([
     words,
     property()
@@ -450,16 +453,13 @@ __decorate([
     words,
     property({ attribute: 'unavailable-message' })
 ], HelixHeadlessTimeInput.prototype, "unavailableMessage", void 0);
-__decorate([
-    words,
-    property({ attribute: 'unreadable-message' })
-], HelixHeadlessTimeInput.prototype, "unreadableMessage", void 0);
 __decorate([
     state()
 ], HelixHeadlessTimeInput.prototype, "draft", void 0);
 __decorate([
-    property({ reflect: true })
-], HelixHeadlessTimeInput.prototype, "variant", void 0);
+    words,
+    property({ attribute: 'unreadable-message' })
+], HelixHeadlessTimeInput.prototype, "unreadableMessage", void 0);
 HelixHeadlessTimeInput = __decorate([
     customElement('helix-headless-time-input')
 ], HelixHeadlessTimeInput);