@k2b/ui 0.30.0 → 0.32.0

package/dist/ssr/inputs/rich-select-messages.js

@@ -0,0 +1,46 @@
+import { i18n } from "@k2b/stdlib";
+import { useLocale } from "../intl/locale";
+const richSelectMessages = i18n.define({
+  baseLocale: "en",
+  messages: {
+    en: {
+      back: "Back",
+      choose: "Choose",
+      chooseOption: "Choose option",
+      close: "Close",
+      couldNotLoad: "Could not be loaded.",
+      create: "Create",
+      detailsFor: ({
+        name
+      }) => `Details: ${name}`,
+      loading: "Loading options",
+      noOptions: "No options available",
+      noResults: "No results found",
+      retry: "Retry",
+      search: "Search"
+    },
+    de: {
+      back: "Zurück",
+      choose: "Auswählen",
+      chooseOption: "Option auswählen",
+      close: "Schließen",
+      couldNotLoad: "Konnte nicht geladen werden.",
+      create: "Anlegen",
+      detailsFor: ({
+        name
+      }) => `Details: ${name}`,
+      loading: "Optionen werden geladen",
+      noOptions: "Keine Optionen verfügbar",
+      noResults: "Keine Ergebnisse gefunden",
+      retry: "Erneut versuchen",
+      search: "Suchen"
+    }
+  }
+});
+/** Resolved from the inherited render locale. */
+export const useRichSelectMessages = () => {
+  const locale = useLocale();
+  return () => richSelectMessages.resolve([locale()]).t;
+};
+export const checkRichSelectMessages = () => richSelectMessages.check();
+//# sourceMappingURL=rich-select-messages.js.map

package/dist/ssr/inputs/rich-select-messages.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["inputs/rich-select-messages.ts"],"sourcesContent":["import { i18n } from \"@k2b/stdlib\";\nimport { useLocale } from \"../intl/locale\";\n\nconst richSelectMessages = i18n.define({\n  baseLocale: \"en\",\n  messages: {\n    en: {\n      back: \"Back\",\n      choose: \"Choose\",\n      chooseOption: \"Choose option\",\n      close: \"Close\",\n      couldNotLoad: \"Could not be loaded.\",\n      create: \"Create\",\n      detailsFor: ({ name }: { name: string }) => `Details: ${name}`,\n      loading: \"Loading options\",\n      noOptions: \"No options available\",\n      noResults: \"No results found\",\n      retry: \"Retry\",\n      search: \"Search\",\n    },\n    de: {\n      back: \"Zurück\",\n      choose: \"Auswählen\",\n      chooseOption: \"Option auswählen\",\n      close: \"Schließen\",\n      couldNotLoad: \"Konnte nicht geladen werden.\",\n      create: \"Anlegen\",\n      detailsFor: ({ name }) => `Details: ${name}`,\n      loading: \"Optionen werden geladen\",\n      noOptions: \"Keine Optionen verfügbar\",\n      noResults: \"Keine Ergebnisse gefunden\",\n      retry: \"Erneut versuchen\",\n      search: \"Suchen\",\n    },\n  },\n});\n\nexport type RichSelectMessages = ReturnType<(typeof richSelectMessages)[\"resolve\"]>[\"t\"];\n\n/** Resolved from the inherited render locale. */\nexport const useRichSelectMessages = (): (() => RichSelectMessages) => {\n  const locale = useLocale();\n  return () => richSelectMessages.resolve([locale()]).t;\n};\n\nexport const checkRichSelectMessages = () => richSelectMessages.check();\n"],"mappings":"AAAA,SAAS,IAAI,QAAQ,aAAa;AAClC,SAAS,SAAS,QAAQ,gBAAgB;AAE1C,MAAM,kBAAkB,GAAG,IAAI,CAAC,MAAM,CAAC;EACrC,UAAU,EAAE,IAAI;EAChB,QAAQ,EAAE;IACR,EAAE,EAAE;MACF,IAAI,EAAE,MAAM;MACZ,MAAM,EAAE,QAAQ;MAChB,YAAY,EAAE,eAAe;MAC7B,KAAK,EAAE,OAAO;MACd,YAAY,EAAE,sBAAsB;MACpC,MAAM,EAAE,QAAQ;MAChB,UAAU,EAAE,CAAC;QAAE;MAAuB,CAAC,KAAK,YAAY,IAAI,EAAE;MAC9D,OAAO,EAAE,iBAAiB;MAC1B,SAAS,EAAE,sBAAsB;MACjC,SAAS,EAAE,kBAAkB;MAC7B,KAAK,EAAE,OAAO;MACd,MAAM,EAAE;IACV,CAAC;IACD,EAAE,EAAE;MACF,IAAI,EAAE,QAAQ;MACd,MAAM,EAAE,WAAW;MACnB,YAAY,EAAE,kBAAkB;MAChC,KAAK,EAAE,WAAW;MAClB,YAAY,EAAE,8BAA8B;MAC5C,MAAM,EAAE,SAAS;MACjB,UAAU,EAAE,CAAC;QAAE;MAAK,CAAC,KAAK,YAAY,IAAI,EAAE;MAC5C,OAAO,EAAE,yBAAyB;MAClC,SAAS,EAAE,0BAA0B;MACrC,SAAS,EAAE,2BAA2B;MACtC,KAAK,EAAE,kBAAkB;MACzB,MAAM,EAAE;IACV;EACF;AACF,CAAC,CAAC;AAIF;AACA,OAAO,MAAM,qBAAqB,GAAG,MAAkC;EACrE,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC;EAC1B,OAAO,MAAM,kBAAkB,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,CAAC;AAED,OAAO,MAAM,uBAAuB,GAAG,MAAM,kBAAkB,CAAC,KAAK,CAAC,CAAC","ignoreList":[]}

package/dist/ssr/layout/AppWorkspace.js

@@ -62,7 +62,7 @@ var _tmpl$ = ["<button type=\"button\" class=\"k2b-app-workspace__resize\" role=
   _tmpl$51 = ["<div class=\"k2b-app-workspace__head-filters\" role=\"group\"", ">", "", "</div>"],
   _tmpl$52 = ["<span class=\"k2b-app-workspace__head-count\"><span>", "</span></span>"],
   _tmpl$53 = ["<div class=\"k2b-app-workspace__head-actions\">", "", "</div>"],
-  _tmpl$54 = ["<div class=\"k2b-app-workspace__head\"", "><div class=\"k2b-app-workspace__head-lead\">", "", "", "", "", "</div>", "</div>"],
+  _tmpl$54 = ["<div class=\"k2b-app-workspace__head\"", ">", "<div class=\"k2b-app-workspace__head-lead\">", "", "", "", "", "</div>", "</div>"],
   _tmpl$55 = ["<h1 class=\"k2b-app-workspace__head-heading\" data-k2b-page-trail-title", ">", "</h1>"],
   _tmpl$56 = ["<div class=\"", "\" data-k2b-app-workspace", " style=\"", "\">", "</div>"],
   _tmpl$57 = ["<div class=\"", "\">", "</div>"];
@@ -73,8 +73,9 @@ import { Button, ButtonLink, IconButton, IconButtonLink } from "../actions/Butto
 import { useFilterMessages } from "../actions/filter-messages";
 import { dialogCore } from "../feedback/dialog-core";
 import { RenderErrorBoundary } from "../internal/render-error";
-import { APP_WORKSPACE_DETAIL_CLOSE_EVENT, APP_WORKSPACE_DETAIL_STEP_EVENT, APP_WORKSPACE_SIDEBAR_HIDE_EVENT, installAppWorkspaceController } from "./app-workspace-controller";
+import { APP_WORKSPACE_DETAIL_CLOSE_EVENT, APP_WORKSPACE_DETAIL_OPEN_EVENT, APP_WORKSPACE_DETAIL_STEP_EVENT, APP_WORKSPACE_SIDEBAR_HIDE_EVENT, installAppWorkspaceController } from "./app-workspace-controller";
 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 { PageTitle, usePageTrail } from "./PageTitle";
 import { SidebarItemPreview } from "./SidebarItemPreview";
@@ -123,9 +124,9 @@ function ResizeHandle(props) {
     const state = workspace?.initialLayoutState() ?? providerState;
     const id = props.panelId ?? "primary";
     const size = props.kind === "sidebar" ? state?.sidebarCollapsed ? APP_WORKSPACE_SIDEBAR_COLLAPSED : state?.sidebarWidth : props.kind === "pane" ? state?.paneWidths?.[id] : props.kind === "detail" ? state?.detailWidths?.[id] : state?.drawerHeights?.[id];
-    return Math.min(props.maxSize, Math.max(props.minSize, size ?? props.defaultSize));
+    return Math.min(props.maxSize, Math.max(props.minSize, size ?? (typeof props.defaultSize === "number" ? props.defaultSize : props.defaultSize.min)));
   };
-  return _$ssr(_tmpl$, _$ssrAttribute("aria-label", _$escape(props.label ?? (props.kind === "sidebar" ? workspaceMessages().resizeNavigation : props.kind === "pane" ? workspaceMessages().resizeWorkspacePane : props.kind === "detail" ? workspaceMessages().resizeDetailPanel : workspaceMessages().resizeBottomDrawer), true), false) + _$ssrAttribute("aria-controls", _$escape(props.controls, true), false) + _$ssrAttribute("aria-orientation", props.kind === "drawer" ? "horizontal" : "vertical", false) + _$ssrAttribute("aria-valuemin", _$escape(props.minSize, true), false) + _$ssrAttribute("aria-valuemax", _$escape(props.maxSize, true), false) + _$ssrAttribute("aria-valuenow", _$escape(initialSize(), true), false) + _$ssrAttribute("data-workspace-level-shown", _$escape(props.levelShown, true), false) + _$ssrAttribute("data-app-workspace-resize", _$escape(props.kind, true), false) + _$ssrAttribute("data-workspace-panel-id", _$escape(props.panelId, true), false) + _$ssrAttribute("data-workspace-resize-edge", _$escape(props.edge, true), false) + _$ssrAttribute("data-workspace-resize-shadow", props.shadow ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-default-size", _$escape(props.defaultSize, true), false) + _$ssrAttribute("data-workspace-min-size", _$escape(props.minSize, true), false) + _$ssrAttribute("data-workspace-max-size", _$escape(props.maxSize, true), false), _$ssrStyle(props.style));
+  return _$ssr(_tmpl$, _$ssrAttribute("aria-label", _$escape(props.label ?? (props.kind === "sidebar" ? workspaceMessages().resizeNavigation : props.kind === "pane" ? workspaceMessages().resizeWorkspacePane : props.kind === "detail" ? workspaceMessages().resizeDetailPanel : workspaceMessages().resizeBottomDrawer), true), false) + _$ssrAttribute("aria-controls", _$escape(props.controls, true), false) + _$ssrAttribute("aria-orientation", props.kind === "drawer" ? "horizontal" : "vertical", false) + _$ssrAttribute("aria-valuemin", _$escape(props.minSize, true), false) + _$ssrAttribute("aria-valuemax", _$escape(props.maxSize, true), false) + _$ssrAttribute("aria-valuenow", _$escape(initialSize(), true), false) + _$ssrAttribute("data-workspace-level-shown", _$escape(props.levelShown, true), false) + _$ssrAttribute("data-app-workspace-resize", _$escape(props.kind, true), false) + _$ssrAttribute("data-workspace-panel-id", _$escape(props.panelId, true), false) + _$ssrAttribute("data-workspace-resize-edge", _$escape(props.edge, true), false) + _$ssrAttribute("data-workspace-resize-shadow", props.shadow ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-default-size", _$escape(appWorkspaceWidthToken(props.defaultSize), true), false) + _$ssrAttribute("data-workspace-min-size", _$escape(props.minSize, true), false) + _$ssrAttribute("data-workspace-max-size", _$escape(props.maxSize, true), false), _$ssrStyle(props.style));
 }
 
 /**
@@ -275,11 +276,12 @@ function AppWorkspaceMain(props) {
   // as `AppWorkspace.Detail` does with its width.
   const minWidth = () => {
     const value = props.minWidth;
-    return value !== undefined && Number.isFinite(value) && value > APP_WORKSPACE_MAIN_MIN ? Math.round(value) : undefined;
+    return isAppWorkspaceWidthShare(value) ? value : typeof value === "number" && Number.isFinite(value) && value > APP_WORKSPACE_MAIN_MIN ? Math.round(value) : undefined;
   };
   const minWidthRule = value => {
-    const main = `.k2b-app-workspace__main[data-workspace-main-min="${value}"]`;
-    return `.k2b-app-workspace:has(> .k2b-app-workspace__content > ${main}, > .k2b-app-workspace__content > :is(solid-island, solid-client) > ${main}){--k2b-workspace-main-min:${value}px}`;
+    const main = `.k2b-app-workspace__main[data-workspace-main-min="${appWorkspaceWidthToken(value)}"]`;
+    const inverse = typeof value === "number" ? "" : `;--k2b-workspace-main-min-grid:${appWorkspaceInverseWidthCss(value, "100%")};--k2b-workspace-main-min-cq:${appWorkspaceInverseWidthCss(value, "100cqi")}`;
+    return `.k2b-app-workspace:has(> .k2b-app-workspace__content > ${main}, > .k2b-app-workspace__content > :is(solid-island, solid-client) > ${main}){--k2b-workspace-main-min:${appWorkspaceWidthCss(value, "100%")}${inverse}}`;
   };
   return [_$createComponent(Show, {
     get when() {
@@ -291,7 +293,7 @@ function AppWorkspaceMain(props) {
       return `k2b-app-workspace__main ${hasPanes() ? "has-panes" : ""} ${props.class ?? ""}`;
     },
     get ["data-workspace-main-min"]() {
-      return minWidth();
+      return minWidth() === undefined ? undefined : appWorkspaceWidthToken(minWidth());
     },
     get ["data-workspace-levels"]() {
       return levelsMode() ? "" : undefined;
@@ -341,7 +343,10 @@ function AppWorkspaceMain(props) {
           const variable = appWorkspacePanelVariable("pane", panelId);
           const isAnchor = () => region === anchorRegion();
           const resizable = () => !isAnchor() && (pane.props.resizable ?? rootResizable);
-          const defaultSize = () => pane.props.defaultSize ?? APP_WORKSPACE_PANE_DEFAULT;
+          const defaultSize = () => {
+            const value = pane.props.defaultSize;
+            return typeof value === "number" || isAppWorkspaceWidthShare(value) ? value : APP_WORKSPACE_PANE_DEFAULT;
+          };
           const minSize = () => pane.props.minSize ?? APP_WORKSPACE_PANE_MIN;
           const maxSize = () => Math.max(minSize(), pane.props.maxSize ?? APP_WORKSPACE_PANE_MAX);
           const before = () => levelsMode() || region.index < (anchorRegion()?.index ?? 0);
@@ -387,7 +392,7 @@ function AppWorkspaceMain(props) {
                 }
               }), _$ssr(_tmpl$7, _$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(isAnchor() ? undefined : {
                 // A stored width keeps to this pane's limits before the controller attaches.
-                "--k2b-workspace-panel-size": `clamp(${minSize()}px, var(${variable}, ${defaultSize()}px), ${maxSize()}px)`,
+                "--k2b-workspace-panel-size": `clamp(${minSize()}px, var(${variable}, ${appWorkspaceWidthCss(defaultSize(), "var(--k2b-workspace-width)")}), ${maxSize()}px)`,
                 "--k2b-workspace-panel-min": `${minSize()}px`
               }), levelsMode() ? _$escape([_$createComponent(LevelHead, {
                 get label() {
@@ -443,11 +448,14 @@ function AppWorkspaceMain(props) {
     }
   })), false)];
 }
+
+/** The Detail region's DOM id, for application controls that target it with aria-controls. */
+export const appWorkspaceDetailElementId = id => `k2b-workspace-detail-${assertStableUiId(id, "AppWorkspace.Detail id")}`;
 function AppWorkspaceDetail(props) {
   const workspaceMessages = useWorkspaceMessages();
   const rootResizable = useContext(ResizeContext);
   const panelId = () => assertStableUiId(props.id, "AppWorkspace.Detail id");
-  const domId = () => `k2b-workspace-detail-${panelId()}`;
+  const domId = () => appWorkspaceDetailElementId(props.id);
   const variable = () => appWorkspacePanelVariable("detail", panelId());
   // Start widths of 20, 26, 30, and 34 rem. They feed `aria-valuenow` and the
   // `var(…, Npx)` first-paint fallback, so they are behaviour, not taste.
@@ -478,15 +486,20 @@ function AppWorkspaceDetail(props) {
   let aside;
   onMount(() => {
     const close = () => props.onClose?.();
+    const open = () => {
+      if (props.available !== false) props.onOpen?.();
+    };
     const isStep = detail => typeof detail === "object" && detail !== null && "direction" in detail && (detail.direction === 1 || detail.direction === -1);
     const step = event => {
       if (!(event instanceof CustomEvent) || !isStep(event.detail)) return;
       const item = props.onStep?.(event.detail.direction);
       if (item instanceof HTMLElement) event.detail.item = item;
     };
+    aside?.addEventListener(APP_WORKSPACE_DETAIL_OPEN_EVENT, open);
     aside?.addEventListener(APP_WORKSPACE_DETAIL_CLOSE_EVENT, close);
     aside?.addEventListener(APP_WORKSPACE_DETAIL_STEP_EVENT, step);
     onCleanup(() => {
+      aside?.removeEventListener(APP_WORKSPACE_DETAIL_OPEN_EVENT, open);
       aside?.removeEventListener(APP_WORKSPACE_DETAIL_CLOSE_EVENT, close);
       aside?.removeEventListener(APP_WORKSPACE_DETAIL_STEP_EVENT, step);
     });
@@ -499,6 +512,12 @@ function AppWorkspaceDetail(props) {
     },
     "aria-expanded": "false",
     "data-app-workspace-detail-toggle": "",
+    get ["data-workspace-detail-reopen"]() {
+      return props.onOpen ? "true" : undefined;
+    },
+    get disabled() {
+      return props.available === false;
+    },
     "class": "k2b-app-workspace__detail-toggle",
     get children() {
       return [_$ssr(_tmpl$0), workspaceMessages().details];
@@ -526,12 +545,13 @@ function AppWorkspaceDetail(props) {
         get maxSize() {
           return maxWidth();
         },
+        shadow: true,
         get style() {
           return sizeStyle();
         }
       });
     }
-  }), _$ssr(_tmpl$1, _$ssrAttribute("id", _$escape(domId(), true), false), `k2b-app-workspace__detail ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-width", _$escape(props.width ?? "md", true), false) + _$ssrAttribute("data-workspace-detail-phone", props.phone === "page" ? "page" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-detail-choice", props.openOnChoice === false ? "request" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-panel-id", _$escape(panelId(), true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false) + _$ssrAttribute("data-workspace-detail-closable", props.onClose ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-detail-steppable", props.onStep ? "true" : _$escape(undefined, true), false), _$ssrAttribute("hidden", !props.open, true), _$ssrStyle({
+  }), _$ssr(_tmpl$1, _$ssrAttribute("id", _$escape(domId(), true), false), `k2b-app-workspace__detail ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-width", _$escape(props.width ?? "md", true), false) + _$ssrAttribute("data-workspace-detail-phone", props.phone === "page" ? "page" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-detail-choice", props.openOnChoice === false ? "request" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-panel-id", _$escape(panelId(), true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false) + _$ssrAttribute("data-workspace-detail-reopen", props.onOpen ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-detail-closable", props.onClose ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-detail-steppable", props.onStep ? "true" : _$escape(undefined, true), false), _$ssrAttribute("hidden", !props.open || props.available === false, true), _$ssrStyle({
     ...sizeStyle(),
     "view-transition-name": props.viewTransitionName
   }), _$ssrAttribute("aria-label", _$escape(workspaceMessages().detailFullHeight, true), false), _$escape(props.children))];
@@ -1700,9 +1720,23 @@ function AppWorkspaceHead(props) {
   const resolvedCount = children(() => props.head?.count);
   // A nested workspace is part of a page that already shows its title.
   const trail = props.nested ? () => undefined : usePageTrail();
+  // Main already publishes the active region in SSR and on each selection.
+  // Scope both sides to this workspace, including transparent island hosts;
+  // a nested Main must never decide whether its parent's head is visible.
+  const mobilePane = () => props.head?.mobilePane === undefined ? undefined : assertStableUiId(props.head.mobilePane, "AppWorkspace.Head mobilePane");
+  const mobilePaneRule = pane => {
+    const main = `.k2b-app-workspace__main.has-panes:not([data-workspace-levels]) > [data-workspace-mobile-active="true"]:not([data-workspace-main-region="${pane}"])`;
+    const host = `.k2b-ui .k2b-app-workspace:has(> .k2b-app-workspace__head[data-workspace-head-pane="${pane}"]):has(> .k2b-app-workspace__content > ${main}, > .k2b-app-workspace__content > :is(solid-island, solid-client) > ${main})`;
+    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$47, _$ssrAttribute("class", _$escape(props.head?.primary?.icon, true), false)), _$ssr(_tmpl$48, _$escape(props.head?.primary?.label))];
-  return _$ssr(_tmpl$54, _$ssrAttribute("data-trail", trail()?.ancestors.length ? "up" : trail() ? "title" : _$escape(undefined, true), false) + _$ssrAttribute("data-row", props.head ? "" : _$escape(undefined, true), false), _$escape(_$createComponent(IconButton, {
+  return _$ssr(_tmpl$54, _$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();
+    },
+    children: pane => _$ssr(_tmpl$5, mobilePaneRule(pane()))
+  })), _$escape(_$createComponent(IconButton, {
     "class": "k2b-app-workspace__head-toggle",
     get label() {
       return messages().showNavigation;
@@ -1864,14 +1898,17 @@ const AppWorkspace = props => {
     const slots = createMemo(() => flatten(resolved()));
     // Same props object, same memo value: a sibling change must not rebuild the head's slots.
     const head = createMemo(() => slots().find(headSlot)?.props);
-    const content = () => slots().filter(value => !headSlot(value));
-    return [_$createComponent(AppWorkspaceHead, {
+    // Keep one head instance at the explicit slot's position. Object links
+    // before it must also precede its view controls in SSR and keyboard order.
+    // Callers without a slot retain the automatic leading head.
+    const renderedHead = _$createComponent(AppWorkspaceHead, {
       sidebarId: sidebarId,
       nested: nested,
       get head() {
         return head();
       }
-    }), content()];
+    });
+    return head() ? slots().map(value => headSlot(value) ? value.props === head() ? renderedHead : null : value) : [renderedHead, ...slots()];
   };
   return _$createComponent(ResizeContext.Provider, {
     get value() {