@k2b/ui 0.37.0 → 0.38.0

package/dist/browser/layout/AppWorkspace.js

@@ -57,30 +57,31 @@ var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspac
   _tmpl$37 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-context-meta>`),
   _tmpl$38 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-context><span class="k2b-app-workspace__sidebar-item-context-label k2b-truncate-fade"></span><!$><!/>`),
   _tmpl$39 = /*#__PURE__*/_$template(`<span class="k2b-app-workspace__sidebar-item-description k2b-truncate-fade">`),
-  _tmpl$40 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-copy><!$><!/><span class=k2b-app-workspace__sidebar-item-label><span class="k2b-app-workspace__sidebar-item-label-text k2b-truncate-fade-lines"></span></span><!$><!/>`),
-  _tmpl$41 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-meta>`),
-  _tmpl$42 = /*#__PURE__*/_$template(`<i>`),
-  _tmpl$43 = /*#__PURE__*/_$template(`<a class=k2b-app-workspace__sidebar-item-action>`),
-  _tmpl$44 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__sidebar-item-action>`),
-  _tmpl$45 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon><i>`),
-  _tmpl$46 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-copy><span class=k2b-app-workspace__sidebar-item-label><span class="k2b-app-workspace__sidebar-item-label-text k2b-truncate-fade-lines"></span></span><span class="k2b-app-workspace__sidebar-item-description k2b-truncate-fade">`),
-  _tmpl$47 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$48 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__nav-tree-toggle data-k2b-nav-tree-toggle aria-hidden=true><i>`),
-  _tmpl$49 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-label><span class="k2b-app-workspace__sidebar-item-label-text k2b-truncate-fade-lines">`),
-  _tmpl$50 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-group role=group>`),
-  _tmpl$51 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-node role=treeitem><!$><!/><!$><!/>`),
-  _tmpl$52 = /*#__PURE__*/_$template(`<div role=tree>`),
-  _tmpl$53 = /*#__PURE__*/_$template(`<section><!$><!/><div class=k2b-app-workspace__sidebar-icon-grid>`),
-  _tmpl$54 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
-  _tmpl$55 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__head-primary-label>`),
-  _tmpl$56 = /*#__PURE__*/_$template(`<i class="ti ti-layout-sidebar"aria-hidden=true>`),
-  _tmpl$57 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head-views>`),
-  _tmpl$58 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head-filters role=group><!$><!/><!$><!/>`),
-  _tmpl$59 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__head-count><span>`),
-  _tmpl$60 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head-actions><!$><!/><!$><!/>`),
-  _tmpl$61 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head><!$><!/><div class=k2b-app-workspace__head-lead><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/>`),
-  _tmpl$62 = /*#__PURE__*/_$template(`<h1 class=k2b-app-workspace__head-heading data-k2b-page-trail-title>`),
-  _tmpl$63 = /*#__PURE__*/_$template(`<div data-k2b-app-workspace>`);
+  _tmpl$40 = /*#__PURE__*/_$template(`<span class="k2b-app-workspace__sidebar-item-note k2b-truncate-fade">`),
+  _tmpl$41 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-copy><!$><!/><span class=k2b-app-workspace__sidebar-item-label><span class="k2b-app-workspace__sidebar-item-label-text k2b-truncate-fade-lines"></span></span><!$><!/><!$><!/>`),
+  _tmpl$42 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-meta>`),
+  _tmpl$43 = /*#__PURE__*/_$template(`<i>`),
+  _tmpl$44 = /*#__PURE__*/_$template(`<a class=k2b-app-workspace__sidebar-item-action>`),
+  _tmpl$45 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__sidebar-item-action>`),
+  _tmpl$46 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon><i>`),
+  _tmpl$47 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-copy><span class=k2b-app-workspace__sidebar-item-label><span class="k2b-app-workspace__sidebar-item-label-text k2b-truncate-fade-lines"></span></span><span class="k2b-app-workspace__sidebar-item-description k2b-truncate-fade">`),
+  _tmpl$48 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$49 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__nav-tree-toggle data-k2b-nav-tree-toggle aria-hidden=true><i>`),
+  _tmpl$50 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-label><span class="k2b-app-workspace__sidebar-item-label-text k2b-truncate-fade-lines">`),
+  _tmpl$51 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-group role=group>`),
+  _tmpl$52 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-node role=treeitem><!$><!/><!$><!/>`),
+  _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>`);
 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";
@@ -1692,9 +1693,9 @@ function AppWorkspaceSidebarItem(props) {
     get children() {
       var _el$72 = _$getNextElement(_tmpl$36);
       _$insert(_el$72, () => iconContent() ?? (() => {
-        var _el$87 = _$getNextElement(_tmpl$42);
-        _$effect(() => _$className(_el$87, iconClass(icon())));
-        return _el$87;
+        var _el$90 = _$getNextElement(_tmpl$43);
+        _$effect(() => _$className(_el$90, iconClass(icon())));
+        return _el$90;
       })());
       _$effect(() => _$className(_el$72,
       // An object row's own glyph sits in a soft chip of the app colour; custom content such as an avatar keeps
@@ -1703,13 +1704,15 @@ function AppWorkspaceSidebarItem(props) {
       return _el$72;
     }
   }), (() => {
-    var _el$73 = _$getNextElement(_tmpl$40),
-      _el$82 = _el$73.firstChild,
-      [_el$83, _co$12] = _$getNextMarker(_el$82.nextSibling),
-      _el$79 = _el$83.nextSibling,
+    var _el$73 = _$getNextElement(_tmpl$41),
+      _el$83 = _el$73.firstChild,
+      [_el$84, _co$12] = _$getNextMarker(_el$83.nextSibling),
+      _el$79 = _el$84.nextSibling,
       _el$80 = _el$79.firstChild,
-      _el$84 = _el$79.nextSibling,
-      [_el$85, _co$13] = _$getNextMarker(_el$84.nextSibling);
+      _el$85 = _el$79.nextSibling,
+      [_el$86, _co$13] = _$getNextMarker(_el$85.nextSibling),
+      _el$87 = _el$86.nextSibling,
+      [_el$88, _co$14] = _$getNextMarker(_el$87.nextSibling);
     _$insert(_el$73, _$createComponent(Show, {
       get when() {
         return props.context || props.contextMeta;
@@ -1732,7 +1735,7 @@ function AppWorkspaceSidebarItem(props) {
         }), _el$78, _co$11);
         return _el$74;
       }
-    }), _el$83, _co$12);
+    }), _el$84, _co$12);
     _$insert(_el$80, () => label());
     _$insert(_el$73, _$createComponent(Show, {
       get when() {
@@ -1743,7 +1746,18 @@ function AppWorkspaceSidebarItem(props) {
         _$insert(_el$81, () => props.description);
         return _el$81;
       }
-    }), _el$85, _co$13);
+    }), _el$86, _co$13);
+    _$insert(_el$73, _$createComponent(Show, {
+      get when() {
+        return props.note;
+      },
+      get children() {
+        var _el$82 = _$getNextElement(_tmpl$40);
+        _$insert(_el$82, () => props.note);
+        _$effect(() => _$setAttribute(_el$82, "data-tone", props.noteTone ?? "neutral"));
+        return _el$82;
+      }
+    }), _el$88, _co$14);
     _$effect(_p$ => {
       var _v$62 = oneLine() ? "1" : undefined,
         _v$63 = !oneLine() && typeof label() === "string" ? label() : undefined;
@@ -1760,19 +1774,19 @@ function AppWorkspaceSidebarItem(props) {
       return hasMeta();
     },
     get children() {
-      var _el$86 = _$getNextElement(_tmpl$41);
-      _$insert(_el$86, meta);
+      var _el$89 = _$getNextElement(_tmpl$42);
+      _$insert(_el$89, meta);
       _$effect(_p$ => {
         var _v$64 = props.preview?.trigger === "row" ? metaId : undefined,
           _v$65 = metaVisibility() === "hover" ? "hover" : undefined;
-        _v$64 !== _p$.e && _$setAttribute(_el$86, "id", _p$.e = _v$64);
-        _v$65 !== _p$.t && _$setAttribute(_el$86, "data-visibility", _p$.t = _v$65);
+        _v$64 !== _p$.e && _$setAttribute(_el$89, "id", _p$.e = _v$64);
+        _v$65 !== _p$.t && _$setAttribute(_el$89, "data-visibility", _p$.t = _v$65);
         return _p$;
       }, {
         e: undefined,
         t: undefined
       });
-      return _el$86;
+      return _el$89;
     }
   })];
   const singleAction = () => {
@@ -1788,9 +1802,9 @@ function AppWorkspaceSidebarItem(props) {
       props.onActionClick?.(event);
     };
     const content = () => actionSlot()?.children ?? (() => {
-      var _el$88 = _$getNextElement(_tmpl$42);
-      _$effect(() => _$className(_el$88, iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots")));
-      return _el$88;
+      var _el$91 = _$getNextElement(_tmpl$43);
+      _$effect(() => _$className(_el$91, iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots")));
+      return _el$91;
     })();
     return _$createComponent(Show, {
       get when() {
@@ -1803,16 +1817,16 @@ function AppWorkspaceSidebarItem(props) {
           },
           get fallback() {
             return (() => {
-              var _el$90 = _$getNextElement(_tmpl$44);
-              _el$90.$$click = select;
-              _$insert(_el$90, content);
+              var _el$93 = _$getNextElement(_tmpl$45);
+              _el$93.$$click = select;
+              _$insert(_el$93, content);
               _$effect(_p$ => {
                 var _v$69 = actionSlot()?.disabled,
                   _v$70 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
                   _v$71 = label();
-                _v$69 !== _p$.e && _$setProperty(_el$90, "disabled", _p$.e = _v$69);
-                _v$70 !== _p$.t && _$setAttribute(_el$90, "data-visibility", _p$.t = _v$70);
-                _v$71 !== _p$.a && _$setAttribute(_el$90, "aria-label", _p$.a = _v$71);
+                _v$69 !== _p$.e && _$setProperty(_el$93, "disabled", _p$.e = _v$69);
+                _v$70 !== _p$.t && _$setAttribute(_el$93, "data-visibility", _p$.t = _v$70);
+                _v$71 !== _p$.a && _$setAttribute(_el$93, "aria-label", _p$.a = _v$71);
                 return _p$;
               }, {
                 e: undefined,
@@ -1820,20 +1834,20 @@ function AppWorkspaceSidebarItem(props) {
                 a: undefined
               });
               _$runHydrationEvents();
-              return _el$90;
+              return _el$93;
             })();
           },
           get children() {
-            var _el$89 = _$getNextElement(_tmpl$43);
-            _el$89.$$click = select;
-            _$insert(_el$89, content);
+            var _el$92 = _$getNextElement(_tmpl$44);
+            _el$92.$$click = select;
+            _$insert(_el$92, content);
             _$effect(_p$ => {
               var _v$66 = actionSlot()?.href,
                 _v$67 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
                 _v$68 = label();
-              _v$66 !== _p$.e && _$setAttribute(_el$89, "href", _p$.e = _v$66);
-              _v$67 !== _p$.t && _$setAttribute(_el$89, "data-visibility", _p$.t = _v$67);
-              _v$68 !== _p$.a && _$setAttribute(_el$89, "aria-label", _p$.a = _v$68);
+              _v$66 !== _p$.e && _$setAttribute(_el$92, "href", _p$.e = _v$66);
+              _v$67 !== _p$.t && _$setAttribute(_el$92, "data-visibility", _p$.t = _v$67);
+              _v$68 !== _p$.a && _$setAttribute(_el$92, "aria-label", _p$.a = _v$68);
               return _p$;
             }, {
               e: undefined,
@@ -1841,7 +1855,7 @@ function AppWorkspaceSidebarItem(props) {
               a: undefined
             });
             _$runHydrationEvents();
-            return _el$89;
+            return _el$92;
           }
         });
       }
@@ -2145,16 +2159,16 @@ const AppWorkspaceNavTree = props => {
           return rowIcon();
         },
         get children() {
-          var _el$91 = _$getNextElement(_tmpl$45),
-            _el$92 = _el$91.firstChild;
-          _$spread(_el$91, _$mergeProps({
+          var _el$94 = _$getNextElement(_tmpl$46),
+            _el$95 = _el$94.firstChild;
+          _$spread(_el$94, _$mergeProps({
             get ["data-k2b-nav-tree-toggle"]() {
               return usesIconDisclosure() ? "" : undefined;
             }
           }, () => iconAccessibility(item.iconLabel)), false, true);
-          _$effect(() => _$className(_el$92, iconClass(rowIcon())));
+          _$effect(() => _$className(_el$95, iconClass(rowIcon())));
           _$runHydrationEvents();
-          return _el$91;
+          return _el$94;
         }
       }), _$createComponent(Show, {
         get when() {
@@ -2162,51 +2176,51 @@ const AppWorkspaceNavTree = props => {
         },
         get fallback() {
           return (() => {
-            var _el$100 = _$getNextElement(_tmpl$49),
-              _el$101 = _el$100.firstChild;
-            _$insert(_el$101, () => item.label);
-            _$effect(() => _$setAttribute(_el$100, "data-label", typeof item.label === "string" ? item.label : undefined));
-            return _el$100;
+            var _el$103 = _$getNextElement(_tmpl$50),
+              _el$104 = _el$103.firstChild;
+            _$insert(_el$104, () => item.label);
+            _$effect(() => _$setAttribute(_el$103, "data-label", typeof item.label === "string" ? item.label : undefined));
+            return _el$103;
           })();
         },
         get children() {
-          var _el$93 = _$getNextElement(_tmpl$46),
-            _el$94 = _el$93.firstChild,
-            _el$95 = _el$94.firstChild,
-            _el$96 = _el$94.nextSibling;
-          _$insert(_el$95, () => item.label);
-          _$insert(_el$96, () => item.description);
-          _$effect(() => _$setAttribute(_el$94, "data-label", typeof item.label === "string" ? item.label : undefined));
-          return _el$93;
+          var _el$96 = _$getNextElement(_tmpl$47),
+            _el$97 = _el$96.firstChild,
+            _el$98 = _el$97.firstChild,
+            _el$99 = _el$97.nextSibling;
+          _$insert(_el$98, () => item.label);
+          _$insert(_el$99, () => item.description);
+          _$effect(() => _$setAttribute(_el$97, "data-label", typeof item.label === "string" ? item.label : undefined));
+          return _el$96;
         }
       }), _$createComponent(Show, {
         get when() {
           return item.meta !== undefined;
         },
         get children() {
-          var _el$97 = _$getNextElement(_tmpl$47);
-          _$insert(_el$97, () => item.meta);
+          var _el$100 = _$getNextElement(_tmpl$48);
+          _$insert(_el$100, () => item.meta);
           _$effect(_p$ => {
             var _v$72 = `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`,
               _v$73 = item.metaVisibility === "hover" ? "hover" : undefined;
-            _v$72 !== _p$.e && _$className(_el$97, _p$.e = _v$72);
-            _v$73 !== _p$.t && _$setAttribute(_el$97, "data-visibility", _p$.t = _v$73);
+            _v$72 !== _p$.e && _$className(_el$100, _p$.e = _v$72);
+            _v$73 !== _p$.t && _$setAttribute(_el$100, "data-visibility", _p$.t = _v$73);
             return _p$;
           }, {
             e: undefined,
             t: undefined
           });
-          return _el$97;
+          return _el$100;
         }
       }), _$createComponent(Show, {
         get when() {
           return _$memo(() => !!hasChildren())() && !usesIconDisclosure();
         },
         get children() {
-          var _el$98 = _$getNextElement(_tmpl$48),
-            _el$99 = _el$98.firstChild;
-          _$effect(() => _$className(_el$99, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`));
-          return _el$98;
+          var _el$101 = _$getNextElement(_tmpl$49),
+            _el$102 = _el$101.firstChild;
+          _$effect(() => _$className(_el$102, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`));
+          return _el$101;
         }
       })];
       const row = () => _$createComponent(AppWorkspaceSidebarRow, {
@@ -2318,33 +2332,33 @@ const AppWorkspaceNavTree = props => {
         requestMove(target.move, false);
       };
       return (() => {
-        var _el$102 = _$getNextElement(_tmpl$51),
-          _el$104 = _el$102.firstChild,
-          [_el$105, _co$14] = _$getNextMarker(_el$104.nextSibling),
-          _el$106 = _el$105.nextSibling,
-          [_el$107, _co$15] = _$getNextMarker(_el$106.nextSibling);
-        _el$102.addEventListener("drop", onDrop);
-        _$addEventListener(_el$102, "dragleave", item.onDragLeave);
-        _el$102.addEventListener("dragover", onDragOver);
-        _$addEventListener(_el$102, "dragenter", item.onDragEnter);
-        _el$102.addEventListener("dragstart", onDragStart);
-        _el$102.$$keydown = onKeyDown;
-        _el$102.addEventListener("focus", () => setFocusedId(item.id));
+        var _el$105 = _$getNextElement(_tmpl$52),
+          _el$107 = _el$105.firstChild,
+          [_el$108, _co$15] = _$getNextMarker(_el$107.nextSibling),
+          _el$109 = _el$108.nextSibling,
+          [_el$110, _co$16] = _$getNextMarker(_el$109.nextSibling);
+        _el$105.addEventListener("drop", onDrop);
+        _$addEventListener(_el$105, "dragleave", item.onDragLeave);
+        _el$105.addEventListener("dragover", onDragOver);
+        _$addEventListener(_el$105, "dragenter", item.onDragEnter);
+        _el$105.addEventListener("dragstart", onDragStart);
+        _el$105.$$keydown = onKeyDown;
+        _el$105.addEventListener("focus", () => setFocusedId(item.id));
         var _ref$6 = treeItem;
-        typeof _ref$6 === "function" ? _$use(_ref$6, _el$102) : treeItem = _el$102;
-        _$setAttribute(_el$102, "aria-level", depth + 1);
-        _$setAttribute(_el$102, "data-k2b-nav-tree-parent-id", parentId);
-        _$insert(_el$102, row, _el$105, _co$14);
-        _$insert(_el$102, _$createComponent(Show, {
+        typeof _ref$6 === "function" ? _$use(_ref$6, _el$105) : treeItem = _el$105;
+        _$setAttribute(_el$105, "aria-level", depth + 1);
+        _$setAttribute(_el$105, "data-k2b-nav-tree-parent-id", parentId);
+        _$insert(_el$105, row, _el$108, _co$15);
+        _$insert(_el$105, _$createComponent(Show, {
           get when() {
             return _$memo(() => !!hasChildren())() && isExpanded(item.id);
           },
           get children() {
-            var _el$103 = _$getNextElement(_tmpl$50);
-            _$insert(_el$103, () => renderItems(nested, depth + 1, item.id));
-            return _el$103;
+            var _el$106 = _$getNextElement(_tmpl$51);
+            _$insert(_el$106, () => renderItems(nested, depth + 1, item.id));
+            return _el$106;
           }
-        }), _el$107, _co$15);
+        }), _el$110, _co$16);
         _$effect(_p$ => {
           var _v$74 = siblings().length,
             _v$75 = place() + 1,
@@ -2357,17 +2371,17 @@ const AppWorkspaceNavTree = props => {
             _v$82 = dragged()?.id === item.id ? "" : undefined,
             _v$83 = dropTarget()?.id === item.id ? dropTarget().side : undefined,
             _v$84 = String(props.indented === false ? 0 : depth);
-          _v$74 !== _p$.e && _$setAttribute(_el$102, "aria-setsize", _p$.e = _v$74);
-          _v$75 !== _p$.t && _$setAttribute(_el$102, "aria-posinset", _p$.t = _v$75);
-          _v$76 !== _p$.a && _$setAttribute(_el$102, "aria-selected", _p$.a = _v$76);
-          _v$77 !== _p$.o && _$setAttribute(_el$102, "aria-expanded", _p$.o = _v$77);
-          _v$78 !== _p$.i && _$setAttribute(_el$102, "aria-disabled", _p$.i = _v$78);
-          _v$79 !== _p$.n && _$setAttribute(_el$102, "tabindex", _p$.n = _v$79);
-          _v$80 !== _p$.s && _$setAttribute(_el$102, "draggable", _p$.s = _v$80);
-          _v$81 !== _p$.h && _$setAttribute(_el$102, "data-k2b-nav-tree-id", _p$.h = _v$81);
-          _v$82 !== _p$.r && _$setAttribute(_el$102, "data-k2b-nav-tree-dragging", _p$.r = _v$82);
-          _v$83 !== _p$.d && _$setAttribute(_el$102, "data-k2b-nav-tree-drop", _p$.d = _v$83);
-          _v$84 !== _p$.l && _$setStyleProperty(_el$102, "--k2b-nav-tree-depth", _p$.l = _v$84);
+          _v$74 !== _p$.e && _$setAttribute(_el$105, "aria-setsize", _p$.e = _v$74);
+          _v$75 !== _p$.t && _$setAttribute(_el$105, "aria-posinset", _p$.t = _v$75);
+          _v$76 !== _p$.a && _$setAttribute(_el$105, "aria-selected", _p$.a = _v$76);
+          _v$77 !== _p$.o && _$setAttribute(_el$105, "aria-expanded", _p$.o = _v$77);
+          _v$78 !== _p$.i && _$setAttribute(_el$105, "aria-disabled", _p$.i = _v$78);
+          _v$79 !== _p$.n && _$setAttribute(_el$105, "tabindex", _p$.n = _v$79);
+          _v$80 !== _p$.s && _$setAttribute(_el$105, "draggable", _p$.s = _v$80);
+          _v$81 !== _p$.h && _$setAttribute(_el$105, "data-k2b-nav-tree-id", _p$.h = _v$81);
+          _v$82 !== _p$.r && _$setAttribute(_el$105, "data-k2b-nav-tree-dragging", _p$.r = _v$82);
+          _v$83 !== _p$.d && _$setAttribute(_el$105, "data-k2b-nav-tree-drop", _p$.d = _v$83);
+          _v$84 !== _p$.l && _$setStyleProperty(_el$105, "--k2b-nav-tree-depth", _p$.l = _v$84);
           return _p$;
         }, {
           e: undefined,
@@ -2383,7 +2397,7 @@ const AppWorkspaceNavTree = props => {
           l: undefined
         });
         _$runHydrationEvents();
-        return _el$102;
+        return _el$105;
       })();
     }
   });
@@ -2408,63 +2422,63 @@ const AppWorkspaceNavTree = props => {
     });
   });
   return (() => {
-    var _el$108 = _$getNextElement(_tmpl$52);
-    _el$108.addEventListener("dragend", endDrag);
-    _el$108.addEventListener("dragleave", event => {
+    var _el$111 = _$getNextElement(_tmpl$53);
+    _el$111.addEventListener("dragend", endDrag);
+    _el$111.addEventListener("dragleave", event => {
       if (!root?.contains(event.relatedTarget)) setDropTarget(null);
     });
-    _el$108.addEventListener("dragover", event => {
+    _el$111.addEventListener("dragover", event => {
       // Runs after the rows: a position no row claimed shows no gap.
       if (claimedDragOver !== event) setDropTarget(null);
     });
     var _ref$7 = root;
-    typeof _ref$7 === "function" ? _$use(_ref$7, _el$108) : root = _el$108;
-    _$insert(_el$108, () => renderItems(roots, 0));
+    typeof _ref$7 === "function" ? _$use(_ref$7, _el$111) : root = _el$111;
+    _$insert(_el$111, () => renderItems(roots, 0));
     _$effect(_p$ => {
       var _v$85 = `k2b-app-workspace__nav-tree ${props.class ?? ""}`,
         _v$86 = props.ariaLabel;
-      _v$85 !== _p$.e && _$className(_el$108, _p$.e = _v$85);
-      _v$86 !== _p$.t && _$setAttribute(_el$108, "aria-label", _p$.t = _v$86);
+      _v$85 !== _p$.e && _$className(_el$111, _p$.e = _v$85);
+      _v$86 !== _p$.t && _$setAttribute(_el$111, "aria-label", _p$.t = _v$86);
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$108;
+    return _el$111;
   })();
 };
 AppWorkspaceNavTree.Item = AppWorkspaceNavTreeItem;
 const AppWorkspaceSidebarIconGrid = props => (() => {
-  var _el$109 = _$getNextElement(_tmpl$53),
-    _el$111 = _el$109.firstChild,
-    [_el$112, _co$16] = _$getNextMarker(_el$111.nextSibling),
-    _el$110 = _el$112.nextSibling;
-  _$spread(_el$109, _$mergeProps({
+  var _el$112 = _$getNextElement(_tmpl$54),
+    _el$114 = _el$112.firstChild,
+    [_el$115, _co$17] = _$getNextMarker(_el$114.nextSibling),
+    _el$113 = _el$115.nextSibling;
+  _$spread(_el$112, _$mergeProps({
     get ["class"]() {
       return `k2b-app-workspace__sidebar-icon-grid-wrap ${props.class ?? ""}`;
     }
   }, () => modeAttrs(props.sidebarMode)), false, true);
-  _$insert(_el$109, _$createComponent(Show, {
+  _$insert(_el$112, _$createComponent(Show, {
     get when() {
       return props.title;
     },
     children: title => (() => {
-      var _el$113 = _$getNextElement(_tmpl$24);
-      _$insert(_el$113, title);
-      return _el$113;
+      var _el$116 = _$getNextElement(_tmpl$24);
+      _$insert(_el$116, title);
+      return _el$116;
     })()
-  }), _el$112, _co$16);
-  _$insert(_el$110, () => props.children);
-  _$effect(() => _$setAttribute(_el$110, "data-columns", props.columns ?? 2));
+  }), _el$115, _co$17);
+  _$insert(_el$113, () => props.children);
+  _$effect(() => _$setAttribute(_el$113, "data-columns", props.columns ?? 2));
   _$runHydrationEvents();
-  return _el$109;
+  return _el$112;
 })();
 const AppWorkspaceSidebarIconAction = props => {
   let target;
   const content = (() => {
-    var _el$114 = _$getNextElement(_tmpl$54);
-    _$effect(() => _$className(_el$114, iconClass(props.icon)));
-    return _el$114;
+    var _el$117 = _$getNextElement(_tmpl$55);
+    _$effect(() => _$className(_el$117, iconClass(props.icon)));
+    return _el$117;
   })();
   const attrs = () => ({
     ref: element => target = element,
@@ -2489,8 +2503,8 @@ const AppWorkspaceSidebarIconAction = props => {
     delay: 0
   });
   if (!props.href || props.disabled) return [(() => {
-    var _el$115 = _$getNextElement(_tmpl$33);
-    _$spread(_el$115, _$mergeProps(attrs, {
+    var _el$118 = _$getNextElement(_tmpl$33);
+    _$spread(_el$118, _$mergeProps(attrs, {
       get disabled() {
         return props.disabled;
       },
@@ -2498,13 +2512,13 @@ const AppWorkspaceSidebarIconAction = props => {
         return props.onClick;
       }
     }), false, true);
-    _$insert(_el$115, content);
+    _$insert(_el$118, content);
     _$runHydrationEvents();
-    return _el$115;
+    return _el$118;
   })(), hint];
   if (props.navigation !== "enhanced" || !props.onNavigate) return [(() => {
-    var _el$116 = _$getNextElement(_tmpl$34);
-    _$spread(_el$116, _$mergeProps({
+    var _el$119 = _$getNextElement(_tmpl$34);
+    _$spread(_el$119, _$mergeProps({
       get href() {
         return props.href;
       }
@@ -2513,9 +2527,9 @@ const AppWorkspaceSidebarIconAction = props => {
         return props.onClick;
       }
     }), false, true);
-    _$insert(_el$116, content);
+    _$insert(_el$119, content);
     _$runHydrationEvents();
-    return _el$116;
+    return _el$119;
   })(), hint];
   return [_$createComponent(Link, _$mergeProps({
     get href() {
@@ -2573,42 +2587,42 @@ function AppWorkspaceHead(props) {
   };
   const resetContent = () => filters().reset;
   const primaryContent = () => [(() => {
-    var _el$117 = _$getNextElement(_tmpl$54);
-    _$effect(() => _$className(_el$117, props.head?.primary?.icon));
-    return _el$117;
+    var _el$120 = _$getNextElement(_tmpl$55);
+    _$effect(() => _$className(_el$120, props.head?.primary?.icon));
+    return _el$120;
   })(), (() => {
-    var _el$118 = _$getNextElement(_tmpl$55);
-    _$insert(_el$118, () => props.head?.primary?.label);
-    return _el$118;
+    var _el$121 = _$getNextElement(_tmpl$56);
+    _$insert(_el$121, () => props.head?.primary?.label);
+    return _el$121;
   })()];
   return (() => {
-    var _el$119 = _$getNextElement(_tmpl$61),
-      _el$145 = _el$119.firstChild,
-      [_el$146, _co$26] = _$getNextMarker(_el$145.nextSibling),
-      _el$120 = _el$146.nextSibling,
-      _el$130 = _el$120.firstChild,
-      [_el$131, _co$19] = _$getNextMarker(_el$130.nextSibling),
-      _el$132 = _el$131.nextSibling,
-      [_el$133, _co$20] = _$getNextMarker(_el$132.nextSibling),
-      _el$134 = _el$133.nextSibling,
-      [_el$135, _co$21] = _$getNextMarker(_el$134.nextSibling),
-      _el$136 = _el$135.nextSibling,
-      [_el$137, _co$22] = _$getNextMarker(_el$136.nextSibling),
-      _el$138 = _el$137.nextSibling,
-      [_el$139, _co$23] = _$getNextMarker(_el$138.nextSibling),
-      _el$147 = _el$120.nextSibling,
-      [_el$148, _co$27] = _$getNextMarker(_el$147.nextSibling);
-    _$insert(_el$119, _$createComponent(Show, {
+    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, {
       get when() {
         return mobilePane();
       },
       children: pane => (() => {
-        var _el$149 = _$getNextElement(_tmpl$7);
-        _$effect(() => _$setProperty(_el$149, "innerHTML", mobilePaneRule(pane())));
-        return _el$149;
+        var _el$152 = _$getNextElement(_tmpl$7);
+        _$effect(() => _$setProperty(_el$152, "innerHTML", mobilePaneRule(pane())));
+        return _el$152;
       })()
-    }), _el$146, _co$26);
-    _$insert(_el$120, _$createComponent(IconButton, {
+    }), _el$149, _co$27);
+    _$insert(_el$123, _$createComponent(IconButton, {
       "class": "k2b-app-workspace__head-toggle",
       get label() {
         return messages().showNavigation;
@@ -2619,10 +2633,10 @@ function AppWorkspaceHead(props) {
       "aria-expanded": "false",
       "data-app-workspace-sidebar-toggle": "",
       get children() {
-        return _$getNextElement(_tmpl$56);
+        return _$getNextElement(_tmpl$57);
       }
-    }), _el$131, _co$19);
-    _$insert(_el$120, _$createComponent(Show, {
+    }), _el$134, _co$20);
+    _$insert(_el$123, _$createComponent(Show, {
       get when() {
         return trail();
       },
@@ -2633,34 +2647,34 @@ function AppWorkspaceHead(props) {
         as: "p",
         fallback: true
       }), (() => {
-        var _el$150 = _$getNextElement(_tmpl$62);
-        _$setAttribute(_el$150, "data-k2b-server", isServer ? "" : undefined);
-        _$insert(_el$150, () => current().title);
-        return _el$150;
+        var _el$153 = _$getNextElement(_tmpl$63);
+        _$setAttribute(_el$153, "data-k2b-server", isServer ? "" : undefined);
+        _$insert(_el$153, () => current().title);
+        return _el$153;
       })()]
-    }), _el$133, _co$20);
-    _$insert(_el$120, _$createComponent(Show, {
+    }), _el$136, _co$21);
+    _$insert(_el$123, _$createComponent(Show, {
       get when() {
         return resolvedViews.toArray().some(Boolean);
       },
       get children() {
-        var _el$122 = _$getNextElement(_tmpl$57);
-        _$insert(_el$122, resolvedViews);
-        return _el$122;
+        var _el$125 = _$getNextElement(_tmpl$58);
+        _$insert(_el$125, resolvedViews);
+        return _el$125;
       }
-    }), _el$135, _co$21);
-    _$insert(_el$120, _$createComponent(Show, {
+    }), _el$138, _co$22);
+    _$insert(_el$123, _$createComponent(Show, {
       get when() {
         return resolvedFilters.toArray().some(Boolean) || props.head?.filtered;
       },
       get children() {
-        var _el$123 = _$getNextElement(_tmpl$58),
-          _el$124 = _el$123.firstChild,
-          [_el$125, _co$17] = _$getNextMarker(_el$124.nextSibling),
-          _el$126 = _el$125.nextSibling,
-          [_el$127, _co$18] = _$getNextMarker(_el$126.nextSibling);
-        _$insert(_el$123, resolvedFilters, _el$125, _co$17);
-        _$insert(_el$123, _$createComponent(Show, {
+        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, {
           get when() {
             return props.head?.filtered;
           },
@@ -2700,34 +2714,34 @@ function AppWorkspaceHead(props) {
               })
             });
           }
-        }), _el$127, _co$18);
-        _$effect(() => _$setAttribute(_el$123, "aria-label", filters().filters));
-        return _el$123;
+        }), _el$130, _co$19);
+        _$effect(() => _$setAttribute(_el$126, "aria-label", filters().filters));
+        return _el$126;
       }
-    }), _el$137, _co$22);
-    _$insert(_el$120, _$createComponent(Show, {
+    }), _el$140, _co$23);
+    _$insert(_el$123, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!props.head?.filtered)() && resolvedCount.toArray().some(value => value !== undefined && value !== null && value !== false);
       },
       get children() {
-        var _el$128 = _$getNextElement(_tmpl$59),
-          _el$129 = _el$128.firstChild;
-        _$insert(_el$129, resolvedCount);
-        return _el$128;
+        var _el$131 = _$getNextElement(_tmpl$60),
+          _el$132 = _el$131.firstChild;
+        _$insert(_el$132, resolvedCount);
+        return _el$131;
       }
-    }), _el$139, _co$23);
-    _$insert(_el$119, _$createComponent(Show, {
+    }), _el$142, _co$24);
+    _$insert(_el$122, _$createComponent(Show, {
       get when() {
         return resolvedActions.toArray().some(Boolean) || props.head?.primary;
       },
       get children() {
-        var _el$140 = _$getNextElement(_tmpl$60),
-          _el$141 = _el$140.firstChild,
-          [_el$142, _co$24] = _$getNextMarker(_el$141.nextSibling),
-          _el$143 = _el$142.nextSibling,
-          [_el$144, _co$25] = _$getNextMarker(_el$143.nextSibling);
-        _$insert(_el$140, resolvedActions, _el$142, _co$24);
-        _$insert(_el$140, _$createComponent(Show, {
+        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, {
           get when() {
             return props.head?.primary;
           },
@@ -2765,24 +2779,24 @@ function AppWorkspaceHead(props) {
               }
             })
           })
-        }), _el$144, _co$25);
-        return _el$140;
+        }), _el$147, _co$26);
+        return _el$143;
       }
-    }), _el$148, _co$27);
+    }), _el$151, _co$28);
     _$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$119, "data-trail", _p$.e = _v$87);
-      _v$88 !== _p$.t && _$setAttribute(_el$119, "data-row", _p$.t = _v$88);
-      _v$89 !== _p$.a && _$setAttribute(_el$119, "data-workspace-head-pane", _p$.a = _v$89);
+      _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);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined
     });
-    return _el$119;
+    return _el$122;
   })();
 }
 const AppWorkspace = props => {
@@ -2835,10 +2849,10 @@ const AppWorkspace = props => {
       return _$createComponent(WorkspaceContext.Provider, {
         value: workspace,
         get children() {
-          var _el$151 = _$getNextElement(_tmpl$63);
+          var _el$154 = _$getNextElement(_tmpl$64);
           var _ref$8 = root;
-          typeof _ref$8 === "function" ? _$use(_ref$8, _el$151) : root = _el$151;
-          _$insert(_el$151, contents);
+          typeof _ref$8 === "function" ? _$use(_ref$8, _el$154) : root = _el$154;
+          _$insert(_el$154, contents);
           _$effect(_p$ => {
             var _v$90 = `k2b-app-workspace ${props.class ?? ""}`,
               _v$91 = props.mobileSurface,
@@ -2846,12 +2860,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$151, _p$.e = _v$90);
-            _v$91 !== _p$.t && _$setAttribute(_el$151, "data-mobile-surface", _p$.t = _v$91);
-            _v$92 !== _p$.a && _$setAttribute(_el$151, "data-flat", _p$.a = _v$92);
-            _v$93 !== _p$.o && _$setAttribute(_el$151, "data-sidebar-collapsed", _p$.o = _v$93);
-            _v$94 !== _p$.i && _$setAttribute(_el$151, "data-workspace-resizable", _p$.i = _v$94);
-            _p$.n = _$style(_el$151, _v$95, _p$.n);
+            _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);
             return _p$;
           }, {
             e: undefined,
@@ -2861,7 +2875,7 @@ const AppWorkspace = props => {
             i: undefined,
             n: undefined
           });
-          return _el$151;
+          return _el$154;
         }
       });
     }
@@ -2877,10 +2891,10 @@ AppWorkspace.LayoutStateProvider = props => _$createComponent(LayoutStateContext
 });
 AppWorkspace.Head = AppWorkspaceHeadSlot;
 AppWorkspace.Content = props => (() => {
-  var _el$152 = _$getNextElement(_tmpl$6);
-  _$insert(_el$152, () => props.children);
-  _$effect(() => _$className(_el$152, `k2b-app-workspace__content ${props.class ?? ""}`));
-  return _el$152;
+  var _el$155 = _$getNextElement(_tmpl$6);
+  _$insert(_el$155, () => props.children);
+  _$effect(() => _$className(_el$155, `k2b-app-workspace__content ${props.class ?? ""}`));
+  return _el$155;
 })();
 AppWorkspace.Main = AppWorkspaceMain;
 AppWorkspace.MainPane = AppWorkspaceMainPane;