@stridge/noctis 1.0.0-beta.0

package/dist/components/sheet/sheet.slots.js

@@ -0,0 +1,22 @@
+//#region src/components/sheet/sheet.slots.ts
+/**
+* The slot vocabulary every `Sheet` 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. `Sheet.Root` wraps Base UI's `Dialog.Root` without rendering an element of
+* its own, and `Sheet.Content` composes the portal/backdrop/popup without stamping a slot — so neither
+* appears here, keeping the const parity-true to the rendered DOM.
+*/
+const SHEET_SLOTS = {
+	trigger: "noctis-sheet-trigger",
+	backdrop: "noctis-sheet-backdrop",
+	viewport: "noctis-sheet-viewport",
+	popup: "noctis-sheet-popup",
+	close: "noctis-sheet-close",
+	header: "noctis-sheet-header",
+	body: "noctis-sheet-body",
+	footer: "noctis-sheet-footer",
+	title: "noctis-sheet-title",
+	description: "noctis-sheet-description"
+};
+//#endregion
+export { SHEET_SLOTS };

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

@@ -0,0 +1,12 @@
+//#region src/components/sheet/sheet.types.d.ts
+/**
+ * The side/size vocabulary `Sheet` panels carry — formerly derived from the `sheetPopup` `tv()` recipe,
+ * now the authored source of truth since styling moved to precompiled `sheet.css`. Types-only: no
+ * runtime code, so it never participates in the styling layer.
+ */
+/** Which edge the sheet docks to, and the direction it slides from. */
+type SheetSide = "start" | "end" | "top" | "bottom";
+/** The panel's cross-axis extent — width for side sheets, height for top/bottom sheets. */
+type SheetSize = "sm" | "md" | "lg" | "xl" | "full";
+//#endregion
+export { SheetSide, SheetSize };

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

@@ -0,0 +1,3 @@
+import { SliderSize } from "./slider.context.js";
+import { Slider } from "./slider.js";
+import { SliderDataAttributes } from "./slider.slots.js";

package/dist/components/slider/slider.context.d.ts

@@ -0,0 +1,5 @@
+//#region src/components/slider/slider.context.d.ts
+/** Control size — `sm` or `md`; the rail thickness, hit-area, and thumb diameter re-point off it. */
+type SliderSize = "sm" | "md";
+//#endregion
+export { SliderSize };

package/dist/components/slider/slider.context.js

@@ -0,0 +1,29 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/components/slider/slider.context.ts
+const SliderContext = createContext(null);
+const SliderProvider = SliderContext.Provider;
+/** Read the slider context, throwing a named error when a part renders outside `Slider.Root`. */
+function useSliderContext(part) {
+	const context = use(SliderContext);
+	if (context === null) throw new Error(`Slider.${part} must be rendered inside <Slider.Root>.`);
+	return context;
+}
+const SliderValueContext = createContext(null);
+const SliderValueProvider = SliderValueContext.Provider;
+/** Read the live value geometry. Returns `null` outside a `Slider.Root` (parts degrade gracefully). */
+function useSliderValueContext() {
+	return use(SliderValueContext);
+}
+/**
+* The index of the enclosing `Slider.Thumb`, shared with a composed `Slider.ThumbValue` so its readout
+* shows that thumb's value without the consumer repeating the index.
+*/
+const SliderThumbIndexContext = createContext(0);
+const SliderThumbIndexProvider = SliderThumbIndexContext.Provider;
+/** Read the enclosing thumb's index (defaults to `0` for a single-value slider). */
+function useSliderThumbIndex() {
+	return use(SliderThumbIndexContext);
+}
+//#endregion
+export { SliderProvider, SliderThumbIndexProvider, SliderValueProvider, useSliderContext, useSliderThumbIndex, useSliderValueContext };

package/dist/components/slider/slider.d.ts

@@ -0,0 +1,230 @@
+import { Slider as Slider$1 } from "../../primitives/slider/slider.js";
+import { SliderSize } from "./slider.context.js";
+import { SliderPartProps, SliderRootPropsArgs, controlProps, headerProps, indicatorProps, labelProps, markLabelProps, markProps, marksProps, rootProps, thumbProps, thumbValueProps, trackProps, valueProps } from "./slider.props.js";
+import { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+
+//#region src/components/slider/slider.d.ts
+/**
+ * Owns the slider's value and shares the control `size` plus the live value geometry with its parts.
+ * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`); pass an array of two
+ * numbers for a range. Built on Base UI, so it handles the active locale and the range thumbs'
+ * value-text suffixes. Compose `Slider.Control` (holding `Slider.Track` → `Slider.Indicator` and one
+ * `Slider.Thumb` per value), optionally under a `Slider.Header` with the `Slider.Label` + `Slider.Value`.
+ */
+declare function SliderRoot({
+  size,
+  origin,
+  className,
+  children,
+  value,
+  defaultValue,
+  min,
+  max,
+  orientation,
+  onValueChange,
+  ...props
+}: Slider.Root.Props): ReactElement;
+/** A baseline row above the control holding `Slider.Label` + `Slider.Value`; owns the header→rail gap. */
+declare function SliderHeader({
+  className,
+  ...props
+}: Slider.Header.Props): ReactElement;
+/** The slider's accessible label. Pair it with `Slider.Value` inside a `Slider.Header` above the control. */
+declare function SliderLabel({
+  className,
+  ...props
+}: Slider.Label.Props): ReactElement;
+/** The formatted current value, localized via the injected locale. */
+declare function SliderValue({
+  className,
+  ...props
+}: Slider.Value.Props): ReactElement;
+/** The interactive row the rail and thumbs sit centred within. Holds the `Track` and the `Thumb`s. */
+declare function SliderControl({
+  className,
+  ...props
+}: Slider.Control.Props): ReactElement;
+/** The sunken rail the indicator fills. Render the `Slider.Indicator` inside it. */
+declare function SliderTrack({
+  className,
+  ...props
+}: Slider.Track.Props): ReactElement;
+/**
+ * The filled portion of the rail — the accent fill up to the thumb (or between range thumbs). When the
+ * Root sets a non-min `origin` on a single-value slider, the fill anchors there instead of the minimum.
+ */
+declare function SliderIndicator({
+  className,
+  style,
+  ...props
+}: Slider.Indicator.Props): ReactElement;
+/**
+ * A draggable handle. Render one per value — `index={0}` for a single slider, and a second
+ * `index={1}` for a range. Base UI nests the real `<input type="range">` and stamps the live
+ * drag/focus/disabled state the CSS keys off. A composed `Slider.ThumbValue` child reads this thumb's
+ * index to show its live value while dragging.
+ */
+declare function SliderThumb({
+  className,
+  index,
+  children,
+  ...props
+}: Slider.Thumb.Props): ReactElement;
+/**
+ * An opt-in live value readout, rendered as a child of `Slider.Thumb`. Floats above the thumb only
+ * while dragging (and on keyboard focus) so the value stays visible — never under the finger. It is
+ * `aria-hidden`: the thumb input's `aria-valuetext` remains the single announced source of truth.
+ */
+declare function SliderThumbValue({
+  className,
+  ...props
+}: Slider.ThumbValue.Props): ReactElement;
+/**
+ * The decorative layer of step ticks over the control. Holds `Slider.Mark` children; the whole layer is
+ * `aria-hidden` (the value text already conveys position to assistive tech).
+ */
+declare function SliderMarks({
+  className,
+  ...props
+}: Slider.Marks.Props): ReactElement;
+/**
+ * A single sharp tick at `value` on the scale, with an optional caption (e.g. a min/max label). Reads
+ * the neutral `border` colour until the value passes it, then switches to the accent (the fill's
+ * signal). Positioned logically so it mirrors under RTL and re-anchors for a vertical slider.
+ */
+declare function SliderMark({
+  className,
+  value,
+  children,
+  style,
+  ...props
+}: Slider.Mark.Props): ReactElement;
+/**
+ * A slider for picking a number — or a range — from a continuous scale. The indicator fills the
+ * sunken rail in the accent up to the thumb, signalling the selected value; a range adds a second
+ * thumb and fills between them. Two sizes (`sm`, `md`). Built on Base UI's Slider, so it is fully
+ * keyboard-operable (arrows, Home/End, Page Up/Down, Shift+Arrow for the `largeStep`), RTL-aware,
+ * localizes its value text, and the thumb's grow-on-drag respects `prefers-reduced-motion`.
+ *
+ * Compose from parts: `Slider.Root` owns the value and the shared `size`; `Slider.Control` holds the
+ * `Slider.Track` (with its `Slider.Indicator`) and one `Slider.Thumb` per value. An optional
+ * `Slider.Header` wraps `Slider.Label` + `Slider.Value` above the control; a `Slider.ThumbValue` child
+ * of a thumb adds a drag readout; `Slider.Marks` / `Slider.Mark` add a tick scale; and `origin` anchors
+ * a bipolar fill away from the minimum.
+ *
+ * The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are
+ * exposed through the matching `Slider` namespace — e.g. `Slider.Thumb.Props`.
+ */
+declare const Slider: {
+  /** Owns the value and the shared `size`. `Slider.Root.props({ size })` → its spreadable prop bag. */Root: typeof SliderRoot & {
+    props: typeof rootProps;
+  }; /** The label/value header row. `Slider.Header.props()` → its spreadable prop bag. */
+  Header: typeof SliderHeader & {
+    props: typeof headerProps;
+  }; /** The accessible label. `Slider.Label.props()` → its spreadable prop bag. */
+  Label: typeof SliderLabel & {
+    props: typeof labelProps;
+  }; /** The formatted value text. `Slider.Value.props()` → its spreadable prop bag. */
+  Value: typeof SliderValue & {
+    props: typeof valueProps;
+  }; /** The interactive control row. `Slider.Control.props()` → its spreadable prop bag. */
+  Control: typeof SliderControl & {
+    props: typeof controlProps;
+  }; /** The sunken rail. `Slider.Track.props()` → its spreadable prop bag. */
+  Track: typeof SliderTrack & {
+    props: typeof trackProps;
+  }; /** The accent fill. `Slider.Indicator.props()` → its spreadable prop bag. */
+  Indicator: typeof SliderIndicator & {
+    props: typeof indicatorProps;
+  }; /** A draggable handle. `Slider.Thumb.props()` → its spreadable prop bag for a foreign element. */
+  Thumb: typeof SliderThumb & {
+    props: typeof thumbProps;
+  }; /** The opt-in drag readout. `Slider.ThumbValue.props()` → its spreadable prop bag. */
+  ThumbValue: typeof SliderThumbValue & {
+    props: typeof thumbValueProps;
+  }; /** The step-tick layer. `Slider.Marks.props()` → its spreadable prop bag. */
+  Marks: typeof SliderMarks & {
+    props: typeof marksProps;
+  }; /** A single step tick. `Slider.Mark.props()` → its spreadable prop bag. */
+  Mark: typeof SliderMark & {
+    props: typeof markProps;
+    Label: {
+      props: typeof markLabelProps;
+    };
+  };
+};
+/**
+ * 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 `Slider` object above, so `Slider.Thumb` is the
+ * component value while `Slider.Thumb.Props` is its prop type.
+ */
+declare namespace Slider {
+  /** Control size — `sm` or `md`. */
+  type Size = SliderSize;
+  /** The spreadable data-attribute prop bag every `Slider.*.props()` returns (D12). */
+  type PartProps = SliderPartProps;
+  namespace Root {
+    type Props = Omit<Slider$1.Root.Props, "className" | "children"> & {
+      /**
+       * Control size — `sm` or `md`.
+       * @default "md"
+       */
+      size?: SliderSize;
+      /**
+       * Anchor the fill at a non-minimum value on a single-value slider, so the indicator spans
+       * `origin → value` (bipolar / centre fill — balance, EQ, brightness ±). Ignored for a range,
+       * where Base UI already fills between the two thumbs. Defaults to the scale minimum.
+       */
+      origin?: number; /** `Slider.Control` (and an optional `Slider.Header` with `Slider.Label` / `Slider.Value`). */
+      children?: ReactNode; /** Classes merged onto the root. */
+      className?: string;
+    };
+    type State = Slider$1.Root.State;
+    /** Argument to the `Slider.Root.props(...)` escape-hatch helper. */
+    type PropsArgs = SliderRootPropsArgs;
+  }
+  namespace Header {
+    /** A plain flex row; pass `Slider.Label` + `Slider.Value` as children. */
+    type Props = ComponentPropsWithoutRef<"div">;
+  }
+  namespace Label {
+    type Props = Slider$1.Label.Props;
+    type State = Slider$1.Label.State;
+  }
+  namespace Value {
+    type Props = Slider$1.Value.Props;
+    type State = Slider$1.Value.State;
+  }
+  namespace Control {
+    type Props = Slider$1.Control.Props;
+    type State = Slider$1.Control.State;
+  }
+  namespace Track {
+    type Props = Slider$1.Track.Props;
+    type State = Slider$1.Track.State;
+  }
+  namespace Indicator {
+    type Props = Slider$1.Indicator.Props;
+    type State = Slider$1.Indicator.State;
+  }
+  namespace Thumb {
+    type Props = Slider$1.Thumb.Props;
+    type State = Slider$1.Thumb.State;
+  }
+  namespace ThumbValue {
+    /** The drag readout; its content is the thumb's value, so `children` is owned by the part. */
+    type Props = Omit<Slider$1.Value.Props, "children">;
+  }
+  namespace Marks {
+    /** A plain layer; pass `Slider.Mark` children. */
+    type Props = ComponentPropsWithoutRef<"div">;
+  }
+  namespace Mark {
+    type Props = Omit<ComponentPropsWithoutRef<"span">, "children"> & {
+      /** The position on the scale this tick marks. */value: number; /** An optional decorative caption (e.g. a min/max label) rendered beneath the tick. */
+      children?: ReactNode;
+    };
+  }
+}
+//#endregion
+export { Slider };

package/dist/components/slider/slider.js

@@ -0,0 +1,274 @@
+"use client";
+import { Slider as Slider$1 } from "../../primitives/slider/slider.js";
+import { SliderProvider, SliderThumbIndexProvider, SliderValueProvider, useSliderContext, useSliderThumbIndex, useSliderValueContext } from "./slider.context.js";
+import { SLIDER_SLOTS } from "./slider.slots.js";
+import { controlProps, headerProps, indicatorProps, labelProps, markLabelProps, markProps, marksProps, rootProps, thumbProps, thumbValueProps, trackProps, valueProps } from "./slider.props.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/slider/slider.tsx
+const clamp01 = (n) => n < 0 ? 0 : n > 1 ? 1 : n;
+/** Normalize Base UI's `number | number[]` value into an array (one entry for a single slider). */
+function toValues(value, fallback) {
+	if (Array.isArray(value)) return [...value];
+	if (typeof value === "number") return [value];
+	return [fallback];
+}
+/**
+* The fill geometry for a single-value slider with a non-min `origin`: the indicator spans
+* `origin → value` instead of `min → value`. Overrides only the two axis keys Base UI sets inline
+* (`inset-inline-start` + `width` horizontally; `bottom` + `height` vertically) so RTL still mirrors
+* via the logical inline start and the cross-axis `inherit` Base UI applies is left untouched.
+*/
+function originFillStyle(ctx) {
+	const { values, min, max, orientation, origin } = ctx;
+	if (origin === void 0 || values.length !== 1) return void 0;
+	const span = max - min;
+	if (span <= 0) return void 0;
+	const value = clamp01((values[0] - min) / span);
+	const anchor = clamp01((origin - min) / span);
+	const start = `${Math.min(anchor, value) * 100}%`;
+	const size = `${Math.abs(value - anchor) * 100}%`;
+	return orientation === "vertical" ? {
+		bottom: start,
+		height: size
+	} : {
+		insetInlineStart: start,
+		width: size
+	};
+}
+/** The fraction (0–1) of the scale a mark's value sits at. */
+function markFraction(ctx, value) {
+	const span = ctx.max - ctx.min;
+	return span <= 0 ? 0 : clamp01((value - ctx.min) / span);
+}
+/** Whether the current value has reached a mark — within the span for a range, up to the value otherwise. */
+function isMarkPassed(ctx, value) {
+	if (ctx.values.length > 1) {
+		const lo = Math.min(...ctx.values);
+		const hi = Math.max(...ctx.values);
+		return value >= lo && value <= hi;
+	}
+	return value <= ctx.values[0];
+}
+/**
+* Owns the slider's value and shares the control `size` plus the live value geometry with its parts.
+* Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`); pass an array of two
+* numbers for a range. Built on Base UI, so it handles the active locale and the range thumbs'
+* value-text suffixes. Compose `Slider.Control` (holding `Slider.Track` → `Slider.Indicator` and one
+* `Slider.Thumb` per value), optionally under a `Slider.Header` with the `Slider.Label` + `Slider.Value`.
+*/
+function SliderRoot({ size = "md", origin, className, children, value, defaultValue, min = 0, max = 100, orientation = "horizontal", onValueChange, ...props }) {
+	const controlled = value !== void 0;
+	const [uncontrolled, setUncontrolled] = useState(() => toValues(defaultValue, min));
+	const values = controlled ? toValues(value, min) : uncontrolled;
+	const handleValueChange = (next, details) => {
+		if (!controlled) setUncontrolled(toValues(next, min));
+		onValueChange?.(next, details);
+	};
+	return /* @__PURE__ */ jsx(Slider$1.Root, {
+		"data-slot": SLIDER_SLOTS.root,
+		"data-size": size,
+		className,
+		value,
+		defaultValue,
+		min,
+		max,
+		orientation,
+		onValueChange: handleValueChange,
+		...props,
+		children: /* @__PURE__ */ jsx(SliderProvider, {
+			value: { size },
+			children: /* @__PURE__ */ jsx(SliderValueProvider, {
+				value: {
+					values,
+					min,
+					max,
+					orientation,
+					origin
+				},
+				children
+			})
+		})
+	});
+}
+/** A baseline row above the control holding `Slider.Label` + `Slider.Value`; owns the header→rail gap. */
+function SliderHeader({ className, ...props }) {
+	useSliderContext("Header");
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": SLIDER_SLOTS.header,
+		className,
+		...props
+	});
+}
+/** The slider's accessible label. Pair it with `Slider.Value` inside a `Slider.Header` above the control. */
+function SliderLabel({ className, ...props }) {
+	useSliderContext("Label");
+	return /* @__PURE__ */ jsx(Slider$1.Label, {
+		"data-slot": SLIDER_SLOTS.label,
+		className,
+		...props
+	});
+}
+/** The formatted current value, localized via the injected locale. */
+function SliderValue({ className, ...props }) {
+	useSliderContext("Value");
+	return /* @__PURE__ */ jsx(Slider$1.Value, {
+		"data-slot": SLIDER_SLOTS.value,
+		className,
+		...props
+	});
+}
+/** The interactive row the rail and thumbs sit centred within. Holds the `Track` and the `Thumb`s. */
+function SliderControl({ className, ...props }) {
+	useSliderContext("Control");
+	return /* @__PURE__ */ jsx(Slider$1.Control, {
+		"data-slot": SLIDER_SLOTS.control,
+		className,
+		...props
+	});
+}
+/** The sunken rail the indicator fills. Render the `Slider.Indicator` inside it. */
+function SliderTrack({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Slider$1.Track, {
+		"data-slot": SLIDER_SLOTS.track,
+		className,
+		...props
+	});
+}
+/**
+* The filled portion of the rail — the accent fill up to the thumb (or between range thumbs). When the
+* Root sets a non-min `origin` on a single-value slider, the fill anchors there instead of the minimum.
+*/
+function SliderIndicator({ className, style, ...props }) {
+	const ctx = useSliderValueContext();
+	const fill = ctx ? originFillStyle(ctx) : void 0;
+	return /* @__PURE__ */ jsx(Slider$1.Indicator, {
+		"data-slot": SLIDER_SLOTS.indicator,
+		className,
+		style: fill ? {
+			...fill,
+			...style
+		} : style,
+		...props
+	});
+}
+/**
+* A draggable handle. Render one per value — `index={0}` for a single slider, and a second
+* `index={1}` for a range. Base UI nests the real `<input type="range">` and stamps the live
+* drag/focus/disabled state the CSS keys off. A composed `Slider.ThumbValue` child reads this thumb's
+* index to show its live value while dragging.
+*/
+function SliderThumb({ className, index = 0, children, ...props }) {
+	return /* @__PURE__ */ jsx(Slider$1.Thumb, {
+		"data-slot": SLIDER_SLOTS.thumb,
+		index,
+		className,
+		...props,
+		children: /* @__PURE__ */ jsx(SliderThumbIndexProvider, {
+			value: index,
+			children
+		})
+	});
+}
+/**
+* An opt-in live value readout, rendered as a child of `Slider.Thumb`. Floats above the thumb only
+* while dragging (and on keyboard focus) so the value stays visible — never under the finger. It is
+* `aria-hidden`: the thumb input's `aria-valuetext` remains the single announced source of truth.
+*/
+function SliderThumbValue({ className, ...props }) {
+	const index = useSliderThumbIndex();
+	return /* @__PURE__ */ jsx(Slider$1.Value, {
+		"data-slot": SLIDER_SLOTS.thumbValue,
+		"aria-hidden": true,
+		className,
+		...props,
+		children: (formatted) => formatted[index]
+	});
+}
+/**
+* The decorative layer of step ticks over the control. Holds `Slider.Mark` children; the whole layer is
+* `aria-hidden` (the value text already conveys position to assistive tech).
+*/
+function SliderMarks({ className, ...props }) {
+	useSliderContext("Marks");
+	const ctx = useSliderValueContext();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": SLIDER_SLOTS.marks,
+		"data-orientation": ctx?.orientation ?? "horizontal",
+		"aria-hidden": true,
+		className,
+		...props
+	});
+}
+/**
+* A single sharp tick at `value` on the scale, with an optional caption (e.g. a min/max label). Reads
+* the neutral `border` colour until the value passes it, then switches to the accent (the fill's
+* signal). Positioned logically so it mirrors under RTL and re-anchors for a vertical slider.
+*/
+function SliderMark({ className, value, children, style, ...props }) {
+	const ctx = useSliderValueContext();
+	const fraction = ctx ? markFraction(ctx, value) : 0;
+	const passed = ctx ? isMarkPassed(ctx, value) : false;
+	const offset = `${fraction * 100}%`;
+	const placement = ctx?.orientation === "vertical" ? { insetBlockEnd: offset } : { insetInlineStart: offset };
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": SLIDER_SLOTS.mark,
+		"data-orientation": ctx?.orientation ?? "horizontal",
+		"data-state": passed ? "passed" : void 0,
+		style: {
+			...placement,
+			...style
+		},
+		className,
+		...props,
+		children: children != null && /* @__PURE__ */ jsx("span", {
+			"data-slot": SLIDER_SLOTS.markLabel,
+			children
+		})
+	});
+}
+/**
+* A slider for picking a number — or a range — from a continuous scale. The indicator fills the
+* sunken rail in the accent up to the thumb, signalling the selected value; a range adds a second
+* thumb and fills between them. Two sizes (`sm`, `md`). Built on Base UI's Slider, so it is fully
+* keyboard-operable (arrows, Home/End, Page Up/Down, Shift+Arrow for the `largeStep`), RTL-aware,
+* localizes its value text, and the thumb's grow-on-drag respects `prefers-reduced-motion`.
+*
+* Compose from parts: `Slider.Root` owns the value and the shared `size`; `Slider.Control` holds the
+* `Slider.Track` (with its `Slider.Indicator`) and one `Slider.Thumb` per value. An optional
+* `Slider.Header` wraps `Slider.Label` + `Slider.Value` above the control; a `Slider.ThumbValue` child
+* of a thumb adds a drag readout; `Slider.Marks` / `Slider.Mark` add a tick scale; and `origin` anchors
+* a bipolar fill away from the minimum.
+*
+* The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are
+* exposed through the matching `Slider` namespace — e.g. `Slider.Thumb.Props`.
+*/
+const Slider = {
+	/** Owns the value and the shared `size`. `Slider.Root.props({ size })` → its spreadable prop bag. */
+	Root: Object.assign(SliderRoot, { props: rootProps }),
+	/** The label/value header row. `Slider.Header.props()` → its spreadable prop bag. */
+	Header: Object.assign(SliderHeader, { props: headerProps }),
+	/** The accessible label. `Slider.Label.props()` → its spreadable prop bag. */
+	Label: Object.assign(SliderLabel, { props: labelProps }),
+	/** The formatted value text. `Slider.Value.props()` → its spreadable prop bag. */
+	Value: Object.assign(SliderValue, { props: valueProps }),
+	/** The interactive control row. `Slider.Control.props()` → its spreadable prop bag. */
+	Control: Object.assign(SliderControl, { props: controlProps }),
+	/** The sunken rail. `Slider.Track.props()` → its spreadable prop bag. */
+	Track: Object.assign(SliderTrack, { props: trackProps }),
+	/** The accent fill. `Slider.Indicator.props()` → its spreadable prop bag. */
+	Indicator: Object.assign(SliderIndicator, { props: indicatorProps }),
+	/** A draggable handle. `Slider.Thumb.props()` → its spreadable prop bag for a foreign element. */
+	Thumb: Object.assign(SliderThumb, { props: thumbProps }),
+	/** The opt-in drag readout. `Slider.ThumbValue.props()` → its spreadable prop bag. */
+	ThumbValue: Object.assign(SliderThumbValue, { props: thumbValueProps }),
+	/** The step-tick layer. `Slider.Marks.props()` → its spreadable prop bag. */
+	Marks: Object.assign(SliderMarks, { props: marksProps }),
+	/** A single step tick. `Slider.Mark.props()` → its spreadable prop bag. */
+	Mark: Object.assign(SliderMark, {
+		props: markProps,
+		Label: { props: markLabelProps }
+	})
+};
+//#endregion
+export { Slider };

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

@@ -0,0 +1,72 @@
+import { SliderSize } from "./slider.context.js";
+
+//#region src/components/slider/slider.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `Slider.*.props()` returns. */
+type SliderPartProps = {
+  /** The slot value the matching `slider.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 `Slider.Root.props(...)` — the control size the CSS keys its metrics off. */
+interface SliderRootPropsArgs extends BasePropsArgs {
+  /** Control size — `sm` or `md`. @default "md" */
+  size?: SliderSize;
+}
+/** Argument to a stateless part's `.props(...)` — no variants of its own; metrics flow from the root. */
+type SliderStatelessPropsArgs = BasePropsArgs;
+/** Root prop bag: `data-slot` plus the `data-size` the descendant rules read. */
+declare function rootProps({
+  size,
+  className
+}?: SliderRootPropsArgs): SliderPartProps;
+/** Header prop bag: the baseline row that holds the label and value above the control. */
+declare function headerProps({
+  className
+}?: SliderStatelessPropsArgs): SliderPartProps;
+/** Label prop bag: just the slot anchor. */
+declare function labelProps({
+  className
+}?: SliderStatelessPropsArgs): SliderPartProps;
+/** Value prop bag: just the slot anchor. */
+declare function valueProps({
+  className
+}?: SliderStatelessPropsArgs): SliderPartProps;
+/** Control prop bag: just the slot anchor (metrics flow from the root size). */
+declare function controlProps({
+  className
+}?: SliderStatelessPropsArgs): SliderPartProps;
+/** Track prop bag: just the slot anchor. */
+declare function trackProps({
+  className
+}?: SliderStatelessPropsArgs): SliderPartProps;
+/** Indicator prop bag: just the slot anchor. */
+declare function indicatorProps({
+  className
+}?: SliderStatelessPropsArgs): SliderPartProps;
+/** Thumb prop bag: just the slot anchor (Base UI stamps the live drag/disabled/focus state). */
+declare function thumbProps({
+  className
+}?: SliderStatelessPropsArgs): SliderPartProps;
+/** Thumb-value prop bag: the drag readout bubble (decorative — `aria-hidden`, shown on drag/focus). */
+declare function thumbValueProps({
+  className
+}?: SliderStatelessPropsArgs): SliderPartProps;
+/** Marks prop bag: the container layered over the control that positions the step ticks. */
+declare function marksProps({
+  className
+}?: SliderStatelessPropsArgs): SliderPartProps;
+/** Mark prop bag: a single step tick (its position + passed state are set inline by the part). */
+declare function markProps({
+  className
+}?: SliderStatelessPropsArgs): SliderPartProps;
+/** Mark-label prop bag: a tick's decorative caption (`aria-hidden`). */
+declare function markLabelProps({
+  className
+}?: SliderStatelessPropsArgs): SliderPartProps;
+//#endregion
+export { SliderPartProps, SliderRootPropsArgs, controlProps, headerProps, indicatorProps, labelProps, markLabelProps, markProps, marksProps, rootProps, thumbProps, thumbValueProps, trackProps, valueProps };