@uniflowed/ui 0.0.0-alpha.39 → 0.0.0-alpha.40

package/calendar.js

@@ -401,17 +401,14 @@ export component CalendarMonth(children?: (date: PlainDate) => renders CalendarD
           {columns.map((day) => (
             <th
               // The full day name is the accessible name and the short one is
-              // what is drawn, because a column of `Wednesday` is not a calendar
-              // and a screen reader saying "We" is not a day. `aria-hidden` on
-              // the visible text is what keeps the two from being announced one
-              // after the other.
+              // real header text, because axe rightly refuses an empty table
+              // header. `aria-label` wins over the contents for the announced
+              // name, so a reader still hears "Wednesday" rather than "Wed".
               aria-label={day.toLocaleString(calendar.locale, COLUMN_FORMAT)}
               key={day.dayOfWeek}
               scope="col"
             >
-              <span aria-hidden="true">
-                {day.toLocaleString(calendar.locale, COLUMN_ABBREVIATION)}
-              </span>
+              {day.toLocaleString(calendar.locale, COLUMN_ABBREVIATION)}
             </th>
           ))}
         </tr>

package/combobox.js

@@ -127,6 +127,8 @@ import {
 } from "@uniflowed/react";
 import { useStableCallback } from "@uniflowed/hooks/lifecycle";
 
+import { useInteractOutside } from "./interactions.js";
+
 import type { Align, LogicalSide } from "./internal/anchor.js";
 import { useAnchor } from "./internal/anchor.js";
 import type { Rest } from "./internal/merge-props.js";
@@ -496,33 +498,18 @@ export component ComboboxList(
     }
   });
 
-  // Keyed on `combobox.open`, and that is load-bearing. This component is
-  // mounted the whole time and only *renders* while the list is open, so keyed
-  // on the stable callbacks alone the effect ran once — on the first commit,
-  // when `listRef.current` was still null — and never again. The listener was
-  // never attached, and a press outside the combobox closed nothing.
-  useEffect(() => {
-    const list = listRef.current;
-    if (list == null) {
-      return;
-    }
-    const document = list.ownerDocument;
-    const onOutsidePress = (event: Event) => {
-      const target: $FlowFixMe = event.target;
-      if (target == null || list.contains(target)) {
-        return;
-      }
-      // The field is not "outside": pressing it is how a reader gets back to
-      // typing, and closing on it would fight the input's own handlers.
-      const input = inputRef.current;
-      if (input != null && input.contains(target)) {
-        return;
-      }
-      close();
-    };
-    document.addEventListener("pointerdown", onOutsidePress, true);
-    return () => document.removeEventListener("pointerdown", onOutsidePress, true);
-  }, [combobox.open, close, listRef, inputRef]);
+  // The field is not "outside": pressing it is how a reader gets back to
+  // typing, and closing on it would fight the input's own handlers.
+  //
+  // The refs are read when a press arrives rather than when the listener is
+  // attached. This component is mounted the whole time and only *renders*
+  // while the list is open, and the listener that was attached on the first
+  // commit — when `listRef.current` was still null — closed nothing at all.
+  useInteractOutside({
+    isDisabled: !combobox.open,
+    onInteractOutside: () => close(),
+    refs: [listRef, inputRef],
+  });
 
   if (!combobox.open) {
     return null;

package/dialog.js

@@ -78,6 +78,8 @@ import {
 import { useScrollLock } from "@uniflowed/hooks/browser";
 import { useStableCallback } from "@uniflowed/hooks/lifecycle";
 
+import { useInteractOutside } from "./interactions.js";
+
 import type { PartEvent, RenderProp, Rest } from "./internal/merge-props.js";
 import {
   composeHandlers,
@@ -261,29 +263,6 @@ export component DialogBody(
 
     const restorePage = concealOutside(body);
 
-    const onOutsidePress = (event: Event) => {
-      const target: $FlowFixMe = event.target;
-      if (target == null || body.contains(target)) {
-        return;
-      }
-      // The trigger is outside the dialog and is not "outside" for this
-      // purpose: closing here and letting the trigger's own click reopen made
-      // a press on the trigger a no-op that flickered.
-      if (trigger != null && trigger.contains(target)) {
-        return;
-      }
-      // A confirmation declines to close here, and `Escape` still does. See
-      // the module header: there is a difference between a dialog the reader
-      // dismissed and one that went away while they were reaching for it.
-      if (!dismissable()) {
-        return;
-      }
-      close();
-    };
-    // Capture, so a press is seen even where something below it stops the
-    // event — a menu inside the dialog, for instance.
-    document.addEventListener("pointerdown", onOutsidePress, true);
-
     // Where the caller said, then the first thing worth acting on, then the
     // dialog itself when it holds nothing focusable — so focus is inside it
     // whichever of the three answers.
@@ -297,14 +276,26 @@ export component DialogBody(
     target.focus();
 
     return () => {
-      document.removeEventListener("pointerdown", onOutsidePress, true);
       // Order matters: the page comes back before focus is restored, because
       // the trigger is one of the elements that was made `inert` and an inert
       // element cannot take focus.
       restorePage();
       opener?.focus?.();
     };
-  }, [dialog.open, dialog.triggerRef, close, dismissable, initialFocus]);
+  }, [dialog.open, dialog.triggerRef, initialFocus]);
+
+  // A confirmation declines to close here, and `Escape` still does. See the
+  // module header: there is a difference between a dialog the reader dismissed
+  // and one that went away while they were reaching for it.
+  useInteractOutside({
+    isDisabled: !dialog.open,
+    onInteractOutside: () => {
+      if (dismissable()) {
+        close();
+      }
+    },
+    refs: [bodyRef, dialog.triggerRef],
+  });
 
   if (!dialog.open) {
     return null;

package/index.js

@@ -799,6 +799,7 @@ export {
   useFocusVisible,
   useHover,
   useInteractionModality,
+  useInteractOutside,
   useKeyboard,
   useLongPress,
   useMove,
@@ -815,6 +816,8 @@ export type {
   HoverResult,
   InteractionEvent,
   InteractionProps,
+  InteractOutsideOptions,
+  InteractOutsideRef,
   KeyboardInteraction,
   KeyboardOptions,
   KeyboardProps,

package/interactions.js

@@ -107,6 +107,27 @@
 // "a press outside closes it" is a promise a component makes to a reader who
 // pressed something else, not to the thing they pressed.
 //
+// # A press outside
+//
+// `useInteractOutside` is the other half of a press, and the one an overlay
+// asks for: not "was this element pressed?" but "did the reader press
+// somewhere else?". A `pointerdown` alone cannot answer it. On a touchscreen
+// that event is the first of *every* touch, the one that scrolls the page
+// included; the browser cancels that pointer as the scroll begins and never
+// sends a click, so an overlay that dismissed on `pointerdown` had already
+// gone by the time the reader's finger moved. It is wrong for a mouse in two
+// smaller ways as well: a press that starts outside and is released inside
+// dismissed, and so did the right button, which is asking for a context menu
+// beside an overlay rather than asking for it to go away.
+//
+// So an outside interaction is a whole gesture: a `pointerdown` *and* the
+// release that ends the same pointer, both outside, from the primary button,
+// with the target still in the document. A gesture the browser cancels has no
+// end and dismisses nothing. The listeners are the document's and in the
+// capture phase, so a component that stops the event inside the page cannot
+// hide a press from the overlay above it — "a press outside closes it" is a
+// promise made to the reader who pressed something else.
+//
 // # Hover
 //
 // `useHover` is a mouse's and a pen's. A finger has no hover, so a touch
@@ -1134,6 +1155,145 @@ export hook usePress(options?: PressOptions): PressResult {
   return { isPressed, pressProps };
 }
 
+// ---------------------------------------------------------------------------
+// useInteractOutside
+// ---------------------------------------------------------------------------
+
+/** A ref to an element a press may land in without being "outside". */
+export type InteractOutsideRef = { readonly current: HTMLElement | null, ... };
+
+/** What `useInteractOutside` is told. */
+export type InteractOutsideOptions = {|
+  /** Hear nothing: what an overlay that is closed asks for. */
+  readonly isDisabled?: boolean,
+  /** A whole gesture began and ended outside every ref. */
+  readonly onInteractOutside: (event: Event) => mixed,
+  /**
+   * The elements that are not "outside".
+   *
+   * The overlay, and whatever opens it: a trigger sits outside the overlay's
+   * own box and is not "outside" for this purpose, because dismissing there
+   * and then letting the trigger's own click reopen makes a press on it a
+   * no-op that flickers.
+   *
+   * Read when an event arrives rather than when the listener is attached, so a
+   * ref that is still null on the commit that opened the overlay is not a
+   * listener that quietly never worked.
+   */
+  readonly refs: $ReadOnlyArray<InteractOutsideRef>,
+|};
+
+/** A pointer that went down outside and has not ended anywhere yet. */
+type OutsideGesture = {| readonly pointerId: number |};
+
+/**
+ * Whether `node` is still in the document.
+ *
+ * A press whose target left the page between going down and coming up did not
+ * end outside anything: it ended on something that is no longer there, and the
+ * reader was most likely pressing what replaced it.
+ */
+function isStillInDocument(document: mixed, node: mixed): boolean {
+  const root: $FlowFixMe = document;
+  const element: $FlowFixMe = root?.documentElement;
+  return element != null && contains(element, node);
+}
+
+/**
+ * A press that began *and* ended outside an element: what dismisses an overlay.
+ *
+ *     useInteractOutside({
+ *       isDisabled: !open,
+ *       onInteractOutside: close,
+ *       refs: [bodyRef, triggerRef],
+ *     });
+ *
+ * The module header says what a bare `pointerdown` gets wrong and why this
+ * waits for the end of the gesture. One hook rather than a copy in each
+ * overlay, because a copy is how the answers drift apart: the case that a
+ * scroll must not dismiss is one rule, not five.
+ */
+export hook useInteractOutside(options: InteractOutsideOptions): void {
+  const gesture = useRef<OutsideGesture | null>(null);
+  const isDisabled = options.isDisabled === true;
+
+  const isOutside = useStableCallback((target: mixed): boolean => {
+    for (const ref of options.refs) {
+      const element: $FlowFixMe = ref.current;
+      if (element != null && contains(element, target)) {
+        return false;
+      }
+    }
+    return true;
+  });
+
+  const dismiss = useStableCallback((event: Event) => {
+    options.onInteractOutside(event);
+  });
+
+  useEffect(() => {
+    if (isDisabled) {
+      gesture.current = null;
+      return;
+    }
+    const host: $FlowFixMe = globalThis;
+    const document = host.document;
+    if (document == null) {
+      return;
+    }
+
+    // Only the primary button begins one. A right click is asking for a
+    // context menu beside the overlay, not for the overlay to go away.
+    const onPointerDown = (event: $FlowFixMe) => {
+      gesture.current =
+        event.button === 0 && isOutside(event.target) ? { pointerId: event.pointerId ?? 0 } : null;
+    };
+
+    // The release that ends the gesture this began. A click is accepted as
+    // that end as well, for a host where the release never arrives — and it
+    // cannot dismiss twice, because the first end takes the gesture with it.
+    const end = (event: $FlowFixMe, samePointer: boolean) => {
+      const began = gesture.current;
+      if (began == null || (samePointer && (event.pointerId ?? 0) !== began.pointerId)) {
+        return;
+      }
+      gesture.current = null;
+      if (
+        event.button !== 0 ||
+        !isOutside(event.target) ||
+        !isStillInDocument(document, event.target)
+      ) {
+        return;
+      }
+      dismiss(event);
+    };
+
+    const onPointerUp = (event: $FlowFixMe) => end(event, true);
+    const onClick = (event: $FlowFixMe) => end(event, false);
+
+    // A gesture the browser took back — the scroll this hook exists for — ends
+    // nowhere, and dismisses nothing.
+    const onPointerCancel = (event: $FlowFixMe) => {
+      const began = gesture.current;
+      if (began != null && (event.pointerId ?? 0) === began.pointerId) {
+        gesture.current = null;
+      }
+    };
+
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("pointerup", onPointerUp, true);
+    document.addEventListener("pointercancel", onPointerCancel, true);
+    document.addEventListener("click", onClick, true);
+    return () => {
+      gesture.current = null;
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("pointerup", onPointerUp, true);
+      document.removeEventListener("pointercancel", onPointerCancel, true);
+      document.removeEventListener("click", onClick, true);
+    };
+  }, [isDisabled, isOutside, dismiss]);
+}
+
 // ---------------------------------------------------------------------------
 // Which input came last
 // ---------------------------------------------------------------------------

package/menu.js

@@ -106,6 +106,8 @@ import {
 } from "@uniflowed/react";
 import { useStableCallback } from "@uniflowed/hooks/lifecycle";
 
+import { useInteractOutside } from "./interactions.js";
+
 import type { Align, LogicalSide } from "./internal/anchor.js";
 import { useAnchor } from "./internal/anchor.js";
 import type { PartEvent, RenderProp, Rest } from "./internal/merge-props.js";
@@ -337,30 +339,7 @@ export component MenuBody(
       setActiveId(landing.id);
     }
 
-    const onOutsidePress = (event: Event) => {
-      const target: $FlowFixMe = event.target;
-      if (target == null || body.contains(target)) {
-        return;
-      }
-      // The trigger is outside the menu and is not "outside" for this purpose:
-      // closing here and letting the trigger's own click reopen made a press on
-      // the trigger a no-op that flickered.
-      if (trigger != null && trigger.contains(target)) {
-        return;
-      }
-      dismissed.current = true;
-      closeAll();
-    };
-    // Only the outermost menu listens. A submenu closes with the tree, and two
-    // listeners would each answer the same press.
-    if (isRoot) {
-      document.addEventListener("pointerdown", onOutsidePress, true);
-    }
-
     return () => {
-      if (isRoot) {
-        document.removeEventListener("pointerdown", onOutsidePress, true);
-      }
       if (dismissed.current) {
         dismissed.current = false;
         return;
@@ -373,7 +352,18 @@ export component MenuBody(
         trigger?.focus?.();
       }
     };
-  }, [menu.open, isRoot, triggerRef, pendingFocus, closeAll]);
+  }, [menu.open, triggerRef, pendingFocus]);
+
+  // Only the outermost menu listens. A submenu closes with the tree, and two
+  // of these would each answer the same press.
+  useInteractOutside({
+    isDisabled: !menu.open || !isRoot,
+    onInteractOutside: () => {
+      dismissed.current = true;
+      closeAll();
+    },
+    refs: [bodyRef, triggerRef],
+  });
 
   const list = useMemo(() => ({ activeId, setActiveId }), [activeId]);
 

package/menubar.js

@@ -82,7 +82,7 @@ import {
   moveTo,
   useFirstItem,
 } from "./internal/roving-focus.js";
-import { MenuLevel, useMenu } from "./internal/menu-tree.js";
+import { MenuLevel, useMenu, useTriggerRegistration } from "./internal/menu-tree.js";
 
 /**
  * The bar's own items, and the two things that may own one.
@@ -239,6 +239,7 @@ export component MenubarTrigger(children: React.Node, render?: RenderProp, ...re
   const bar = useMenubar("Menubar.Trigger");
   const menu = useMenu("Menubar.Trigger");
   const value = useContext(MenubarMenuContext);
+  useTriggerRegistration(menu);
   if (value == null) {
     throw new Error("Menubar.Trigger must be rendered inside a Menubar.Menu");
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniflowed/ui",
-  "version": "0.0.0-alpha.39",
+  "version": "0.0.0-alpha.40",
   "description": "Headless, accessible React components whose composition Flow checks, part of the Unified Toolchain for Flow.",
   "type": "module",
   "license": "MIT",
@@ -19,10 +19,10 @@
     "!*.test.js"
   ],
   "dependencies": {
-    "@uniflowed/core": "0.0.0-alpha.39",
-    "@uniflowed/hooks": "0.0.0-alpha.39",
-    "@uniflowed/react": "0.0.0-alpha.39",
-    "@uniflowed/state": "0.0.0-alpha.39"
+    "@uniflowed/core": "0.0.0-alpha.40",
+    "@uniflowed/hooks": "0.0.0-alpha.40",
+    "@uniflowed/react": "0.0.0-alpha.40",
+    "@uniflowed/state": "0.0.0-alpha.40"
   },
   "peerDependencies": {
     "react": ">=19"

package/pagination.js

@@ -170,11 +170,10 @@ export component PaginationNext(
  * say, correctly, that `disabled` might not be a boolean. Handing the bag over
  * as one value keeps it a bag until it reaches the element it was always for.
  *
- * `disabled` drops the `href` rather than adding an attribute, because there
- * is no such thing as a disabled link: an `<a>` with no `href` is not in the
- * tab order and is not announced as a link, which is exactly what "there is no
- * previous page" means. `aria-disabled` is there too, so a reader who reaches
- * it another way is told why it does nothing.
+ * `disabled` drops the `href` and keeps the link role. That is the ARIA shape
+ * for "this page direction exists, but cannot be taken now": it is out of the
+ * tab order because there is no `href`, still named as Previous or Next, and
+ * announced as disabled rather than as a silent generic element.
  */
 component PageLink(
   rest: Rest,
@@ -190,10 +189,11 @@ component PageLink(
     "aria-disabled": disabled ? "true" : undefined,
     "aria-label": label,
     children,
+    role: disabled ? "link" : undefined,
   });
 
   if (render != null) {
-    return <li>{render(withProps(props, { role: disabled ? undefined : "link" }))}</li>;
+    return <li>{render(withProps(props, { role: "link" }))}</li>;
   }
 
   return (

package/popover.js

@@ -58,6 +58,8 @@ import {
 } from "@uniflowed/react";
 import { useStableCallback } from "@uniflowed/hooks/lifecycle";
 
+import { useInteractOutside } from "./interactions.js";
+
 import type { Align, LogicalSide } from "./internal/anchor.js";
 import type { PartEvent, RenderProp, Rest } from "./internal/merge-props.js";
 import {
@@ -247,17 +249,6 @@ export component PopoverBody(
       return node != null && !body.contains(node) && !(trigger?.contains(node) ?? false);
     };
 
-    const onOutsidePress = (event: Event) => {
-      if (!outside(event.target)) {
-        return;
-      }
-      left.current = true;
-      close();
-    };
-    // Capture, so a press is seen even where something below it stops the
-    // event — a menu inside the popover, for instance.
-    document.addEventListener("pointerdown", onOutsidePress, true);
-
     // Tab out is a dismissal, not an escape hatch that leaves a popover open
     // behind the reader: a non-modal overlay whose reader has gone is one they
     // can no longer press Escape at, because Escape is handled where focus is.
@@ -281,7 +272,6 @@ export component PopoverBody(
     ((named != null && body.contains(named) ? named : focusable(body)[0]) ?? body).focus();
 
     return () => {
-      document.removeEventListener("pointerdown", onOutsidePress, true);
       document.removeEventListener("focusin", onFocusMoved, true);
       if (left.current) {
         left.current = false;
@@ -298,6 +288,17 @@ export component PopoverBody(
     };
   }, [popover.open, triggerRef, close, initialFocus]);
 
+  // A press outside is the other way a reader leaves, and the trigger is not
+  // "outside" for the reason the module header gives.
+  useInteractOutside({
+    isDisabled: !popover.open,
+    onInteractOutside: () => {
+      left.current = true;
+      close();
+    },
+    refs: [bodyRef, triggerRef],
+  });
+
   if (!popover.open) {
     return null;
   }

package/select.js

@@ -146,6 +146,8 @@ import {
 } from "@uniflowed/react";
 import { useStableCallback } from "@uniflowed/hooks/lifecycle";
 
+import { useInteractOutside } from "./interactions.js";
+
 import type { Align, LogicalSide } from "./internal/anchor.js";
 import { useAnchor } from "./internal/anchor.js";
 import type { Rest } from "./internal/merge-props.js";
@@ -691,32 +693,16 @@ export component SelectList(
     }
   });
 
-  // Keyed on `select.open`, which is load-bearing: this component is mounted
-  // the whole time and only *renders* while the list is open, so keyed on the
-  // stable callbacks alone the effect would run once, on the commit where
-  // `listRef.current` was still null, and never attach the listener at all.
-  useEffect(() => {
-    const list = listRef.current;
-    if (list == null) {
-      return;
-    }
-    const document = list.ownerDocument;
-    const onOutsidePress = (event: Event) => {
-      const target: $FlowFixMe = event.target;
-      if (target == null || list.contains(target)) {
-        return;
-      }
-      // The trigger is not "outside": closing here and letting its own click
-      // reopen the list makes a press on the trigger a no-op that flickers.
-      const trigger = triggerRef.current;
-      if (trigger != null && trigger.contains(target)) {
-        return;
-      }
-      close();
-    };
-    document.addEventListener("pointerdown", onOutsidePress, true);
-    return () => document.removeEventListener("pointerdown", onOutsidePress, true);
-  }, [select.open, close, listRef, triggerRef]);
+  // The refs are read when a press arrives rather than when the listener is
+  // attached, which is what makes `select.open` the only thing this depends on:
+  // this component is mounted the whole time and only *renders* while the list
+  // is open, and a listener attached on the commit where `listRef.current` was
+  // still null used to be one that never worked.
+  useInteractOutside({
+    isDisabled: !select.open,
+    onInteractOutside: () => close(),
+    refs: [listRef, triggerRef],
+  });
 
   if (!select.open) {
     return null;

package/sidebar.js

@@ -208,7 +208,12 @@ export component SidebarTrigger(children: React.Node, ...rest: Rest) {
  * announced as "navigation" — and a page with two of those has told the reader
  * there are two and which is which is a guess.
  */
-export component SidebarBody(children: React.Node, label: string, ...rest: Rest) {
+export component SidebarBody(
+  children: React.Node,
+  label: string,
+  sheetProps?: Rest,
+  ...rest: Rest
+) {
   const sidebar = useSidebar("Sidebar.Body");
   const nav = (
     <nav
@@ -230,7 +235,9 @@ export component SidebarBody(children: React.Node, label: string, ...rest: Rest)
   return (
     <>
       <SheetOverlay />
-      <SheetBody aria-label={label}>{nav}</SheetBody>
+      <SheetBody {...forwarded(sheetProps ?? {})} aria-label={label}>
+        {nav}
+      </SheetBody>
     </>
   );
 }
@@ -264,6 +271,7 @@ export component SidebarItem(
   children: React.Node,
   label: string,
   render?: RenderProp,
+  tooltipProps?: Rest,
   ...rest: Rest
 ) {
   const sidebar = useSidebar("Sidebar.Item");
@@ -294,7 +302,12 @@ export component SidebarItem(
   return (
     <TooltipRoot>
       <TooltipTrigger ref={rest.ref} render={(props: Rest) => entry(props)} />
-      <TooltipBody side={sidebar.side === "left" ? "right" : "left"}>{label}</TooltipBody>
+      <TooltipBody
+        {...forwarded(tooltipProps ?? {})}
+        side={sidebar.side === "left" ? "right" : "left"}
+      >
+        {label}
+      </TooltipBody>
     </TooltipRoot>
   );
 }

package/table.js

@@ -57,9 +57,8 @@
 // It is rendered by the root rather than offered as a part a caller places,
 // because a sort that announces nothing is the failure this component exists
 // to prevent and a part is a thing somebody forgets. The cost is one extra
-// element in the caller's layout, and a sentence that is visible until they
-// style it — which is not a bad thing to see, and a table that shows its sort
-// status in words is a table more people can use.
+// element after the table, hidden from layout and visible to the screen readers
+// watching it.
 
 "use client";
 
@@ -105,6 +104,19 @@ const TableContext: React.Context<TableState | null> = createContext(null);
 /** Whether the rows below are header rows, which decides `th` versus `td`. */
 const HeaderContext: React.Context<boolean> = createContext(false);
 
+const VISUALLY_HIDDEN_STYLE = Object.freeze({
+  border: 0,
+  clip: "rect(0, 0, 0, 0)",
+  clipPath: "inset(50%)",
+  height: 1,
+  margin: -1,
+  overflow: "hidden",
+  padding: 0,
+  position: "absolute",
+  whiteSpace: "nowrap",
+  width: 1,
+});
+
 hook useTable(part: string): TableState {
   const state = useContext(TableContext);
   if (state == null) {
@@ -205,7 +217,13 @@ export component TableRoot(
         first render, holding nothing, because a live region that appears with
         its text is a live region that says nothing.
       */}
-      <div aria-atomic="true" aria-live="polite" data-uf-table-status="" role="status">
+      <div
+        aria-atomic="true"
+        aria-live="polite"
+        data-uf-table-status=""
+        role="status"
+        style={VISUALLY_HIDDEN_STYLE}
+      >
         {message}
       </div>
     </TableContext.Provider>

package/toggle-group.js

@@ -193,7 +193,6 @@ export component ToggleGroupRoot(
 
   const passed = withoutComposed(rest, ["onKeyDown", "ref"]);
   const rootProps = withProps(passed, {
-    "aria-orientation": orientation,
     children,
     onKeyDown: composeHandlers(rest.onKeyDown, (event: PartEvent) => {
       const group: $FlowFixMe = event.currentTarget;