@fusion.dev/helix-headless 0.0.0-dev → 0.0.2

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

@@ -91,27 +91,31 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * What the browser may autofill here, as one of the platform's own tokens.
      *
      * Empty leaves the attribute off, which is the browser's default and is what
-     * lets autofill work at all. This used to be hardcoded `off`, so a reader
-     * could never have a birthday or a postal code filled in for them and a
-     * consumer had no way to ask for it. See 295.
+     * lets autofill work at all.
      */
     autocomplete: string;
     /**
-     * Whether the panel is one list of times or a column each.
+     * Language tag the times are written in.
      *
-     * `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. `helix-time-picker` carries the longer note on the trade.
+     * Absent uses the runtime's own.
+     */
+    locale: string;
+    /**
+     * Latest time that can be chosen, as `HH:mm`.
+     */
+    max: string;
+    /**
+     * How many times are shown as tags before the rest are counted, in `multiple`.
      *
-     * **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.
+     * `0` is all of them, and is the default, for the reason Date Input gives: how
+     * many fit depends on the width of the field and the length of what is in it,
+     * and this element knows neither.
      */
-    variant?: 'list' | 'wheels';
+    maxTags: number;
+    /**
+     * Earliest time that can be chosen, as `HH:mm`.
+     */
+    min: string;
     /**
      * How many times can be held at once.
      *
@@ -122,25 +126,27 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      */
     mode?: 'multiple' | 'range';
     /**
-     * How many times are shown as tags before the rest are counted, in `multiple`.
+     * What the field says before a time is in it.
+     */
+    placeholder: string;
+    /**
+     * Whether the control refuses changes while still submitting its value.
      *
-     * `0` is all of them, and is the default, for the reason Date Input gives: how
-     * many fit depends on the width of the field and the length of what is in it,
-     * and this element knows neither.
+     * **Enforced by refusing every request in one place**, which is the seam this
+     * component already has: `requestValue` is what every path here comes through,
+     * and gating it once is what stops the next call site from being written
+     * without the check.
+     *
+     * Not `disabled`, which is the confusion worth naming: a disabled control
+     * submits nothing and leaves the tab order, and a read-only one submits its
+     * value and stays reachable, which is what a form showing a value somebody
+     * else set needs.
      */
-    maxTags: number;
+    readOnly: boolean;
     /**
      * How far apart the offered times are, in minutes.
      */
     step: number;
-    /**
-     * Earliest time that can be chosen, as `HH:mm`.
-     */
-    min: string;
-    /**
-     * Latest time that can be chosen, as `HH:mm`.
-     */
-    max: string;
     /**
      * Whether the field writes the time out, or holds the value as it is.
      *
@@ -150,16 +156,6 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * never something this element would refuse to read back.
      */
     timeStyle: 'iso' | 'local';
-    /**
-     * Language tag the times are written in.
-     *
-     * Absent uses the runtime's own.
-     */
-    locale: string;
-    /**
-     * What the field says before a time is in it.
-     */
-    placeholder: string;
     /**
      * Accessible name for the control that opens the list.
      */
@@ -217,10 +213,9 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * the focus and it is the only thing that can know so. Cleared synchronously,
      * since `focus()` dispatches before it returns.
      *
-     * Reasoned rather than measured, and Date Input carries the long version of
-     * why: `focus()` dispatches no event in an unfocused document, which is what
-     * both the test runtime and the browser pane here are, so the path cannot be
-     * exercised from either.
+     * The path cannot be exercised from a spec: `focus()` dispatches no event in
+     * an unfocused document, which is what both the test runtime and the browser
+     * pane here are.
      */
     private returning;
     private returnFocus;
@@ -240,19 +235,21 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
     /** Escape shuts the list without moving the time. */
     private readonly handleKeydown;
     /**
-     * Whether the control refuses changes while still submitting its value.
+     * Whether the panel is one list of times or a column each.
      *
-     * **Enforced by refusing every request in one place**, which is the seam this
-     * component already has: `requestValue` is what every path here comes through,
-     * and gating it once is what stops the next call site from being written
-     * without the check.
+     * `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. `helix-time-picker` carries the longer note on the trade.
      *
-     * Not `disabled`, which is the confusion worth naming: a disabled control
-     * submits nothing and leaves the tab order, and a read-only one submits its
-     * value and stays reachable, which is what a form showing a value somebody
-     * else set needs.
+     * **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.
      */
-    readOnly: boolean;
+    variant?: 'list' | 'wheels';
     /** Refuses every change while read-only. See `readOnly`. */
     requestValue(next: string): boolean;
     protected firstUpdated(changed: PropertyValues): void;
@@ -262,23 +259,17 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
     /**
      * The clock the field opens, 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
-     * out, without reimplementing the whole template to do any of them. The tag is
-     * interpolated rather than written, so `tier` resolves it: this renders the
-     * headless element, and a styled subclass that sets `tier` renders the styled one
-     * from the same template.
+     * A method rather than an inline fragment, so a tier above can replace or
+     * wrap it without reimplementing the template. The tag is interpolated rather
+     * than written, so `tier` resolves it to this tier's own element.
      */
     protected renderPicker(): TemplateResult;
     /**
      * One chosen time, as a tag, 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
-     * out, without reimplementing the whole template to do any of them. The tag is
-     * interpolated rather than written, so `tier` resolves it: this renders the
-     * headless element, and a styled subclass that sets `tier` renders the styled one
-     * from the same template.
+     * A method rather than an inline fragment, so a tier above can replace or
+     * wrap it without reimplementing the template. The tag is interpolated rather
+     * than written, so `tier` resolves it to this tier's own element.
      */
     protected renderTag(at: string): TemplateResult;
     /**
@@ -287,15 +278,14 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * Slot fallback, so a consumer replaces it by slotting; and a method, so the
      * tier above replaces it by overriding.
      *
-     * **A named import rather than `<helix-icon>`, and that is a reversal.** The
-     * element looked like the tidier of the two and loses on three counts.
+     * **A named import rather than `<helix-icon>`**, on three counts.
      * `helix-icon` indexes the whole icon map at runtime, `icons[this.name]`, and
      * no bundler can shake a runtime lookup, so every consumer of any component
      * that renders one ships all 50kB of path data; a named import ships one
      * path. The import is checked when the package compiles, where a `name`
-     * string is checked only when `check:icons` runs. And `helix-icon` is not
+     * string is checked only by a later name lookup. And `helix-icon` is not
      * registered on the headless tier at all, which registers `helix-headless-icon`,
-     * so a headless consumer got an inert unknown element and no mark whatsoever.
+     * so a headless consumer gets an inert unknown element and no mark whatsoever.
      */
     protected renderTrigger(): TemplateResult;
     protected render(): TemplateResult;

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

@@ -113,11 +113,19 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinControlle
          * What the browser may autofill here, as one of the platform's own tokens.
          *
          * Empty leaves the attribute off, which is the browser's default and is what
-         * lets autofill work at all. This used to be hardcoded `off`, so a reader
-         * could never have a birthday or a postal code filled in for them and a
-         * consumer had no way to ask for it. See 295.
+         * lets autofill work at all.
          */
         this.autocomplete = '';
+        /**
+         * Language tag the times are written in.
+         *
+         * Absent uses the runtime's own.
+         */
+        this.locale = '';
+        /**
+         * Latest time that can be chosen, as `HH:mm`.
+         */
+        this.max = '23:59';
         /**
          * How many times are shown as tags before the rest are counted, in `multiple`.
          *
@@ -126,18 +134,32 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinControlle
          * and this element knows neither.
          */
         this.maxTags = 0;
-        /**
-         * How far apart the offered times are, in minutes.
-         */
-        this.step = 15;
         /**
          * Earliest time that can be chosen, as `HH:mm`.
          */
         this.min = '00:00';
         /**
-         * Latest time that can be chosen, as `HH:mm`.
+         * What the field says before a time is in it.
          */
-        this.max = '23:59';
+        this.placeholder = 'HH:mm';
+        /**
+         * Whether the control refuses changes while still submitting its value.
+         *
+         * **Enforced by refusing every request in one place**, which is the seam this
+         * component already has: `requestValue` is what every path here comes through,
+         * and gating it once is what stops the next call site from being written
+         * without the check.
+         *
+         * Not `disabled`, which is the confusion worth naming: a disabled control
+         * submits nothing and leaves the tab order, and a read-only one submits its
+         * value and stays reachable, which is what a form showing a value somebody
+         * else set needs.
+         */
+        this.readOnly = false;
+        /**
+         * How far apart the offered times are, in minutes.
+         */
+        this.step = 15;
         /**
          * Whether the field writes the time out, or holds the value as it is.
          *
@@ -147,16 +169,6 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinControlle
          * never something this element would refuse to read back.
          */
         this.timeStyle = 'local';
-        /**
-         * Language tag the times are written in.
-         *
-         * Absent uses the runtime's own.
-         */
-        this.locale = '';
-        /**
-         * What the field says before a time is in it.
-         */
-        this.placeholder = 'HH:mm';
         /**
          * Accessible name for the control that opens the list.
          */
@@ -174,13 +186,8 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinControlle
              * part of it, and a press on it is not a press outside. Scoped to the
              * surface alone, `pointerdown` on the trigger closed the panel and the
              * trigger's own `toggleOpen` reopened it on the `click` that followed, so
-             * the panel could never be closed by the button that opened it. Measured
-             * across all five popover-bearing components: Menu, Popover and Tooltip
-             * already named their invoker; this one and its three siblings did not, and
-             * all four stayed open on a second press where Menu closed.
-             *
-             * `DismissController` documents this exact failure and takes a list for it.
-             * The list was the fix; using it was the part that did not happen here. */
+             * the panel could never be closed by the button that opened it.
+             * `DismissController` documents this failure and takes a list for it. */
             boundary: () => [
                 this.renderRoot?.querySelector('[part="surface"]'),
                 this.renderRoot?.querySelector('[part="trigger"]'),
@@ -268,10 +275,9 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinControlle
          * the focus and it is the only thing that can know so. Cleared synchronously,
          * since `focus()` dispatches before it returns.
          *
-         * Reasoned rather than measured, and Date Input carries the long version of
-         * why: `focus()` dispatches no event in an unfocused document, which is what
-         * both the test runtime and the browser pane here are, so the path cannot be
-         * exercised from either.
+         * The path cannot be exercised from a spec: `focus()` dispatches no event in
+         * an unfocused document, which is what both the test runtime and the browser
+         * pane here are.
          */
         this.returning = false;
         this.handleBlur = () => {
@@ -309,20 +315,6 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinControlle
                 this.returnFocus();
             }
         };
-        /**
-         * Whether the control refuses changes while still submitting its value.
-         *
-         * **Enforced by refusing every request in one place**, which is the seam this
-         * component already has: `requestValue` is what every path here comes through,
-         * and gating it once is what stops the next call site from being written
-         * without the check.
-         *
-         * Not `disabled`, which is the confusion worth naming: a disabled control
-         * submits nothing and leaves the tab order, and a read-only one submits its
-         * value and stays reachable, which is what a form showing a value somebody
-         * else set needs.
-         */
-        this.readOnly = false;
     }
     get control() {
         if (typeof this.renderRoot?.querySelector !== 'function') {
@@ -437,7 +429,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinControlle
     updated(changed) {
         super.updated(changed);
         // Every update, not only the ones that name `value`: see the note on
-        // `ColorInput.updated`, and the fifteen controls that already did this.
+        // `ColorInput.updated`.
         this.sync();
         /* Driven from here rather than from the toggle, because `open` is a property
            a consumer may set directly and the panel has to follow either way. The
@@ -467,12 +459,9 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinControlle
     /**
      * The clock the field opens, 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
-     * out, without reimplementing the whole template to do any of them. The tag is
-     * interpolated rather than written, so `tier` resolves it: this renders the
-     * headless element, and a styled subclass that sets `tier` renders the styled one
-     * from the same template.
+     * A method rather than an inline fragment, so a tier above can replace or
+     * wrap it without reimplementing the template. The tag is interpolated rather
+     * than written, so `tier` resolves it to this tier's own element.
      */
     renderPicker() {
         return html `<${this.tag('time-picker')}
@@ -507,12 +496,9 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinControlle
     /**
      * One chosen time, as a tag, 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
-     * out, without reimplementing the whole template to do any of them. The tag is
-     * interpolated rather than written, so `tier` resolves it: this renders the
-     * headless element, and a styled subclass that sets `tier` renders the styled one
-     * from the same template.
+     * A method rather than an inline fragment, so a tier above can replace or
+     * wrap it without reimplementing the template. The tag is interpolated rather
+     * than written, so `tier` resolves it to this tier's own element.
      */
     renderTag(at) {
         return html `<${this.tag('tag')}
@@ -534,15 +520,14 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinControlle
      * Slot fallback, so a consumer replaces it by slotting; and a method, so the
      * tier above replaces it by overriding.
      *
-     * **A named import rather than `<helix-icon>`, and that is a reversal.** The
-     * element looked like the tidier of the two and loses on three counts.
+     * **A named import rather than `<helix-icon>`**, on three counts.
      * `helix-icon` indexes the whole icon map at runtime, `icons[this.name]`, and
      * no bundler can shake a runtime lookup, so every consumer of any component
      * that renders one ships all 50kB of path data; a named import ships one
      * path. The import is checked when the package compiles, where a `name`
-     * string is checked only when `check:icons` runs. And `helix-icon` is not
+     * string is checked only by a later name lookup. And `helix-icon` is not
      * registered on the headless tier at all, which registers `helix-headless-icon`,
-     * so a headless consumer got an inert unknown element and no mark whatsoever.
+     * so a headless consumer gets an inert unknown element and no mark whatsoever.
      */
     renderTrigger() {
         return html `<slot name="trigger"><svg aria-hidden="true" fill="currentColor" part="trigger-icon" viewBox=${clock.viewBox}>
@@ -617,32 +602,32 @@ __decorate([
     property()
 ], HelixHeadlessTimeInput.prototype, "autocomplete", void 0);
 __decorate([
-    property({ reflect: true })
-], HelixHeadlessTimeInput.prototype, "variant", void 0);
+    property()
+], HelixHeadlessTimeInput.prototype, "locale", void 0);
 __decorate([
-    property({ reflect: true })
-], HelixHeadlessTimeInput.prototype, "mode", void 0);
+    property()
+], HelixHeadlessTimeInput.prototype, "max", void 0);
 __decorate([
     property({ attribute: 'max-tags', type: Number })
 ], HelixHeadlessTimeInput.prototype, "maxTags", void 0);
-__decorate([
-    property({ type: Number })
-], HelixHeadlessTimeInput.prototype, "step", void 0);
 __decorate([
     property()
 ], HelixHeadlessTimeInput.prototype, "min", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessTimeInput.prototype, "mode", void 0);
 __decorate([
     property()
-], HelixHeadlessTimeInput.prototype, "max", void 0);
+], HelixHeadlessTimeInput.prototype, "placeholder", void 0);
 __decorate([
-    property({ attribute: 'time-style' })
-], HelixHeadlessTimeInput.prototype, "timeStyle", void 0);
+    property({ attribute: 'readonly', reflect: true, type: Boolean })
+], HelixHeadlessTimeInput.prototype, "readOnly", void 0);
 __decorate([
-    property()
-], HelixHeadlessTimeInput.prototype, "locale", void 0);
+    property({ type: Number })
+], HelixHeadlessTimeInput.prototype, "step", void 0);
 __decorate([
-    property()
-], HelixHeadlessTimeInput.prototype, "placeholder", void 0);
+    property({ attribute: 'time-style' })
+], HelixHeadlessTimeInput.prototype, "timeStyle", void 0);
 __decorate([
     property({ attribute: 'trigger-label' })
 ], HelixHeadlessTimeInput.prototype, "triggerLabel", void 0);
@@ -653,8 +638,8 @@ __decorate([
     state()
 ], HelixHeadlessTimeInput.prototype, "draft", void 0);
 __decorate([
-    property({ attribute: 'readonly', reflect: true, type: Boolean })
-], HelixHeadlessTimeInput.prototype, "readOnly", void 0);
+    property({ reflect: true })
+], HelixHeadlessTimeInput.prototype, "variant", void 0);
 HelixHeadlessTimeInput = __decorate([
     customElement('helix-headless-time-input')
 ], HelixHeadlessTimeInput);