@fusion.dev/helix-headless 0.111.0 → 0.111.1

package/custom-elements.json

@@ -20103,6 +20103,14 @@
               "readonly": true,
               "default": "new AriaForwardController(this, { target: () => this.partNamed('control'), })"
             },
+            {
+              "kind": "field",
+              "name": "clicks",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new HostClickController(this, () => this.partNamed('control'))",
+              "description": "A click on the element itself, `click()` or a page's `<label for>`, toggles it."
+            },
             {
               "kind": "field",
               "name": "indeterminate",
@@ -80166,7 +80174,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "A shorter name for this choice, for where the row does not fit.\n\n`<option label>`'s own meaning: the text a chooser shows when it has less\nroom than the row does, which is what a select's closed trigger has. Empty\nmeans the row's own content, which is the common case and is why this is not\nsimply the accessible name.",
+              "description": "A shorter name for this choice, for where the row does not fit.\n\n`<option label>`'s own meaning: the text a chooser shows when it has less\nroom than the row does, which is what a select's closed trigger has. Empty\nmeans the row's own content, which is the common case and is why this is not\nsimply the accessible name.\n\n**An option with a label and nothing in it shows the label**, as\n`<option label>` does: written the platform's way, a select listed a row of\nnothing for every choice.",
               "attribute": "label"
             },
             {
@@ -80195,7 +80203,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "The option's text, which a listbox matches typed text against.\n\nRead from the rendered content rather than required as a property, because\nthe content is where a consumer naturally puts it and asking for both is\nasking for two things to disagree.\n\n**The default slot's content, never `this.textContent`.** An option holds\nthree slots: the words, plus `start` for an icon and `end` for a shortcut\nor a count. Neither of the latter two is what a reader searched for, and\n`textContent` runs both onto the end of it. Measured on a font picker whose\noptions carry a two-letter specimen in `end`: the field read\n`Noto Sans Linear BAg`, and typing `ag` matched 1,892 of 1,893 options,\nevery row containing the sample. An option with a keyboard shortcut in its\nend slot has the same fault and a worse one, every row carrying one matching\nevery letter of it.\n\nSix things read this: the collapsed field of Select and of Combobox, the\nlistbox's filter, Combobox's match against typed text, its inline\ncompletion, and the label on a chosen tag.\n\nA node goes to the default slot when it names no other, which is the rule\nthe platform applies at assignment. Asking the same question here rather\nthan a second one is what stops the two disagreeing. Text nodes are\nalways the default slot's and cannot say otherwise.\n\n**Text and elements, named rather than \"not an element\".** The filter read\n`!(node instanceof Element) || node.slot === ''`, which admits a comment,\nand `textContent` on a comment is the comment's own body. Every option Lit\nrenders carries one: a child binding is marked with `<!--?lit$1234$-->`, so\nan option written as `` html`<${option}>${size}</${option}>` `` read back as\n`?lit$090648746$25`. Measured in `pagination/footer`, where the trigger\npainted exactly that instead of `25`, on both twins.\n\nIt is worse than one wrong label, because of the six readers listed above:\nthe filter and Combobox's match compare against this string, so a marker in\nit is in every comparison too.",
+              "description": "The option's text, which a listbox matches typed text against.\n\nRead from the rendered content rather than required as a property, because\nthe content is where a consumer naturally puts it and asking for both is\nasking for two things to disagree.\n\n**The default slot's content, never `this.textContent`.** An option holds\nthree slots: the words, plus `start` for an icon and `end` for a shortcut\nor a count. Neither of the latter two is what a reader searched for, and\n`textContent` runs both onto the end of it. Measured on a font picker whose\noptions carry a two-letter specimen in `end`: the field read\n`Noto Sans Linear BAg`, and typing `ag` matched 1,892 of 1,893 options,\nevery row containing the sample. An option with a keyboard shortcut in its\nend slot has the same fault and a worse one, every row carrying one matching\nevery letter of it.\n\nSix things read this: the collapsed field of Select and of Combobox, the\nlistbox's filter, Combobox's match against typed text, its inline\ncompletion, and the label on a chosen tag.\n\nA node goes to the default slot when it names no other, which is the rule\nthe platform applies at assignment. Asking the same question here rather\nthan a second one is what stops the two disagreeing. Text nodes are\nalways the default slot's and cannot say otherwise.\n\n**Text and elements, named rather than \"not an element\".** The filter read\n`!(node instanceof Element) || node.slot === ''`, which admits a comment,\nand `textContent` on a comment is the comment's own body. Every option Lit\nrenders carries one: a child binding is marked with `<!--?lit$1234$-->`, so\nan option written as `` html`<${option}>${size}</${option}>` `` read back as\n`?lit$090648746$25`. Measured in `pagination/footer`, where the trigger\npainted exactly that instead of `25`, on both twins.\n\nIt is worse than one wrong label, because of the six readers listed above:\nthe filter and Combobox's match compare against this string, so a marker in\nit is in every comparison too.\n\n**The `label` where the slot holds nothing**, which is what the row shows\nthen, so the six read the words a reader sees.",
               "readonly": true
             },
             {
@@ -80597,7 +80605,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "A shorter name for this choice, for where the row does not fit.\n\n`<option label>`'s own meaning: the text a chooser shows when it has less\nroom than the row does, which is what a select's closed trigger has. Empty\nmeans the row's own content, which is the common case and is why this is not\nsimply the accessible name.",
+              "description": "A shorter name for this choice, for where the row does not fit.\n\n`<option label>`'s own meaning: the text a chooser shows when it has less\nroom than the row does, which is what a select's closed trigger has. Empty\nmeans the row's own content, which is the common case and is why this is not\nsimply the accessible name.\n\n**An option with a label and nothing in it shows the label**, as\n`<option label>` does: written the platform's way, a select listed a row of\nnothing for every choice.",
               "fieldName": "label"
             },
             {
@@ -88838,6 +88846,14 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "clicks",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new HostClickController(this, () => this.partNamed('item'))",
+              "description": "A click on the element itself, `click()` included, chooses it."
+            },
             {
               "kind": "field",
               "name": "defaultSelected",
@@ -101776,6 +101792,14 @@
               "readonly": true,
               "default": "new AriaForwardController(this, { target: () => this.partNamed('control'), })"
             },
+            {
+              "kind": "field",
+              "name": "clicks",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new HostClickController(this, () => this.partNamed('control'))",
+              "description": "A click on the element itself, `click()` or a page's `<label for>`, toggles it."
+            },
             {
               "kind": "field",
               "name": "value",

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixFormElement, HostClickController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessCheckbox_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerCheckedInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
@@ -49,6 +49,8 @@ declare const HelixHeadlessCheckbox_base: (new (...args: any[]) => import("@fusi
  */
 export declare class HelixHeadlessCheckbox extends HelixHeadlessCheckbox_base {
     protected readonly aria: AriaForwardController;
+    /** A click on the element itself, `click()` or a page's `<label for>`, toggles it. */
+    protected readonly clicks: HostClickController;
     /**
      * Shows the box as neither checked nor unchecked.
      *

package/dist/checkbox/root/checkbox-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, HelixFormElement, MixinControllerChecked, MixinField, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixFormElement, HostClickController, MixinControllerChecked, MixinField, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerChecked(MixinField(HelixFormElement)) {
@@ -13,6 +13,7 @@ let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerC
         this.aria = new AriaForwardController(this, {
             target: () => this.partNamed('control'),
         });
+        this.clicks = new HostClickController(this, () => this.partNamed('control'));
         this.indeterminate = false;
         this.value = 'on';
         this.handleChange = (event) => {

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

@@ -152,6 +152,10 @@ export declare class HelixHeadlessOption extends HelixElement {
      * room than the row does, which is what a select's closed trigger has. Empty
      * means the row's own content, which is the common case and is why this is not
      * simply the accessible name.
+     *
+     * **An option with a label and nothing in it shows the label**, as
+     * `<option label>` does: written the platform's way, a select listed a row of
+     * nothing for every choice.
      */
     label: string;
     /**
@@ -201,6 +205,9 @@ export declare class HelixHeadlessOption extends HelixElement {
      * It is worse than one wrong label, because of the six readers listed above:
      * the filter and Combobox's match compare against this string, so a marker in
      * it is in every comparison too.
+     *
+     * **The `label` where the slot holds nothing**, which is what the row shows
+     * then, so the six read the words a reader sees.
      */
     get text(): string;
     /** Sends `helix-select` for this option. Does nothing when it is disabled. */

package/dist/option/root/option-root.js

@@ -29,11 +29,11 @@ let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
         this.toggleAttribute('selected', next);
     }
     get text() {
-        return [...this.childNodes]
+        return ([...this.childNodes]
             .filter((node) => node.nodeType === Node.TEXT_NODE || (node instanceof Element && node.slot === ''))
             .map((node) => node.textContent ?? '')
             .join('')
-            .trim();
+            .trim() || this.label);
     }
     select() {
         if (this.disabled) {
@@ -57,7 +57,7 @@ let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
     >
       <slot name="start"></slot>
       <span part="text">
-        <span part="label"><slot></slot></span>
+        <span part="label"><slot>${this.label}</slot></span>
         ${this.description ? html `<span part="description">${this.description}</span>` : nothing}
       </span>
       <slot name="end"></slot>

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { HelixElement, HostClickController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessRadio_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinSelectableItemInterface) & typeof HelixElement;
 /**
@@ -41,6 +41,8 @@ declare const HelixHeadlessRadio_base: (new (...args: any[]) => import("@fusion.
  * @cssstate selected - The radio is chosen.
  */
 export declare class HelixHeadlessRadio extends HelixHeadlessRadio_base {
+    /** A click on the element itself, `click()` included, chooses it. */
+    protected readonly clicks: HostClickController;
     /**
      * Whether the markup declares the radio chosen. A form reset returns to it.
      *

package/dist/radio/root/radio-root.js

@@ -4,12 +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 { customElement, HelixElement, MixinSelectableItem } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HostClickController, MixinSelectableItem, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessRadio = class HelixHeadlessRadio extends MixinSelectableItem(HelixElement) {
     constructor() {
         super(...arguments);
+        this.clicks = new HostClickController(this, () => this.partNamed('item'));
         this.focusable = false;
     }
     get defaultSelected() {

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixFormElement, HostClickController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessSwitch_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerCheckedInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
@@ -45,6 +45,8 @@ declare const HelixHeadlessSwitch_base: (new (...args: any[]) => import("@fusion
  */
 export declare class HelixHeadlessSwitch extends HelixHeadlessSwitch_base {
     protected readonly aria: AriaForwardController;
+    /** A click on the element itself, `click()` or a page's `<label for>`, toggles it. */
+    protected readonly clicks: HostClickController;
     /**
      * Value submitted when the switch is on.
      */

package/dist/switch/root/switch-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, HelixFormElement, MixinControllerChecked, MixinField, markRegion, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixFormElement, HostClickController, MixinControllerChecked, MixinField, markRegion, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerChecked(MixinField(HelixFormElement)) {
@@ -13,6 +13,7 @@ let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerCheck
         this.aria = new AriaForwardController(this, {
             target: () => this.partNamed('control'),
         });
+        this.clicks = new HostClickController(this, () => this.partNamed('control'));
         this.value = 'on';
         this.handleChange = (event) => {
             event.stopPropagation();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.111.0",
+  "version": "0.111.1",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,13 +46,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.111.0",
-    "@fusion.dev/helix-icons": "0.111.0",
+    "@fusion.dev/helix-core": "0.111.1",
+    "@fusion.dev/helix-icons": "0.111.1",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.111.0",
-    "@fusion.dev/helix-testing": "0.111.0",
+    "@fusion.dev/helix-cem": "0.111.1",
+    "@fusion.dev/helix-testing": "0.111.1",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -14399,7 +14399,11 @@ string is not a fact a selector needs. */
 `<option label>`'s own meaning: the text a chooser shows when it has less
 room than the row does, which is what a select's closed trigger has. Empty
 means the row's own content, which is the common case and is why this is not
-simply the accessible name. */
+simply the accessible name.
+
+**An option with a label and nothing in it shows the label**, as
+`<option label>` does: written the platform's way, a select listed a row of
+nothing for every choice. */
   label?: (HelixHeadlessOption["label"]) | undefined;
   /** Whether this choice is currently chosen.
 
@@ -14506,7 +14510,11 @@ string is not a fact a selector needs. */
 `<option label>`'s own meaning: the text a chooser shows when it has less
 room than the row does, which is what a select's closed trigger has. Empty
 means the row's own content, which is the common case and is why this is not
-simply the accessible name. */
+simply the accessible name.
+
+**An option with a label and nothing in it shows the label**, as
+`<option label>` does: written the platform's way, a select listed a row of
+nothing for every choice. */
   "prop:label"?: (HelixHeadlessOption["label"]) | undefined;
   /** Whether this choice is currently chosen.
 
@@ -35026,6 +35034,10 @@ export type CustomElements = {
    * room than the row does, which is what a select's closed trigger has. Empty
    * means the row's own content, which is the common case and is why this is not
    * simply the accessible name.
+   *
+   * **An option with a label and nothing in it shows the label**, as
+   * `<option label>` does: written the platform's way, a select listed a row of
+   * nothing for every choice.
    * - `selected`: Whether this choice is currently chosen.
    *
    * Written by the listbox.
@@ -35090,7 +35102,10 @@ export type CustomElements = {
    *
    * It is worse than one wrong label, because of the six readers listed above:
    * the filter and Combobox's match compare against this string, so a marker in
-   * it is in every comparison too. (property only) (readonly)
+   * it is in every comparison too.
+   *
+   * **The `label` where the slot holds nothing**, which is what the row shows
+   * then, so the six read the words a reader sees. (property only) (readonly)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -55118,6 +55133,10 @@ export type CustomElementsSolidJs = {
    * room than the row does, which is what a select's closed trigger has. Empty
    * means the row's own content, which is the common case and is why this is not
    * simply the accessible name.
+   *
+   * **An option with a label and nothing in it shows the label**, as
+   * `<option label>` does: written the platform's way, a select listed a row of
+   * nothing for every choice.
    * - `selected`: Whether this choice is currently chosen.
    *
    * Written by the listbox.
@@ -55182,7 +55201,10 @@ export type CustomElementsSolidJs = {
    *
    * It is worse than one wrong label, because of the six readers listed above:
    * the filter and Combobox's match compare against this string, so a marker in
-   * it is in every comparison too. (property only) (readonly)
+   * it is in every comparison too.
+   *
+   * **The `label` where the slot holds nothing**, which is what the row shows
+   * then, so the six read the words a reader sees. (property only) (readonly)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by

package/types/vue.d.ts

@@ -7421,7 +7421,11 @@ string is not a fact a selector needs. */
 `<option label>`'s own meaning: the text a chooser shows when it has less
 room than the row does, which is what a select's closed trigger has. Empty
 means the row's own content, which is the common case and is why this is not
-simply the accessible name. */
+simply the accessible name.
+
+**An option with a label and nothing in it shows the label**, as
+`<option label>` does: written the platform's way, a select listed a row of
+nothing for every choice. */
   label?: (HelixHeadlessOption["label"]) | undefined;
   /** Whether this choice is currently chosen.