@godxjp/ui 20.0.0 → 20.2.0

package/dist/components/layout/app-shell.js

@@ -2,10 +2,14 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Menu } from "lucide-react";
+import { useMediaQuery } from "../../lib/hooks.js";
 import { useTranslation } from "../../i18n/use-translation.js";
-import { Button } from "../general/button.js";
 import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTrigger } from "../feedback/sheet.js";
 import { NavSurfaceProvider } from "./nav-surface.js";
+import { TopbarItem } from "./topbar-item.js";
+function useAppShellNavigationMode() {
+  return useMediaQuery("(width <= 56.25rem)") ? "drawer" : "docked";
+}
 function AppShell({
   sidebar,
   topbar,
@@ -19,6 +23,8 @@ function AppShell({
   responsiveNavigation = "drawer",
   topbarSpan = "content",
   navRail,
+  navRailPosition = "start",
+  navRailEnd,
   navRailLabel,
   mobileNav,
   mobileNavLabel,
@@ -26,11 +32,17 @@ function AppShell({
   onMobileNavOpenChange
 }) {
   const { t } = useTranslation();
-  const drawerNav = mobileNav !== void 0 ? mobileNav : navRail !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  const navigationMode = useAppShellNavigationMode();
+  const hasSidebar = sidebar !== void 0 && sidebar !== null && sidebar !== false;
+  const railContent = navRail === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
     navRail,
+    navRailEnd !== void 0 ? /* @__PURE__ */ jsx("div", { className: "app-nav-rail-end", children: navRailEnd }) : null
+  ] });
+  const drawerNav = mobileNav !== void 0 ? mobileNav : navRail !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    railContent,
     sidebar
   ] }) : sidebar;
-  const hasDrawer = responsiveNavigation === "drawer" && drawerNav != null;
+  const hasDrawer = responsiveNavigation === "drawer" && drawerNav != null && drawerNav !== false;
   const railInDrawer = mobileNav === void 0 && navRail !== void 0;
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
   const drawerOpen = mobileNavOpen ?? uncontrolledOpen;
@@ -38,7 +50,11 @@ function AppShell({
   const handleDrawerClick = (event) => {
     const target = event.target;
     const hit = target.closest("a[href], button, [role='menuitem']");
-    if (hit && !hit.classList.contains("sb-nav-group-trigger")) {
+    if (!hit) {
+      return;
+    }
+    const opensSomething = hit.hasAttribute("aria-expanded") || hit.hasAttribute("aria-haspopup") || hit.classList.contains("sb-nav-group-trigger");
+    if (!opensSomething) {
       setDrawerOpen(false);
     }
   };
@@ -54,7 +70,7 @@ function AppShell({
       );
     }
   }
-  const logoInRail = logo !== void 0 && topbarSpan !== "full";
+  const logoInRail = hasSidebar && logo !== void 0 && topbarSpan !== "full";
   const resolvedTopbar = topbar !== void 0 ? /* @__PURE__ */ jsxs("div", { className: "app-topbar-rail", children: [
     !logoInRail && logo !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-logo", children: logo }),
     /* @__PURE__ */ jsx("div", { className: "app-topbar-custom", children: topbar })
@@ -64,26 +80,26 @@ function AppShell({
     /* @__PURE__ */ jsx("div", { className: "app-topbar-spacer" }),
     topbarRight !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-right", children: topbarRight })
   ] });
-  const rail = /* @__PURE__ */ jsxs("aside", { className: "app-sidebar", "aria-label": t("layout.appShell.sidebarLabel"), children: [
+  const rail = hasSidebar ? /* @__PURE__ */ jsxs("aside", { className: "app-sidebar", "aria-label": t("layout.appShell.sidebarLabel"), children: [
     logoInRail && /* @__PURE__ */ jsx("div", { className: "app-sidebar-logo", children: logo }),
     sidebar
-  ] });
+  ] }) : null;
   const navRailRegion = navRail === void 0 ? null : /* @__PURE__ */ jsx(
     "aside",
     {
       className: "app-nav-rail",
+      "data-orientation": navRailPosition === "top" || navRailPosition === "bottom" ? "horizontal" : "vertical",
+      "data-edge": navRailPosition,
       "aria-label": navRailLabel ?? t("layout.appShell.navRailLabel"),
-      children: navRail
+      children: railContent
     }
   );
   const bar = !hasTopbarContent && !hasDrawer ? null : /* @__PURE__ */ jsxs("header", { className: "app-topbar ui-scale-fixed", "aria-label": t("layout.appShell.headerLabel"), children: [
     hasDrawer && /* @__PURE__ */ jsxs(Sheet, { open: drawerOpen, onOpenChange: setDrawerOpen, children: [
       /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-        Button,
+        TopbarItem,
         {
           type: "button",
-          variant: "ghost",
-          size: "sm",
           className: "app-mobile-nav-trigger",
           "aria-label": t("layout.appShell.openNav"),
           "aria-haspopup": "dialog",
@@ -105,7 +121,7 @@ function AppShell({
                 className: "app-mobile-nav-body px-[var(--app-shell-mobile-nav-inset)]",
                 onClick: handleDrawerClick,
                 children: railInDrawer ? /* @__PURE__ */ jsxs("div", { className: "app-mobile-nav-columns", children: [
-                  /* @__PURE__ */ jsx("div", { className: "app-mobile-nav-rail", children: navRail }),
+                  /* @__PURE__ */ jsx("div", { className: "app-mobile-nav-rail", children: railContent }),
                   /* @__PURE__ */ jsx(NavSurfaceProvider, { surface: "drawer", children: /* @__PURE__ */ jsx("div", { className: "app-mobile-nav-sections", children: sidebar }) })
                 ] }) : /* @__PURE__ */ jsx(NavSurfaceProvider, { surface: "drawer", children: drawerNav })
               }
@@ -120,11 +136,14 @@ function AppShell({
     "div",
     {
       className: "app-root",
-      "data-collapsed": sidebarCollapsed ? "true" : void 0,
+      "data-collapsed": hasSidebar && sidebarCollapsed ? "true" : void 0,
+      "data-sidebar": hasSidebar ? void 0 : "none",
       "data-responsive-navigation": responsiveNavigation,
+      "data-navigation": navigationMode,
       "data-topbar": hasTopbarContent ? void 0 : "none",
       "data-topbar-span": topbarSpan === "full" ? "full" : void 0,
       "data-nav-rail": navRail !== void 0 ? "" : void 0,
+      "data-nav-rail-position": navRail !== void 0 ? navRailPosition : void 0,
       children: [
         topbarSpan === "full" ? /* @__PURE__ */ jsxs(Fragment, { children: [
           bar,
@@ -145,5 +164,6 @@ function AppShell({
   );
 }
 export {
-  AppShell
+  AppShell,
+  useAppShellNavigationMode
 };

package/dist/components/layout/auth-shell.d.ts

@@ -7,4 +7,4 @@ export type { AuthShellProp, AuthShellProp as AuthShellProps, } from "../../prop
  * locale picker, a theme toggle), and `measure="wide"` opens the content slot to the split login
  * (a brand panel beside the card) that used to have no shell of its own.
  */
-export declare function AuthShell({ brand, actions, footer, children, variant, preset, measure, density, className, }: AuthShellProp): import("react").JSX.Element;
+export declare function AuthShell({ brand, actions, footer, children, variant, preset, measure, align, density, className, }: AuthShellProp): import("react").JSX.Element;

package/dist/components/layout/auth-shell.js

@@ -10,6 +10,7 @@ function AuthShell({
   variant = "default",
   preset = "default",
   measure = "default",
+  align,
   density,
   className
 }) {
@@ -22,6 +23,7 @@ function AuthShell({
       "data-variant": variant,
       "data-preset": preset === "default" ? void 0 : preset,
       "data-measure": measure === "default" ? void 0 : measure,
+      "data-align": align,
       "data-density": resolvedDensity,
       className: cn("ui-auth-shell", className),
       children: [

package/dist/components/layout/breadcrumb.d.ts

@@ -1,9 +1,21 @@
 import type { ElementType } from "react";
-import type { BreadcrumbProp } from "../../props/vocabulary/navigation.prop.js";
+import type { BreadcrumbItemRenderProp, BreadcrumbProp, BreadcrumbSeparatorProp } from "../../props/vocabulary/navigation.prop.js";
 export type BreadcrumbProps = {
     items: BreadcrumbProp;
     linkComponent?: ElementType;
     /** Override the `<nav>` landmark's accessible name. Defaults to a localized "Breadcrumb". */
     ariaLabel?: string;
+    /**
+     * Ant Design `separator`. Defaults to the chevron glyph. A string (`"/"`) or any node replaces
+     * it; `""` removes it. It is always `aria-hidden` — the trail's structure is carried by the
+     * `<ol>`/`<li>`, never by the glyph, so a screen reader never hears "slash" between segments.
+     */
+    separator?: BreadcrumbSeparatorProp;
+    /**
+     * Ant Design `itemRender`. Replaces the anchor/text of ONE segment while this component keeps
+     * owning the `<nav>`, the `<ol>`/`<li>`, the separators and `aria-current` — the parts that make
+     * the trail a landmark. Use it to hand the trail a router `<Link>` (Inertia, react-router).
+     */
+    itemRender?: BreadcrumbItemRenderProp;
 };
-export declare function Breadcrumb({ items, linkComponent: LinkComponent, ariaLabel, }: BreadcrumbProps): import("react").JSX.Element;
+export declare function Breadcrumb({ items, linkComponent: LinkComponent, ariaLabel, separator, itemRender, }: BreadcrumbProps): import("react").JSX.Element;

package/dist/components/layout/breadcrumb.js

@@ -1,21 +1,63 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRight } from "lucide-react";
+import { ChevronDown, ChevronRight } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../navigation/dropdown-menu.js";
 function Breadcrumb({
   items,
   linkComponent: LinkComponent = "a",
-  ariaLabel
+  ariaLabel,
+  separator,
+  itemRender
 }) {
   const { t } = useTranslation();
+  const separatorNode = separator === void 0 ? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }) : separator;
   return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel ?? t("navigation.breadcrumb.ariaLabel"), className: "ui-breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: items.map((item, index) => {
     const isLast = index === items.length - 1;
     return /* @__PURE__ */ jsxs("li", { className: "ui-breadcrumb-item", children: [
-      item.to && !isLast ? /* @__PURE__ */ jsx(LinkComponent, { href: item.to, to: item.to, className: "ui-breadcrumb-link", children: item.label }) : /* @__PURE__ */ jsx("span", { className: "ui-breadcrumb-current", "aria-current": isLast ? "page" : void 0, children: item.label }),
-      !isLast ? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }) : null
+      renderBreadcrumbSegment({ item, index, isLast, items, itemRender, LinkComponent }),
+      !isLast ? /* @__PURE__ */ jsx("span", { className: "ui-breadcrumb-separator", "aria-hidden": "true", children: separatorNode }) : null
     ] }, item.to ?? index);
   }) }) });
 }
+function renderBreadcrumbSegment({
+  item,
+  index,
+  isLast,
+  items,
+  itemRender,
+  LinkComponent
+}) {
+  if (itemRender) return itemRender(item, { index, isLast, items });
+  if (item.menu) {
+    const { items: menuItems, onSelect } = item.menu;
+    return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsxs(DropdownMenuTrigger, { className: "ui-breadcrumb-menu-trigger ui-focus-ring", children: [
+        item.label,
+        /* @__PURE__ */ jsx(ChevronDown, { className: "ui-breadcrumb-menu-icon", "aria-hidden": "true" })
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuContent, { placement: "bottomStart", children: menuItems.map((entry) => /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          disabled: entry.disabled,
+          onSelect: onSelect ? () => onSelect(entry.value) : void 0,
+          asChild: entry.to !== void 0,
+          children: entry.to !== void 0 ? /* @__PURE__ */ jsx(LinkComponent, { href: entry.to, to: entry.to, children: entry.label }) : entry.label
+        },
+        entry.value
+      )) })
+    ] });
+  }
+  if (item.to && !isLast) {
+    return /* @__PURE__ */ jsx(LinkComponent, { href: item.to, to: item.to, className: "ui-breadcrumb-link", children: item.label });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "ui-breadcrumb-current", "aria-current": isLast ? "page" : void 0, children: item.label });
+}
 export {
   Breadcrumb
 };

package/dist/components/layout/flex.d.ts

@@ -1,3 +1,3 @@
 import type { FlexProp } from "../../props/components/layout.prop.js";
 export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexProp, FlexProp as FlexProps, } from "../../props/components/layout.prop.js";
-export declare function Flex({ as: Element, direction, gap, gapRaw, pad, padRaw, align, justify, wrap, hideBelow, hideFrom, fill, width, className, style, children, ...props }: FlexProp): import("react").JSX.Element;
+export declare function Flex({ as: Element, direction, grow, shrink, surface, bleed, reveal, gap, gapRaw, pad, padRaw, align, justify, wrap, hideBelow, hideFrom, fill, width, className, style, children, ...props }: FlexProp): import("react").JSX.Element;

package/dist/components/layout/flex.js

@@ -2,11 +2,16 @@
 import { jsx } from "react/jsx-runtime";
 import { mergeAriaIds } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
-import { flexGapClass, padStyle } from "../../lib/variants.js";
+import { flexGapClass, padStyle, padStepToken } from "../../lib/variants.js";
 const toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
 function Flex({
   as: Element = "div",
   direction = "row",
+  grow,
+  shrink,
+  surface,
+  bleed,
+  reveal,
   gap = "md",
   gapRaw,
   pad,
@@ -37,10 +42,24 @@ function Flex({
       "aria-describedby": mergeAriaIds(props["aria-describedby"], ariaErrorMessage)
     };
   }
+  const responsive = typeof direction === "object";
+  const axes = responsive ? direction : { base: direction };
+  const cssDirection = (axis) => axis === "col" ? "column" : axis;
+  const directionVars = responsive ? Object.fromEntries(
+    Object.entries(axes).map(([step, axis]) => [
+      `--flex-direction-${step}`,
+      cssDirection(axis)
+    ])
+  ) : {};
   return /* @__PURE__ */ jsx(
     Element,
     {
-      "data-direction": direction,
+      "data-direction": responsive ? "responsive" : direction,
+      "data-grow": grow ? "" : void 0,
+      "data-shrink": shrink === false ? "false" : void 0,
+      "data-surface": surface,
+      "data-reveal": reveal,
+      "data-list": Element === "ul" ? "disc" : Element === "ol" ? "decimal" : void 0,
       "data-align": align,
       "data-justify": justify,
       "data-wrap": wrap ? "true" : void 0,
@@ -53,6 +72,8 @@ function Flex({
       "data-pad-raw": padRaw === void 0 ? void 0 : "",
       style: {
         ...style,
+        ...directionVars,
+        ...bleed === void 0 ? void 0 : { marginInline: `calc(-1 * ${padStepToken(bleed)})` },
         ...gapRaw === void 0 ? void 0 : { gap: `${gapRaw}px` },
         ...width === void 0 ? void 0 : { inlineSize: toCssLength(width) },
         ...padStyle(pad, padRaw)

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

@@ -7,6 +7,8 @@ export { NavList } from "./nav-list.js";
 export type { NavListProp, NavListProps } from "./nav-list.js";
 export { AppShell } from "./app-shell.js";
 export type { AppShellProps } from "./app-shell.js";
+export { AppLauncher } from "./app-launcher.js";
+export type { AppLauncherApp, AppLauncherGroup, AppLauncherLabels, AppLauncherProp, AppLauncherProps, } from "./app-launcher.js";
 export { OrgSwitcher } from "./org-switcher.js";
 export type { OrgSwitcherLabels, OrgSwitcherOrganization, OrgSwitcherProp, OrgSwitcherProps, } from "./org-switcher.js";
 export { AuthShell } from "./auth-shell.js";
@@ -54,3 +56,4 @@ export { LegalDocumentShell } from "./legal-document-shell.js";
 export type { LegalDocumentSectionProp, LegalDocumentShellProp, LegalDocumentShellProps, } from "./legal-document-shell.js";
 export { ServiceRolePanel } from "./service-role-panel.js";
 export type { ServiceRoleItemProp, ServiceRolePanelProp, ServiceRolePanelProps, } from "./service-role-panel.js";
+export { useAppShellNavigationMode } from "./app-shell.js";

package/dist/components/layout/index.js

@@ -3,6 +3,7 @@ import { Flex } from "./flex.js";
 import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";
 import { NavList } from "./nav-list.js";
 import { AppShell } from "./app-shell.js";
+import { AppLauncher } from "./app-launcher.js";
 import { OrgSwitcher } from "./org-switcher.js";
 import { AuthShell } from "./auth-shell.js";
 import { AuthDivider } from "./auth-divider.js";
@@ -25,8 +26,10 @@ import { Separator } from "./separator.js";
 import { AspectRatio } from "./aspect-ratio.js";
 import { LegalDocumentShell } from "./legal-document-shell.js";
 import { ServiceRolePanel } from "./service-role-panel.js";
+import { useAppShellNavigationMode } from "./app-shell.js";
 export {
   AccountChip,
+  AppLauncher,
   AppShell,
   AspectRatio,
   AuthAccountSummary,
@@ -58,5 +61,6 @@ export {
   SplitPane,
   Topbar,
   TopbarItem,
-  createSidebarLink
+  createSidebarLink,
+  useAppShellNavigationMode
 };

package/dist/components/layout/org-switcher.js

@@ -3,6 +3,14 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Check, ChevronsUpDown, Loader2, RotateCcw } from "lucide-react";
 import { cn } from "../../lib/utils.js";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from "../feedback/dialog.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
 import {
   Command,
@@ -163,7 +171,9 @@ function OrgSwitcher({
     [controlled, onOpenChange]
   );
   const compactViewport = useSheetResponsiveMode("auto") === "bottom";
-  const sheet = responsive === "sheet" || responsive === "auto" && compactViewport;
+  const responsivePair = responsive === "auto" || responsive === "dialog";
+  const sheet = responsive === "sheet" || responsivePair && compactViewport;
+  const dialog = responsive === "dialog" && !sheet;
   const current = organizations.find((organization) => organization.id === value);
   const fallbackName = current?.name ?? labels.title;
   const triggerLabel = labels.trigger(fallbackName);
@@ -210,6 +220,15 @@ function OrgSwitcher({
       )
     ] }) });
   }
+  if (dialog) {
+    return /* @__PURE__ */ jsx("div", { className: cn("ui-org-switcher", className), "data-collapsed": collapsed || void 0, children: /* @__PURE__ */ jsxs(Dialog, { open: resolvedOpen, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsxs(DialogContent, { className: "ui-org-switcher-dialog", children: [
+        /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: labels.title }) }),
+        /* @__PURE__ */ jsx(DialogBody, { children: panel })
+      ] })
+    ] }) });
+  }
   return /* @__PURE__ */ jsx("div", { className: cn("ui-org-switcher", className), "data-collapsed": collapsed || void 0, children: /* @__PURE__ */ jsxs(Popover, { open: resolvedOpen, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
     /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "ui-org-switcher-popover", "aria-label": labels.title, children: panel })

package/dist/components/layout/page-container.d.ts

@@ -2,7 +2,7 @@ import type { PageContainerProp, PageInsetProp } from "../../props/components/la
 export type { PageContainerProp, PageContainerProp as PageContainerProps, } from "../../props/components/layout.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbItemProp as BreadcrumbItem, } from "../../props/vocabulary/navigation.prop.js";
 export declare function PageContainerInset({ className, children, ...props }: PageInsetProp): import("react").JSX.Element;
-declare function PageContainerRoot({ title, subtitle, status, extra, toolbar, footer, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, headerLoading, density, variant, preset, headerLayout, headerScale, measure, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;
+declare function PageContainerRoot({ title, subtitle, status, extra, toolbar, footer, toolbarPad, footerPad, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, headerLoading, density, variant, preset, headerLayout, headerScale, measure, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;
 export declare const PageContainer: typeof PageContainerRoot & {
     Inset: typeof PageContainerInset;
 };

package/dist/components/layout/page-container.js

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { ChevronRight } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
-import { densityClass, pageContainerVariantClass } from "../../lib/variants.js";
+import { densityClass, pageContainerVariantClass, padStyle } from "../../lib/variants.js";
 function scrollParent(el) {
   let node = el?.parentElement ?? null;
   while (node) {
@@ -40,6 +40,8 @@ function PageContainerRoot({
   extra,
   toolbar,
   footer,
+  toolbarPad,
+  footerPad,
   breadcrumb,
   breadcrumbLabel,
   breadcrumbAriaLabel,
@@ -146,9 +148,9 @@ function PageContainerRoot({
             ]
           }
         ),
-        toolbar != null && /* @__PURE__ */ jsx("div", { className: "ui-page-toolbar", children: toolbar }),
+        toolbar != null && /* @__PURE__ */ jsx("div", { className: "ui-page-toolbar", style: padStyle(toolbarPad, void 0), children: toolbar }),
         children != null && /* @__PURE__ */ jsx("div", { className: "ui-page-body", children }),
-        footer && /* @__PURE__ */ jsx("footer", { className: "ui-page-footer", children: footer })
+        footer && /* @__PURE__ */ jsx("footer", { className: "ui-page-footer", style: padStyle(footerPad, void 0), children: footer })
       ]
     }
   );

package/dist/components/layout/responsive-grid.d.ts

@@ -1,12 +1,17 @@
 import type { ReactNode } from "react";
-import type { ResponsiveGridColumnsProp, ResponsiveGridPresetProp } from "../../props/components/layout.prop.js";
+import type { ResponsiveGridColumnsProp, ResponsiveGridFlowProp, ResponsiveGridPresetProp } from "../../props/components/layout.prop.js";
+import type { PadProp, PadRawProp } from "../../props/vocabulary/index.js";
 import type { GapProp } from "../../props/vocabulary/layout.prop.js";
 export type ResponsiveGridProps = {
+    pad?: PadProp;
+    padRaw?: PadRawProp;
     /** Gap between cells, the same steps as Flex. Default `md`. */
     gap?: GapProp;
     /** Optional structural class override. */
     className?: string;
     columns?: ResponsiveGridColumnsProp;
+    /** Keep collections in a horizontal sequence; pair with ScrollArea orientation="horizontal". */
+    flow?: ResponsiveGridFlowProp;
     /**
      * Named column geometry for a recognised collection shape — see `ResponsiveGridPresetProp`.
      * Wins over `columns` when both are set, so a caller migrating to a preset does not also need
@@ -15,4 +20,13 @@ export type ResponsiveGridProps = {
     preset?: ResponsiveGridPresetProp;
     children: ReactNode;
 };
-export declare function ResponsiveGrid({ columns, gap, preset, className, children, }: ResponsiveGridProps): import("react").JSX.Element;
+export declare function ResponsiveGrid({ columns, flow, gap, pad, padRaw, preset, className, children, }: ResponsiveGridProps): import("react").JSX.Element;
+export declare namespace ResponsiveGrid {
+    export { ResponsiveGridItem as Item };
+}
+/** A grid item owns its responsive span; no extra implicit columns on a narrow container. */
+export declare function ResponsiveGridItem({ span, children, className, }: {
+    span?: ResponsiveGridColumnsProp;
+    children?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/layout/responsive-grid.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { padStyle } from "../../lib/variants.js";
 import { cn } from "../../lib/utils.js";
 const RESPONSIVE_GRID_PRESET_COLUMNS = {
   "pricing-plans": { base: 1, sm: 3, md: 3, lg: 3 }
@@ -29,14 +30,40 @@ function toStyle(resolved) {
 }
 function ResponsiveGrid({
   columns = 4,
+  flow = "rows",
   gap,
+  pad,
+  padRaw,
   preset,
   className,
   children
 }) {
   const resolved = preset ? RESPONSIVE_GRID_PRESET_COLUMNS[preset] : resolveColumns(columns);
-  return /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid-scope", children: /* @__PURE__ */ jsx("div", { className: cn("ui-responsive-grid", className), "data-gap": gap, style: toStyle(resolved), children }) });
+  return /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid-scope", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("ui-responsive-grid", className),
+      "data-gap": gap,
+      "data-flow": flow === "columns" ? "columns" : void 0,
+      style: { ...toStyle(resolved), ...padStyle(pad, padRaw) },
+      "data-pad-raw": padRaw === void 0 ? void 0 : "",
+      children
+    }
+  ) });
 }
+function ResponsiveGridItem({
+  span = 1,
+  children,
+  className
+}) {
+  const steps = typeof span === "number" ? { base: 1, sm: span, md: span, lg: span } : resolveColumns(span);
+  const style = Object.fromEntries(
+    Object.entries(steps).map(([step, value]) => [`--responsive-grid-item-${step}`, value])
+  );
+  return /* @__PURE__ */ jsx("div", { className: cn("ui-responsive-grid-item", className), style, children });
+}
+ResponsiveGrid.Item = ResponsiveGridItem;
 export {
-  ResponsiveGrid
+  ResponsiveGrid,
+  ResponsiveGridItem
 };

package/dist/components/layout/sidebar.js

@@ -304,8 +304,9 @@ function Sidebar({
   const resolvedSections = sections ?? [];
   const surface = useNavSurface();
   collapsed = surface === "drawer" ? false : collapsed;
+  const brandNode = typeof brand === "function" ? brand(collapsed) : brand;
   return /* @__PURE__ */ jsxs("div", { className: "sb-root", "data-collapsed": collapsed ? "true" : void 0, children: [
-    brand !== void 0 ? /* @__PURE__ */ jsx(SidebarHeader, { children: brand }) : product ? (() => {
+    brand !== void 0 ? /* @__PURE__ */ jsx(SidebarHeader, { children: brandNode }) : product ? (() => {
       const interactive = onProductClick != null;
       const mark = /* @__PURE__ */ jsx(
         "span",

package/dist/components/layout/topbar-item.d.ts

@@ -11,6 +11,9 @@ export type { TopbarItemProp, TopbarItemProp as TopbarItemProps, } from "../../p
  * file resolves, including nothing at all while the `--focus-outline` switch ships off.
  */
 export declare const TopbarItem: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    hideBelow?: import("../../props/index.js").BreakpointProp;
+    badge?: React.ReactNode;
+    badgeTone?: import("../../props/components/layout.prop.js").SidebarBadgeToneProp;
     asChild?: boolean;
     children?: React.ReactNode;
     className?: import("../../props/index.js").ClassNameProp;

package/dist/components/layout/topbar-item.js

@@ -1,17 +1,32 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Slot } from "../../lib/slot.js";
 import { cn } from "../../lib/utils.js";
-const TopbarItem = React.forwardRef(function TopbarItem2({ asChild = false, className, type, ...props }, ref) {
+const TopbarItem = React.forwardRef(function TopbarItem2({ asChild = false, className, type, hideBelow, badge, badgeTone, children, ...props }, ref) {
   const Comp = asChild ? Slot : "button";
+  const showBadge = !asChild && badge !== void 0 && badge !== "";
+  const badgeNode = showBadge ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "topbar-item-badge",
+      className: "ui-topbar-item-badge",
+      "data-tone": badgeTone === "destructive" ? "destructive" : void 0,
+      children: badge
+    }
+  ) : null;
   return /* @__PURE__ */ jsx(
     Comp,
     {
       ref,
       "data-slot": "topbar-item",
+      "data-hide-below": hideBelow,
       className: cn("ui-topbar-item ui-focus-ring", className),
       type: asChild ? void 0 : type ?? "button",
-      ...props
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        children,
+        badgeNode
+      ] })
     }
   );
 });

package/dist/components/layout/topbar.d.ts

@@ -4,4 +4,4 @@ export type { TopbarProp, TopbarProp as TopbarProps } from "../../props/componen
  * Topbar — a PURE SLOT bar. It positions three clusters (`start` / `center` / `end`) and owns the
  * bar's flex layout; it does NOT bake any chrome.
  */
-export declare function Topbar({ start, center, end, className, children, ...props }: TopbarProp): import("react").JSX.Element;
+export declare function Topbar({ start, center, end, className, children, height, pad, style, ...props }: TopbarProp): import("react").JSX.Element;

package/dist/components/layout/topbar.js

@@ -1,11 +1,32 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { padStyle } from "../../lib/variants.js";
 import { cn } from "../../lib/utils.js";
-function Topbar({ start, center, end, className, children, ...props }) {
-  return /* @__PURE__ */ jsx("div", { "data-slot": "topbar", className: cn("ui-topbar", className), ...props, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-    start != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-start", className: "ui-topbar-start", children: start }) : null,
-    center != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-center", className: "ui-topbar-center", children: center }) : null,
-    end != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-end", className: "ui-topbar-end", children: end }) : null
-  ] }) });
+function Topbar({
+  start,
+  center,
+  end,
+  className,
+  children,
+  height,
+  pad,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-height": height,
+      style: { ...style, ...padStyle(pad, void 0) },
+      "data-slot": "topbar",
+      className: cn("ui-topbar", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        start != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-start", className: "ui-topbar-start", children: start }) : null,
+        center != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-center", className: "ui-topbar-center", children: center }) : null,
+        end != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-end", className: "ui-topbar-end", children: end }) : null
+      ] })
+    }
+  );
 }
 export {
   Topbar