@fusion.dev/helix-headless 0.164.0 → 0.165.0

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

@@ -8,7 +8,7 @@ declare const HelixHeadlessNumberInput_base: (new (...args: any[]) => import("@f
  * A separate family from `Input`'s `type="number"`. It renders two buttons,
  * binds four keys `Input` does not, and handles clamping and stepping.
  *
- * The field is `type="text"` with `inputmode="decimal"`. Tested in a real
+ * The field is `type="text"` with an `inputmode` for a number. Tested in a real
  * browser, `type="number"` fails in three ways:
  * - Typing `12e` gives a `.value` of `""`, so the element cannot see what you
  *   typed. A `type="text"` field keeps `"12e"`.
@@ -16,7 +16,11 @@ declare const HelixHeadlessNumberInput_base: (new (...args: any[]) => import("@f
  *   to 4, when you only meant to scroll the page.
  * - `selectionStart` is `null`, so the caret cannot be managed.
  *
- * `inputmode="decimal"` keeps the numeric keypad on phones.
+ * `inputmode` keeps a numeric keypad on phones, chosen as React Aria's
+ * NumberField chooses it: a keypad with a minus key where the number can be
+ * negative, and one with a decimal separator where the format shows a
+ * fraction. An iPhone has no keypad with a minus key, so a field that can be
+ * negative takes the full keyboard there.
  *
  * `format-options` shows the number with `Intl.NumberFormat` in `locale`, as a
  * currency, a percent or a unit, while the field is not being edited. Focus
@@ -85,6 +89,8 @@ declare const HelixHeadlessNumberInput_base: (new (...args: any[]) => import("@f
  * @csspart increment-mark - The icon on the step up button.
  * @csspart label - The label above the field. It is also the grip you drag when `scrub` is set.
  *
+ * @cssstate at-max - The number is at `max`, so it cannot step up, as React Aria's NumberField says with `canIncrement`.
+ * @cssstate at-min - The number is at `min`, so it cannot step down.
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  * @cssstate scrubbing - The label is being dragged to change the value, under `scrub`, as Zag's scrubber says while it is held.
  */
@@ -209,12 +215,13 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * invalid, as it is in a native number field.
      *
      * Unset, a step moves by one, or by one percent under a percent format, and
-     * a typed number is rounded to the smallest amount `format-options` shows
-     * rather than to whole steps, as React Aria's NumberField does: a field
-     * showing dollars keeps the cents typed into it. Without `format-options`
-     * the grid is whole numbers, as in a native number field.
+     * a typed number is rounded to the smallest amount the format shows, as
+     * React Aria's NumberField does: a field showing dollars keeps the cents
+     * typed into it, and one with no `format-options` keeps three decimal
+     * places. `any` puts the number on no grid, as it does in a native number
+     * field: a step moves by one, and any number in range is valid.
      */
-    step?: number;
+    step?: number | 'any';
     /**
      * The message the browser shows when the number is off the step grid, with
      * `{below}` and `{above}` filled in with the nearest valid values, written in
@@ -251,16 +258,30 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * has no navigator and renders the spinbutton.
      */
     private readonly touchApple;
+    /** The phone the field is on, read once on the client, for the keypad it offers. */
+    private readonly phone;
+    /**
+     * The keypad a phone shows, as React Aria's NumberField chooses it.
+     * `numeric` on Android has a minus key and a decimal separator, and
+     * `decimal` has no minus key. On an iPhone neither has a minus key, so a
+     * number that can be negative takes the full keyboard. Measured before
+     * this: `decimal` with `min="-10"`, so a phone could not type the minus.
+     */
+    private get keypad();
     private get control();
     /** The value as a number, or `null` where the field holds nothing usable. */
     private get numeric();
     /** The grain last read off the format, with the locale and options it was read for. */
     private grainOf?;
+    /** The step as a number, or zero where it is unset or `any`. */
+    private get stepSize();
     /** How far one press moves: `step`, or the stride the format implies. */
     private get stride();
     /**
-     * The grid a typed number is rounded to: `step` where it is set, and
-     * otherwise the smallest amount the format shows, or whole numbers.
+     * The grid a typed number is rounded to: `step` where it is set, nothing
+     * where it is `any`, and otherwise the smallest amount the format shows.
+     * Measured before this: with no step and no format, `2,75` typed in German
+     * became 3 on blur.
      */
     private get grid();
     /**
@@ -323,6 +344,8 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * `handleStepperClick`.
      */
     private readonly handleStepperDown;
+    /** Keeps a pressed stepper from taking focus from the field. */
+    private readonly handleStepperMouseDown;
     /**
      * Ends a hold. The click that follows a release arrives in the same task,
      * so the press is forgotten after it.

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

@@ -12,6 +12,20 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { decimals, formatGrain, strideOf } from '../grain.js';
 const SCRUB_PITCH = 4;
 const SCRUB_FINE = 16;
+const PLAIN_FORMAT = {};
+const stepConverter = {
+    fromAttribute: (text) => {
+        if (text === null) {
+            return undefined;
+        }
+        return text.trim().toLowerCase() === 'any' ? 'any' : Number(text);
+    },
+    toAttribute: (step) => step === undefined ? undefined : String(step),
+};
+const phoneOf = (platform) => {
+    const agent = platform?.userAgent ?? '';
+    return /iPhone|iPod/u.test(agent) ? 'iphone' : /android/iu.test(agent) ? 'android' : '';
+};
 const PLAIN = /^-?(\d+(\.\d*)?|\.\d+)$/;
 const REPEAT_DELAY = 400;
 const REPEAT_EVERY = 60;
@@ -53,6 +67,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             this.editing = true;
         };
         this.touchApple = appleTouch(typeof navigator === 'undefined' ? undefined : navigator);
+        this.phone = phoneOf(typeof navigator === 'undefined' ? undefined : navigator);
         this.pressStepped = false;
         this.handleStepperDown = (event) => {
             if (event.button !== 0) {
@@ -60,6 +75,9 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             }
             const button = event.currentTarget;
             const up = button.getAttribute('part') === 'increment';
+            if (event.pointerType === 'mouse' && this.control && !this.control.matches(':focus')) {
+                this.control.focus({ preventScroll: true });
+            }
             clearTimeout(this.repeat);
             this.pressStepped = true;
             button.setPointerCapture?.(event.pointerId);
@@ -79,6 +97,9 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
                 this.repeat = setTimeout(step, REPEAT_DELAY);
             }
         };
+        this.handleStepperMouseDown = (event) => {
+            event.preventDefault();
+        };
         this.stopRepeat = () => {
             clearTimeout(this.repeat);
             this.repeat = undefined;
@@ -217,6 +238,18 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         }
         return formatNumber(parsed, this.locale, this.formatOptions);
     }
+    get keypad() {
+        const negative = this.min === undefined || this.min < 0;
+        const grid = this.grid;
+        const fraction = grid === 0 || !Number.isInteger(grid);
+        if (this.phone === 'iphone') {
+            return negative ? 'text' : fraction ? 'decimal' : 'numeric';
+        }
+        if (this.phone === 'android') {
+            return negative ? 'numeric' : fraction ? 'decimal' : 'numeric';
+        }
+        return 'numeric';
+    }
     get control() {
         return this.partNamed('control');
     }
@@ -227,15 +260,18 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         }
         return parseNumber(text, this.locale, this.formatOptions);
     }
+    get stepSize() {
+        return typeof this.step === 'number' ? Math.abs(this.step) || 0 : 0;
+    }
     get stride() {
-        return Math.abs(this.step ?? 0) || strideOf(this.formatOptions);
+        return this.stepSize || strideOf(this.formatOptions);
     }
     get grid() {
-        const step = Math.abs(this.step ?? 0);
-        const options = this.formatOptions;
-        if (step || !options) {
-            return step || 1;
+        const step = this.stepSize;
+        if (step || this.step === 'any') {
+            return step;
         }
+        const options = this.formatOptions ?? PLAIN_FORMAT;
         const [locale, read, grain] = this.grainOf ?? [];
         if (locale === this.locale && read === options && grain !== undefined) {
             return grain;
@@ -252,6 +288,9 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
     }
     onStep(value) {
         const step = this.grid;
+        if (!step) {
+            return true;
+        }
         const anchor = this.min ?? 0;
         const steps = (value - anchor) / step;
         return Math.abs(steps - Math.round(steps)) < 1e-9;
@@ -259,11 +298,11 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
     clamp(value) {
         const step = this.grid;
         const anchor = this.min ?? 0;
-        const stepped = anchor + Math.round((value - anchor) / step) * step;
+        const stepped = step ? anchor + Math.round((value - anchor) / step) * step : value;
         const floored = this.min === undefined ? stepped : Math.max(this.min, stepped);
         const capped = this.max === undefined ? floored : Math.min(this.max, floored);
         const places = Math.max(decimals(step), decimals(anchor));
-        return Number(capped.toFixed(places));
+        return step ? Number(capped.toFixed(places)) : capped;
     }
     nudge(steps) {
         if (this.isDisabled || this.readOnly) {
@@ -387,6 +426,9 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         this.releaseCaret?.();
         this.releaseCaret = undefined;
         this.sync();
+        const parsed = this.numeric;
+        this.toggleState('at-min', parsed !== null && this.min !== undefined && parsed <= this.min);
+        this.toggleState('at-max', parsed !== null && this.max !== undefined && parsed >= this.max);
     }
     get blocksImplicitSubmission() {
         return true;
@@ -419,6 +461,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
           ?disabled=${this.isDisabled || this.readOnly || atMin}
           @click=${this.handleStepperClick}
           @lostpointercapture=${this.stopRepeat}
+          @mousedown=${this.handleStepperMouseDown}
           @pointercancel=${this.stopRepeat}
           @pointerdown=${this.handleStepperDown}
           @pointerup=${this.stopRepeat}
@@ -434,7 +477,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
           type="text"
           role=${this.touchApple ? nothing : 'spinbutton'}
           aria-roledescription=${this.touchApple || this.roleLabel === '' ? nothing : this.roleLabel}
-          inputmode="decimal"
+          inputmode=${this.keypad}
           autocomplete=${this.autocomplete || nothing}
           name=${this.name || nothing}
           placeholder=${this.placeholder || nothing}
@@ -474,6 +517,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
           ?disabled=${this.isDisabled || this.readOnly || atMax}
           @click=${this.handleStepperClick}
           @lostpointercapture=${this.stopRepeat}
+          @mousedown=${this.handleStepperMouseDown}
           @pointercancel=${this.stopRepeat}
           @pointerdown=${this.handleStepperDown}
           @pointerup=${this.stopRepeat}
@@ -542,7 +586,7 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessNumberInput.prototype, "scrub", void 0);
 __decorate([
-    property({ type: Number })
+    property({ converter: stepConverter })
 ], HelixHeadlessNumberInput.prototype, "step", void 0);
 __decorate([
     words,

package/dist/option/root/index.d.ts

@@ -0,0 +1 @@
+export * from './option-root.js';

package/dist/option/root/index.js

@@ -0,0 +1 @@
+export * from './option-root.js';

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

@@ -0,0 +1 @@
+export * from './tag-root.js';

package/dist/tag/root/index.js

@@ -0,0 +1 @@
+export * from './tag-root.js';

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

@@ -1,6 +1,6 @@
 import { AriaForwardController, HelixFormElement, type HourCycle } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
-import '../../tag/index.js';
+import '../../tag/root/index.js';
 import '../../time-picker/index.js';
 declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinSegmentedFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerEditingInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinTokensInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
@@ -349,8 +349,9 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
     /**
      * Each time, where `mode` holds several, sent one entry each.
      *
-     * One time that is text and no time, such as `2:45 P`, is sent as an empty
-     * entry, as a native time field sends a time it cannot read.
+     * Text that is no time, such as `2:45 P`, is sent as one empty entry, as a
+     * native time field sends a time it cannot read. Measured before this: a
+     * range written `09:00/10:30` was invalid and submitted the text.
      */
     protected get answers(): readonly string[] | undefined;
     /** What is wrong with the times, which the text input cannot say. */

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

@@ -4,13 +4,13 @@ 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, drawIcon, formatWords, timeAsValue as fromTime, HelixClearEvent, HelixFormElement, handedLocale, isClockValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinSegmentedField, MixinTokens, readWrittenTime, timeFault, words, wordsLocale, writeClock, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsTime as asTime, clockLocale, customElement, drawIcon, formatWords, timeAsValue as fromTime, HelixClearEvent, HelixFormElement, handedLocale, hostWords, isClockValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinSegmentedField, MixinTokens, readWrittenTime, slottedWords, timeFault, words, wordsLocale, writeClock, } from '@fusion.dev/helix-core';
 import { clock, x } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
-import '../../tag/index.js';
+import '../../tag/root/index.js';
 import '../../time-picker/index.js';
 let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmentedField(MixinPickerEditing(MixinPickerField(MixinControllerOpen(MixinTokens(MixinControllerValue(MixinField(HelixFormElement))))))) {
     constructor() {
@@ -174,7 +174,8 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
     }
     get answers() {
         if (this.mode !== undefined) {
-            return this.held;
+            const held = this.held;
+            return held.every((one) => this.isTime(one)) ? held : [''];
         }
         const text = this.value.trim();
         return text === '' || this.isTime(text) ? undefined : [''];
@@ -242,7 +243,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
       variant=${this.variant ?? nothing}
       disable-times=${this.disableTimes || nothing}
       manual
-      label=${this.label || 'Time'}
+      label=${hostWords(this, slottedWords(this, ['label']) || this.label) || 'Time'}
       hour-cycle=${this.hourCycle ?? nothing}
       locale=${handedLocale(this) || nothing}
       max=${this.max}

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

@@ -1,7 +1,7 @@
 import { HelixFormElement, type HourCycle, type PickerFailure } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../listbox/index.js';
-import '../../option/index.js';
+import '../../option/root/index.js';
 declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFeedbackInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & typeof HelixFormElement;
 /**
  * @summary A control for choosing a time from a list or from wheels.

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

@@ -10,7 +10,7 @@ import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import { wheelName } from '../wheel-name.js';
 import '../../listbox/index.js';
-import '../../option/index.js';
+import '../../option/root/index.js';
 let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerFeedback(MixinControllerValue(HelixFormElement)) {
     constructor() {
         super(...arguments);
@@ -275,7 +275,8 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
             this.internals.setFormValue(null);
             return;
         }
-        reportValues(this.internals, this.name, this.held);
+        const held = this.held;
+        reportValues(this.internals, this.name, held.every((one) => valueAsSeconds(one) !== null) ? held : ['']);
     }
     async revealWhenSettled() {
         const settling = [
@@ -356,6 +357,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
       data-column=${part}
       aria-describedby=${this.describedBy}
       aria-invalid=${this.marked ? 'true' : nothing}
+      aria-required=${this.required ? 'true' : nothing}
       exportparts="empty: column-empty, error: column-error, feedback: column-feedback, filter-icon: column-filter-icon,
         filter-mark: column-filter-mark, hint: column-hint, items: column-items, label: column-label,
         live: column-live, loading: column-loading, search: column-search, search-field: column-search-field"
@@ -408,6 +410,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
       part="list"
       aria-describedby=${this.describedBy}
       aria-invalid=${this.marked ? 'true' : nothing}
+      aria-required=${this.required ? 'true' : nothing}
       exportparts="empty: list-empty, error: list-error, feedback: list-feedback, filter-icon: list-filter-icon,
         filter-mark: list-filter-mark, hint: list-hint, items: list-items, label: list-label,
         live: list-live, loading: list-loading, search: list-search, search-field: list-search-field"