@stridge/noctis 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/components/avatar/avatar.d.ts

@@ -38,7 +38,7 @@ declare function AvatarImage({
 }: Avatar.Image.Props): ReactElement;
 /**
  * Shown when no image loads — initials or a glyph on a static, accent-independent swatch. Pass `seed`
- * (a user id, name, or email) to hash a stable `bg-avatar-N` colour, so the same person always gets the
+ * (a user id, name, or email) to hash a stable `bg-palette-N` colour, so the same person always gets the
  * same hue; omit it for the neutral muted fill. Base UI handles the `delay` before it appears.
  */
 declare function AvatarFallback({
@@ -182,7 +182,7 @@ declare namespace Avatar {
   }
   namespace Fallback {
     type Props = avatar_d_exports.Avatar.Fallback.Props & {
-      /** A stable identifier hashed to one of ten `bg-avatar-N` swatches; omit for the neutral muted fill. */seed?: string;
+      /** A stable identifier hashed to one of ten `bg-palette-N` swatches; omit for the neutral muted fill. */seed?: string;
     };
     type State = avatar_d_exports.Avatar.Fallback.State;
     /** Argument to the `Avatar.Fallback.props(...)` escape-hatch helper. */

package/dist/components/avatar/avatar.js

@@ -72,7 +72,7 @@ function AvatarImage({ onLoadingStatusChange, className, ...props }) {
 }
 /**
 * Shown when no image loads — initials or a glyph on a static, accent-independent swatch. Pass `seed`
-* (a user id, name, or email) to hash a stable `bg-avatar-N` colour, so the same person always gets the
+* (a user id, name, or email) to hash a stable `bg-palette-N` colour, so the same person always gets the
 * same hue; omit it for the neutral muted fill. Base UI handles the `delay` before it appears.
 */
 function AvatarFallback({ seed, className, children, ...props }) {

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

@@ -28,7 +28,7 @@ type AvatarStatelessPropsArgs = BasePropsArgs;
 /** Argument to `Avatar.Fallback.props(...)` — the seed that selects the static swatch the fill reads. */
 interface AvatarFallbackPropsArgs extends BasePropsArgs {
   /**
-   * A stable identifier (a user id, name, or email) hashed to one of the ten `bg-avatar-N` swatches,
+   * A stable identifier (a user id, name, or email) hashed to one of the ten `bg-palette-N` swatches,
    * so the same person always lands on the same colour. Omit to fall back to the neutral muted fill.
    */
   seed?: string;

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

@@ -16,7 +16,7 @@ declare enum AvatarDataAttributes {
   size = "data-size",
   /** The shape — `circle` (default, fully round) | `rounded` (rounded corners). */
   shape = "data-shape",
-  /** `1`–`10`, the stable hashed swatch index the fallback fill reads its `bg-avatar-N` role from. */
+  /** `1`–`10`, the stable hashed swatch index the fallback fill reads its `bg-palette-N` role from. */
   avatarIndex = "data-avatar-index",
   /** Present when the avatar is dimmed/inactive — gates interactive states and applies the disabled opacity. */
   disabled = "data-disabled",

package/dist/components/avatar/avatar.slots.js

@@ -29,7 +29,7 @@ let AvatarDataAttributes = /* @__PURE__ */ function(AvatarDataAttributes) {
 	AvatarDataAttributes["size"] = "data-size";
 	/** The shape — `circle` (default, fully round) | `rounded` (rounded corners). */
 	AvatarDataAttributes["shape"] = "data-shape";
-	/** `1`–`10`, the stable hashed swatch index the fallback fill reads its `bg-avatar-N` role from. */
+	/** `1`–`10`, the stable hashed swatch index the fallback fill reads its `bg-palette-N` role from. */
 	AvatarDataAttributes["avatarIndex"] = "data-avatar-index";
 	/** Present when the avatar is dimmed/inactive — gates interactive states and applies the disabled opacity. */
 	AvatarDataAttributes["disabled"] = "data-disabled";

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,114 @@
+import { BadgeSize, BadgeTone, BadgeVariant } from "./badge.types.js";
+import { BadgePartProps, BadgeRootPropsArgs, BadgeStatelessPropsArgs, dotProps, iconProps, rootProps } from "./badge.props.js";
+import { ComponentProps, ReactElement } from "react";
+
+//#region src/components/badge/badge.d.ts
+/**
+ * A small label for status, categorization, or metadata — a pill chip that sits inline with text or in
+ * a row of its own. The look is two orthogonal axes: `variant` is the emphasis (a filled `solid`, a
+ * quiet `soft` tint, or a transparent `outline`) and `tone` is the colour identity (the six semantic
+ * tones — `neutral`/`accent` and the four statuses — plus eight accent-independent decorative hues for
+ * categorization). Compose a leading `Badge.Dot` for an at-a-glance status dot or a `Badge.Icon` for a
+ * glyph; both inherit the chip's text colour so they stay legible in every variant.
+ *
+ * Decorative and accent-independent: the styling is precompiled CSS keyed off the `data-slot` anchor
+ * (`badge.css`), and the colour grid reads the semantic roles and the shared categorical palette directly, so a
+ * retheme propagates and a categorical tone never re-derives off the accent. Renders a `<span>` by
+ * default; spread `Badge.Root.props(...)` onto an `<a>` (or any element) to style it as a chip.
+ *
+ * @see {@link Badge.Root.Props}
+ */
+declare function BadgeRoot({
+  variant,
+  tone,
+  size,
+  className,
+  ...props
+}: Badge.Root.Props): ReactElement;
+/**
+ * An optional leading status dot. Decorative by default (`aria-hidden`) — the chip's label carries the
+ * meaning — so it is never a colour-only signal; pair a label like "Online" with it. Fills with the
+ * chip's `currentColor`, so it reads as a knockout on a `solid` chip and as the saturated tone on a
+ * `soft`/`outline` one.
+ */
+declare function BadgeDot({
+  className,
+  ...props
+}: Badge.Dot.Props): ReactElement;
+/**
+ * An optional leading icon. Clamps its glyph to the chip's icon size and inherits the chip's text
+ * colour. Decorative by default (`aria-hidden`); wrap an `<Icon>` or any inline svg inside it — don't
+ * put `data-slot` on the icon itself, which would drop its own token sizing.
+ */
+declare function BadgeIcon({
+  className,
+  children,
+  ...props
+}: Badge.Icon.Props): ReactElement;
+/**
+ * A small status/label chip. `Badge.Root` owns the pill and its `variant` (emphasis) + `tone` (colour)
+ * + `size`; compose a leading `Badge.Dot` (a status dot) or `Badge.Icon` (a glyph) before the label.
+ *
+ * The runtime compound is a plain object (kept tree-shakeable); per-part prop types are exposed through
+ * the matching `Badge` namespace — e.g. `Badge.Root.Props`.
+ */
+declare const Badge: {
+  /** Owns the pill + its variant/tone/size. `Badge.Root.props({ variant, tone, size })` → its prop bag. */Root: typeof BadgeRoot & {
+    props: typeof rootProps;
+  }; /** A leading status dot (decorative). `Badge.Dot.props()` → its spreadable prop bag. */
+  Dot: typeof BadgeDot & {
+    props: typeof dotProps;
+  }; /** A leading icon glyph (decorative). `Badge.Icon.props()` → its spreadable prop bag. */
+  Icon: typeof BadgeIcon & {
+    props: typeof iconProps;
+  };
+};
+/**
+ * Per-part prop types. Types-only — it emits no runtime code and merges with the `Badge` object above,
+ * so `Badge.Root` is the component value while `Badge.Root.Props` is its prop type.
+ */
+declare namespace Badge {
+  /** Emphasis axis — `solid` | `soft` | `outline`. */
+  type Variant = BadgeVariant;
+  /** Colour identity — a semantic tone or a decorative hue. */
+  type Tone = BadgeTone;
+  /** Chip scale — `sm` | `md`. */
+  type Size = BadgeSize;
+  /** The spreadable data-attribute prop bag every `Badge.*.props()` returns (D12). */
+  type PartProps = BadgePartProps;
+  namespace Root {
+    type Props = ComponentProps<"span"> & {
+      /**
+       * Emphasis — a filled `solid` chip, a quiet `soft` tint, a transparent `outline`, or a
+       * neutral `dot` chip whose only colour is its leading `Badge.Dot`.
+       * @default "soft"
+       */
+      variant?: BadgeVariant;
+      /**
+       * Colour identity — a semantic tone (`neutral`/`accent`/`success`/`warning`/`danger`/`info`)
+       * or a decorative hue (`red`…`pink`) for categorization.
+       * @default "neutral"
+       */
+      tone?: BadgeTone;
+      /**
+       * Chip scale.
+       * @default "md"
+       */
+      size?: BadgeSize;
+    };
+    /** Argument to the `Badge.Root.props(...)` escape-hatch helper. */
+    type PropsArgs = BadgeRootPropsArgs;
+  }
+  namespace Dot {
+    type Props = ComponentProps<"span">;
+    /** Argument to the `Badge.Dot.props(...)` escape-hatch helper. */
+    type PropsArgs = BadgeStatelessPropsArgs;
+  }
+  namespace Icon {
+    type Props = ComponentProps<"span">;
+    /** Argument to the `Badge.Icon.props(...)` escape-hatch helper. */
+    type PropsArgs = BadgeStatelessPropsArgs;
+  }
+}
+//#endregion
+export { Badge };

package/dist/components/badge/badge.js

@@ -0,0 +1,74 @@
+import { BADGE_SLOTS } from "./badge.slots.js";
+import { dotProps, iconProps, rootProps } from "./badge.props.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/badge/badge.tsx
+/**
+* A small label for status, categorization, or metadata — a pill chip that sits inline with text or in
+* a row of its own. The look is two orthogonal axes: `variant` is the emphasis (a filled `solid`, a
+* quiet `soft` tint, or a transparent `outline`) and `tone` is the colour identity (the six semantic
+* tones — `neutral`/`accent` and the four statuses — plus eight accent-independent decorative hues for
+* categorization). Compose a leading `Badge.Dot` for an at-a-glance status dot or a `Badge.Icon` for a
+* glyph; both inherit the chip's text colour so they stay legible in every variant.
+*
+* Decorative and accent-independent: the styling is precompiled CSS keyed off the `data-slot` anchor
+* (`badge.css`), and the colour grid reads the semantic roles and the shared categorical palette directly, so a
+* retheme propagates and a categorical tone never re-derives off the accent. Renders a `<span>` by
+* default; spread `Badge.Root.props(...)` onto an `<a>` (or any element) to style it as a chip.
+*
+* @see {@link Badge.Root.Props}
+*/
+function BadgeRoot({ variant = "soft", tone = "neutral", size = "md", className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": BADGE_SLOTS.root,
+		"data-variant": variant,
+		"data-tone": tone,
+		"data-size": size,
+		className,
+		...props
+	});
+}
+/**
+* An optional leading status dot. Decorative by default (`aria-hidden`) — the chip's label carries the
+* meaning — so it is never a colour-only signal; pair a label like "Online" with it. Fills with the
+* chip's `currentColor`, so it reads as a knockout on a `solid` chip and as the saturated tone on a
+* `soft`/`outline` one.
+*/
+function BadgeDot({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": BADGE_SLOTS.dot,
+		"aria-hidden": true,
+		className,
+		...props
+	});
+}
+/**
+* An optional leading icon. Clamps its glyph to the chip's icon size and inherits the chip's text
+* colour. Decorative by default (`aria-hidden`); wrap an `<Icon>` or any inline svg inside it — don't
+* put `data-slot` on the icon itself, which would drop its own token sizing.
+*/
+function BadgeIcon({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": BADGE_SLOTS.icon,
+		"aria-hidden": true,
+		className,
+		...props,
+		children
+	});
+}
+/**
+* A small status/label chip. `Badge.Root` owns the pill and its `variant` (emphasis) + `tone` (colour)
+* + `size`; compose a leading `Badge.Dot` (a status dot) or `Badge.Icon` (a glyph) before the label.
+*
+* The runtime compound is a plain object (kept tree-shakeable); per-part prop types are exposed through
+* the matching `Badge` namespace — e.g. `Badge.Root.Props`.
+*/
+const Badge = {
+	/** Owns the pill + its variant/tone/size. `Badge.Root.props({ variant, tone, size })` → its prop bag. */
+	Root: Object.assign(BadgeRoot, { props: rootProps }),
+	/** A leading status dot (decorative). `Badge.Dot.props()` → its spreadable prop bag. */
+	Dot: Object.assign(BadgeDot, { props: dotProps }),
+	/** A leading icon glyph (decorative). `Badge.Icon.props()` → its spreadable prop bag. */
+	Icon: Object.assign(BadgeIcon, { props: iconProps })
+};
+//#endregion
+export { Badge };

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

@@ -0,0 +1,42 @@
+import { BadgeSize, BadgeTone, BadgeVariant } from "./badge.types.js";
+
+//#region src/components/badge/badge.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `Badge.*.props()` returns. */
+type BadgePartProps = {
+  /** The slot value the matching `badge.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 (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 `Badge.Root.props(...)` — the chip's variant + tone + size. */
+interface BadgeRootPropsArgs extends BasePropsArgs {
+  /** Emphasis — `solid` (filled) | `soft` (tint) | `outline` (edge) | `dot` (neutral chip, coloured dot). @default "soft" */
+  variant?: BadgeVariant;
+  /** Colour identity — a semantic tone or a decorative hue. @default "neutral" */
+  tone?: BadgeTone;
+  /** Chip scale. @default "md" */
+  size?: BadgeSize;
+}
+/** Argument to a stateless part's `.props(...)` — no recipe of its own; colour flows from the root. */
+type BadgeStatelessPropsArgs = BasePropsArgs;
+/** Root prop bag: `data-slot` plus the `data-variant`/`data-tone`/`data-size` the colour grid reads. */
+declare function rootProps({
+  variant,
+  tone,
+  size,
+  className
+}?: BadgeRootPropsArgs): BadgePartProps;
+/** Dot prop bag: just the slot anchor (it fills with the chip's `currentColor`). */
+declare function dotProps({
+  className
+}?: BadgeStatelessPropsArgs): BadgePartProps;
+/** Icon prop bag: just the slot anchor (the glyph is clamped to the chip's icon size and inherits its colour). */
+declare function iconProps({
+  className
+}?: BadgeStatelessPropsArgs): BadgePartProps;
+//#endregion
+export { BadgePartProps, BadgeRootPropsArgs, BadgeStatelessPropsArgs, dotProps, iconProps, rootProps };

package/dist/components/badge/badge.props.js

@@ -0,0 +1,42 @@
+import { BADGE_SLOTS } from "./badge.slots.js";
+//#region src/components/badge/badge.props.ts
+/**
+* The D12 unified variant contract for Badge — the data-attribute-native styling helpers.
+*
+* Each compound part exposes a `props(...)` builder returning a **spreadable props object** of the form
+* `{ "data-slot": "noctis-badge-<part>", ...dataAttrs }`, derived from the part's variant/tone/size
+* inputs. Under the single-`data-slot` anchor model the `data-slot` is the only styling hook needed —
+* `badge.css` keys every rule off it plus the `data-*` recipe — so spreading a part's `props()` onto a
+* *foreign* element styles it as that part:
+*
+*     <a {...Badge.Root.props({ tone: "success" })} href="/status">Live</a>
+*     // → <a data-slot="noctis-badge" data-variant="soft" data-tone="success" data-size="md">
+*
+* The escape hatch carries no className (styling is attribute-driven); an optional `className`
+* passthrough is accepted and forwarded verbatim. The same variant→data-attribute→values mapping is
+* emitted as data from the token graph (`generated/declarations.json` → `variantSchema`) so non-React /
+* agent consumers can hand-write the markup from the docs.
+*/
+const withClassName = (bag, className) => className === void 0 ? bag : {
+	...bag,
+	className
+};
+/** Root prop bag: `data-slot` plus the `data-variant`/`data-tone`/`data-size` the colour grid reads. */
+function rootProps({ variant = "soft", tone = "neutral", size = "md", className } = {}) {
+	return withClassName({
+		"data-slot": BADGE_SLOTS.root,
+		"data-variant": variant,
+		"data-tone": tone,
+		"data-size": size
+	}, className);
+}
+/** Dot prop bag: just the slot anchor (it fills with the chip's `currentColor`). */
+function dotProps({ className } = {}) {
+	return withClassName({ "data-slot": BADGE_SLOTS.dot }, className);
+}
+/** Icon prop bag: just the slot anchor (the glyph is clamped to the chip's icon size and inherits its colour). */
+function iconProps({ className } = {}) {
+	return withClassName({ "data-slot": BADGE_SLOTS.icon }, className);
+}
+//#endregion
+export { dotProps, iconProps, rootProps };

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

@@ -0,0 +1,19 @@
+//#region src/components/badge/badge.slots.d.ts
+/**
+ * The `data-*` hooks `Badge` stamps on its parts, for host-side styling and tests. The slot values
+ * mark each rendered element; the `data-variant`/`data-tone`/`data-size` axes carry the recipe the
+ * precompiled `badge.css` keys its colour grid and per-size metrics off. The dot and icon take no
+ * axis of their own — they ride the chip's `currentColor`, so they stay legible in every variant.
+ */
+declare enum BadgeDataAttributes {
+  /** The root chip element. */
+  slot = "data-slot",
+  /** The emphasis — `solid` (filled) | `soft` (tint, default) | `outline` (transparent, coloured edge). */
+  variant = "data-variant",
+  /** The colour identity — a semantic tone (`neutral`…`info`) or a decorative hue (`red`…`pink`). */
+  tone = "data-tone",
+  /** The chip scale — `sm` | `md` (default); the generated layer keys the per-size internals off it. */
+  size = "data-size"
+}
+//#endregion
+export { BadgeDataAttributes };

package/dist/components/badge/badge.slots.js

@@ -0,0 +1,30 @@
+//#region src/components/badge/badge.slots.ts
+/**
+* The slot vocabulary every `Badge` part stamps as its `data-slot`. The authored source the
+* orchestration file reads from, kebab-cased `{component}[-{part}]` under the `noctis-` prefix;
+* SLOTS.md still generates from the token-graph declarations.
+*/
+const BADGE_SLOTS = {
+	root: "noctis-badge",
+	dot: "noctis-badge-dot",
+	icon: "noctis-badge-icon"
+};
+/**
+* The `data-*` hooks `Badge` stamps on its parts, for host-side styling and tests. The slot values
+* mark each rendered element; the `data-variant`/`data-tone`/`data-size` axes carry the recipe the
+* precompiled `badge.css` keys its colour grid and per-size metrics off. The dot and icon take no
+* axis of their own — they ride the chip's `currentColor`, so they stay legible in every variant.
+*/
+let BadgeDataAttributes = /* @__PURE__ */ function(BadgeDataAttributes) {
+	/** The root chip element. */
+	BadgeDataAttributes["slot"] = "data-slot";
+	/** The emphasis — `solid` (filled) | `soft` (tint, default) | `outline` (transparent, coloured edge). */
+	BadgeDataAttributes["variant"] = "data-variant";
+	/** The colour identity — a semantic tone (`neutral`…`info`) or a decorative hue (`red`…`pink`). */
+	BadgeDataAttributes["tone"] = "data-tone";
+	/** The chip scale — `sm` | `md` (default); the generated layer keys the per-size internals off it. */
+	BadgeDataAttributes["size"] = "data-size";
+	return BadgeDataAttributes;
+}({});
+//#endregion
+export { BADGE_SLOTS, BadgeDataAttributes };

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

@@ -0,0 +1,24 @@
+//#region src/components/badge/badge.types.d.ts
+/**
+ * The variant/tone/size vocabulary `Badge` paints. Authored source of truth since styling is
+ * precompiled in `badge.css`. Types-only: no runtime code, so it never participates in the styling
+ * layer.
+ */
+/**
+ * A badge's emphasis — a filled `solid` chip, a quiet `soft` tint, a transparent `outline` with a
+ * coloured edge, or a neutral `dot` chip whose only colour is its leading status dot (the rest of the
+ * chip stays neutral). Crossed with {@link BadgeTone} to form the colour grid.
+ */
+type BadgeVariant = "solid" | "soft" | "outline" | "dot";
+/**
+ * A badge's colour identity. The six **semantic** tones carry meaning — `neutral` (the default
+ * metadata chip), `accent`, and the four statuses `success`/`warning`/`danger`/`info`. The eight
+ * **decorative** tones (`red`/`orange`/`amber`/`green`/`teal`/`blue`/`purple`/`pink`) are
+ * accent-independent category colours drawn from the shared categorical palette — use them to distinguish
+ * categories, not to signal status.
+ */
+type BadgeTone = "neutral" | "accent" | "success" | "warning" | "danger" | "info" | "red" | "orange" | "amber" | "green" | "teal" | "blue" | "purple" | "pink";
+/** A badge's chip scale — `sm` (the inline-with-text chip) or `md` (the default). */
+type BadgeSize = "sm" | "md";
+//#endregion
+export { BadgeSize, BadgeTone, BadgeVariant };

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

@@ -0,0 +1,3 @@
+import { BadgeSize, BadgeTone, BadgeVariant } from "./badge.types.js";
+import { Badge } from "./badge.js";
+import { BadgeDataAttributes } from "./badge.slots.js";

package/dist/components/sheet/sheet-stack.js

@@ -1,6 +1,6 @@
 "use client";
 import { Sheet } from "./sheet.js";
-import { createContext, use, useMemo, useReducer, useRef } from "react";
+import { createContext, use, useEffect, useMemo, useReducer, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/sheet/sheet-stack.tsx
 /** The empty stack. */
@@ -111,25 +111,43 @@ function useSheetStackContext() {
 	if (!manager) throw new Error("useSheetStackContext must be used within <SheetStack>.");
 	return manager;
 }
-/** Render layers from `index` down, each nested inside the one before it so the stack reads as depth. */
-function renderLayer(entries, index, manager) {
-	if (index >= entries.length) return null;
-	const entry = entries[index];
-	if (!entry) return null;
+/**
+* One stacked layer. A `manager.push` adds the entry already `open`, so handing that straight to
+* `Sheet.Root` would mount Base UI's dialog in the open state and skip its enter transition — the panel
+* would snap in with no slide. Instead the root mounts closed and flips to the entry's visibility on the
+* first commit, so Base UI runs the closed→open transition and the layer animates in like a
+* trigger-opened sheet. After that the local state tracks `entry.open`, so `pop`/`close` animate out too.
+*/
+function SheetStackLayer({ entry, manager, children }) {
+	const [open, setOpen] = useState(false);
+	useEffect(() => {
+		setOpen(entry.open);
+	}, [entry.open]);
 	return /* @__PURE__ */ jsx(Sheet.Root, {
-		open: entry.open,
-		onOpenChange: (open) => {
-			/* v8 ignore next -- open===true never fires: layers are opened via the controlled `open` prop (manager.push), never by Base UI requesting open on a triggerless stack root */
-			if (!open) manager.close(entry.key);
+		open,
+		onOpenChange: (next) => {
+			/* v8 ignore next -- next===true never fires: layers open via the controlled `open` prop (manager.push), never by Base UI requesting open on a triggerless stack root */
+			if (!next) manager.close(entry.key);
 		},
-		onOpenChangeComplete: (open) => {
-			if (!open) manager.remove(entry.key);
+		onOpenChangeComplete: (next) => {
+			if (!next) manager.remove(entry.key);
 		},
 		children: /* @__PURE__ */ jsxs(Sheet.Content, {
 			side: entry.side,
 			size: entry.size,
-			children: [entry.content, renderLayer(entries, index + 1, manager)]
+			children: [entry.content, children]
 		})
+	});
+}
+/** Render layers from `index` down, each nested inside the one before it so the stack reads as depth. */
+function renderLayer(entries, index, manager) {
+	if (index >= entries.length) return null;
+	const entry = entries[index];
+	if (!entry) return null;
+	return /* @__PURE__ */ jsx(SheetStackLayer, {
+		entry,
+		manager,
+		children: renderLayer(entries, index + 1, manager)
 	}, entry.key);
 }
 /**

package/dist/index.d.ts

@@ -11,6 +11,9 @@ import { AlertDialog } from "./components/alert-dialog/alert-dialog.js";
 import { AlertDialogDataAttributes } from "./components/alert-dialog/alert-dialog.slots.js";
 import { Avatar } from "./components/avatar/avatar.js";
 import { AvatarDataAttributes } from "./components/avatar/avatar.slots.js";
+import { BadgeSize, BadgeTone, BadgeVariant } from "./components/badge/badge.types.js";
+import { Badge } from "./components/badge/badge.js";
+import { BadgeDataAttributes } from "./components/badge/badge.slots.js";
 import { Button } from "./components/button/button.js";
 import { ButtonDataAttributes } from "./components/button/button.slots.js";
 import { mergeProps, useRender } from "./core/render.js";
@@ -123,4 +126,4 @@ import { NoctisProvider } from "./core/noctis-provider.js";
 /** Package identifier — the workspace-resolution marker consumed by the app scaffold. */
 declare const UI_PACKAGE: "@stridge/noctis";
 //#endregion
-export { Accordion, AccordionDataAttributes, type AccordionLevel, type AccordionSize, AlertDialog, type AlertDialogActionTone, AlertDialogDataAttributes, Autocomplete, AutocompleteDataAttributes, type AutocompleteSize, Avatar, AvatarDataAttributes, BrandLogo, Button, ButtonDataAttributes, ButtonGroup, ButtonGroupDataAttributes, Checkbox, CheckboxDataAttributes, CheckboxGroup, type ClassNameProp, CodeBlock, CodeBlockDataAttributes, Collapsible, CollapsibleDataAttributes, type ColorFormat, ColorPicker, type ColorPickerLabels, ColorSwatch, ColorSwatchPicker, Combobox, ComboboxDataAttributes, ContextMenu, ContextMenuDataAttributes, CopyButton, CopyButtonDataAttributes, Dialog, DialogDataAttributes, EMPTY_SHEET_STACK, Field, FieldDataAttributes, Fieldset, Form, Icon, type IconGlyph, InlineCode, Input, type InputAdornmentSide, type InputAdornmentVariant, InputDataAttributes, type InputSize, Kbd, Menu, MenuDataAttributes, Menubar, MenubarDataAttributes, Meter, MeterDataAttributes, NavigationMenu, NavigationMenuDataAttributes, NoctisProvider, NumberField, NumberFieldDataAttributes, OtpField, OtpFieldDataAttributes, type OtpFieldSize, type PackageManager, Popover, PopoverDataAttributes, PreviewCard, PreviewCardDataAttributes, Primitive, Progress, ProgressDataAttributes, type ProgressSize, RADIUS_PRESETS, Radio, RadioDataAttributes, RadiusScope, Rail, RailDataAttributes, ScrollArea, ScrollAreaDataAttributes, SearchDialog, SearchDialogDataAttributes, type SearchResult, Select, SelectDataAttributes, Separator, SeparatorDataAttributes, Sheet, SheetStack, type SheetStackEntry, type SheetStackEntryInput, type SheetStackManager, Slider, SliderDataAttributes, type SliderSize, Surface, Switch, SwitchDataAttributes, Table, Tabs, TabsDataAttributes, Textarea, TextareaDataAttributes, type TextareaSize, Toast, ToastDataAttributes, type ToastManager, type ToastObject, type ToastOptions, type ToastPlacement, type ToastPromiseOptions, type ToastStatusOptions, type ToastType, type ToastUpdateOptions, Toggle, ToggleDataAttributes, ToggleGroup, Toolbar, ToolbarDataAttributes, Tooltip, TooltipDataAttributes, UI_PACKAGE, VisuallyHidden, mergeClassName, mergeProps, sheetStackReducer, useCopy, useReducedMotion, useRender, useSheetStack, useSheetStackContext, useToast };
+export { Accordion, AccordionDataAttributes, type AccordionLevel, type AccordionSize, AlertDialog, type AlertDialogActionTone, AlertDialogDataAttributes, Autocomplete, AutocompleteDataAttributes, type AutocompleteSize, Avatar, AvatarDataAttributes, Badge, BadgeDataAttributes, type BadgeSize, type BadgeTone, type BadgeVariant, BrandLogo, Button, ButtonDataAttributes, ButtonGroup, ButtonGroupDataAttributes, Checkbox, CheckboxDataAttributes, CheckboxGroup, type ClassNameProp, CodeBlock, CodeBlockDataAttributes, Collapsible, CollapsibleDataAttributes, type ColorFormat, ColorPicker, type ColorPickerLabels, ColorSwatch, ColorSwatchPicker, Combobox, ComboboxDataAttributes, ContextMenu, ContextMenuDataAttributes, CopyButton, CopyButtonDataAttributes, Dialog, DialogDataAttributes, EMPTY_SHEET_STACK, Field, FieldDataAttributes, Fieldset, Form, Icon, type IconGlyph, InlineCode, Input, type InputAdornmentSide, type InputAdornmentVariant, InputDataAttributes, type InputSize, Kbd, Menu, MenuDataAttributes, Menubar, MenubarDataAttributes, Meter, MeterDataAttributes, NavigationMenu, NavigationMenuDataAttributes, NoctisProvider, NumberField, NumberFieldDataAttributes, OtpField, OtpFieldDataAttributes, type OtpFieldSize, type PackageManager, Popover, PopoverDataAttributes, PreviewCard, PreviewCardDataAttributes, Primitive, Progress, ProgressDataAttributes, type ProgressSize, RADIUS_PRESETS, Radio, RadioDataAttributes, RadiusScope, Rail, RailDataAttributes, ScrollArea, ScrollAreaDataAttributes, SearchDialog, SearchDialogDataAttributes, type SearchResult, Select, SelectDataAttributes, Separator, SeparatorDataAttributes, Sheet, SheetStack, type SheetStackEntry, type SheetStackEntryInput, type SheetStackManager, Slider, SliderDataAttributes, type SliderSize, Surface, Switch, SwitchDataAttributes, Table, Tabs, TabsDataAttributes, Textarea, TextareaDataAttributes, type TextareaSize, Toast, ToastDataAttributes, type ToastManager, type ToastObject, type ToastOptions, type ToastPlacement, type ToastPromiseOptions, type ToastStatusOptions, type ToastType, type ToastUpdateOptions, Toggle, ToggleDataAttributes, ToggleGroup, Toolbar, ToolbarDataAttributes, Tooltip, TooltipDataAttributes, UI_PACKAGE, VisuallyHidden, mergeClassName, mergeProps, sheetStackReducer, useCopy, useReducedMotion, useRender, useSheetStack, useSheetStackContext, useToast };

package/dist/index.js

@@ -10,6 +10,8 @@ import { AlertDialogDataAttributes } from "./components/alert-dialog/alert-dialo
 import { AlertDialog } from "./components/alert-dialog/alert-dialog.js";
 import { AvatarDataAttributes } from "./components/avatar/avatar.slots.js";
 import { Avatar } from "./components/avatar/avatar.js";
+import { BadgeDataAttributes } from "./components/badge/badge.slots.js";
+import { Badge } from "./components/badge/badge.js";
 import { ButtonDataAttributes } from "./components/button/button.slots.js";
 import { Button } from "./components/button/button.js";
 import { ColorPicker } from "./components/color-picker/color-picker.js";
@@ -109,4 +111,4 @@ import { NoctisProvider } from "./core/noctis-provider.js";
 /** Package identifier — the workspace-resolution marker consumed by the app scaffold. */
 const UI_PACKAGE = "@stridge/noctis";
 //#endregion
-export { Accordion, AccordionDataAttributes, AlertDialog, AlertDialogDataAttributes, Autocomplete, AutocompleteDataAttributes, Avatar, AvatarDataAttributes, BrandLogo, Button, ButtonDataAttributes, ButtonGroup, ButtonGroupDataAttributes, Checkbox, CheckboxDataAttributes, CheckboxGroup, CodeBlock, CodeBlockDataAttributes, Collapsible, CollapsibleDataAttributes, ColorPicker, ColorSwatch, ColorSwatchPicker, Combobox, ComboboxDataAttributes, ContextMenu, ContextMenuDataAttributes, CopyButton, CopyButtonDataAttributes, Dialog, DialogDataAttributes, EMPTY_SHEET_STACK, Field, FieldDataAttributes, Fieldset, Form, Icon, InlineCode, Input, InputDataAttributes, Kbd, Menu, MenuDataAttributes, Menubar, MenubarDataAttributes, Meter, MeterDataAttributes, NavigationMenu, NavigationMenuDataAttributes, NoctisProvider, NumberField, NumberFieldDataAttributes, OtpField, OtpFieldDataAttributes, Popover, PopoverDataAttributes, PreviewCard, PreviewCardDataAttributes, Primitive, Progress, ProgressDataAttributes, RADIUS_PRESETS, Radio, RadioDataAttributes, RadiusScope, Rail, RailDataAttributes, ScrollArea, ScrollAreaDataAttributes, SearchDialog, SearchDialogDataAttributes, Select, SelectDataAttributes, Separator, SeparatorDataAttributes, Sheet, SheetStack, Slider, SliderDataAttributes, Surface, Switch, SwitchDataAttributes, Table, Tabs, TabsDataAttributes, Textarea, TextareaDataAttributes, Toast, ToastDataAttributes, Toggle, ToggleDataAttributes, ToggleGroup, Toolbar, ToolbarDataAttributes, Tooltip, TooltipDataAttributes, UI_PACKAGE, VisuallyHidden, mergeClassName, mergeProps, sheetStackReducer, useCopy, useReducedMotion, useRender, useSheetStack, useSheetStackContext, useToast };
+export { Accordion, AccordionDataAttributes, AlertDialog, AlertDialogDataAttributes, Autocomplete, AutocompleteDataAttributes, Avatar, AvatarDataAttributes, Badge, BadgeDataAttributes, BrandLogo, Button, ButtonDataAttributes, ButtonGroup, ButtonGroupDataAttributes, Checkbox, CheckboxDataAttributes, CheckboxGroup, CodeBlock, CodeBlockDataAttributes, Collapsible, CollapsibleDataAttributes, ColorPicker, ColorSwatch, ColorSwatchPicker, Combobox, ComboboxDataAttributes, ContextMenu, ContextMenuDataAttributes, CopyButton, CopyButtonDataAttributes, Dialog, DialogDataAttributes, EMPTY_SHEET_STACK, Field, FieldDataAttributes, Fieldset, Form, Icon, InlineCode, Input, InputDataAttributes, Kbd, Menu, MenuDataAttributes, Menubar, MenubarDataAttributes, Meter, MeterDataAttributes, NavigationMenu, NavigationMenuDataAttributes, NoctisProvider, NumberField, NumberFieldDataAttributes, OtpField, OtpFieldDataAttributes, Popover, PopoverDataAttributes, PreviewCard, PreviewCardDataAttributes, Primitive, Progress, ProgressDataAttributes, RADIUS_PRESETS, Radio, RadioDataAttributes, RadiusScope, Rail, RailDataAttributes, ScrollArea, ScrollAreaDataAttributes, SearchDialog, SearchDialogDataAttributes, Select, SelectDataAttributes, Separator, SeparatorDataAttributes, Sheet, SheetStack, Slider, SliderDataAttributes, Surface, Switch, SwitchDataAttributes, Table, Tabs, TabsDataAttributes, Textarea, TextareaDataAttributes, Toast, ToastDataAttributes, Toggle, ToggleDataAttributes, ToggleGroup, Toolbar, ToolbarDataAttributes, Tooltip, TooltipDataAttributes, UI_PACKAGE, VisuallyHidden, mergeClassName, mergeProps, sheetStackReducer, useCopy, useReducedMotion, useRender, useSheetStack, useSheetStackContext, useToast };