@fusion.dev/helix-headless 0.179.0 → 0.180.1

package/dist/scatter-chart/root/scatter-chart-root.d.ts

@@ -62,9 +62,10 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  *
  * The plot runs left to right in every text direction, as a number line does.
  * The plot, its axes, and the axis names sit in a `plane` part with
- * `dir="ltr"`. The axis names carry `dir="auto"`, so a name in Arabic or Hebrew
- * reads in its own direction. The summary and the tooltip bubble follow the
- * page's direction.
+ * `dir="ltr"`, and the arrow keys follow the drawing: Right moves to the next
+ * point on a right-to-left page too. The axis names carry `dir="auto"`, so a
+ * name in Arabic or Hebrew reads in its own direction. The summary and the
+ * tooltip bubble follow the page's direction.
  *
  * **A tap shows the reading under it**, and keeps it until a tap lands
  * elsewhere. `helix-reading-change` says each move of the reading, by pointer,
@@ -86,7 +87,7 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * | Key | What it does |
  * |---|---|
  * | Tab | Moves focus to the plot and shows the first reading. |
- * | Right, Left | Moves to the next or the previous point, left to right across the plot. On a right-to-left page, Left moves to the next. |
+ * | Right, Left | Moves to the next or the previous point, left to right across the plot, on a right-to-left page too. |
  * | Down, Up | Moves among the series of the point. With one series, moves to the next or the previous point. |
  * | Home, End | Moves to the first or the last point. |
  * | Page Down, Page Up | Moves a tenth of the points on or back. |

package/dist/scatter-chart/root/scatter-chart-root.js

@@ -76,6 +76,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
     connectedCallback() {
         super.connectedCallback();
         this.pointer.axis = 'none';
+        this.pointer.drawnLtr = true;
         this.pointer.onReading = (heard, detail) => this.dispatchEvent(heard === 'press'
             ? new HelixReadingPressEvent(detail)
             : new HelixReadingChangeEvent(detail));

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

@@ -1,8 +1,7 @@
 import { AriaForwardController, type DataOptionItem, HelixFormElement, PopoverController, UpgradeController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
-import { type HelixHeadlessOption } from '../../option/root/option-root.js';
+import type { HelixHeadlessOption } from '../../option/root/option-root.js';
 import '../../listbox/index.js';
-import '../../option/index.js';
 declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A control that opens a list of options to choose from.
@@ -60,6 +59,18 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * Set `autocomplete` to let a browser's autofill choose, as a native `<select>`
  * with the same attribute would.
  *
+ * **The options are an import of their own.** An option is the Option family's,
+ * which the select does not register, so a page that writes one imports it
+ * beside the select:
+ *
+ * ```js
+ * import '@fusion.dev/helix/select'
+ * import '@fusion.dev/helix/option'
+ * ```
+ *
+ * In development, a select holding an option nobody registered says so once the
+ * page has loaded, with the line to add.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms

package/dist/select/root/select-root.js

@@ -4,15 +4,14 @@ 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, chosenValues, customElement, dataOptions, drawAutofill, drawStatus, HelixFormElement, hostAria, hostWords, inlineStep, isRtl, MixinControllerOpen, MixinControllerValue, MixinField, onApple, PopoverController, reportValues, StatusController, sideOf, typesCharacter, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, auditChildren, chosenValues, customElement, dataOptions, drawAutofill, drawStatus, HelixFormElement, hostAria, hostWords, inlineStep, isRtl, MixinControllerOpen, MixinControllerValue, MixinField, onApple, PopoverController, reportValues, StatusController, sideOf, typesCharacter, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
-import { optionsAmong } from '../../option/root/option-root.js';
+import { optionsAmong } from '../../option/among.js';
 import '../../listbox/index.js';
-import '../../option/index.js';
 import { over } from '../align.js';
 let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(MixinControllerValue(MixinField(HelixFormElement))) {
     constructor() {
@@ -210,6 +209,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
     }
     connectedCallback() {
         super.connectedCallback();
+        auditChildren(this, 'option', 'option', 'it offers no choices');
         this.addEventListener('helix-select', this.handleLinkFollowed);
         const words = new MutationObserver(() => this.requestUpdate());
         words.observe(this, {

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

@@ -101,6 +101,12 @@ export declare class HelixHeadlessSwitch extends HelixHeadlessSwitch_base {
      * loads only this tier, which is the cost the `track` part notes.
      */
     protected renderThumb(): TemplateResult | typeof nothing;
+    /**
+     * Turns the switch on or off, as `click()` does a native checkbox: passed to the control
+     * inside, so the one click a listener hears is the control's, after it has
+     * moved. See `HostClickController`.
+     */
+    click(): void;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/switch/root/switch-root.js

@@ -48,6 +48,11 @@ let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerCheck
     renderThumb() {
         return nothing;
     }
+    click() {
+        if (!this.clicks.click()) {
+            super.click();
+        }
+    }
     render() {
         return html `<label part="field">
       <span part="track">

package/dist/table/column/table-column.d.ts

@@ -10,16 +10,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * `undefined` falls back to the field.
  */
 export type CellReader = (row: Readonly<Record<string, unknown>>) => unknown;
-/**
- * The edge a column names, where it names one of the three.
- *
- * **`text-align` is a string anybody can write**, the union on the property being a
- * compile-time claim and nothing else, and both tables put the value straight
- * into CSS: `Table` into a rule in each row's shadow root, `DataTable` into the
- * cell it draws. One guard, here with the property, rather than one in each
- * table and only one of them written.
- */
-export declare const edgeOf: (align: string | undefined) => string | undefined;
+export { edgeOf } from '../edge.js';
 /**
  * @summary One column of a table: its heading, its width, and the field it reads from each row.
  *

package/dist/table/column/table-column.js

@@ -10,8 +10,7 @@ import { dotsSixVertical } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-const EDGES = new Set(['center', 'end', 'start']);
-export const edgeOf = (align) => align && EDGES.has(align) ? align : undefined;
+export { edgeOf } from '../edge.js';
 let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixElement {
     constructor() {
         super(...arguments);

package/dist/table/edge.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The edge a column names, where it names one of the three.
+ *
+ * **`text-align` is a string anybody can write**, the union on the property being a
+ * compile-time claim and nothing else, and both tables put the value straight
+ * into CSS: `Table` into a rule in each row's shadow root, `DataTable` into the
+ * cell it draws. One guard, here with the property, rather than one in each
+ * table and only one of them written.
+ */
+export declare const edgeOf: (align: string | undefined) => string | undefined;

package/dist/table/edge.js

@@ -0,0 +1,2 @@
+const EDGES = new Set(['center', 'end', 'start']);
+export const edgeOf = (align) => align && EDGES.has(align) ? align : undefined;

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

@@ -192,6 +192,7 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
     private refocus;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
     /** Watches the strip's size while `scroll-controls` asks, and reads it. */
     private watchStrip;

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

@@ -68,6 +68,9 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
         };
         this.handleSlotChange = () => {
             this.sync();
+            if (this.active === '') {
+                this.requestUpdate();
+            }
             this.indicator.place();
             this.refocus();
             this.measure();
@@ -161,6 +164,16 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
         this.resizing?.disconnect();
         this.resizing = undefined;
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (this.active === '' && this.childrenKnown) {
+            const tabs = this.tabs;
+            const shown = tabs.find((tab) => tab.selected) ?? this.resolveActive(tabs);
+            if (shown) {
+                this.active = shown.value;
+            }
+        }
+    }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.sync();

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

@@ -110,6 +110,12 @@ export declare class HelixHeadlessToggle extends HelixHeadlessToggle_base {
      * re-renders nothing.
      */
     protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * Presses the toggle, as `click()` does a native button: passed to the control
+     * inside, so the one click a listener hears is the control's, after it has
+     * moved. See `HostClickController`.
+     */
+    click(): void;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/toggle/root/toggle-root.js

@@ -41,6 +41,11 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends MixinSelectableItem(
         this.finishHydration();
         auditName(this, () => this.partNamed('item'), 'Give it words in its default slot, an `aria-label`, or a label on the icon it holds.');
     }
+    click() {
+        if (!this.clicks.click()) {
+            super.click();
+        }
+    }
     render() {
         const alone = this.alone;
         const radio = !alone && this.pressed === undefined;

package/dist/tooltip/root/tooltip-root.js

@@ -353,6 +353,7 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
         hostAria(this.internals, {
             describedBy: this.hasContent ? [bubble] : [],
             label: this.describedText,
+            role: 'none',
         });
         this.internals.ariaHidden = this.for !== '' && !this.open ? 'true' : null;
     }