@fusion.dev/helix-headless 0.147.0 → 0.149.0

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, HelixElement, IndicatorController, KeyboardNavigationController, MixinControllerActive, whenHydrated, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixElement, IndicatorController, KeyboardNavigationController, MixinControllerActive, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessTabPanel } from '../panel/tab-panel.js';
@@ -40,6 +40,7 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
             this.indicator.place();
         };
     }
+    static { this.words = 'helix-tabs'; }
     get tabs() {
         return [...this.children].filter((child) => child instanceof HelixHeadlessTab);
     }
@@ -111,6 +112,7 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
     }
 };
 __decorate([
+    words,
     property()
 ], HelixHeadlessTabs.prototype, "label", void 0);
 __decorate([

package/dist/tag/group/tag-group.d.ts

@@ -46,6 +46,11 @@ export type TagSelectionMode = SelectionMode;
  * @csspart empty - Holds the `empty` slot while the group has no tags, rendered only then. Takes focus when the last tag is removed.
  */
 export declare class HelixHeadlessTagGroup extends HelixElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-tag-group': { emptyLabel: 'Keine Schlagwörter' } })`.
+     */
+    static words: string;
     /**
      * The words the group shows and says once its last tag is removed, where
      * nothing is in the `empty` slot.

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { commaList, customElement, deepActiveElement, deepContains, HelixBeforeChangeEvent, HelixElement, hostAria, KeyboardNavigationController, pressedValue, prunedValue, requestChange, rovingStop, slottedWords, typeaheadByWords, whenHydrated, } from '@fusion.dev/helix-core';
+import { commaList, customElement, deepActiveElement, deepContains, focusItemOf, HelixElement, hostAria, KeyboardNavigationController, pressedValue, prunedValue, requestValue, rovingStop, slottedWords, typeaheadByWords, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessTag } from '../root/tag-root.js';
@@ -92,6 +92,7 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
             }
         };
     }
+    static { this.words = 'helix-tag-group'; }
     get written() {
         return typeof this.value === 'string'
             ? this.value
@@ -107,14 +108,11 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
         return this.tags.filter((tag) => !tag.disabled);
     }
     navigable(tag) {
-        return {
-            contains: (node) => tag.contains(node),
+        return focusItemOf(tag, {
             disabled: tag.disabled,
-            focusItem: () => tag.focusItem(),
-            select: () => { },
-            selected: false,
+            focus: () => tag.focusItem(),
             words: tag.words,
-        };
+        });
     }
     valueFor(tag) {
         return tag.value || slottedWords(tag, ['start', '']);
@@ -146,14 +144,8 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
         if (mode === 'none' || tag.disabled) {
             return;
         }
-        requestChange({
-            apply: (value) => {
-                this.value = value;
-                this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-            },
-            event: (value) => new HelixBeforeChangeEvent({ value }),
-            host: this,
-            next: pressedValue(mode, this.written, this.valueFor(tag)),
+        requestValue(this, pressedValue(mode, this.written, this.valueFor(tag)), (value) => {
+            this.value = value;
         });
     }
     connectedCallback() {
@@ -191,6 +183,7 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
     }
 };
 __decorate([
+    words,
     property({ attribute: 'empty-label' })
 ], HelixHeadlessTagGroup.prototype, "emptyLabel", void 0);
 __decorate([

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

@@ -50,13 +50,26 @@ declare const HelixHeadlessTag_base: (new (...args: any[]) => import("@fusion.de
  * @cssstate selected - The tag is selected in a `Tag.Group` that selects.
  */
 export declare class HelixHeadlessTag extends HelixHeadlessTag_base {
-    dismissLabel: string;
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-tag': { dismissLabel: '{label} entfernen' } })`.
+     */
+    static words: string;
     /**
      * Takes the tag out of reach: its link and its remove button stop
      * answering, and in a `Tag.Group` the arrow keys pass over it and it cannot
      * be selected or removed.
      */
     disabled: boolean;
+    /**
+     * The remove button's name, read by screen readers, with `{label}` for the
+     * tag's own words.
+     *
+     * "Remove" rather than the mixin's "Dismiss": a tag is taken out of a set,
+     * which is a different act from closing a message. One sentence with the
+     * tag's words in it, so a translation puts them where its language does.
+     */
+    dismissLabel: string;
     /**
      * Whether the tag holds its group's tab stop.
      *

package/dist/tag/root/tag-root.js

@@ -4,17 +4,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, drawDismiss, drawDismissGlyph, HelixElement, hostAria, MixinDismissible, slottedWords, } from '@fusion.dev/helix-core';
+import { customElement, drawDismiss, drawDismissGlyph, formatWords, HelixElement, hostAria, MixinDismissible, slottedWords, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessTag = class HelixHeadlessTag extends MixinDismissible(HelixElement) {
     constructor() {
         super(...arguments);
-        this.dismissLabel = 'Remove';
         this.disabled = false;
+        this.dismissLabel = 'Remove {label}';
         this.href = '';
         this.value = '';
     }
+    static { this.words = 'helix-tag'; }
     get words() {
         return this.childrenKnown ? slottedWords(this, ['start', '']) : '';
     }
@@ -45,13 +46,11 @@ let HelixHeadlessTag = class HelixHeadlessTag extends MixinDismissible(HelixElem
         this.toggleState('selected', this.selected === true);
     }
     get removeName() {
-        const words = this.words;
-        if (this.dismissLabel.includes('{label}')) {
-            return this.dismissLabel.replace('{label}', words).trim();
+        const { dismissLabel, words } = this;
+        if (dismissLabel.includes('{label}')) {
+            return formatWords(this, 'dismissLabel', { label: words }).trim();
         }
-        return words === '' || this.dismissLabel.includes(words)
-            ? this.dismissLabel
-            : `${this.dismissLabel} ${words}`;
+        return words === '' || dismissLabel.includes(words) ? dismissLabel : `${dismissLabel} ${words}`;
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -95,6 +94,10 @@ let HelixHeadlessTag = class HelixHeadlessTag extends MixinDismissible(HelixElem
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessTag.prototype, "disabled", void 0);
+__decorate([
+    words,
+    property({ attribute: 'dismiss-label' })
+], HelixHeadlessTag.prototype, "dismissLabel", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessTag.prototype, "focusable", void 0);

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

@@ -60,6 +60,11 @@ declare const HelixHeadlessTextarea_base: (new (...args: any[]) => import("@fusi
  * @cssstate invalid - The control has an error to show, from the browser's validation, `validate`, or your `feedback`.
  */
 export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-textarea': { clearLabel: 'Leeren' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
     /** Typed or dragged, so every edit is announced. See `announcesInput`. */
     protected readonly announcesInput = true;

package/dist/textarea/root/textarea-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, applyOwnRule, customElement, drawIcon, HelixClearEvent, HelixFormElement, holdCaret, isRtl, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
+import { AriaForwardController, applyOwnRule, customElement, drawIcon, HelixClearEvent, HelixFormElement, holdCaret, isRtl, MixinControllerValue, MixinField, restoreValue, words, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -49,6 +49,7 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
         this.rows = 3;
         this.wrap = 'soft';
     }
+    static { this.words = 'helix-textarea'; }
     static { this.shadowRootOptions = {
         ...HelixFormElement.shadowRootOptions,
         delegatesFocus: true,
@@ -223,6 +224,7 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessTextarea.prototype, "clearable", void 0);
 __decorate([
+    words,
     property({ attribute: 'clear-label' })
 ], HelixHeadlessTextarea.prototype, "clearLabel", void 0);
 __decorate([

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

@@ -116,6 +116,11 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @cssstate open - While the clock is open.
  */
 export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-time-input': { triggerLabel: 'Uhrzeit auswählen' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
     /**
      * What the browser may autofill here, as one of the platform's own tokens.
@@ -147,7 +152,7 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * Shoelace and Web Awesome read it, then the runtime's own.
      */
     locale: string;
-    /** The locale the words are written in: `locale`, or the page's `lang`. */
+    /** The locale the words and times are written in: `locale`, or the page's `lang`. */
     private get language();
     /**
      * Latest time that can be chosen, as `HH:mm`.
@@ -174,20 +179,20 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * The message shown when a range holds more than two times.
      *
      * **Every sentence a control raises in the browser's bubble is a property**,
-     * so a form in another language speaks it. Absent is the control's own
-     * sentence, in English.
+     * so a form in another language speaks it. Unset is the sentence registered
+     * for the page's language, then the English.
      */
-    rangeLengthMessage?: string;
+    rangeLengthMessage: string;
     /**
      * The message shown when a time is after `max`, with `{max}` filled in as
      * the field displays it.
      */
-    rangeOverflowMessage?: string;
+    rangeOverflowMessage: string;
     /**
      * The message shown when a time is before `min`, with `{min}` filled in as
      * the field displays it.
      */
-    rangeUnderflowMessage?: string;
+    rangeUnderflowMessage: string;
     /**
      * The name of the button that removes one time, with `{name}` filled in.
      *
@@ -223,7 +228,7 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
     /**
      * The message shown when `disable-times` bars a time.
      */
-    unavailableMessage?: string;
+    unavailableMessage: string;
     /** Every time in the value, which may hold more than one. */
     private get held();
     /**
@@ -331,6 +336,8 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * consumer gets an inert unknown element and no mark whatsoever.
      */
     protected renderTrigger(): TemplateResult;
+    /** The line of text the times are typed into, where the field shows no segments. */
+    private renderControl;
     protected render(): TemplateResult;
     /**
      * The value as a `Date` on January 1, 1970 UTC, or `null` while there is no

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, valueAsTime as asTime, clockLocale, customElement, fillTemplate, timeAsValue as fromTime, HelixFormElement, isClockValue, localeOf, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinSegmentedField, MixinTokens, timeFault, writeClock, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsTime as asTime, clockLocale, customElement, formatWords, timeAsValue as fromTime, HelixFormElement, handedLocale, isClockValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinSegmentedField, MixinTokens, timeFault, words, wordsLocale, writeClock, } from '@fusion.dev/helix-core';
 import { clock } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -25,11 +25,15 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         this.max = '23:59';
         this.min = '00:00';
         this.placeholder = 'HH:mm';
+        this.rangeLengthMessage = 'A range is two times.';
+        this.rangeOverflowMessage = 'Choose a time at or before {max}.';
+        this.rangeUnderflowMessage = 'Choose a time at or after {min}.';
         this.removeLabel = 'Remove {name}';
         this.seconds = false;
         this.step = 15;
         this.timeStyle = 'local';
         this.triggerLabel = 'Choose a time';
+        this.unavailableMessage = 'Choose a time that is available.';
         this.draft = '';
         this.handleDraftKey = (event) => {
             if (this.mode !== 'multiple') {
@@ -88,8 +92,9 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
             }
         };
     }
+    static { this.words = 'helix-time-input'; }
     get language() {
-        return localeOf(this, this.locale);
+        return wordsLocale(this);
     }
     get held() {
         return this.value
@@ -157,7 +162,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         if (faults.includes('rangeUnderflow')) {
             return [
                 'rangeUnderflow',
-                fillTemplate(this.rangeUnderflowMessage || 'Choose a time at or after {min}.', {
+                formatWords(this, 'rangeUnderflowMessage', {
                     min: writeClock(this.min, clockLocale(this.language, this.hourCycle), this.seconds),
                 }),
             ];
@@ -165,16 +170,16 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         if (faults.includes('rangeOverflow')) {
             return [
                 'rangeOverflow',
-                fillTemplate(this.rangeOverflowMessage || 'Choose a time at or before {max}.', {
+                formatWords(this, 'rangeOverflowMessage', {
                     max: writeClock(this.max, clockLocale(this.language, this.hourCycle), this.seconds),
                 }),
             ];
         }
         if (faults.includes('unavailable')) {
-            return this.unavailableMessage || 'Choose a time that is available.';
+            return this.unavailableMessage;
         }
         if (this.mode === 'range' && held.length > 2) {
-            return this.rangeLengthMessage || 'A range is two times.';
+            return this.rangeLengthMessage;
         }
         return '';
     }
@@ -209,7 +214,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
       manual
       label=${this.label || 'Time'}
       hour-cycle=${this.hourCycle ?? nothing}
-      locale=${this.language || nothing}
+      locale=${handedLocale(this) || nothing}
       max=${this.max}
       min=${this.min}
       ?seconds=${this.seconds}
@@ -225,7 +230,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
                   part="time"
       exportparts="cell: time-cell, dismiss: time-dismiss, dismiss-mark: time-dismiss-mark, label: time-label, link: time-link, start: time-start"
                   dismissible
-                  dismiss-label=${fillTemplate(this.removeLabel, { name: this.written(at) })}
+                  dismiss-label=${formatWords(this, 'removeLabel', { name: this.written(at) })}
                   ?disabled=${this.isDisabled}
                   @helix-dismiss=${(event) => {
             event.stopPropagation();
@@ -239,36 +244,35 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         ${unsafeSVG(clock.content)}
       </svg></slot>`;
     }
+    renderControl() {
+        return html `<input
+      part="control"
+      id=${this.controlId}
+      type="text"
+      .value=${this.display}
+      name=${this.name || nothing}
+      placeholder=${this.mode === 'multiple' && this.held.length > 0 ? nothing : this.placeholder || nothing}
+      autocomplete=${this.autocomplete || nothing}
+      aria-describedby=${this.describedBy ?? nothing}
+      aria-invalid=${this.invalidity ?? nothing}
+      ?disabled=${this.isDisabled}
+      ?readonly=${this.readOnly}
+      ?required=${this.required}
+      @blur=${this.handleBlur}
+      @change=${this.handleCommit}
+      @focus=${this.handleFocus}
+      @input=${this.handleInput}
+      @keydown=${this.handleDraftKey}
+      @keypress=${this.handleKeypress}
+    />`;
+    }
     render() {
         return html `${this.renderLabel()}
       <div part="field" @keydown=${this.handleKeydown}>
         ${this.mode === 'multiple'
             ? this.renderTokenRow(this.shownTimes.map((at) => this.renderTag(at)), this.restCount)
             : nothing}
-        ${this.segmentsShown
-            ? this.renderSegments()
-            : html `<input
-                part="control"
-                id=${this.controlId}
-                type="text"
-                .value=${this.display}
-                name=${this.name || nothing}
-                placeholder=${this.mode === 'multiple' && this.held.length > 0
-                ? nothing
-                : this.placeholder || nothing}
-                autocomplete=${this.autocomplete || nothing}
-                aria-describedby=${this.describedBy ?? nothing}
-                aria-invalid=${this.invalidity ?? nothing}
-                ?disabled=${this.isDisabled}
-                ?readonly=${this.readOnly}
-                ?required=${this.required}
-                @blur=${this.handleBlur}
-                @change=${this.handleCommit}
-                @focus=${this.handleFocus}
-                @input=${this.handleInput}
-                @keydown=${this.handleDraftKey}
-                @keypress=${this.handleKeypress}
-              />`}
+        ${this.segmentsShown ? this.renderSegments() : this.renderControl()}
         <button
           part="trigger"
           type="button"
@@ -335,18 +339,23 @@ __decorate([
     property({ reflect: true })
 ], HelixHeadlessTimeInput.prototype, "mode", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessTimeInput.prototype, "placeholder", void 0);
 __decorate([
+    words,
     property({ attribute: 'range-length-message' })
 ], HelixHeadlessTimeInput.prototype, "rangeLengthMessage", void 0);
 __decorate([
+    words,
     property({ attribute: 'range-overflow-message' })
 ], HelixHeadlessTimeInput.prototype, "rangeOverflowMessage", void 0);
 __decorate([
+    words,
     property({ attribute: 'range-underflow-message' })
 ], HelixHeadlessTimeInput.prototype, "rangeUnderflowMessage", void 0);
 __decorate([
+    words,
     property({ attribute: 'remove-label' })
 ], HelixHeadlessTimeInput.prototype, "removeLabel", void 0);
 __decorate([
@@ -359,9 +368,11 @@ __decorate([
     property({ attribute: 'time-style' })
 ], HelixHeadlessTimeInput.prototype, "timeStyle", void 0);
 __decorate([
+    words,
     property({ attribute: 'trigger-label' })
 ], HelixHeadlessTimeInput.prototype, "triggerLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'unavailable-message' })
 ], HelixHeadlessTimeInput.prototype, "unavailableMessage", void 0);
 __decorate([

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

@@ -82,17 +82,26 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * @csspart option-label - The time's label.
  * @csspart option-text - The label and the caption, as one column.
  *
+ * @cssstate blank - While no time is chosen.
  * @cssstate invalid - While `invalid` is set or `feedback` says what is wrong.
  */
 export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-time-picker': { label: 'Uhrzeit' } })`.
+     */
+    static words: string;
     /**
      * The validation message for a value that is not a time.
      *
      * **Every sentence a control raises in the browser's bubble is a property**,
      * named for the validity flag it reports, so a form in another language
-     * speaks it. Absent is the control's own sentence, in English.
+     * speaks it. Unset is the sentence registered for the page's language, then
+     * the English. `{shape}` is how a time is written, `HH:mm` or `HH:mm:ss`, and
+     * `{mode}` is `single`, `range` or `multiple`, so each can have its own
+     * sentence.
      */
-    badInputMessage?: string;
+    badInputMessage: string;
     /**
      * Times that cannot be chosen, as `HH:mm`, separated by commas or spaces.
      *
@@ -192,12 +201,12 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * The validation message for a time after `max`. `{max}` is replaced with
      * `max`, written in `locale`.
      */
-    rangeOverflowMessage?: string;
+    rangeOverflowMessage: string;
     /**
      * The validation message for a time before `min`. `{min}` is replaced with
      * `min`, written in `locale`.
      */
-    rangeUnderflowMessage?: string;
+    rangeUnderflowMessage: string;
     /**
      * Every time on offer, as seconds since midnight.
      *
@@ -356,15 +365,15 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
     /**
      * The validation message for a time that `step` skips.
      */
-    stepMismatchMessage?: string;
+    stepMismatchMessage: string;
     /**
      * The validation message for a time that `disable-times` bars.
      */
-    unavailableMessage?: string;
+    unavailableMessage: string;
     /**
      * The validation message for a required time picker with no time chosen.
      */
-    valueMissingMessage?: string;
+    valueMissingMessage: string;
     /**
      * What is wrong with a time the picker can read, as a validity flag and a
      * message, or nothing.