@uniflowed/ui 0.1.0 → 0.3.0

package/accordion.js

@@ -173,7 +173,7 @@ hook useAccordionItem(part: string): AccordionItemState {
  * one, and keeping that invariant is the component's job rather than the
  * caller's to remember.
  */
-export component AccordionRoot(
+component AccordionRoot(
   children: renders* AccordionItem,
   type?: AccordionType = "single",
   collapsible?: boolean = true,
@@ -235,7 +235,7 @@ export component AccordionRoot(
  * a panel inside its own heading would be part of the heading's accessible
  * name.
  */
-export component AccordionItem(
+component AccordionItem(
   value: string,
   children: renders* (AccordionHeader | AccordionContent),
   disabled?: boolean = false,
@@ -280,11 +280,7 @@ export component AccordionItem(
  * a level outside that range is clamped rather than rendered — a tag nobody
  * recognises is announced as nothing at all, which loses the heading entirely.
  */
-export component AccordionHeader(
-  children: renders AccordionTrigger,
-  level?: number = 3,
-  ...rest: Rest
-) {
+component AccordionHeader(children: renders AccordionTrigger, level?: number = 3, ...rest: Rest) {
   const clamped = Math.min(6, Math.max(1, Math.trunc(level)));
   const Heading = `h${String(clamped)}`;
 
@@ -297,7 +293,7 @@ export component AccordionHeader(
  * It carries no `tabIndex` of its own on purpose: every header stays in the
  * page's tab order, which is what makes this an accordion and not a tab list.
  */
-export component AccordionTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component AccordionTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const item = useAccordionItem("Accordion.Trigger");
   // Locked and disabled are two different sentences a reader hears the same
   // way, and both are `aria-disabled` rather than `disabled` so the header
@@ -333,7 +329,7 @@ export component AccordionTrigger(children: React.Node, render?: RenderProp, ...
  * `internal/disclosure.js` explains what "stays in the document" is worth and
  * what `hidden` is upgraded to for it.
  */
-export component AccordionContent(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component AccordionContent(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const accordion = useAccordion("Accordion.Content");
   const item = useAccordionItem("Accordion.Content");
   const contentRef = useRef<HTMLElement | null>(null);
@@ -360,3 +356,20 @@ export component AccordionContent(children: React.Node, render?: RenderProp, ...
   }
   return <div {...props} />;
 }
+
+/**
+ * The parts, under the names the `Accordion` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Accordion from "./accordion.js"` —
+ * so a caller writes `<Accordion.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `AccordionRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  AccordionRoot as Root,
+  AccordionItem as Item,
+  AccordionHeader as Header,
+  AccordionTrigger as Trigger,
+  AccordionContent as Content,
+};

package/alert-dialog.js

@@ -49,15 +49,15 @@ import { createContext, useContext, useEffect, useMemo, useRef } from "@uniflowe
 import type { RenderProp, Rest } from "./internal/merge-props.js";
 import { composeRefs, forwarded, withoutComposed } from "./internal/merge-props.js";
 import {
-  DialogBody,
-  DialogClose,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogRoot,
-  DialogTitle,
-  DialogTrigger,
+  Body as DialogBody,
+  Close as DialogClose,
+  Description as DialogDescription,
+  Footer as DialogFooter,
+  Header as DialogHeader,
+  Overlay as DialogOverlay,
+  Root as DialogRoot,
+  Title as DialogTitle,
+  Trigger as DialogTrigger,
 } from "./dialog.js";
 
 type AlertDialogState = {|
@@ -98,7 +98,7 @@ hook useAlertDialog(part: string): AlertDialogState {
 }
 
 /** The alert dialog, open or closed. Uncontrolled unless `open` is given. */
-export component AlertDialogRoot(
+component AlertDialogRoot(
   children: React.Node,
   defaultOpen?: boolean = false,
   open?: boolean,
@@ -118,7 +118,7 @@ export component AlertDialogRoot(
 }
 
 /** What opens it, and what focus comes back to when it closes. */
-export component AlertDialogTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component AlertDialogTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
   return (
     <DialogTrigger {...forwarded(rest)} render={render}>
       {children}
@@ -127,7 +127,7 @@ export component AlertDialogTrigger(children: React.Node, render?: RenderProp, .
 }
 
 /** The backdrop. See `Dialog.Overlay`: it is decoration and says so. */
-export component AlertDialogOverlay(render?: RenderProp, ...rest: Rest) {
+component AlertDialogOverlay(render?: RenderProp, ...rest: Rest) {
   return <DialogOverlay {...forwarded(rest)} render={render} />;
 }
 
@@ -140,7 +140,7 @@ export component AlertDialogOverlay(render?: RenderProp, ...rest: Rest) {
  * who set two of them would have an alert dialog that is wrong in the third
  * without anything saying so.
  */
-export component AlertDialogBody(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component AlertDialogBody(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const alert = useAlertDialog("AlertDialog.Body");
 
   return (
@@ -189,7 +189,7 @@ component RequireDescription() {
 }
 
 /** The top of the alert dialog. See `Dialog.Header` for why it is a `div`. */
-export component AlertDialogHeader(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component AlertDialogHeader(children: React.Node, render?: RenderProp, ...rest: Rest) {
   return (
     <DialogHeader {...forwarded(rest)} render={render}>
       {children}
@@ -198,7 +198,7 @@ export component AlertDialogHeader(children: React.Node, render?: RenderProp, ..
 }
 
 /** The bottom, where `Action` and `Cancel` go. */
-export component AlertDialogFooter(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component AlertDialogFooter(children: React.Node, render?: RenderProp, ...rest: Rest) {
   return (
     <DialogFooter {...forwarded(rest)} render={render}>
       {children}
@@ -207,7 +207,7 @@ export component AlertDialogFooter(children: React.Node, render?: RenderProp, ..
 }
 
 /** The question, which is the alert dialog's accessible name. */
-export component AlertDialogTitle(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component AlertDialogTitle(children: React.Node, render?: RenderProp, ...rest: Rest) {
   return (
     <DialogTitle {...forwarded(rest)} render={render}>
       {children}
@@ -222,7 +222,7 @@ export component AlertDialogTitle(children: React.Node, render?: RenderProp, ...
  * exists to deliver, and the only moment the reader has to decide whether they
  * care is before they have pressed anything.
  */
-export component AlertDialogDescription(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component AlertDialogDescription(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const alert = useAlertDialog("AlertDialog.Description");
   const describedBy = alert.describedBy;
 
@@ -250,7 +250,7 @@ export component AlertDialogDescription(children: React.Node, render?: RenderPro
  * are made of, so the composition rule about a caller's `onClick` has one
  * implementation rather than a second copy here.
  */
-export component AlertDialogAction(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component AlertDialogAction(children: React.Node, render?: RenderProp, ...rest: Rest) {
   return (
     <DialogClose {...forwarded(rest)} render={render}>
       {children}
@@ -265,7 +265,7 @@ export component AlertDialogAction(children: React.Node, render?: RenderProp, ..
  * without the caller wiring a ref: the least destructive action is a fact about
  * which part this is, not a decision to be repeated at every call.
  */
-export component AlertDialogCancel(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component AlertDialogCancel(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const alert = useAlertDialog("AlertDialog.Cancel");
   const cancelRef = alert.cancelRef;
   const passed = withoutComposed(rest, ["ref"]);
@@ -282,3 +282,25 @@ export component AlertDialogCancel(children: React.Node, render?: RenderProp, ..
     </DialogClose>
   );
 }
+
+/**
+ * The parts, under the names the `AlertDialog` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as AlertDialog from "./alert-dialog.js"` —
+ * so a caller writes `<AlertDialog.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `AlertDialogRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  AlertDialogRoot as Root,
+  AlertDialogTrigger as Trigger,
+  AlertDialogOverlay as Overlay,
+  AlertDialogBody as Body,
+  AlertDialogHeader as Header,
+  AlertDialogFooter as Footer,
+  AlertDialogTitle as Title,
+  AlertDialogDescription as Description,
+  AlertDialogAction as Action,
+  AlertDialogCancel as Cancel,
+};

package/alert.js

@@ -88,7 +88,7 @@ import { withProps } from "./internal/merge-props.js";
  * header is about: the role is a promise about a change, and a box that was
  * always there has no change to report.
  */
-export component AlertRoot(
+component AlertRoot(
   children: React.Node,
   live?: boolean = false,
   render?: RenderProp,
@@ -116,12 +116,7 @@ export component AlertRoot(
  * the six HTML has is clamped, because `<h7>` is not an element and is
  * announced as nothing at all.
  */
-export component AlertTitle(
-  children: React.Node,
-  level?: number = 3,
-  render?: RenderProp,
-  ...rest: Rest
-) {
+component AlertTitle(children: React.Node, level?: number = 3, render?: RenderProp, ...rest: Rest) {
   const clamped = Math.min(6, Math.max(1, Math.trunc(level)));
   const Heading = `h${String(clamped)}`;
   const props = withProps(rest, { children });
@@ -133,10 +128,21 @@ export component AlertTitle(
 }
 
 /** What the callout says, under its heading. */
-export component AlertDescription(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component AlertDescription(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const props = withProps(rest, { children });
   if (render != null) {
     return render(props);
   }
   return <p {...props} />;
 }
+
+/**
+ * The parts, under the names the `Alert` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Alert from "./alert.js"` —
+ * so a caller writes `<Alert.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `AlertRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export { AlertRoot as Root, AlertTitle as Title, AlertDescription as Description };

package/avatar.js

@@ -127,7 +127,7 @@ hook useAvatar(part: string): AvatarState {
  * in a table cell, in a paragraph, inside a button's label — and a block
  * element is invalid in half of those.
  */
-export component AvatarRoot(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component AvatarRoot(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const [seen, setSeen] = useState<Seen>(START);
   const [hasImage, setHasImage] = useState(false);
 
@@ -181,12 +181,7 @@ export component AvatarRoot(children: React.Node, render?: RenderProp, ...rest:
  * stylesheet: `hidden` loses to any `display` the caller sets, and a caller who
  * has not written that rule yet would see both.
  */
-export component AvatarImage(
-  alt?: string = "",
-  src?: string | null,
-  render?: RenderProp,
-  ...rest: Rest
-) {
+component AvatarImage(alt?: string = "", src?: string | null, render?: RenderProp, ...rest: Rest) {
   const avatar = useAvatar("Avatar.Image");
   const element = useRef<HTMLImageElement | null>(null);
   const report = avatar.report;
@@ -249,7 +244,7 @@ export component AvatarImage(
  * avatar with no `Avatar.Image` at all are both answers rather than waits, and
  * the fallback for either is immediate.
  */
-export component AvatarFallback(
+component AvatarFallback(
   children: React.Node,
   delay?: number = 300,
   render?: RenderProp,
@@ -278,3 +273,14 @@ export component AvatarFallback(
   }
   return <span {...props} />;
 }
+
+/**
+ * The parts, under the names the `Avatar` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Avatar from "./avatar.js"` —
+ * so a caller writes `<Avatar.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `AvatarRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export { AvatarRoot as Root, AvatarImage as Image, AvatarFallback as Fallback };

package/breadcrumb.js

@@ -56,7 +56,7 @@ import { withProps } from "./internal/merge-props.js";
  * to translate; there is no case for leaving it off, which is why it is not
  * optional in the sense of being absent.
  */
-export component BreadcrumbRoot(
+component BreadcrumbRoot(
   children: React.Node,
   label?: string = "Breadcrumb",
   render?: RenderProp,
@@ -76,7 +76,7 @@ export component BreadcrumbRoot(
  * information: a reader is told how many levels there are before walking them,
  * and can skip the lot in one keystroke.
  */
-export component BreadcrumbList(
+component BreadcrumbList(
   children: renders* (BreadcrumbItem | BreadcrumbSeparator),
   render?: RenderProp,
   ...rest: Rest
@@ -89,7 +89,7 @@ export component BreadcrumbList(
 }
 
 /** One level of the trail. Holds a `Breadcrumb.Link` or a `Breadcrumb.Page`. */
-export component BreadcrumbItem(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component BreadcrumbItem(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const props = withProps(rest, { children });
   if (render != null) {
     return render(withProps(props, { role: "listitem" }));
@@ -98,7 +98,7 @@ export component BreadcrumbItem(children: React.Node, render?: RenderProp, ...re
 }
 
 /** A level you can go back to. */
-export component BreadcrumbLink(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component BreadcrumbLink(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const props = withProps(rest, { children });
   if (render != null) {
     return render(withProps(props, { role: "link" }));
@@ -114,7 +114,7 @@ export component BreadcrumbLink(children: React.Node, render?: RenderProp, ...re
  * a link by accident. See the module header for why announcing it as a disabled
  * link is worse than announcing it as text.
  */
-export component BreadcrumbPage(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component BreadcrumbPage(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const props = withProps(rest, { "aria-current": "page", children });
   if (render != null) {
     return render(props);
@@ -129,10 +129,28 @@ export component BreadcrumbPage(children: React.Node, render?: RenderProp, ...re
  * design decision and this package makes none. What is not the caller's is that
  * it is announced to nobody.
  */
-export component BreadcrumbSeparator(children?: React.Node, render?: RenderProp, ...rest: Rest) {
+component BreadcrumbSeparator(children?: React.Node, render?: RenderProp, ...rest: Rest) {
   const props = withProps(rest, { "aria-hidden": "true", children, role: "presentation" });
   if (render != null) {
     return render(props);
   }
   return <li {...props} />;
 }
+
+/**
+ * The parts, under the names the `Breadcrumb` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Breadcrumb from "./breadcrumb.js"` —
+ * so a caller writes `<Breadcrumb.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `BreadcrumbRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  BreadcrumbRoot as Root,
+  BreadcrumbList as List,
+  BreadcrumbItem as Item,
+  BreadcrumbLink as Link,
+  BreadcrumbPage as Page,
+  BreadcrumbSeparator as Separator,
+};

package/calendar.js

@@ -77,6 +77,7 @@ import {
   withoutComposed,
 } from "./internal/merge-props.js";
 import { directionOf } from "./internal/roving-focus.js";
+import { visuallyHiddenStyle } from "./internal/visually-hidden-style.js";
 import {
   firstDayOfWeekFor,
   moveDate,
@@ -174,7 +175,7 @@ function toDate(value: DateValue): PlainDate {
  * place it — so `Calendar.Root` renders it and keeps it empty until the month
  * actually changes.
  */
-export component CalendarRoot(
+component CalendarRoot(
   children: React.Node,
   defaultFocused?: DateValue,
   defaultValue?: DateValue | null = null,
@@ -321,7 +322,16 @@ export component CalendarRoot(
     <CalendarContext.Provider value={state}>
       <div {...rest}>
         {children}
-        <div aria-atomic="true" aria-live="polite" id={`${base}-status`} role="status">
+        {/* Heard and not drawn: the caption above the grid already shows the
+            month, and a second copy under it is what a sighted reader would
+            otherwise see after the first page. */}
+        <div
+          aria-atomic="true"
+          aria-live="polite"
+          id={`${base}-status`}
+          role="status"
+          style={visuallyHiddenStyle}
+        >
           {announcement}
         </div>
       </div>
@@ -343,7 +353,14 @@ export component CalendarRoot(
  * with a dot under it for an appointment is a `Calendar.Day` with a child, not a
  * fork of this component. Omitted, every day renders its own number.
  */
-export component CalendarMonth(children?: (date: PlainDate) => renders CalendarDay, ...rest: Rest) {
+component CalendarMonth(
+  /** A class for the `<caption>`, which this part renders itself. */
+  captionClassName?: string,
+  children?: (date: PlainDate) => renders CalendarDay,
+  /** A class for each weekday heading, which this part renders itself. */
+  columnHeaderClassName?: string,
+  ...rest: Rest
+) {
   const calendar = useCalendar("Calendar.Month");
   const gridRef = useRef<HTMLElement | null>(null);
   const { focused, focusedDayRef, moveFocus, pendingFocusRef, weekStartsOn } = calendar;
@@ -406,7 +423,9 @@ export component CalendarMonth(children?: (date: PlainDate) => renders CalendarD
       })}
       role="grid"
     >
-      <caption id={`${calendar.base}-caption`}>{calendar.caption}</caption>
+      <caption className={captionClassName} id={`${calendar.base}-caption`}>
+        {calendar.caption}
+      </caption>
       <thead>
         <tr>
           {columns.map((day) => (
@@ -416,6 +435,7 @@ export component CalendarMonth(children?: (date: PlainDate) => renders CalendarD
               // 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)}
+              className={columnHeaderClassName}
               key={day.dayOfWeek}
               scope="col"
             >
@@ -460,12 +480,17 @@ export component CalendarMonth(children?: (date: PlainDate) => renders CalendarD
  * inventing a second wording that a translation table would then have to own. A
  * caller who wants one passes it; it is not overridden here.
  */
-export component CalendarDay(date: PlainDate, children?: React.Node, ...rest: Rest) {
+component CalendarDay(date: PlainDate, children?: React.Node, ...rest: Rest) {
   const calendar = useCalendar("Calendar.Day");
   const disabled = calendar.isDisabled(date);
-  const chosen =
-    calendar.isDateSelected?.(date) ??
-    (calendar.selected != null && calendar.selected.equals(date));
+  const isChosen = (day: PlainDate) =>
+    calendar.isDateSelected?.(day) ?? (calendar.selected != null && calendar.selected.equals(day));
+  const chosen = isChosen(date);
+  // Where a run of chosen days opens and closes, for a stylesheet to round the
+  // ends of a range and join its middle. Markup only: nothing reads it, and a
+  // single chosen day is a run that opens and closes on itself.
+  const opensRun = chosen && !isChosen(date.subtract({ days: 1 }));
+  const closesRun = chosen && !isChosen(date.add({ days: 1 }));
   const passed = withoutComposed(rest, ["onClick", "onFocus", "onKeyDown"]);
 
   return (
@@ -481,6 +506,8 @@ export component CalendarDay(date: PlainDate, children?: React.Node, ...rest: Re
       // makes a screen reader announce "not selected" on all thirty-one.
       aria-selected={chosen ? "true" : undefined}
       data-date={date.toString()}
+      data-selection-end={closesRun ? "true" : undefined}
+      data-selection-start={opensRun ? "true" : undefined}
       onClick={composeHandlers(rest.onClick, () => calendar.select(date))}
       // The tab stop follows real focus, which is the half of a roving set that
       // is easy to leave out and impossible to see. A press on an *unavailable*
@@ -516,7 +543,7 @@ export component CalendarDay(date: PlainDate, children?: React.Node, ...rest: Re
  * and not onto a sibling part, because `Rest` names `key` out of its indexer and
  * the receiving component's own indexer answers `mixed` for it.
  */
-export component CalendarPrevious(children: React.Node, ...rest: Rest) {
+component CalendarPrevious(children: React.Node, ...rest: Rest) {
   return (
     <MonthStep {...forwarded(rest)} by={-1}>
       {children}
@@ -525,7 +552,7 @@ export component CalendarPrevious(children: React.Node, ...rest: Rest) {
 }
 
 /** The button that shows the month after this one. */
-export component CalendarNext(children: React.Node, ...rest: Rest) {
+component CalendarNext(children: React.Node, ...rest: Rest) {
   return (
     <MonthStep {...forwarded(rest)} by={1}>
       {children}
@@ -558,3 +585,20 @@ component MonthStep(children: React.Node, by: number, ...rest: Rest) {
     </button>
   );
 }
+
+/**
+ * The parts, under the names the `Calendar` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Calendar from "./calendar.js"` —
+ * so a caller writes `<Calendar.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `CalendarRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  CalendarRoot as Root,
+  CalendarPrevious as Previous,
+  CalendarNext as Next,
+  CalendarMonth as Month,
+  CalendarDay as Day,
+};

package/carousel.js

@@ -128,7 +128,7 @@ hook useCarousel(part: string): CarouselState {
  * hold a `Carousel.Pause`, and that one must be the first thing `Tab` reaches
  * inside it; both are checked.
  */
-export component CarouselRoot(
+component CarouselRoot(
   children: React.Node,
   autoplay?: number | null = null,
   count: number,
@@ -264,7 +264,7 @@ export component CarouselRoot(
  * four seconds is a page a screen reader cannot be used on. `"polite"` the rest
  * of the time, so pressing Next says something.
  */
-export component CarouselContent(children: React.Node, ...rest: Rest) {
+component CarouselContent(children: React.Node, ...rest: Rest) {
   const carousel = useCarousel("Carousel.Content");
 
   return (
@@ -288,7 +288,7 @@ export component CarouselContent(children: React.Node, ...rest: Rest) {
  * takes the subtree out of the accessibility tree, which is what stops a reader
  * being read six slides in a row.
  */
-export component CarouselItem(children: React.Node, index: number, ...rest: Rest) {
+component CarouselItem(children: React.Node, index: number, ...rest: Rest) {
   const carousel = useCarousel("Carousel.Item");
   const current = index === carousel.index;
 
@@ -320,7 +320,7 @@ export component CarouselItem(children: React.Node, index: number, ...rest: Rest
  * for: `aria-pressed` on a pause button is the announcement "pause, pressed",
  * and a reader who has stopped a carousel wants to be told it is stopped.
  */
-export component CarouselPause(
+component CarouselPause(
   children?: React.Node,
   pauseLabel?: string = "Stop the carousel",
   playLabel?: string = "Start the carousel",
@@ -354,7 +354,7 @@ export component CarouselPause(
 }
 
 /** The button that goes back one slide. */
-export component CarouselPrevious(
+component CarouselPrevious(
   children?: React.Node,
   label?: string = "Previous slide",
   ...rest: Rest
@@ -367,7 +367,7 @@ export component CarouselPrevious(
 }
 
 /** The button that goes forward one slide. */
-export component CarouselNext(children?: React.Node, label?: string = "Next slide", ...rest: Rest) {
+component CarouselNext(children?: React.Node, label?: string = "Next slide", ...rest: Rest) {
   return (
     <CarouselStep {...forwarded(rest)} label={label} step={1}>
       {children}
@@ -408,3 +408,21 @@ component CarouselStep(children?: React.Node, label: string, step: number, ...re
     </button>
   );
 }
+
+/**
+ * The parts, under the names the `Carousel` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Carousel from "./carousel.js"` —
+ * so a caller writes `<Carousel.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `CarouselRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  CarouselRoot as Root,
+  CarouselContent as Content,
+  CarouselItem as Item,
+  CarouselPause as Pause,
+  CarouselPrevious as Previous,
+  CarouselNext as Next,
+};

package/collapsible.js

@@ -91,7 +91,7 @@ hook useCollapsible(part: string): CollapsibleState {
  * them that the caller then has to style around. `Menu.Root` makes the same
  * choice for the same reason.
  */
-export component CollapsibleRoot(
+component CollapsibleRoot(
   children: React.Node,
   defaultOpen?: boolean = false,
   open?: boolean,
@@ -111,7 +111,7 @@ export component CollapsibleRoot(
 }
 
 /** The control that shows and hides the content. */
-export component CollapsibleTrigger(
+component CollapsibleTrigger(
   children: React.Node,
   disabled?: boolean = false,
   render?: RenderProp,
@@ -146,7 +146,7 @@ export component CollapsibleTrigger(
  * the module header, and `internal/disclosure.js` for what `hidden` is upgraded
  * to and why that takes an effect.
  */
-export component CollapsibleContent(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component CollapsibleContent(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const collapsible = useCollapsible("Collapsible.Content");
   const contentRef = useRef<HTMLElement | null>(null);
   usePresence(collapsible.registerContent);
@@ -169,3 +169,14 @@ export component CollapsibleContent(children: React.Node, render?: RenderProp, .
   }
   return <div {...props} />;
 }
+
+/**
+ * The parts, under the names the `Collapsible` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Collapsible from "./collapsible.js"` —
+ * so a caller writes `<Collapsible.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `CollapsibleRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export { CollapsibleRoot as Root, CollapsibleTrigger as Trigger, CollapsibleContent as Content };