@fusion.dev/helix-headless 0.229.0 → 0.230.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/table/column/table-column.d.ts

@@ -57,6 +57,10 @@ export { edgeOf } from '../edge.js';
  * `separator` on its end edge, moved by dragging or with the arrow keys. In a
  * table with reorderable columns, each column has a grip that the table moves.
  *
+ * A sortable heading draws two chevrons after its words. The chevron for the
+ * current direction takes the heading's ink, so you can see which columns sort
+ * and which way the table is sorted.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Column header, Th
@@ -72,6 +76,9 @@ export { edgeOf } from '../edge.js';
  * @csspart grip-mark - The icon on the grip.
  * @csspart resizer - The edge that is dragged to change the width, when the column is resizable.
  * @csspart sort - The button that a sortable heading renders as.
+ * @csspart sort-down - The lower chevron of `sort-mark`, which shows a descending sort.
+ * @csspart sort-mark - The two chevrons on a sortable heading. To remove them, set `display: none` on this part.
+ * @csspart sort-up - The upper chevron of `sort-mark`, which shows an ascending sort.
  *
  * @cssstate sorted-ascending - While the table is sorted by this column, smallest first.
  * @cssstate sorted-descending - While the table is sorted by this column, largest first.

package/dist/table/column/table-column.js

@@ -182,7 +182,10 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
             </svg>
           </button>`
             : nothing}${this.canSort
-            ? html `<button part="sort" type="button" tabindex=${control} aria-description=${this.sortWords || nothing}><slot></slot></button>`
+            ? html `<button part="sort" type="button" tabindex=${control} aria-description=${this.sortWords || nothing}><slot></slot><svg aria-hidden="true" fill="none" part="sort-mark" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.9" viewBox="0 0 18 18">
+            <path d="M5.5 7.2 9 3.7l3.5 3.5" part="sort-up" />
+            <path d="M5.5 10.8 9 14.3l3.5-3.5" part="sort-down" />
+          </svg></button>`
             : html `<slot></slot>`}${this.resizable
             ? html `<span
             part="resizer"

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);

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

@@ -9,7 +9,7 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * @description
  * Shows the times at each `step` as a `Listbox`, which provides the keyboard
  * behavior, typeahead, scrolling into view, and announcements for a set of
- * options. `variant="wheels"` shows a column each for the hour, the minute, and
+ * options. `picker="wheels"` shows a column each for the hour, the minute, and
  * the meridiem, and one for the second with `seconds`. Left and Right move
  * between the wheels, and Tab does too.
  *
@@ -257,7 +257,7 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * separate "from" and "to" control, is two answers to what a product asks as
      * one, and it makes the between part impossible to show.
      *
-     * **Neither works on wheels and the variant falls back.** A range on
+     * **Neither works on wheels and the picker falls back.** A range on
      * wheels is two sets of wheels, which is two controls; a multiple is a set,
      * and a wheel has exactly one value by construction. Rather than draw
      * something that cannot say what it holds, `wheels` renders as a list
@@ -269,16 +269,39 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * `show-now`.
      */
     nowLabel: string;
+    /**
+     * Shows the times as one `list`, or as `wheels` with a column for each part
+     * of the time.
+     *
+     * `list` is the default and offers whole times, which is what a product with
+     * opening hours or slots actually has. `wheels` splits them into an hour, a
+     * minute and, where the locale uses one, a meridiem: three short columns
+     * instead of ninety-six rows, and the only way to reach `23:45` without
+     * scrolling most of a day.
+     *
+     * The trade is that a wheel cannot say which *combinations* are on offer. A
+     * list of half hours from nine to five is seventeen rows and every one of them
+     * is a time the product has; the same thing as columns is an hour column and a
+     * minute column, and nothing in either says the two are only valid together.
+     * The bounds are still enforced, so a reader can be refused after the fact,
+     * which is worse than not being offered it.
+     *
+     * So: `list` where the set is the point, `wheels` where any time is allowed
+     * and the range is a whole day.
+     *
+     * **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';
     /**
      * The validation message for a time after `max`. `{max}` is replaced with
      * `max`, written in `locale`.
      */
     rangeOverflowMessage: string;
-    /**
-     * The validation message for a time before `min`. `{min}` is replaced with
-     * `min`, written in `locale`.
-     */
-    rangeUnderflowMessage: string;
     /**
      * Every time on offer, as seconds since midnight.
      *
@@ -428,6 +451,13 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * rather than wrong, which is why it can be left in.
      */
     reveal(): void;
+    /**
+     * The validation message for a time before `min`. `{min}` is replaced with
+     * `min`, written in `locale`.
+     */
+    rangeUnderflowMessage: string;
+    /** Refuses every change while read-only. See `readOnly`. */
+    requestValue(next: string): boolean;
     /**
      * Blocks changes to the time. The value is still submitted with the form.
      *
@@ -442,8 +472,6 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * else set needs.
      */
     readOnly: boolean;
-    /** Refuses every change while read-only. See `readOnly`. */
-    requestValue(next: string): boolean;
     /**
      * Stops the form from submitting while no time is chosen.
      */
@@ -506,10 +534,6 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * The validation message for a time that `disable-times` bars.
      */
     unavailableMessage: string;
-    /**
-     * The validation message for a required time picker with no time chosen.
-     */
-    valueMissingMessage: string;
     /**
      * What is wrong with a time the picker can read, as a validity flag and a
      * message, or nothing.
@@ -520,33 +544,9 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      */
     private fault;
     /**
-     * Shows the times as one `list`, or as `wheels` with a column for each part
-     * of the time.
-     *
-     * `list` is the default and offers whole times, which is what a product with
-     * opening hours or slots actually has. `wheels` splits them into an hour, a
-     * minute and, where the locale uses one, a meridiem: three short columns
-     * instead of ninety-six rows, and the only way to reach `23:45` without
-     * scrolling most of a day.
-     *
-     * The trade is that a wheel cannot say which *combinations* are on offer. A
-     * list of half hours from nine to five is seventeen rows and every one of them
-     * is a time the product has; the same thing as columns is an hour column and a
-     * minute column, and nothing in either says the two are only valid together.
-     * The bounds are still enforced, so a reader can be refused after the fact,
-     * which is worse than not being offered it.
-     *
-     * So: `list` where the set is the point, `wheels` where any time is allowed
-     * and the range is a whole day.
-     *
-     * **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 validation message for a required time picker with no time chosen.
      */
-    variant?: 'list' | 'wheels';
+    valueMissingMessage: string;
     /**
      * Reports "required and empty", or clears it.
      *
@@ -679,7 +679,7 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
     private readonly handleColumnsKeydown;
     private renderSpinner;
     /**
-     * The flat list of times, for the variant that is not wheels, behind a seam the styled tier can move.
+     * The flat list of times, for the picker that is not wheels, behind a seam the styled tier can move.
      *
      * A method rather than a fragment inline, so a tier above can render its own,
      * wrap this one, pass it a property the base does not know about, or leave it

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

@@ -21,7 +21,6 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
         this.min = '00:00';
         this.nowLabel = 'Now';
         this.rangeOverflowMessage = 'Choose a time at or before {max}.';
-        this.rangeUnderflowMessage = 'Choose a time at or after {min}.';
         this.handleListInput = (event) => {
             event.stopPropagation();
         };
@@ -75,6 +74,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
             }
             this.requestValue(this.valueFor(nearest));
         };
+        this.rangeUnderflowMessage = 'Choose a time at or after {min}.';
         this.readOnly = false;
         this.required = false;
         this.seconds = false;
@@ -235,7 +235,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
         if (this.mode !== undefined) {
             return;
         }
-        if (this.variant !== 'wheels') {
+        if (this.picker !== 'wheels') {
             this.highlightNearest();
             this.partNamed('list')?.reveal?.();
             return;
@@ -385,7 +385,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
     updated(changed) {
         super.updated(changed);
         this.reportRequired();
-        if (this.variant === 'wheels') {
+        if (this.picker === 'wheels') {
             this.reveal();
             void this.revealWhenSettled();
         }
@@ -499,7 +499,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
     </${this.tag('listbox')}>`;
     }
     render() {
-        if (this.variant === 'wheels' && this.mode === undefined) {
+        if (this.picker === 'wheels' && this.mode === undefined) {
             return html `${this.renderSlottedLabel()}${this.renderSpinner()}${this.renderNow()}${this.renderHint()}${this.renderPickerFeedback()}`;
         }
         return html `${this.renderSlottedLabel()}${this.renderList()}${this.renderNow()}${this.renderHint()}${this.renderPickerFeedback()}`;
@@ -573,17 +573,20 @@ __decorate([
     words,
     property({ attribute: 'now-label' })
 ], HelixHeadlessTimePicker.prototype, "nowLabel", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessTimePicker.prototype, "picker", void 0);
 __decorate([
     words,
     property({ attribute: 'range-overflow-message' })
 ], HelixHeadlessTimePicker.prototype, "rangeOverflowMessage", void 0);
+__decorate([
+    state()
+], HelixHeadlessTimePicker.prototype, "previewed", void 0);
 __decorate([
     words,
     property({ attribute: 'range-underflow-message' })
 ], HelixHeadlessTimePicker.prototype, "rangeUnderflowMessage", void 0);
-__decorate([
-    state()
-], HelixHeadlessTimePicker.prototype, "previewed", void 0);
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessTimePicker.prototype, "readOnly", void 0);
@@ -617,9 +620,6 @@ __decorate([
     words,
     property({ attribute: 'value-missing-message' })
 ], HelixHeadlessTimePicker.prototype, "valueMissingMessage", void 0);
-__decorate([
-    property({ reflect: true })
-], HelixHeadlessTimePicker.prototype, "variant", void 0);
 __decorate([
     state()
 ], HelixHeadlessTimePicker.prototype, "hintSlotted", void 0);