@fusion.dev/helix-headless 0.157.0 → 0.158.0

package/dist/number-input/root/number-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, appleTouch, valueAsNumber as asNumber, customElement, formatNumber, formatWords, numberAsValue as fromNumber, HelixFormElement, holdCaret, MixinControllerValue, MixinField, parseNumber, restoreValue, submitImplicitly, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, appleTouch, customElement, formatNumber, formatWords, numberAsValue as fromNumber, HelixFormElement, holdCaret, MixinControllerValue, MixinField, parseNumber, restoreValue, submitImplicitly, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { minus, plus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -410,7 +410,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         const atMin = parsed !== null && this.min !== undefined && parsed <= this.min;
         const atMax = parsed !== null && this.max !== undefined && parsed >= this.max;
         return html `${this.renderLabel()}
-      <div part="field" role="group">
+      <div part="field" role="group" aria-labelledby=${this.labeled ? this.labelId : nothing}>
         <button
           part="decrement"
           type="button"
@@ -484,7 +484,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
       ${this.renderHint()}${this.renderFeedback()}`;
     }
     get valueAsNumber() {
-        return asNumber(this.value);
+        return this.numeric ?? Number.NaN;
     }
     set valueAsNumber(count) {
         this.value = fromNumber(count);

package/dist/progress/root/progress-root.js

@@ -51,7 +51,7 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
         this.internals.ariaValueMax = String(max);
         this.internals.ariaValueNow = this.indeterminate
             ? null
-            : String(Math.min(Math.max(this.value || min, min), max));
+            : String(Math.min(Math.max(Number.isNaN(this.value) ? min : this.value, min), max));
         const shown = this.valueText || slottedWords(this, ['']);
         this.internals.ariaValueText = this.indeterminate ? shown || null : shown || this.text;
         this.toggleState('complete', this.complete);

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

@@ -19,7 +19,9 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * whole set.
  *
  * `Select` owns the value, passes it down to the listbox, and takes changes
- * back, so the value lives in one place.
+ * back, so the value lives in one place. With `multiple`, the value is the
+ * chosen values joined with commas, and the form receives one entry for each.
+ * An option's value may hold a comma, and it is read as one value.
  *
  * Set `valueContent` to draw the trigger's content from the chosen options,
  * and several chosen options are written as a list in the reader's language.
@@ -291,6 +293,11 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
     private get display();
     /** The chosen options, in the order they appear. None on a server or while hydrating, and none for `items`. */
     private get chosenOptions();
+    /**
+     * The chosen values, read against the options' values, so an option whose
+     * value holds a comma is one value. See `chosenValues`.
+     */
+    private get chosen();
     /** `items` as the list reads them, built once per array. */
     private data;
     /**

package/dist/select/root/select-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, afterLinkFollowed, customElement, dataOptions, drawAutofill, drawStatus, HelixFormElement, hostAria, hostWords, isRtl, MixinControllerOpen, MixinControllerValue, MixinField, onApple, PopoverController, reportValues, StatusController, sideOf, typesCharacter, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, chosenValues, customElement, dataOptions, drawAutofill, drawStatus, HelixFormElement, hostAria, hostWords, isRtl, MixinControllerOpen, MixinControllerValue, MixinField, onApple, PopoverController, reportValues, StatusController, sideOf, typesCharacter, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -173,7 +173,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         return this.partNamed('listbox');
     }
     get display() {
-        const chosen = new Set(this.value === '' ? [] : this.value.split(','));
+        const chosen = new Set(this.chosen);
         const words = this.entries.filter((option) => chosen.has(option.value)).map((one) => one.text);
         if (words.length > 0) {
             return new Intl.ListFormat(wordsLocale(this), { style: 'short', type: 'unit' }).format(words);
@@ -184,9 +184,12 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         if (this.items) {
             return [];
         }
-        const chosen = new Set(this.value === '' ? [] : this.value.split(','));
+        const chosen = new Set(this.chosen);
         return optionsAmong(this.knownChildren).filter((option) => chosen.has(option.value));
     }
+    get chosen() {
+        return chosenValues(this.value, new Set(this.entries.map((option) => option.value)), this.multiple);
+    }
     get entries() {
         if (!this.items) {
             return optionsAmong(this.knownChildren);
@@ -257,7 +260,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
             }
         }
         const present = new Set(options.map((option) => option.value));
-        const held = this.value === '' ? [] : this.value.split(',');
+        const held = chosenValues(this.value, new Set([...present, ...this.seen]), this.multiple);
         const gone = held.filter((value) => this.seen.has(value) && !present.has(value));
         this.seen = present;
         if (gone.length > 0) {
@@ -266,7 +269,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
     }
     sync() {
         if (this.multiple) {
-            reportValues(this.internals, this.name, this.value === '' ? [] : this.value.split(','));
+            reportValues(this.internals, this.name, this.chosen);
         }
         else {
             this.internals.setFormValue(this.value === '' ? null : this.value);

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

@@ -41,7 +41,8 @@ export declare class HelixHeadlessSkeleton extends HelixElement {
      * What is loading, read out as the placeholder's name, such as "Loading
      * profile".
      *
-     * Absent hides the placeholder from screen readers.
+     * Absent hides the placeholder from screen readers. Around content, the name
+     * is read while `loading` is set, and the loaded content is read as it is.
      */
     label: string;
     /**

package/dist/skeleton/root/skeleton-root.js

@@ -22,7 +22,7 @@ let HelixHeadlessSkeleton = class HelixHeadlessSkeleton extends HelixElement {
         const wraps = this.wraps;
         this.toggleState('wrapping', wraps);
         this.internals.ariaBusy = this.loading ? 'true' : null;
-        if (this.label) {
+        if (this.label && (this.loading || !wraps)) {
             hostAria(this.internals, { label: this.label, role: 'progressbar' });
             this.internals.ariaHidden = null;
         }