@nswds/app 1.108.2 → 1.109.0

package/dist/index.cjs

@@ -15737,8 +15737,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__ */ jsxRuntime.jsx("section", { className: "overflow-hidden rounded-sm bg-white text-grey-800", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid min-h-[46rem] xl:grid-cols-[260px_minmax(0,1fr)] xl:gap-x-6", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "border-b border-grey-200 py-5 xl:border-b-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "min-w-0 overflow-hidden rounded-sm bg-white text-grey-800", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid min-w-0 xl:min-h-[46rem] xl:grid-cols-[260px_minmax(0,1fr)] xl:gap-x-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "border-b border-grey-200 px-4 py-5 sm:px-6 xl:border-b-0 xl:px-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: "Palette" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex rounded-sm border border-grey-200 bg-white p-1", children: [
@@ -15762,7 +15762,7 @@ function ColorPairingToolContent({ visibleFormats }) {
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: "Background family" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5 gap-1", children: selectableFamilies.map((family) => /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-1 sm:grid-cols-5", children: selectableFamilies.map((family) => /* @__PURE__ */ jsxRuntime.jsx(
           FamilyButton,
           {
             family,
@@ -15774,7 +15774,7 @@ function ColorPairingToolContent({ visibleFormats }) {
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: "Background shade" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[20.5rem] space-y-1 overflow-y-auto pr-1", children: backgroundShadeOptions.map((shade) => /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1 sm:max-h-[20.5rem] sm:overflow-y-auto sm:pr-1", children: backgroundShadeOptions.map((shade) => /* @__PURE__ */ jsxRuntime.jsx(
           ShadeButton,
           {
             shade,
@@ -15787,7 +15787,7 @@ function ColorPairingToolContent({ visibleFormats }) {
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: "Accent family" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5 gap-1", children: selectableAccentFamilies.map((family) => /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-1 sm:grid-cols-5", children: selectableAccentFamilies.map((family) => /* @__PURE__ */ jsxRuntime.jsx(
           FamilyButton,
           {
             family,
@@ -15798,8 +15798,8 @@ function ColorPairingToolContent({ visibleFormats }) {
         )) })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-col", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-5 overflow-y-auto py-5 sm:py-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 min-w-0 flex-col px-4 sm:px-6 xl:px-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-5 py-5 sm:py-6 xl:overflow-y-auto", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "soft", color: "primary", onClick: handleCopyUrl, className: "mr-1", children: copiedKey === "share-url" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "data-slot": "icon", className: "size-4" }),
           "Copied URL!"
@@ -18719,7 +18719,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.108.0"};
+  version: "1.108.2"};
 var SluggerContext = React5__namespace.default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";
@@ -20549,8 +20549,8 @@ function MobileSearch({ navigation: navigation$1 }) {
     ] })
   ] });
 }
-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";
@@ -20581,7 +20581,7 @@ function MultiLevelPushMenu({
 }) {
   const pathname = navigation.usePathname();
   const [navigationHistory, setNavigationHistory] = React5.useState([
-    { items: navigation$1 || [], title: initialTitle, depth: 1, id: generateLevelId() }
+    { items: navigation$1 || [], title: initialTitle, depth: 1, id: buildLevelId([]) }
   ]);
   const [animationState, setAnimationState] = React5.useState("idle");
   const [isAnimationStarted, setIsAnimationStarted] = React5.useState(false);
@@ -20593,12 +20593,16 @@ function MultiLevelPushMenu({
   const navigateToSubmenu = React5.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);