@fusion.dev/helix-headless 0.59.0 → 0.59.2

package/custom-elements.json

@@ -88337,7 +88337,7 @@
               "type": {
                 "text": "'segmented' | 'underlined' | undefined"
               },
-              "description": "How the row reads.\n\nUnset is a raised pill on the selected tab with nothing behind the row,\nwhich is what a set sitting inside other chrome wants. `underlined` is a\nrule under the row and a thicker one under the selected tab, for a set that\nheads a page. `segmented` puts the pill in a framed, sunken track, which\nreads as one control rather than as a row.\n\nA value describes itself rather than naming another component: `segmented`\nand `underlined` are participles reading as a pair, the way `outlined` on\nAccordion does.\n\nReflected and left unset by default, so the host carries nothing a\nconsumer's server markup does not already have.",
+              "description": "How the row reads.\n\nUnset is a raised pill on the selected tab with nothing behind the row,\nwhich is what a set sitting inside other chrome wants. `underlined` is a\nrule under the row and a thicker one under the selected tab, for a set that\nheads a page. `segmented` puts the pill in a framed, sunken track, which\nreads as one control rather than as a row.\n\nA value describes itself rather than naming another component: `segmented`\nand `underlined` are participles reading as a pair, the way `outlined` on\nAccordion does.\n\n**`segmented` is `ToggleGroup`'s track, opted into.** The two draw the same\ngroove, token for token, and the sheets already say so where the height is\nfixed. What differs is polarity, and both are right: a group of toggles is\none control, so its track is the resting state and its `separation` decides\nonly the frame around it, while a row of tabs is a row until something says\notherwise, so the track is a value here rather than the thing a value takes\naway.\n\nReflected and left unset by default, so the host carries nothing a\nconsumer's server markup does not already have.",
               "attribute": "variant",
               "reflects": true
             },
@@ -88870,7 +88870,7 @@
               "type": {
                 "text": "'segmented' | 'underlined' | undefined"
               },
-              "description": "How the row reads.\n\nUnset is a raised pill on the selected tab with nothing behind the row,\nwhich is what a set sitting inside other chrome wants. `underlined` is a\nrule under the row and a thicker one under the selected tab, for a set that\nheads a page. `segmented` puts the pill in a framed, sunken track, which\nreads as one control rather than as a row.\n\nA value describes itself rather than naming another component: `segmented`\nand `underlined` are participles reading as a pair, the way `outlined` on\nAccordion does.\n\nReflected and left unset by default, so the host carries nothing a\nconsumer's server markup does not already have.",
+              "description": "How the row reads.\n\nUnset is a raised pill on the selected tab with nothing behind the row,\nwhich is what a set sitting inside other chrome wants. `underlined` is a\nrule under the row and a thicker one under the selected tab, for a set that\nheads a page. `segmented` puts the pill in a framed, sunken track, which\nreads as one control rather than as a row.\n\nA value describes itself rather than naming another component: `segmented`\nand `underlined` are participles reading as a pair, the way `outlined` on\nAccordion does.\n\n**`segmented` is `ToggleGroup`'s track, opted into.** The two draw the same\ngroove, token for token, and the sheets already say so where the height is\nfixed. What differs is polarity, and both are right: a group of toggles is\none control, so its track is the resting state and its `separation` decides\nonly the frame around it, while a row of tabs is a row until something says\notherwise, so the track is a value here rather than the thing a value takes\naway.\n\nReflected and left unset by default, so the host carries nothing a\nconsumer's server markup does not already have.",
               "fieldName": "variant"
             },
             {
@@ -97004,7 +97004,7 @@
               "type": {
                 "text": "| 'bottom-center'\n    | 'bottom-end'\n    | 'bottom-start'\n    | 'top-center'\n    | 'top-end'\n    | 'top-start' | undefined"
               },
-              "description": "Which corner or edge the stack sits at.\n\nNamed here rather than on each message, because where a page puts its\ntoasts is a fact about the page: a stack whose members disagreed about\nwhere they were would not be a stack.\n\n**Optional, and bottom-end is the absence of it.** Reflecting *and*\ndefaulting is the pair that writes onto a host: every toast region anybody\nrendered would gain a `placement=\"bottom-end\"` nobody typed, which a React\nconsumer's server markup does not have. A sheet carries the resting\narrangement in its own `:host` rule and the selectors describe only the\ndepartures, which is what `orientation` does.",
+              "description": "Which corner or edge the stack sits at.\n\nNamed here rather than on each message, because where a page puts its\ntoasts is a fact about the page: a stack whose members disagreed about\nwhere they were would not be a stack.\n\n**Six corners in one word, where `Carousel` splits the same question in\ntwo.** That family takes a placement and an alignment, and argues at its own\ndeclaration that one attribute naming both facts multiplies rather than\ncomposing. It is right there and wrong here, and the difference is the\nshape of the product. A carousel's is ragged: its `overlay` belongs to no\nedge at all, and its two groups of chrome move independently, shipping\ndifferent defaults so they do not land on each other, which is what makes\nrewriting one to move the other a real cost. A stack's is two edges by\nthree alignments, every pair real and every pair named this way by every\ntoast a reader has already met. Fusing spells the domain out and loses\nnothing; a stack has one position and takes it once.\n\n**Optional, and bottom-end is the absence of it.** Reflecting *and*\ndefaulting is the pair that writes onto a host: every toast region anybody\nrendered would gain a `placement=\"bottom-end\"` nobody typed, which a React\nconsumer's server markup does not have. A sheet carries the resting\narrangement in its own `:host` rule and the selectors describe only the\ndepartures, which is what `orientation` does.",
               "attribute": "placement",
               "reflects": true
             },
@@ -97358,7 +97358,7 @@
               "type": {
                 "text": "| 'bottom-center'\n    | 'bottom-end'\n    | 'bottom-start'\n    | 'top-center'\n    | 'top-end'\n    | 'top-start' | undefined"
               },
-              "description": "Which corner or edge the stack sits at.\n\nNamed here rather than on each message, because where a page puts its\ntoasts is a fact about the page: a stack whose members disagreed about\nwhere they were would not be a stack.\n\n**Optional, and bottom-end is the absence of it.** Reflecting *and*\ndefaulting is the pair that writes onto a host: every toast region anybody\nrendered would gain a `placement=\"bottom-end\"` nobody typed, which a React\nconsumer's server markup does not have. A sheet carries the resting\narrangement in its own `:host` rule and the selectors describe only the\ndepartures, which is what `orientation` does.",
+              "description": "Which corner or edge the stack sits at.\n\nNamed here rather than on each message, because where a page puts its\ntoasts is a fact about the page: a stack whose members disagreed about\nwhere they were would not be a stack.\n\n**Six corners in one word, where `Carousel` splits the same question in\ntwo.** That family takes a placement and an alignment, and argues at its own\ndeclaration that one attribute naming both facts multiplies rather than\ncomposing. It is right there and wrong here, and the difference is the\nshape of the product. A carousel's is ragged: its `overlay` belongs to no\nedge at all, and its two groups of chrome move independently, shipping\ndifferent defaults so they do not land on each other, which is what makes\nrewriting one to move the other a real cost. A stack's is two edges by\nthree alignments, every pair real and every pair named this way by every\ntoast a reader has already met. Fusing spells the domain out and loses\nnothing; a stack has one position and takes it once.\n\n**Optional, and bottom-end is the absence of it.** Reflecting *and*\ndefaulting is the pair that writes onto a host: every toast region anybody\nrendered would gain a `placement=\"bottom-end\"` nobody typed, which a React\nconsumer's server markup does not have. A sheet carries the resting\narrangement in its own `:host` rule and the selectors describe only the\ndepartures, which is what `orientation` does.",
               "fieldName": "placement"
             }
           ],
@@ -107645,7 +107645,8 @@
                 "type": {
                   "text": "Promise<void>"
                 }
-              }
+              },
+              "description": "Into picture in picture and back, and quiet about being refused.\n\nCaught rather than `void`ed, the way `FullscreenController` catches its\nown: this is called from a click handler that discards the promise, so a\nrefusal is otherwise an unhandled rejection naming neither the element nor\nthe reason. The roster already declines to draw the button where the\nconsumer refused the feature, which leaves the refusals nothing can see\ncoming, a request without user activation and a window another document is\nalready using."
             },
             {
               "kind": "field",

package/dist/object-inspector/root/object-inspector-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessObjectInspector_1;
-import { CopyController, customElement, HelixElement, inlineStep, scrollItemIntoView, VirtualizeController, } from '@fusion.dev/helix-core';
+import { CopyController, customElement, elementById, HelixElement, inlineStep, scrollItemIntoView, searchableById, VirtualizeController, } from '@fusion.dev/helix-core';
 import { caretDown, caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -146,9 +146,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        if (this.loadedFor !== this.for &&
-            typeof this.ownerDocument?.getElementById === 'function' &&
-            !this.hydrating) {
+        if (this.loadedFor !== this.for && searchableById(this) && !this.hydrating) {
             this.loadedFor = this.for;
             this.load();
         }
@@ -178,7 +176,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         }
     }
     load() {
-        const text = this.for === '' ? '' : (this.ownerDocument.getElementById(this.for)?.textContent ?? '');
+        const text = this.for === '' ? '' : (elementById(this, this.for)?.textContent ?? '');
         try {
             this.read = text.trim() === '' ? undefined : JSON.parse(text);
         }

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

@@ -60,6 +60,14 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
      * and `underlined` are participles reading as a pair, the way `outlined` on
      * Accordion does.
      *
+     * **`segmented` is `ToggleGroup`'s track, opted into.** The two draw the same
+     * groove, token for token, and the sheets already say so where the height is
+     * fixed. What differs is polarity, and both are right: a group of toggles is
+     * one control, so its track is the resting state and its `separation` decides
+     * only the frame around it, while a row of tabs is a row until something says
+     * otherwise, so the track is a value here rather than the thing a value takes
+     * away.
+     *
      * Reflected and left unset by default, so the host carries nothing a
      * consumer's server markup does not already have.
      */

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

@@ -52,6 +52,18 @@ export declare class HelixHeadlessToast extends HelixElement {
      * toasts is a fact about the page: a stack whose members disagreed about
      * where they were would not be a stack.
      *
+     * **Six corners in one word, where `Carousel` splits the same question in
+     * two.** That family takes a placement and an alignment, and argues at its own
+     * declaration that one attribute naming both facts multiplies rather than
+     * composing. It is right there and wrong here, and the difference is the
+     * shape of the product. A carousel's is ragged: its `overlay` belongs to no
+     * edge at all, and its two groups of chrome move independently, shipping
+     * different defaults so they do not land on each other, which is what makes
+     * rewriting one to move the other a real cost. A stack's is two edges by
+     * three alignments, every pair real and every pair named this way by every
+     * toast a reader has already met. Fusing spells the domain out and loses
+     * nothing; a stack has one position and takes it once.
+     *
      * **Optional, and bottom-end is the absence of it.** Reflecting *and*
      * defaulting is the pair that writes onto a host: every toast region anybody
      * rendered would gain a `placement="bottom-end"` nobody typed, which a React

package/dist/video/root/extra-controls.d.ts

@@ -13,6 +13,8 @@ export interface Conditions {
     hydrating: boolean;
     /** Whether anything on the network has offered to play this. */
     remote: boolean;
+    /** Whether the consumer has refused picture in picture on the element. */
+    refusedPip: boolean;
     /** Whether a file is named, which is what a download needs. */
     source: boolean;
 }

package/dist/video/root/extra-controls.js

@@ -1,7 +1,10 @@
 import { writtenList } from '@fusion.dev/helix-core';
 export const offers = (one, player) => {
     if (one === 'pip') {
-        return !player.hydrating && typeof document !== 'undefined' && document.pictureInPictureEnabled;
+        return (!player.hydrating &&
+            !player.refusedPip &&
+            typeof document !== 'undefined' &&
+            document.pictureInPictureEnabled);
     }
     if (one === 'remote') {
         return player.remote;

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

@@ -510,6 +510,17 @@ export declare class HelixHeadlessVideo extends HelixElement {
     private skip;
     /** Steps through the speeds offered, which is what one button can do. */
     private cycleSpeed;
+    /**
+     * Into picture in picture and back, and quiet about being refused.
+     *
+     * Caught rather than `void`ed, the way `FullscreenController` catches its
+     * own: this is called from a click handler that discards the promise, so a
+     * refusal is otherwise an unhandled rejection naming neither the element nor
+     * the reason. The roster already declines to draw the button where the
+     * consumer refused the feature, which leaves the refusals nothing can see
+     * coming, a request without user activation and a window another document is
+     * already using.
+     */
     private togglePip;
     /**
      * A press on the picture plays or pauses it.

package/dist/video/root/video-root.js

@@ -174,7 +174,12 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.captions = [];
     }
     get conditions() {
-        return { hydrating: this.hydrating, remote: this.remoteAvailable, source: this.src !== '' };
+        return {
+            hydrating: this.hydrating,
+            refusedPip: this.disablePictureInPicture,
+            remote: this.remoteAvailable,
+            source: this.src !== '',
+        };
     }
     get extras() {
         return barControls(this.extraControls, this.conditions);
@@ -347,11 +352,16 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         if (!video) {
             return;
         }
-        if (document.pictureInPictureElement === video) {
-            await document.exitPictureInPicture();
-            return;
+        try {
+            if (document.pictureInPictureElement === video) {
+                await document.exitPictureInPicture();
+                return;
+            }
+            await video.requestPictureInPicture();
+        }
+        catch (error) {
+            console.warn(`<${this.localName}> could not enter picture in picture. A press has to come from the reader, and one window holds it at a time.`, error);
         }
-        await video.requestPictureInPicture();
     }
     willUpdate(changed) {
         super.willUpdate(changed);

package/dist/virtual-list/root/virtual-list-root.d.ts

@@ -83,9 +83,15 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
     /**
      * Reads the source named by `for`, before the render that draws it.
      *
+     * **Resolved through `getRootNode()`, so a list inside another component's
+     * shadow root names a source in that root rather than in the page.** Read
+     * against `ownerDocument` it looked in the document whatever tree it was in,
+     * and found nothing from inside an app shell or a sandbox, which is
+     * indistinguishable here from the miss this tolerates on purpose.
+     *
      * Not on the server, per the server rules: the shim has attributes and no
-     * tree, so `getElementById` is undefined there. Nor while hydrating what a
-     * server sent, which it drew with nothing read. A source that is missing or
+     * tree to look an id up in. Nor while hydrating what a server sent, which it
+     * drew with nothing read. A source that is missing or
      * not an array leaves the list empty rather than throwing, because a consumer
      * whose data has not arrived yet is the ordinary case and an empty list says
      * so by itself.

package/dist/virtual-list/root/virtual-list-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 { customElement, HelixElement, VirtualizeController } from '@fusion.dev/helix-core';
+import { customElement, elementById, HelixElement, searchableById, VirtualizeController, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixElement {
@@ -31,9 +31,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        if (this.readFor !== this.for &&
-            typeof this.ownerDocument?.getElementById === 'function' &&
-            !this.hydrating) {
+        if (this.readFor !== this.for && searchableById(this) && !this.hydrating) {
             this.readFor = this.for;
             this.read();
         }
@@ -48,7 +46,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         this.place();
     }
     read() {
-        const source = this.for === '' ? null : this.ownerDocument.getElementById(this.for);
+        const source = this.for === '' ? null : elementById(this, this.for);
         const text = source?.textContent ?? '';
         if (text.trim() === '') {
             this.rows = [];

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.59.0",
+  "version": "0.59.2",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,14 +46,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.59.0",
-    "@fusion.dev/helix-icons": "0.59.0",
+    "@fusion.dev/helix-core": "0.59.2",
+    "@fusion.dev/helix-icons": "0.59.2",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.59.0",
-    "@fusion.dev/helix-testing": "0.59.0",
+    "@fusion.dev/helix-cem": "0.59.2",
+    "@fusion.dev/helix-testing": "0.59.2",
     "@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

@@ -14521,6 +14521,14 @@ A value describes itself rather than naming another component: `segmented`
 and `underlined` are participles reading as a pair, the way `outlined` on
 Accordion does.
 
+**`segmented` is `ToggleGroup`'s track, opted into.** The two draw the same
+groove, token for token, and the sheets already say so where the height is
+fixed. What differs is polarity, and both are right: a group of toggles is
+one control, so its track is the resting state and its `separation` decides
+only the frame around it, while a row of tabs is a row until something says
+otherwise, so the track is a value here rather than the thing a value takes
+away.
+
 Reflected and left unset by default, so the host carries nothing a
 consumer's server markup does not already have. */
   variant?: (HelixHeadlessTabs["variant"]) | undefined;
@@ -14573,6 +14581,14 @@ A value describes itself rather than naming another component: `segmented`
 and `underlined` are participles reading as a pair, the way `outlined` on
 Accordion does.
 
+**`segmented` is `ToggleGroup`'s track, opted into.** The two draw the same
+groove, token for token, and the sheets already say so where the height is
+fixed. What differs is polarity, and both are right: a group of toggles is
+one control, so its track is the resting state and its `separation` decides
+only the frame around it, while a row of tabs is a row until something says
+otherwise, so the track is a value here rather than the thing a value takes
+away.
+
 Reflected and left unset by default, so the host carries nothing a
 consumer's server markup does not already have. */
   "prop:variant"?: (HelixHeadlessTabs["variant"]) | undefined;
@@ -15920,6 +15936,18 @@ Named here rather than on each message, because where a page puts its
 toasts is a fact about the page: a stack whose members disagreed about
 where they were would not be a stack.
 
+**Six corners in one word, where `Carousel` splits the same question in
+two.** That family takes a placement and an alignment, and argues at its own
+declaration that one attribute naming both facts multiplies rather than
+composing. It is right there and wrong here, and the difference is the
+shape of the product. A carousel's is ragged: its `overlay` belongs to no
+edge at all, and its two groups of chrome move independently, shipping
+different defaults so they do not land on each other, which is what makes
+rewriting one to move the other a real cost. A stack's is two edges by
+three alignments, every pair real and every pair named this way by every
+toast a reader has already met. Fusing spells the domain out and loses
+nothing; a stack has one position and takes it once.
+
 **Optional, and bottom-end is the absence of it.** Reflecting *and*
 defaulting is the pair that writes onto a host: every toast region anybody
 rendered would gain a `placement="bottom-end"` nobody typed, which a React
@@ -15941,6 +15969,18 @@ Named here rather than on each message, because where a page puts its
 toasts is a fact about the page: a stack whose members disagreed about
 where they were would not be a stack.
 
+**Six corners in one word, where `Carousel` splits the same question in
+two.** That family takes a placement and an alignment, and argues at its own
+declaration that one attribute naming both facts multiplies rather than
+composing. It is right there and wrong here, and the difference is the
+shape of the product. A carousel's is ragged: its `overlay` belongs to no
+edge at all, and its two groups of chrome move independently, shipping
+different defaults so they do not land on each other, which is what makes
+rewriting one to move the other a real cost. A stack's is two edges by
+three alignments, every pair real and every pair named this way by every
+toast a reader has already met. Fusing spells the domain out and loses
+nothing; a stack has one position and takes it once.
+
 **Optional, and bottom-end is the absence of it.** Reflecting *and*
 defaulting is the pair that writes onto a host: every toast region anybody
 rendered would gain a `placement="bottom-end"` nobody typed, which a React
@@ -32596,6 +32636,14 @@ export type CustomElements = {
    * and `underlined` are participles reading as a pair, the way `outlined` on
    * Accordion does.
    *
+   * **`segmented` is `ToggleGroup`'s track, opted into.** The two draw the same
+   * groove, token for token, and the sheets already say so where the height is
+   * fixed. What differs is polarity, and both are right: a group of toggles is
+   * one control, so its track is the resting state and its `separation` decides
+   * only the frame around it, while a row of tabs is a row until something says
+   * otherwise, so the track is a value here rather than the thing a value takes
+   * away.
+   *
    * Reflected and left unset by default, so the host carries nothing a
    * consumer's server markup does not already have.
    * - `active`: Which item is current, by its `value`.
@@ -33956,6 +34004,18 @@ export type CustomElements = {
    * toasts is a fact about the page: a stack whose members disagreed about
    * where they were would not be a stack.
    *
+   * **Six corners in one word, where `Carousel` splits the same question in
+   * two.** That family takes a placement and an alignment, and argues at its own
+   * declaration that one attribute naming both facts multiplies rather than
+   * composing. It is right there and wrong here, and the difference is the
+   * shape of the product. A carousel's is ragged: its `overlay` belongs to no
+   * edge at all, and its two groups of chrome move independently, shipping
+   * different defaults so they do not land on each other, which is what makes
+   * rewriting one to move the other a real cost. A stack's is two edges by
+   * three alignments, every pair real and every pair named this way by every
+   * toast a reader has already met. Fusing spells the domain out and loses
+   * nothing; a stack has one position and takes it once.
+   *
    * **Optional, and bottom-end is the absence of it.** Reflecting *and*
    * defaulting is the pair that writes onto a host: every toast region anybody
    * rendered would gain a `placement="bottom-end"` nobody typed, which a React
@@ -50781,6 +50841,14 @@ export type CustomElementsSolidJs = {
    * and `underlined` are participles reading as a pair, the way `outlined` on
    * Accordion does.
    *
+   * **`segmented` is `ToggleGroup`'s track, opted into.** The two draw the same
+   * groove, token for token, and the sheets already say so where the height is
+   * fixed. What differs is polarity, and both are right: a group of toggles is
+   * one control, so its track is the resting state and its `separation` decides
+   * only the frame around it, while a row of tabs is a row until something says
+   * otherwise, so the track is a value here rather than the thing a value takes
+   * away.
+   *
    * Reflected and left unset by default, so the host carries nothing a
    * consumer's server markup does not already have.
    * - `active`: Which item is current, by its `value`.
@@ -52164,6 +52232,18 @@ export type CustomElementsSolidJs = {
    * toasts is a fact about the page: a stack whose members disagreed about
    * where they were would not be a stack.
    *
+   * **Six corners in one word, where `Carousel` splits the same question in
+   * two.** That family takes a placement and an alignment, and argues at its own
+   * declaration that one attribute naming both facts multiplies rather than
+   * composing. It is right there and wrong here, and the difference is the
+   * shape of the product. A carousel's is ragged: its `overlay` belongs to no
+   * edge at all, and its two groups of chrome move independently, shipping
+   * different defaults so they do not land on each other, which is what makes
+   * rewriting one to move the other a real cost. A stack's is two edges by
+   * three alignments, every pair real and every pair named this way by every
+   * toast a reader has already met. Fusing spells the domain out and loses
+   * nothing; a stack has one position and takes it once.
+   *
    * **Optional, and bottom-end is the absence of it.** Reflecting *and*
    * defaulting is the pair that writes onto a host: every toast region anybody
    * rendered would gain a `placement="bottom-end"` nobody typed, which a React

package/types/vue.d.ts

@@ -7444,6 +7444,14 @@ A value describes itself rather than naming another component: `segmented`
 and `underlined` are participles reading as a pair, the way `outlined` on
 Accordion does.
 
+**`segmented` is `ToggleGroup`'s track, opted into.** The two draw the same
+groove, token for token, and the sheets already say so where the height is
+fixed. What differs is polarity, and both are right: a group of toggles is
+one control, so its track is the resting state and its `separation` decides
+only the frame around it, while a row of tabs is a row until something says
+otherwise, so the track is a value here rather than the thing a value takes
+away.
+
 Reflected and left unset by default, so the host carries nothing a
 consumer's server markup does not already have. */
   variant?: (HelixHeadlessTabs["variant"]) | undefined;
@@ -8157,6 +8165,18 @@ Named here rather than on each message, because where a page puts its
 toasts is a fact about the page: a stack whose members disagreed about
 where they were would not be a stack.
 
+**Six corners in one word, where `Carousel` splits the same question in
+two.** That family takes a placement and an alignment, and argues at its own
+declaration that one attribute naming both facts multiplies rather than
+composing. It is right there and wrong here, and the difference is the
+shape of the product. A carousel's is ragged: its `overlay` belongs to no
+edge at all, and its two groups of chrome move independently, shipping
+different defaults so they do not land on each other, which is what makes
+rewriting one to move the other a real cost. A stack's is two edges by
+three alignments, every pair real and every pair named this way by every
+toast a reader has already met. Fusing spells the domain out and loses
+nothing; a stack has one position and takes it once.
+
 **Optional, and bottom-end is the absence of it.** Reflecting *and*
 defaulting is the pair that writes onto a host: every toast region anybody
 rendered would gain a `placement="bottom-end"` nobody typed, which a React