@oprt/react 0.0.0-stage → 0.1.0

package/dist/Toast/Toast.js

@@ -0,0 +1,188 @@
+"use client";
+
+// src/Toast/Toast.tsx
+import { Info, CheckCircle, AlertTriangle, XCircle, X } from "@oprt/icons";
+import * as RadixToast from "@radix-ui/react-toast";
+import { cva } from "class-variance-authority";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useRef
+} from "react";
+import clsx from "clsx";
+import { ToastManifest } from "./Toast.manifest.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { useMergedRefs } from "../_internal/mergeRefs.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ICONS = {
+  info: Info,
+  success: CheckCircle,
+  warning: AlertTriangle,
+  error: XCircle
+};
+function severityOf(variant) {
+  return typeof variant === "string" && Object.prototype.hasOwnProperty.call(ICONS, variant) ? variant : "info";
+}
+var SwipeDirectionContext = createContext("right");
+function useNewestInView(region) {
+  useEffect(() => {
+    const list = region.current;
+    if (!list) return;
+    const atEnd = () => list.scrollHeight - list.clientHeight - list.scrollTop <= 1;
+    const toEnd = () => {
+      list.scrollTop = list.scrollHeight;
+    };
+    let following = true;
+    const onScroll = () => {
+      following = atEnd();
+    };
+    const observer = new MutationObserver((records) => {
+      if (records.some((record) => record.addedNodes.length > 0)) {
+        if (following) toEnd();
+      } else {
+        following = atEnd();
+      }
+    });
+    list.addEventListener("scroll", onScroll, { passive: true });
+    observer.observe(list, { childList: true });
+    if (list.childElementCount > 0) toEnd();
+    return () => {
+      observer.disconnect();
+      list.removeEventListener("scroll", onScroll);
+    };
+  }, [region]);
+}
+var ToastProvider = forwardRef((props, ref) => {
+  const { children, label = "Notifications", swipeDirection = "right", duration } = props;
+  const providerProps = { label, swipeDirection };
+  if (duration !== void 0) providerProps["duration"] = duration;
+  const region = useRef(null);
+  const regionRef = useMergedRefs(ref, region);
+  useNewestInView(region);
+  if (process.env.NODE_ENV !== "production") {
+    devValidate("ToastProvider", ToastManifest.ToastProvider.props, props);
+  }
+  return /* @__PURE__ */ jsxs(RadixToast.Provider, { ...providerProps, children: [
+    /* @__PURE__ */ jsx(SwipeDirectionContext.Provider, { value: swipeDirection, children }),
+    /* @__PURE__ */ jsx(
+      RadixToast.Viewport,
+      {
+        ref: regionRef,
+        label: `${label} ({hotkey})`,
+        className: "fixed bottom-0 right-0 z-50 flex max-h-dvh [@supports_not_(height:100dvh)]:max-h-screen flex-col gap-2u overflow-y-auto overscroll-contain p-4u m-0 w-full max-w-sm list-none"
+      }
+    )
+  ] });
+});
+ToastProvider.displayName = "ToastProvider";
+var rootStyles = cva(
+  "bg-oprt-surface-1 border border-oprt-border border-l-2 px-3u py-2u flex gap-2u items-start font-sans",
+  {
+    variants: {
+      variant: {
+        info: "border-l-oprt-info",
+        success: "border-l-oprt-success",
+        warning: "border-l-oprt-warning",
+        error: "border-l-oprt-error"
+      }
+    },
+    defaultVariants: { variant: "info" }
+  }
+);
+var iconStyles = cva("shrink-0", {
+  variants: {
+    variant: {
+      info: "text-oprt-info",
+      success: "text-oprt-success",
+      warning: "text-oprt-warning",
+      error: "text-oprt-error"
+    }
+  },
+  defaultVariants: { variant: "info" }
+});
+var titleStyles = cva("m-0 text-oprt-sm uppercase tracking-oprt-sm", {
+  variants: {
+    variant: {
+      info: "text-oprt-info",
+      success: "text-oprt-success",
+      warning: "text-oprt-warning",
+      error: "text-oprt-error"
+    }
+  },
+  defaultVariants: { variant: "info" }
+});
+var Toast = forwardRef((allProps, ref) => {
+  const {
+    className,
+    variant,
+    title,
+    description,
+    persistent = false,
+    open,
+    defaultOpen,
+    onOpenChange,
+    duration,
+    type,
+    style,
+    onPointerMove,
+    ...props
+  } = allProps;
+  const severity = severityOf(variant);
+  const SeverityIcon = ICONS[severity];
+  const swipeDirection = useContext(SwipeDirectionContext);
+  if (process.env.NODE_ENV !== "production") {
+    devValidate("Toast", ToastManifest.Toast.props, allProps);
+  }
+  const rootProps = {};
+  if (open !== void 0) rootProps["open"] = open;
+  if (defaultOpen !== void 0) rootProps["defaultOpen"] = defaultOpen;
+  if (onOpenChange !== void 0) rootProps["onOpenChange"] = onOpenChange;
+  if (persistent) {
+    rootProps["duration"] = Infinity;
+  } else if (duration !== void 0) {
+    rootProps["duration"] = duration;
+  }
+  rootProps["type"] = type ?? (severity === "error" || severity === "warning" ? "foreground" : "background");
+  return /* @__PURE__ */ jsxs(
+    RadixToast.Root,
+    {
+      ref,
+      className: clsx(rootStyles({ variant: severity }), className),
+      ...rootProps,
+      ...props,
+      onPointerMove: (event) => {
+        onPointerMove?.(event);
+        if (event.pointerType !== "touch") event.defaultPrevented = true;
+      },
+      style: {
+        touchAction: swipeDirection === "up" || swipeDirection === "down" ? "pan-x" : "pan-y",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx(SeverityIcon, { size: 16, className: iconStyles({ variant: severity }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 select-text flex-col gap-1u oprt-wrap-anywhere", children: [
+          /* @__PURE__ */ jsx(RadixToast.Title, { className: titleStyles({ variant: severity }), children: title }),
+          description && /* @__PURE__ */ jsxs(RadixToast.Description, { className: "m-0 text-oprt-base normal-case text-oprt-text", children: [
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: ". " }),
+            description
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          RadixToast.Close,
+          {
+            "aria-label": "Dismiss",
+            className: "inline-flex items-center justify-center shrink-0 h-oprt-sm w-3u border border-transparent text-oprt-text-dim hover:text-oprt-text focus-visible:border-oprt-border-focus focus-visible:shadow-oprt-focus focus-visible:outline-hidden",
+            children: /* @__PURE__ */ jsx(X, { size: 12 })
+          }
+        )
+      ]
+    }
+  );
+});
+Toast.displayName = "Toast";
+export {
+  Toast,
+  ToastProvider
+};

package/dist/Toast/Toast.manifest.js

@@ -0,0 +1,77 @@
+// src/Toast/Toast.manifest.ts
+var ToastManifest = {
+  ToastProvider: {
+    description: "Wraps the app and renders the notification region, a fixed corner of the window where Toast notifications stack and announce. The region never outgrows the window: a tall stack scrolls inside it, and a new notice is scrolled into view unless the reader has scrolled away from the newest.",
+    props: {
+      label: {
+        type: "string",
+        default: "Notifications",
+        description: "Names the notification region, as '<label> (F8)', F8 being the key that moves focus to it, and is spoken before each announcement. Set it for a translated or more specific name."
+      },
+      swipeDirection: {
+        type: "enum",
+        values: ["right", "left", "up", "down"],
+        default: "right",
+        description: "The direction a touch swipe dismisses a toast; a mouse or pen drag selects text instead. With right or left, a vertical touch drag on a toast scrolls the region; with up or down, that drag is the swipe, so the region does not scroll by dragging a toast."
+      },
+      duration: {
+        type: "number",
+        description: "Milliseconds before a toast closes itself. Defaults to 5000."
+      }
+    },
+    slots: {
+      children: { type: "Toast", required: true }
+    },
+    never_inside: ["ToastProvider", "Toast"],
+    example: '<ToastProvider>\n  <Toast variant="success" title="DEPLOYED" description="Build promoted to prod." open={open} onOpenChange={setOpen} />\n</ToastProvider>'
+  },
+  Toast: {
+    description: "A single transient notification with a severity icon, title, optional description, and dismiss control. It closes itself after its duration or when dismissed, by calling onOpenChange(false); the application removes it.",
+    props: {
+      variant: {
+        type: "enum",
+        values: ["info", "success", "warning", "error"],
+        default: "info",
+        description: "Severity. Drives the icon, the accent color and, unless type is set, how the toast is announced: error and warning interrupt a screen reader, info and success wait."
+      },
+      title: { type: "string", required: true },
+      description: { type: "string" },
+      open: {
+        type: "boolean",
+        description: "Controlled open state. A toast that is open and never closed stays on screen: pass onOpenChange and remove the toast, or clear open, when it is called."
+      },
+      defaultOpen: {
+        type: "boolean",
+        default: true,
+        description: "Initial open state when open is not controlled."
+      },
+      onOpenChange: {
+        type: "function",
+        description: "Called with false when the toast closes itself after its duration, or when Dismiss, Escape or a touch swipe closes it."
+      },
+      type: {
+        type: "enum",
+        values: ["foreground", "background"],
+        description: "How the toast is announced: foreground interrupts a screen reader, background waits. Defaults to foreground for error and warning and background for info and success."
+      },
+      duration: { type: "number" },
+      persistent: {
+        type: "boolean",
+        default: false,
+        description: "Disables automatic dismissal (duration Infinity). The toast stays until dismissed."
+      }
+    },
+    composable_with: ["ToastProvider"],
+    never_inside: ["Toast"],
+    example: '<Toast variant="error" title="LINK LOST" description="No telemetry for 12s." open={open} onOpenChange={setOpen} />'
+  }
+};
+var ToastCompositionRules = {
+  ToastProvider: {
+    allowed_children: ["Toast"]
+  }
+};
+export {
+  ToastCompositionRules,
+  ToastManifest
+};

package/dist/Toast/index.js

@@ -0,0 +1,9 @@
+// src/Toast/index.ts
+import { ToastProvider, Toast } from "./Toast.js";
+import { ToastManifest, ToastCompositionRules } from "./Toast.manifest.js";
+export {
+  Toast,
+  ToastCompositionRules,
+  ToastManifest,
+  ToastProvider
+};

package/dist/Toggle/Toggle.js

@@ -0,0 +1,154 @@
+"use client";
+
+// src/Toggle/Toggle.tsx
+import { Switch as AriaSwitch } from "react-aria-components";
+import { cva } from "class-variance-authority";
+import { forwardRef, useCallback } from "react";
+import clsx from "clsx";
+import { useMotion } from "../_internal/motion.js";
+import { useFieldWiring } from "../_internal/fieldIds.js";
+import { ToggleManifest } from "./Toggle.manifest.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { definedOnly, switchValidationProps, useAriaInvalidRef } from "../_internal/aria.js";
+import { keyForIds } from "../_internal/hydration.js";
+import { useInputRefObject } from "../_internal/mergeRefs.js";
+import { jsx } from "react/jsx-runtime";
+var trackStyles = cva(
+  [
+    "relative inline-flex items-center border oprt-motion-track cursor-pointer",
+    // The thumb's resting distance from the border, named once because its travel uses it too.
+    "[--toggle-inset:2px] px-[var(--toggle-inset)]",
+    // The resting boundary is the control outline (design call DC-3); on, it is the accent.
+    // Invalid draws the error color whether the switch is on or off: Tailwind sorts these state
+    // variants by name, so `selected` would win a tie, and `[&&]` raises the invalid rule above it.
+    "bg-oprt-surface-2 border-oprt-border-control",
+    "group-data-[selected]/toggle:bg-oprt-accent group-data-[selected]/toggle:border-oprt-accent-light",
+    "group-data-[selected]/toggle:[&_.oprt-toggle-thumb]:bg-oprt-bg",
+    "group-data-[invalid]/toggle:[&&]:border-oprt-error",
+    "group-data-[focus-visible]/toggle:border-oprt-border-focus group-data-[focus-visible]/toggle:shadow-oprt-focus",
+    "group-data-[disabled]/toggle:opacity-50 group-data-[disabled]/toggle:cursor-not-allowed",
+    // Forced colors replace every background with the page color and drop box-shadow, so the
+    // thumb, the on fill and the focus ring would all vanish. Each is redrawn from system colors,
+    // which forced colors keep, and the focus ring becomes an outline.
+    "forced-colors:[forced-color-adjust:none] forced-colors:bg-[color:Canvas] forced-colors:border-[color:CanvasText]",
+    "forced-colors:group-data-[selected]/toggle:bg-[color:Highlight] forced-colors:group-data-[selected]/toggle:border-[color:Highlight]",
+    "forced-colors:group-data-[selected]/toggle:[&_.oprt-toggle-thumb]:bg-[color:HighlightText]",
+    "forced-colors:group-data-[focus-visible]/toggle:outline-solid forced-colors:group-data-[focus-visible]/toggle:outline-2 forced-colors:group-data-[focus-visible]/toggle:outline-offset-2 forced-colors:group-data-[focus-visible]/toggle:outline-[color:CanvasText]",
+    // Disabled wins over on (`[&&]` raises it above the `selected` rules, which Tailwind writes
+    // later): a disabled switch that is on is a Canvas track with GrayText edge and thumb, and the
+    // thumb's place still says it is on.
+    "forced-colors:group-data-[disabled]/toggle:[&&]:bg-[color:Canvas] forced-colors:group-data-[disabled]/toggle:[&&]:border-[color:GrayText] forced-colors:[&&]:group-data-[disabled]/toggle:[&_.oprt-toggle-thumb]:bg-[color:GrayText]"
+  ].join(" "),
+  {
+    variants: {
+      // The thumb travels the track's width less its two 1px borders and both insets, less its own
+      // width, so it ends as far from the border as it starts (14, 18 and 22 px).
+      size: {
+        sm: "w-4u h-2u group-data-[selected]/toggle:[&_.oprt-toggle-thumb]:translate-x-[calc(var(--oprt-space-4)-var(--oprt-space-1)*1.5-2px-var(--toggle-inset)*2)]",
+        md: "w-5u h-2.5u group-data-[selected]/toggle:[&_.oprt-toggle-thumb]:translate-x-[calc(var(--oprt-space-5)-var(--oprt-space-2)-2px-var(--toggle-inset)*2)]",
+        lg: "w-6u h-3u group-data-[selected]/toggle:[&_.oprt-toggle-thumb]:translate-x-[calc(var(--oprt-space-6)-var(--oprt-space-1)*2.5-2px-var(--toggle-inset)*2)]"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var thumbStyles = cva(
+  "oprt-toggle-thumb block oprt-motion-thumb bg-oprt-text-dim forced-colors:bg-[color:CanvasText]",
+  {
+    variants: {
+      size: {
+        sm: "h-1.5u w-1.5u",
+        md: "h-2u w-2u",
+        lg: "h-2.5u w-2.5u"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var Toggle = forwardRef((allProps, ref) => {
+  const {
+    className,
+    motion = "auto",
+    size = "md",
+    id,
+    checked,
+    defaultChecked,
+    onCheckedChange,
+    disabled,
+    required,
+    name,
+    value,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid
+  } = allProps;
+  const motionState = useMotion(motion, "Toggle");
+  const {
+    id: finalId,
+    labelledBy,
+    describedBy,
+    invalid: isInvalid,
+    required: isRequired
+  } = useFieldWiring(
+    {
+      id,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-invalid": ariaInvalid,
+      required
+    },
+    { label: "labelledby" }
+  );
+  if (process.env.NODE_ENV !== "production") {
+    devValidate("Toggle", ToggleManifest.Toggle.props, { ...allProps });
+  }
+  const setInvalidNode = useAriaInvalidRef(ref, isInvalid);
+  const setNode = useCallback(
+    (node) => {
+      if (node) {
+        if (isRequired) node.setAttribute("aria-required", "true");
+        else node.removeAttribute("aria-required");
+        node.required = isRequired;
+      }
+      return setInvalidNode(node);
+    },
+    [setInvalidNode, isRequired]
+  );
+  const inputRef = useInputRefObject(setNode);
+  const rootProps = {
+    isDisabled: disabled ?? false,
+    ...definedOnly({
+      id: finalId,
+      "aria-label": ariaLabel,
+      "aria-labelledby": labelledBy,
+      "aria-describedby": describedBy,
+      name,
+      value
+    })
+  };
+  Object.assign(rootProps, switchValidationProps({ invalid: isInvalid, required: isRequired }));
+  if (checked !== void 0) rootProps["isSelected"] = checked;
+  if (defaultChecked !== void 0) rootProps["defaultSelected"] = defaultChecked;
+  if (onCheckedChange) rootProps["onChange"] = onCheckedChange;
+  return /* @__PURE__ */ jsx(
+    AriaSwitch,
+    {
+      ...rootProps,
+      ...motionState.props,
+      render: (domProps) => /* @__PURE__ */ jsx("label", { ...domProps, ...motionState.props }),
+      inputRef,
+      className: clsx(
+        "oprt-motion group/toggle inline-flex self-start w-fit items-center justify-center min-h-3u cursor-pointer data-[disabled]:cursor-not-allowed",
+        className
+      ),
+      children: /* @__PURE__ */ jsx("span", { className: trackStyles({ size: size ?? void 0 }), children: /* @__PURE__ */ jsx("span", { className: thumbStyles({ size: size ?? void 0 }) }) })
+    },
+    keyForIds(finalId, labelledBy)
+  );
+});
+Toggle.displayName = "Toggle";
+export {
+  Toggle
+};

package/dist/Toggle/Toggle.manifest.js

@@ -0,0 +1,54 @@
+// src/Toggle/Toggle.manifest.ts
+var ToggleManifest = {
+  Toggle: {
+    description: "Binary on/off switch. Square thumb sliding inside a square track. Accent fill when on; an invalid switch draws its track in the error color. In forced-colors mode the on state, the thumb and keyboard focus use system colors.",
+    props: {
+      motion: {
+        type: "enum",
+        values: ["auto", "none"],
+        default: "auto",
+        description: "Tactile pointer/touch feedback. None disables motion; keyboard and system reduced motion are always immediate."
+      },
+      checked: { type: "boolean" },
+      defaultChecked: { type: "boolean", default: false },
+      onCheckedChange: { type: "function", description: "Receives the new checked value." },
+      disabled: { type: "boolean", default: false },
+      required: {
+        type: "boolean",
+        default: false,
+        description: "Announced as required. Like a required Checkbox, it blocks native form submission until the switch is on. The native attribute is added when the page hydrates (the server markup has aria-required), so a form submitted earlier is not blocked: validate on the server too."
+      },
+      size: { type: "enum", values: ["sm", "md", "lg"], default: "md" },
+      name: { type: "string" },
+      value: { type: "string" },
+      id: {
+        type: "string",
+        description: "Id of the switch input. Inside a Field it defaults to the Field's id."
+      },
+      className: { type: "string", description: "Classes applied to the switch's label root." },
+      "aria-label": {
+        type: "string",
+        description: "Accessible name when there is no visible label. Inside a Field the Field's label names the switch."
+      },
+      "aria-labelledby": {
+        type: "string",
+        description: "Id of the element that names the switch."
+      },
+      "aria-describedby": {
+        type: "string",
+        description: "Id of the element that describes the switch. A Field supplies its help or error."
+      },
+      "aria-invalid": {
+        type: "union",
+        types: ["boolean", "string"],
+        description: "Marks the switch invalid: announced as invalid, with its track in the error color. A Field with an error sets it."
+      }
+    },
+    composable_with: ["Field", "Toolbar"],
+    never_inside: ["Button", "Badge"],
+    example: '<Field label="ENABLE TELEMETRY">\n  <Toggle defaultChecked />\n</Field>'
+  }
+};
+export {
+  ToggleManifest
+};

package/dist/Toggle/index.js

@@ -0,0 +1,7 @@
+// src/Toggle/index.ts
+import { Toggle } from "./Toggle.js";
+import { ToggleManifest } from "./Toggle.manifest.js";
+export {
+  Toggle,
+  ToggleManifest
+};

package/dist/Toolbar/Toolbar.js

@@ -0,0 +1,86 @@
+"use client";
+
+// src/Toolbar/Toolbar.tsx
+import { Toolbar as AriaToolbar, Separator as AriaSeparator } from "react-aria-components";
+import { cva } from "class-variance-authority";
+import { createContext, forwardRef, useContext } from "react";
+import clsx from "clsx";
+import { ToolbarManifest } from "./Toolbar.manifest.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { jsx } from "react/jsx-runtime";
+var toolbarStyles = cva("flex bg-oprt-surface-1 border border-oprt-border font-sans", {
+  variants: {
+    orientation: {
+      horizontal: "flex-wrap items-center gap-x-2u gap-y-1u px-2u min-h-oprt-lg py-[calc((var(--oprt-height-lg)-2px-var(--oprt-height-md))/2)]",
+      vertical: "flex-col items-stretch gap-2u px-2u py-2u w-auto h-auto"
+    }
+  },
+  defaultVariants: { orientation: "horizontal" }
+});
+var ToolbarOrientationContext = createContext(void 0);
+var Toolbar = forwardRef((allProps, ref) => {
+  const {
+    className,
+    orientation = "horizontal",
+    ariaLabel,
+    "aria-label": nativeLabel,
+    "aria-labelledby": labelledBy,
+    children,
+    id,
+    ...props
+  } = allProps;
+  if (process.env.NODE_ENV !== "production") {
+    devValidate("Toolbar", ToolbarManifest.Toolbar.props, { ...allProps });
+  }
+  const label = ariaLabel ?? nativeLabel;
+  const name = label ?? (labelledBy === void 0 ? "Toolbar" : void 0);
+  const axis = orientation ?? "horizontal";
+  return /* @__PURE__ */ jsx(ToolbarOrientationContext.Provider, { value: axis, children: /* @__PURE__ */ jsx(
+    AriaToolbar,
+    {
+      ref,
+      orientation: axis,
+      ...id !== void 0 ? { id } : {},
+      ...name !== void 0 ? { "aria-label": name } : {},
+      ...labelledBy !== void 0 ? { "aria-labelledby": labelledBy } : {},
+      className: clsx(toolbarStyles({ orientation: axis }), className),
+      ...props,
+      children
+    }
+  ) });
+});
+Toolbar.displayName = "Toolbar";
+var separatorStyles = cva("bg-oprt-border self-stretch", {
+  variants: {
+    orientation: {
+      horizontal: "w-px mx-1u",
+      vertical: "h-px my-1u"
+    }
+  },
+  defaultVariants: { orientation: "horizontal" }
+});
+var ToolbarSeparator = forwardRef(
+  (allProps, ref) => {
+    const { className, orientation: given, ...props } = allProps;
+    const inherited = useContext(ToolbarOrientationContext);
+    const orientation = given ?? inherited ?? "horizontal";
+    if (process.env.NODE_ENV !== "production") {
+      devValidate("ToolbarSeparator", ToolbarManifest.ToolbarSeparator.props, { ...allProps });
+    }
+    return /* @__PURE__ */ jsx(
+      AriaSeparator,
+      {
+        ref,
+        orientation: orientation === "horizontal" ? "vertical" : "horizontal",
+        elementType: "div",
+        className: clsx(separatorStyles({ orientation }), className),
+        ...props
+      }
+    );
+  }
+);
+ToolbarSeparator.displayName = "ToolbarSeparator";
+export {
+  Toolbar,
+  ToolbarSeparator
+};

package/dist/Toolbar/Toolbar.manifest.js

@@ -0,0 +1,70 @@
+// src/Toolbar/Toolbar.manifest.ts
+var ToolbarManifest = {
+  Toolbar: {
+    description: "Horizontal or vertical action bar with roving-tabindex arrow-key navigation over its focusable children. A horizontal toolbar that does not fit wraps onto more rows and grows taller, so no action is hidden; arrow keys follow reading order across rows. A vertical toolbar stacks.",
+    props: {
+      orientation: {
+        type: "enum",
+        values: ["horizontal", "vertical"],
+        default: "horizontal"
+      },
+      ariaLabel: {
+        type: "string",
+        description: "The toolbar's accessible name (native aria-label works too). With aria-labelledby and no label the toolbar is named by that element; a toolbar given neither is called Toolbar."
+      }
+    },
+    slots: {
+      children: {
+        type: "Button | ButtonGroup | Badge | Toggle | CopyButton | ConfirmDialog | DropdownMenu | Tooltip | ToolbarSeparator",
+        required: true
+      }
+    },
+    composable_with: [
+      "Button",
+      "ButtonGroup",
+      "Badge",
+      "Toggle",
+      "CopyButton",
+      "ConfirmDialog",
+      "DropdownMenu",
+      "Tooltip",
+      "ToolbarSeparator"
+    ],
+    never_inside: ["Toolbar"],
+    example: '<Toolbar ariaLabel="Track actions">\n  <Button>ZOOM</Button>\n  <ToolbarSeparator />\n  <Button>RESET</Button>\n</Toolbar>'
+  },
+  ToolbarSeparator: {
+    description: "Visual divider between Toolbar action groups. It follows its Toolbar: a rule across a vertical toolbar, a rule between the actions of a horizontal one.",
+    props: {
+      orientation: {
+        type: "enum",
+        values: ["horizontal", "vertical"],
+        default: "horizontal",
+        description: "The axis of the toolbar the separator is in; the rule runs across it. It follows its Toolbar when omitted, so pass it only to say otherwise."
+      }
+    },
+    composable_with: ["Toolbar"],
+    never_inside: ["ToolbarSeparator"],
+    example: "<ToolbarSeparator />"
+  }
+};
+var ToolbarCompositionRules = {
+  Toolbar: {
+    allowed_children: [
+      "Button",
+      "ButtonGroup",
+      "Badge",
+      "Toggle",
+      "CopyButton",
+      // Each puts one control in the bar and draws its overlay outside it.
+      "ConfirmDialog",
+      "DropdownMenu",
+      "Tooltip",
+      "ToolbarSeparator"
+    ]
+  }
+};
+export {
+  ToolbarCompositionRules,
+  ToolbarManifest
+};

package/dist/Toolbar/index.js

@@ -0,0 +1,12 @@
+// src/Toolbar/index.ts
+import {
+  Toolbar,
+  ToolbarSeparator
+} from "./Toolbar.js";
+import { ToolbarManifest, ToolbarCompositionRules } from "./Toolbar.manifest.js";
+export {
+  Toolbar,
+  ToolbarCompositionRules,
+  ToolbarManifest,
+  ToolbarSeparator
+};