@lumiose/ui 0.0.0-stage → 0.1.1

package/dist/toggle-group/toggle-group.script.ts

@@ -0,0 +1,166 @@
+// ToggleGroup's client script (decision-62, decision-63): it defines `<lu-toggle-group>`, the
+// light-DOM element ToggleGroup renders around its toggles, native `<button aria-pressed>`s that
+// the platform cannot press. After Base UI and doc-9 section 13:
+//
+// - A click (the pointer, Enter, Space) on a toggle fires a cancelable, bubbling `pressedchange`
+//   (`detail.pressed`) on it and, unless it is cancelled, flips `aria-pressed`. One toggle is
+//   pressed at a time (pressing it again releases it), or any number with `multiple`.
+// - `value` (the pressed toggles' values) and a `valuechange` event after the user changes it.
+// - One tab stop, moved by the arrow keys along `data-orientation` (swapped right to left), Home
+//   and End, looping unless `data-loop-focus="false"`. Disabled toggles are native `disabled`
+//   buttons, which focus skips. When the tab stop is removed or disabled, or the group is enabled,
+//   the first pressed or enabled toggle takes it (TASK-437 M11).
+//
+// A Toggle outside a group needs no script: the component presses it, in an island. Inside a
+// Toolbar (`lu-toolbar`), the group still presses its toggles but leaves the tab stop and the
+// arrow keys to the toolbar, whose items its toggles are.
+//
+// It must not import `lumiose`: server-rendered pages load it without the runtime.
+
+export interface ToggleChangeDetail {
+  pressed: boolean;
+}
+
+const ITEM = "button[aria-pressed]";
+
+const pressed = (item: Element) => item.getAttribute("aria-pressed") === "true";
+/** Whether focus can move to `item`: not natively disabled, nor hidden. */
+const usable = (item: HTMLButtonElement) => !item.disabled && (item.checkVisibility?.() ?? true);
+
+/** Asks with a cancelable `pressedchange` whether `item` may become `next`, and sets it if so. */
+function press(item: HTMLElement, next: boolean): boolean {
+  const ok = item.dispatchEvent(
+    new CustomEvent<ToggleChangeDetail>("pressedchange", {
+      bubbles: true,
+      cancelable: true,
+      detail: { pressed: next },
+    }),
+  );
+  if (ok) item.setAttribute("aria-pressed", String(next));
+  return ok;
+}
+
+export class ToggleGroupElement extends HTMLElement {
+  /** Moves the tab stop on when toggles come, go, or are disabled or enabled. */
+  #observer = new MutationObserver(() => this.#rove());
+
+  /** The group's own toggles: nested groups keep theirs. */
+  get items(): HTMLButtonElement[] {
+    return [...this.querySelectorAll<HTMLButtonElement>(ITEM)].filter(
+      (item) => item.closest("lu-toggle-group") === this,
+    );
+  }
+
+  /** The pressed toggles' values. Setting it presses those toggles, without events. */
+  get value(): string[] {
+    return this.items.filter(pressed).map((item) => item.value);
+  }
+
+  set value(next: readonly string[] | null | undefined) {
+    const values = next ?? [];
+    for (const item of this.items)
+      item.setAttribute("aria-pressed", String(values.includes(item.value)));
+    this.#rove();
+  }
+
+  /** Whether several toggles can be pressed; reflects the `multiple` attribute. */
+  get multiple(): boolean {
+    return this.hasAttribute("multiple");
+  }
+
+  set multiple(on: boolean) {
+    this.toggleAttribute("multiple", on);
+  }
+
+  connectedCallback(): void {
+    this.addEventListener("click", this.#onClick);
+    this.addEventListener("keydown", this.#onKeyDown);
+    this.addEventListener("focusin", this.#onFocusIn);
+    this.#observer.observe(this, {
+      subtree: true,
+      childList: true,
+      attributeFilter: ["disabled", "hidden"],
+    });
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", () => this.#rove(), { once: true });
+    } else queueMicrotask(() => this.#rove());
+  }
+
+  disconnectedCallback(): void {
+    this.removeEventListener("click", this.#onClick);
+    this.removeEventListener("keydown", this.#onKeyDown);
+    this.removeEventListener("focusin", this.#onFocusIn);
+    this.#observer.disconnect();
+  }
+
+  /** Whether a Toolbar around the group moves focus instead. */
+  get #inToolbar(): boolean {
+    return this.closest("lu-toolbar") !== null;
+  }
+
+  /** One tab stop: `to`, else the current one if still usable, else the first pressed or enabled. */
+  #rove(to?: HTMLElement): void {
+    if (this.#inToolbar) return;
+    const items = this.items;
+    const enabled = items.filter(usable);
+    const current = enabled.find((item) => item.tabIndex === 0);
+    const stop = to ?? current ?? enabled.find(pressed) ?? enabled[0];
+    for (const item of items) item.tabIndex = item === stop ? 0 : -1;
+  }
+
+  #itemOf(event: Event): HTMLButtonElement | undefined {
+    const item = (event.target as Element).closest?.<HTMLButtonElement>(ITEM);
+    return item && item.closest("lu-toggle-group") === this ? item : undefined;
+  }
+
+  #onClick = (event: MouseEvent) => {
+    const item = this.#itemOf(event);
+    if (!item || item.disabled) return;
+    const next = !pressed(item);
+    const before = this.value;
+    if (!press(item, next)) return;
+    // One at a time: pressing an item releases the others.
+    if (next && !this.multiple) {
+      for (const other of this.items) if (other !== item && pressed(other)) press(other, false);
+    }
+    this.#rove(item);
+    const after = this.value;
+    if (after.length !== before.length || after.some((value, i) => value !== before[i])) {
+      this.dispatchEvent(new Event("valuechange"));
+    }
+  };
+
+  #onFocusIn = (event: FocusEvent) => {
+    const item = this.#itemOf(event);
+    if (item) this.#rove(item);
+  };
+
+  #onKeyDown = (event: KeyboardEvent) => {
+    if (this.#inToolbar) return;
+    const item = this.#itemOf(event);
+    if (!item || event.isComposing || event.altKey || event.ctrlKey || event.metaKey) return;
+    const vertical = this.dataset.orientation === "vertical";
+    const rtl = !vertical && getComputedStyle(this).direction === "rtl";
+    const steps: Record<string, number> = vertical
+      ? { ArrowDown: 1, ArrowUp: -1 }
+      : { ArrowRight: rtl ? -1 : 1, ArrowLeft: rtl ? 1 : -1 };
+    const enabled = this.items.filter(usable);
+    const at = enabled.indexOf(item);
+    const loop = this.dataset.loopFocus !== "false";
+    let next: number | undefined;
+    if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = enabled.length - 1;
+    else if (steps[event.key] !== undefined) {
+      next = at + steps[event.key]!;
+      if (next < 0) next = loop ? enabled.length - 1 : 0;
+      if (next >= enabled.length) next = loop ? 0 : enabled.length - 1;
+    }
+    if (next === undefined) return;
+    event.preventDefault();
+    enabled[next]?.focus();
+  };
+}
+
+if (!customElements.get("lu-toggle-group")) {
+  customElements.define("lu-toggle-group", ToggleGroupElement);
+}

package/dist/toggle-group/toggle-group.tsx

@@ -0,0 +1,117 @@
+// ToggleGroup (decision-62, TASK-369): `<lu-toggle-group role="group">` around Toggles, after Base
+// UI's ToggleGroup. Its script (toggle-group.script.ts) presses the toggles, one at a time or with
+// `multiple` any number, and gives the group one tab stop moved by the arrow keys, on server pages
+// too. The `value` prop drives the element when it changes, and its `valuechange` event reports
+// back through `onValueChange`.
+import { effect, ref, signal, untrack } from "lumiose";
+import {
+  ToggleGroupContext,
+  type ToggleGroupContextValue,
+  type ToggleRecord,
+} from "../toggle/context.ts";
+import type { ToggleGroupElement } from "./toggle-group.script.ts";
+import toggleGroupScript from "./toggle-group.script.ts?client";
+
+declare module "lumiose/jsx-runtime" {
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * ToggleGroup's element: property `value` (the pressed toggles' values) and `multiple`,
+       * event `valuechange`.
+       */
+      "lu-toggle-group": JSX.HTMLProps<ToggleGroupElement> & { multiple?: boolean };
+    }
+  }
+}
+
+/**
+ * The element props ToggleGroup passes to `<lu-toggle-group>`, without the brand of intrinsic
+ * elements' props, so that `bind:value` applies to it.
+ */
+type ElementProps = {
+  [
+    K in keyof JSX.HTMLProps<ToggleGroupElement> as K extends string ? K : never
+  ]: JSX.HTMLProps<ToggleGroupElement>[K];
+};
+
+/**
+ * `ToggleGroup` renders `<lu-toggle-group role="group">`. Name it with `aria-label` or
+ * `aria-labelledby`. `bind:value={signal}` stands in for `value` and `onValueChange`.
+ */
+export interface ToggleGroupProps extends Omit<ElementProps, "children"> {
+  /** Presses the toggles with these values when it changes. Pair it with `onValueChange`. */
+  value?: string[];
+  /** The toggles pressed at first, when `value` is left out. */
+  defaultValue?: string[];
+  /** Called with the pressed toggles' values after the user presses or releases one. */
+  onValueChange?: (value: string[]) => void;
+  /** Any number of toggles can be pressed; otherwise one at a time. */
+  multiple?: boolean;
+  /** The arrow keys that move between the toggles: left and right, or up and down. */
+  orientation?: "horizontal" | "vertical";
+  /** Arrow keys go from the last toggle to the first and back. Default `true`. */
+  loopFocus?: boolean;
+  /** Disables every toggle. */
+  disabled?: boolean;
+  /** The `Toggle`s. */
+  children?: JSX.Element;
+}
+
+/**
+ * A set of toggles with one value, the pressed ones: a text alignment (one at a time) or text
+ * styles (`multiple`). One tab stop, arrow keys between the toggles.
+ *
+ * @example
+ * <ToggleGroup aria-label="Alignment" defaultValue={["left"]}>
+ *   <Toggle value="left">Left</Toggle>
+ *   <Toggle value="center">Center</Toggle>
+ * </ToggleGroup>
+ */
+export function ToggleGroup({
+  value,
+  defaultValue,
+  onValueChange,
+  multiple,
+  orientation,
+  loopFocus,
+  disabled,
+  children,
+  ...rest
+}: ToggleGroupProps) {
+  // Presses the toggles and moves focus, on the server HTML and in islands (decision-63).
+  toggleGroupScript();
+  const element = ref<ToggleGroupElement>();
+  const values = signal<readonly string[]>(untrack(() => value ?? defaultValue ?? []));
+  // The `value` prop drives the toggles when it changes.
+  effect(() => {
+    const next = value;
+    if (next === undefined) return;
+    values.set(next);
+    const host = element();
+    if (host?.isConnected) host.value = next;
+  });
+  const context: ToggleGroupContextValue = {
+    values,
+    items: signal<ToggleRecord[]>([]),
+    disabled: () => disabled === true,
+  };
+  return (
+    <ToggleGroupContext value={context}>
+      <lu-toggle-group
+        {...rest}
+        ref={element}
+        role="group"
+        multiple={multiple}
+        data-orientation={orientation ?? "horizontal"}
+        data-loop-focus={loopFocus === false ? "false" : undefined}
+        on:valuechange={() => {
+          const next = element()!.value;
+          values.set(next);
+          onValueChange?.(next);
+        }}
+      >
+        {children}
+      </lu-toggle-group>
+    </ToggleGroupContext>
+  );
+}

package/dist/toolbar/context.ts

@@ -0,0 +1,18 @@
+// The context a Toolbar gives its items (TASK-383), Toggles in a ToggleGroup inside it included:
+// the orientation and the disabled state, which reaches its Menu and Popover triggers and Toggles
+// too (TASK-437 M13).
+import { createContext } from "lumiose";
+
+export interface ToolbarContextValue {
+  orientation: () => "horizontal" | "vertical";
+  disabled: () => boolean;
+}
+
+export const ToolbarContext = createContext<ToolbarContextValue>();
+
+/**
+ * What a popup gives its content instead (Menu.Popup, Popover.Popup): the content of a popup
+ * opened from a toolbar is not the toolbar's, whose script skips popups too, so its toggles and
+ * triggers keep their own tab stops.
+ */
+export const OUTSIDE_TOOLBAR = undefined as unknown as ToolbarContextValue;

package/dist/toolbar/toolbar.css

@@ -0,0 +1,12 @@
+/*
+ * The CSS Toolbar needs, and nothing else (decision-62): `<lu-toolbar>` is a block, as Base UI's
+ * `<div>` root, rather than a custom element's default inline box. It sits in the `lu.core`
+ * layer, so any app CSS wins.
+ */
+@layer lu.core, lu.theme;
+
+@layer lu.core {
+  lu-toolbar {
+    display: block;
+  }
+}

package/dist/toolbar/toolbar.script.ts

@@ -0,0 +1,123 @@
+// Toolbar's client script (decision-62, decision-63): it defines `<lu-toolbar>`, the light-DOM
+// element Toolbar.Root renders with `role="toolbar"`, after the APG toolbar pattern and Base UI:
+//
+// - One tab stop for the whole toolbar: its items (buttons, links, inputs, selects, the toggles of
+//   a ToggleGroup inside it) have `tabindex="-1"` but one, the last focused (at first, the first).
+//   The server HTML leaves every item a tab stop, so all are reachable before the script runs
+//   (TASK-437 M12). Disabled items stay focusable (`aria-disabled`, as Base UI's
+//   `focusableWhenDisabled`); natively disabled controls are skipped. Separators are not items.
+//   When the tab stop is removed, disabled or hidden, the first item takes it (TASK-437 M11).
+// - The arrow keys along `data-orientation` (Left and Right swapped right to left) move focus to
+//   the next or previous item, looping unless `data-loop-focus="false"`; Home and End to the first
+//   and last. A control keeps the keys it needs: a text field its caret's Left and Right (focus
+//   moves on at its start or end; with Shift they always select) and Home and End, a number field
+//   or a slider its arrows, a select its Up and Down. A text field the keys move into has its text
+//   selected, as in Base UI (TASK-452 L26). A key an item already handled (a Menu trigger's) is left alone.
+// - A ToggleGroup inside a toolbar leaves its keys and tab stop to the toolbar (toggle-group's
+//   script checks for an `lu-toolbar` around it).
+//
+// It must not import `lumiose`: server-rendered pages load it without the runtime.
+
+const ITEM = "button, a[href], input:not([type=hidden]), select, textarea, [data-toolbar-item]";
+
+/** Inputs whose Left and Right move a caret. */
+const TEXT = /^(text|search|email|url|tel|password)$/;
+
+export class ToolbarElement extends HTMLElement {
+  /** The tab stop, kept while it stays an item. */
+  #stop: HTMLElement | undefined;
+  /** Moves the tab stop on when items come, go, or are disabled or hidden. */
+  #observer = new MutationObserver(() => this.#rove());
+
+  /** The toolbar's items, in order: not those of a nested toolbar or of a popup inside it. */
+  get items(): HTMLElement[] {
+    return [...this.querySelectorAll<HTMLElement>(ITEM)].filter((item) => {
+      if (item.closest("lu-toolbar") !== this) return false;
+      const popup = item.closest("[popover], dialog");
+      if (popup && this.contains(popup)) return false;
+      return !(item as HTMLButtonElement).disabled && (item.checkVisibility?.() ?? true);
+    });
+  }
+
+  connectedCallback(): void {
+    this.addEventListener("keydown", this.#onKeyDown);
+    this.addEventListener("focusin", this.#onFocusIn);
+    this.#observer.observe(this, {
+      subtree: true,
+      childList: true,
+      attributeFilter: ["disabled", "hidden"],
+    });
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", () => this.#rove(), { once: true });
+    } else queueMicrotask(() => this.#rove());
+  }
+
+  disconnectedCallback(): void {
+    this.removeEventListener("keydown", this.#onKeyDown);
+    this.removeEventListener("focusin", this.#onFocusIn);
+    this.#observer.disconnect();
+  }
+
+  /** One tab stop: `to`, else the current one if it is still an item, else the first item. */
+  #rove(to?: HTMLElement): void {
+    const items = this.items;
+    const kept = this.#stop && items.includes(this.#stop) ? this.#stop : undefined;
+    const stop = to ?? kept ?? items[0];
+    this.#stop = stop;
+    for (const item of items) item.tabIndex = item === stop ? 0 : -1;
+  }
+
+  #onFocusIn = (event: FocusEvent) => {
+    const item = this.items.find((each) => each === event.target);
+    if (item) this.#rove(item);
+  };
+
+  /** Whether `item` keeps the key for itself. */
+  #owns(item: HTMLElement, { key, shiftKey }: KeyboardEvent): boolean {
+    if (item instanceof HTMLTextAreaElement) return true;
+    if (item instanceof HTMLSelectElement) return key === "ArrowUp" || key === "ArrowDown";
+    if (!(item instanceof HTMLInputElement)) return false;
+    if (item.type === "number" || item.type === "range") return key.startsWith("Arrow");
+    if (!TEXT.test(item.type)) return false;
+    if (key === "Home" || key === "End") return true;
+    // Shift selects: it never leaves the field.
+    if (shiftKey && (key === "ArrowLeft" || key === "ArrowRight")) return true;
+    // A text field keeps Left and Right until its caret is at the edge it moves toward.
+    const { selectionStart: start, selectionEnd: end, value } = item;
+    if (start === null || start !== end) return key === "ArrowLeft" || key === "ArrowRight";
+    const rtl = getComputedStyle(item).direction === "rtl";
+    if (key === (rtl ? "ArrowRight" : "ArrowLeft")) return start > 0;
+    if (key === (rtl ? "ArrowLeft" : "ArrowRight")) return end < value.length;
+    return false;
+  }
+
+  #onKeyDown = (event: KeyboardEvent) => {
+    const { defaultPrevented, isComposing, altKey, ctrlKey, metaKey } = event;
+    if (defaultPrevented || isComposing || altKey || ctrlKey || metaKey) return;
+    const items = this.items;
+    const item = items.find((each) => each === event.target);
+    if (!item || this.#owns(item, event)) return;
+    const vertical = this.dataset.orientation === "vertical";
+    const rtl = !vertical && getComputedStyle(this).direction === "rtl";
+    const steps: Record<string, number> = vertical
+      ? { ArrowDown: 1, ArrowUp: -1 }
+      : { ArrowRight: rtl ? -1 : 1, ArrowLeft: rtl ? 1 : -1 };
+    const loop = this.dataset.loopFocus !== "false";
+    const at = items.indexOf(item);
+    let next: number | undefined;
+    if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = items.length - 1;
+    else if (steps[event.key] !== undefined) {
+      next = at + steps[event.key]!;
+      if (next < 0) next = loop ? items.length - 1 : 0;
+      if (next >= items.length) next = loop ? 0 : items.length - 1;
+    }
+    if (next === undefined) return;
+    event.preventDefault();
+    const to = items[next];
+    to?.focus();
+    if (to instanceof HTMLInputElement && TEXT.test(to.type)) to.select();
+  };
+}
+
+if (!customElements.get("lu-toolbar")) customElements.define("lu-toolbar", ToolbarElement);

package/dist/toolbar/toolbar.tsx

@@ -0,0 +1,180 @@
+// Toolbar (decision-62, TASK-383): a row (or column) of controls with one tab stop, after Base UI's
+// Toolbar and the APG toolbar pattern. Root renders `<lu-toolbar role="toolbar">`, whose script
+// (toolbar.script.ts) moves focus between the items with the arrow keys, Home and End, following
+// the orientation and the direction. The items are native: Button is a `<button>` that stays
+// focusable when disabled (`aria-disabled`), Link an `<a>`, Input an `<input>`; a ToggleGroup's
+// toggles inside a toolbar are its items too. In the server HTML every item is a tab stop, so all
+// are reachable before the script (or without it); the script makes them one (TASK-437 M12).
+// `disabled` reaches every item but links: Menu and Popover triggers and Toggles render
+// `aria-disabled`, and button.script.ts cancels their clicks (TASK-437 M13).
+import { useContext } from "lumiose";
+import { Button, type ButtonProps } from "../button/button.tsx";
+import buttonScript from "../button/button.script.ts?client";
+import { Separator, type SeparatorProps } from "../separator/separator.tsx";
+import { ToolbarContext, type ToolbarContextValue } from "./context.ts";
+import type { ToolbarElement } from "./toolbar.script.ts";
+import toolbarScript from "./toolbar.script.ts?client";
+
+declare module "lumiose/jsx-runtime" {
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * Toolbar's element: `role="toolbar"`, with `data-orientation` and `data-loop-focus`
+       * (`"false"` stops focus at the ends).
+       */
+      "lu-toolbar": JSX.HTMLProps<ToolbarElement>;
+    }
+  }
+}
+
+/** `Toolbar.Root` renders `<lu-toolbar role="toolbar">` around the items. */
+export type ToolbarRootProps = JSX.HTMLProps<ToolbarElement> & {
+  /** A row (`"horizontal"`, default) moved through with Left and Right, or a column with Up and Down. */
+  orientation?: "horizontal" | "vertical";
+  /** The arrow keys go from the last item to the first, and back. Default `true`. */
+  loopFocus?: boolean;
+  /** Disables every item; they stay focusable (`aria-disabled`). */
+  disabled?: boolean;
+};
+
+/**
+ * A `<button>` item: a [Button](button.md) that, disabled, stays focusable (`aria-disabled`) unless
+ * `focusableWhenDisabled` is `false`.
+ */
+export type ToolbarButtonProps = ButtonProps;
+
+/** An `<a>` item. */
+export type ToolbarLinkProps = JSX.IntrinsicElements["a"];
+
+/** An `<input>` item: Left and Right move its caret, and focus moves on at its start or end. */
+export type ToolbarInputProps = JSX.IntrinsicElements["input"] & {
+  /** Disabled, it stays focusable (`aria-disabled` and read-only). Default `true`. */
+  focusableWhenDisabled?: boolean;
+};
+
+/** A `<div role="group">` of items, which `disabled` disables together. */
+export type ToolbarGroupProps = JSX.IntrinsicElements["div"] & {
+  /** Disables the group's items; they stay focusable. */
+  disabled?: boolean;
+};
+
+/** A [Separator](separator.md) between items: across the toolbar (vertical in a row) by default. */
+export type ToolbarSeparatorProps = SeparatorProps;
+
+function useToolbar(part: string): ToolbarContextValue {
+  const context = useContext(ToolbarContext);
+  if (!context) throw new Error(`Toolbar.${part} must be inside <Toolbar.Root>.`);
+  return context;
+}
+
+function Root({ orientation, loopFocus, disabled, children, ...rest }: ToolbarRootProps) {
+  // The arrow keys and the single tab stop, on server pages and in islands (decision-63).
+  toolbarScript();
+  // Cancels the clicks of its `aria-disabled` items, Menu and Popover triggers and Toggles included.
+  buttonScript();
+  const context: ToolbarContextValue = {
+    orientation: () => orientation ?? "horizontal",
+    disabled: () => disabled === true,
+  };
+  return (
+    <ToolbarContext value={context}>
+      <lu-toolbar
+        {...rest}
+        role="toolbar"
+        aria-orientation={context.orientation()}
+        data-orientation={context.orientation()}
+        data-loop-focus={loopFocus === false ? "false" : undefined}
+        data-disabled={context.disabled() ? "" : undefined}
+      >
+        {children}
+      </lu-toolbar>
+    </ToolbarContext>
+  );
+}
+
+function ToolbarButton({ disabled, focusableWhenDisabled, children, ...rest }: ToolbarButtonProps) {
+  const toolbar = useToolbar("Button");
+  return (
+    <Button
+      {...rest}
+      disabled={disabled === true || toolbar.disabled()}
+      focusableWhenDisabled={focusableWhenDisabled ?? true}
+      data-orientation={toolbar.orientation()}
+    >
+      {children}
+    </Button>
+  );
+}
+
+function Link({ children, ...rest }: ToolbarLinkProps) {
+  const toolbar = useToolbar("Link");
+  return (
+    <a {...rest} data-orientation={toolbar.orientation()}>
+      {children}
+    </a>
+  );
+}
+
+function Input({ disabled, focusableWhenDisabled, ...rest }: ToolbarInputProps) {
+  const toolbar = useToolbar("Input");
+  const off = () => disabled === true || toolbar.disabled();
+  const soft = () => off() && focusableWhenDisabled !== false;
+  return (
+    <input
+      {...rest}
+      disabled={off() && !soft()}
+      readonly={soft() || rest.readonly}
+      aria-disabled={soft() ? "true" : rest["aria-disabled"]}
+      data-orientation={toolbar.orientation()}
+    />
+  );
+}
+
+function Group({ disabled, children, ...rest }: ToolbarGroupProps) {
+  const toolbar = useToolbar("Group");
+  const context: ToolbarContextValue = {
+    ...toolbar,
+    disabled: () => disabled === true || toolbar.disabled(),
+  };
+  return (
+    <ToolbarContext value={context}>
+      <div
+        {...rest}
+        role="group"
+        data-orientation={toolbar.orientation()}
+        data-disabled={context.disabled() ? "" : undefined}
+      >
+        {children}
+      </div>
+    </ToolbarContext>
+  );
+}
+
+function ToolbarSeparator({ orientation, ...rest }: ToolbarSeparatorProps) {
+  const toolbar = useToolbar("Separator");
+  // Across the toolbar: a vertical line in a row, a horizontal one in a column.
+  const across = () => (toolbar.orientation() === "horizontal" ? "vertical" : "horizontal");
+  return <Separator {...rest} orientation={orientation ?? across()} />;
+}
+
+/**
+ * A set of controls with one tab stop: the arrow keys move between them, Home and End go to the
+ * ends, following the orientation and the direction. Buttons, links, inputs and ToggleGroups
+ * inside it are its items. Unstyled: style the parts through `class`, `[data-orientation]`,
+ * `[aria-disabled="true"]` and `:focus-visible`.
+ *
+ * @example
+ * <Toolbar.Root aria-label="Formatting">
+ *   <Toolbar.Button>Bold</Toolbar.Button>
+ *   <Toolbar.Separator />
+ *   <Toolbar.Link href="/help">Help</Toolbar.Link>
+ * </Toolbar.Root>
+ */
+export const Toolbar = {
+  Root,
+  Button: ToolbarButton,
+  Link,
+  Input,
+  Group,
+  Separator: ToolbarSeparator,
+};

package/dist/tooltip/tooltip.css

@@ -0,0 +1,8 @@
+/*
+ * Tooltip needs no CSS to open, close or stack: the native popover does it, and its client script
+ * opens it on hover and focus. What it needs is its placement next to the trigger, shared with
+ * Popover (placement.css).
+ */
+@layer lu.core, lu.theme;
+
+@import "../placement/placement.css";