@nexub/react 7.1.0 → 7.3.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "7.1.0",
+  "version": "7.3.0",
   "standard": "WCAG 2.2 Level AA",
   "method": {
     "automated": "axe-core rules tagged wcag2a, wcag2aa, wcag21a, wcag21aa and wcag22aa, run on every Storybook story in light and dark, and on open popups (menus, listboxes, dialogs), on every pull request; a new violation fails the build.",

package/dist/components/Accordion/Accordion.js

@@ -33,7 +33,7 @@ const Trigger = React.forwardRef(
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(ChevronDown, { size: "sm", className: "shrink-0 transition-transform duration-200", "aria-hidden": "true" })
+        /* @__PURE__ */ jsx(ChevronDown, { size: "sm", className: "shrink-0 transition-transform duration-spatial-fast ease-spatial-fast", "aria-hidden": "true" })
       ]
     }
   ) })

package/dist/components/AlertDialog/AlertDialog.d.ts

@@ -1,5 +1,11 @@
 import * as React from 'react';
 import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
+import { type ScrollLock } from '../../hooks/useClassScrollLock.js';
+export interface AlertDialogRootProps extends RadixAlertDialog.AlertDialogProps {
+    /** See Dialog.Root `scrollLock`. @default 'style' (becomes 'class' in 8.0) */
+    scrollLock?: ScrollLock;
+}
+declare function Root({ scrollLock, ...props }: AlertDialogRootProps): React.JSX.Element;
 export interface AlertDialogConfirmProps {
     /** What the user must type, e.g. the resource name. Matching ignores outer spaces. */
     text: string;
@@ -16,7 +22,7 @@ declare namespace Confirm {
     var displayName: string;
 }
 export declare const AlertDialog: {
-    Root: React.FC<RadixAlertDialog.AlertDialogProps>;
+    Root: typeof Root;
     Trigger: React.ForwardRefExoticComponent<RadixAlertDialog.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
     Portal: React.FC<RadixAlertDialog.AlertDialogPortalProps>;
     Overlay: React.ForwardRefExoticComponent<RadixAlertDialog.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/AlertDialog/AlertDialog.js

@@ -7,12 +7,19 @@ import { overlaySurface, scrim } from "../../utils/surface.js";
 import { buttonVariants } from "../Button/Button.js";
 import { Input } from "../Input/Input.js";
 import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { ClassLockOverlay, ScrollLockContext } from "../../hooks/useClassScrollLock.js";
 const ConfirmContext = React.createContext(null);
-const Root = RadixAlertDialog.Root;
+const ALERT_LOCK = { style: { scrollLock: "style", modal: true }, class: { scrollLock: "class", modal: true } };
+function Root({ scrollLock = "style", ...props }) {
+  return /* @__PURE__ */ jsx(ScrollLockContext.Provider, { value: ALERT_LOCK[scrollLock], children: /* @__PURE__ */ jsx(RadixAlertDialog.Root, { ...props }) });
+}
 const Trigger = RadixAlertDialog.Trigger;
 const Portal = RadixAlertDialog.Portal;
 const Overlay = React.forwardRef(
   function AlertDialogOverlay({ className, ...props }, ref) {
+    const { scrollLock } = React.useContext(ScrollLockContext);
+    if (scrollLock === "class")
+      return /* @__PURE__ */ jsx(ClassLockOverlay, { ref, className: cn("fixed inset-0 z-[var(--z-modal)] nx-motion", scrim, className) });
     return /* @__PURE__ */ jsx(
       RadixAlertDialog.Overlay,
       {

package/dist/components/Avatar/Avatar.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
+import { safeSrc } from "../../utils/safeHref.js";
 const avatarVariants = cva(
   "relative inline-flex items-center justify-center shrink-0 rounded-full overflow-hidden bg-[var(--color-surface-container-high)] text-[var(--color-on-surface-muted)] font-medium select-none",
   {
@@ -38,13 +39,14 @@ const Avatar = React.forwardRef(
   ({
     className,
     size = "md",
-    src,
+    src: srcProp,
     name,
     fallback,
     badge,
     badgeColor,
     ...props
   }, ref) => {
+    const src = safeSrc(srcProp);
     const [failedSrc, setFailedSrc] = React.useState();
     const showImage = Boolean(src) && failedSrc !== src;
     const initials = name ? getInitials(name) : null;

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ChevronRight, MoreHorizontal } from "@nexub/icons";
 import { cn } from "../../utils/cn.js";
+import { safeHref } from "../../utils/safeHref.js";
 import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
 import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
 const Root = React.forwardRef(
@@ -84,7 +85,7 @@ const Trail = React.forwardRef(({ items, maxItems = 4, ...props }, ref) => {
   const collapsed = items.length > keep;
   const hidden = collapsed ? items.slice(1, items.length - (keep - 1)) : [];
   const shown = collapsed ? [items[0], ...items.slice(items.length - (keep - 1))] : items;
-  const crumb = (item, last) => last ? /* @__PURE__ */ jsx(Page, { children: item.label }) : /* @__PURE__ */ jsx(Link, { href: item.href, children: item.label });
+  const crumb = (item, last) => last ? /* @__PURE__ */ jsx(Page, { children: item.label }) : /* @__PURE__ */ jsx(Link, { href: safeHref(item.href), children: item.label });
   return /* @__PURE__ */ jsx(Root, { ref, ...props, children: /* @__PURE__ */ jsx(List, { children: shown.map((item, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
     i > 0 && /* @__PURE__ */ jsx(Separator, {}),
     /* @__PURE__ */ jsx(Item, { children: crumb(item, i === shown.length - 1) }),
@@ -99,7 +100,7 @@ const Trail = React.forwardRef(({ items, maxItems = 4, ...props }, ref) => {
             children: /* @__PURE__ */ jsx(MoreHorizontal, { size: "sm", "aria-hidden": "true" })
           }
         ),
-        /* @__PURE__ */ jsx(DropdownMenu.Content, { align: "start", children: hidden.map((h, j) => /* @__PURE__ */ jsx(DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ jsx("a", { href: h.href, children: h.label }) }, j)) })
+        /* @__PURE__ */ jsx(DropdownMenu.Content, { align: "start", children: hidden.map((h, j) => /* @__PURE__ */ jsx(DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ jsx("a", { href: safeHref(h.href), children: h.label }) }, j)) })
       ] }) })
     ] })
   ] }, i)) }) });

package/dist/components/Card/Card.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
+import { safeHref } from "../../utils/safeHref.js";
 import { glassSurfaceClass } from "../../utils/glass.js";
 import { usePointerSheen } from "../../hooks/usePointerSheen.js";
 const cardVariants = cva(
@@ -72,7 +73,7 @@ const Card = React.forwardRef(
 );
 Card.displayName = "Card";
 const CardLink = React.forwardRef(
-  ({ className, asChild = false, ...props }, ref) => {
+  ({ className, asChild = false, href, ...props }, ref) => {
     const Comp = asChild ? Slot : "a";
     return /* @__PURE__ */ jsx(
       Comp,
@@ -83,6 +84,7 @@ const CardLink = React.forwardRef(
           "text-inherit no-underline outline-none after:absolute after:inset-0 after:rounded-[inherit] after:content-['']",
           className
         ),
+        href: safeHref(href),
         ...props
       }
     );

package/dist/components/Dialog/Dialog.d.ts

@@ -2,12 +2,22 @@ import * as React from 'react';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import type { Size } from '../../utils/control.js';
 import { type SurfaceValue } from '../../utils/glass.js';
+import { type ScrollLock } from '../../hooks/useClassScrollLock.js';
+export interface DialogRootProps extends RadixDialog.DialogProps {
+    /**
+     * `'class'` locks page scroll with a class on <html> instead of the <style>
+     * Radix injects, so the dialog works under a strict `style-src` with no nonce.
+     * @default 'style' (becomes 'class' in 8.0)
+     */
+    scrollLock?: ScrollLock;
+}
+declare function Root({ scrollLock, modal, ...props }: DialogRootProps): React.JSX.Element;
 interface ContentProps extends RadixDialog.DialogContentProps {
     size?: Size | 'xl' | 'full';
     surface?: SurfaceValue;
 }
 export declare const Dialog: {
-    Root: React.FC<RadixDialog.DialogProps>;
+    Root: typeof Root;
     Trigger: React.ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
     Portal: React.FC<RadixDialog.DialogPortalProps>;
     Overlay: React.ForwardRefExoticComponent<RadixDialog.DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Dialog/Dialog.js

@@ -5,12 +5,19 @@ import * as RadixDialog from "@radix-ui/react-dialog";
 import { cn } from "../../utils/cn.js";
 import { overlaySurface, scrim } from "../../utils/surface.js";
 import { glassSurfaceClass } from "../../utils/glass.js";
-const Root = RadixDialog.Root;
+import { ClassLockOverlay, ScrollLockContext } from "../../hooks/useClassScrollLock.js";
+function Root({ scrollLock = "style", modal = true, ...props }) {
+  const lock = React.useMemo(() => ({ scrollLock, modal }), [scrollLock, modal]);
+  return /* @__PURE__ */ jsx(ScrollLockContext.Provider, { value: lock, children: /* @__PURE__ */ jsx(RadixDialog.Root, { modal, ...props }) });
+}
 const Trigger = RadixDialog.Trigger;
 const Portal = RadixDialog.Portal;
 const Close = RadixDialog.Close;
 const Overlay = React.forwardRef(
   function DialogOverlay({ className, ...props }, ref) {
+    const { scrollLock, modal } = React.useContext(ScrollLockContext);
+    const cls = cn("fixed inset-0 z-[var(--z-modal)] nx-motion", scrim, className);
+    if (scrollLock === "class") return modal ? /* @__PURE__ */ jsx(ClassLockOverlay, { ref, className: cls }) : null;
     return /* @__PURE__ */ jsx(
       RadixDialog.Overlay,
       {

package/dist/components/FileUpload/FileUpload.d.ts

@@ -9,7 +9,9 @@ export declare function formatFileSize(bytes: number, locale: string): string;
 export declare function fileAccepted(file: File, accept?: string[]): boolean;
 export interface FileRejection {
     file: File;
-    reason: 'type' | 'size' | 'count';
+    reason: 'type' | 'size' | 'count' | 'custom';
+    /** The message returned by `validate` (reason `'custom'`). */
+    message?: string;
 }
 export interface FileUploadRootProps extends React.HTMLAttributes<HTMLDivElement> {
     accept?: string[];
@@ -19,6 +21,11 @@ export interface FileUploadRootProps extends React.HTMLAttributes<HTMLDivElement
     onFilesChange?: (files: File[]) => void;
     /** Files turned away by `accept`, `maxSize` or `maxFiles`, from the picker or a drop. */
     onReject?: (rejections: FileRejection[]) => void;
+    /**
+     * Your own check, run after `accept` and `maxSize`: return a message to reject
+     * the file. Client-side checks are a convenience; validate again on the server.
+     */
+    validate?: (file: File) => string | null | undefined;
 }
 export interface FileUploadItemProps extends React.HTMLAttributes<HTMLLIElement> {
     index: number;

package/dist/components/FileUpload/FileUpload.js

@@ -27,17 +27,19 @@ function useFileUpload() {
   return ctx;
 }
 const Root = React.forwardRef(
-  ({ className, accept, maxFiles, maxSize, onFilesChange, onReject, children, ...props }, ref) => {
+  ({ className, accept, maxFiles, maxSize, onFilesChange, onReject, validate, children, ...props }, ref) => {
     const [files, setFiles] = React.useState([]);
     const [rejections, setRejections] = React.useState([]);
     const [isDragging, setIsDragging] = React.useState(false);
     const addFiles = React.useCallback(
       (newFiles) => {
         const rejected = [];
+        let custom;
         const next = [...files];
         for (const file of newFiles) {
           if (!fileAccepted(file, accept)) rejected.push({ file, reason: "type" });
           else if (maxSize !== void 0 && file.size > maxSize) rejected.push({ file, reason: "size" });
+          else if (custom = validate?.(file) || null) rejected.push({ file, reason: "custom", message: custom });
           else if (maxFiles !== void 0 && next.length >= maxFiles) rejected.push({ file, reason: "count" });
           else next.push(file);
         }
@@ -48,7 +50,7 @@ const Root = React.forwardRef(
         }
         if (rejected.length) onReject?.(rejected);
       },
-      [files, accept, maxFiles, maxSize, onFilesChange, onReject]
+      [files, accept, maxFiles, maxSize, onFilesChange, onReject, validate]
     );
     const removeFile = React.useCallback(
       (index) => {
@@ -126,7 +128,7 @@ const Dropzone = React.forwardRef(
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx("div", { id: errorId, role: "alert", className: "empty:hidden px-4 pb-3 text-start text-sm text-[var(--color-error)]", children: rejections.length > 0 && /* @__PURE__ */ jsx("ul", { children: rejections.map(({ file, reason }, i) => /* @__PURE__ */ jsx("li", { children: reason === "type" ? messages.fileTypeRejected(file.name) : reason === "size" ? messages.fileTooLarge(file.name, formatFileSize(maxSize ?? 0, locale)) : messages.tooManyFiles(maxFiles ?? 0) }, `${file.name}-${i}`)) }) })
+            /* @__PURE__ */ jsx("div", { id: errorId, role: "alert", className: "empty:hidden px-4 pb-3 text-start text-sm text-[var(--color-error)]", children: rejections.length > 0 && /* @__PURE__ */ jsx("ul", { children: rejections.map(({ file, reason, message }, i) => /* @__PURE__ */ jsx("li", { children: reason === "custom" ? message : reason === "type" ? messages.fileTypeRejected(file.name) : reason === "size" ? messages.fileTooLarge(file.name, formatFileSize(maxSize ?? 0, locale)) : messages.tooManyFiles(maxFiles ?? 0) }, `${file.name}-${i}`)) }) })
           ]
         }
       )

package/dist/components/MediaCard/MediaCard.js

@@ -1,6 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../utils/cn.js";
+import { safeHref, safeSrc } from "../../utils/safeHref.js";
 import { glassSurfaceClass } from "../../utils/glass.js";
 const ratioClass = {
   "16/9": "aspect-video",
@@ -9,7 +10,9 @@ const ratioClass = {
   "3/4": "aspect-[3/4]"
 };
 const MediaCard = React.forwardRef(
-  ({ src, alt, ratio = "16/9", title, description, eyebrow, href, className, children, ...props }, ref) => {
+  ({ src: srcProp, alt, ratio = "16/9", title, description, eyebrow, href: hrefProp, className, children, ...props }, ref) => {
+    const src = safeSrc(srcProp);
+    const href = safeHref(hrefProp);
     const hasCaption = title != null || description != null || eyebrow != null || children != null;
     return /* @__PURE__ */ jsxs(
       "div",

package/dist/components/Motion/Collapse.d.ts

@@ -4,6 +4,7 @@ export interface CollapseProps extends Omit<MotionBaseProps, 'easing'>, React.HT
     /**
      * Legacy: set it to use `--duration-*` + `--ease-{value}` instead of the
      * spatial spring for the height transition.
+     * @deprecated since 7.3, removed in 8.0 (see MotionBaseProps.easing).
      */
     easing?: MotionBaseProps['easing'];
     /**
@@ -15,10 +16,10 @@ export interface CollapseProps extends Omit<MotionBaseProps, 'easing'>, React.HT
     as?: React.ElementType;
 }
 /**
- * Collapse — animates `max-height` to reveal / hide content on the spatial
- * spring. Reduced motion snaps the height instead of animating it.
- * Height is measured from the content ref so you don't need to
- * provide an explicit height.
+ * Collapse — reveals / hides content on the spatial spring by animating a
+ * one-row grid from `0fr` to `1fr`, so the browser sizes it: no height is
+ * measured in JS and content that grows while open just grows. Reduced motion
+ * snaps instead of animating.
  *
  * ```tsx
  * <Collapse in={isOpen}>

package/dist/components/Motion/Collapse.js

@@ -13,63 +13,30 @@ const Collapse = React.forwardRef(function Collapse2({
   as: Tag = "div",
   ...rest
 }, ref) {
-  const innerRef = React.useRef(null);
   const reduced = usePrefersReducedMotion();
   const legacy = easing !== void 0;
-  const settleMs = duration === "instant" || reduced ? 0 : legacy ? DURATION_MS[duration] : SPRING_MS.spatial[SPRING_SPEED[duration]];
-  const [height, setHeight] = React.useState(visible ? "auto" : 0);
-  const [overflow, setOverflow] = React.useState(
-    visible ? "visible" : "hidden"
-  );
+  const instant = duration === "instant" || reduced;
+  const settleMs = instant ? 0 : legacy ? DURATION_MS[duration] : SPRING_MS.spatial[SPRING_SPEED[duration]];
   const [mounted, setMounted] = React.useState(unmountOnExit ? visible : true);
+  const [expanded, setExpanded] = React.useState(visible);
+  const [settled, setSettled] = React.useState(true);
   const prevVisible = React.useRef(visible);
   React.useEffect(() => {
-    const changed = prevVisible.current !== visible;
+    if (prevVisible.current === visible) return;
     prevVisible.current = visible;
-    if (!changed) return;
-    let raf1 = 0;
-    let raf2 = 0;
-    if (visible) {
-      setMounted(true);
-      raf1 = requestAnimationFrame(() => {
-        const el = innerRef.current;
-        if (el) {
-          setHeight(el.scrollHeight);
-          setOverflow("hidden");
-        }
-      });
-    } else {
-      const el = innerRef.current;
-      if (el) {
-        setHeight(el.scrollHeight);
-        setOverflow("hidden");
-        raf1 = requestAnimationFrame(() => {
-          raf2 = requestAnimationFrame(() => {
-            setHeight(typeof collapsedHeight === "number" ? collapsedHeight : 0);
-          });
-        });
-      }
+    setSettled(false);
+    if (!visible) {
+      setExpanded(false);
+      return;
     }
-    return () => {
-      cancelAnimationFrame(raf1);
-      cancelAnimationFrame(raf2);
-    };
-  }, [visible, collapsedHeight]);
+    setMounted(true);
+    const raf = requestAnimationFrame(() => setExpanded(true));
+    return () => cancelAnimationFrame(raf);
+  }, [visible]);
   const finish = React.useCallback(() => {
-    if (visible) {
-      setHeight("auto");
-      setOverflow("visible");
-    } else if (unmountOnExit) {
-      setMounted(false);
-    }
+    setSettled(true);
+    if (!visible && unmountOnExit) setMounted(false);
   }, [visible, unmountOnExit]);
-  const handleTransitionEnd = React.useCallback(
-    (e) => {
-      if (e.target !== e.currentTarget || e.propertyName !== "max-height") return;
-      finish();
-    },
-    [finish]
-  );
   const firstRender = React.useRef(true);
   React.useEffect(() => {
     if (firstRender.current) {
@@ -80,20 +47,23 @@ const Collapse = React.forwardRef(function Collapse2({
     return () => clearTimeout(t);
   }, [visible, settleMs, finish]);
   if (!mounted) return null;
-  const maxHeight = height === "auto" ? "none" : `${height}px`;
+  const overflow = expanded && settled ? "visible" : "hidden";
   return /* @__PURE__ */ jsx(
     Tag,
     {
       ref,
       style: {
-        maxHeight,
+        display: "grid",
+        gridTemplateRows: expanded ? "1fr" : "0fr",
         overflow,
-        transition: duration === "instant" || reduced ? "none" : legacy ? `max-height var(--duration-${duration}) var(--ease-${easing})` : spring("max-height", "spatial", SPRING_SPEED[duration]),
+        transition: instant ? "none" : legacy ? `grid-template-rows var(--duration-${duration}) var(--ease-${easing})` : spring("grid-template-rows", "spatial", SPRING_SPEED[duration]),
         ...style
       },
-      onTransitionEnd: handleTransitionEnd,
+      onTransitionEnd: (e) => {
+        if (e.target === e.currentTarget && e.propertyName === "grid-template-rows") finish();
+      },
       ...rest,
-      children: /* @__PURE__ */ jsx("div", { ref: innerRef, children })
+      children: /* @__PURE__ */ jsx("div", { style: { minHeight: collapsedHeight, overflow }, children })
     }
   );
 });

package/dist/components/Motion/motion.types.d.ts

@@ -12,6 +12,8 @@ export interface MotionBaseProps {
     /**
      * Legacy: set it to use the old `--duration-*` + `--ease-{value}` tokens
      * instead of springs. Omit it to ride the spring tokens.
+     * @deprecated since 7.3: the `--duration-*` / `--ease-*` tokens (tokens/motion.json) are
+     * retired in favour of the spring tokens. Removed in 8.0.
      */
     easing?: MotionEasing;
     /**

package/dist/components/NavigationMenu/NavigationMenu.js

@@ -50,7 +50,7 @@ const Trigger = React.forwardRef(
           ChevronDown,
           {
             size: "xs",
-            className: "relative ms-1 transition duration-300 group-data-[state=open]:rotate-180",
+            className: "relative ms-1 transition-transform duration-spatial-fast ease-spatial-fast group-data-[state=open]:rotate-180",
             "aria-hidden": "true"
           }
         )
@@ -96,6 +96,8 @@ const Viewport = React.forwardRef(
         "nx-motion nx-pop origin-top relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden",
         floatingSurface,
         "md:w-[var(--radix-navigation-menu-viewport-width)]",
+        // Resize between items on the spatial spring instead of snapping.
+        "transition-[width,height] duration-spatial-default ease-spatial-default motion-reduce:transition-none",
         className
       ),
       ...props

package/dist/components/NexubProvider/NexubProvider.d.ts

@@ -14,6 +14,12 @@ export interface NexubProviderProps {
     dateLocale?: Locale;
     /** Overrides for the default English strings. */
     messages?: Partial<NexubMessages>;
+    /**
+     * CSP nonce for the `<style>` tags Radix overlays inject at runtime (scroll
+     * lock, scrollbar gap). Pass the same per-request nonce as your
+     * `style-src-elem` so they work without `'unsafe-inline'`.
+     */
+    nonce?: string;
     children?: React.ReactNode;
 }
 /**
@@ -21,7 +27,7 @@ export interface NexubProviderProps {
  * It does not set `dir`/`lang` on <html> — the app does that (as it renders
  * <html>), so the page and CSS `rtl:` variants agree with this provider.
  */
-export declare function NexubProvider({ locale, dir, dateLocale, messages, children }: NexubProviderProps): React.JSX.Element;
+export declare function NexubProvider({ locale, dir, dateLocale, messages, nonce, children }: NexubProviderProps): React.JSX.Element;
 /** The active strings: defaults merged with the nearest NexubProvider's overrides. */
 export declare function useNexubMessages(): NexubMessages;
 /** The active locale (default 'en'), direction and optional date-fns Locale. */

package/dist/components/NexubProvider/NexubProvider.js

@@ -2,6 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { DirectionProvider } from "@radix-ui/react-direction";
+import { setNonce } from "get-nonce";
 import { defaultMessages, directionOf } from "@nexub/core";
 const NexubContext = React.createContext({
   locale: void 0,
@@ -9,7 +10,8 @@ const NexubContext = React.createContext({
   dateLocale: void 0,
   messages: defaultMessages
 });
-function NexubProvider({ locale = "en", dir, dateLocale, messages, children }) {
+function NexubProvider({ locale = "en", dir, dateLocale, messages, nonce, children }) {
+  if (nonce) setNonce(nonce);
   const resolvedDir = dir ?? directionOf(locale);
   const value = React.useMemo(
     () => ({ locale, dir: resolvedDir, dateLocale, messages: { ...defaultMessages, ...messages } }),

package/dist/components/PasswordInput/PasswordInput.js

@@ -14,12 +14,16 @@ const PasswordInput = React.forwardRef(
       onChange: onVisibleChange
     });
     const messages = useNexubMessages();
+    const autoId = React.useId();
+    const inputId = props.id ?? autoId;
     const toggleButton = /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         onClick: () => setShowPassword(!showPassword),
-        "aria-label": showPassword ? messages.hidePassword : messages.showPassword,
+        "aria-label": messages.showPassword,
+        "aria-pressed": showPassword,
+        "aria-controls": inputId,
         className: cn(
           "shrink-0 rounded-full text-[var(--color-on-surface-muted)] hover:text-[var(--color-on-surface)] transition-colors"
         ),
@@ -30,6 +34,7 @@ const PasswordInput = React.forwardRef(
       Input,
       {
         ref,
+        id: inputId,
         autoComplete: "current-password",
         ...props,
         type: showPassword ? "text" : "password",

package/dist/components/Progress/Progress.js

@@ -20,7 +20,7 @@ const progressTrackVariants = cva(
   }
 );
 const progressFillVariants = cva(
-  "h-full rounded-full transition-all duration-300 ease-in-out",
+  "h-full rounded-full transition-all duration-spatial-default ease-spatial-default",
   {
     variants: {
       tone: {

package/dist/components/Tabs/Tabs.js

@@ -6,7 +6,7 @@ import { cn } from "../../utils/cn.js";
 import { useMergedRefs } from "../../hooks/useMergedRefs.js";
 import { useSlidingIndicator } from "../../hooks/useSlidingIndicator.js";
 const Root = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixTabs.Root, { ref, className: cn("flex flex-col gap-3", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixTabs.Root, { ref, className: cn("flex flex-col gap-3 data-[orientation=vertical]:flex-row", className), ...props })
 );
 Root.displayName = "Tabs.Root";
 const List = React.forwardRef(
@@ -18,8 +18,12 @@ const List = React.forwardRef(
       {
         ref: useMergedRefs(ref, forwardedRef),
         className: cn(
-          "relative flex w-full items-stretch justify-start overflow-x-auto",
+          "group/tabs relative flex w-full items-stretch justify-start overflow-x-auto",
           "border-b border-[var(--color-outline-variant)]",
+          // Vertical: a column with the rule on the inline-end side.
+          "data-[orientation=vertical]:w-auto data-[orientation=vertical]:shrink-0 data-[orientation=vertical]:flex-col",
+          "data-[orientation=vertical]:overflow-x-visible data-[orientation=vertical]:overflow-y-auto",
+          "data-[orientation=vertical]:border-b-0 data-[orientation=vertical]:border-e",
           className
         ),
         ...props,
@@ -32,7 +36,10 @@ const List = React.forwardRef(
               className: cn(
                 "pointer-events-none absolute bottom-0 left-0 h-[3px] rounded-t-full bg-[var(--color-primary)]",
                 "w-[var(--nx-ind-w,0px)] translate-x-[var(--nx-ind-x,0px)] opacity-[var(--nx-ind-o,0)]",
-                "[[data-nx-indicator=ready]>&]:transition-[transform,width] [[data-nx-indicator=ready]>&]:duration-spatial-default [[data-nx-indicator=ready]>&]:ease-spatial-default"
+                "group-data-[orientation=vertical]/tabs:top-0 group-data-[orientation=vertical]/tabs:bottom-auto group-data-[orientation=vertical]/tabs:left-auto group-data-[orientation=vertical]/tabs:end-0",
+                "group-data-[orientation=vertical]/tabs:h-[var(--nx-ind-h,0px)] group-data-[orientation=vertical]/tabs:w-[3px] group-data-[orientation=vertical]/tabs:rounded-none group-data-[orientation=vertical]/tabs:rounded-s-full",
+                "group-data-[orientation=vertical]/tabs:translate-x-0 group-data-[orientation=vertical]/tabs:translate-y-[var(--nx-ind-y,0px)]",
+                "[[data-nx-indicator=ready]>&]:transition-[transform,width,height] [[data-nx-indicator=ready]>&]:duration-spatial-default [[data-nx-indicator=ready]>&]:ease-spatial-default"
               )
             }
           )
@@ -52,6 +59,7 @@ const Trigger = React.forwardRef(
         "nx-state-layer relative inline-flex h-control-md items-center justify-center whitespace-nowrap rounded-t-[var(--shape-field)] px-4 text-label-lg select-none",
         "text-[var(--color-on-surface-variant)] transition-colors duration-effects-fast ease-effects-fast",
         "data-[state=active]:text-[var(--color-primary)]",
+        "group-data-[orientation=vertical]/tabs:justify-start group-data-[orientation=vertical]/tabs:rounded-none group-data-[orientation=vertical]/tabs:rounded-s-[var(--shape-field)]",
         "disabled:pointer-events-none disabled:text-[var(--color-text-disabled)]",
         className
       ),
@@ -66,6 +74,8 @@ const Content = React.forwardRef(
     {
       ref,
       className: cn(
+        // Crossfade in on the effects spring (@starting-style, @nexub/themes/base).
+        "nx-tab-panel",
         className,
         // Radix hides inactive panels with the `hidden` attribute, which any
         // display class (`flex`, `md:grid`…) overrides. !important always wins.

package/dist/components/ThemeProvider/ThemeProvider.js

@@ -2,6 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect.js";
+const PRODUCTS = ["leap", "bookub", "payub", "founderub"];
 const GLASS_MODES = ["clear", "balanced", "tinted", "off"];
 const ThemeContext = React.createContext(void 0);
 ThemeContext.displayName = "ThemeContext";
@@ -165,7 +166,7 @@ function useTheme() {
 const jsString = (s) => JSON.stringify(s).replace(/</g, "\\u003c");
 function themeScriptSource(storageKey, productStorageKey, glassStorageKey = "nexub-glass", contrastStorageKey) {
   const contrast = contrastStorageKey ? `var c=localStorage.getItem(${jsString(contrastStorageKey)});if(['standard','medium','high'].indexOf(c)>-1)d.setAttribute('data-contrast',c);` : "";
-  const product = productStorageKey ? `var b=localStorage.getItem(${jsString(productStorageKey)});if(b&&b!=='base')d.setAttribute('data-product',b);` : "";
+  const product = productStorageKey ? `var b=localStorage.getItem(${jsString(productStorageKey)});if(${JSON.stringify(PRODUCTS)}.indexOf(b)>-1)d.setAttribute('data-product',b);` : "";
   const glass = `var g=localStorage.getItem(${jsString(glassStorageKey)});if(${JSON.stringify(GLASS_MODES)}.indexOf(g)>-1)d.setAttribute('data-glass',g);`;
   return `try{var d=document.documentElement,t=localStorage.getItem(${jsString(storageKey)});if(t==='light'||t==='dark')d.setAttribute('data-theme',t);${product}${glass}${contrast}}catch(e){}`;
 }

package/dist/hooks/useClassScrollLock.d.ts

@@ -1,6 +1,19 @@
+import * as React from 'react';
 /**
  * CSP-safe page scroll lock: toggles `nexub-scroll-lock` (from @nexub/themes/base)
  * on <html> instead of injecting a <style> tag. On while mounted; counted, so
  * nested overlays (a Sheet and a CommandPalette) share one lock.
  */
 export declare function useClassScrollLock(): void;
+export type ScrollLock = 'style' | 'class';
+/**
+ * Which scroll lock a modal Root asked for. `'style'` (7.x default) is Radix's
+ * react-remove-scroll, which injects a <style> (needs a CSP nonce, see
+ * NexubProvider `nonce`); `'class'` is the class lock above, no <style> at all.
+ */
+export declare const ScrollLockContext: React.Context<{
+    scrollLock: ScrollLock;
+    modal: boolean;
+}>;
+/** Plain overlay for scrollLock="class": Radix's RemoveScroll lives in its Overlay. */
+export declare const ClassLockOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/hooks/useClassScrollLock.js

@@ -13,6 +13,18 @@ function useClassScrollLock() {
     };
   }, []);
 }
+const ScrollLockContext = React.createContext({
+  scrollLock: "style",
+  modal: true
+});
+const ClassLockOverlay = React.forwardRef(
+  function ClassLockOverlay2(props, ref) {
+    useClassScrollLock();
+    return React.createElement("div", { ref, "data-state": "open", ...props });
+  }
+);
 export {
+  ClassLockOverlay,
+  ScrollLockContext,
   useClassScrollLock
 };

package/dist/hooks/useSlidingIndicator.d.ts

@@ -1,7 +1,7 @@
 import type * as React from 'react';
 /**
  * One indicator that slides to the active item (SegmentedControl thumb, Tabs
- * underline). Writes --nx-ind-x / -w / -o (opacity) on the (position: relative) root;
+ * underline). Writes --nx-ind-x / -w / -y / -h / -o (opacity) on the (position: relative) root;
  * CSS transitions do the motion. Sets data-nx-indicator="ready" one frame after
  * the first measure so the indicator doesn't animate in on mount.
  */