@uniflowed/ui 0.0.0-alpha.8 → 0.1.0

package/scroll-area.js

@@ -0,0 +1,283 @@
+// @flow
+//
+// A scroll area: a scrollbar you drew yourself, and the keyboard you took away
+// when you did.
+//
+// # What it gives that `overflow: auto` does not
+//
+// A `<div style="overflow: auto">` scrolls with the wheel, with a trackpad, and
+// with a finger. What it does not reliably do is scroll from the keyboard,
+// because it may not be focusable: Firefox makes a scrollable region focusable,
+// Chromium historically does not, and Safari's answer depends on the setting
+// that controls whether `Tab` reaches anything but form controls. So a region
+// that must be scrolled to be read is, in most browsers, a region a keyboard
+// reader can see the top of and nothing else. That is WCAG 2.1.1, and it is the
+// entire reason to have this component rather than the `div`:
+//
+//   * **`tabindex="0"`, `role="region"` and a name.** The tab stop is what
+//     makes the arrow keys and `PageDown` work; the role and the name are what
+//     keep a tab stop from being a mystery — a focusable `div` with no name is
+//     announced as nothing at all, which is a worse place to land than the
+//     `div` was.
+//   * **Nothing is intercepted.** No `onKeyDown`, no `onWheel`, no
+//     `scroll-behavior` written from JavaScript. Every key that scrolls a
+//     native overflow container scrolls this one, because this one *is* a
+//     native overflow container and the component's whole contribution is not
+//     getting in its way. A scroll area that reimplemented `PageDown` would
+//     have to reimplement `Home`, `End`, the space bar, caret browsing and
+//     whatever the reader's own software sends, and would get one of them
+//     wrong.
+//   * **`scrollIntoView({ block: "nearest" })` still works.** `combobox.js` and
+//     `select.js` both call it to keep the active option visible, so a
+//     `Combobox.List` inside a `ScrollArea` is a case that has to work. It does
+//     because the viewport is a plain scroll container and nothing here
+//     overrides `scrollTop`; the one time this module writes it is described
+//     below, and it is exactly the case where the browser has already thrown
+//     the position away.
+//   * **The position survives a re-render.** Replacing the content of a scroll
+//     container — a filtered list, a new page of results — makes the browser
+//     clamp `scrollTop` to a shorter document and it does not put it back. The
+//     viewport remembers where the reader actually scrolled to, from the
+//     `scroll` event, and restores it after a commit that lost it. A reader who
+//     scrolls to the top themselves fires a `scroll` event, so the remembered
+//     position is theirs and this never fights them.
+//
+// # The scrollbar is a picture
+//
+// `ScrollArea.Scrollbar` is `aria-hidden` and holds no controls. That is the
+// decision the component is made of: the *region* is the thing that scrolls and
+// the keyboard is how it is operated, so a drawn scrollbar has nothing it must
+// be able to do — which means it never has to answer WCAG 2.5.7's question
+// about dragging, because nothing here is achievable only by dragging. It
+// reports where the content is as two custom properties and stays out of the
+// accessibility tree, where a second, mouse-only copy of the scroll position
+// would be noise.
+
+"use client";
+
+import * as React from "@uniflowed/react";
+import { createContext, useContext, useEffect, useId, useMemo, useRef } from "@uniflowed/react";
+import { useEventListener } from "@uniflowed/hooks/dom";
+
+import type { Orientation } from "./internal/roving-focus.js";
+import type { Rest } from "./internal/merge-props.js";
+import { composeRefs, withoutComposed } from "./internal/merge-props.js";
+
+export type { Orientation } from "./internal/roving-focus.js";
+
+/** Where the reader last actually was, per axis. */
+type Offset = {| x: number, y: number |};
+
+type ScrollAreaState = {|
+  readonly base: string,
+  readonly label: string,
+  readonly viewportRef: { current: HTMLElement | null },
+  readonly rememberedRef: { current: Offset },
+  /** Written by the viewport, read by every scrollbar. */
+  readonly report: () => void,
+  readonly scrollbarsRef: { current: Array<HTMLElement> },
+|};
+
+const ScrollAreaContext: React.Context<ScrollAreaState | null> = createContext(null);
+
+/**
+ * The scroll area a part belongs to.
+ *
+ * Raising rather than returning null, for the reason `useDialog` gives: a
+ * `ScrollArea.Scrollbar` outside a root would draw a thumb for a viewport it
+ * has never measured, and it would look correct until the content moved.
+ */
+hook useScrollArea(part: string): ScrollAreaState {
+  const state = useContext(ScrollAreaContext);
+  if (state == null) {
+    throw new Error(`${part} must be rendered inside a ScrollArea.Root`);
+  }
+  return state;
+}
+
+/**
+ * The box the viewport and the scrollbars sit in.
+ *
+ * `label` is required and lives here rather than on the viewport, because the
+ * name belongs to the whole component: it is what a reader hears when `Tab`
+ * lands them in it, and a scroll area that has to be scrolled to be read and is
+ * announced as "region" has told them nothing.
+ */
+export component ScrollAreaRoot(children: React.Node, label: string, ...rest: Rest) {
+  const base = useId();
+  const viewportRef = useRef<HTMLElement | null>(null);
+  const rememberedRef = useRef<Offset>({ x: 0, y: 0 });
+  const scrollbarsRef = useRef<Array<HTMLElement>>([]);
+
+  const state = useMemo(
+    () => ({
+      base,
+      label,
+      rememberedRef,
+      report: () => {
+        const viewport = viewportRef.current;
+        if (viewport == null) {
+          return;
+        }
+        for (const scrollbar of scrollbarsRef.current) {
+          write(scrollbar, viewport);
+        }
+      },
+      scrollbarsRef,
+      viewportRef,
+    }),
+    [base, label],
+  );
+
+  return (
+    <ScrollAreaContext.Provider value={state}>
+      <div {...rest}>{children}</div>
+    </ScrollAreaContext.Provider>
+  );
+}
+
+/**
+ * The element that actually scrolls: a named region, in the tab sequence.
+ *
+ * It carries no key handling at all. See the module header — every key that
+ * scrolls a native overflow container scrolls this one because it is one, and
+ * the component's contribution is the tab stop that lets those keys arrive.
+ */
+export component ScrollAreaViewport(children: React.Node, ...rest: Rest) {
+  const area = useScrollArea("ScrollArea.Viewport");
+  const { rememberedRef, report, viewportRef } = area;
+  const passed = withoutComposed(rest, ["ref"]);
+
+  useEventListener(viewportRef, "scroll", () => {
+    const viewport = viewportRef.current;
+    if (viewport == null) {
+      return;
+    }
+    // The reader's own position, including a deliberate scroll back to the
+    // top — which is why the restore below never fights them.
+    rememberedRef.current = { x: viewport.scrollLeft, y: viewport.scrollTop };
+    report();
+  });
+
+  // After every commit, because a commit is what replaces the content: a
+  // shorter document makes the browser clamp the offset to fit and it does not
+  // put it back when the content grows again.
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    if (viewport == null) {
+      return;
+    }
+    const { x, y } = rememberedRef.current;
+    if (y !== 0 && viewport.scrollTop === 0) {
+      viewport.scrollTop = y;
+    }
+    if (x !== 0 && viewport.scrollLeft === 0) {
+      viewport.scrollLeft = x;
+    }
+    report();
+  });
+
+  return (
+    <div
+      {...passed}
+      aria-label={area.label}
+      id={`${area.base}-viewport`}
+      ref={composeRefs(rest.ref, (element: HTMLElement | null) => {
+        viewportRef.current = element;
+      })}
+      // A named region, which is what makes the tab stop below explicable
+      // rather than a place a reader lands and cannot account for.
+      role="region"
+      // The whole component. Without it the arrow keys and `PageDown` never
+      // arrive, and the bottom of this box is unreachable from a keyboard in
+      // every browser that does not make scroll containers focusable.
+      tabIndex={0}
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * The drawn scrollbar: two numbers and no semantics.
+ *
+ * `--uf-scroll-thumb-size` is the thumb's length as a fraction of the track and
+ * `--uf-scroll-thumb-offset` is where along it the thumb sits, both between 0
+ * and 1, so a stylesheet can draw one with a `scale` and a `translate` and
+ * measure nothing. `aria-hidden`, because the region it belongs to is already
+ * the thing a reader operates.
+ */
+export component ScrollAreaScrollbar(
+  children?: React.Node,
+  orientation?: Orientation = "vertical",
+  ...rest: Rest
+) {
+  const area = useScrollArea("ScrollArea.Scrollbar");
+  const { report, scrollbarsRef } = area;
+  const passed = withoutComposed(rest, ["ref"]);
+
+  return (
+    <div
+      {...passed}
+      // A picture of the scroll position is not something a screen reader has
+      // any use for: it cannot be operated, and the region it describes
+      // announces itself.
+      aria-hidden="true"
+      data-orientation={orientation}
+      ref={composeRefs(rest.ref, (element: HTMLElement | null) => {
+        const kept = scrollbarsRef.current.filter((each) => each !== element);
+        scrollbarsRef.current = element == null ? kept : [...kept, element];
+        report();
+      })}
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Write where the content is onto a scrollbar.
+ *
+ * Imperatively, and only these two properties, for the reason
+ * `internal/anchor.js` gives about a placement: they change on every scroll
+ * frame, and re-rendering the scroll area and everything in it sixty times a
+ * second to move a thumb is the cost this package does not pay. React sets
+ * neither property, so a caller's `style` keeps everything in it.
+ *
+ * Both axes are written on every scrollbar rather than the one its
+ * `data-orientation` names, because a stylesheet reads the pair it wants and a
+ * branch here would be a second place the orientation is decided.
+ */
+function write(scrollbar: HTMLElement, viewport: HTMLElement): void {
+  const style = scrollbar.style;
+  style.setProperty(
+    "--uf-scroll-thumb-size",
+    String(fraction(viewport.clientHeight, viewport.scrollHeight)),
+  );
+  style.setProperty(
+    "--uf-scroll-thumb-offset",
+    String(fraction(viewport.scrollTop, viewport.scrollHeight - viewport.clientHeight)),
+  );
+  style.setProperty(
+    "--uf-scroll-thumb-size-x",
+    String(fraction(viewport.clientWidth, viewport.scrollWidth)),
+  );
+  style.setProperty(
+    "--uf-scroll-thumb-offset-x",
+    String(fraction(viewport.scrollLeft, viewport.scrollWidth - viewport.clientWidth)),
+  );
+}
+
+/**
+ * `part / whole`, clamped, and 1 when there is no whole.
+ *
+ * A document that computes no layout reports every measurement as zero, and
+ * `0 / 0` is `NaN` — which a stylesheet reading the custom property renders as
+ * a thumb of no size at all rather than as a full-length one.
+ */
+function fraction(part: number, whole: number): number {
+  if (!(whole > 0)) {
+    return 1;
+  }
+  return Math.min(1, Math.max(0, part / whole));
+}

package/select.js

@@ -146,6 +146,10 @@ 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";
 import { composeHandlers, composeRefs, withoutComposed } from "./internal/merge-props.js";
 import type { Movement } from "./internal/roving-focus.js";
@@ -153,6 +157,8 @@ import { isTypeaheadKey, itemsOf, moveTo, useTypeahead } from "./internal/roving
 import { useControlled } from "./internal/controlled-state.js";
 import { FormValue } from "./internal/form-value.js";
 
+export type { Align, LogicalSide, Side } from "./internal/anchor.js";
+
 const OPTION_SELECTOR = '[role="option"]';
 const LISTBOX_SELECTOR = '[role="listbox"]';
 
@@ -186,7 +192,7 @@ type SelectState = {|
   /** The id of the option `aria-activedescendant` names, if any. */
   readonly activeId: string | null,
   readonly setActiveId: (id: string | null) => void,
-  readonly pendingLanding: { current: Landing | null },
+  readonly pendingLandingRef: { current: Landing | null },
   readonly triggerRef: { current: HTMLElement | null },
   readonly listRef: { current: HTMLElement | null },
   /**
@@ -264,7 +270,7 @@ export component SelectRoot(
   const [activeId, setActiveId] = useState<string | null>(null);
   const [labels, setLabels] = useState<{ readonly [string]: string }>({});
   const [labelled, setLabelled] = useState(false);
-  const pendingLanding = useRef<Landing | null>(null);
+  const pendingLandingRef = useRef<Landing | null>(null);
   const triggerRef = useRef<HTMLElement | null>(null);
   const listRef = useRef<HTMLElement | null>(null);
   const typeahead = useTypeahead();
@@ -307,7 +313,7 @@ export component SelectRoot(
       choose,
       activeId,
       setActiveId,
-      pendingLanding,
+      pendingLandingRef,
       triggerRef,
       listRef,
       labels,
@@ -409,7 +415,9 @@ export component SelectTrigger(children: React.Node, ...rest: Rest) {
   /** Move the cursor within an open list, or open with an instruction. */
   const move = (end: Movement, preferSelected: boolean) => {
     if (!select.open) {
-      select.pendingLanding.current = { kind: "end", end, preferSelected };
+      // This is an instruction for the list after the opening commit.
+      // uf-lint-disable-next-line react-compiler/immutability
+      select.pendingLandingRef.current = { kind: "end", end, preferSelected };
       select.setOpen(true);
       return;
     }
@@ -452,7 +460,9 @@ export component SelectTrigger(children: React.Node, ...rest: Rest) {
           select.setActiveId(null);
           return;
         }
-        select.pendingLanding.current = { kind: "end", end: "first", preferSelected: true };
+        // This is an instruction for the list after the opening commit.
+        // uf-lint-disable-next-line react-compiler/immutability
+        select.pendingLandingRef.current = { kind: "end", end: "first", preferSelected: true };
         select.setOpen(true);
       })}
       onKeyDown={composeHandlers(rest.onKeyDown, (event: $FlowFixMe) => {
@@ -494,7 +504,9 @@ export component SelectTrigger(children: React.Node, ...rest: Rest) {
           // again as a click.
           event.preventDefault();
           if (!select.open) {
-            select.pendingLanding.current = { kind: "end", end: "first", preferSelected: true };
+            // This is an instruction for the list after the opening commit.
+            // uf-lint-disable-next-line react-compiler/immutability
+            select.pendingLandingRef.current = { kind: "end", end: "first", preferSelected: true };
             select.setOpen(true);
             return;
           }
@@ -538,7 +550,8 @@ export component SelectTrigger(children: React.Node, ...rest: Rest) {
           event.preventDefault();
           // The options are not in the document yet, so the keystroke travels
           // to the commit that renders them.
-          select.pendingLanding.current = { kind: "typed", key: event.key };
+          // uf-lint-disable-next-line react-compiler/immutability
+          select.pendingLandingRef.current = { kind: "typed", key: event.key };
           select.setOpen(true);
           return;
         }
@@ -554,6 +567,8 @@ export component SelectTrigger(children: React.Node, ...rest: Rest) {
         }
       })}
       ref={composeRefs(rest.ref, (element) => {
+        // React calls callback refs during commit; the list reads the trigger later.
+        // uf-lint-disable-next-line react-compiler/immutability
         select.triggerRef.current = element;
       })}
       role="combobox"
@@ -613,20 +628,46 @@ export component SelectValue(children?: React.Node, placeholder?: React.Node, ..
  */
 export component SelectList(
   children: renders* (SelectOption | SelectGroup | SelectSeparator),
+  align?: Align = "start",
+  alignOffset?: number = 0,
+  avoidCollisions?: boolean = true,
+  collisionPadding?: number = 0,
+  side?: LogicalSide = "bottom",
+  sideOffset?: number = 0,
   ...rest: Rest
 ) {
   const select = useSelect("Select.List");
-  const { activeId, listRef, pendingLanding, setActiveId, triggerRef, typeahead, value } = select;
+  const { activeId, listRef, pendingLandingRef, setActiveId, triggerRef, typeahead, value } =
+    select;
   const close = useStableCallback(() => {
     select.setOpen(false);
     select.setActiveId(null);
   });
 
+  // The popup a select opens is the one case where the trigger's *width* is
+  // part of the design rather than a detail: a list narrower than the button it
+  // came out of reads as a different control. `--uf-anchor-trigger-width` is
+  // written on this element for a stylesheet to use, which is why the
+  // measurement is here and not in the caller.
+  const anchored = useAnchor({
+    align,
+    alignOffset,
+    anchorRef: triggerRef,
+    avoidCollisions,
+    collisionPadding,
+    open: select.open,
+    overlayRef: listRef,
+    side,
+    sideOffset,
+  });
+
   // No dependency list, for the reason `combobox.js` gives: what this reads is
   // the *rendered* options, and a caller may render different ones on any
   // render — a change to `children` that no dependency list can describe. Every
   // write is guarded by a comparison, so it settles after one extra pass rather
   // than looping.
+  // This effect measures caller-rendered options after commit.
+  // uf-lint-disable-next-line react-compiler/immutability
   useEffect(() => {
     const list = listRef.current;
     if (list == null) {
@@ -634,9 +675,10 @@ export component SelectList(
     }
     const items = itemsOf(list, OPTION_SELECTOR, LISTBOX_SELECTOR);
 
-    const wanted = pendingLanding.current;
+    const wanted = pendingLandingRef.current;
     if (wanted != null) {
-      pendingLanding.current = null;
+      // uf-lint-disable-next-line react-compiler/immutability
+      pendingLandingRef.current = null;
       // An `if` rather than a `match` on `wanted.kind`, because matching on a
       // property does not refine the object that property came from: inside
       // `match (wanted.kind)` both arms still see the whole union, and `uf
@@ -664,32 +706,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;
@@ -701,6 +727,8 @@ export component SelectList(
     <div
       {...passed}
       aria-labelledby={select.labelled ? `${select.base}-label` : undefined}
+      data-align={anchored.align}
+      data-side={anchored.side}
       id={`${select.base}-list`}
       ref={composeRefs(rest.ref, (element) => {
         listRef.current = element;
@@ -793,8 +821,26 @@ export component SelectOption(
  * `Select.GroupLabel` is rendered — the same rule, and the same reason, as
  * `Menu.Group`. The arrow keys pass over the label without stopping on it,
  * because they only ever look for `role="option"`.
+ *
+ * `children` is `renders* (SelectOption | SelectGroupLabel)`, which is what a
+ * `group` inside a `listbox` may hold: options, and the heading that names
+ * them. It took `React.Node` until ubugeeei-prod/uf#562, so a `<div>` in a
+ * group was a runtime surprise — an element with no role between two options,
+ * which the arrow keys walk straight past and a screen reader reads as a stray
+ * line — rather than a type error. `Combobox.Group` has stated the constraint
+ * since #558 and this is the same listbox.
+ *
+ * No `Select.Separator`, and that is deliberate rather than an omission: a rule
+ * separates *groups*, so it belongs between them in `Select.List` — which does
+ * admit one. A separator inside a group is a rule with nothing on one side of
+ * it.
+ *
+ * **Breaking.** A caller passing anything else — a `<div>` wrapper, a fragment
+ * of their own, a component that returns options — now fails `uf check`. The
+ * fix is to hand the options to the group directly; a wrapper had no effect on
+ * what this renders, because the group's element is the one below.
  */
-export component SelectGroup(children: React.Node, ...rest: Rest) {
+export component SelectGroup(children: renders* (SelectOption | SelectGroupLabel), ...rest: Rest) {
   const base = useId();
   const [labelled, setLabelled] = useState(false);
 

package/separator.js

@@ -0,0 +1,97 @@
+// @flow
+//
+// A rule, and the one decision in it: whether anybody is told it is there.
+//
+// Two lines of markup, and it belongs in this package rather than in the preset
+// for the same reason `Progress` does — the component *is* a conditional about
+// what a reader hears:
+//
+//   * A separator **between groups of content** is `role="separator"` with an
+//     `aria-orientation`. A reader moving down the page is told the subject
+//     changed, which is the information the line was drawn to give and the only
+//     way they get it.
+//   * A **decorative** rule — the line under a heading, the hairline between a
+//     card's padding and its footer — is `aria-hidden="true"` and announced to
+//     nobody. It is a border that happens to be an element.
+//
+// Getting it backwards is silent in both directions: a decorative rule with the
+// role adds a "separator" to every reading of the page, and a real boundary
+// without it takes the boundary away from everyone who is not looking at it.
+//
+// The default is the semantic one, because the two mistakes do not cost the
+// same. A rule wrongly announced is noise a reader can hear and skip; a
+// boundary wrongly silent is information that is simply not there, and nobody
+// finds out. `progress.js` makes the same trade in its own sentence: the safe
+// answer has to be the honest one.
+//
+// # Why this is a `<div>` and not an `<hr>`
+//
+// An `<hr>` already carries `role="separator"`, so for a horizontal rule
+// between two blocks of prose it is the better answer and a caller who can use
+// one should. This exists for what it cannot do.
+//
+// It comes with a border and a margin from the browser's own stylesheet, and a
+// package that ships no styles cannot ship a visible line — every consumer
+// would begin by turning it off. It is horizontal by definition, so a vertical
+// rule between two things in a row is a rotated element rather than a described
+// one. And it is a paragraph-level break in the flow, which is not what a
+// hairline inside a toolbar is.
+//
+// # The two separators that are not this one
+//
+// `Menu.Separator` is the rule between groups of menu items, and belongs to the
+// menu because it has to be skipped by the arrow keys that walk it.
+// `Resizable.Handle` announces itself as a separator too, and is a *control* —
+// the APG window splitter, a separator that behaves like a slider. Neither is
+// this, and reaching for this one in either place loses the behaviour that made
+// them their own components.
+//
+// # No `"use client"`
+//
+// One element, two attributes, nothing to remember. It renders on a server.
+
+import type { Orientation } from "./internal/roving-focus.js";
+import type { RenderProp, Rest } from "./internal/merge-props.js";
+import { withProps } from "./internal/merge-props.js";
+
+export type { Orientation } from "./internal/roving-focus.js";
+
+/**
+ * A rule between two things, or a line that is only a line.
+ *
+ * `decorative` is the whole component. Without it the element is a
+ * `role="separator"` a reader is told about; with it the element is hidden from
+ * the accessibility tree entirely.
+ *
+ *     <Separator />
+ *     <Separator orientation="vertical" />
+ *     <Separator decorative />
+ *
+ * The decorative one gets `aria-hidden` and no role, rather than
+ * `role="presentation"` as well: a `<div>` has nothing to hide behind a
+ * presentation role, and one attribute that removes the element from the tree
+ * says the whole thing. `Breadcrumb.Separator` carries both because it is an
+ * `<li>`, whose `listitem` role would otherwise be counted.
+ *
+ * `aria-orientation` is written out even for the horizontal case, where ARIA
+ * would default to it. It is the attribute a reader of this markup is looking
+ * for, and a default that is left implicit is a default somebody has to know.
+ *
+ * `render` changes the element carrying that decision, not the decision
+ * itself: decorative rules stay hidden, semantic rules keep the separator
+ * role and orientation.
+ */
+export component Separator(
+  decorative?: boolean = false,
+  orientation?: Orientation = "horizontal",
+  render?: RenderProp,
+  ...rest: Rest
+) {
+  const props = decorative
+    ? withProps(rest, { "aria-hidden": "true" })
+    : withProps(rest, { "aria-orientation": orientation, role: "separator" });
+  if (render != null) {
+    return render(props);
+  }
+  return <div {...props} />;
+}