@fusion.dev/helix-headless 0.208.1 → 0.209.0

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

@@ -55,6 +55,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * tab stop while the toolbar's is elsewhere, so Tab stops once in the
  * toolbar. A composite without one keeps its own tab stop.
  *
+ * A `<slot>` in the toolbar counts as the controls assigned to it, for a
+ * toolbar a component draws in its own shadow root with your controls passed
+ * into it: they share its tab stop and its arrows with the component's own.
+ *
  * A toolbar inside another toolbar, a Helix one or the page's own
  * `role="toolbar"`, is a `group` of the outer one, as React Aria's is: the
  * outer toolbar's arrows walk through its controls and on past them, and it
@@ -117,6 +121,16 @@ export declare class HelixHeadlessToolbar extends HelixElement {
      * there being no tree to walk on the server.
      */
     private get controls();
+    /**
+     * The toolbar's children, a slot among them read as the elements assigned
+     * to it.
+     *
+     * **For a toolbar a component renders in its own shadow root** and passes a
+     * page's controls into through a slot, as Terminal's header does with its
+     * `actions`: read as a child, the slot holds only its fallback, and the
+     * page's controls kept tab stops of their own beside the toolbar's one.
+     */
+    private get members();
     /** The elements in a child's light DOM that take focus. */
     private within;
     /**

package/dist/toolbar/root/toolbar-root.js

@@ -140,7 +140,7 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
     static { this.words = 'helix-toolbar'; }
     get controls() {
         const controls = [];
-        for (const child of this.children) {
+        for (const child of this.members) {
             if (!(child instanceof HTMLElement) ||
                 child.hasAttribute('disabled') ||
                 child.getAttribute('aria-hidden') === 'true') {
@@ -163,6 +163,9 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
         }
         return controls;
     }
+    get members() {
+        return [...this.children].flatMap((child) => child instanceof HTMLSlotElement ? child.assignedElements({ flatten: true }) : [child]);
+    }
     within(child) {
         return [...child.querySelectorAll('*')].filter(takesFocus);
     }
@@ -214,7 +217,7 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
         if (this.nested) {
             return;
         }
-        const pending = [...new Set([...this.children].map((child) => child.localName))].filter((name) => name.includes('-'));
+        const pending = [...new Set(this.members.map((child) => child.localName))].filter((name) => name.includes('-'));
         await Promise.all(pending.map((name) => customElements.whenDefined(name)));
         this.setTabStop(this.controls[0], false);
     }
@@ -259,7 +262,7 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
         this.toggleState('horizontal', this.axis === 'horizontal');
         this.toggleState('vertical', this.axis === 'vertical');
         if (this.hasUpdated && changed.has('orientation')) {
-            for (const child of this.children) {
+            for (const child of this.members) {
                 ;
                 child.requestUpdate?.();
             }