@ngrok/mantle 0.82.1 → 0.83.1

package/dist/avatar.d.ts

@@ -0,0 +1,319 @@
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
+import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
+import { ComponentProps, ReactEventHandler, ReactNode } from "react";
+//#region src/components/avatar/avatar.d.ts
+/**
+ * The shape an `Avatar.Root` renders as. Circles read as people, rounded
+ * squares as the things people belong to — accounts, workspaces, teams,
+ * organizations. Keeping the two shapes visually distinct is the point: a
+ * switcher row showing both at once stays legible without labels.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/avatar
+ *
+ * @example
+ * ```tsx
+ * <Avatar.Root appearance="square" colorSeed="acc_123">
+ *   <Avatar.Fallback name="Acme Corp" />
+ * </Avatar.Root>
+ * ```
+ */
+type AvatarAppearance = "circle" | "square";
+/**
+ * The props for `Avatar.Root`. A `<span>`'s props — so `className`, `style`,
+ * `ref`, `asChild`, and any `data-*` or `aria-*` reach the rendered element —
+ * plus the shape and swatch this root owns.
+ */
+type AvatarRootProps = ComponentProps<"span"> & WithAsChild & WithDataSlot & {
+  /**
+   * The shape to render. `"circle"` for a person, `"square"` for a rounded
+   * square representing an account, workspace, or team.
+   *
+   * @default "circle"
+   */
+  appearance?: AvatarAppearance;
+  /**
+   * A stable identifier — an account id, a user id — that deterministically
+   * selects a background swatch, so the same subject always gets the same
+   * color with nothing persisted. Omit it for a neutral surface, or set your
+   * own `bg-*` class through `className` to opt out entirely.
+   *
+   * Seed it with an **id, not a display name**: names get edited, and a
+   * rename would silently recolor the avatar.
+   */
+  colorSeed?: string;
+};
+/**
+ * A small image representing a person or an account, with a text or icon
+ * fallback for when there is no picture — or before one loads.
+ *
+ * The root sizes and shapes the avatar and paints the surface behind it. It is
+ * `size-7` and `shrink-0` by default: an avatar is a fixed-size visual, and the
+ * flex rows it usually sits in (a switcher row, a table cell, a comment header)
+ * must not be able to squeeze it. Override the size with `className`, which
+ * merges last and wins.
+ *
+ * It renders a `<span>`, not a `<div>`, so it stays valid inside the `<button>`
+ * of a switcher row.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/avatar#avatarroot
+ *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value      | Description                                             |
+ * | -------------- | ---------- | ------------------------------------------------------- |
+ * | `data-slot`    | `"avatar"` | Styling and test-targeting hook, with any forwarded chain ahead of it. |
+ *
+ * @example
+ * ```tsx
+ * <Avatar.Root appearance="square" colorSeed="acc_123">
+ *   <Avatar.Image src="https://example.com/acme.png" alt="" />
+ *   <Avatar.Fallback name="Acme Corp" />
+ * </Avatar.Root>
+ * ```
+ */
+declare const Root: ({ appearance, asChild, className, colorSeed, "data-slot": dataSlot, ...props }: AvatarRootProps) => import("react").JSX.Element;
+/**
+ * The props for `Avatar.Image`. An `<img>`'s props — so `srcSet`, `sizes`,
+ * `loading`, `referrerPolicy`, `crossOrigin`, `className`, `style`, `ref`,
+ * `asChild`, and any `data-*` reach the element — with `alt` promoted to
+ * required.
+ */
+type AvatarImageProps = Omit<ComponentProps<"img">, "alt" | "onError"> & WithAsChild & WithDataSlot & {
+  /**
+   * The image's alternative text. **Required**, deliberately stricter than the
+   * `<img>` element: an avatar is the one image a developer reliably forgets,
+   * and an `<img>` with no `alt` announces its URL.
+   *
+   * Pass `alt=""` when adjacent text already names the subject — the common
+   * case, and the reason this is not just "always pass the name". Pass the name
+   * when the avatar stands alone, and name `Avatar.Root` as well (`role="img"`
+   * + `aria-label`) so the label survives the states where the image is gone.
+   */
+  alt: string;
+  /**
+   * Called when the image fails to load, **before** it unmounts itself.
+   * `preventDefault()` keeps it mounted, for a consumer who would rather retry
+   * a URL than fall back.
+   *
+   * Typed against `HTMLElement` rather than `HTMLImageElement`, because
+   * `asChild` means the element that failed may be a consumer's own.
+   */
+  onError?: ReactEventHandler<HTMLElement>;
+};
+/**
+ * The avatar's picture, layered over `Avatar.Fallback` so the fallback shows
+ * through until the image paints. It is a plain `<img>` in the markup, which is
+ * the whole point: the server renders it, the browser starts fetching while it
+ * parses the HTML, and a cached image is *there* on the first frame — no
+ * hydration, no swap, no flash of initials.
+ *
+ * A failed load unmounts the image and leaves the fallback showing. That covers
+ * every failure the client can observe; one it cannot is a load that fails
+ * *before* hydration, where the error event has already come and gone. There the
+ * browser's own rendering stands, which for `alt=""` is nothing at all — the
+ * fallback shows through — and is one more reason to prefer `alt=""`
+ * whenever adjacent text names the subject.
+ *
+ * `onError` runs first and can `preventDefault()` to keep the image mounted, for
+ * a consumer who would rather retry a URL than fall back. Changing `src` is
+ * always a fresh attempt: only the exact URL that failed stays unmounted.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/avatar#avatarimage
+ *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value            | Description                                             |
+ * | -------------- | ---------------- | ------------------------------------------------------- |
+ * | `data-slot`    | `"avatar-image"` | Styling and test-targeting hook, with any forwarded chain ahead of it. |
+ *
+ * @example
+ * ```tsx
+ * <Avatar.Root appearance="square" colorSeed="acc_123">
+ *   <Avatar.Image src="https://example.com/acme.png" alt="" />
+ *   <Avatar.Fallback name="Acme Corp" />
+ * </Avatar.Root>
+ * ```
+ */
+declare const Image: ({ asChild, className, "data-slot": dataSlot, onError, src, ...props }: AvatarImageProps) => import("react").JSX.Element | null;
+/**
+ * The props for `Avatar.Fallback`. A `<span>`'s props, with the content stated
+ * exactly one way: either `children` you render yourself, or a `name` this part
+ * derives initials from. Passing both would leave the winner to precedence, so
+ * the type forbids it — and `asChild`, which needs a real element to clone,
+ * belongs to the `children` side only.
+ */
+type AvatarFallbackProps = Omit<ComponentProps<"span">, "children"> & WithDataSlot & ({
+  /**
+   * Render this element instead of the fallback's own `<span>`. Only
+   * available beside `children` — there has to be an element to clone.
+   */
+  asChild?: boolean;
+  /**
+   * What to show when there is no image: initials, an icon, anything.
+   * When the content is only the subject's initials, use `name` instead.
+   */
+  children: ReactNode;
+  name?: never;
+} | {
+  asChild?: never;
+  children?: never;
+  /**
+   * The subject's display name, rendered as at most two uppercase
+   * initials — `"Acme Corp"` becomes `"AC"`, a name with no usable
+   * characters becomes `"?"`. Deriving it here keeps one implementation
+   * of a surprisingly fiddly rule (punctuation, code points, and casing
+   * that has to match between server and client).
+   *
+   * Initials derived this way are `aria-hidden`: they abbreviate a name
+   * the page already carries in text beside the avatar. When the avatar
+   * is the only thing naming its subject, name it — `role="img"` plus
+   * `aria-label` on `Avatar.Root` — rather than announcing `"AC"`.
+   */
+  name: string;
+});
+/**
+ * What the avatar shows when there is no picture — initials, an icon, a
+ * monogram. It always renders, sitting *behind* `Avatar.Image`: that is what
+ * makes a loading image show initials instead of an empty box, with no loading
+ * state for anyone to handle. A loaded image covers it, so give a transparent
+ * PNG its own backdrop if you would rather not see initials through it.
+ *
+ * Pass `name` to render the subject's initials, or `children` for anything else.
+ * A fallback is decorative when adjacent text already names the subject, so
+ * unless the avatar is the only label, give an icon child `aria-hidden`.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/avatar#avatarfallback
+ *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value               | Description                                             |
+ * | -------------- | ------------------- | ------------------------------------------------------- |
+ * | `data-slot`    | `"avatar-fallback"` | Styling and test-targeting hook, with any forwarded chain ahead of it. |
+ *
+ * @example
+ * ```tsx
+ * <Avatar.Root appearance="square" colorSeed="acc_123">
+ *   <Avatar.Image src="https://example.com/acme.png" alt="" />
+ *   <Avatar.Fallback name="Acme Corp" />
+ * </Avatar.Root>
+ * ```
+ */
+declare const Fallback: ({ asChild, children, className, "data-slot": dataSlot, name, ...props }: AvatarFallbackProps) => import("react").JSX.Element;
+/**
+ * A small image representing a person or an account, with a text or icon
+ * fallback for when there is no picture — or before one loads.
+ *
+ * `appearance` carries the meaning: `"circle"` for a person, `"square"` (a
+ * rounded square) for an account, workspace, team, or organization. A row that
+ * shows both — an account switcher with the signed-in user's photo beside it —
+ * stays readable without labels because the shapes differ.
+ *
+ * `colorSeed` gives a subject a stable color derived from its id, so the same
+ * account is the same color on every device with nothing stored. Omit it for a
+ * neutral surface.
+ *
+ * The picture is a plain `<img>` layered over the fallback, so the server
+ * renders it and a cached image is on screen in the first frame. There is no
+ * loading state to handle: the fallback is behind, and shows until the
+ * image paints.
+ *
+ * For a person's name and title beside their avatar, compose it with
+ * [MediaObject](https://mantle.ngrok.com/components/structure/media-object).
+ * For the leading visual of a sidebar switcher row, put it inside
+ * [Sidebar.SwitcherTrigger](https://mantle.ngrok.com/components/navigation/sidebar#sidebarswitchertrigger).
+ *
+ * @see https://mantle.ngrok.com/components/data-display/avatar
+ *
+ * @example
+ * Composition:
+ * ```
+ * Avatar.Root
+ * ├── Avatar.Image
+ * └── Avatar.Fallback
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Avatar.Root appearance="square" colorSeed="acc_123">
+ *   <Avatar.Image src="https://example.com/acme.png" alt="" />
+ *   <Avatar.Fallback name="Acme Corp" />
+ * </Avatar.Root>
+ * ```
+ */
+declare const Avatar: {
+  /**
+   * A small image representing a person or an account, with a text or icon
+   * fallback for when there is no picture — or before one loads.
+   *
+   * The root sizes and shapes the avatar and paints the surface behind it. It is
+   * `size-7` and `shrink-0` by default: an avatar is a fixed-size visual, and the
+   * flex rows it usually sits in must not be able to squeeze it. Override the
+   * size with `className`, which merges last and wins. It renders a `<span>`, so
+   * it stays valid inside the `<button>` of a switcher row.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/avatar#avatarroot
+   *
+   * **Data attributes:**
+   *
+   * | Data Attribute | Value      | Description                                             |
+   * | -------------- | ---------- | ------------------------------------------------------- |
+   * | `data-slot`    | `"avatar"` | Styling and test-targeting hook, with any forwarded chain ahead of it. |
+   *
+   * @example
+   * ```tsx
+   * <Avatar.Root appearance="square" colorSeed="acc_123">
+   *   <Avatar.Image src="https://example.com/acme.png" alt="" />
+   *   <Avatar.Fallback name="Acme Corp" />
+   * </Avatar.Root>
+   * ```
+   */
+  readonly Root: typeof Root;
+  /**
+   * The avatar's picture, layered over `Avatar.Fallback` so the fallback shows
+   * through until the image paints. A plain `<img>` in the markup: the server
+   * renders it, and a cached image needs no hydration to appear. A failed load
+   * unmounts it and leaves the fallback showing.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/avatar#avatarimage
+   *
+   * **Data attributes:**
+   *
+   * | Data Attribute | Value            | Description                                             |
+   * | -------------- | ---------------- | ------------------------------------------------------- |
+   * | `data-slot`    | `"avatar-image"` | Styling and test-targeting hook, with any forwarded chain ahead of it. |
+   *
+   * @example
+   * ```tsx
+   * <Avatar.Root appearance="square" colorSeed="acc_123">
+   *   <Avatar.Image src="https://example.com/acme.png" alt="" />
+   *   <Avatar.Fallback name="Acme Corp" />
+   * </Avatar.Root>
+   * ```
+   */
+  readonly Image: typeof Image;
+  /**
+   * What the avatar shows when there is no picture — initials, an icon, a
+   * monogram. It always renders, behind `Avatar.Image`, which is what makes a
+   * loading image show initials rather than an empty box. Pass `name` to render
+   * the subject's initials, or `children` for anything else.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/avatar#avatarfallback
+   *
+   * **Data attributes:**
+   *
+   * | Data Attribute | Value               | Description                                             |
+   * | -------------- | ------------------- | ------------------------------------------------------- |
+   * | `data-slot`    | `"avatar-fallback"` | Styling and test-targeting hook, with any forwarded chain ahead of it. |
+   *
+   * @example
+   * ```tsx
+   * <Avatar.Root appearance="square" colorSeed="acc_123">
+   *   <Avatar.Image src="https://example.com/acme.png" alt="" />
+   *   <Avatar.Fallback name="Acme Corp" />
+   * </Avatar.Root>
+   * ```
+   */
+  readonly Fallback: typeof Fallback;
+};
+//#endregion
+export { Avatar, type AvatarAppearance, type AvatarFallbackProps, type AvatarImageProps, type AvatarRootProps };

package/dist/avatar.js

@@ -0,0 +1 @@
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./data-slot-EM6s2WEU.js";import{t as n}from"./slot-DpNWVci8.js";import{useState as r}from"react";import{jsx as i}from"react/jsx-runtime";const a={circle:`rounded-full`,square:`rounded-md`},o=[`bg-emerald-500`,`bg-gray-500`,`bg-red-500`,`bg-violet-500`,`bg-cyan-500`,`bg-rose-500`,`bg-purple-500`,`bg-fuchsia-500`,`bg-green-500`,`bg-orange-500`,`bg-indigo-500`,`bg-teal-500`,`bg-yellow-500`,`bg-sky-500`,`bg-pink-500`,`bg-blue-500`,`bg-amber-500`];function s(e){let t=5381;for(let n=0;n<e.length;n+=1)t=t*33^e.charCodeAt(n);return t>>>0}function c(e){let t=s(e)%o.length;return o[t]??`bg-neutral-500`}function l(e){return e.replace(/[\p{P}`~!@#$%^&*+|=<>]/gu,``).trim().split(/\s+/).slice(0,2).map(e=>Array.from(e.toUpperCase())[0]??``).join(``)||`?`}const u={Root:({appearance:r=`circle`,asChild:o,className:s,colorSeed:l,"data-slot":u,...d})=>i(o?n:`span`,{className:e(`text-body bg-neutral-500/15 relative flex size-7 shrink-0 items-center justify-center overflow-hidden text-xs font-medium select-none`,a[r],l!=null&&[`text-static-white`,c(l)],s),"data-slot":t(u,`avatar`),...d}),Image:({asChild:a,className:o,"data-slot":s,onError:c,src:l,...u})=>{let[d,f]=r();return l==null||l===``||l===d?null:i(a?n:`img`,{className:e(`absolute inset-0 size-full object-cover`,o),"data-slot":t(s,`avatar-image`),onError:e=>{c?.(e),e.defaultPrevented||f(l)},src:l,...u})},Fallback:({asChild:r,children:a,className:o,"data-slot":s,name:c,...u})=>i(r?n:`span`,{"aria-hidden":c!=null||void 0,className:e(`flex size-full items-center justify-center`,o),"data-slot":t(s,`avatar-fallback`),...u,children:c==null?a:l(c)})};export{u as Avatar};

package/dist/bar-chart.d.ts

@@ -1,4 +1,4 @@
-import { _ as SeriesColor, a as LegendPrimitiveProps, c as XAxisPrimitiveProps, d as BarTexture, f as ChartDatum, i as GridPrimitiveProps, l as YAxisPrimitiveProps, n as ChartRootBaseProps, o as ReferenceLinePrimitiveProps, p as ChartDatumEvent, r as CopyButtonPrimitiveProps, s as TooltipPrimitiveProps, t as ChartAccessibilityProps, u as BarOrientation } from "./chart-1cVjAcj8.js";
+import { a as LegendPrimitiveProps, c as XAxisPrimitiveProps, d as BarTexture, f as ChartDatum, i as GridPrimitiveProps, l as YAxisPrimitiveProps, m as ChartSeriesSlot, n as ChartRootBaseProps, o as ReferenceLinePrimitiveProps, p as ChartDatumEvent, r as CopyButtonPrimitiveProps, s as TooltipPrimitiveProps, t as ChartAccessibilityProps, u as BarOrientation, v as SeriesColor } from "./chart-0zcFJh4n.js";
 //#region src/components/bar-chart/bar-chart.d.ts
 /**
  * Props for {@link BarChart.Root}. Bars encode value by length from a shared
@@ -18,7 +18,8 @@ type BarChartRootProps<TDatum extends ChartDatum = ChartDatum> = Omit<ChartRootB
    * categories along the x axis; `"horizontal"` bars run rightward from a
    * left baseline with categories down the y axis — better for long category
    * labels or many categories. The value axis, baseline, reference lines, and
-   * `"perpendicular"` texture all flip to match.
+   * the two rung textures (`"perpendicular"` and `"parallel"`) all flip to
+   * match.
    */
   orientation?: BarOrientation;
 };
@@ -31,25 +32,49 @@ type BarChartBarProps = {
   /** Display name for the legend, tooltip, and data table. Defaults to `dataKey`. */
   label?: string;
   /**
-   * One of the validated chart tokens (`"chart-1"`…`"chart-8"`, `"chart-other"`)
-   * or any CSS color as an escape hatch. Defaults to the next sticky slot in
-   * mount order. Static colors (raw hex) do not adapt across themes; custom
-   * palettes must be validated for colorblind-safe adjacency and surface
-   * contrast, and a series that carries good/bad meaning should wear the
-   * semantic status colors, never a categorical slot.
+   * A fixed visual identity slot. Slots `1` through `8` select a chart color.
+   * `"other"` selects the shared neutral treatment.
+   *
+   * Series receive unreserved slots in composition order. Set `seriesSlot` to
+   * give a series a fixed visual identity. Several series may share one slot;
+   * use distinct textures to tell those bars apart.
+   *
+   * @example
+   * ```tsx
+   * <BarChart.Bar dataKey="errors" seriesSlot={4} />
+   * ```
+   */
+  seriesSlot?: ChartSeriesSlot;
+  /**
+   * Override the color channel with a chart token or any CSS color. This does
+   * not change the series slot. When omitted, the series paints the color from
+   * its slot.
+   *
+   * A static color (raw hex) cannot follow the four themes, so prefer a
+   * `var(--your-token)` declared per theme. A series that carries good/bad
+   * meaning should wear the semantic status colors, never a categorical slot.
    */
   color?: SeriesColor;
   /**
    * The fill texture the series wears, on canvas and on its legend key:
    * `"solid"` (default), diagonal hatch lines at 45° (`"hatch"`), the 135°
    * mirror (`"hatch-reverse"`), both (`"crosshatch"`), rungs perpendicular
-   * to the bar's length (`"perpendicular"`), or an offset dot grid
-   * (`"dots"`). Texture is a redundant identity encoding alongside color —
-   * tone-on-tone ink from the series' own fill — so grouped and stacked
-   * series stay distinguishable without color vision, in grayscale print,
-   * and under forced colors. Keep it opt-in and purposeful, never
-   * decorative: on a multi-series chart, leave the first series solid and
-   * texture the rest.
+   * to the bar's length (`"perpendicular"` — horizontal lines on vertical
+   * bars), rungs parallel to it (`"parallel"` — vertical lines on vertical
+   * bars), the orthogonal lattice of both rung directions (`"grid"`), or an
+   * offset dot field (`"dots"`).
+   *
+   * The two rung textures flip with the Root's `orientation`, in opposite
+   * senses. Every other value is direction-free, `"grid"` included — it is the
+   * orthogonal lattice against `"crosshatch"`'s diagonal one. Eight values
+   * match the palette's eight series slots.
+   *
+   * Texture is a redundant identity encoding alongside color — tone-on-tone
+   * ink from the series' own fill — so grouped and stacked series stay
+   * distinguishable without color vision, in grayscale print, and under
+   * forced colors. Keep it opt-in and purposeful, never decorative: leave the
+   * first series solid and texture the rest, or texture only the series in a
+   * pair that color alone cannot separate.
    */
   texture?: BarTexture;
 };
@@ -89,6 +114,12 @@ type BarChartCopyButtonProps = CopyButtonPrimitiveProps;
  * table, Enter/Space + click activation). Compose the chrome and series parts
  * as children.
  *
+ * The Root's own subtree is addressable by slot: `bar-chart` on the wrapper,
+ * then `bar-chart-plot`, `bar-chart-canvas`, `bar-chart-crosshair`,
+ * `bar-chart-hover-band`, `bar-chart-markers`, `bar-chart-tooltip`, and
+ * `bar-chart-data-table`. A bar chart shows the band and never the crosshair
+ * or the markers, but all three layers mount on every kind.
+ *
  * @see https://mantle.ngrok.com/components/charts/bar-chart#barchartroot
  *
  * @example
@@ -113,8 +144,9 @@ declare const Root: <TDatum extends ChartDatum = ChartDatum>(props: BarChartRoot
 /**
  * One bar series. Renders nothing itself — it registers the series with the
  * chart, which paints it on canvas. Compose one `Bar` per series; with
- * `stacked` on the Root, bars stack in composition order from the baseline up.
- * `texture` adds a diagonal-hatch fill as a redundant identity encoding
+ * `stacked` on the Root, bars stack from the baseline up in registration
+ * order, so a `Bar` that mounts later stacks on top whatever its position in
+ * the JSX. `texture` adds a pattern fill as a redundant identity encoding
  * alongside color, worn by the bars and the series' legend key alike.
  *
  * @see https://mantle.ngrok.com/components/charts/bar-chart#barchartbar
@@ -212,9 +244,9 @@ declare const YAxis: (props: BarChartYAxisProps) => null;
 declare const ReferenceLine: (props: BarChartReferenceLineProps) => null;
 /**
  * Customizes the hover/keyboard tooltip readout. The tooltip itself is part
- * of `BarChart.Root`'s interaction contract and renders whether or not this
- * part is composed — compose it to format the label or values, append a
- * footer, or replace the content entirely via the render-prop `children`.
+ * of `BarChart.Root`'s interaction contract and renders even when this part is
+ * absent — compose it to format the label or values, append a footer, or
+ * replace the content entirely via the render-prop `children`.
  *
  * @see https://mantle.ngrok.com/components/charts/bar-chart#barcharttooltip
  *
@@ -237,6 +269,13 @@ declare const Tooltip: (props: BarChartTooltipProps) => null;
  * must never rely on color-matching alone. It renders nothing for a single
  * series (the chart's title already names it).
  *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value | Description |
+ * | --- | --- | --- |
+ * | `data-slot` | `"bar-chart-legend"` | The legend list. `BarChart.Legend` renders it in flow below the plot. |
+ * | `data-texture` | `"solid"` \| `"hatch"` \| `"hatch-reverse"` \| `"crosshatch"` \| `"perpendicular"` \| `"parallel"` \| `"grid"` \| `"dots"` | On each series' swatch, naming the `texture` its `BarChart.Bar` registered. The swatch paints the pattern itself, so target this only to restyle a key. |
+ *
  * @see https://mantle.ngrok.com/components/charts/bar-chart#barchartlegend
  *
  * @example
@@ -281,6 +320,20 @@ declare const CopyButton: (props: BarChartCopyButtonProps) => import("react").JS
  * per-category tooltip, keyboard stepping, aria-live announcements, and an
  * sr-only data table — ships with `Root` unconditionally.
  *
+ * **CSS variables (public API):**
+ *
+ * | CSS Variable | Default | Description |
+ * | --- | --- | --- |
+ * | `--color-chart-1` … `--color-chart-8` | per theme | The validated categorical series slots, in assignment order. |
+ * | `--color-chart-other` | `--color-neutral-500` | The neutral overflow slot a series wears once every slot is held. |
+ *
+ * Two ways to change a series color, both public API. The `color` prop on
+ * `BarChart.Bar` sets one series and takes any CSS color. To restyle a slot
+ * itself, redeclare its token on `Root` —
+ * `className="[--color-chart-1:var(--color-brand)]"`. The engine resolves every
+ * token through a probe inside `Root`, so a declaration scoped there wins for
+ * that chart and leaves every other chart on the page alone.
+ *
  * @see https://mantle.ngrok.com/components/charts/bar-chart
  *
  * @example

package/dist/bar-chart.js

@@ -1 +1 @@
-import{a as e,c as t,i as n,l as r,n as i,o as a,r as o,s,t as c}from"./chart-B3pAvmkk.js";import{jsx as l}from"react/jsx-runtime";const u={Root:e=>l(o,{kind:`bar`,componentName:`BarChart`,slotName:`bar-chart`,...e}),Bar:e=>a(`BarChart.Bar`,`bar`,e),Grid:e=>n(`BarChart.Grid`,e),XAxis:e=>t(`BarChart.XAxis`,e),YAxis:e=>r(`BarChart.YAxis`,e),ReferenceLine:t=>e(`BarChart.ReferenceLine`,t),Tooltip:e=>s(`BarChart.Tooltip`,e),Legend:e=>l(i,{partName:`BarChart.Legend`,slotName:`bar-chart`,...e}),CopyButton:e=>l(c,{partName:`BarChart.CopyButton`,slotName:`bar-chart`,...e})};export{u as BarChart};
+import{a as e,c as t,i as n,l as r,n as i,o as a,r as o,s,t as c}from"./chart-DBxT9BNl.js";import{jsx as l}from"react/jsx-runtime";const u={Root:e=>l(o,{kind:`bar`,componentName:`BarChart`,slotName:`bar-chart`,...e}),Bar:e=>a(`BarChart.Bar`,`bar`,e),Grid:e=>n(`BarChart.Grid`,e),XAxis:e=>t(`BarChart.XAxis`,e),YAxis:e=>r(`BarChart.YAxis`,e),ReferenceLine:t=>e(`BarChart.ReferenceLine`,t),Tooltip:e=>s(`BarChart.Tooltip`,e),Legend:e=>l(i,{partName:`BarChart.Legend`,slotName:`bar-chart`,...e}),CopyButton:e=>l(c,{partName:`BarChart.CopyButton`,slotName:`bar-chart`,...e})};export{u as BarChart};

package/dist/breadcrumb.d.ts

@@ -6,9 +6,12 @@ import { ComponentProps, ReactNode } from "react";
  * The breadcrumb landmark. Renders a `<nav>` with a default
  * `aria-label="Breadcrumb"` per the WAI-ARIA breadcrumb pattern — pass your
  * own `aria-label` to override it (e.g. for localization or when a page has
- * multiple breadcrumb trails). Carries no visual styling of its own.
+ * multiple breadcrumb trails). Carries no visual styling. Its one layout class
+ * is `min-w-0`: inside a flex row such as `AppLayout.Header` the landmark must
+ * shrink below the trail's width, or `Breadcrumb.List` never scrolls and the
+ * crumbs push their siblings out of the row.
  *
- * @see https://mantle.ngrok.com/components/navigation/breadcrumb
+ * @see https://mantle.ngrok.com/components/navigation/breadcrumb#breadcrumbroot
  *
  * @example
  * ```tsx
@@ -29,13 +32,30 @@ import { ComponentProps, ReactNode } from "react";
  * </Breadcrumb.Root>
  * ```
  */
-declare const Root: ({ asChild, children, "data-slot": dataSlot, ref, ...props }: ComponentProps<"nav"> & WithAsChild & WithDataSlot) => import("react").JSX.Element;
+declare const Root: ({ asChild, children, className, "data-slot": dataSlot, ref, ...props }: ComponentProps<"nav"> & WithAsChild & WithDataSlot) => import("react").JSX.Element;
 /**
  * The ordered list of crumbs. Renders an `<ol>` — an **ordered** list, because
  * the order of the items is the hierarchy, from the root to the current page.
- * Lays crumbs out inline with wrapping and muted, small text.
+ * Lays the crumbs out in one row of muted, small text.
  *
- * @see https://mantle.ngrok.com/components/navigation/breadcrumb
+ * A trail wider than its container scrolls sideways instead of wrapping to a
+ * second row, which a one-row app header has no space for. Its edges carry the
+ * same `scroll-fade-x` mask as `Tabs.List`: an edge with crumbs beyond it fades
+ * out, and an edge with nothing beyond it stays flush.
+ *
+ * The trail keeps its end in view, because the end is the current page. It
+ * scrolls itself there whenever that end moves — on mount, when a navigation
+ * swaps the crumbs, and when the row around it resizes — and leaves the reader's
+ * own scroll position alone the rest of the time, including while a crumb holds
+ * focus. Tabbing to a crumb the trail has scrolled past is the browser's own
+ * job, and `scroll-padding` the width of the fade zone is what lands that crumb
+ * clear of the fade rather than under it.
+ *
+ * To wrap instead, pass `className="flex-wrap overflow-x-visible"`. The mask
+ * needs a scrollport to animate against, so without one it renders fully
+ * opaque and the row wraps as it did before.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/breadcrumb#breadcrumblist
  *
  * @example
  * ```tsx
@@ -61,7 +81,11 @@ declare const List: ({ asChild, children, className, "data-slot": dataSlot, ref,
  * A single crumb. Renders an `<li>` (`role="listitem"`) that lays out its
  * content — a `Breadcrumb.Link` or `Breadcrumb.Page` — inline.
  *
- * @see https://mantle.ngrok.com/components/navigation/breadcrumb
+ * The crumb never shrinks (`shrink-0`). A squeezed crumb would break its own
+ * label across two lines, so a trail too wide for its container scrolls in
+ * `Breadcrumb.List` instead.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/breadcrumb#breadcrumbitem
  *
  * @example
  * ```tsx
@@ -168,7 +192,10 @@ type BreadcrumbSeparatorProps = Omit<ComponentProps<"li">, "children"> & ({
  * your own children (e.g. a slash) to replace it. With `asChild`, children
  * are required — the child element is what renders.
  *
- * @see https://mantle.ngrok.com/components/navigation/breadcrumb
+ * Like `Breadcrumb.Item`, the divider never shrinks (`shrink-0`), so a trail
+ * too wide for its container scrolls in `Breadcrumb.List` instead.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/breadcrumb#breadcrumbseparator
  *
  * @example
  * ```tsx
@@ -189,12 +216,13 @@ type BreadcrumbSeparatorProps = Omit<ComponentProps<"li">, "children"> & ({
  * </Breadcrumb.Root>
  * ```
  */
-declare const Separator: ({ asChild, children, "data-slot": dataSlot, ref, ...props }: BreadcrumbSeparatorProps & WithDataSlot) => import("react").JSX.Element;
+declare const Separator: ({ asChild, children, className, "data-slot": dataSlot, ref, ...props }: BreadcrumbSeparatorProps & WithDataSlot) => import("react").JSX.Element;
 /**
  * Compound component for WAI-ARIA breadcrumb navigation — the path from a
  * root to the current page as an ordered list of links inside a labeled
  * `<nav>` landmark. Router-agnostic: compose `Breadcrumb.Link` onto your app
- * router's link via `asChild`.
+ * router's link via `asChild`. A trail too wide for its row scrolls sideways
+ * with faded edges instead of wrapping, and starts at the current page.
  *
  * @see https://mantle.ngrok.com/components/navigation/breadcrumb
  *
@@ -233,9 +261,10 @@ declare const Breadcrumb: {
   /**
    * The breadcrumb landmark. Renders a `<nav>` with a default
    * `aria-label="Breadcrumb"` — pass your own `aria-label` to override it.
-   * Carries no visual styling of its own.
+   * Carries no visual styling; `min-w-0` is what lets the landmark shrink
+   * inside a flex row so the trail scrolls.
    *
-   * @see https://mantle.ngrok.com/components/navigation/breadcrumb
+   * @see https://mantle.ngrok.com/components/navigation/breadcrumb#breadcrumbroot
    *
    * @example
    * ```tsx
@@ -259,9 +288,11 @@ declare const Breadcrumb: {
   readonly Root: typeof Root;
   /**
    * The ordered list of crumbs. Renders an `<ol>` — the order of the items
-   * is the hierarchy, from the root to the current page.
+   * is the hierarchy, from the root to the current page. A trail wider than
+   * its container scrolls sideways with a faded edge instead of wrapping, and
+   * starts at the current page.
    *
-   * @see https://mantle.ngrok.com/components/navigation/breadcrumb
+   * @see https://mantle.ngrok.com/components/navigation/breadcrumb#breadcrumblist
    *
    * @example
    * ```tsx
@@ -285,9 +316,10 @@ declare const Breadcrumb: {
   readonly List: typeof List;
   /**
    * A single crumb. Renders an `<li>` containing a `Breadcrumb.Link` or
-   * `Breadcrumb.Page`.
+   * `Breadcrumb.Page`. The crumb never shrinks, so a wide trail scrolls
+   * instead of breaking a label across two lines.
    *
-   * @see https://mantle.ngrok.com/components/navigation/breadcrumb
+   * @see https://mantle.ngrok.com/components/navigation/breadcrumb#breadcrumbitem
    *
    * @example
    * ```tsx
@@ -365,9 +397,10 @@ declare const Breadcrumb: {
   /**
    * A purely visual divider between crumbs, hidden from assistive
    * technology (`role="presentation"` + `aria-hidden`). Children default to
-   * a caret icon; pass your own (e.g. a slash) to replace it.
+   * a caret icon; pass your own (e.g. a slash) to replace it. Like the crumbs
+   * it divides, it never shrinks.
    *
-   * @see https://mantle.ngrok.com/components/navigation/breadcrumb
+   * @see https://mantle.ngrok.com/components/navigation/breadcrumb#breadcrumbseparator
    *
    * @example
    * ```tsx

package/dist/breadcrumb.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-lZ48P8Nn.js";import{t as n}from"./data-slot-EM6s2WEU.js";import{t as r}from"./slot-DpNWVci8.js";import{cloneElement as i,isValidElement as a}from"react";import{jsx as o}from"react/jsx-runtime";import{CaretRightIcon as s}from"@phosphor-icons/react/CaretRight";const c={Root:({asChild:e,children:t,"data-slot":i,ref:a,...s})=>o(e?r:`nav`,{ref:a,"data-slot":n(i,`breadcrumb`),"aria-label":`Breadcrumb`,...s,children:t}),List:({asChild:t,children:i,className:a,"data-slot":s,ref:c,...l})=>o(t?r:`ol`,{ref:c,"data-slot":n(s,`breadcrumb-list`),className:e(`text-muted flex flex-wrap items-center gap-1.5 text-sm`,a),...l,children:i}),Item:({asChild:t,children:i,className:a,"data-slot":s,ref:c,...l})=>o(t?r:`li`,{ref:c,"data-slot":n(s,`breadcrumb-item`),className:e(`inline-flex items-center gap-1.5`,a),...l,children:i}),Link:({asChild:t,children:i,className:a,"data-slot":s,ref:c,...l})=>o(t?r:`a`,{ref:c,"data-slot":n(s,`breadcrumb-link`),className:e(`hover:text-strong transition-colors`,a),...l,children:i}),Page:({asChild:t,children:s,className:c,"data-slot":l,ref:u,...d})=>{let f=t?r:`span`,p=t&&a(s)?i(s,{"aria-current":`page`}):s;return o(f,{ref:u,"data-slot":n(l,`breadcrumb-page`),className:e(`text-muted`,c),...d,"aria-current":`page`,children:p})},Separator:({asChild:e,children:c,"data-slot":l,ref:u,...d})=>{let f=e?r:`li`,p=e&&a(c)?i(c,{role:`presentation`,"aria-hidden":`true`}):c??o(t,{svg:o(s,{}),className:`size-3.5`});return o(f,{ref:u,"data-slot":n(l,`breadcrumb-separator`),...d,role:`presentation`,"aria-hidden":`true`,children:p})}};export{c as Breadcrumb};
+import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-BdBMM9ga.js";import{t as n}from"./cx-IiQEAKf5.js";import{t as r}from"./icon-lZ48P8Nn.js";import{t as i}from"./data-slot-EM6s2WEU.js";import{t as a}from"./slot-DpNWVci8.js";import{cloneElement as o,isValidElement as s,useEffect as c,useRef as l}from"react";import{jsx as u}from"react/jsx-runtime";import{CaretRightIcon as d}from"@phosphor-icons/react/CaretRight";const f=({asChild:e,children:t,className:r,"data-slot":o,ref:s,...c})=>u(e?a:`nav`,{ref:s,"data-slot":i(o,`breadcrumb`),"aria-label":`Breadcrumb`,className:n(`min-w-0`,r),...c,children:t});function p(e,t){let n=e.scrollWidth-e.clientWidth;return n===t||e.contains(document.activeElement)?t:(e.scrollLeft=n,n)}const m={Root:f,List:({asChild:r,children:o,className:s,"data-slot":d,ref:f,...m})=>{let h=r?a:`ol`,g=l(null),_=t(g,f),v=l(void 0);return e(()=>{let e=g.current;e!=null&&(v.current=p(e,v.current))}),c(()=>{let e=g.current;if(e==null)return;let t=new ResizeObserver(()=>{v.current=p(e,v.current)});return t.observe(e),()=>{t.disconnect()}},[]),u(h,{ref:_,"data-slot":i(d,`breadcrumb-list`),className:n(`text-muted flex items-center gap-1.5 text-sm`,`scroll-fade-x min-w-0 overflow-x-auto overscroll-x-none`,`-m-1 p-1`,`scroll-px-10`,s),...m,children:o})},Item:({asChild:e,children:t,className:r,"data-slot":o,ref:s,...c})=>u(e?a:`li`,{ref:s,"data-slot":i(o,`breadcrumb-item`),className:n(`inline-flex shrink-0 items-center gap-1.5`,r),...c,children:t}),Link:({asChild:e,children:t,className:r,"data-slot":o,ref:s,...c})=>u(e?a:`a`,{ref:s,"data-slot":i(o,`breadcrumb-link`),className:n(`hover:text-strong transition-colors`,r),...c,children:t}),Page:({asChild:e,children:t,className:r,"data-slot":c,ref:l,...d})=>{let f=e?a:`span`,p=e&&s(t)?o(t,{"aria-current":`page`}):t;return u(f,{ref:l,"data-slot":i(c,`breadcrumb-page`),className:n(`text-muted`,r),...d,"aria-current":`page`,children:p})},Separator:({asChild:e,children:t,className:c,"data-slot":l,ref:f,...p})=>{let m=e?a:`li`,h=e&&s(t)?o(t,{role:`presentation`,"aria-hidden":`true`}):t??u(r,{svg:u(d,{}),className:`size-3.5`});return u(m,{ref:f,"data-slot":i(l,`breadcrumb-separator`),className:n(`shrink-0`,c),...p,role:`presentation`,"aria-hidden":`true`,children:h})}};export{m as Breadcrumb};