@k2b/ui 0.41.0 → 0.43.0

package/dist/browser/layout/AppWorkspace.js

@@ -73,15 +73,16 @@ var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspac
   _tmpl$53 = /*#__PURE__*/_$template(`<div role=tree>`),
   _tmpl$54 = /*#__PURE__*/_$template(`<section><!$><!/><div class=k2b-app-workspace__sidebar-icon-grid>`),
   _tmpl$55 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
-  _tmpl$56 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__head-primary-label>`),
-  _tmpl$57 = /*#__PURE__*/_$template(`<i class="ti ti-layout-sidebar"aria-hidden=true>`),
-  _tmpl$58 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head-views>`),
-  _tmpl$59 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head-filters role=group><!$><!/><!$><!/>`),
-  _tmpl$60 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__head-count><span>`),
-  _tmpl$61 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head-actions><!$><!/><!$><!/>`),
-  _tmpl$62 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head><!$><!/><div class=k2b-app-workspace__head-lead><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/>`),
-  _tmpl$63 = /*#__PURE__*/_$template(`<h1 class=k2b-app-workspace__head-heading data-k2b-page-trail-title>`),
-  _tmpl$64 = /*#__PURE__*/_$template(`<div data-k2b-app-workspace>`);
+  _tmpl$56 = /*#__PURE__*/_$template(`<i class="ti ti-chevron-down k2b-app-workspace__head-primary-chevron"aria-hidden=true>`),
+  _tmpl$57 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__head-primary-label><!$><!/><!$><!/>`),
+  _tmpl$58 = /*#__PURE__*/_$template(`<i class="ti ti-layout-sidebar"aria-hidden=true>`),
+  _tmpl$59 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head-views>`),
+  _tmpl$60 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head-filters role=group><!$><!/><!$><!/>`),
+  _tmpl$61 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__head-count><span>`),
+  _tmpl$62 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head-actions><!$><!/><!$><!/>`),
+  _tmpl$63 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head><!$><!/><div class=k2b-app-workspace__head-lead><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/>`),
+  _tmpl$64 = /*#__PURE__*/_$template(`<h1 class=k2b-app-workspace__head-heading data-k2b-page-trail-title>`),
+  _tmpl$65 = /*#__PURE__*/_$template(`<div data-k2b-app-workspace>`);
 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";
@@ -2603,38 +2604,50 @@ function AppWorkspaceHead(props) {
     _$effect(() => _$className(_el$120, props.head?.primary?.icon));
     return _el$120;
   })(), (() => {
-    var _el$121 = _$getNextElement(_tmpl$56);
-    _$insert(_el$121, () => props.head?.primary?.label);
+    var _el$121 = _$getNextElement(_tmpl$57),
+      _el$123 = _el$121.firstChild,
+      [_el$124, _co$18] = _$getNextMarker(_el$123.nextSibling),
+      _el$125 = _el$124.nextSibling,
+      [_el$126, _co$19] = _$getNextMarker(_el$125.nextSibling);
+    _$insert(_el$121, () => props.head?.primary?.label, _el$124, _co$18);
+    _$insert(_el$121, _$createComponent(Show, {
+      get when() {
+        return props.head?.primary?.popup;
+      },
+      get children() {
+        return _$getNextElement(_tmpl$56);
+      }
+    }), _el$126, _co$19);
     return _el$121;
   })()];
   return (() => {
-    var _el$122 = _$getNextElement(_tmpl$62),
-      _el$148 = _el$122.firstChild,
-      [_el$149, _co$27] = _$getNextMarker(_el$148.nextSibling),
-      _el$123 = _el$149.nextSibling,
-      _el$133 = _el$123.firstChild,
-      [_el$134, _co$20] = _$getNextMarker(_el$133.nextSibling),
-      _el$135 = _el$134.nextSibling,
-      [_el$136, _co$21] = _$getNextMarker(_el$135.nextSibling),
-      _el$137 = _el$136.nextSibling,
-      [_el$138, _co$22] = _$getNextMarker(_el$137.nextSibling),
-      _el$139 = _el$138.nextSibling,
-      [_el$140, _co$23] = _$getNextMarker(_el$139.nextSibling),
-      _el$141 = _el$140.nextSibling,
-      [_el$142, _co$24] = _$getNextMarker(_el$141.nextSibling),
-      _el$150 = _el$123.nextSibling,
-      [_el$151, _co$28] = _$getNextMarker(_el$150.nextSibling);
-    _$insert(_el$122, _$createComponent(Show, {
+    var _el$127 = _$getNextElement(_tmpl$63),
+      _el$153 = _el$127.firstChild,
+      [_el$154, _co$29] = _$getNextMarker(_el$153.nextSibling),
+      _el$128 = _el$154.nextSibling,
+      _el$138 = _el$128.firstChild,
+      [_el$139, _co$22] = _$getNextMarker(_el$138.nextSibling),
+      _el$140 = _el$139.nextSibling,
+      [_el$141, _co$23] = _$getNextMarker(_el$140.nextSibling),
+      _el$142 = _el$141.nextSibling,
+      [_el$143, _co$24] = _$getNextMarker(_el$142.nextSibling),
+      _el$144 = _el$143.nextSibling,
+      [_el$145, _co$25] = _$getNextMarker(_el$144.nextSibling),
+      _el$146 = _el$145.nextSibling,
+      [_el$147, _co$26] = _$getNextMarker(_el$146.nextSibling),
+      _el$155 = _el$128.nextSibling,
+      [_el$156, _co$30] = _$getNextMarker(_el$155.nextSibling);
+    _$insert(_el$127, _$createComponent(Show, {
       get when() {
         return mobilePane();
       },
       children: pane => (() => {
-        var _el$152 = _$getNextElement(_tmpl$7);
-        _$effect(() => _$setProperty(_el$152, "innerHTML", mobilePaneRule(pane())));
-        return _el$152;
+        var _el$157 = _$getNextElement(_tmpl$7);
+        _$effect(() => _$setProperty(_el$157, "innerHTML", mobilePaneRule(pane())));
+        return _el$157;
       })()
-    }), _el$149, _co$27);
-    _$insert(_el$123, _$createComponent(IconButton, {
+    }), _el$154, _co$29);
+    _$insert(_el$128, _$createComponent(IconButton, {
       "class": "k2b-app-workspace__head-toggle",
       get label() {
         return messages().showNavigation;
@@ -2645,10 +2658,10 @@ function AppWorkspaceHead(props) {
       "aria-expanded": "false",
       "data-app-workspace-sidebar-toggle": "",
       get children() {
-        return _$getNextElement(_tmpl$57);
+        return _$getNextElement(_tmpl$58);
       }
-    }), _el$134, _co$20);
-    _$insert(_el$123, _$createComponent(Show, {
+    }), _el$139, _co$22);
+    _$insert(_el$128, _$createComponent(Show, {
       get when() {
         return trail();
       },
@@ -2659,34 +2672,34 @@ function AppWorkspaceHead(props) {
         as: "p",
         fallback: true
       }), (() => {
-        var _el$153 = _$getNextElement(_tmpl$63);
-        _$setAttribute(_el$153, "data-k2b-server", isServer ? "" : undefined);
-        _$insert(_el$153, () => current().title);
-        return _el$153;
+        var _el$158 = _$getNextElement(_tmpl$64);
+        _$setAttribute(_el$158, "data-k2b-server", isServer ? "" : undefined);
+        _$insert(_el$158, () => current().title);
+        return _el$158;
       })()]
-    }), _el$136, _co$21);
-    _$insert(_el$123, _$createComponent(Show, {
+    }), _el$141, _co$23);
+    _$insert(_el$128, _$createComponent(Show, {
       get when() {
         return resolvedViews.toArray().some(Boolean);
       },
       get children() {
-        var _el$125 = _$getNextElement(_tmpl$58);
-        _$insert(_el$125, resolvedViews);
-        return _el$125;
+        var _el$130 = _$getNextElement(_tmpl$59);
+        _$insert(_el$130, resolvedViews);
+        return _el$130;
       }
-    }), _el$138, _co$22);
-    _$insert(_el$123, _$createComponent(Show, {
+    }), _el$143, _co$24);
+    _$insert(_el$128, _$createComponent(Show, {
       get when() {
         return resolvedFilters.toArray().some(Boolean) || props.head?.filtered;
       },
       get children() {
-        var _el$126 = _$getNextElement(_tmpl$59),
-          _el$127 = _el$126.firstChild,
-          [_el$128, _co$18] = _$getNextMarker(_el$127.nextSibling),
-          _el$129 = _el$128.nextSibling,
-          [_el$130, _co$19] = _$getNextMarker(_el$129.nextSibling);
-        _$insert(_el$126, resolvedFilters, _el$128, _co$18);
-        _$insert(_el$126, _$createComponent(Show, {
+        var _el$131 = _$getNextElement(_tmpl$60),
+          _el$132 = _el$131.firstChild,
+          [_el$133, _co$20] = _$getNextMarker(_el$132.nextSibling),
+          _el$134 = _el$133.nextSibling,
+          [_el$135, _co$21] = _$getNextMarker(_el$134.nextSibling);
+        _$insert(_el$131, resolvedFilters, _el$133, _co$20);
+        _$insert(_el$131, _$createComponent(Show, {
           get when() {
             return props.head?.filtered;
           },
@@ -2726,34 +2739,34 @@ function AppWorkspaceHead(props) {
               })
             });
           }
-        }), _el$130, _co$19);
-        _$effect(() => _$setAttribute(_el$126, "aria-label", filters().filters));
-        return _el$126;
+        }), _el$135, _co$21);
+        _$effect(() => _$setAttribute(_el$131, "aria-label", filters().filters));
+        return _el$131;
       }
-    }), _el$140, _co$23);
-    _$insert(_el$123, _$createComponent(Show, {
+    }), _el$145, _co$25);
+    _$insert(_el$128, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!props.head?.filtered)() && resolvedCount.toArray().some(value => value !== undefined && value !== null && value !== false);
       },
       get children() {
-        var _el$131 = _$getNextElement(_tmpl$60),
-          _el$132 = _el$131.firstChild;
-        _$insert(_el$132, resolvedCount);
-        return _el$131;
+        var _el$136 = _$getNextElement(_tmpl$61),
+          _el$137 = _el$136.firstChild;
+        _$insert(_el$137, resolvedCount);
+        return _el$136;
       }
-    }), _el$142, _co$24);
-    _$insert(_el$122, _$createComponent(Show, {
+    }), _el$147, _co$26);
+    _$insert(_el$127, _$createComponent(Show, {
       get when() {
         return resolvedActions.toArray().some(Boolean) || props.head?.primary;
       },
       get children() {
-        var _el$143 = _$getNextElement(_tmpl$61),
-          _el$144 = _el$143.firstChild,
-          [_el$145, _co$25] = _$getNextMarker(_el$144.nextSibling),
-          _el$146 = _el$145.nextSibling,
-          [_el$147, _co$26] = _$getNextMarker(_el$146.nextSibling);
-        _$insert(_el$143, resolvedActions, _el$145, _co$25);
-        _$insert(_el$143, _$createComponent(Show, {
+        var _el$148 = _$getNextElement(_tmpl$62),
+          _el$149 = _el$148.firstChild,
+          [_el$150, _co$27] = _$getNextMarker(_el$149.nextSibling),
+          _el$151 = _el$150.nextSibling,
+          [_el$152, _co$28] = _$getNextMarker(_el$151.nextSibling);
+        _$insert(_el$148, resolvedActions, _el$150, _co$27);
+        _$insert(_el$148, _$createComponent(Show, {
           get when() {
             return props.head?.primary;
           },
@@ -2767,6 +2780,12 @@ function AppWorkspaceHead(props) {
                 size: "sm",
                 "class": "k2b-app-workspace__head-primary",
                 "data-workspace-primary": "",
+                get ["aria-haspopup"]() {
+                  return primary().popup;
+                },
+                get ["aria-expanded"]() {
+                  return primary().popup ? "false" : undefined;
+                },
                 get onClick() {
                   return primary().onClick;
                 },
@@ -2780,6 +2799,12 @@ function AppWorkspaceHead(props) {
               size: "sm",
               "class": "k2b-app-workspace__head-primary",
               "data-workspace-primary": "",
+              get ["aria-haspopup"]() {
+                return primary().popup;
+              },
+              get ["aria-expanded"]() {
+                return primary().popup ? "false" : undefined;
+              },
               get href() {
                 return href();
               },
@@ -2791,24 +2816,24 @@ function AppWorkspaceHead(props) {
               }
             })
           })
-        }), _el$147, _co$26);
-        return _el$143;
+        }), _el$152, _co$28);
+        return _el$148;
       }
-    }), _el$151, _co$28);
+    }), _el$156, _co$30);
     _$effect(_p$ => {
       var _v$87 = trail()?.ancestors.length ? "up" : trail() ? "title" : undefined,
         _v$88 = props.head ? "" : undefined,
         _v$89 = mobilePane();
-      _v$87 !== _p$.e && _$setAttribute(_el$122, "data-trail", _p$.e = _v$87);
-      _v$88 !== _p$.t && _$setAttribute(_el$122, "data-row", _p$.t = _v$88);
-      _v$89 !== _p$.a && _$setAttribute(_el$122, "data-workspace-head-pane", _p$.a = _v$89);
+      _v$87 !== _p$.e && _$setAttribute(_el$127, "data-trail", _p$.e = _v$87);
+      _v$88 !== _p$.t && _$setAttribute(_el$127, "data-row", _p$.t = _v$88);
+      _v$89 !== _p$.a && _$setAttribute(_el$127, "data-workspace-head-pane", _p$.a = _v$89);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined
     });
-    return _el$122;
+    return _el$127;
   })();
 }
 const AppWorkspace = props => {
@@ -2863,10 +2888,10 @@ const AppWorkspace = props => {
       return _$createComponent(WorkspaceContext.Provider, {
         value: workspace,
         get children() {
-          var _el$154 = _$getNextElement(_tmpl$64);
+          var _el$159 = _$getNextElement(_tmpl$65);
           var _ref$8 = root;
-          typeof _ref$8 === "function" ? _$use(_ref$8, _el$154) : root = _el$154;
-          _$insert(_el$154, contents);
+          typeof _ref$8 === "function" ? _$use(_ref$8, _el$159) : root = _el$159;
+          _$insert(_el$159, contents);
           _$effect(_p$ => {
             var _v$90 = `k2b-app-workspace ${props.class ?? ""}`,
               _v$91 = props.mobileSurface,
@@ -2874,12 +2899,12 @@ const AppWorkspace = props => {
               _v$93 = initialLayoutState()?.sidebarCollapsed === undefined ? undefined : String(initialLayoutState()?.sidebarCollapsed),
               _v$94 = props.resizable === false ? "false" : "true",
               _v$95 = appWorkspaceLayoutStyle(initialLayoutState());
-            _v$90 !== _p$.e && _$className(_el$154, _p$.e = _v$90);
-            _v$91 !== _p$.t && _$setAttribute(_el$154, "data-mobile-surface", _p$.t = _v$91);
-            _v$92 !== _p$.a && _$setAttribute(_el$154, "data-flat", _p$.a = _v$92);
-            _v$93 !== _p$.o && _$setAttribute(_el$154, "data-sidebar-collapsed", _p$.o = _v$93);
-            _v$94 !== _p$.i && _$setAttribute(_el$154, "data-workspace-resizable", _p$.i = _v$94);
-            _p$.n = _$style(_el$154, _v$95, _p$.n);
+            _v$90 !== _p$.e && _$className(_el$159, _p$.e = _v$90);
+            _v$91 !== _p$.t && _$setAttribute(_el$159, "data-mobile-surface", _p$.t = _v$91);
+            _v$92 !== _p$.a && _$setAttribute(_el$159, "data-flat", _p$.a = _v$92);
+            _v$93 !== _p$.o && _$setAttribute(_el$159, "data-sidebar-collapsed", _p$.o = _v$93);
+            _v$94 !== _p$.i && _$setAttribute(_el$159, "data-workspace-resizable", _p$.i = _v$94);
+            _p$.n = _$style(_el$159, _v$95, _p$.n);
             return _p$;
           }, {
             e: undefined,
@@ -2889,7 +2914,7 @@ const AppWorkspace = props => {
             i: undefined,
             n: undefined
           });
-          return _el$154;
+          return _el$159;
         }
       });
     }
@@ -2905,10 +2930,10 @@ AppWorkspace.LayoutStateProvider = props => _$createComponent(LayoutStateContext
 });
 AppWorkspace.Head = AppWorkspaceHeadSlot;
 AppWorkspace.Content = props => (() => {
-  var _el$155 = _$getNextElement(_tmpl$6);
-  _$insert(_el$155, () => props.children);
-  _$effect(() => _$className(_el$155, `k2b-app-workspace__content ${props.class ?? ""}`));
-  return _el$155;
+  var _el$160 = _$getNextElement(_tmpl$6);
+  _$insert(_el$160, () => props.children);
+  _$effect(() => _$className(_el$160, `k2b-app-workspace__content ${props.class ?? ""}`));
+  return _el$160;
 })();
 AppWorkspace.Main = AppWorkspaceMain;
 AppWorkspace.MainPane = AppWorkspaceMainPane;