@k2b/ui 0.31.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,7 +73,7 @@ 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";
@@ -486,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);
     });
@@ -507,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];
@@ -534,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))];
@@ -1708,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;
@@ -1872,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() {