@stridge/noctis 1.0.0-beta.0

package/dist/components/code-block/code-block.props.d.ts

@@ -0,0 +1,42 @@
+//#region src/components/code-block/code-block.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `CodeBlock.*.props()` returns. */
+type CodeBlockPartProps = {
+  /** The slot value (or non-slot hook) the matching `code-block.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;
+}
+/** Frame prop bag: the `code-block` slot anchor the frame radius + scrollable body rules key off. */
+declare function frameProps({
+  className
+}?: BasePropsArgs): CodeBlockPartProps;
+/** Header prop bag: the `code-block-header` slot anchor the band metrics key off. */
+declare function headerProps({
+  className
+}?: BasePropsArgs): CodeBlockPartProps;
+/** Title prop bag: the non-slot `data-code-block-title` hook the header's caption rule reads. */
+declare function titleProps({
+  className
+}?: BasePropsArgs): CodeBlockPartProps;
+/** Logo prop bag: the non-slot `data-code-block-logo` hook the header's logo rule reads. */
+declare function logoProps({
+  className
+}?: BasePropsArgs): CodeBlockPartProps;
+/** Body prop bag: the non-slot `data-code-block-body` hook the scrollable-body rule reads. */
+declare function bodyProps({
+  className
+}?: BasePropsArgs): CodeBlockPartProps;
+/** Floating-copy prop bag: the non-slot `data-code-block-floating` hook the reveal-on-hover rule reads. */
+declare function floatingCopyProps({
+  className
+}?: BasePropsArgs): CodeBlockPartProps;
+/** Manager-glyph prop bag: the `code-block-manager-glyph` slot anchor the 1em square paint keys off. */
+declare function managerGlyphProps({
+  className
+}?: BasePropsArgs): CodeBlockPartProps;
+//#endregion
+export { bodyProps, floatingCopyProps, frameProps, headerProps, logoProps, managerGlyphProps, titleProps };

package/dist/components/code-block/code-block.props.js

@@ -0,0 +1,51 @@
+import { CODE_BLOCK_SLOTS } from "./code-block.slots.js";
+//#region src/components/code-block/code-block.props.ts
+/**
+* The D12 unified variant contract for CodeBlock — the data-attribute-native generalization of the old
+* class-string recipes (`codeBlockFrame`, `codeBlockHeader`, …) that lived in `code-block.styles.ts`.
+*
+* Each compound part exposes a `props(...)` builder returning a **spreadable props object** of the form
+* `{ "data-slot": "noctis-code-block-<part>", ...dataAttrs }`. Under the single-`data-slot` anchor model
+* the `data-slot` is the only styling hook `code-block.css` keys off, so spreading a part's `props()`
+* onto a *foreign* element styles it as that part. CodeBlock has no per-part variant axes (its look is
+* fixed; the shade/border come from the composed `Surface`), so the helpers carry only the slot anchor —
+* plus, for the non-slot inner parts (title, logo, body, floating copy), the stable `data-code-block-*`
+* hook the descendant CSS rules read.
+*
+* 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
+};
+/** Frame prop bag: the `code-block` slot anchor the frame radius + scrollable body rules key off. */
+function frameProps({ className } = {}) {
+	return withClassName({ "data-slot": CODE_BLOCK_SLOTS.root }, className);
+}
+/** Header prop bag: the `code-block-header` slot anchor the band metrics key off. */
+function headerProps({ className } = {}) {
+	return withClassName({ "data-slot": CODE_BLOCK_SLOTS.header }, className);
+}
+/** Title prop bag: the non-slot `data-code-block-title` hook the header's caption rule reads. */
+function titleProps({ className } = {}) {
+	return withClassName({ "data-code-block-title": "" }, className);
+}
+/** Logo prop bag: the non-slot `data-code-block-logo` hook the header's logo rule reads. */
+function logoProps({ className } = {}) {
+	return withClassName({ "data-code-block-logo": "" }, className);
+}
+/** Body prop bag: the non-slot `data-code-block-body` hook the scrollable-body rule reads. */
+function bodyProps({ className } = {}) {
+	return withClassName({ "data-code-block-body": "" }, className);
+}
+/** Floating-copy prop bag: the non-slot `data-code-block-floating` hook the reveal-on-hover rule reads. */
+function floatingCopyProps({ className } = {}) {
+	return withClassName({ "data-code-block-floating": "" }, className);
+}
+/** Manager-glyph prop bag: the `code-block-manager-glyph` slot anchor the 1em square paint keys off. */
+function managerGlyphProps({ className } = {}) {
+	return withClassName({ "data-slot": CODE_BLOCK_SLOTS.managerGlyph }, className);
+}
+//#endregion
+export { bodyProps, floatingCopyProps, frameProps, headerProps, logoProps, managerGlyphProps, titleProps };

package/dist/components/code-block/code-block.slots.d.ts

@@ -0,0 +1,16 @@
+//#region src/components/code-block/code-block.slots.d.ts
+/**
+ * The data attributes the `CodeBlock` compound (and the Base UI tabs its `Tabs`/`Tab`/`Panel` parts
+ * render) expose for styling and testing. Each member's value is the attribute name and its JSDoc is
+ * the description; the docs API reference reads this enum directly.
+ */
+declare enum CodeBlockDataAttributes {
+  /** Marks each rendered element with its slot for styling and testing hooks. */
+  slot = "data-slot",
+  /** Hook the app stylesheet reads to attach the line-number gutter to the highlighted lines. */
+  codeblock = "data-codeblock",
+  /** Present on the active tab and its panel. */
+  active = "data-active"
+}
+//#endregion
+export { CodeBlockDataAttributes };

package/dist/components/code-block/code-block.slots.js

@@ -0,0 +1,31 @@
+//#region src/components/code-block/code-block.slots.ts
+/**
+* The slot vocabulary the `CodeBlock` compound stamps as `data-slot`. The authored source the
+* orchestration file reads from; SLOTS.md still generates from the token-graph declarations, so this
+* mirrors the declared code-family anatomy exactly — the single block (`code-block`, `code-block-header`)
+* and the tab strip (`code-tabs`, `code-tabs-panel`) the `Tabs`/`Panel` parts fold in. Parts without a
+* declared slot (Title, Body, Tab) render as plain elements with no `data-slot`.
+*/
+const CODE_BLOCK_SLOTS = {
+	root: "noctis-code-block",
+	header: "noctis-code-block-header",
+	managerGlyph: "noctis-code-block-manager-glyph",
+	tabs: "noctis-code-tabs",
+	panel: "noctis-code-tabs-panel"
+};
+/**
+* The data attributes the `CodeBlock` compound (and the Base UI tabs its `Tabs`/`Tab`/`Panel` parts
+* render) expose for styling and testing. Each member's value is the attribute name and its JSDoc is
+* the description; the docs API reference reads this enum directly.
+*/
+let CodeBlockDataAttributes = /* @__PURE__ */ function(CodeBlockDataAttributes) {
+	/** Marks each rendered element with its slot for styling and testing hooks. */
+	CodeBlockDataAttributes["slot"] = "data-slot";
+	/** Hook the app stylesheet reads to attach the line-number gutter to the highlighted lines. */
+	CodeBlockDataAttributes["codeblock"] = "data-codeblock";
+	/** Present on the active tab and its panel. */
+	CodeBlockDataAttributes["active"] = "data-active";
+	return CodeBlockDataAttributes;
+}({});
+//#endregion
+export { CODE_BLOCK_SLOTS, CodeBlockDataAttributes };

package/dist/components/code-block/index.d.ts

@@ -0,0 +1,3 @@
+import { CodeBlock } from "./code-block.js";
+import { CodeBlockDataAttributes } from "./code-block.slots.js";
+import { BrandLogo, PackageManager } from "./brand-logo.js";

package/dist/components/code-block/language-label.js

@@ -0,0 +1,43 @@
+//#region src/components/code-block/language-label.ts
+/** Human display names for common Shiki language ids, so an unlabelled block/tab still reads well. */
+const LANGUAGE_LABEL = {
+	bash: "Bash",
+	sh: "Shell",
+	shell: "Shell",
+	zsh: "Zsh",
+	js: "JavaScript",
+	javascript: "JavaScript",
+	ts: "TypeScript",
+	typescript: "TypeScript",
+	tsx: "TSX",
+	jsx: "JSX",
+	json: "JSON",
+	jsonc: "JSON",
+	py: "Python",
+	python: "Python",
+	go: "Go",
+	rs: "Rust",
+	rust: "Rust",
+	java: "Java",
+	rb: "Ruby",
+	ruby: "Ruby",
+	php: "PHP",
+	swift: "Swift",
+	kotlin: "Kotlin",
+	css: "CSS",
+	html: "HTML",
+	yaml: "YAML",
+	yml: "YAML",
+	toml: "TOML",
+	sql: "SQL",
+	graphql: "GraphQL",
+	md: "Markdown",
+	mdx: "MDX"
+};
+/** Pretty display name for a language id, falling back to the raw id (or a provided fallback). */
+function prettyLanguage(language, fallback = "") {
+	if (!language) return fallback;
+	return LANGUAGE_LABEL[language.toLowerCase()] ?? language;
+}
+//#endregion
+export { prettyLanguage };

package/dist/components/collapsible/collapsible.context.js

@@ -0,0 +1,18 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/components/collapsible/collapsible.context.ts
+/**
+* The shared label id minted once by `Collapsible.Root`. The `Trigger` adopts it as its own `id`, and
+* the `Panel` points its `aria-labelledby` at it — so the disclosed region is named by the control that
+* toggles it (mirrors `rail.context.ts`'s `RailTitleProvider`). It never throws: a `Trigger` or `Panel`
+* rendered outside a `Root` reads `null` and simply falls back to Base UI's own wiring.
+*/
+const CollapsibleIdContext = createContext(null);
+/** Provided by `Collapsible.Root`; carries the generated label id to the trigger and panel. */
+const CollapsibleIdProvider = CollapsibleIdContext.Provider;
+/** Read the disclosure's shared label id, or `null` for a part rendered outside a `Collapsible.Root`. */
+function useCollapsibleId() {
+	return use(CollapsibleIdContext);
+}
+//#endregion
+export { CollapsibleIdProvider, useCollapsibleId };

package/dist/components/collapsible/collapsible.d.ts

@@ -0,0 +1,167 @@
+import { useRender } from "../../core/render.js";
+import { collapsible_d_exports } from "../../primitives/collapsible.js";
+import { groupProps, headingProps, panelProps, rootProps, triggerProps } from "./collapsible.props.js";
+import { CollapsibleHeadingLevel, CollapsibleIndicator, CollapsiblePanelRole } from "./collapsible.types.js";
+import { JSX, ReactElement } from "react";
+
+//#region src/components/collapsible/collapsible.d.ts
+/**
+ * Groups the parts and owns open state — controlled via `open`/`onOpenChange`, or uncontrolled via
+ * `defaultOpen` — on Base UI's Collapsible. A non-modal disclosure: no backdrop, no focus trap. It
+ * renders a plain block; place a `Collapsible.Trigger` and a `Collapsible.Panel` inside. By default a
+ * `Collapsible` does one thing — show and hide its panel with a height animation — and nothing else;
+ * the heading, group, and twisty affordances below are all opt-in.
+ *
+ * Mints one label id and shares it with the trigger and panel so the disclosed region is named by the
+ * control that toggles it (`aria-labelledby`), without the consumer wiring an id by hand.
+ *
+ * Slot: `noctis-collapsible`.
+ * @see {@link Collapsible.Root.Props}
+ */
+declare function CollapsibleRoot({
+  className,
+  ...props
+}: Collapsible.Root.Props): ReactElement;
+/**
+ * The button that toggles the panel — composed from the ghost `Button` so its hover, focus-visible,
+ * pressed, and disabled states are the family's single source of truth (it gains the press affordance
+ * for free); Collapsible only re-owns the full-width row layout. Base UI wires `aria-expanded` and
+ * `aria-controls` and stamps `data-panel-open` while open. A disclosure chevron is rendered by default
+ * — `indicator` controls it: `true`/`"chevron-end"` trails the label and rotates down→up; `"chevron-
+ * start"` leads it as a right→down twisty (file-tree rows); `false` omits it. Place the label as children.
+ *
+ * Slot: `noctis-collapsible-trigger`.
+ * @see {@link Collapsible.Trigger.Props}
+ */
+declare function CollapsibleTrigger({
+  indicator,
+  className,
+  children,
+  ...props
+}: Collapsible.Trigger.Props): ReactElement;
+/**
+ * The collapsible region holding the disclosed content. Base UI animates its height between zero and the
+ * measured content height. Rendered as a labelled `<section>`: `role="group"` by default (set
+ * `panelRole="region"` to promote it to a landmark), named via `aria-labelledby` by the trigger that
+ * toggles it. Kept in the DOM while closed and findable by the browser's find-in-page
+ * (`hiddenUntilFound` defaults to `true`, which auto-expands the panel on a match); set
+ * `hiddenUntilFound={false}` to opt out, or `keepMounted={false}` to unmount closed content entirely.
+ *
+ * Slot: `noctis-collapsible-panel`.
+ * @see {@link Collapsible.Panel.Props}
+ */
+declare function CollapsiblePanel({
+  panelRole,
+  hiddenUntilFound,
+  keepMounted,
+  className,
+  children,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...props
+}: Collapsible.Panel.Props): ReactElement;
+/**
+ * An optional heading that wraps the `Collapsible.Trigger` so a content disclosure (an FAQ entry, a
+ * "show more" section) appears in the document outline and the screen-reader rotor — the recommended
+ * shape for content. Renders an `<h3>` by default; set `level` for another rank, or `render` to compose
+ * a custom element. Omit it for sidebar / file-tree rows, where a heading would be wrong.
+ *
+ * Slot: `noctis-collapsible-heading`.
+ * @see {@link Collapsible.Heading.Props}
+ */
+declare function CollapsibleHeading({
+  level,
+  render,
+  className,
+  ...props
+}: Collapsible.Heading.Props): ReactElement;
+/**
+ * A presentational container that stacks several `Collapsible`s into one bordered card — a hairline rule
+ * between siblings and under each open trigger, with a shared outer radius. It carries no open-state
+ * coordination: each disclosure opens and closes independently (reach for the `Accordion` primitive when
+ * only one should be open at a time).
+ *
+ * Slot: `noctis-collapsible-group`.
+ * @see {@link Collapsible.Group.Props}
+ */
+declare function CollapsibleGroup({
+  className,
+  children,
+  ...props
+}: Collapsible.Group.Props): ReactElement;
+/**
+ * A single disclosure — a trigger that expands and collapses a panel of content in place, with a
+ * height animation that's reduced-motion safe.
+ *
+ * **Collapsible vs. Rail vs. Sheet.** Reach for a `Collapsible` to show and hide a region of content
+ * *in the flow* of the page (a "show more" section, an expandable card, an FAQ answer). Reach for a
+ * `Rail` for a persistent companion panel docked beside the content, and a `Sheet` for a modal task
+ * panel that overlays the page. The collapsible is the simplest of the three: no docking, no overlay.
+ *
+ * Compose it from parts: `Collapsible.Root` owns open state, `Collapsible.Trigger` toggles it, and
+ * `Collapsible.Panel` holds the content that animates open and closed. Opt into `Collapsible.Heading`
+ * for content-outline semantics and `Collapsible.Group` for the stacked, bordered card look.
+ *
+ * Built on Base UI's Collapsible for the open/close behavior, measured-height animation, and a11y; the
+ * runtime compound is a plain object (kept tree-shakeable), with per-part prop types exposed through
+ * the matching `Collapsible` namespace below — e.g. `Collapsible.Panel.Props`.
+ */
+declare const Collapsible: {
+  /** Groups the parts and owns open state. `Collapsible.Root.props()` → its spreadable prop bag. */Root: typeof CollapsibleRoot & {
+    props: typeof rootProps;
+  }; /** Toggles the panel. `Collapsible.Trigger.props()` → its spreadable prop bag. */
+  Trigger: typeof CollapsibleTrigger & {
+    props: typeof triggerProps;
+  }; /** The animated content region. `Collapsible.Panel.props()` → its spreadable prop bag. */
+  Panel: typeof CollapsiblePanel & {
+    props: typeof panelProps;
+  }; /** Optional heading wrapping the trigger. `Collapsible.Heading.props()` → its spreadable prop bag. */
+  Heading: typeof CollapsibleHeading & {
+    props: typeof headingProps;
+  }; /** Presentational stacked container. `Collapsible.Group.props()` → its spreadable prop bag. */
+  Group: typeof CollapsibleGroup & {
+    props: typeof groupProps;
+  };
+};
+/**
+ * Per-part prop and state types, mirroring Base UI's `Component.Part.Props` convention. This namespace
+ * is types-only — it emits no runtime code and merges with the `Collapsible` object above, so
+ * `Collapsible.Panel` is the component value while `Collapsible.Panel.Props` is its prop type.
+ */
+declare namespace Collapsible {
+  namespace Root {
+    type Props = collapsible_d_exports.Collapsible.Root.Props;
+    type State = collapsible_d_exports.Collapsible.Root.State;
+  }
+  namespace Trigger {
+    type Props = collapsible_d_exports.Collapsible.Trigger.Props & {
+      /**
+       * The built-in disclosure chevron. `true` (default) / `"chevron-end"` trails the label and
+       * rotates down→up; `"chevron-start"` leads it as a right→down twisty; `false` omits it.
+       */
+      indicator?: CollapsibleIndicator;
+    };
+    type State = collapsible_d_exports.Collapsible.Trigger.State;
+  }
+  namespace Panel {
+    type Props = collapsible_d_exports.Collapsible.Panel.Props & {
+      /** The open panel's ARIA role. Defaults to `"group"`; `"region"` promotes it to a landmark. */panelRole?: CollapsiblePanelRole;
+    };
+    type State = collapsible_d_exports.Collapsible.Panel.State;
+  }
+  namespace Heading {
+    /** Props for the optional heading wrapping the trigger — an `<hN>` (default `<h3>`) or a `render`. */
+    interface Props extends Omit<JSX.IntrinsicElements["h3"], "color"> {
+      /** The heading rank to render. Defaults to `3`. */
+      level?: CollapsibleHeadingLevel;
+      /** A Base UI render prop — an element or function — to replace the rendered heading entirely. */
+      render?: useRender.RenderProp;
+    }
+  }
+  namespace Group {
+    /** Props for the presentational stacked container — a plain block element. */
+    type Props = JSX.IntrinsicElements["div"];
+  }
+}
+//#endregion
+export { Collapsible };

package/dist/components/collapsible/collapsible.js

@@ -0,0 +1,182 @@
+"use client";
+import { Icon } from "../../icons/icon.js";
+import { ChevronDownIcon, ChevronRightIcon } from "../../icons/glyphs.js";
+import { useRender } from "../../core/render.js";
+import { Button } from "../button/button.js";
+import { collapsible_exports } from "../../primitives/collapsible.js";
+import { CollapsibleIdProvider, useCollapsibleId } from "./collapsible.context.js";
+import { COLLAPSIBLE_SLOTS } from "./collapsible.slots.js";
+import { groupProps, headingProps, panelProps, rootProps, triggerProps } from "./collapsible.props.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/collapsible/collapsible.tsx
+/** Resolve the `indicator` prop to a placement, or `undefined` when the built-in chevron is omitted. */
+function resolveIndicator(indicator) {
+	if (indicator === true) return "chevron-end";
+	if (indicator === false) return void 0;
+	return indicator;
+}
+/**
+* Groups the parts and owns open state — controlled via `open`/`onOpenChange`, or uncontrolled via
+* `defaultOpen` — on Base UI's Collapsible. A non-modal disclosure: no backdrop, no focus trap. It
+* renders a plain block; place a `Collapsible.Trigger` and a `Collapsible.Panel` inside. By default a
+* `Collapsible` does one thing — show and hide its panel with a height animation — and nothing else;
+* the heading, group, and twisty affordances below are all opt-in.
+*
+* Mints one label id and shares it with the trigger and panel so the disclosed region is named by the
+* control that toggles it (`aria-labelledby`), without the consumer wiring an id by hand.
+*
+* Slot: `noctis-collapsible`.
+* @see {@link Collapsible.Root.Props}
+*/
+function CollapsibleRoot({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CollapsibleIdProvider, {
+		value: useId(),
+		children: /* @__PURE__ */ jsx(collapsible_exports.Collapsible.Root, {
+			"data-slot": COLLAPSIBLE_SLOTS.root,
+			className,
+			...props
+		})
+	});
+}
+/**
+* The button that toggles the panel — composed from the ghost `Button` so its hover, focus-visible,
+* pressed, and disabled states are the family's single source of truth (it gains the press affordance
+* for free); Collapsible only re-owns the full-width row layout. Base UI wires `aria-expanded` and
+* `aria-controls` and stamps `data-panel-open` while open. A disclosure chevron is rendered by default
+* — `indicator` controls it: `true`/`"chevron-end"` trails the label and rotates down→up; `"chevron-
+* start"` leads it as a right→down twisty (file-tree rows); `false` omits it. Place the label as children.
+*
+* Slot: `noctis-collapsible-trigger`.
+* @see {@link Collapsible.Trigger.Props}
+*/
+function CollapsibleTrigger({ indicator = true, className, children, ...props }) {
+	const labelId = useCollapsibleId();
+	const side = resolveIndicator(indicator);
+	const { "data-disabled": _ghostDisabled, ...ghostButton } = Button.props({
+		variant: "ghost",
+		fullWidth: true
+	});
+	const chevron = side ? /* @__PURE__ */ jsx("span", {
+		"data-collapsible-indicator": "",
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon: side === "chevron-start" ? ChevronRightIcon : ChevronDownIcon,
+			size: "sm",
+			directional: true
+		})
+	}) : null;
+	return /* @__PURE__ */ jsxs(collapsible_exports.Collapsible.Trigger, {
+		...ghostButton,
+		"data-slot": COLLAPSIBLE_SLOTS.trigger,
+		"data-indicator": side,
+		className,
+		...props,
+		children: [
+			side === "chevron-start" ? chevron : null,
+			/* @__PURE__ */ jsx("span", {
+				"data-collapsible-label": "",
+				id: labelId ?? void 0,
+				children
+			}),
+			side === "chevron-end" ? chevron : null
+		]
+	});
+}
+/**
+* The collapsible region holding the disclosed content. Base UI animates its height between zero and the
+* measured content height. Rendered as a labelled `<section>`: `role="group"` by default (set
+* `panelRole="region"` to promote it to a landmark), named via `aria-labelledby` by the trigger that
+* toggles it. Kept in the DOM while closed and findable by the browser's find-in-page
+* (`hiddenUntilFound` defaults to `true`, which auto-expands the panel on a match); set
+* `hiddenUntilFound={false}` to opt out, or `keepMounted={false}` to unmount closed content entirely.
+*
+* Slot: `noctis-collapsible-panel`.
+* @see {@link Collapsible.Panel.Props}
+*/
+function CollapsiblePanel({ panelRole = "group", hiddenUntilFound = true, keepMounted = true, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }) {
+	const labelId = useCollapsibleId();
+	return /* @__PURE__ */ jsx(collapsible_exports.Collapsible.Panel, {
+		"data-slot": COLLAPSIBLE_SLOTS.panel,
+		role: panelRole,
+		hiddenUntilFound,
+		keepMounted,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledby ?? (ariaLabel ? void 0 : labelId ?? void 0),
+		render: /* @__PURE__ */ jsx("section", {}),
+		className,
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-collapsible-content": "",
+			children
+		})
+	});
+}
+/**
+* An optional heading that wraps the `Collapsible.Trigger` so a content disclosure (an FAQ entry, a
+* "show more" section) appears in the document outline and the screen-reader rotor — the recommended
+* shape for content. Renders an `<h3>` by default; set `level` for another rank, or `render` to compose
+* a custom element. Omit it for sidebar / file-tree rows, where a heading would be wrong.
+*
+* Slot: `noctis-collapsible-heading`.
+* @see {@link Collapsible.Heading.Props}
+*/
+function CollapsibleHeading({ level = 3, render, className, ...props }) {
+	return useRender({
+		defaultTagName: `h${level}`,
+		render,
+		props: {
+			"data-slot": COLLAPSIBLE_SLOTS.heading,
+			className,
+			...props
+		}
+	});
+}
+/**
+* A presentational container that stacks several `Collapsible`s into one bordered card — a hairline rule
+* between siblings and under each open trigger, with a shared outer radius. It carries no open-state
+* coordination: each disclosure opens and closes independently (reach for the `Accordion` primitive when
+* only one should be open at a time).
+*
+* Slot: `noctis-collapsible-group`.
+* @see {@link Collapsible.Group.Props}
+*/
+function CollapsibleGroup({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": COLLAPSIBLE_SLOTS.group,
+		className,
+		...props,
+		children
+	});
+}
+/**
+* A single disclosure — a trigger that expands and collapses a panel of content in place, with a
+* height animation that's reduced-motion safe.
+*
+* **Collapsible vs. Rail vs. Sheet.** Reach for a `Collapsible` to show and hide a region of content
+* *in the flow* of the page (a "show more" section, an expandable card, an FAQ answer). Reach for a
+* `Rail` for a persistent companion panel docked beside the content, and a `Sheet` for a modal task
+* panel that overlays the page. The collapsible is the simplest of the three: no docking, no overlay.
+*
+* Compose it from parts: `Collapsible.Root` owns open state, `Collapsible.Trigger` toggles it, and
+* `Collapsible.Panel` holds the content that animates open and closed. Opt into `Collapsible.Heading`
+* for content-outline semantics and `Collapsible.Group` for the stacked, bordered card look.
+*
+* Built on Base UI's Collapsible for the open/close behavior, measured-height animation, and a11y; the
+* runtime compound is a plain object (kept tree-shakeable), with per-part prop types exposed through
+* the matching `Collapsible` namespace below — e.g. `Collapsible.Panel.Props`.
+*/
+const Collapsible = {
+	/** Groups the parts and owns open state. `Collapsible.Root.props()` → its spreadable prop bag. */
+	Root: Object.assign(CollapsibleRoot, { props: rootProps }),
+	/** Toggles the panel. `Collapsible.Trigger.props()` → its spreadable prop bag. */
+	Trigger: Object.assign(CollapsibleTrigger, { props: triggerProps }),
+	/** The animated content region. `Collapsible.Panel.props()` → its spreadable prop bag. */
+	Panel: Object.assign(CollapsiblePanel, { props: panelProps }),
+	/** Optional heading wrapping the trigger. `Collapsible.Heading.props()` → its spreadable prop bag. */
+	Heading: Object.assign(CollapsibleHeading, { props: headingProps }),
+	/** Presentational stacked container. `Collapsible.Group.props()` → its spreadable prop bag. */
+	Group: Object.assign(CollapsibleGroup, { props: groupProps })
+};
+//#endregion
+export { Collapsible };

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

@@ -0,0 +1,33 @@
+//#region src/components/collapsible/collapsible.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `Collapsible.*.props()` returns. */
+type CollapsiblePartProps = {
+  /** The slot value the matching `collapsible.css` rules anchor on. */"data-slot": string; /** Forwarded verbatim — styling is attribute-driven, so this is an optional consumer passthrough. */
+  className?: string;
+};
+/** Common shape: every part's `.props()` accepts an optional `className` passthrough. */
+interface CollapsiblePropsArgs {
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/** Root prop bag: the disclosure-group slot anchor. */
+declare function rootProps({
+  className
+}?: CollapsiblePropsArgs): CollapsiblePartProps;
+/** Trigger prop bag: the slot anchor the trigger-row styling keys off. */
+declare function triggerProps({
+  className
+}?: CollapsiblePropsArgs): CollapsiblePartProps;
+/** Panel prop bag: the slot anchor the height-collapse animation keys off. */
+declare function panelProps({
+  className
+}?: CollapsiblePropsArgs): CollapsiblePartProps;
+/** Heading prop bag: the slot anchor for the optional heading wrapping the trigger. */
+declare function headingProps({
+  className
+}?: CollapsiblePropsArgs): CollapsiblePartProps;
+/** Group prop bag: the slot anchor the stacked-container divider rules key off. */
+declare function groupProps({
+  className
+}?: CollapsiblePropsArgs): CollapsiblePartProps;
+//#endregion
+export { groupProps, headingProps, panelProps, rootProps, triggerProps };

package/dist/components/collapsible/collapsible.props.js

@@ -0,0 +1,44 @@
+import { COLLAPSIBLE_SLOTS } from "./collapsible.slots.js";
+//#region src/components/collapsible/collapsible.props.ts
+/**
+* The D12 unified variant contract for Collapsible — the data-attribute-native escape hatch, for
+* elements a `<Collapsible.*>` can't render.
+*
+* Each compound part exposes a `props(...)` builder returning a **spreadable props object** of the form
+* `{ "data-slot": "noctis-collapsible-<part>" }`. Under the single-`data-slot` anchor model the
+* `data-slot` is the only styling hook needed — `collapsible.css` keys every rule off it plus the live
+* `data-*` state Base UI stamps — so spreading a part's `props()` onto a foreign element styles it as
+* that part:
+*
+*     <button {...collapsibleTriggerProps()}>Details</button>
+*     // → <button data-slot="noctis-collapsible-trigger">
+*
+* 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 disclosure-group slot anchor. */
+function rootProps({ className } = {}) {
+	return withClassName({ "data-slot": COLLAPSIBLE_SLOTS.root }, className);
+}
+/** Trigger prop bag: the slot anchor the trigger-row styling keys off. */
+function triggerProps({ className } = {}) {
+	return withClassName({ "data-slot": COLLAPSIBLE_SLOTS.trigger }, className);
+}
+/** Panel prop bag: the slot anchor the height-collapse animation keys off. */
+function panelProps({ className } = {}) {
+	return withClassName({ "data-slot": COLLAPSIBLE_SLOTS.panel }, className);
+}
+/** Heading prop bag: the slot anchor for the optional heading wrapping the trigger. */
+function headingProps({ className } = {}) {
+	return withClassName({ "data-slot": COLLAPSIBLE_SLOTS.heading }, className);
+}
+/** Group prop bag: the slot anchor the stacked-container divider rules key off. */
+function groupProps({ className } = {}) {
+	return withClassName({ "data-slot": COLLAPSIBLE_SLOTS.group }, className);
+}
+//#endregion
+export { groupProps, headingProps, panelProps, rootProps, triggerProps };

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

@@ -0,0 +1,25 @@
+//#region src/components/collapsible/collapsible.slots.d.ts
+/**
+ * The data attributes `Collapsible`'s parts expose for styling and testing. Each member's value is the
+ * attribute name and its JSDoc is the description; the docs API reference reads this enum directly, so
+ * the documented attributes can't drift from the precompiled `collapsible.css` rules that key off them.
+ * The state attributes are stamped at runtime by Base UI off the live open state.
+ */
+declare enum CollapsibleDataAttributes {
+  /** The catalog slot that anchors every `collapsible.css` rule and marks the part for SLOTS.md/testing. */
+  slot = "data-slot",
+  /** Present on the panel while the disclosure is open. */
+  open = "data-open",
+  /** Present on the panel while the disclosure is closed. */
+  closed = "data-closed",
+  /** Present on the trigger while its panel is open — the hook the disclosure chevron rotates off. */
+  panelOpen = "data-panel-open",
+  /** Present on the panel for the first animation frame as it opens — the from-zero-height keyframe edge. */
+  startingStyle = "data-starting-style",
+  /** Present on the panel for the final animation frame as it closes — the to-zero-height keyframe edge. */
+  endingStyle = "data-ending-style",
+  /** Present on the trigger and panel when the collapsible is disabled. */
+  disabled = "data-disabled"
+}
+//#endregion
+export { CollapsibleDataAttributes };