@tensor_1/react 2.31.0 → 2.32.0

package/dist/components/ChartCore.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef } from "react";
 import { cx } from "../cx.js";
+import { mergeChartTheme, uixChartTheme } from "../chart-theme.js";
 function readToken(name) {
   if (typeof getComputedStyle === "undefined") return "";
   return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
@@ -9,6 +10,9 @@ function readToken(name) {
 function uixChartPalette() {
   return [1, 2, 3, 4, 5, 6, 7, 8].map((i) => readToken(`--uix-chart-${i}`));
 }
+function themed(option, theme, element) {
+  return theme === "none" ? option : mergeChartTheme(uixChartTheme(element), option);
+}
 function motionSafe(option) {
   if (typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches) {
     return { ...option, animation: false };
@@ -37,7 +41,8 @@ function ChartCore({
   footer,
   loading = false,
   empty,
-  labels: labelOverrides
+  labels: labelOverrides,
+  theme = "uix"
 }) {
   const labels = { ...DEFAULT_CHART_LABELS, ...labelOverrides };
   const containerRef = useRef(null);
@@ -49,7 +54,9 @@ function ChartCore({
   const hasEmpty = empty != null;
   const hasTextAlternative = Boolean(ariaLabel || title || tableData?.length);
   const hasTextAlternativeRef = useRef(hasTextAlternative);
+  const themeRef = useRef(theme);
   latestOptionRef.current = option;
+  themeRef.current = theme;
   onReadyRef.current = onReady;
   hasTextAlternativeRef.current = hasTextAlternative;
   useEffect(() => {
@@ -57,9 +64,17 @@ function ChartCore({
     if (!element) return;
     const chart = engine.init(element, null, { renderer: "svg" });
     chartRef.current = chart;
-    chart.setOption(motionSafe(latestOptionRef.current));
+    chart.setOption(motionSafe(themed(latestOptionRef.current, themeRef.current, element)));
     appliedOptionRef.current = latestOptionRef.current;
     onReadyRef.current?.(chart);
+    const retheme = () => {
+      if (themeRef.current === "none") return;
+      chart.setOption(motionSafe(themed(latestOptionRef.current, themeRef.current, element)));
+    };
+    const themeObserver = typeof MutationObserver === "undefined" ? null : new MutationObserver(retheme);
+    themeObserver?.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme"] });
+    const scheme = typeof matchMedia === "undefined" ? null : matchMedia("(prefers-color-scheme: dark)");
+    scheme?.addEventListener?.("change", retheme);
     if (!hasTextAlternativeRef.current) {
       console.warn("[uix] Chart has no text alternative \u2014 provide ariaLabel, title, or tableData.");
     }
@@ -81,6 +96,8 @@ function ChartCore({
     observer.observe(element);
     return () => {
       observer.disconnect();
+      themeObserver?.disconnect();
+      scheme?.removeEventListener?.("change", retheme);
       if (frame) cancelAnimationFrame(frame);
       chart.dispose();
       chartRef.current = null;
@@ -89,10 +106,11 @@ function ChartCore({
   }, [engine, hasEmpty]);
   useEffect(() => {
     const chart = chartRef.current;
-    if (!chart || appliedOptionRef.current === option) return;
-    chart.setOption(motionSafe(option), { notMerge: false });
+    const element = containerRef.current;
+    if (!chart || !element || appliedOptionRef.current === option) return;
+    chart.setOption(motionSafe(themed(option, theme, element)), { notMerge: false });
     appliedOptionRef.current = option;
-  }, [option]);
+  }, [option, theme]);
   const heightValue = typeof height === "number" ? `${height}px` : height;
   const effectiveAriaLabel = ariaLabel ?? title ?? labels.chart;
   const hasTable = Boolean(tableData?.length && tableHeaders?.length);

package/dist/components/Chip.d.ts

@@ -16,13 +16,26 @@ interface ChipProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
     /** A link chip. */
     href?: string;
     renderLink?: UixRenderLink;
+    /**
+     * A link chip for the page that is open: `aria-current="page"` and the filled look
+     * (HAR-1632). `pressed` gives the same look but says "toggle button", which a link is not.
+     */
+    current?: boolean;
     /** Adds a × button that removes the chip. */
     onRemove?: () => void;
     /**
      * Accessible name of the × button. `{label}` is replaced by the chip text when it is a
-     * string. Default "Remove {label}"; pass a full name when the text is not a string.
+     * string. Default: `UixLabelsProvider` `chip.remove`, then "Remove {label}"; pass a full name
+     * when the text is not a string.
      */
     removeLabel?: string;
+    /**
+     * Attributes for the body: the element that carries the chip's own action. On a plain chip
+     * that is the chip itself, where the other props already go; on a removable chip the other
+     * props go to the wrapper, so this is how `aria-haspopup`, `aria-expanded`, `aria-controls`
+     * or an `id` reach the button that opens the filter editor (HAR-1632).
+     */
+    bodyProps?: HTMLAttributes<HTMLElement>;
     /** `add` is the dashed "+ Add filter" chip. */
     variant?: 'default' | 'add';
     disabled?: boolean;
@@ -30,8 +43,10 @@ interface ChipProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
 /**
  * Filter, tag and token chip over `.uix-chip` (HAR-1360; TENSOR C7/B34, MOTUS C-6/B-A18).
  * Plain text, a toggle, a link or a button, optionally with a × that removes it.
+ * The ref goes to the body (the button, link or span that carries the chip's action), also on
+ * a removable chip: anchor a popover to it and return focus to it without a DOM lookup.
  */
-declare function Chip({ children, icon, count, pressed, onPressedChange, onClick, href, renderLink, onRemove, removeLabel, variant, disabled, className, ...props }: ChipProps): react.JSX.Element;
+declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLElement>>;
 interface ChipGroupProps extends HTMLAttributes<HTMLDivElement> {
     /** Names the group, e.g. "Active filters". */
     label?: string;

package/dist/components/Chip.js

@@ -1,8 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { cx } from "../cx.js";
-import { fillLabel } from "../fill-label.js";
 import { renderUixLink } from "../link.js";
-function Chip({
+import { ChipRemoveButton } from "./ChipRemove.js";
+const Chip = forwardRef(function Chip2({
   children,
   icon,
   count,
@@ -11,15 +12,19 @@ function Chip({
   onClick,
   href,
   renderLink,
+  current,
   onRemove,
-  removeLabel = "Remove {label}",
+  removeLabel,
+  bodyProps,
   variant = "default",
   disabled,
   className,
   ...props
-}) {
+}, ref) {
   const toggle = pressed !== void 0;
   const interactive = toggle || onClick != null || href != null;
+  const link = href != null && !disabled;
+  const on = pressed || link && current || void 0;
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon != null && /* @__PURE__ */ jsx("span", { className: "uix-chip__icon", "aria-hidden": "true", children: icon }),
     /* @__PURE__ */ jsx("span", { className: "uix-chip__label", children }),
@@ -38,7 +43,17 @@ function Chip({
     className
   );
   const main = (classes, extra) => {
-    if (href != null && !disabled) return renderUixLink(renderLink, { href, className: classes, children: body, ...extra });
+    if (link) {
+      return renderUixLink(renderLink, {
+        href,
+        className: classes,
+        children: body,
+        "aria-current": current ? "page" : void 0,
+        ...extra,
+        ...bodyProps,
+        ref
+      });
+    }
     if (interactive) {
       return /* @__PURE__ */ jsx(
         "button",
@@ -49,21 +64,30 @@ function Chip({
           disabled,
           onClick: handleClick,
           ...extra,
+          ...bodyProps,
+          ref,
           children: body
         }
       );
     }
-    return /* @__PURE__ */ jsx("span", { className: classes, ...extra, children: body });
+    return /* @__PURE__ */ jsx("span", { className: classes, ...extra, ...bodyProps, ref, children: body });
   };
   if (!onRemove) {
-    return /* @__PURE__ */ jsx(Fragment, { children: main(outer, { ...props, "data-on": pressed || void 0 }) });
+    return /* @__PURE__ */ jsx(Fragment, { children: main(outer, { ...props, "data-on": on }) });
   }
-  const removeName = fillLabel(removeLabel, { label: typeof children === "string" || typeof children === "number" ? String(children) : "" }).trim();
-  return /* @__PURE__ */ jsxs("span", { className: outer, "data-on": pressed || void 0, ...props, children: [
+  return /* @__PURE__ */ jsxs("span", { className: outer, "data-on": on, ...props, children: [
     main("uix-chip__main"),
-    /* @__PURE__ */ jsx("button", { type: "button", className: "uix-chip__remove", "aria-label": removeName, disabled, onClick: onRemove, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4.5 4.5l7 7M11.5 4.5l-7 7" }) }) })
+    /* @__PURE__ */ jsx(
+      ChipRemoveButton,
+      {
+        label: removeLabel,
+        text: typeof children === "string" || typeof children === "number" ? String(children) : "",
+        disabled,
+        onRemove
+      }
+    )
   ] });
-}
+});
 function ChipGroup({ label, children, className, ...props }) {
   return /* @__PURE__ */ jsx("div", { role: "group", "aria-label": label, className: cx("uix-chip-group", className), ...props, children });
 }

package/dist/components/ChipRemove.d.ts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+
+interface ChipRemoveButtonProps {
+    /** The chip's `removeLabel`, when one was passed. */
+    label?: string;
+    /** The chip text for `{label}`; empty when the chip's children are not text. */
+    text: string;
+    disabled?: boolean;
+    onRemove: () => void;
+}
+/**
+ * The × of a removable `Chip`. Internal. Its own client component so its name can come from
+ * `UixLabelsProvider` (`chip.remove`) while `Chip` itself stays server-renderable (HAR-1632).
+ */
+declare function ChipRemoveButton({ label, text, disabled, onRemove }: ChipRemoveButtonProps): react.JSX.Element;
+
+export { ChipRemoveButton };

package/dist/components/ChipRemove.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { XIcon } from "../icons/components.js";
+import { fillLabel } from "../fill-label.js";
+import { useUixLabels } from "../labels-context.js";
+function ChipRemoveButton({ label, text, disabled, onRemove }) {
+  const provided = useUixLabels().chip?.remove;
+  const template = label ?? provided ?? "Remove {label}";
+  return /* @__PURE__ */ jsx("button", { type: "button", className: "uix-chip__remove", "aria-label": fillLabel(template, { label: text }).trim(), disabled, onClick: onRemove, children: /* @__PURE__ */ jsx(XIcon, {}) });
+}
+export {
+  ChipRemoveButton
+};

package/dist/components/CollapsibleParts.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { ReactNode, Ref } from 'react';
+
+type CollapsibleHeadingLevel = 2 | 3 | 4 | 5 | 6;
+/** Root classes shared by the plain and the stateful `CollapsibleSection`. */
+declare const collapsibleClass: (compact: boolean | undefined, className: string | undefined) => string;
+/** With a heading level the body is a region named by the title. */
+declare const collapsibleBodyProps: (headingLevel: CollapsibleHeadingLevel | undefined, titleId: string) => {
+    role: string;
+    'aria-labelledby': string;
+} | {
+    role?: undefined;
+    'aria-labelledby'?: undefined;
+};
+interface CollapsibleSummaryProps {
+    title: ReactNode;
+    summary?: ReactNode;
+    headingLevel?: CollapsibleHeadingLevel;
+    titleId: string;
+    summaryRef?: Ref<HTMLElement>;
+}
+/**
+ * The `<summary>` row of a `CollapsibleSection`. Internal. With `headingLevel` the title sits
+ * in a real heading (a heading is the one block element a `<summary>` may hold), so the section
+ * shows up in the page outline; without it the markup is what 2.31.0 rendered.
+ */
+declare function CollapsibleSummary({ title, summary, headingLevel, titleId, summaryRef }: CollapsibleSummaryProps): react.JSX.Element;
+
+export { type CollapsibleHeadingLevel, CollapsibleSummary, collapsibleBodyProps, collapsibleClass };

package/dist/components/CollapsibleParts.js

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+import { ChevronDownIcon } from "../icons/components.js";
+const collapsibleClass = (compact, className) => cx("uix-collapsible", compact && "uix-collapsible--compact", className);
+const collapsibleBodyProps = (headingLevel, titleId) => headingLevel ? { role: "region", "aria-labelledby": titleId } : {};
+function CollapsibleSummary({ title, summary, headingLevel, titleId, summaryRef }) {
+  const Heading = headingLevel ? `h${headingLevel}` : "span";
+  return /* @__PURE__ */ jsxs("summary", { ref: summaryRef, className: "uix-collapsible__summary", children: [
+    /* @__PURE__ */ jsxs(Heading, { className: headingLevel ? "uix-collapsible__heading" : void 0, children: [
+      /* @__PURE__ */ jsx("span", { id: headingLevel ? titleId : void 0, className: "uix-collapsible__title", children: title }),
+      summary != null && /* @__PURE__ */ jsx("span", { className: "uix-collapsible__meta", children: summary })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "uix-collapsible__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: "sm" }) })
+  ] });
+}
+export {
+  CollapsibleSummary,
+  collapsibleBodyProps,
+  collapsibleClass
+};

package/dist/components/CollapsibleSection.d.ts

@@ -5,6 +5,12 @@ interface CollapsibleSectionProps extends Omit<DetailsHTMLAttributes<HTMLDetails
     title: ReactNode;
     summary?: ReactNode;
     children?: ReactNode;
+    /**
+     * Open when first rendered. With `persistKey`, what the person last chose wins over it:
+     * "open by default, but remember" (HAR-1628). `open` is the same starting state and also
+     * re-applies whenever the parent changes it.
+     */
+    defaultOpen?: boolean;
     /**
      * Mount the body only while it is needed (HAR-1352; TENSOR B32): `true` mounts it while
      * open and unmounts it on close; `'keep'` mounts it on first open and keeps it. For
@@ -12,12 +18,33 @@ interface CollapsibleSectionProps extends Omit<DetailsHTMLAttributes<HTMLDetails
      */
     lazy?: boolean | 'keep';
     /**
-     * Remember the open state for the session under this key (`sessionStorage`,
-     * `uix:collapsible:<key>`). Applied after mount, so the server HTML uses `open`.
+     * Remember the open state under this key (`uix:collapsible:<key>`), in `persistStorage`.
+     * Applied after mount, so the server HTML uses `open` / `defaultOpen`; a remembered state
+     * then replaces either.
      */
     persistKey?: string;
-    /** Each new value opens the section and scrolls it into view ("jump to SLA"). */
+    /**
+     * Where `persistKey` keeps the state: `'session'` (`sessionStorage`, this tab until it
+     * closes) or `'local'` (`localStorage`, across sessions). Default `'session'`.
+     */
+    persistStorage?: 'session' | 'local';
+    /**
+     * Each new value opens the section, scrolls it into view and moves focus to its summary
+     * ("jump to SLA"). A value already set when the section mounts is honoured too (a deep link
+     * that lands on a closed section); `undefined` and `0` mean "no request yet", so a counter
+     * that starts at 0 does not open anything.
+     */
     openRequest?: number;
+    /**
+     * A quiet row for a section inside a card: no border or background of its own, tighter
+     * padding, a rule between neighbouring compact sections.
+     */
+    compact?: boolean;
+    /**
+     * Render the title as a heading of this level, and make the body a `role="region"` named by
+     * it. Leave unset for a section that should stay out of the page outline.
+     */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
 }
 /**
  * A `<details>` disclosure. Without `lazy`, `persistKey` or `openRequest` it is a plain,

package/dist/components/CollapsibleSection.js

@@ -1,18 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "../cx.js";
+import { useId } from "react";
+import { CollapsibleSummary, collapsibleBodyProps, collapsibleClass } from "./CollapsibleParts.js";
 import { CollapsibleSectionState } from "./CollapsibleSectionState.js";
 function CollapsibleSection(props) {
-  const { title, summary, children, className, lazy, persistKey, openRequest, ...rest } = props;
+  const { title, summary, children, className, lazy, persistKey, persistStorage, openRequest, open, defaultOpen, compact, headingLevel, ...rest } = props;
+  const titleId = useId();
   if (lazy || persistKey !== void 0 || openRequest !== void 0) return /* @__PURE__ */ jsx(CollapsibleSectionState, { ...props });
-  return /* @__PURE__ */ jsxs("details", { className: cx("uix-collapsible", className), ...rest, children: [
-    /* @__PURE__ */ jsxs("summary", { className: "uix-collapsible__summary", children: [
-      /* @__PURE__ */ jsxs("span", { children: [
-        /* @__PURE__ */ jsx("span", { className: "uix-collapsible__title", children: title }),
-        summary != null && /* @__PURE__ */ jsx("span", { className: "uix-collapsible__meta", children: summary })
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: "uix-collapsible__chevron", "aria-hidden": "true", children: "\u2304" })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "uix-collapsible__body", children })
+  return /* @__PURE__ */ jsxs("details", { className: collapsibleClass(compact, className), ...rest, open: open ?? defaultOpen, children: [
+    /* @__PURE__ */ jsx(CollapsibleSummary, { title, summary, headingLevel, titleId }),
+    /* @__PURE__ */ jsx("div", { className: "uix-collapsible__body", ...collapsibleBodyProps(headingLevel, titleId), children })
   ] });
 }
 export {

package/dist/components/CollapsibleSectionState.d.ts

@@ -6,6 +6,6 @@ import { CollapsibleSectionProps } from './CollapsibleSection.js';
  * state and `openRequest`. Internal — `CollapsibleSection` delegates here only when one
  * of those props is set, so the plain section stays server-renderable and JS-free.
  */
-declare function CollapsibleSectionState({ title, summary, children, className, lazy, persistKey, openRequest, open, onToggle, ...props }: CollapsibleSectionProps): react.JSX.Element;
+declare function CollapsibleSectionState({ title, summary, children, className, lazy, persistKey, persistStorage, openRequest, open, defaultOpen, compact, headingLevel, onToggle, ...props }: CollapsibleSectionProps): react.JSX.Element;
 
 export { CollapsibleSectionState };

package/dist/components/CollapsibleSectionState.js

@@ -1,36 +1,59 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { cx } from "../cx.js";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { CollapsibleSummary, collapsibleBodyProps, collapsibleClass } from "./CollapsibleParts.js";
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
 const STORAGE_PREFIX = "uix:collapsible:";
-const readStored = (key) => {
+const storageOf = (kind) => kind === "local" ? window.localStorage : window.sessionStorage;
+const readStored = (kind, key) => {
   try {
-    const value = window.sessionStorage.getItem(STORAGE_PREFIX + key);
+    const value = storageOf(kind).getItem(STORAGE_PREFIX + key);
     return value === "1" ? true : value === "0" ? false : void 0;
   } catch {
     return void 0;
   }
 };
-const writeStored = (key, open) => {
+const writeStored = (kind, key, open) => {
   try {
-    window.sessionStorage.setItem(STORAGE_PREFIX + key, open ? "1" : "0");
+    storageOf(kind).setItem(STORAGE_PREFIX + key, open ? "1" : "0");
   } catch {
   }
 };
-function CollapsibleSectionState({ title, summary, children, className, lazy, persistKey, openRequest, open, onToggle, ...props }) {
+function CollapsibleSectionState({
+  title,
+  summary,
+  children,
+  className,
+  lazy,
+  persistKey,
+  persistStorage = "session",
+  openRequest,
+  open,
+  defaultOpen,
+  compact,
+  headingLevel,
+  onToggle,
+  ...props
+}) {
   const ref = useRef(null);
-  const [isOpen, setIsOpen] = useState(open ?? false);
-  const [hasOpened, setHasOpened] = useState(open ?? false);
-  const lastRequest = useRef(openRequest);
+  const summaryRef = useRef(null);
+  const titleId = useId();
+  const initial = open ?? defaultOpen ?? false;
+  const [isOpen, setIsOpen] = useState(initial);
+  const [hasOpened, setHasOpened] = useState(initial);
+  const lastOpen = useRef(open);
+  const lastRequest = useRef(openRequest ? void 0 : openRequest);
   useEffect(() => {
     if (!persistKey) return;
-    const stored = readStored(persistKey);
+    const stored = readStored(persistStorage, persistKey);
     if (stored !== void 0) {
       setIsOpen(stored);
       if (stored) setHasOpened(true);
     }
-  }, [persistKey]);
+  }, [persistKey, persistStorage]);
   useEffect(() => {
+    if (open === lastOpen.current) return;
+    lastOpen.current = open;
     if (open === void 0) return;
     setIsOpen(open);
     if (open) setHasOpened(true);
@@ -40,26 +63,30 @@ function CollapsibleSectionState({ title, summary, children, className, lazy, pe
     lastRequest.current = openRequest;
     setIsOpen(true);
     setHasOpened(true);
-    if (persistKey) writeStored(persistKey, true);
-    requestAnimationFrame(() => ref.current?.scrollIntoView?.({ block: "nearest" }));
-  }, [openRequest, persistKey]);
+    if (persistKey) writeStored(persistStorage, persistKey, true);
+    requestAnimationFrame(() => {
+      ref.current?.scrollIntoView?.({ block: "nearest" });
+      summaryRef.current?.focus({ preventScroll: true });
+    });
+  }, [openRequest, persistKey, persistStorage]);
+  const renderedOpen = useRef(isOpen);
+  useIsomorphicLayoutEffect(() => {
+    renderedOpen.current = isOpen;
+  }, [isOpen]);
   const handleToggle = (event) => {
     const next = event.currentTarget.open;
-    setIsOpen(next);
-    if (next) setHasOpened(true);
-    if (persistKey) writeStored(persistKey, next);
+    if (next !== renderedOpen.current) {
+      renderedOpen.current = next;
+      setIsOpen(next);
+      if (next) setHasOpened(true);
+      if (persistKey) writeStored(persistStorage, persistKey, next);
+    }
     onToggle?.(event);
   };
   const mountBody = !lazy || (lazy === "keep" ? hasOpened : isOpen);
-  return /* @__PURE__ */ jsxs("details", { ref, className: cx("uix-collapsible", className), ...props, open: isOpen, onToggle: handleToggle, children: [
-    /* @__PURE__ */ jsxs("summary", { className: "uix-collapsible__summary", children: [
-      /* @__PURE__ */ jsxs("span", { children: [
-        /* @__PURE__ */ jsx("span", { className: "uix-collapsible__title", children: title }),
-        summary != null && /* @__PURE__ */ jsx("span", { className: "uix-collapsible__meta", children: summary })
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: "uix-collapsible__chevron", "aria-hidden": "true", children: "\u2304" })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "uix-collapsible__body", children: mountBody ? children : null })
+  return /* @__PURE__ */ jsxs("details", { ref, className: collapsibleClass(compact, className), ...props, open: isOpen, onToggle: handleToggle, children: [
+    /* @__PURE__ */ jsx(CollapsibleSummary, { title, summary, headingLevel, titleId, summaryRef }),
+    /* @__PURE__ */ jsx("div", { className: "uix-collapsible__body", ...collapsibleBodyProps(headingLevel, titleId), children: mountBody ? children : null })
   ] });
 }
 export {

package/dist/components/DashboardGrid.d.ts

@@ -0,0 +1,60 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+/** Columns at one width. */
+type DashboardGridColumnCount = 1 | 2 | 3 | 4;
+/**
+ * A width of the GRID itself (a container query), not of the viewport:
+ * `base` any width, `sm` ≥ 36rem, `md` ≥ 48rem, `lg` ≥ 60rem, `xl` ≥ 80rem.
+ */
+type DashboardGridBreakpoint = 'base' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * One column count for every width, or a count per breakpoint. A breakpoint you leave out keeps
+ * the count of the next smaller one, and a missing `base` is 1.
+ */
+type DashboardGridColumns = DashboardGridColumnCount | Partial<Record<DashboardGridBreakpoint, DashboardGridColumnCount>>;
+/** How much of the row an item takes. `2` clamps to the columns there are; `full` is always the whole row. */
+type DashboardGridSpan = 1 | 2 | 'full';
+/** Space between items: `sm` --uix-space-3, `md` --uix-space-4, `lg` --uix-space-6. */
+type DashboardGridGap = 'sm' | 'md' | 'lg';
+interface DashboardGridProps extends HTMLAttributes<HTMLDivElement> {
+    /** Default: 1 column, 2 from `sm`, 3 from `lg` (of the grid's own width). */
+    columns?: DashboardGridColumns;
+    /** Default `md`. */
+    gap?: DashboardGridGap;
+}
+interface DashboardGridItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Default `1`. */
+    span?: DashboardGridSpan;
+}
+/**
+ * The class list of a dashboard grid, for markup you render yourself (a server template, or a
+ * drag-and-drop library's own element). Same output as `<DashboardGrid>`.
+ */
+declare function dashboardGridClassName(columns?: DashboardGridColumns, gap?: DashboardGridGap): string;
+/** The class list of a dashboard grid item, for markup you render yourself. */
+declare function dashboardGridItemClassName(span?: DashboardGridSpan): string;
+/**
+ * A cell of a {@link DashboardGrid}: one column, two, or the full row. It is an inline-size
+ * container (container name: uix-dashboard-grid-item), so its content can size from it, e.g. a Chart with
+ * `height="clamp(160px, 40cqi, 360px)"`. Widgets in one row share a height.
+ */
+declare const DashboardGridItem: react.ForwardRefExoticComponent<DashboardGridItemProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * The layout grid for dashboard widgets (HAR-1555). The column count follows the grid's own
+ * width, so it adapts to a sidebar as well as to the screen. Pure layout: drag-and-drop,
+ * persistence and widget chrome stay in the product. Server-renderable.
+ *
+ * ```tsx
+ * <DashboardGrid columns={{ base: 1, sm: 2, lg: 3 }}>
+ *   <DashboardGrid.Item><Stat … /></DashboardGrid.Item>
+ *   <DashboardGrid.Item span={2}>…</DashboardGrid.Item>
+ *   <DashboardGrid.Item span="full"><Chart … /></DashboardGrid.Item>
+ * </DashboardGrid>
+ * ```
+ */
+declare const DashboardGrid: react.ForwardRefExoticComponent<DashboardGridProps & react.RefAttributes<HTMLDivElement>> & {
+    Item: react.ForwardRefExoticComponent<DashboardGridItemProps & react.RefAttributes<HTMLDivElement>>;
+};
+
+export { DashboardGrid, type DashboardGridBreakpoint, type DashboardGridColumnCount, type DashboardGridColumns, type DashboardGridGap, DashboardGridItem, type DashboardGridItemProps, type DashboardGridProps, type DashboardGridSpan, dashboardGridClassName, dashboardGridItemClassName };

package/dist/components/DashboardGrid.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cx } from "../cx.js";
+const BREAKPOINTS = ["sm", "md", "lg", "xl"];
+const count = (value, fallback) => {
+  if (typeof value !== "number" || !Number.isFinite(value)) return fallback;
+  return Math.min(4, Math.max(1, Math.round(value)));
+};
+function dashboardGridClassName(columns, gap = "md") {
+  const classes = ["uix-dashboard-grid"];
+  if (gap === "sm" || gap === "lg") classes.push(`uix-dashboard-grid--gap-${gap}`);
+  if (columns == null) return classes.join(" ");
+  if (typeof columns === "number") {
+    classes.push(`uix-dashboard-grid--cols-${count(columns, 1)}`);
+    return classes.join(" ");
+  }
+  classes.push(`uix-dashboard-grid--cols-${count(columns.base, 1)}`);
+  for (const breakpoint of BREAKPOINTS) {
+    if (columns[breakpoint] != null) classes.push(`uix-dashboard-grid--${breakpoint}-cols-${count(columns[breakpoint], 1)}`);
+  }
+  return classes.join(" ");
+}
+function dashboardGridItemClassName(span = 1) {
+  if (span === "full") return "uix-dashboard-grid__item uix-dashboard-grid__item--full";
+  if (span === 2) return "uix-dashboard-grid__item uix-dashboard-grid__item--span-2";
+  return "uix-dashboard-grid__item";
+}
+const DashboardGridItem = forwardRef(function DashboardGridItem2({ span = 1, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ref, className: cx(dashboardGridItemClassName(span), className), ...props });
+});
+const DashboardGridRoot = forwardRef(function DashboardGrid({ columns, gap = "md", className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ref, className: cx(dashboardGridClassName(columns, gap), className), ...props });
+});
+const DashboardGrid2 = Object.assign(DashboardGridRoot, { Item: DashboardGridItem });
+export {
+  DashboardGrid2 as DashboardGrid,
+  DashboardGridItem,
+  dashboardGridClassName,
+  dashboardGridItemClassName
+};

package/dist/components/DateRangePicker.d.ts

@@ -35,8 +35,14 @@ interface DateRangePickerProps {
     className?: string;
     /** Translatable words; English defaults in {@link DEFAULT_DATE_RANGE_PICKER_LABELS}. */
     labels?: Partial<DateRangePickerLabels>;
+    /**
+     * The ISO date (`YYYY-MM-DD`) that gets the today ring and `aria-current="date"`.
+     * Defaults to the viewer's local date; pass it when rendering on a server (whose
+     * clock and zone may differ from the viewer's), or `null` for no today marker.
+     */
+    today?: string | null;
 }
 /** Controlled, two-month range picker using the UIx calendar language. */
-declare function DateRangePicker({ value, onChange, visibleMonth: controlledMonth, onVisibleMonthChange, months, min, max, isDateDisabled, locale, label, invalid, invalidMessage, disabled, className, labels: labelOverrides, }: DateRangePickerProps): react.JSX.Element;
+declare function DateRangePicker({ value, onChange, visibleMonth: controlledMonth, onVisibleMonthChange, months, min, max, isDateDisabled, locale, label, invalid, invalidMessage, disabled, className, labels: labelOverrides, today, }: DateRangePickerProps): react.JSX.Element;
 
 export { DEFAULT_DATE_RANGE_PICKER_LABELS, DateRangePicker, type DateRangePickerLabels, type DateRangePickerProps };