@nswds/app 1.108.2 → 1.109.0

package/dist/index.js

@@ -15683,8 +15683,8 @@ function ColorPairingToolContent({ visibleFormats }) {
   const previewHeroStatusLabel = getPreviewHeroStatusLabel(contrastRatio);
   const contrastTone = getContrastTone(contrastRatio);
   const resolvedCopyFormat = visibleFormats.includes(copyFormat) ? copyFormat : visibleFormats[0] ?? DEFAULT_VISIBLE_FORMATS[0];
-  return /* @__PURE__ */ jsx("section", { className: "overflow-hidden rounded-sm bg-white text-grey-800", children: /* @__PURE__ */ jsxs("div", { className: "grid min-h-[46rem] xl:grid-cols-[260px_minmax(0,1fr)] xl:gap-x-6", children: [
-    /* @__PURE__ */ jsx("aside", { className: "border-b border-grey-200 py-5 xl:border-b-0", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+  return /* @__PURE__ */ jsx("section", { className: "min-w-0 overflow-hidden rounded-sm bg-white text-grey-800", children: /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 xl:min-h-[46rem] xl:grid-cols-[260px_minmax(0,1fr)] xl:gap-x-6", children: [
+    /* @__PURE__ */ jsx("aside", { className: "border-b border-grey-200 px-4 py-5 sm:px-6 xl:border-b-0 xl:px-0", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
       /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
         /* @__PURE__ */ jsx(SectionLabel, { children: "Palette" }),
         /* @__PURE__ */ jsxs("div", { className: "inline-flex rounded-sm border border-grey-200 bg-white p-1", children: [
@@ -15708,7 +15708,7 @@ function ColorPairingToolContent({ visibleFormats }) {
       ] }),
       /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
         /* @__PURE__ */ jsx(SectionLabel, { children: "Background family" }),
-        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-5 gap-1", children: selectableFamilies.map((family) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1 sm:grid-cols-5", children: selectableFamilies.map((family) => /* @__PURE__ */ jsx(
           FamilyButton,
           {
             family,
@@ -15720,7 +15720,7 @@ function ColorPairingToolContent({ visibleFormats }) {
       ] }),
       /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
         /* @__PURE__ */ jsx(SectionLabel, { children: "Background shade" }),
-        /* @__PURE__ */ jsx("div", { className: "h-[20.5rem] space-y-1 overflow-y-auto pr-1", children: backgroundShadeOptions.map((shade) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "space-y-1 sm:max-h-[20.5rem] sm:overflow-y-auto sm:pr-1", children: backgroundShadeOptions.map((shade) => /* @__PURE__ */ jsx(
           ShadeButton,
           {
             shade,
@@ -15733,7 +15733,7 @@ function ColorPairingToolContent({ visibleFormats }) {
       ] }),
       /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
         /* @__PURE__ */ jsx(SectionLabel, { children: "Accent family" }),
-        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-5 gap-1", children: selectableAccentFamilies.map((family) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1 sm:grid-cols-5", children: selectableAccentFamilies.map((family) => /* @__PURE__ */ jsx(
           FamilyButton,
           {
             family,
@@ -15744,8 +15744,8 @@ function ColorPairingToolContent({ visibleFormats }) {
         )) })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-col", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-5 overflow-y-auto py-5 sm:py-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 min-w-0 flex-col px-4 sm:px-6 xl:px-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-5 py-5 sm:py-6 xl:overflow-y-auto", children: [
         /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button2, { variant: "soft", color: "primary", onClick: handleCopyUrl, className: "mr-1", children: copiedKey === "share-url" ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Icons.check, { "data-slot": "icon", className: "size-4" }),
           "Copied URL!"
@@ -18665,7 +18665,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.108.0"};
+  version: "1.108.2"};
 var SluggerContext = React5__default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";
@@ -20495,8 +20495,8 @@ function MobileSearch({ navigation }) {
     ] })
   ] });
 }
-function generateLevelId() {
-  return `level-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+function buildLevelId(path) {
+  return `level-${path.length > 0 ? path.join("--") : "root"}`;
 }
 function generateBreadcrumb(levels, maxLength = 50) {
   if (levels.length <= 1) return levels[0]?.title || "Menu";
@@ -20527,7 +20527,7 @@ function MultiLevelPushMenu({
 }) {
   const pathname = usePathname();
   const [navigationHistory, setNavigationHistory] = useState([
-    { items: navigation || [], title: initialTitle, depth: 1, id: generateLevelId() }
+    { items: navigation || [], title: initialTitle, depth: 1, id: buildLevelId([]) }
   ]);
   const [animationState, setAnimationState] = useState("idle");
   const [isAnimationStarted, setIsAnimationStarted] = useState(false);
@@ -20539,12 +20539,16 @@ function MultiLevelPushMenu({
   const navigateToSubmenu = useCallback(
     (item) => {
       if (item.links && item.links.length > 0 && animationState === "idle") {
+        const levelPath = [
+          ...navigationHistory.flatMap((level) => level.parentItem ? [level.parentItem.id] : []),
+          item.id
+        ];
         const newLevel = {
           items: item.links,
           title: item.title,
           parentItem: item,
           depth: navigationHistory[navigationHistory.length - 1].depth + 1,
-          id: generateLevelId()
+          id: buildLevelId(levelPath)
         };
         const newHistory = [...navigationHistory, newLevel];
         setNavigationHistory(newHistory);