@k2b/ui 0.44.0 → 0.46.0

package/dist/ssr/layout/AppWorkspace.js

@@ -15,9 +15,9 @@ var _tmpl$ = ["<button type=\"button\" class=\"k2b-app-workspace__resize\" role=
   _tmpl$6 = ["<style>", "</style>"],
   _tmpl$7 = ["<div class=\"k2b-app-workspace__main-primary\" data-workspace-main-region=\"main\"", ">", "</div>"],
   _tmpl$8 = ["<section", " class=\"", "\"", " style=\"", "\">", "</section>"],
-  _tmpl$9 = "<i class=\"ti ti-chevron-left\" aria-hidden=\"true\"></i>",
-  _tmpl$0 = ["<div class=\"k2b-app-workspace__level-body\"", ">", "</div>"],
-  _tmpl$1 = "<i class=\"ti ti-layout-sidebar-right\" aria-hidden=\"true\"></i>",
+  _tmpl$9 = ["<div class=\"k2b-app-workspace__level-body\"", ">", "</div>"],
+  _tmpl$0 = "<i class=\"ti ti-chevron-left\" aria-hidden=\"true\"></i>",
+  _tmpl$1 = ["<i", " aria-hidden=\"true\"></i>"],
   _tmpl$10 = ["<aside", " class=\"", "\"", "", " style=\"", "\"><button type=\"button\" class=\"k2b-app-workspace__detail-grabber\"", " aria-pressed=\"false\"><span aria-hidden=\"true\"></span></button>", "</aside>"],
   _tmpl$11 = ["<aside", " class=\"", "\"", "", " style=\"", "\">", "</aside>"],
   _tmpl$12 = ["<nav class=\"k2b-app-workspace__sidebar-sheet\"", " style=\"", "\">", "</nav>"],
@@ -57,18 +57,17 @@ var _tmpl$ = ["<button type=\"button\" class=\"k2b-app-workspace__resize\" role=
   _tmpl$46 = ["<div class=\"k2b-app-workspace__nav-tree-node\" role=\"treeitem\"", " style=\"", "\">", "", "</div>"],
   _tmpl$47 = ["<div class=\"", "\" role=\"tree\"", ">", "</div>"],
   _tmpl$48 = ["<div class=\"k2b-app-workspace__sidebar-icon-grid\"", ">", "</div>"],
-  _tmpl$49 = ["<i", " aria-hidden=\"true\"></i>"],
-  _tmpl$50 = "<i class=\"ti ti-chevron-down k2b-app-workspace__head-primary-chevron\" aria-hidden=\"true\"></i>",
-  _tmpl$51 = ["<span class=\"k2b-app-workspace__head-primary-label\">", "", "</span>"],
-  _tmpl$52 = "<i class=\"ti ti-layout-sidebar\" aria-hidden=\"true\"></i>",
-  _tmpl$53 = ["<div class=\"k2b-app-workspace__head-views\">", "</div>"],
-  _tmpl$54 = ["<div class=\"k2b-app-workspace__head-filters\" role=\"group\"", ">", "", "</div>"],
-  _tmpl$55 = ["<span class=\"k2b-app-workspace__head-count\"><span>", "</span></span>"],
-  _tmpl$56 = ["<div class=\"k2b-app-workspace__head-actions\">", "", "</div>"],
-  _tmpl$57 = ["<div class=\"k2b-app-workspace__head\"", ">", "<div class=\"k2b-app-workspace__head-lead\">", "", "", "", "", "</div>", "</div>"],
-  _tmpl$58 = ["<h1 class=\"k2b-app-workspace__head-heading\" data-k2b-page-trail-title", ">", "</h1>"],
-  _tmpl$59 = ["<div class=\"", "\" data-k2b-app-workspace", " style=\"", "\">", "</div>"],
-  _tmpl$60 = ["<div class=\"", "\">", "</div>"];
+  _tmpl$49 = "<i class=\"ti ti-chevron-down k2b-app-workspace__head-primary-chevron\" aria-hidden=\"true\"></i>",
+  _tmpl$50 = ["<span class=\"k2b-app-workspace__head-primary-label\">", "", "</span>"],
+  _tmpl$51 = "<i class=\"ti ti-layout-sidebar\" aria-hidden=\"true\"></i>",
+  _tmpl$52 = ["<div class=\"k2b-app-workspace__head-views\">", "</div>"],
+  _tmpl$53 = ["<div class=\"k2b-app-workspace__head-filters\" role=\"group\"", ">", "", "</div>"],
+  _tmpl$54 = ["<span class=\"k2b-app-workspace__head-count\"><span>", "</span></span>"],
+  _tmpl$55 = ["<div class=\"k2b-app-workspace__head-actions\">", "", "</div>"],
+  _tmpl$56 = ["<div class=\"k2b-app-workspace__head\"", ">", "<div class=\"k2b-app-workspace__head-lead\">", "", "", "", "", "</div>", "</div>"],
+  _tmpl$57 = ["<h1 class=\"k2b-app-workspace__head-heading\" data-k2b-page-trail-title", ">", "</h1>"],
+  _tmpl$58 = ["<div class=\"", "\" data-k2b-app-workspace", " style=\"", "\">", "</div>"],
+  _tmpl$59 = ["<div class=\"", "\">", "</div>"];
 import { Link } from "@k2b/ssr/nav";
 import { children, createContext, createEffect, createMemo, createRoot, createSignal, createUniqueId, For, getOwner, mergeProps, on, onCleanup, onMount, Show, useContext } from "solid-js";
 import { Dynamic, isServer } from "solid-js/web";
@@ -81,6 +80,7 @@ import { APP_WORKSPACE_DETAIL_CLOSE_EVENT, APP_WORKSPACE_DETAIL_OPEN_EVENT, APP_
 import { APP_WORKSPACE_DETAIL_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_DETAIL_MIN, APP_WORKSPACE_DRAWER_DEFAULT, APP_WORKSPACE_DRAWER_MAX, APP_WORKSPACE_DRAWER_MIN, APP_WORKSPACE_MAIN_MIN, APP_WORKSPACE_PANE_DEFAULT, APP_WORKSPACE_PANE_MAX, APP_WORKSPACE_PANE_MIN, APP_WORKSPACE_SIDEBAR_COLLAPSED, APP_WORKSPACE_SIDEBAR_DEFAULT, APP_WORKSPACE_SIDEBAR_MAX, APP_WORKSPACE_SIDEBAR_MIN, appWorkspaceLayoutStyle, appWorkspacePanelVariable } from "./app-workspace-state";
 import { appWorkspaceInverseWidthCss, appWorkspaceWidthCss, appWorkspaceWidthToken, isAppWorkspaceWidthShare } from "./app-workspace-width";
 import BottomSheet, { bottomSheetAdaptiveOptions } from "./BottomSheet";
+import { DETAILS_ICON } from "./DetailsToggle";
 import { PageTitle, usePageTrail } from "./PageTitle";
 import { SidebarItemPreview } from "./SidebarItemPreview";
 import { inSidebarRail, SidebarRailHint } from "./SidebarRailHint";
@@ -426,7 +426,7 @@ function AppWorkspaceMain(props) {
                 get children() {
                   return handle();
                 }
-              }), _$ssr(_tmpl$8, _$ssrAttribute("id", _$escape(pane.domId, true), false), `k2b-app-workspace__main-pane ${isAnchor() ? "is-primary" : ""} ${_$escape(pane.props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(pane.props.label, true), false) + _$ssrAttribute("data-workspace-level", levelsMode() ? _$escape(levelIndex(), true) : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-level-shown", _$escape(levelAttr("shown"), true), false) + _$ssrAttribute("data-workspace-level-first", _$escape(levelAttr("first"), true), false) + _$ssrAttribute("data-workspace-level-last", _$escape(levelAttr("last"), true), false) + _$ssrAttribute("data-workspace-main-region", _$escape(pane.props.id, true), false) + _$ssrAttribute("data-workspace-mobile-active", (levelsMode() ? levelClasses(levelIndex(), "shown").split(" ").includes("1") : activeMobilePane() === pane.props.id) ? "true" : "false", false) + _$ssrAttribute("data-workspace-panel-id", _$escape(panelId, true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false) + _$ssrAttribute("data-surface", pane.props.surface === "navigation" ? "navigation" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll", !levelsMode() && pane.props.scroll === false ? "false" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll-fade-mode", !levelsMode() && pane.props.scroll !== false && pane.props.scrollFade !== false ? "both" : _$escape(undefined, true), false), _$ssrStyle(nonEmptyStyle({
+              }), _$ssr(_tmpl$8, _$ssrAttribute("id", _$escape(pane.domId, true), false), `k2b-app-workspace__main-pane ${isAnchor() ? "is-primary" : ""} ${_$escape(pane.props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(pane.props.label, true), false) + _$ssrAttribute("data-workspace-level", levelsMode() ? _$escape(levelIndex(), true) : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-level-shown", _$escape(levelAttr("shown"), true), false) + _$ssrAttribute("data-workspace-level-first", _$escape(levelAttr("first"), true), false) + _$ssrAttribute("data-workspace-level-last", _$escape(levelAttr("last"), true), false) + _$ssrAttribute("data-workspace-main-region", _$escape(pane.props.id, true), false) + _$ssrAttribute("data-workspace-heading", levelsMode() ? _$escape(pane.props.heading, true) : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-mobile-active", (levelsMode() ? levelClasses(levelIndex(), "shown").split(" ").includes("1") : activeMobilePane() === pane.props.id) ? "true" : "false", false) + _$ssrAttribute("data-workspace-panel-id", _$escape(panelId, true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false) + _$ssrAttribute("data-surface", pane.props.surface === "navigation" ? "navigation" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll", !levelsMode() && pane.props.scroll === false ? "false" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll-fade-mode", !levelsMode() && pane.props.scroll !== false && pane.props.scrollFade !== false ? "both" : _$escape(undefined, true), false), _$ssrStyle(nonEmptyStyle({
                 ...(isAnchor() ? {} : {
                   // A stored width keeps to this pane's limits before the controller attaches.
                   "--k2b-workspace-panel-size": `clamp(${minSize()}px, var(${variable}, ${appWorkspaceWidthCss(defaultSize(), "var(--k2b-workspace-width)")}), ${maxSize()}px)`,
@@ -453,33 +453,54 @@ function AppWorkspaceMain(props) {
                 get children() {
                   return _$createComponent(Show, {
                     get when() {
-                      return _$memo(() => levelIndex() > 1)() && depth() > 1;
+                      return pane.props.back;
                     },
-                    get children() {
-                      return _$createComponent(IconButtonLink, {
-                        "class": "k2b-app-workspace__level-back",
-                        get href() {
-                          return levels()[depth() - 2]?.props.href;
-                        },
-                        get label() {
-                          return workspaceMessages().backTo({
-                            page: levels()[levelIndex() - 2]?.props.label ?? ""
-                          });
-                        },
-                        get navigation() {
-                          return props.onLevelNavigate ? "enhanced" : "document";
-                        },
-                        get onNavigate() {
-                          return props.onLevelNavigate ? navigateBack : undefined;
+                    get fallback() {
+                      return _$createComponent(Show, {
+                        get when() {
+                          return _$memo(() => levelIndex() > 1)() && depth() > 1;
                         },
                         get children() {
-                          return _$ssr(_tmpl$9);
+                          return _$createComponent(IconButtonLink, {
+                            "class": "k2b-app-workspace__level-back",
+                            get href() {
+                              return levels()[depth() - 2]?.props.href;
+                            },
+                            get label() {
+                              return workspaceMessages().backTo({
+                                page: levels()[levelIndex() - 2]?.props.label ?? ""
+                              });
+                            },
+                            get navigation() {
+                              return props.onLevelNavigate ? "enhanced" : "document";
+                            },
+                            get onNavigate() {
+                              return props.onLevelNavigate ? navigateBack : undefined;
+                            },
+                            get children() {
+                              return _$ssr(_tmpl$0);
+                            }
+                          });
                         }
                       });
-                    }
+                    },
+                    children: back => _$createComponent(IconButtonLink, {
+                      "class": "k2b-app-workspace__level-back k2b-app-workspace__level-back--own",
+                      get href() {
+                        return back().href;
+                      },
+                      get label() {
+                        return workspaceMessages().backTo({
+                          page: back().label
+                        });
+                      },
+                      get children() {
+                        return _$ssr(_tmpl$0);
+                      }
+                    })
                   });
                 }
-              }), _$ssr(_tmpl$0, _$ssrAttribute("data-scroll", pane.props.scroll === false ? "false" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll-fade-mode", pane.props.scroll !== false && pane.props.scrollFade !== false ? "both" : _$escape(undefined, true), false), _$escape(pane.props.children))]) : _$escape(pane.props.children)), _$createComponent(Show, {
+              }), _$ssr(_tmpl$9, _$ssrAttribute("data-scroll", pane.props.scroll === false ? "false" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll-fade-mode", pane.props.scroll !== false && pane.props.scrollFade !== false ? "both" : _$escape(undefined, true), false), _$escape(pane.props.children))]) : _$escape(pane.props.children)), _$createComponent(Show, {
                 get when() {
                   return _$memo(() => !!resizable())() && before();
                 },
@@ -569,9 +590,9 @@ function AppWorkspaceDetail(props) {
         get disabled() {
           return props.available === false;
         },
-        "class": "k2b-app-workspace__detail-toggle",
+        "class": "k2b-app-workspace__detail-toggle k2b-details-toggle",
         get children() {
-          return [_$ssr(_tmpl$1), workspaceMessages().details];
+          return [_$ssr(_tmpl$1, _$ssrAttribute("class", _$escape(DETAILS_ICON, true), false)), workspaceMessages().details];
         }
       });
     }
@@ -1807,7 +1828,7 @@ const AppWorkspaceSidebarIconGrid = props => _$ssrElement("section", _$mergeProp
 })), _$ssr(_tmpl$48, _$ssrAttribute("data-columns", _$escape(props.columns ?? 2, true), false), _$escape(props.children))], false);
 const AppWorkspaceSidebarIconAction = props => {
   let target;
-  const content = _$ssr(_tmpl$49, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
+  const content = _$ssr(_tmpl$1, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
   const attrs = () => ({
     ref: element => target = element,
     class: `k2b-app-workspace__sidebar-icon-action ${props.active ? "is-active" : ""}`,
@@ -1897,15 +1918,15 @@ function AppWorkspaceHead(props) {
     return `@media not all and (min-width:48rem){${host} > .k2b-app-workspace__head,${host} > .k2b-app-workspace__content > .k2b-app-workspace__detail-toggle,${host} > .k2b-app-workspace__content > :is(solid-island, solid-client) > .k2b-app-workspace__detail-toggle{display:none}}`;
   };
   const resetContent = () => filters().reset;
-  const primaryContent = () => [_$ssr(_tmpl$49, _$ssrAttribute("class", _$escape(props.head?.primary?.icon, true), false)), _$ssr(_tmpl$51, _$escape(props.head?.primary?.label), _$escape(_$createComponent(Show, {
+  const primaryContent = () => [_$ssr(_tmpl$1, _$ssrAttribute("class", _$escape(props.head?.primary?.icon, true), false)), _$ssr(_tmpl$50, _$escape(props.head?.primary?.label), _$escape(_$createComponent(Show, {
     get when() {
       return props.head?.primary?.popup;
     },
     get children() {
-      return _$ssr(_tmpl$50);
+      return _$ssr(_tmpl$49);
     }
   })))];
-  return _$ssr(_tmpl$57, _$ssrAttribute("data-trail", trail()?.ancestors.length ? "up" : trail() ? "title" : _$escape(undefined, true), false) + _$ssrAttribute("data-row", props.head ? "" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-head-pane", _$escape(mobilePane(), true), false), _$escape(_$createComponent(Show, {
+  return _$ssr(_tmpl$56, _$ssrAttribute("data-trail", trail()?.ancestors.length ? "up" : trail() ? "title" : _$escape(undefined, true), false) + _$ssrAttribute("data-row", props.head ? "" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-head-pane", _$escape(mobilePane(), true), false), _$escape(_$createComponent(Show, {
     get when() {
       return mobilePane();
     },
@@ -1921,7 +1942,7 @@ function AppWorkspaceHead(props) {
     "aria-expanded": "false",
     "data-app-workspace-sidebar-toggle": "",
     get children() {
-      return _$ssr(_tmpl$52);
+      return _$ssr(_tmpl$51);
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
@@ -1933,20 +1954,20 @@ function AppWorkspaceHead(props) {
       },
       as: "p",
       fallback: true
-    }), _$ssr(_tmpl$58, _$ssrAttribute("data-k2b-server", isServer ? "" : _$escape(undefined, true), false), _$escape(current().title))]
+    }), _$ssr(_tmpl$57, _$ssrAttribute("data-k2b-server", isServer ? "" : _$escape(undefined, true), false), _$escape(current().title))]
   })), _$escape(_$createComponent(Show, {
     get when() {
       return resolvedViews.toArray().some(Boolean);
     },
     get children() {
-      return _$ssr(_tmpl$53, _$escape(resolvedViews()));
+      return _$ssr(_tmpl$52, _$escape(resolvedViews()));
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
       return resolvedFilters.toArray().some(Boolean) || props.head?.filtered;
     },
     get children() {
-      return _$ssr(_tmpl$54, _$ssrAttribute("aria-label", _$escape(filters().filters, true), false), _$escape(resolvedFilters()), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$53, _$ssrAttribute("aria-label", _$escape(filters().filters, true), false), _$escape(resolvedFilters()), _$escape(_$createComponent(Show, {
         get when() {
           return props.head?.filtered;
         },
@@ -1993,14 +2014,14 @@ function AppWorkspaceHead(props) {
       return _$memo(() => !!props.head?.filtered)() && resolvedCount.toArray().some(value => value !== undefined && value !== null && value !== false);
     },
     get children() {
-      return _$ssr(_tmpl$55, _$escape(resolvedCount()));
+      return _$ssr(_tmpl$54, _$escape(resolvedCount()));
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
       return resolvedActions.toArray().some(Boolean) || props.head?.primary;
     },
     get children() {
-      return _$ssr(_tmpl$56, _$escape(resolvedActions()), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$55, _$escape(resolvedActions()), _$escape(_$createComponent(Show, {
         get when() {
           return props.head?.primary;
         },
@@ -2106,7 +2127,7 @@ const AppWorkspace = props => {
       return _$createComponent(WorkspaceContext.Provider, {
         value: workspace,
         get children() {
-          return _$ssr(_tmpl$59, `k2b-app-workspace ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mobile-surface", _$escape(props.mobileSurface, true), false) + _$ssrAttribute("data-flat", props.flat ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-sidebar-collapsed", initialLayoutState()?.sidebarCollapsed === undefined ? _$escape(undefined, true) : _$escape(String(initialLayoutState()?.sidebarCollapsed), true), false) + _$ssrAttribute("data-workspace-resizable", props.resizable === false ? "false" : "true", false), _$ssrStyle(appWorkspaceLayoutStyle(initialLayoutState())), _$escape(contents()));
+          return _$ssr(_tmpl$58, `k2b-app-workspace ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mobile-surface", _$escape(props.mobileSurface, true), false) + _$ssrAttribute("data-flat", props.flat ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-sidebar-collapsed", initialLayoutState()?.sidebarCollapsed === undefined ? _$escape(undefined, true) : _$escape(String(initialLayoutState()?.sidebarCollapsed), true), false) + _$ssrAttribute("data-workspace-resizable", props.resizable === false ? "false" : "true", false), _$ssrStyle(appWorkspaceLayoutStyle(initialLayoutState())), _$escape(contents()));
         }
       });
     }
@@ -2121,7 +2142,7 @@ AppWorkspace.LayoutStateProvider = props => _$createComponent(LayoutStateContext
   }
 });
 AppWorkspace.Head = AppWorkspaceHeadSlot;
-AppWorkspace.Content = props => _$ssr(_tmpl$60, `k2b-app-workspace__content ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
+AppWorkspace.Content = props => _$ssr(_tmpl$59, `k2b-app-workspace__content ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
 AppWorkspace.Main = AppWorkspaceMain;
 AppWorkspace.MainPane = AppWorkspaceMainPane;
 AppWorkspace.Detail = AppWorkspaceDetail;