@stridge/noctis 1.0.0-beta.0

package/dist/components/toolbar/index.d.ts

@@ -0,0 +1,3 @@
+import { ToolbarSize, ToolbarVariant } from "./toolbar.types.js";
+import { Toolbar } from "./toolbar.js";
+import { ToolbarDataAttributes } from "./toolbar.slots.js";

package/dist/components/toolbar/toolbar.context.js

@@ -0,0 +1,23 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/components/toolbar/toolbar.context.ts
+const ToolbarContext = createContext(null);
+const ToolbarProvider = ToolbarContext.Provider;
+/**
+* Read the enclosing `Toolbar.Root`'s density, or `null` when a toolbar item is used standalone. Used by
+* every hosted item (`Toolbar.Button`, `Toolbar.Link`, `Toolbar.Toggle`, `Toolbar.ToggleGroup`) to map
+* the toolbar `size` onto the hosted control's size so the whole row sits at one height.
+*/
+function useToolbar() {
+	return use(ToolbarContext);
+}
+/**
+* Map the toolbar density onto the hosted `Button`/`Toggle` size scale — toolbar `md`→`sm` (control-sm)
+* and toolbar `sm`→`xs` (control-xs). One mapping for every item kind, so they line up.
+*/
+const ITEM_SIZE_FOR_TOOLBAR = {
+	md: "sm",
+	sm: "xs"
+};
+//#endregion
+export { ITEM_SIZE_FOR_TOOLBAR, ToolbarProvider, useToolbar };

package/dist/components/toolbar/toolbar.d.ts

@@ -0,0 +1,218 @@
+import { IconGlyph } from "../../icons/glyphs.js";
+import { Button } from "../button/button.js";
+import { toolbar_d_exports } from "../../primitives/toolbar.js";
+import { Toggle, ToggleGroup } from "../toggle/toggle.js";
+import { ToolbarSize, ToolbarVariant } from "./toolbar.types.js";
+import { ToolbarPartProps, groupProps, inputProps, rootProps, separatorProps, spacerProps } from "./toolbar.props.js";
+import { ReactElement } from "react";
+
+//#region src/components/toolbar/toolbar.d.ts
+/**
+ * The row container. Owns the roving-tabindex focus model (one tab stop into the row, arrow keys move
+ * between items) and the orientation. Works `horizontal` (default) or `vertical`; pass `loopFocus`
+ * (default `true`) to control whether arrow navigation wraps at the ends. `size` (`sm | md`) sets the
+ * density and `variant` (`framed | plain | floating`) the frame. Compose `Toolbar.Button`,
+ * `Toolbar.Link`, `Toolbar.Group`, `Toolbar.ToggleGroup`/`Toolbar.Toggle`, `Toolbar.Input`,
+ * `Toolbar.Spacer`, and `Toolbar.Separator` inside it.
+ *
+ * **Always pass an `aria-label`** (or `aria-labelledby`) — the APG toolbar pattern requires the row be
+ * named, and the toolbar must never be the sole way to reach an action.
+ */
+declare function ToolbarRoot({
+  size,
+  variant,
+  className,
+  onKeyDown,
+  ...props
+}: Toolbar.Root.Props): ReactElement;
+/**
+ * A toolbar button — one roving item. Renders the shipped `Button` (ghost) so it shares the system's
+ * sizing, padding, focus ring, and disabled affordance instead of a forked recipe; the toolbar only
+ * coordinates its radius. Its `size` maps from the toolbar density unless set. Optional leading `icon`;
+ * provide an `aria-label` when icon-only. Compose a `Menu`/`Select`/`Dialog` trigger through `render`.
+ */
+declare function ToolbarButton({
+  size: sizeProp,
+  icon,
+  iconOnly,
+  disabled,
+  ...props
+}: Toolbar.Button.Props): ReactElement;
+/**
+ * A toolbar link — a roving item rendered as an `<a>`, sharing the exact button look (the same `Button`
+ * ghost recipe rendered as an anchor), so it never drifts in size or weight from the buttons beside it.
+ * Pass `href`; its `size` maps from the toolbar density unless set.
+ */
+declare function ToolbarLink({
+  size: sizeProp,
+  icon,
+  className,
+  children,
+  ...props
+}: Toolbar.Link.Props): ReactElement;
+/** Welds several items into one segmented cluster — abutting, with only the cluster's outer corners rounded. */
+declare function ToolbarGroup({
+  className,
+  ...props
+}: Toolbar.Group.Props): ReactElement;
+/** A hairline divider between item clusters. Decorative by default; Base UI gives it the separator role. */
+declare function ToolbarSeparator({
+  className,
+  ...props
+}: Toolbar.Separator.Props): ReactElement;
+/**
+ * A pressable toggle that is one roving toolbar item — a Bold/Italic/view-switcher button that shows an
+ * on state. Renders the shipped `Toggle` (neutral pressed fill, `aria-pressed`) through Base UI's
+ * `Toolbar.Button`, so it keeps the roving order while owning its pressed state. Its `size` maps from the
+ * toolbar's density unless set explicitly; pass `aria-label` when icon-only.
+ */
+declare function ToolbarToggle({
+  size: sizeProp,
+  ...props
+}: Toolbar.Toggle.Props): ReactElement;
+/**
+ * A set of toggles that coordinate selection — single-select (a view switcher / alignment) or `multiple`
+ * (Bold/Italic/Underline) — sharing the shipped `ToggleGroup`'s value model and roving. The toggles are a
+ * plain, gap-separated row spaced like the buttons, so the group never reads as a toolbar nested inside
+ * the toolbar. `size` maps from the toolbar's density unless set.
+ */
+declare function ToolbarToggleGroup({
+  size: sizeProp,
+  ...props
+}: Toolbar.ToggleGroup.Props): ReactElement;
+/**
+ * A roving field item — a zoom %, a font size, an inline search. Renders Base UI's `Toolbar.Input` (a
+ * native input that stays one roving stop) styled with the field roles. Mark it `aria-invalid` to paint
+ * the invalid border; provide an accessible name (`aria-label`).
+ */
+declare function ToolbarInput({
+  className,
+  ...props
+}: Toolbar.Input.Props): ReactElement;
+/**
+ * A logical flex slot that pushes the items after it to the inline-end — for a left tools / right actions
+ * split. RTL-safe by construction (logical flex), presentational (`aria-hidden`), and not a roving stop.
+ */
+declare function ToolbarSpacer({
+  className,
+  ...props
+}: Toolbar.Spacer.Props): ReactElement;
+/**
+ * A toolbar: a framed row of related controls — buttons, links, and welded groups, divided by hairline
+ * separators — sharing a single roving-tabindex focus model. Built on Base UI's Toolbar, so the row is
+ * one tab stop, the arrow keys move between items (looping at the ends by default), the look mirrors
+ * under RTL, and focus rings respect `:focus-visible`.
+ *
+ * Compose from parts: `Toolbar.Root` owns the orientation, density (`size`), frame (`variant`), and
+ * roving focus; `Toolbar.Button` / `Toolbar.Link` are the items; `Toolbar.ToggleGroup` /
+ * `Toolbar.Toggle` add pressable on/off controls; `Toolbar.Input` is a roving field; `Toolbar.Group`
+ * welds a set into one segmented cluster; `Toolbar.Spacer` justifies a trailing cluster; and
+ * `Toolbar.Separator` rules between clusters. A `Menu` "More" trigger composes via `Button`'s `render`.
+ *
+ * The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are
+ * exposed through the matching `Toolbar` namespace — e.g. `Toolbar.Button.Props`.
+ */
+declare const Toolbar: {
+  /** The row container. `Toolbar.Root.props({ size, variant })` → its spreadable prop bag. */Root: typeof ToolbarRoot & {
+    props: typeof rootProps;
+  }; /** A button item — the shipped `Button` (ghost) as a roving toolbar item. Use `Button.props()` for the escape hatch. */
+  Button: typeof ToolbarButton; /** A link item — the `Button` recipe rendered as an `<a>`. */
+  Link: typeof ToolbarLink; /** A welded set of coordinating toggles (segmented). Composes the shipped `ToggleGroup`. */
+  ToggleGroup: typeof ToolbarToggleGroup; /** A single pressable toggle that roves as one toolbar item. Composes the shipped `Toggle`. */
+  Toggle: typeof ToolbarToggle; /** A roving field item (zoom %, font size). `Toolbar.Input.props({ disabled })` → its prop bag. */
+  Input: typeof ToolbarInput & {
+    props: typeof inputProps;
+  }; /** A welded cluster. `Toolbar.Group.props({ disabled })` → its spreadable prop bag. */
+  Group: typeof ToolbarGroup & {
+    props: typeof groupProps;
+  }; /** A justifying flex slot. `Toolbar.Spacer.props()` → its spreadable prop bag. */
+  Spacer: typeof ToolbarSpacer & {
+    props: typeof spacerProps;
+  }; /** A hairline divider. `Toolbar.Separator.props()` → its spreadable prop bag. */
+  Separator: typeof ToolbarSeparator & {
+    props: typeof separatorProps;
+  };
+};
+/**
+ * Per-part prop and state types, mirroring Base UI's `Component.Part.Props` convention. Types-only —
+ * it emits no runtime code and merges with the `Toolbar` object above, so `Toolbar.Button` is the
+ * component value while `Toolbar.Button.Props` is its prop type.
+ */
+declare namespace Toolbar {
+  /** The spreadable data-attribute prop bag every `Toolbar.*.props()` returns (D12). */
+  type PartProps = ToolbarPartProps;
+  /** The toolbar density (`sm` | `md`). */
+  type Size = ToolbarSize;
+  /** The toolbar frame (`framed` | `plain` | `floating`). */
+  type Variant = ToolbarVariant;
+  namespace Root {
+    type Props = Omit<toolbar_d_exports.Toolbar.Root.Props, "className"> & {
+      /**
+       * Density — re-points the button/input metrics and maps onto the hosted toggles.
+       * @default "md"
+       */
+      size?: ToolbarSize;
+      /**
+       * Frame — `framed` (bordered surface), `plain` (no frame, for use inside a Surface), or
+       * `floating` (elevated shadow for a bubble/selection bar). All stay sharp.
+       * @default "framed"
+       */
+      variant?: ToolbarVariant; /** Classes merged onto the root. */
+      className?: string;
+    };
+    type State = toolbar_d_exports.Toolbar.Root.State;
+    /** `horizontal` | `vertical`. */
+    type Orientation = toolbar_d_exports.Toolbar.Root.Orientation;
+  }
+  namespace Button {
+    /** Mirrors the shipped `Button`'s props (rendered ghost as a roving item), plus the friendly `icon`. */
+    type Props = Button.Props & {
+      /** Leading glyph (maps to the Button's `startIcon`); an iconed button with no label is icon-only. */icon?: IconGlyph;
+    };
+    type State = toolbar_d_exports.Toolbar.Button.State;
+  }
+  namespace Link {
+    /** A real anchor styled with the `Button` (ghost) recipe — pass anchor props (`href`, `target`, …). */
+    type Props = Omit<toolbar_d_exports.Toolbar.Link.Props, "className"> & {
+      /** Item density; maps from the toolbar `size` unless set. */size?: Button.Size; /** Optional leading glyph. */
+      icon?: IconGlyph; /** Classes merged onto the link. */
+      className?: string;
+    };
+    type State = toolbar_d_exports.Toolbar.Link.State;
+  }
+  namespace Group {
+    type Props = Omit<toolbar_d_exports.Toolbar.Group.Props, "className"> & {
+      /** Classes merged onto the group. */className?: string;
+    };
+    type State = toolbar_d_exports.Toolbar.Group.State;
+  }
+  namespace Toggle {
+    /** Mirrors the shipped `Toggle`'s props — it is hosted as a roving toolbar item. */
+    type Props = Toggle.Props;
+    type State = Toggle.State;
+  }
+  namespace ToggleGroup {
+    /** Mirrors the shipped `ToggleGroup`'s props (value model, `variant`/`size`, `multiple`). */
+    type Props = ToggleGroup.Props;
+    type State = ToggleGroup.State;
+  }
+  namespace Input {
+    type Props = Omit<toolbar_d_exports.Toolbar.Input.Props, "className"> & {
+      /** Classes merged onto the input. */className?: string;
+    };
+    type State = toolbar_d_exports.Toolbar.Input.State;
+  }
+  namespace Spacer {
+    type Props = {
+      /** Classes merged onto the spacer. */className?: string;
+    };
+  }
+  namespace Separator {
+    type Props = Omit<toolbar_d_exports.Toolbar.Separator.Props, "className"> & {
+      /** Classes merged onto the separator. */className?: string;
+    };
+    type State = toolbar_d_exports.Toolbar.Separator.State;
+  }
+}
+//#endregion
+export { Toolbar };

package/dist/components/toolbar/toolbar.js

@@ -0,0 +1,197 @@
+"use client";
+import { Icon } from "../../icons/icon.js";
+import { Surface } from "../surface/surface.js";
+import { Button } from "../button/button.js";
+import { toolbar_exports } from "../../primitives/toolbar.js";
+import { Toggle, ToggleGroup } from "../toggle/toggle.js";
+import { ITEM_SIZE_FOR_TOOLBAR, ToolbarProvider, useToolbar } from "./toolbar.context.js";
+import { TOOLBAR_SLOTS } from "./toolbar.slots.js";
+import { groupProps, inputProps, rootProps, separatorProps, spacerProps } from "./toolbar.props.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/toolbar/toolbar.tsx
+/**
+* The row container. Owns the roving-tabindex focus model (one tab stop into the row, arrow keys move
+* between items) and the orientation. Works `horizontal` (default) or `vertical`; pass `loopFocus`
+* (default `true`) to control whether arrow navigation wraps at the ends. `size` (`sm | md`) sets the
+* density and `variant` (`framed | plain | floating`) the frame. Compose `Toolbar.Button`,
+* `Toolbar.Link`, `Toolbar.Group`, `Toolbar.ToggleGroup`/`Toolbar.Toggle`, `Toolbar.Input`,
+* `Toolbar.Spacer`, and `Toolbar.Separator` inside it.
+*
+* **Always pass an `aria-label`** (or `aria-labelledby`) — the APG toolbar pattern requires the row be
+* named, and the toolbar must never be the sole way to reach an action.
+*/
+function ToolbarRoot({ size = "md", variant = "framed", className, onKeyDown, ...props }) {
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || event.key !== "Home" && event.key !== "End") return;
+		const items = event.currentTarget.querySelectorAll("[data-focusable]");
+		const target = event.key === "Home" ? items[0] : items[items.length - 1];
+		if (target) {
+			event.preventDefault();
+			target.focus();
+		}
+	};
+	const surface = variant === "floating" ? /* @__PURE__ */ jsx(Surface, {
+		elevation: "elevated",
+		bordered: true,
+		shadow: "popover"
+	}) : void 0;
+	return /* @__PURE__ */ jsx(ToolbarProvider, {
+		value: { size },
+		children: /* @__PURE__ */ jsx(toolbar_exports.Toolbar.Root, {
+			...props,
+			onKeyDown: handleKeyDown,
+			render: surface,
+			"data-slot": TOOLBAR_SLOTS.root,
+			"data-size": size,
+			"data-variant": variant,
+			className
+		})
+	});
+}
+/**
+* A toolbar button — one roving item. Renders the shipped `Button` (ghost) so it shares the system's
+* sizing, padding, focus ring, and disabled affordance instead of a forked recipe; the toolbar only
+* coordinates its radius. Its `size` maps from the toolbar density unless set. Optional leading `icon`;
+* provide an `aria-label` when icon-only. Compose a `Menu`/`Select`/`Dialog` trigger through `render`.
+*/
+function ToolbarButton({ size: sizeProp, icon, iconOnly, disabled, ...props }) {
+	const toolbar = useToolbar();
+	const size = sizeProp ?? (toolbar ? ITEM_SIZE_FOR_TOOLBAR[toolbar.size] : void 0);
+	const square = iconOnly ?? (icon != null && props.children == null);
+	return /* @__PURE__ */ jsx(toolbar_exports.Toolbar.Button, {
+		disabled,
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size,
+			startIcon: icon,
+			iconOnly: square,
+			...props
+		})
+	});
+}
+/**
+* A toolbar link — a roving item rendered as an `<a>`, sharing the exact button look (the same `Button`
+* ghost recipe rendered as an anchor), so it never drifts in size or weight from the buttons beside it.
+* Pass `href`; its `size` maps from the toolbar density unless set.
+*/
+function ToolbarLink({ size: sizeProp, icon, className, children, ...props }) {
+	const toolbar = useToolbar();
+	const size = sizeProp ?? (toolbar ? ITEM_SIZE_FOR_TOOLBAR[toolbar.size] : void 0);
+	return /* @__PURE__ */ jsxs(toolbar_exports.Toolbar.Link, {
+		...Button.props({
+			variant: "ghost",
+			size,
+			className
+		}),
+		...props,
+		children: [icon ? /* @__PURE__ */ jsx(Icon, {
+			icon,
+			size: "sm"
+		}) : null, children]
+	});
+}
+/** Welds several items into one segmented cluster — abutting, with only the cluster's outer corners rounded. */
+function ToolbarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(toolbar_exports.Toolbar.Group, {
+		"data-slot": TOOLBAR_SLOTS.group,
+		className,
+		...props
+	});
+}
+/** A hairline divider between item clusters. Decorative by default; Base UI gives it the separator role. */
+function ToolbarSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(toolbar_exports.Toolbar.Separator, {
+		"data-slot": TOOLBAR_SLOTS.separator,
+		className,
+		...props
+	});
+}
+/**
+* A pressable toggle that is one roving toolbar item — a Bold/Italic/view-switcher button that shows an
+* on state. Renders the shipped `Toggle` (neutral pressed fill, `aria-pressed`) through Base UI's
+* `Toolbar.Button`, so it keeps the roving order while owning its pressed state. Its `size` maps from the
+* toolbar's density unless set explicitly; pass `aria-label` when icon-only.
+*/
+function ToolbarToggle({ size: sizeProp, ...props }) {
+	const toolbar = useToolbar();
+	const size = sizeProp ?? (toolbar ? ITEM_SIZE_FOR_TOOLBAR[toolbar.size] : void 0);
+	return /* @__PURE__ */ jsx(toolbar_exports.Toolbar.Button, { render: /* @__PURE__ */ jsx(Toggle, {
+		size,
+		...props
+	}) });
+}
+/**
+* A set of toggles that coordinate selection — single-select (a view switcher / alignment) or `multiple`
+* (Bold/Italic/Underline) — sharing the shipped `ToggleGroup`'s value model and roving. The toggles are a
+* plain, gap-separated row spaced like the buttons, so the group never reads as a toolbar nested inside
+* the toolbar. `size` maps from the toolbar's density unless set.
+*/
+function ToolbarToggleGroup({ size: sizeProp, ...props }) {
+	const toolbar = useToolbar();
+	return /* @__PURE__ */ jsx(ToggleGroup, {
+		size: sizeProp ?? (toolbar ? ITEM_SIZE_FOR_TOOLBAR[toolbar.size] : void 0),
+		...props
+	});
+}
+/**
+* A roving field item — a zoom %, a font size, an inline search. Renders Base UI's `Toolbar.Input` (a
+* native input that stays one roving stop) styled with the field roles. Mark it `aria-invalid` to paint
+* the invalid border; provide an accessible name (`aria-label`).
+*/
+function ToolbarInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(toolbar_exports.Toolbar.Input, {
+		"data-slot": TOOLBAR_SLOTS.input,
+		className,
+		...props
+	});
+}
+/**
+* A logical flex slot that pushes the items after it to the inline-end — for a left tools / right actions
+* split. RTL-safe by construction (logical flex), presentational (`aria-hidden`), and not a roving stop.
+*/
+function ToolbarSpacer({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": TOOLBAR_SLOTS.spacer,
+		"aria-hidden": true,
+		className,
+		...props
+	});
+}
+/**
+* A toolbar: a framed row of related controls — buttons, links, and welded groups, divided by hairline
+* separators — sharing a single roving-tabindex focus model. Built on Base UI's Toolbar, so the row is
+* one tab stop, the arrow keys move between items (looping at the ends by default), the look mirrors
+* under RTL, and focus rings respect `:focus-visible`.
+*
+* Compose from parts: `Toolbar.Root` owns the orientation, density (`size`), frame (`variant`), and
+* roving focus; `Toolbar.Button` / `Toolbar.Link` are the items; `Toolbar.ToggleGroup` /
+* `Toolbar.Toggle` add pressable on/off controls; `Toolbar.Input` is a roving field; `Toolbar.Group`
+* welds a set into one segmented cluster; `Toolbar.Spacer` justifies a trailing cluster; and
+* `Toolbar.Separator` rules between clusters. A `Menu` "More" trigger composes via `Button`'s `render`.
+*
+* The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are
+* exposed through the matching `Toolbar` namespace — e.g. `Toolbar.Button.Props`.
+*/
+const Toolbar = {
+	/** The row container. `Toolbar.Root.props({ size, variant })` → its spreadable prop bag. */
+	Root: Object.assign(ToolbarRoot, { props: rootProps }),
+	/** A button item — the shipped `Button` (ghost) as a roving toolbar item. Use `Button.props()` for the escape hatch. */
+	Button: ToolbarButton,
+	/** A link item — the `Button` recipe rendered as an `<a>`. */
+	Link: ToolbarLink,
+	/** A welded set of coordinating toggles (segmented). Composes the shipped `ToggleGroup`. */
+	ToggleGroup: ToolbarToggleGroup,
+	/** A single pressable toggle that roves as one toolbar item. Composes the shipped `Toggle`. */
+	Toggle: ToolbarToggle,
+	/** A roving field item (zoom %, font size). `Toolbar.Input.props({ disabled })` → its prop bag. */
+	Input: Object.assign(ToolbarInput, { props: inputProps }),
+	/** A welded cluster. `Toolbar.Group.props({ disabled })` → its spreadable prop bag. */
+	Group: Object.assign(ToolbarGroup, { props: groupProps }),
+	/** A justifying flex slot. `Toolbar.Spacer.props()` → its spreadable prop bag. */
+	Spacer: Object.assign(ToolbarSpacer, { props: spacerProps }),
+	/** A hairline divider. `Toolbar.Separator.props()` → its spreadable prop bag. */
+	Separator: Object.assign(ToolbarSeparator, { props: separatorProps })
+};
+//#endregion
+export { Toolbar };

package/dist/components/toolbar/toolbar.props.d.ts

@@ -0,0 +1,54 @@
+import { ToolbarSize, ToolbarVariant } from "./toolbar.types.js";
+
+//#region src/components/toolbar/toolbar.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `Toolbar.*.props()` returns. */
+type ToolbarPartProps = {
+  /** The slot value the matching `toolbar.css` rules anchor on. */"data-slot": string; /** Forwarded verbatim — styling is attribute-driven, so this is an optional consumer passthrough. */
+  className?: string; /** A data-attribute present (empty string) or absent (`undefined`); never `false`. */
+  [attr: `data-${string}`]: string | undefined;
+};
+/** Common shape: every part's `.props()` accepts an optional `className` passthrough. */
+interface BasePropsArgs {
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/** Argument to a part that can be disabled (`Toolbar.Button`, `Toolbar.Group`). */
+interface ToolbarDisableablePropsArgs extends BasePropsArgs {
+  /** Whether the part is disabled (drives the not-allowed affordance via `data-disabled`). */
+  disabled?: boolean;
+}
+/** Argument to a stateless part's `.props(...)` — no state of its own; look flows from the row. */
+type ToolbarStatelessPropsArgs = BasePropsArgs;
+/** Argument to `Toolbar.Root.props(...)` — the row's density + frame the CSS keys its metrics off. */
+interface ToolbarRootPropsArgs extends BasePropsArgs {
+  /** Density — re-points the button/input metrics via `data-size`. @default "md" */
+  size?: ToolbarSize;
+  /** Frame — `framed` | `plain` | `floating`, stamped as `data-variant`. @default "framed" */
+  variant?: ToolbarVariant;
+}
+/** Root prop bag: slot anchor plus the `data-size`/`data-variant` axes (orientation flows from Base UI). */
+declare function rootProps({
+  size,
+  variant,
+  className
+}?: ToolbarRootPropsArgs): ToolbarPartProps;
+/** Separator prop bag: just the slot anchor. */
+declare function separatorProps({
+  className
+}?: ToolbarStatelessPropsArgs): ToolbarPartProps;
+/** Group prop bag: slot anchor plus the `data-disabled` state. */
+declare function groupProps({
+  disabled,
+  className
+}?: ToolbarDisableablePropsArgs): ToolbarPartProps;
+/** Input prop bag: slot anchor plus the `data-disabled` state (a roving field item). */
+declare function inputProps({
+  disabled,
+  className
+}?: ToolbarDisableablePropsArgs): ToolbarPartProps;
+/** Spacer prop bag: just the slot anchor (a logical flex slot that pushes following items to the end). */
+declare function spacerProps({
+  className
+}?: ToolbarStatelessPropsArgs): ToolbarPartProps;
+//#endregion
+export { ToolbarPartProps, groupProps, inputProps, rootProps, separatorProps, spacerProps };

package/dist/components/toolbar/toolbar.props.js

@@ -0,0 +1,55 @@
+import { TOOLBAR_SLOTS } from "./toolbar.slots.js";
+//#region src/components/toolbar/toolbar.props.ts
+/**
+* The D12 unified variant contract for Toolbar — the data-attribute-native escape hatch.
+*
+* Each compound part exposes a `props(...)` builder returning a **spreadable props object** of the form
+* `{ "data-slot": "noctis-toolbar-<part>", ...dataAttrs }`. Under the single-`data-slot` anchor model
+* the `data-slot` is the only styling hook needed — `toolbar.css` keys every rule off it — so spreading
+* a part's `props()` onto a *foreign* element styles it as that part:
+*
+*     <button {...Toolbar.Button.props()}>Bold</button>
+*     // → <button data-slot="noctis-toolbar-button">
+*
+* The escape hatch carries no className (styling is attribute-driven); an optional `className`
+* passthrough is accepted and forwarded verbatim. The same slot mapping is emitted as data from the
+* token graph so non-React / agent consumers can hand-write the markup from the docs.
+*/
+/** Stamp a boolean state as a bare data-attribute: present (`""`) when on, absent (`undefined`) when off. */
+const flag = (on) => on ? "" : void 0;
+const withClassName = (bag, className) => className === void 0 ? bag : {
+	...bag,
+	className
+};
+/** Root prop bag: slot anchor plus the `data-size`/`data-variant` axes (orientation flows from Base UI). */
+function rootProps({ size = "md", variant = "framed", className } = {}) {
+	return withClassName({
+		"data-slot": TOOLBAR_SLOTS.root,
+		"data-size": size,
+		"data-variant": variant
+	}, className);
+}
+/** Separator prop bag: just the slot anchor. */
+function separatorProps({ className } = {}) {
+	return withClassName({ "data-slot": TOOLBAR_SLOTS.separator }, className);
+}
+/** Group prop bag: slot anchor plus the `data-disabled` state. */
+function groupProps({ disabled, className } = {}) {
+	return withClassName({
+		"data-slot": TOOLBAR_SLOTS.group,
+		"data-disabled": flag(disabled)
+	}, className);
+}
+/** Input prop bag: slot anchor plus the `data-disabled` state (a roving field item). */
+function inputProps({ disabled, className } = {}) {
+	return withClassName({
+		"data-slot": TOOLBAR_SLOTS.input,
+		"data-disabled": flag(disabled)
+	}, className);
+}
+/** Spacer prop bag: just the slot anchor (a logical flex slot that pushes following items to the end). */
+function spacerProps({ className } = {}) {
+	return withClassName({ "data-slot": TOOLBAR_SLOTS.spacer }, className);
+}
+//#endregion
+export { groupProps, inputProps, rootProps, separatorProps, spacerProps };

package/dist/components/toolbar/toolbar.slots.d.ts

@@ -0,0 +1,24 @@
+//#region src/components/toolbar/toolbar.slots.d.ts
+/**
+ * The `data-*` hooks `Toolbar` stamps on its parts, for host-side styling and tests. Slot values mark
+ * each rendered element; the state attributes are emitted by Base UI's Toolbar — pair a slot with a
+ * state to target, say, only a disabled button or a vertical row.
+ */
+declare enum ToolbarDataAttributes {
+  /** The element's slot — the styling and testing hook. */
+  slot = "data-slot",
+  /** `sm` | `md` — the toolbar density, stamped on the root; re-points the button/input metrics. */
+  size = "data-size",
+  /** `framed` | `plain` | `floating` — the toolbar frame, stamped on the root. */
+  variant = "data-variant",
+  /** `horizontal` | `vertical` — the row's orientation, stamped on every part. */
+  orientation = "data-orientation",
+  /** Present on a disabled toolbar button or group. */
+  disabled = "data-disabled",
+  /** Present on a hosted toolbar toggle while it is pressed (on). */
+  pressed = "data-pressed",
+  /** Present on the item the keyboard's roving focus currently rests on. */
+  highlighted = "data-highlighted"
+}
+//#endregion
+export { ToolbarDataAttributes };

package/dist/components/toolbar/toolbar.slots.js

@@ -0,0 +1,37 @@
+//#region src/components/toolbar/toolbar.slots.ts
+/**
+* The slot vocabulary every `Toolbar` part stamps as its `data-slot`. The authored source the
+* orchestration file reads from, kebab-cased `{component}-{part}`; SLOTS.md still generates from the
+* token-graph declarations.
+*/
+const TOOLBAR_SLOTS = {
+	root: "noctis-toolbar",
+	separator: "noctis-toolbar-separator",
+	group: "noctis-toolbar-group",
+	input: "noctis-toolbar-input",
+	spacer: "noctis-toolbar-spacer"
+};
+/**
+* The `data-*` hooks `Toolbar` stamps on its parts, for host-side styling and tests. Slot values mark
+* each rendered element; the state attributes are emitted by Base UI's Toolbar — pair a slot with a
+* state to target, say, only a disabled button or a vertical row.
+*/
+let ToolbarDataAttributes = /* @__PURE__ */ function(ToolbarDataAttributes) {
+	/** The element's slot — the styling and testing hook. */
+	ToolbarDataAttributes["slot"] = "data-slot";
+	/** `sm` | `md` — the toolbar density, stamped on the root; re-points the button/input metrics. */
+	ToolbarDataAttributes["size"] = "data-size";
+	/** `framed` | `plain` | `floating` — the toolbar frame, stamped on the root. */
+	ToolbarDataAttributes["variant"] = "data-variant";
+	/** `horizontal` | `vertical` — the row's orientation, stamped on every part. */
+	ToolbarDataAttributes["orientation"] = "data-orientation";
+	/** Present on a disabled toolbar button or group. */
+	ToolbarDataAttributes["disabled"] = "data-disabled";
+	/** Present on a hosted toolbar toggle while it is pressed (on). */
+	ToolbarDataAttributes["pressed"] = "data-pressed";
+	/** Present on the item the keyboard's roving focus currently rests on. */
+	ToolbarDataAttributes["highlighted"] = "data-highlighted";
+	return ToolbarDataAttributes;
+}({});
+//#endregion
+export { TOOLBAR_SLOTS, ToolbarDataAttributes };

package/dist/components/toolbar/toolbar.types.d.ts

@@ -0,0 +1,15 @@
+//#region src/components/toolbar/toolbar.types.d.ts
+/**
+ * Shared value unions for the Toolbar axes — kept in one module so the orchestration, the props
+ * builders, and the context provider all read the same source.
+ */
+/** The toolbar density. `md` (default) is `control-sm`; `sm` drops to `control-xs`. */
+type ToolbarSize = "sm" | "md";
+/**
+ * The toolbar's frame. `framed` (default) is a bordered surface row; `plain` drops the border and
+ * background for a toolbar already inside a Surface/Card; `floating` lifts a bubble/selection bar off
+ * the page with an elevated shadow. All stay sharp.
+ */
+type ToolbarVariant = "framed" | "plain" | "floating";
+//#endregion
+export { ToolbarSize, ToolbarVariant };

package/dist/components/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+import { Tooltip } from "./tooltip.js";
+import { TooltipDataAttributes } from "./tooltip.slots.js";