cetec-design-system 3.5.0-0 → 3.6.0-0

package/dist/index.js

@@ -984,7 +984,7 @@ const spinnerVariantKeys = [
   "inverse",
   "centered"
 ];
-const getVariantProps$t = (variants) => ({ ...spinnerDefaultVariants, ...compact(variants) });
+const getVariantProps$u = (variants) => ({ ...spinnerDefaultVariants, ...compact(variants) });
 const spinner = /* @__PURE__ */ Object.assign(spinnerFn, {
   __recipe__: false,
   __name__: "spinner",
@@ -1009,7 +1009,7 @@ const spinner = /* @__PURE__ */ Object.assign(spinnerFn, {
   splitVariantProps(props) {
     return splitProps$1(props, spinnerVariantKeys);
   },
-  getVariantProps: getVariantProps$t
+  getVariantProps: getVariantProps$u
 });
 const tagFn = /* @__PURE__ */ createRecipe("tag", {
   "variant": "default",
@@ -1677,7 +1677,7 @@ const toggleFn = memo((props = {}) => {
   return Object.fromEntries(toggleSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const toggleVariantKeys = [];
-const getVariantProps$s = (variants) => ({ ...toggleDefaultVariants, ...compact(variants) });
+const getVariantProps$t = (variants) => ({ ...toggleDefaultVariants, ...compact(variants) });
 const toggle = /* @__PURE__ */ Object.assign(toggleFn, {
   __recipe__: false,
   __name__: "toggle",
@@ -1688,7 +1688,7 @@ const toggle = /* @__PURE__ */ Object.assign(toggleFn, {
   splitVariantProps(props) {
     return splitProps$1(props, toggleVariantKeys);
   },
-  getVariantProps: getVariantProps$s
+  getVariantProps: getVariantProps$t
 });
 const alertDefaultVariants = {
   "tone": "info"
@@ -1731,7 +1731,7 @@ const alertFn = memo((props = {}) => {
 const alertVariantKeys = [
   "tone"
 ];
-const getVariantProps$r = (variants) => ({ ...alertDefaultVariants, ...compact(variants) });
+const getVariantProps$s = (variants) => ({ ...alertDefaultVariants, ...compact(variants) });
 const alert = /* @__PURE__ */ Object.assign(alertFn, {
   __recipe__: false,
   __name__: "alert",
@@ -1750,7 +1750,7 @@ const alert = /* @__PURE__ */ Object.assign(alertFn, {
   splitVariantProps(props) {
     return splitProps$1(props, alertVariantKeys);
   },
-  getVariantProps: getVariantProps$r
+  getVariantProps: getVariantProps$s
 });
 const autocompleteDefaultVariants = {
   "size": "md",
@@ -1807,7 +1807,7 @@ const autocompleteVariantKeys = [
   "layer",
   "size"
 ];
-const getVariantProps$q = (variants) => ({ ...autocompleteDefaultVariants, ...compact(variants) });
+const getVariantProps$r = (variants) => ({ ...autocompleteDefaultVariants, ...compact(variants) });
 const autocomplete = /* @__PURE__ */ Object.assign(autocompleteFn, {
   __recipe__: false,
   __name__: "autocomplete",
@@ -1829,7 +1829,7 @@ const autocomplete = /* @__PURE__ */ Object.assign(autocompleteFn, {
   splitVariantProps(props) {
     return splitProps$1(props, autocompleteVariantKeys);
   },
-  getVariantProps: getVariantProps$q
+  getVariantProps: getVariantProps$r
 });
 const avatarDefaultVariants = {
   "size": "md",
@@ -1866,7 +1866,7 @@ const avatarVariantKeys = [
   "size",
   "shape"
 ];
-const getVariantProps$p = (variants) => ({ ...avatarDefaultVariants, ...compact(variants) });
+const getVariantProps$q = (variants) => ({ ...avatarDefaultVariants, ...compact(variants) });
 const avatar = /* @__PURE__ */ Object.assign(avatarFn, {
   __recipe__: false,
   __name__: "avatar",
@@ -1891,7 +1891,7 @@ const avatar = /* @__PURE__ */ Object.assign(avatarFn, {
   splitVariantProps(props) {
     return splitProps$1(props, avatarVariantKeys);
   },
-  getVariantProps: getVariantProps$p
+  getVariantProps: getVariantProps$q
 });
 const badgeDefaultVariants = {
   "size": "md",
@@ -1918,7 +1918,7 @@ const badgeVariantKeys = [
   "dot",
   "variant"
 ];
-const getVariantProps$o = (variants) => ({ ...badgeDefaultVariants, ...compact(variants) });
+const getVariantProps$p = (variants) => ({ ...badgeDefaultVariants, ...compact(variants) });
 const badge = /* @__PURE__ */ Object.assign(badgeFn, {
   __recipe__: false,
   __name__: "badge",
@@ -1954,7 +1954,7 @@ const badge = /* @__PURE__ */ Object.assign(badgeFn, {
   splitVariantProps(props) {
     return splitProps$1(props, badgeVariantKeys);
   },
-  getVariantProps: getVariantProps$o
+  getVariantProps: getVariantProps$p
 });
 const breadcrumbsDefaultVariants = {};
 const breadcrumbsCompoundVariants = [];
@@ -1981,7 +1981,7 @@ const breadcrumbsFn = memo((props = {}) => {
   return Object.fromEntries(breadcrumbsSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const breadcrumbsVariantKeys = [];
-const getVariantProps$n = (variants) => ({ ...breadcrumbsDefaultVariants, ...compact(variants) });
+const getVariantProps$o = (variants) => ({ ...breadcrumbsDefaultVariants, ...compact(variants) });
 const breadcrumbs = /* @__PURE__ */ Object.assign(breadcrumbsFn, {
   __recipe__: false,
   __name__: "breadcrumbs",
@@ -1992,7 +1992,7 @@ const breadcrumbs = /* @__PURE__ */ Object.assign(breadcrumbsFn, {
   splitVariantProps(props) {
     return splitProps$1(props, breadcrumbsVariantKeys);
   },
-  getVariantProps: getVariantProps$n
+  getVariantProps: getVariantProps$o
 });
 const buttonDefaultVariants = {
   "variant": "standard",
@@ -2023,7 +2023,7 @@ const buttonVariantKeys = [
   "before",
   "after"
 ];
-const getVariantProps$m = (variants) => ({ ...buttonDefaultVariants, ...compact(variants) });
+const getVariantProps$n = (variants) => ({ ...buttonDefaultVariants, ...compact(variants) });
 const button = /* @__PURE__ */ Object.assign(buttonFn, {
   __recipe__: false,
   __name__: "button",
@@ -2057,7 +2057,7 @@ const button = /* @__PURE__ */ Object.assign(buttonFn, {
   splitVariantProps(props) {
     return splitProps$1(props, buttonVariantKeys);
   },
-  getVariantProps: getVariantProps$m
+  getVariantProps: getVariantProps$n
 });
 const calendarDefaultVariants = {
   "type": "days"
@@ -2096,7 +2096,7 @@ const calendarFn = memo((props = {}) => {
 const calendarVariantKeys = [
   "type"
 ];
-const getVariantProps$l = (variants) => ({ ...calendarDefaultVariants, ...compact(variants) });
+const getVariantProps$m = (variants) => ({ ...calendarDefaultVariants, ...compact(variants) });
 const calendar = /* @__PURE__ */ Object.assign(calendarFn, {
   __recipe__: false,
   __name__: "calendar",
@@ -2113,7 +2113,7 @@ const calendar = /* @__PURE__ */ Object.assign(calendarFn, {
   splitVariantProps(props) {
     return splitProps$1(props, calendarVariantKeys);
   },
-  getVariantProps: getVariantProps$l
+  getVariantProps: getVariantProps$m
 });
 const checkboxDefaultVariants = {};
 const checkboxCompoundVariants = [];
@@ -2140,7 +2140,7 @@ const checkboxFn = memo((props = {}) => {
   return Object.fromEntries(checkboxSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const checkboxVariantKeys = [];
-const getVariantProps$k = (variants) => ({ ...checkboxDefaultVariants, ...compact(variants) });
+const getVariantProps$l = (variants) => ({ ...checkboxDefaultVariants, ...compact(variants) });
 const checkbox = /* @__PURE__ */ Object.assign(checkboxFn, {
   __recipe__: false,
   __name__: "checkbox",
@@ -2151,7 +2151,7 @@ const checkbox = /* @__PURE__ */ Object.assign(checkboxFn, {
   splitVariantProps(props) {
     return splitProps$1(props, checkboxVariantKeys);
   },
-  getVariantProps: getVariantProps$k
+  getVariantProps: getVariantProps$l
 });
 const chipDefaultVariants = {
   "size": "md"
@@ -2189,7 +2189,7 @@ const chipVariantKeys = [
   "after",
   "dismissable"
 ];
-const getVariantProps$j = (variants) => ({ ...chipDefaultVariants, ...compact(variants) });
+const getVariantProps$k = (variants) => ({ ...chipDefaultVariants, ...compact(variants) });
 const chip = /* @__PURE__ */ Object.assign(chipFn, {
   __recipe__: false,
   __name__: "chip",
@@ -2216,7 +2216,7 @@ const chip = /* @__PURE__ */ Object.assign(chipFn, {
   splitVariantProps(props) {
     return splitProps$1(props, chipVariantKeys);
   },
-  getVariantProps: getVariantProps$j
+  getVariantProps: getVariantProps$k
 });
 const dateMenusDefaultVariants = {};
 const dateMenusCompoundVariants = [];
@@ -2239,7 +2239,7 @@ const dateMenusFn = memo((props = {}) => {
   return Object.fromEntries(dateMenusSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const dateMenusVariantKeys = [];
-const getVariantProps$i = (variants) => ({ ...dateMenusDefaultVariants, ...compact(variants) });
+const getVariantProps$j = (variants) => ({ ...dateMenusDefaultVariants, ...compact(variants) });
 const dateMenus = /* @__PURE__ */ Object.assign(dateMenusFn, {
   __recipe__: false,
   __name__: "dateMenus",
@@ -2250,7 +2250,7 @@ const dateMenus = /* @__PURE__ */ Object.assign(dateMenusFn, {
   splitVariantProps(props) {
     return splitProps$1(props, dateMenusVariantKeys);
   },
-  getVariantProps: getVariantProps$i
+  getVariantProps: getVariantProps$j
 });
 const dateTimeMenusDefaultVariants = {};
 const dateTimeMenusCompoundVariants = [];
@@ -2273,7 +2273,7 @@ const dateTimeMenusFn = memo((props = {}) => {
   return Object.fromEntries(dateTimeMenusSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const dateTimeMenusVariantKeys = [];
-const getVariantProps$h = (variants) => ({ ...dateTimeMenusDefaultVariants, ...compact(variants) });
+const getVariantProps$i = (variants) => ({ ...dateTimeMenusDefaultVariants, ...compact(variants) });
 const dateTimeMenus = /* @__PURE__ */ Object.assign(dateTimeMenusFn, {
   __recipe__: false,
   __name__: "dateTimeMenus",
@@ -2284,6 +2284,80 @@ const dateTimeMenus = /* @__PURE__ */ Object.assign(dateTimeMenusFn, {
   splitVariantProps(props) {
     return splitProps$1(props, dateTimeMenusVariantKeys);
   },
+  getVariantProps: getVariantProps$i
+});
+const drawerDefaultVariants = {
+  "side": "right",
+  "size": "md",
+  "scrollable": true
+};
+const drawerCompoundVariants = [];
+const drawerSlotNames = [
+  [
+    "overlay",
+    "drawer__overlay"
+  ],
+  [
+    "container",
+    "drawer__container"
+  ],
+  [
+    "header",
+    "drawer__header"
+  ],
+  [
+    "title",
+    "drawer__title"
+  ],
+  [
+    "closeButton",
+    "drawer__closeButton"
+  ],
+  [
+    "body",
+    "drawer__body"
+  ],
+  [
+    "footer",
+    "drawer__footer"
+  ]
+];
+const drawerSlotFns = /* @__PURE__ */ drawerSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, drawerDefaultVariants, getSlotCompoundVariant(drawerCompoundVariants, slotName))]);
+const drawerFn = memo((props = {}) => {
+  return Object.fromEntries(drawerSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const drawerVariantKeys = [
+  "side",
+  "size",
+  "scrollable"
+];
+const getVariantProps$h = (variants) => ({ ...drawerDefaultVariants, ...compact(variants) });
+const drawer = /* @__PURE__ */ Object.assign(drawerFn, {
+  __recipe__: false,
+  __name__: "drawer",
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: drawerVariantKeys,
+  variantMap: {
+    "side": [
+      "right",
+      "left"
+    ],
+    "size": [
+      "sm",
+      "md",
+      "lg",
+      "xl",
+      "full"
+    ],
+    "scrollable": [
+      "true",
+      "false"
+    ]
+  },
+  splitVariantProps(props) {
+    return splitProps$1(props, drawerVariantKeys);
+  },
   getVariantProps: getVariantProps$h
 });
 const formFieldDefaultVariants = {
@@ -18338,6 +18412,52 @@ const hasMatchingItems = (children, filterContext) => {
     return true;
   });
 };
+const findSubMenuKeyPath = (children, target, trail = []) => {
+  for (const childNode of Children.toArray(children)) {
+    if (!isValidElement(childNode)) {
+      continue;
+    }
+    const child = childNode;
+    const componentType = getComponentType(child);
+    const nextTrail = [...trail, String(child.key)];
+    if (componentType === MENU_COMPONENT_TYPES.subMenu) {
+      if (child.props.children === target) {
+        return nextTrail;
+      }
+      const nested = findSubMenuKeyPath(
+        child.props.children,
+        target,
+        nextTrail
+      );
+      if (nested) {
+        return nested;
+      }
+    } else if (componentType === MENU_COMPONENT_TYPES.group) {
+      const nested = findSubMenuKeyPath(
+        child.props.children,
+        target,
+        nextTrail
+      );
+      if (nested) {
+        return nested;
+      }
+    }
+  }
+  return null;
+};
+const findSubMenuChildren = (children, keyPath) => {
+  const [key, ...rest] = keyPath;
+  if (key === void 0) {
+    return children;
+  }
+  const match = Children.toArray(children).find(
+    (childNode) => isValidElement(childNode) && String(childNode.key) === key
+  );
+  if (!match) {
+    return void 0;
+  }
+  return findSubMenuChildren(match.props.children, rest);
+};
 const getHighlightedTextParts = (value, query) => {
   if (!query.trim()) {
     return [{ text: value, match: false }];
@@ -18402,6 +18522,8 @@ function navigateListMainAxisLoop(listRef, direction, previousIndex) {
   }
   return previousIndex ?? null;
 }
+const focusableInLevelSelector = 'input:not([disabled]),select:not([disabled]),textarea:not([disabled]),button:not([disabled]),a[href],[tabindex]:not([tabindex="-1"])';
+const isTextEntryTarget = (target) => target instanceof HTMLElement && (target.isContentEditable || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement || target instanceof HTMLInputElement && !["button", "checkbox", "submit", "reset"].includes(target.type));
 const defaultGetItemText = ({
   label: label2,
   description
@@ -18509,6 +18631,7 @@ const Menu = (props) => {
     }
     onOpenChange == null ? void 0 : onOpenChange(nextOpen);
   };
+  const diginFocusIntentRef = useRef(null);
   const [diginLevels, setDiginLevels] = useState([]);
   const [wrapperSize, setWrapperSize] = useState({
     width: null,
@@ -18551,7 +18674,10 @@ const Menu = (props) => {
   const focus = useFocus(floating.context, {
     enabled: hasReference && triggerInteraction === "focus"
   });
-  const dismiss = useDismiss(floating.context, { enabled: hasReference });
+  const dismiss = useDismiss(floating.context, {
+    enabled: hasReference,
+    escapeKey: diginDepth === 0
+  });
   const role = useRole(floating.context, { role: "menu" });
   const listNavigation = useListNavigation(floating.context, {
     listRef,
@@ -18577,7 +18703,11 @@ const Menu = (props) => {
     }),
     [filterMode, getItemText, highlightMatches, query]
   );
-  const activeLevelChildren = ((_a = diginLevels[diginLevels.length - 1]) == null ? void 0 : _a.children) ?? children;
+  const liveDiginLevels = diginLevels.map((level) => ({
+    ...level,
+    children: (level.path && findSubMenuChildren(children, level.path)) ?? level.children
+  }));
+  const activeLevelChildren = ((_a = liveDiginLevels[liveDiginLevels.length - 1]) == null ? void 0 : _a.children) ?? children;
   const hasVisibleResults = hasMatchingItems(
     activeLevelChildren,
     filterContextValue
@@ -18593,6 +18723,8 @@ const Menu = (props) => {
       setDiginLevels([]);
     },
     onPushDiginLevel: (title, levelChildren) => {
+      const returnIndex = activeIndex;
+      diginFocusIntentRef.current = "first";
       setDiginLevels((prev) => {
         const activeLevel2 = prev[prev.length - 1];
         if (activeLevel2 && activeLevel2.title === title && activeLevel2.children === levelChildren) {
@@ -18603,29 +18735,169 @@ const Menu = (props) => {
           {
             key: `${title}-${prev.length}`,
             title,
-            children: levelChildren
+            children: levelChildren,
+            returnIndex,
+            path: findSubMenuKeyPath(children, levelChildren)
           }
         ];
       });
     },
     onPopDiginLevel: () => {
+      const poppedLevel = diginLevels[diginLevels.length - 1];
+      if (!poppedLevel) {
+        return;
+      }
+      diginFocusIntentRef.current = { index: poppedLevel.returnIndex };
       setDiginLevels((prev) => prev.slice(0, -1));
     },
     diginDepth,
     onMenubarEdgeNavigate
   };
+  useEffect(() => {
+    const intent = diginFocusIntentRef.current;
+    if (!intent) {
+      return;
+    }
+    diginFocusIntentRef.current = null;
+    setActiveIndex(null);
+    let timer;
+    const focusLevel = (attemptsLeft) => {
+      var _a2;
+      const levelElement = activeLevelRef.current;
+      const index2 = intent === "first" ? findFirstEnabledListIndex(listRef) : intent.index;
+      const item = index2 === null ? null : listRef.current[index2];
+      if (item && item.isConnected && (levelElement == null ? void 0 : levelElement.contains(item)) && !item.hasAttribute("disabled")) {
+        item.focus({ preventScroll: true });
+        (_a2 = item.scrollIntoView) == null ? void 0 : _a2.call(item, { block: "nearest" });
+        setActiveIndex(index2);
+        return;
+      }
+      if (attemptsLeft > 0) {
+        timer = setTimeout(() => focusLevel(attemptsLeft - 1), 16);
+        return;
+      }
+      const focusables = Array.from(
+        (levelElement == null ? void 0 : levelElement.querySelectorAll(focusableInLevelSelector)) ?? []
+      );
+      const fallback = focusables.find((element) => !element.matches("[data-menu-back]")) ?? focusables[0];
+      fallback == null ? void 0 : fallback.focus({ preventScroll: true });
+    };
+    timer = setTimeout(() => focusLevel(3), 0);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [diginDepth]);
+  const keepsFocusOnTrigger = Boolean(onMenubarEdgeNavigate) || triggerInteraction === "focus";
+  useEffect(() => {
+    if (!hasReference || !isOpen || activeIndex === null || keepsFocusOnTrigger) {
+      return;
+    }
+    const timer = setTimeout(() => {
+      const referenceElement = floating.elements.domReference;
+      const floatingElement = floating.elements.floating;
+      const activeElement2 = document.activeElement;
+      const focusIsStranded = Boolean(referenceElement) && (activeElement2 === referenceElement || activeElement2 === document.body);
+      const item = listRef.current[activeIndex];
+      if (focusIsStranded && (item == null ? void 0 : item.isConnected) && (floatingElement == null ? void 0 : floatingElement.contains(item))) {
+        item.focus({ preventScroll: true });
+      }
+    }, 50);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [
+    activeIndex,
+    floating.elements.domReference,
+    floating.elements.floating,
+    hasReference,
+    isOpen,
+    keepsFocusOnTrigger
+  ]);
+  const isComposingRef = useRef(false);
+  useEffect(() => {
+    let compositionTimeout;
+    const handleCompositionStart = () => {
+      clearTimeout(compositionTimeout);
+      isComposingRef.current = true;
+    };
+    const handleCompositionEnd = () => {
+      compositionTimeout = setTimeout(() => {
+        isComposingRef.current = false;
+      }, 5);
+    };
+    document.addEventListener("compositionstart", handleCompositionStart);
+    document.addEventListener("compositionend", handleCompositionEnd);
+    return () => {
+      clearTimeout(compositionTimeout);
+      document.removeEventListener("compositionstart", handleCompositionStart);
+      document.removeEventListener("compositionend", handleCompositionEnd);
+    };
+  }, []);
+  useEffect(() => {
+    if (diginDepth === 0) {
+      return;
+    }
+    const handleEscape = (event) => {
+      if (event.key !== "Escape" || event.defaultPrevented || event.isComposing || isComposingRef.current) {
+        return;
+      }
+      const activeElement2 = document.activeElement;
+      const referenceElement = floating.elements.domReference;
+      const floatingElement = floating.elements.floating;
+      const focusIsInMenu = hasReference && activeElement2 === document.body || Boolean(floatingElement == null ? void 0 : floatingElement.contains(activeElement2)) || Boolean(referenceElement == null ? void 0 : referenceElement.contains(activeElement2));
+      if (!focusIsInMenu) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      rootContextValue.onPopDiginLevel();
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+  });
+  const handleLevelsKeyDown = (event) => {
+    if (event.key !== "Escape" && event.key !== "Tab" && isTextEntryTarget(event.target)) {
+      event.stopPropagation();
+    }
+  };
+  const handleDiginKeyDown = (event) => {
+    if (diginDepth > 0 && event.key === "ArrowLeft" && !event.defaultPrevented) {
+      event.preventDefault();
+      event.stopPropagation();
+      rootContextValue.onPopDiginLevel();
+    }
+  };
   const navigateMainAxis = useCallback((direction) => {
     setActiveIndex(
       (prev) => navigateListMainAxisLoop(listRef, direction, prev)
     );
   }, []);
+  const [firstEnabledIndex, setFirstEnabledIndex] = useState(
+    null
+  );
+  useEffect(() => {
+    let cancelled = false;
+    queueMicrotask(() => {
+      if (cancelled) {
+        return;
+      }
+      const next = findFirstEnabledListIndex(listRef);
+      setFirstEnabledIndex((previous) => previous === next ? previous : next);
+    });
+    return () => {
+      cancelled = true;
+    };
+  });
   const menuListContextValue = {
     activeIndex,
+    tabbableIndex: activeIndex ?? firstEnabledIndex,
     getItemProps: (userProps) => getItemProps(userProps),
     navigateMainAxis,
     nestedMenuDepth: 0
   };
-  const levels = [{ key: "root", title: "Menu", children }, ...diginLevels];
+  const levels = [{ key: "root", title: "Menu", children }, ...liveDiginLevels];
   const activeLevel = levels[Math.min(diginDepth, levels.length - 1)];
   const levelCount = levels.length;
   const trackWidthPercent = levelCount * 100;
@@ -18691,6 +18963,10 @@ const Menu = (props) => {
     isMenuVisible,
     shouldUseDiginSizing
   ]);
+  useLayoutEffect(() => {
+    var _a2;
+    (_a2 = sizeProbeRef.current) == null ? void 0 : _a2.querySelectorAll("[id]").forEach((element) => element.removeAttribute("id"));
+  });
   const diginWrapperStyle = shouldUseDiginSizing && wrapperSize.width && wrapperSize.height ? {
     width: `${wrapperSize.width}px`,
     height: `${wrapperSize.height}px`
@@ -18707,120 +18983,130 @@ const Menu = (props) => {
       ...dsComponent("Menu"),
       ref: floating.refs.setFloating,
       className: cx(classes.wrapper, className),
-      ...getFloatingProps(),
+      ...getFloatingProps({ onKeyDown: handleDiginKeyDown }),
       ...otherProps,
       style: floatingStyle,
       children: [
         !hasVisibleResults && /* @__PURE__ */ jsx(Box, { className: classes.noResults, children: renderNoResults ?? /* @__PURE__ */ jsx(Text, { textStyle: "body.sm", children: "No results found" }) }),
-        hasVisibleResults && /* @__PURE__ */ jsxs(Box, { className: classes.levelsViewport, children: [
-          shouldUseDiginSizing && /* @__PURE__ */ jsx(
-            Box,
-            {
-              ref: sizeProbeRef,
-              className: classes.sizeProbe,
-              "aria-hidden": true,
-              style: diginSizeProbeStyle,
-              children: /* @__PURE__ */ jsxs(Box, { className: classes.level, children: [
-                diginDepth > 0 && /* @__PURE__ */ jsxs(
-                  Box,
-                  {
-                    as: "button",
-                    type: "button",
-                    className: classes.backHeader,
-                    children: [
-                      /* @__PURE__ */ jsx(Icon, { name: "caret-left", fill: "icon" }),
-                      activeLevel.title
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(Box, { className: listClassName, children: withLevelScopedKeys(
-                  activeLevel.children,
-                  `${activeLevel.key}-probe`
-                ) })
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              className: classes.levelsTrack,
-              style: {
-                width: `${trackWidthPercent}%`,
-                transform: `translateX(-${trackTranslatePercent}%)`
-              },
-              children: levels.map((level, index2) => {
-                const isActiveLevel = index2 === diginDepth;
-                const levelChildren = withLevelScopedKeys(
-                  level.children,
-                  level.key
-                );
-                if (!isActiveLevel) {
-                  return /* @__PURE__ */ jsxs(
-                    Box,
-                    {
-                      className: classes.level,
-                      style: {
-                        flex: `0 0 ${levelWidthPercent}%`
-                      },
-                      "aria-hidden": true,
-                      children: [
-                        index2 > 0 && /* @__PURE__ */ jsxs(
-                          Box,
-                          {
-                            as: "button",
-                            type: "button",
-                            className: classes.backHeader,
-                            onClick: rootContextValue.onPopDiginLevel,
-                            children: [
-                              /* @__PURE__ */ jsx(Icon, { name: "caret-left" }),
-                              level.title
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(Box, { className: listClassName, children: levelChildren })
-                      ]
-                    },
-                    level.key
-                  );
-                }
-                return /* @__PURE__ */ jsx(
-                  MenuListProvider,
-                  {
-                    value: menuListContextValue,
-                    children: /* @__PURE__ */ jsx(FloatingList, { elementsRef: listRef, labelsRef, children: /* @__PURE__ */ jsxs(
+        hasVisibleResults && /* @__PURE__ */ jsxs(
+          Box,
+          {
+            className: classes.levelsViewport,
+            onKeyDown: handleLevelsKeyDown,
+            children: [
+              shouldUseDiginSizing && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  ref: sizeProbeRef,
+                  className: classes.sizeProbe,
+                  "aria-hidden": true,
+                  inert: true,
+                  style: diginSizeProbeStyle,
+                  children: /* @__PURE__ */ jsxs(Box, { className: classes.level, children: [
+                    diginDepth > 0 && /* @__PURE__ */ jsxs(
                       Box,
                       {
-                        ref: activeLevelRef,
-                        className: classes.level,
-                        style: {
-                          flex: `0 0 ${levelWidthPercent}%`
-                        },
+                        as: "button",
+                        type: "button",
+                        className: classes.backHeader,
                         children: [
-                          index2 > 0 && /* @__PURE__ */ jsxs(
-                            Box,
-                            {
-                              as: "button",
-                              type: "button",
-                              ref: activeBackHeaderRef,
-                              className: classes.backHeader,
-                              onClick: rootContextValue.onPopDiginLevel,
-                              children: [
-                                /* @__PURE__ */ jsx(Icon, { name: "caret-left" }),
-                                level.title
-                              ]
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(Box, { className: listClassName, children: levelChildren })
+                          /* @__PURE__ */ jsx(Icon, { name: "caret-left", fill: "icon" }),
+                          activeLevel.title
                         ]
                       }
+                    ),
+                    /* @__PURE__ */ jsx(Box, { className: listClassName, children: withLevelScopedKeys(
+                      activeLevel.children,
+                      `${activeLevel.key}-probe`
                     ) })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  className: classes.levelsTrack,
+                  style: {
+                    width: `${trackWidthPercent}%`,
+                    transform: `translateX(-${trackTranslatePercent}%)`
                   },
-                  level.key
-                );
-              })
-            }
-          )
-        ] })
+                  children: levels.map((level, index2) => {
+                    const isActiveLevel = index2 === diginDepth;
+                    const levelChildren = withLevelScopedKeys(
+                      level.children,
+                      level.key
+                    );
+                    if (!isActiveLevel) {
+                      return /* @__PURE__ */ jsxs(
+                        Box,
+                        {
+                          className: classes.level,
+                          style: {
+                            flex: `0 0 ${levelWidthPercent}%`
+                          },
+                          "aria-hidden": true,
+                          inert: true,
+                          children: [
+                            index2 > 0 && /* @__PURE__ */ jsxs(
+                              Box,
+                              {
+                                as: "button",
+                                type: "button",
+                                className: classes.backHeader,
+                                onClick: rootContextValue.onPopDiginLevel,
+                                children: [
+                                  /* @__PURE__ */ jsx(Icon, { name: "caret-left" }),
+                                  level.title
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(Box, { className: listClassName, children: levelChildren })
+                          ]
+                        },
+                        level.key
+                      );
+                    }
+                    return /* @__PURE__ */ jsx(
+                      MenuListProvider,
+                      {
+                        value: menuListContextValue,
+                        children: /* @__PURE__ */ jsx(FloatingList, { elementsRef: listRef, labelsRef, children: /* @__PURE__ */ jsxs(
+                          Box,
+                          {
+                            ref: activeLevelRef,
+                            className: classes.level,
+                            style: {
+                              flex: `0 0 ${levelWidthPercent}%`
+                            },
+                            children: [
+                              index2 > 0 && /* @__PURE__ */ jsxs(
+                                Box,
+                                {
+                                  as: "button",
+                                  type: "button",
+                                  ref: activeBackHeaderRef,
+                                  "data-menu-back": "",
+                                  className: classes.backHeader,
+                                  onClick: rootContextValue.onPopDiginLevel,
+                                  children: [
+                                    /* @__PURE__ */ jsx(Icon, { name: "caret-left" }),
+                                    level.title
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(Box, { className: listClassName, children: levelChildren })
+                            ]
+                          }
+                        ) })
+                      },
+                      level.key
+                    );
+                  })
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   ) }) });
@@ -19143,6 +19429,12 @@ const MenuItem = (props) => {
   };
   const { onKeyDown: itemOnKeyDown, ...itemPropsRest } = itemProps;
   const handleItemKeyDown = (event) => {
+    if (event.key === "ArrowLeft" && rootContext.diginDepth > 0 && ((listContext == null ? void 0 : listContext.nestedMenuDepth) ?? 0) === 0) {
+      event.preventDefault();
+      event.stopPropagation();
+      rootContext.onPopDiginLevel();
+      return;
+    }
     if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
       if (href) {
         itemOnKeyDown == null ? void 0 : itemOnKeyDown(event);
@@ -19204,7 +19496,7 @@ const MenuItem = (props) => {
       "data-selected": selected,
       "data-disabled": disabled,
       "data-active": listContext ? listContext.activeIndex === listItemData.index : false,
-      tabIndex: listContext ? listContext.activeIndex === listItemData.index ? 0 : -1 : 0,
+      tabIndex: listContext ? (listContext.tabbableIndex ?? listContext.activeIndex) === listItemData.index ? 0 : -1 : 0,
       ...itemPropsRest,
       onKeyDown: handleItemKeyDown,
       ...restProps,
@@ -19444,7 +19736,7 @@ const SubMenu = (props) => {
       return true;
     };
     if (!applyFirst()) {
-      requestAnimationFrame(() => {
+      setTimeout(() => {
         if (!applyFirst()) {
           openedFromParentArrowRightRef.current = false;
         }
@@ -19613,7 +19905,7 @@ const SubMenu = (props) => {
         "data-selected": selected,
         "data-disabled": disabled,
         "data-active": parentListContext ? parentListContext.activeIndex === listItemData.index : false,
-        tabIndex: parentListContext ? parentListContext.activeIndex === listItemData.index ? 0 : -1 : 0,
+        tabIndex: parentListContext ? (parentListContext.tabbableIndex ?? parentListContext.activeIndex) === listItemData.index ? 0 : -1 : 0,
         ...diginButtonProps,
         type: "button",
         children: [
@@ -19674,7 +19966,7 @@ const SubMenu = (props) => {
         "data-selected": selected,
         "data-disabled": disabled,
         "data-active": parentListContext ? parentListContext.activeIndex === listItemData.index : false,
-        tabIndex: parentListContext ? parentListContext.activeIndex === listItemData.index ? 0 : -1 : 0,
+        tabIndex: parentListContext ? (parentListContext.tabbableIndex ?? parentListContext.activeIndex) === listItemData.index ? 0 : -1 : 0,
         ...referencePropsWithoutRef,
         type: "button",
         children: [
@@ -21295,6 +21587,216 @@ const DateTimeRangePicker = (props) => {
     }
   );
 };
+const DrawerContext = createContext(null);
+const useDrawerContext = () => {
+  const context2 = useContext(DrawerContext);
+  if (!context2) {
+    throw new Error("Drawer components must be used within a <Drawer>");
+  }
+  return context2;
+};
+const DRAWER_MOTION_MS = 200;
+const drawerPhaseReducer = (phase, action) => {
+  switch (action.type) {
+    case "open":
+      return "open";
+    case "startClosing":
+      return phase === "closed" ? phase : "closing";
+    case "finishClosing":
+      return "closed";
+    default:
+      return phase;
+  }
+};
+const prefersReducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const Drawer = (props) => {
+  const {
+    open,
+    onOpenChange,
+    modal: modal2 = true,
+    side = "right",
+    size: size2 = "md",
+    preventOutsideClose = false,
+    initialFocus,
+    returnFocus = true,
+    children,
+    id,
+    ref,
+    onKeyDown,
+    onAnimationEnd,
+    ...rest
+  } = props;
+  const [className, otherProps] = splitProps(rest);
+  const classes = drawer({ side, size: size2 });
+  const [phase, dispatch] = useReducer(
+    drawerPhaseReducer,
+    open ? "open" : "closed"
+  );
+  const panelRef = useRef(null);
+  const { refs, context: context2 } = useOverlayFloating({
+    open,
+    onOpenChange,
+    strategy: "fixed",
+    middleware: []
+  });
+  const dismiss = useDismiss(context2, {
+    escapeKey: modal2,
+    outsidePress: modal2 && !preventOutsideClose
+  });
+  const { getFloatingProps } = useInteractions([dismiss]);
+  useEffect(() => {
+    if (open) {
+      dispatch({ type: "open" });
+      return;
+    }
+    dispatch({ type: "startClosing" });
+    const timeout = setTimeout(
+      () => dispatch({ type: "finishClosing" }),
+      prefersReducedMotion() ? 0 : DRAWER_MOTION_MS
+    );
+    return () => clearTimeout(timeout);
+  }, [open]);
+  const setPanelRef = useCallback(
+    (node) => {
+      panelRef.current = node;
+      refs.setFloating(node);
+    },
+    [refs]
+  );
+  const mergedPanelRef = useMergeRefs([setPanelRef, ref]);
+  const onClose = useCallback(() => {
+    if (open) {
+      onOpenChange(false);
+    }
+  }, [open, onOpenChange]);
+  const handleKeyDown = (event) => {
+    var _a;
+    onKeyDown == null ? void 0 : onKeyDown(event);
+    if (modal2 || event.key !== "Escape" || event.defaultPrevented) {
+      return;
+    }
+    if (event.nativeEvent.isComposing) {
+      return;
+    }
+    if (!((_a = panelRef.current) == null ? void 0 : _a.contains(event.target))) {
+      return;
+    }
+    event.stopPropagation();
+    onClose();
+  };
+  const contextValue = useMemo(
+    () => ({ open: phase === "open", onClose, modal: modal2 }),
+    [modal2, onClose, phase]
+  );
+  if (phase === "closed") {
+    return null;
+  }
+  const dataState = phase === "closing" ? "closing" : "open";
+  return /* @__PURE__ */ jsx(FloatingLayerContext.Provider, { value: "modalFloating", children: /* @__PURE__ */ jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsxs(DsChainPortalRoot, { children: [
+    modal2 && /* @__PURE__ */ jsx(
+      FloatingOverlay,
+      {
+        lockScroll: true,
+        className: classes.overlay,
+        "data-state": dataState,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FloatingFocusManager,
+      {
+        context: context2,
+        modal: modal2,
+        initialFocus: initialFocus ?? (modal2 ? 0 : panelRef),
+        returnFocus,
+        closeOnFocusOut: false,
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            ...dsComponent("Drawer"),
+            ref: mergedPanelRef,
+            className: cx(classes.container, className),
+            "data-state": dataState,
+            "data-side": side,
+            id,
+            role: "dialog",
+            "aria-modal": modal2 ? "true" : void 0,
+            ...getFloatingProps({
+              // Consumer props go through Floating UI so its handlers
+              // merge with them instead of being overwritten.
+              ...otherProps,
+              onKeyDown: handleKeyDown,
+              onAnimationEnd: (event) => {
+                onAnimationEnd == null ? void 0 : onAnimationEnd(event);
+                if (phase === "closing" && event.target === event.currentTarget) {
+                  dispatch({ type: "finishClosing" });
+                }
+              }
+            }),
+            children
+          }
+        )
+      }
+    )
+  ] }) }) }) });
+};
+const Heading = (props) => {
+  const { level = "h2", allCaps, children, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      ...dsComponent("Heading"),
+      as: level,
+      className: cx(heading({ level, allCaps }), className),
+      ...otherProps,
+      children
+    }
+  );
+};
+const DrawerHeader = (props) => {
+  const { title, titleId, showCloseButton = true, children, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const classes = drawer();
+  const { onClose } = useDrawerContext();
+  const isSm = useMediaQuery("sm");
+  return /* @__PURE__ */ jsx(Box, { className: cx(classes.header, className), ...otherProps, children: children ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+    title && /* @__PURE__ */ jsx(
+      Heading,
+      {
+        id: titleId,
+        level: "h3",
+        textStyle: { base: "heading.sm", sm: "heading.xs" },
+        className: classes.title,
+        children: title
+      }
+    ),
+    showCloseButton && /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        variant: "ghost",
+        size: isSm ? "md" : "lg",
+        onClick: onClose,
+        altText: "Close drawer",
+        "aria-label": "Close drawer",
+        className: classes.closeButton,
+        iconName: "x"
+      }
+    )
+  ] }) });
+};
+const DrawerBody = (props) => {
+  const { children, scrollable = true, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const classes = drawer({ scrollable });
+  return /* @__PURE__ */ jsx(Box, { className: cx(classes.body, className), ...otherProps, children });
+};
+const DrawerFooter = (props) => {
+  const { children, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const classes = drawer();
+  return /* @__PURE__ */ jsx(Box, { className: cx(classes.footer, className), ...otherProps, children });
+};
 const Required = () => {
   return /* @__PURE__ */ jsx(Text, { color: "text.danger", fontSize: "inherit", lineHeight: "tight", children: "*" });
 };
@@ -21381,20 +21883,6 @@ const FormField = (props) => {
     }
   );
 };
-const Heading = (props) => {
-  const { level = "h2", allCaps, children, ...rest } = props;
-  const [className, otherProps] = splitProps(rest);
-  return /* @__PURE__ */ jsx(
-    Text,
-    {
-      ...dsComponent("Heading"),
-      as: level,
-      className: cx(heading({ level, allCaps }), className),
-      ...otherProps,
-      children
-    }
-  );
-};
 const toneIconNames$2 = {
   info: "info",
   success: "success",
@@ -24160,6 +24648,10 @@ export {
   DateTimePicker,
   DateTimeRangePicker,
   Divider,
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerHeader,
   DsChainScope,
   FormField,
   Heading,
@@ -24223,6 +24715,7 @@ export {
   splitProps,
   useChipGroup,
   useContainerQuery,
+  useDrawerContext,
   useForm2 as useForm,
   useIconConfig,
   useListContext,