@stridge/noctis 1.0.0-beta.0

package/dist/components/scroll-area/scroll-area.d.ts

@@ -0,0 +1,217 @@
+import { scroll_area_d_exports } from "../../primitives/scroll-area.js";
+import { ScrollAreaOverscroll, ScrollAreaSize, ScrollAreaType } from "./scroll-area.types.js";
+import { ScrollAreaOrientation, ScrollAreaPartProps, contentProps, cornerProps, rootProps, scrollbarProps, thumbProps, viewportProps } from "./scroll-area.props.js";
+import { ReactElement, ReactNode } from "react";
+
+//#region src/components/scroll-area/scroll-area.d.ts
+/**
+ * The bounding box for a scrollable region. Holds one `ScrollArea.Viewport` (the natively scrolled
+ * container, wrapping a `ScrollArea.Content`) and a `ScrollArea.Scrollbar` per axis. Renders no
+ * scroll behaviour of its own — Base UI keeps native scrolling and only overlays the custom bars.
+ *
+ * `type` is the visibility policy and `scrollHideDelay` the rest-delay before the bar fades out;
+ * `size` scales the gutter, `overscroll` swaps the scroll-chaining rule, and `fade`/`track` opt into
+ * the edge-fade mask and the gutter track. The policy reaches the scrollbars through context (so
+ * `type="always"` defaults their `keepMounted`) and through the `data-*` attrs the CSS keys off.
+ */
+declare function ScrollAreaRoot({
+  className,
+  children,
+  type,
+  scrollHideDelay,
+  size,
+  overscroll,
+  fade,
+  track,
+  style,
+  ...props
+}: ScrollArea.Root.Props): ReactElement;
+/**
+ * The natively scrolled container, and the accessible region. Base UI keeps it conditionally
+ * focusable (in the tab order only while it overflows) and natively scrollable; this gives it a role
+ * (`group` by default, `region` for a page-level area) and forwards an accessible name. Native
+ * scrolling carries the semantics, so the overlay bars are decorative — never `role="scrollbar"`.
+ *
+ * Give it a bounded size (a height, a `max-height`) so its content overflows and the bars appear, and
+ * wrap the scrolling content in a `ScrollArea.Content`. A focusable region must be named: pass
+ * `aria-label` or `aria-labelledby` (a dev-only warning fires if neither is set).
+ */
+declare function ScrollAreaViewport({
+  className,
+  children,
+  role,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...props
+}: ScrollArea.Viewport.Props): ReactElement;
+/**
+ * The intrinsic-width wrapper around the scrolling content, so horizontal overflow is measured from
+ * the content's natural width rather than the viewport's.
+ */
+declare function ScrollAreaContent({
+  className,
+  children,
+  ...props
+}: ScrollArea.Content.Props): ReactElement;
+/**
+ * One scrollbar — decorative paint over native scrolling, so it carries `aria-hidden`. Render a
+ * vertical one for a tall region and a horizontal one for a wide region (or both); each holds a single
+ * `ScrollArea.Thumb`. Defaults to `vertical`. The bar's visibility follows the root's `type`, and it
+ * sits on the correct inline edge under RTL. With `type="always"` it stays mounted (so a persistent
+ * bar shows even without overflow); pass `keepMounted` to override.
+ */
+declare function ScrollAreaScrollbar({
+  orientation,
+  keepMounted,
+  className,
+  children,
+  ...props
+}: ScrollArea.Scrollbar.Props): ReactElement;
+/**
+ * The draggable handle inside a scrollbar — decorative, so `aria-hidden`. Base UI sizes and positions
+ * it from the scroll state (its proportional length rides an inline custom property); this renders the
+ * neutral pill with a per-axis minimum length so it stays grabbable, firming up on hover and while
+ * dragging. Defaults to the scrollbar's `vertical` orientation; pass `orientation` standalone.
+ */
+declare function ScrollAreaThumb({
+  orientation,
+  className,
+  ...props
+}: ScrollArea.Thumb.Props): ReactElement;
+/**
+ * The small square where a vertical and a horizontal scrollbar meet — decorative, so `aria-hidden`.
+ * Render it only with both bars; it sizes itself from Base UI's corner vars to match the bar thickness.
+ */
+declare function ScrollAreaCorner({
+  className,
+  ...props
+}: ScrollArea.Corner.Props): ReactElement;
+/**
+ * Custom thin scrollbars over a natively scrolled region. The browser still does the scrolling —
+ * Base UI only overlays slim, neutral bars over native scrolling, so the bars are decorative
+ * (`aria-hidden`) and the viewport is the accessible, keyboard-focusable region. The thumb fades in
+ * per the `type` visibility policy, firms up and widens on hover, lingers `scrollHideDelay` after
+ * scrolling stops, and an opt-in edge-fade signals there's more content. The bars use logical metrics,
+ * so the vertical bar sits on the correct inline edge under RTL by construction, and all motion
+ * respects `prefers-reduced-motion`. Drop a `ScrollArea` inside a recessed surface
+ * (`data-elevation="sunken"`) and the thumb and track re-derive to that scope.
+ *
+ * Compose from parts: `ScrollArea.Root` bounds the region and sets the policy, `ScrollArea.Viewport`
+ * (wrapping a `ScrollArea.Content`) is the scrolled, named region, and a `ScrollArea.Scrollbar` per
+ * axis carries a `ScrollArea.Thumb`. A bare `ScrollArea.Scrollbar` renders its thumb for you.
+ *
+ * The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are
+ * exposed through the matching `ScrollArea` namespace — e.g. `ScrollArea.Scrollbar.Props`.
+ */
+declare const ScrollArea: {
+  /** The bounding box. `ScrollArea.Root.props()` → its spreadable prop bag. */Root: typeof ScrollAreaRoot & {
+    props: typeof rootProps;
+  }; /** The natively scrolled container. `ScrollArea.Viewport.props()` → its spreadable prop bag. */
+  Viewport: typeof ScrollAreaViewport & {
+    props: typeof viewportProps;
+  }; /** The intrinsic-width content wrapper. `ScrollArea.Content.props()` → its spreadable prop bag. */
+  Content: typeof ScrollAreaContent & {
+    props: typeof contentProps;
+  }; /** One axis's scrollbar. `ScrollArea.Scrollbar.props({ orientation })` → its spreadable prop bag. */
+  Scrollbar: typeof ScrollAreaScrollbar & {
+    props: typeof scrollbarProps;
+  }; /** The draggable thumb. `ScrollArea.Thumb.props({ orientation })` → its spreadable prop bag. */
+  Thumb: typeof ScrollAreaThumb & {
+    props: typeof thumbProps;
+  }; /** The bars' meeting corner. `ScrollArea.Corner.props()` → its spreadable prop bag. */
+  Corner: typeof ScrollAreaCorner & {
+    props: typeof cornerProps;
+  };
+};
+/**
+ * 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 `ScrollArea` object above, so `ScrollArea.Scrollbar`
+ * is the component value while `ScrollArea.Scrollbar.Props` is its prop type.
+ */
+declare namespace ScrollArea {
+  /** A scrollbar/thumb orientation — which axis the bar controls. */
+  type Orientation = ScrollAreaOrientation;
+  /** The visibility policy `ScrollArea.Root` applies. */
+  type Type = ScrollAreaType;
+  /** The gutter scale `ScrollArea.Root` applies. */
+  type Size = ScrollAreaSize;
+  /** The scroll-chaining behaviour `ScrollArea.Root` applies. */
+  type Overscroll = ScrollAreaOverscroll;
+  /** The spreadable data-attribute prop bag every `ScrollArea.*.props()` returns (D12). */
+  type PartProps = ScrollAreaPartProps;
+  namespace Root {
+    type Props = Omit<scroll_area_d_exports.ScrollArea.Root.Props, "className" | "children"> & {
+      /** `ScrollArea.Viewport` and the `ScrollArea.Scrollbar`s. */children?: ReactNode; /** Classes merged onto the root. */
+      className?: string;
+      /**
+       * The scrollbar visibility policy: `hover` (default), `scroll`, `auto`, or `always`.
+       * @default "hover"
+       */
+      type?: ScrollAreaType;
+      /**
+       * Milliseconds the bar lingers after scrolling/hover stops before it fades out (the
+       * fade-in stays immediate). Zeroed under `prefers-reduced-motion`.
+       * @default 600
+       */
+      scrollHideDelay?: number; /** The gutter scale — `md` (default) or a thinner `sm`. @default "md" */
+      size?: ScrollAreaSize;
+      /**
+       * Scroll chaining at the edge — `contain` (default; stop here) or `auto` (chain to the
+       * ancestor).
+       * @default "contain"
+       */
+      overscroll?: ScrollAreaOverscroll;
+      /**
+       * Mask the overflowing edges with a colourless scroll-shadow fade, signalling there's more
+       * content. Off by default so it never dims content inside a bordered surface.
+       * @default false
+       */
+      fade?: boolean;
+      /**
+       * Paint a faint gutter track behind the thumb so a persistent bar reads as a channel.
+       * Implied by `type="always"`.
+       * @default false
+       */
+      track?: boolean;
+    };
+    type State = scroll_area_d_exports.ScrollArea.Root.State;
+  }
+  namespace Viewport {
+    type Props = Omit<scroll_area_d_exports.ScrollArea.Viewport.Props, "role"> & {
+      /**
+       * The region's role. `group` (default) is quiet — announced as a labelled boundary but not
+       * a landmark; use `region` for a page-level scroll area that should appear in the landmarks
+       * rotor. Either way the region needs an accessible name (`aria-label`/`aria-labelledby`).
+       * @default "group"
+       */
+      role?: "group" | "region";
+    };
+    type State = scroll_area_d_exports.ScrollArea.Viewport.State;
+  }
+  namespace Content {
+    type Props = scroll_area_d_exports.ScrollArea.Content.Props;
+    type State = scroll_area_d_exports.ScrollArea.Content.State;
+  }
+  namespace Scrollbar {
+    type Props = scroll_area_d_exports.ScrollArea.Scrollbar.Props;
+    type State = scroll_area_d_exports.ScrollArea.Scrollbar.State;
+  }
+  namespace Thumb {
+    type Props = scroll_area_d_exports.ScrollArea.Thumb.Props & {
+      /**
+       * Which axis the parent scrollbar controls — stamps `data-orientation` so the per-axis
+       * minimum-length rule applies. Inherited from `ScrollArea.Scrollbar`; pass it only when
+       * rendering a thumb standalone.
+       * @default "vertical"
+       */
+      orientation?: ScrollAreaOrientation;
+    };
+    type State = scroll_area_d_exports.ScrollArea.Thumb.State;
+  }
+  namespace Corner {
+    type Props = scroll_area_d_exports.ScrollArea.Corner.Props;
+    type State = scroll_area_d_exports.ScrollArea.Corner.State;
+  }
+}
+//#endregion
+export { ScrollArea };

package/dist/components/scroll-area/scroll-area.js

@@ -0,0 +1,153 @@
+"use client";
+import { scroll_area_exports } from "../../primitives/scroll-area.js";
+import { ScrollAreaProvider, useScrollAreaContext } from "./scroll-area.context.js";
+import { SCROLL_AREA_SLOTS } from "./scroll-area.slots.js";
+import { contentProps, cornerProps, rootProps, scrollbarProps, thumbProps, viewportProps } from "./scroll-area.props.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/scroll-area/scroll-area.tsx
+/**
+* The bounding box for a scrollable region. Holds one `ScrollArea.Viewport` (the natively scrolled
+* container, wrapping a `ScrollArea.Content`) and a `ScrollArea.Scrollbar` per axis. Renders no
+* scroll behaviour of its own — Base UI keeps native scrolling and only overlays the custom bars.
+*
+* `type` is the visibility policy and `scrollHideDelay` the rest-delay before the bar fades out;
+* `size` scales the gutter, `overscroll` swaps the scroll-chaining rule, and `fade`/`track` opt into
+* the edge-fade mask and the gutter track. The policy reaches the scrollbars through context (so
+* `type="always"` defaults their `keepMounted`) and through the `data-*` attrs the CSS keys off.
+*/
+function ScrollAreaRoot({ className, children, type = "hover", scrollHideDelay = 600, size = "md", overscroll = "contain", fade = false, track = false, style, ...props }) {
+	const withDelay = (base) => ({
+		...base,
+		"--scroll-area-scrollbar-transition-delay": `${scrollHideDelay}ms`
+	});
+	return /* @__PURE__ */ jsx(scroll_area_exports.ScrollArea.Root, {
+		...rootProps({
+			type,
+			size,
+			overscroll,
+			fade,
+			track
+		}),
+		className,
+		style: typeof style === "function" ? (state) => withDelay(style(state)) : withDelay(style),
+		...props,
+		children: /* @__PURE__ */ jsx(ScrollAreaProvider, {
+			value: { type },
+			children
+		})
+	});
+}
+/**
+* The natively scrolled container, and the accessible region. Base UI keeps it conditionally
+* focusable (in the tab order only while it overflows) and natively scrollable; this gives it a role
+* (`group` by default, `region` for a page-level area) and forwards an accessible name. Native
+* scrolling carries the semantics, so the overlay bars are decorative — never `role="scrollbar"`.
+*
+* Give it a bounded size (a height, a `max-height`) so its content overflows and the bars appear, and
+* wrap the scrolling content in a `ScrollArea.Content`. A focusable region must be named: pass
+* `aria-label` or `aria-labelledby` (a dev-only warning fires if neither is set).
+*/
+function ScrollAreaViewport({ className, children, role = "group", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }) {
+	if (process.env.NODE_ENV !== "production" && ariaLabel == null && ariaLabelledby == null) console.warn("ScrollArea.Viewport: a scrollable region needs an accessible name. Pass `aria-label` or `aria-labelledby` so a screen reader announces it when it takes keyboard focus.");
+	return /* @__PURE__ */ jsx(scroll_area_exports.ScrollArea.Viewport, {
+		"data-slot": SCROLL_AREA_SLOTS.viewport,
+		role,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledby,
+		className,
+		...props,
+		children
+	});
+}
+/**
+* The intrinsic-width wrapper around the scrolling content, so horizontal overflow is measured from
+* the content's natural width rather than the viewport's.
+*/
+function ScrollAreaContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(scroll_area_exports.ScrollArea.Content, {
+		"data-slot": SCROLL_AREA_SLOTS.content,
+		className,
+		...props,
+		children
+	});
+}
+/**
+* One scrollbar — decorative paint over native scrolling, so it carries `aria-hidden`. Render a
+* vertical one for a tall region and a horizontal one for a wide region (or both); each holds a single
+* `ScrollArea.Thumb`. Defaults to `vertical`. The bar's visibility follows the root's `type`, and it
+* sits on the correct inline edge under RTL. With `type="always"` it stays mounted (so a persistent
+* bar shows even without overflow); pass `keepMounted` to override.
+*/
+function ScrollAreaScrollbar({ orientation = "vertical", keepMounted, className, children, ...props }) {
+	const context = useScrollAreaContext();
+	const resolvedKeepMounted = keepMounted ?? context?.type === "always";
+	return /* @__PURE__ */ jsx(scroll_area_exports.ScrollArea.Scrollbar, {
+		"data-slot": SCROLL_AREA_SLOTS.scrollbar,
+		orientation,
+		keepMounted: resolvedKeepMounted,
+		"aria-hidden": true,
+		className,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ScrollAreaThumb, { orientation })
+	});
+}
+/**
+* The draggable handle inside a scrollbar — decorative, so `aria-hidden`. Base UI sizes and positions
+* it from the scroll state (its proportional length rides an inline custom property); this renders the
+* neutral pill with a per-axis minimum length so it stays grabbable, firming up on hover and while
+* dragging. Defaults to the scrollbar's `vertical` orientation; pass `orientation` standalone.
+*/
+function ScrollAreaThumb({ orientation = "vertical", className, ...props }) {
+	return /* @__PURE__ */ jsx(scroll_area_exports.ScrollArea.Thumb, {
+		"data-slot": SCROLL_AREA_SLOTS.thumb,
+		"data-orientation": orientation,
+		"aria-hidden": true,
+		className,
+		...props
+	});
+}
+/**
+* The small square where a vertical and a horizontal scrollbar meet — decorative, so `aria-hidden`.
+* Render it only with both bars; it sizes itself from Base UI's corner vars to match the bar thickness.
+*/
+function ScrollAreaCorner({ className, ...props }) {
+	return /* @__PURE__ */ jsx(scroll_area_exports.ScrollArea.Corner, {
+		"data-slot": SCROLL_AREA_SLOTS.corner,
+		"aria-hidden": true,
+		className,
+		...props
+	});
+}
+/**
+* Custom thin scrollbars over a natively scrolled region. The browser still does the scrolling —
+* Base UI only overlays slim, neutral bars over native scrolling, so the bars are decorative
+* (`aria-hidden`) and the viewport is the accessible, keyboard-focusable region. The thumb fades in
+* per the `type` visibility policy, firms up and widens on hover, lingers `scrollHideDelay` after
+* scrolling stops, and an opt-in edge-fade signals there's more content. The bars use logical metrics,
+* so the vertical bar sits on the correct inline edge under RTL by construction, and all motion
+* respects `prefers-reduced-motion`. Drop a `ScrollArea` inside a recessed surface
+* (`data-elevation="sunken"`) and the thumb and track re-derive to that scope.
+*
+* Compose from parts: `ScrollArea.Root` bounds the region and sets the policy, `ScrollArea.Viewport`
+* (wrapping a `ScrollArea.Content`) is the scrolled, named region, and a `ScrollArea.Scrollbar` per
+* axis carries a `ScrollArea.Thumb`. A bare `ScrollArea.Scrollbar` renders its thumb for you.
+*
+* The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are
+* exposed through the matching `ScrollArea` namespace — e.g. `ScrollArea.Scrollbar.Props`.
+*/
+const ScrollArea = {
+	/** The bounding box. `ScrollArea.Root.props()` → its spreadable prop bag. */
+	Root: Object.assign(ScrollAreaRoot, { props: rootProps }),
+	/** The natively scrolled container. `ScrollArea.Viewport.props()` → its spreadable prop bag. */
+	Viewport: Object.assign(ScrollAreaViewport, { props: viewportProps }),
+	/** The intrinsic-width content wrapper. `ScrollArea.Content.props()` → its spreadable prop bag. */
+	Content: Object.assign(ScrollAreaContent, { props: contentProps }),
+	/** One axis's scrollbar. `ScrollArea.Scrollbar.props({ orientation })` → its spreadable prop bag. */
+	Scrollbar: Object.assign(ScrollAreaScrollbar, { props: scrollbarProps }),
+	/** The draggable thumb. `ScrollArea.Thumb.props({ orientation })` → its spreadable prop bag. */
+	Thumb: Object.assign(ScrollAreaThumb, { props: thumbProps }),
+	/** The bars' meeting corner. `ScrollArea.Corner.props()` → its spreadable prop bag. */
+	Corner: Object.assign(ScrollAreaCorner, { props: cornerProps })
+};
+//#endregion
+export { ScrollArea };

package/dist/components/scroll-area/scroll-area.props.d.ts

@@ -0,0 +1,73 @@
+import { ScrollAreaOverscroll, ScrollAreaSize, ScrollAreaType } from "./scroll-area.types.js";
+
+//#region src/components/scroll-area/scroll-area.props.d.ts
+/** A scrollbar/thumb orientation — which axis the bar controls. */
+type ScrollAreaOrientation = "vertical" | "horizontal";
+/** A spreadable data-attribute prop bag — the shape every `ScrollArea.*.props()` returns. */
+type ScrollAreaPartProps = {
+  /** The slot value the matching `scroll-area.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 stateless part's `.props(...)` — no orientation of its own. */
+type ScrollAreaStatelessPropsArgs = BasePropsArgs;
+/** Argument to `ScrollArea.Scrollbar.props(...)` / `ScrollArea.Thumb.props(...)` — the axis the CSS keys metrics off. */
+interface ScrollAreaOrientedPropsArgs extends BasePropsArgs {
+  /** Which axis the bar controls — drives the width/height metrics via `data-orientation`. @default "vertical" */
+  orientation?: ScrollAreaOrientation;
+}
+/** Argument to `ScrollArea.Root.props(...)` — the policy/scale axes the root stamps as data-attrs. */
+interface ScrollAreaRootPropsArgs extends BasePropsArgs {
+  /** Visibility policy → `data-type`. @default "hover" */
+  type?: ScrollAreaType;
+  /** Gutter scale → `data-size`. @default "md" */
+  size?: ScrollAreaSize;
+  /** Scroll-chaining behaviour → `data-overscroll`. @default "contain" */
+  overscroll?: ScrollAreaOverscroll;
+  /** Enable the edge-fade mask → presence `data-fade`. @default false */
+  fade?: boolean;
+  /** Paint the gutter track → presence `data-track` (also implied by `type="always"`). @default false */
+  track?: boolean;
+}
+/**
+ * Root prop bag: the slot anchor plus the policy/scale data-attrs the CSS keys off. `type`/`size`/
+ * `overscroll` always carry their resolved value; `fade`/`track` are bare presence attrs (`""` or
+ * absent). `track` is also implied when `type="always"`.
+ */
+declare function rootProps({
+  type,
+  size,
+  overscroll,
+  fade,
+  track,
+  className
+}?: ScrollAreaRootPropsArgs): ScrollAreaPartProps;
+/** Viewport prop bag: just the slot anchor. */
+declare function viewportProps({
+  className
+}?: ScrollAreaStatelessPropsArgs): ScrollAreaPartProps;
+/** Content prop bag: just the slot anchor. */
+declare function contentProps({
+  className
+}?: ScrollAreaStatelessPropsArgs): ScrollAreaPartProps;
+/** Scrollbar prop bag: slot anchor plus the `data-orientation` the descendant rules read. */
+declare function scrollbarProps({
+  orientation,
+  className
+}?: ScrollAreaOrientedPropsArgs): ScrollAreaPartProps;
+/** Thumb prop bag: slot anchor plus the `data-orientation` the min-size rules read. */
+declare function thumbProps({
+  orientation,
+  className
+}?: ScrollAreaOrientedPropsArgs): ScrollAreaPartProps;
+/** Corner prop bag: just the slot anchor. */
+declare function cornerProps({
+  className
+}?: ScrollAreaStatelessPropsArgs): ScrollAreaPartProps;
+//#endregion
+export { ScrollAreaOrientation, ScrollAreaPartProps, contentProps, cornerProps, rootProps, scrollbarProps, thumbProps, viewportProps };

package/dist/components/scroll-area/scroll-area.props.js

@@ -0,0 +1,64 @@
+import { SCROLL_AREA_SLOTS } from "./scroll-area.slots.js";
+//#region src/components/scroll-area/scroll-area.props.ts
+/**
+* The D12 unified contract for ScrollArea — the data-attribute-native escape hatch for styling a
+* *foreign* element as a scroll-area part.
+*
+* Each part exposes a `props(...)` builder returning a **spreadable props object** of the form
+* `{ "data-slot": "noctis-scroll-area-<part>", ...dataAttrs }`. Under the single-`data-slot` anchor
+* model `scroll-area.css` keys every rule off the slot, so spreading a part's `props()` onto a foreign
+* element styles it as that part:
+*
+*     <div {...ScrollArea.Scrollbar.props({ orientation: "horizontal" })} />
+*     // → <div data-slot="noctis-scroll-area-scrollbar" data-orientation="horizontal">
+*
+* The escape hatch carries no className (styling is attribute-driven); an optional `className`
+* passthrough is accepted and forwarded verbatim.
+*/
+const withClassName = (bag, className) => className === void 0 ? bag : {
+	...bag,
+	className
+};
+/**
+* Root prop bag: the slot anchor plus the policy/scale data-attrs the CSS keys off. `type`/`size`/
+* `overscroll` always carry their resolved value; `fade`/`track` are bare presence attrs (`""` or
+* absent). `track` is also implied when `type="always"`.
+*/
+function rootProps({ type = "hover", size = "md", overscroll = "contain", fade = false, track = false, className } = {}) {
+	return withClassName({
+		"data-slot": SCROLL_AREA_SLOTS.root,
+		"data-type": type,
+		"data-size": size,
+		"data-overscroll": overscroll,
+		...fade ? { "data-fade": "" } : {},
+		...track || type === "always" ? { "data-track": "" } : {}
+	}, className);
+}
+/** Viewport prop bag: just the slot anchor. */
+function viewportProps({ className } = {}) {
+	return withClassName({ "data-slot": SCROLL_AREA_SLOTS.viewport }, className);
+}
+/** Content prop bag: just the slot anchor. */
+function contentProps({ className } = {}) {
+	return withClassName({ "data-slot": SCROLL_AREA_SLOTS.content }, className);
+}
+/** Scrollbar prop bag: slot anchor plus the `data-orientation` the descendant rules read. */
+function scrollbarProps({ orientation = "vertical", className } = {}) {
+	return withClassName({
+		"data-slot": SCROLL_AREA_SLOTS.scrollbar,
+		"data-orientation": orientation
+	}, className);
+}
+/** Thumb prop bag: slot anchor plus the `data-orientation` the min-size rules read. */
+function thumbProps({ orientation = "vertical", className } = {}) {
+	return withClassName({
+		"data-slot": SCROLL_AREA_SLOTS.thumb,
+		"data-orientation": orientation
+	}, className);
+}
+/** Corner prop bag: just the slot anchor. */
+function cornerProps({ className } = {}) {
+	return withClassName({ "data-slot": SCROLL_AREA_SLOTS.corner }, className);
+}
+//#endregion
+export { contentProps, cornerProps, rootProps, scrollbarProps, thumbProps, viewportProps };

package/dist/components/scroll-area/scroll-area.slots.d.ts

@@ -0,0 +1,40 @@
+//#region src/components/scroll-area/scroll-area.slots.d.ts
+/**
+ * The `data-*` hooks `ScrollArea` 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 ScrollArea — pair a slot
+ * with a state to target, say, only the scrollbar while the area is being scrolled.
+ */
+declare enum ScrollAreaDataAttributes {
+  /** The rendered scroll-area element. */
+  slot = "data-slot",
+  /** `horizontal` | `vertical` — the orientation of a scrollbar or thumb. */
+  orientation = "data-orientation",
+  /** `hover` | `scroll` | `auto` | `always` — the visibility policy, stamped on the root. */
+  type = "data-type",
+  /** `sm` | `md` — the gutter scale, stamped on the root. */
+  size = "data-size",
+  /** `contain` | `auto` — the scroll-chaining behaviour, stamped on the root. */
+  overscroll = "data-overscroll",
+  /** Present on the root when the edge-fade mask is enabled. */
+  fade = "data-fade",
+  /** Present on the root when the gutter track is painted (set by `track`, or by `type="always"`). */
+  track = "data-track",
+  /** Present on the scrollbar while the pointer is over the scroll area (the fade-in cue). */
+  hovering = "data-hovering",
+  /** Present on the scrollbar and viewport while the user is scrolling. */
+  scrolling = "data-scrolling",
+  /** Present when the content is wider than the viewport (a horizontal scrollbar is warranted). */
+  hasOverflowX = "data-has-overflow-x",
+  /** Present when the content is taller than the viewport (a vertical scrollbar is warranted). */
+  hasOverflowY = "data-has-overflow-y",
+  /** Present on the root/viewport while content is hidden past the inline-start edge (drives the fade). */
+  overflowXStart = "data-overflow-x-start",
+  /** Present on the root/viewport while content is hidden past the inline-end edge (drives the fade). */
+  overflowXEnd = "data-overflow-x-end",
+  /** Present on the root/viewport while content is hidden past the block-start edge (drives the fade). */
+  overflowYStart = "data-overflow-y-start",
+  /** Present on the root/viewport while content is hidden past the block-end edge (drives the fade). */
+  overflowYEnd = "data-overflow-y-end"
+}
+//#endregion
+export { ScrollAreaDataAttributes };

package/dist/components/scroll-area/scroll-area.slots.js

@@ -0,0 +1,54 @@
+//#region src/components/scroll-area/scroll-area.slots.ts
+/**
+* The slot vocabulary every `ScrollArea` part stamps as its `data-slot`. The authored source the
+* orchestration file reads from, kebab-cased `{component}-{part}`; SLOTS.md mirrors the same anatomy
+* from the token-graph declaration.
+*/
+const SCROLL_AREA_SLOTS = {
+	root: "noctis-scroll-area",
+	viewport: "noctis-scroll-area-viewport",
+	content: "noctis-scroll-area-content",
+	scrollbar: "noctis-scroll-area-scrollbar",
+	thumb: "noctis-scroll-area-thumb",
+	corner: "noctis-scroll-area-corner"
+};
+/**
+* The `data-*` hooks `ScrollArea` 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 ScrollArea — pair a slot
+* with a state to target, say, only the scrollbar while the area is being scrolled.
+*/
+let ScrollAreaDataAttributes = /* @__PURE__ */ function(ScrollAreaDataAttributes) {
+	/** The rendered scroll-area element. */
+	ScrollAreaDataAttributes["slot"] = "data-slot";
+	/** `horizontal` | `vertical` — the orientation of a scrollbar or thumb. */
+	ScrollAreaDataAttributes["orientation"] = "data-orientation";
+	/** `hover` | `scroll` | `auto` | `always` — the visibility policy, stamped on the root. */
+	ScrollAreaDataAttributes["type"] = "data-type";
+	/** `sm` | `md` — the gutter scale, stamped on the root. */
+	ScrollAreaDataAttributes["size"] = "data-size";
+	/** `contain` | `auto` — the scroll-chaining behaviour, stamped on the root. */
+	ScrollAreaDataAttributes["overscroll"] = "data-overscroll";
+	/** Present on the root when the edge-fade mask is enabled. */
+	ScrollAreaDataAttributes["fade"] = "data-fade";
+	/** Present on the root when the gutter track is painted (set by `track`, or by `type="always"`). */
+	ScrollAreaDataAttributes["track"] = "data-track";
+	/** Present on the scrollbar while the pointer is over the scroll area (the fade-in cue). */
+	ScrollAreaDataAttributes["hovering"] = "data-hovering";
+	/** Present on the scrollbar and viewport while the user is scrolling. */
+	ScrollAreaDataAttributes["scrolling"] = "data-scrolling";
+	/** Present when the content is wider than the viewport (a horizontal scrollbar is warranted). */
+	ScrollAreaDataAttributes["hasOverflowX"] = "data-has-overflow-x";
+	/** Present when the content is taller than the viewport (a vertical scrollbar is warranted). */
+	ScrollAreaDataAttributes["hasOverflowY"] = "data-has-overflow-y";
+	/** Present on the root/viewport while content is hidden past the inline-start edge (drives the fade). */
+	ScrollAreaDataAttributes["overflowXStart"] = "data-overflow-x-start";
+	/** Present on the root/viewport while content is hidden past the inline-end edge (drives the fade). */
+	ScrollAreaDataAttributes["overflowXEnd"] = "data-overflow-x-end";
+	/** Present on the root/viewport while content is hidden past the block-start edge (drives the fade). */
+	ScrollAreaDataAttributes["overflowYStart"] = "data-overflow-y-start";
+	/** Present on the root/viewport while content is hidden past the block-end edge (drives the fade). */
+	ScrollAreaDataAttributes["overflowYEnd"] = "data-overflow-y-end";
+	return ScrollAreaDataAttributes;
+}({});
+//#endregion
+export { SCROLL_AREA_SLOTS, ScrollAreaDataAttributes };

package/dist/components/scroll-area/scroll-area.types.d.ts

@@ -0,0 +1,24 @@
+//#region src/components/scroll-area/scroll-area.types.d.ts
+/**
+ * The shared option unions for `ScrollArea.Root` — kept in their own module so the props builder,
+ * the orchestration, and the context can all import them without a cycle.
+ */
+/**
+ * The scrollbar visibility policy (Noctis-owned — Base UI ships no `type`). Stamped as `data-type`
+ * on the root; the CSS keys the bar's `opacity` off it.
+ * - `hover` — fade in while the pointer is over the area or the user is scrolling (the default).
+ * - `scroll` — show only while scrolling; the cleanest reading mode.
+ * - `auto` — show whenever the content overflows.
+ * - `always` — keep the bar drawn at all times (a persistent channel for code blocks, data tables).
+ */
+type ScrollAreaType = "hover" | "scroll" | "auto" | "always";
+/** The gutter scale, stamped as `data-size` on the root — `md` (default) or a thinner `sm`. */
+type ScrollAreaSize = "sm" | "md";
+/**
+ * The scroll-chaining behaviour at the viewport edge, stamped as `data-overscroll` on the root.
+ * - `contain` — stop the scroll at this region's edge (the default; right for menus/popovers).
+ * - `auto` — let the scroll chain to the ancestor once this region bottoms out.
+ */
+type ScrollAreaOverscroll = "contain" | "auto";
+//#endregion
+export { ScrollAreaOverscroll, ScrollAreaSize, ScrollAreaType };

package/dist/components/search-dialog/index.d.ts

@@ -0,0 +1,3 @@
+import { SearchResult } from "./search-dialog.context.js";
+import { SearchDialog } from "./search-dialog.js";
+import { SearchDialogDataAttributes } from "./search-dialog.slots.js";

package/dist/components/search-dialog/parts/input.d.ts

@@ -0,0 +1,24 @@
+import { ComponentProps, ReactElement } from "react";
+
+//#region src/components/search-dialog/parts/input.d.ts
+/**
+ * The header row: the search glyph, the query field, an in-flight spinner, and the `Esc` close chip.
+ * Reads the query, the in-flight state, and the key handler from context; the field auto-focuses when
+ * the dialog opens (`SearchDialog.Root` points Base UI's `initialFocus` at it). The `Esc` chip's label
+ * stays decorative — the dialog's own Escape handling closes it.
+ *
+ * Slot: `search-dialog-header` on the row, `search-dialog-input` on the field.
+ *
+ * @see {@link SearchDialog.Input.Props}
+ */
+declare function SearchDialogInput({
+  placeholder,
+  ...props
+}: SearchDialogInput.Props): ReactElement;
+declare namespace SearchDialogInput {
+  type Props = Omit<ComponentProps<"input">, "value" | "onChange" | "onKeyDown" | "type" | "ref" | "aria-label" | "className"> & {
+    /** Field placeholder. */placeholder?: string;
+  };
+}
+//#endregion
+export { SearchDialogInput };