@octaviaflow/core 3.0.10 → 3.0.12

package/dist/components/AuthCard/AuthCard.d.ts

@@ -38,6 +38,13 @@ export interface AuthTabsProps {
     className?: string;
 }
 export declare function AuthTabs({ tabs, defaultTab, value, onChange, className }: AuthTabsProps): import("react/jsx-runtime").JSX.Element;
+export interface AuthFieldRowProps {
+    children: ReactNode;
+    /** Grid template columns. Default: "1fr 1fr". */
+    columns?: string;
+    className?: string;
+}
+export declare function AuthFieldRow({ children, columns, className }: AuthFieldRowProps): import("react/jsx-runtime").JSX.Element;
 export type AuthBadgeTone = "neutral" | "org" | "personal" | "developer";
 export interface AuthBadgeProps {
     tone?: AuthBadgeTone;

package/dist/components/AuthCard/AuthCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AuthCard.d.ts","sourceRoot":"","sources":["../../../src/components/AuthCard/AuthCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAGjD,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,OAAO,EACP,MAAM,EACN,SAAS,GACV,EAAE,aAAa,2CAgBf;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAe,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAQ3E;AAKD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAYxF;AAKD,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,aAAa,2CA8BvF;AAKD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,KAAK,GAAG,UAAU,GAAG,WAAW,CAAC;AAEzE,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,SAAS,CAAC,EAAE,IAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,2CAIlF"}
+{"version":3,"file":"AuthCard.d.ts","sourceRoot":"","sources":["../../../src/components/AuthCard/AuthCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsB,KAAK,SAAS,EAA2B,MAAM,OAAO,CAAC;AAGpF,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,OAAO,EACP,MAAM,EACN,SAAS,GACV,EAAE,aAAa,2CAgBf;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAe,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAQ3E;AAKD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAYxF;AAKD,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,aAAa,2CA6EvF;AASD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,OAAmB,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CAa3F;AAKD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,KAAK,GAAG,UAAU,GAAG,WAAW,CAAC;AAEzE,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,SAAS,CAAC,EAAE,IAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,2CAIlF"}

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

@@ -1,2 +1,2 @@
-export { AuthBadge, type AuthBadgeProps, type AuthBadgeTone, AuthCard, type AuthCardProps, AuthDivider, type AuthDividerProps, AuthSection, type AuthSectionProps, type AuthTab, AuthTabs, type AuthTabsProps, } from "./AuthCard";
+export { AuthBadge, type AuthBadgeProps, type AuthBadgeTone, AuthCard, type AuthCardProps, AuthDivider, type AuthDividerProps, AuthFieldRow, type AuthFieldRowProps, AuthSection, type AuthSectionProps, type AuthTab, AuthTabs, type AuthTabsProps, } from "./AuthCard";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/AuthCard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AuthCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,QAAQ,EACR,KAAK,aAAa,EAClB,WAAW,EACX,KAAK,gBAAgB,EACrB,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,OAAO,EACZ,QAAQ,EACR,KAAK,aAAa,GACnB,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AuthCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,QAAQ,EACR,KAAK,aAAa,EAClB,WAAW,EACX,KAAK,gBAAgB,EACrB,YAAY,EACZ,KAAK,iBAAiB,EACtB,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,OAAO,EACZ,QAAQ,EACR,KAAK,aAAa,GACnB,MAAM,YAAY,CAAC"}

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -19,6 +19,18 @@ export interface DropdownMenuProps {
      * supplies its own button styling.
      */
     triggerClassName?: string;
+    /**
+     * Close the menu when the user clicks (mousedown) outside both the menu
+     * and the trigger. Default: true — the standard popover behaviour users
+     * expect. Disable only when you need an explicitly-controlled menu
+     * (e.g. anchored to a different dismissal flow).
+     */
+    closeOnOutsideClick?: boolean;
+    /**
+     * Close the menu when the user presses Escape. Default: true.
+     * Disable only if Escape is needed by a parent surface.
+     */
+    closeOnEscape?: boolean;
     /**
      * Accessible name for the trigger button. Required when `trigger` is not
      * a plain string (e.g. an icon-only trigger). When omitted and `trigger`
@@ -28,5 +40,5 @@ export interface DropdownMenuProps {
     /** id of an element that labels the trigger; alternative to aria-label. */
     "aria-labelledby"?: string;
 }
-export declare function DropdownMenu({ trigger, items, align, className, triggerClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenu({ trigger, items, align, className, triggerClassName, closeOnOutsideClick, closeOnEscape, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DropdownMenu.d.ts.map

package/dist/components/DropdownMenu/DropdownMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAQ/C,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAsID,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,KAAe,EACf,SAAS,EACT,gBAAgB,EAChB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,GAClC,EAAE,iBAAiB,2CA0CnB"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAQ1D,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AA8KD,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,KAAe,EACf,SAAS,EACT,gBAAgB,EAChB,mBAA0B,EAC1B,aAAoB,EACpB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,GAClC,EAAE,iBAAiB,2CA4CnB"}

package/dist/index.cjs

@@ -415,24 +415,61 @@ function AuthTabs({ tabs, defaultTab, value, onChange, className }) {
     onChange?.(id);
   };
   const activeTab = tabs.find((t) => t.id === active) ?? tabs[0];
+  const scopeId = (0, import_react2.useId)();
+  const tabRefs = (0, import_react2.useRef)({});
+  const handleKeyDown = (e) => {
+    const ids = tabs.map((t) => t.id);
+    const currentIdx = ids.indexOf(active);
+    if (currentIdx === -1) return;
+    let nextIdx = null;
+    if (e.key === "ArrowRight") nextIdx = (currentIdx + 1) % ids.length;
+    else if (e.key === "ArrowLeft") nextIdx = (currentIdx - 1 + ids.length) % ids.length;
+    else if (e.key === "Home") nextIdx = 0;
+    else if (e.key === "End") nextIdx = ids.length - 1;
+    if (nextIdx === null) return;
+    e.preventDefault();
+    const nextId = ids[nextIdx];
+    select(nextId);
+    tabRefs.current[nextId]?.focus();
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("ods-auth-tabs", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "ods-auth-tabs__list", role: "tablist", children: tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      "button",
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "ods-auth-tabs__list", role: "tablist", children: tabs.map((t) => {
+      const isActive2 = t.id === active;
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "button",
+        {
+          ref: (el) => {
+            tabRefs.current[t.id] = el;
+          },
+          type: "button",
+          role: "tab",
+          id: `${scopeId}-tab-${t.id}`,
+          "aria-selected": isActive2,
+          "aria-controls": `${scopeId}-panel-${t.id}`,
+          tabIndex: isActive2 ? 0 : -1,
+          className: cn("ods-auth-tabs__tab", isActive2 && "ods-auth-tabs__tab--active"),
+          onClick: () => select(t.id),
+          onKeyDown: handleKeyDown,
+          children: [
+            t.icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ods-auth-tabs__icon", children: t.icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ods-auth-tabs__label", children: t.label }),
+            t.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ods-auth-tabs__desc", children: t.description })
+          ]
+        },
+        t.id
+      );
+    }) }),
+    activeTab && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
       {
-        type: "button",
-        role: "tab",
-        "aria-selected": t.id === active,
-        className: cn("ods-auth-tabs__tab", t.id === active && "ods-auth-tabs__tab--active"),
-        onClick: () => select(t.id),
-        children: [
-          t.icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ods-auth-tabs__icon", children: t.icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ods-auth-tabs__label", children: t.label }),
-          t.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ods-auth-tabs__desc", children: t.description })
-        ]
-      },
-      t.id
-    )) }),
-    activeTab && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "ods-auth-tabs__panel", children: activeTab.content })
+        role: "tabpanel",
+        id: `${scopeId}-panel-${activeTab.id}`,
+        "aria-labelledby": `${scopeId}-tab-${activeTab.id}`,
+        tabIndex: 0,
+        className: "ods-auth-tabs__panel",
+        children: activeTab.content
+      }
+    )
   ] });
 }
 function AuthBadge({ tone = "neutral", children, className }) {
@@ -6488,9 +6525,37 @@ function MenuPopup({
   menuItems,
   triggerRef,
   align,
-  className
+  className,
+  closeOnOutsideClick,
+  closeOnEscape
 }) {
   const menuRef = (0, import_react31.useRef)(null);
+  (0, import_react31.useEffect)(() => {
+    if (!state.isOpen || !closeOnOutsideClick) return;
+    const handler = (e) => {
+      const target = e.target;
+      if (!target) return;
+      const insideMenu = menuRef.current?.contains(target);
+      const insideTrigger = triggerRef.current?.contains(target);
+      if (!insideMenu && !insideTrigger) {
+        state.close();
+      }
+    };
+    document.addEventListener("mousedown", handler, true);
+    return () => document.removeEventListener("mousedown", handler, true);
+  }, [state.isOpen, closeOnOutsideClick]);
+  (0, import_react31.useEffect)(() => {
+    if (!state.isOpen || !closeOnEscape) return;
+    const handler = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        state.close();
+        triggerRef.current?.focus();
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [state.isOpen, closeOnEscape]);
   const nonSepItems = menuItems.filter((i) => !i.separator);
   const children = nonSepItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)($05678f3aee5e7d1a$export$6d08773d2e66f8f2, { textValue: item.label, children: item.label }, idx));
   const treeState = $6b915bde6cd300dd$export$728d6ba534403756({
@@ -6570,6 +6635,8 @@ function DropdownMenu({
   align = "start",
   className,
   triggerClassName,
+  closeOnOutsideClick = true,
+  closeOnEscape = true,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledby
 }) {
@@ -6604,7 +6671,9 @@ function DropdownMenu({
         menuItems: items,
         triggerRef,
         align,
-        className
+        className,
+        closeOnOutsideClick,
+        closeOnEscape
       }
     )
   ] });
@@ -11460,8 +11529,9 @@ function RailItem({
   tooltipDelay,
   suppressTooltip
 }) {
-  const [tipOpen, setTipOpen] = (0, import_react53.useState)(false);
+  const [open, setOpen] = (0, import_react53.useState)(false);
   const timerRef = (0, import_react53.useRef)(null);
+  const hasChildren = !!(item.children && item.children.length > 0);
   const clear = () => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);
@@ -11472,11 +11542,11 @@ function RailItem({
   const show = () => {
     if (suppressTooltip) return;
     clear();
-    timerRef.current = setTimeout(() => setTipOpen(true), tooltipDelay);
+    timerRef.current = setTimeout(() => setOpen(true), tooltipDelay);
   };
   const hide = () => {
     clear();
-    setTipOpen(false);
+    setOpen(false);
   };
   const Comp = item.href ? "a" : "button";
   const labelText = typeof item.label === "string" ? item.label : void 0;
@@ -11495,13 +11565,20 @@ function RailItem({
             type: item.href ? void 0 : "button",
             href: item.href,
             onClick: item.onClick,
-            className: cn("ods-sidebar__rail-item", item.active && "ods-sidebar__rail-item--active"),
+            className: cn(
+              "ods-sidebar__rail-item",
+              hasChildren && "ods-sidebar__rail-item--parent",
+              item.active && "ods-sidebar__rail-item--active"
+            ),
             "aria-current": item.active ? "page" : void 0,
             "aria-label": labelText,
+            "aria-haspopup": hasChildren ? "menu" : void 0,
+            "aria-expanded": hasChildren ? open : void 0,
             children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ods-sidebar__rail-icon", children: item.icon })
           }
         ),
-        tipOpen && labelText && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "ods-sidebar__rail-tooltip", role: "tooltip", children: [
+        open && labelText && hasChildren && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(RailFlyout, { title: labelText, items: item.children ?? [] }),
+        open && labelText && !hasChildren && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "ods-sidebar__rail-tooltip", role: "tooltip", children: [
           /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ods-sidebar__rail-tooltip-label", children: labelText }),
           item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("kbd", { className: "ods-sidebar__rail-kbd", children: item.shortcut })
         ] })
@@ -11509,6 +11586,34 @@ function RailItem({
     }
   );
 }
+function RailFlyout({ title, items }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "ods-sidebar__rail-flyout", role: "menu", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "ods-sidebar__rail-flyout-header", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ods-sidebar__rail-flyout-title", children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("ul", { className: "ods-sidebar__rail-flyout-list", children: items.map((child) => {
+      const ChildComp = child.href ? "a" : "button";
+      return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+        ChildComp,
+        {
+          type: child.href ? void 0 : "button",
+          href: child.href,
+          onClick: child.onClick,
+          role: "menuitem",
+          className: cn(
+            "ods-sidebar__rail-flyout-item",
+            child.active && "ods-sidebar__rail-flyout-item--active"
+          ),
+          "aria-current": child.active ? "page" : void 0,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ods-sidebar__rail-flyout-icon", children: child.icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ods-sidebar__rail-flyout-label", children: child.label }),
+            child.tag && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ods-sidebar__rail-flyout-tag", children: child.tag }),
+            child.badge && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ods-sidebar__rail-flyout-badge", children: child.badge })
+          ]
+        }
+      ) }, child.id);
+    }) })
+  ] });
+}
 function ExpandedLayout({
   logo,
   brand,