@k2b/ui 0.4.1 → 0.5.0

package/dist/browser/layout/AppWorkspace.js

@@ -200,6 +200,9 @@ function AppWorkspaceMain(props) {
       get ["data-mobile-pane"]() {
         return props.mobilePane;
       },
+      get ["data-width"]() {
+        return props.width === "content" ? "content" : undefined;
+      },
       get ["data-scroll-fade-mode"]() {
         return !hasPanes() && props.scroll !== false && props.scrollFade !== false ? "both" : undefined;
       },
@@ -521,18 +524,21 @@ function AppWorkspaceSidebar(props) {
     _$effect(_p$ => {
       var _v$39 = `k2b-app-workspace__sidebar ${props.class ?? ""}`,
         _v$40 = props.label,
-        _v$41 = resizable() ? "true" : "false",
-        _v$42 = props.collapsible ? "true" : "false";
+        _v$41 = props.mobile === "stacked" ? "stacked" : undefined,
+        _v$42 = resizable() ? "true" : "false",
+        _v$43 = props.collapsible ? "true" : "false";
       _v$39 !== _p$.e && _$className(_el$7, _p$.e = _v$39);
       _v$40 !== _p$.t && _$setAttribute(_el$7, "aria-label", _p$.t = _v$40);
-      _v$41 !== _p$.a && _$setAttribute(_el$7, "data-workspace-resizable", _p$.a = _v$41);
-      _v$42 !== _p$.o && _$setAttribute(_el$7, "data-workspace-collapsible", _p$.o = _v$42);
+      _v$41 !== _p$.a && _$setAttribute(_el$7, "data-mobile", _p$.a = _v$41);
+      _v$42 !== _p$.o && _$setAttribute(_el$7, "data-workspace-resizable", _p$.o = _v$42);
+      _v$43 !== _p$.i && _$setAttribute(_el$7, "data-workspace-collapsible", _p$.i = _v$43);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
-      o: undefined
+      o: undefined,
+      i: undefined
     });
     return _el$7;
   })(), _$createComponent(Show, {
@@ -686,10 +692,10 @@ const AppWorkspaceSidebarSection = props => {
             _$setAttribute(_el$15, "aria-controls", id);
             _$insert(_el$15, title, _el$18, _co$);
             _$effect(_p$ => {
-              var _v$43 = open(),
-                _v$44 = open() ? "ti ti-chevron-down" : "ti ti-chevron-right";
-              _v$43 !== _p$.e && _$setAttribute(_el$15, "aria-expanded", _p$.e = _v$43);
-              _v$44 !== _p$.t && _$className(_el$16, _p$.t = _v$44);
+              var _v$44 = open(),
+                _v$45 = open() ? "ti ti-chevron-down" : "ti ti-chevron-right";
+              _v$44 !== _p$.e && _$setAttribute(_el$15, "aria-expanded", _p$.e = _v$44);
+              _v$45 !== _p$.t && _$className(_el$16, _p$.t = _v$45);
               return _p$;
             }, {
               e: undefined,
@@ -943,7 +949,7 @@ function AppWorkspaceSidebarItem(props) {
         return _el$45;
       }
     }), _el$49, _co$9);
-    _$effect(() => _$setAttribute(_el$43, "data-marquee", labelSlot()?.marquee ?? props.variant !== "card" ? "true" : "false"));
+    _$effect(() => _$setAttribute(_el$43, "data-marquee", labelSlot()?.marquee ?? (props.variant ?? "row") === "row" ? "true" : "false"));
     return _el$37;
   })(), _$createComponent(Show, {
     get when() {
@@ -988,12 +994,12 @@ function AppWorkspaceSidebarItem(props) {
               _el$54.$$click = select;
               _$insert(_el$54, content);
               _$effect(_p$ => {
-                var _v$48 = actionSlot()?.disabled,
-                  _v$49 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
-                  _v$50 = label();
-                _v$48 !== _p$.e && _$setProperty(_el$54, "disabled", _p$.e = _v$48);
-                _v$49 !== _p$.t && _$setAttribute(_el$54, "data-visibility", _p$.t = _v$49);
-                _v$50 !== _p$.a && _$setAttribute(_el$54, "aria-label", _p$.a = _v$50);
+                var _v$49 = actionSlot()?.disabled,
+                  _v$50 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
+                  _v$51 = label();
+                _v$49 !== _p$.e && _$setProperty(_el$54, "disabled", _p$.e = _v$49);
+                _v$50 !== _p$.t && _$setAttribute(_el$54, "data-visibility", _p$.t = _v$50);
+                _v$51 !== _p$.a && _$setAttribute(_el$54, "aria-label", _p$.a = _v$51);
                 return _p$;
               }, {
                 e: undefined,
@@ -1009,12 +1015,12 @@ function AppWorkspaceSidebarItem(props) {
             _el$53.$$click = select;
             _$insert(_el$53, content);
             _$effect(_p$ => {
-              var _v$45 = actionSlot()?.href,
-                _v$46 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
-                _v$47 = label();
-              _v$45 !== _p$.e && _$setAttribute(_el$53, "href", _p$.e = _v$45);
-              _v$46 !== _p$.t && _$setAttribute(_el$53, "data-visibility", _p$.t = _v$46);
-              _v$47 !== _p$.a && _$setAttribute(_el$53, "aria-label", _p$.a = _v$47);
+              var _v$46 = actionSlot()?.href,
+                _v$47 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
+                _v$48 = label();
+              _v$46 !== _p$.e && _$setAttribute(_el$53, "href", _p$.e = _v$46);
+              _v$47 !== _p$.t && _$setAttribute(_el$53, "data-visibility", _p$.t = _v$47);
+              _v$48 !== _p$.a && _$setAttribute(_el$53, "aria-label", _p$.a = _v$48);
               return _p$;
             }, {
               e: undefined,
@@ -1261,10 +1267,10 @@ const AppWorkspaceNavTree = props => {
           var _el$55 = _$getNextElement(_tmpl$27),
             _el$56 = _el$55.firstChild;
           _$effect(_p$ => {
-            var _v$51 = usesIconDisclosure() ? "" : undefined,
-              _v$52 = iconClass(rowIcon());
-            _v$51 !== _p$.e && _$setAttribute(_el$55, "data-k2b-nav-tree-toggle", _p$.e = _v$51);
-            _v$52 !== _p$.t && _$className(_el$56, _p$.t = _v$52);
+            var _v$52 = usesIconDisclosure() ? "" : undefined,
+              _v$53 = iconClass(rowIcon());
+            _v$52 !== _p$.e && _$setAttribute(_el$55, "data-k2b-nav-tree-toggle", _p$.e = _v$52);
+            _v$53 !== _p$.t && _$className(_el$56, _p$.t = _v$53);
             return _p$;
           }, {
             e: undefined,
@@ -1285,10 +1291,10 @@ const AppWorkspaceNavTree = props => {
           var _el$59 = _$getNextElement(_tmpl$29);
           _$insert(_el$59, () => item.meta);
           _$effect(_p$ => {
-            var _v$53 = `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`,
-              _v$54 = item.metaVisibility === "hover" ? "hover" : undefined;
-            _v$53 !== _p$.e && _$className(_el$59, _p$.e = _v$53);
-            _v$54 !== _p$.t && _$setAttribute(_el$59, "data-visibility", _p$.t = _v$54);
+            var _v$54 = `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`,
+              _v$55 = item.metaVisibility === "hover" ? "hover" : undefined;
+            _v$54 !== _p$.e && _$className(_el$59, _p$.e = _v$54);
+            _v$55 !== _p$.t && _$setAttribute(_el$59, "data-visibility", _p$.t = _v$55);
             return _p$;
           }, {
             e: undefined,
@@ -1387,16 +1393,16 @@ const AppWorkspaceNavTree = props => {
           }
         }), _el$67, _co$1);
         _$effect(_p$ => {
-          var _v$55 = selected(),
-            _v$56 = hasChildren() ? isExpanded(item.id) : undefined,
-            _v$57 = item.disabled ? "true" : undefined,
-            _v$58 = item.disabled ? -1 : tabStopId() === item.id ? 0 : -1,
-            _v$59 = item.id;
-          _v$55 !== _p$.e && _$setAttribute(_el$62, "aria-selected", _p$.e = _v$55);
-          _v$56 !== _p$.t && _$setAttribute(_el$62, "aria-expanded", _p$.t = _v$56);
-          _v$57 !== _p$.a && _$setAttribute(_el$62, "aria-disabled", _p$.a = _v$57);
-          _v$58 !== _p$.o && _$setAttribute(_el$62, "tabindex", _p$.o = _v$58);
-          _v$59 !== _p$.i && _$setAttribute(_el$62, "data-k2b-nav-tree-id", _p$.i = _v$59);
+          var _v$56 = selected(),
+            _v$57 = hasChildren() ? isExpanded(item.id) : undefined,
+            _v$58 = item.disabled ? "true" : undefined,
+            _v$59 = item.disabled ? -1 : tabStopId() === item.id ? 0 : -1,
+            _v$60 = item.id;
+          _v$56 !== _p$.e && _$setAttribute(_el$62, "aria-selected", _p$.e = _v$56);
+          _v$57 !== _p$.t && _$setAttribute(_el$62, "aria-expanded", _p$.t = _v$57);
+          _v$58 !== _p$.a && _$setAttribute(_el$62, "aria-disabled", _p$.a = _v$58);
+          _v$59 !== _p$.o && _$setAttribute(_el$62, "tabindex", _p$.o = _v$59);
+          _v$60 !== _p$.i && _$setAttribute(_el$62, "data-k2b-nav-tree-id", _p$.i = _v$60);
           return _p$;
         }, {
           e: undefined,
@@ -1416,10 +1422,10 @@ const AppWorkspaceNavTree = props => {
     typeof _ref$3 === "function" ? _$use(_ref$3, _el$68) : root = _el$68;
     _$insert(_el$68, () => renderItems(roots, 0));
     _$effect(_p$ => {
-      var _v$60 = `k2b-app-workspace__nav-tree ${props.class ?? ""}`,
-        _v$61 = props.ariaLabel;
-      _v$60 !== _p$.e && _$className(_el$68, _p$.e = _v$60);
-      _v$61 !== _p$.t && _$setAttribute(_el$68, "aria-label", _p$.t = _v$61);
+      var _v$61 = `k2b-app-workspace__nav-tree ${props.class ?? ""}`,
+        _v$62 = props.ariaLabel;
+      _v$61 !== _p$.e && _$className(_el$68, _p$.e = _v$61);
+      _v$62 !== _p$.t && _$setAttribute(_el$68, "aria-label", _p$.t = _v$62);
       return _p$;
     }, {
       e: undefined,
@@ -1547,16 +1553,16 @@ const AppWorkspace = props => {
       typeof _ref$4 === "function" ? _$use(_ref$4, _el$77) : root = _el$77;
       _$insert(_el$77, () => props.children);
       _$effect(_p$ => {
-        var _v$62 = `k2b-app-workspace ${props.class ?? ""}`,
-          _v$63 = props.mobileSurface,
-          _v$64 = initialLayoutState()?.sidebarCollapsed === undefined ? undefined : String(initialLayoutState()?.sidebarCollapsed),
-          _v$65 = props.resizable === false ? "false" : "true",
-          _v$66 = appWorkspaceLayoutStyle(initialLayoutState());
-        _v$62 !== _p$.e && _$className(_el$77, _p$.e = _v$62);
-        _v$63 !== _p$.t && _$setAttribute(_el$77, "data-mobile-surface", _p$.t = _v$63);
-        _v$64 !== _p$.a && _$setAttribute(_el$77, "data-sidebar-collapsed", _p$.a = _v$64);
-        _v$65 !== _p$.o && _$setAttribute(_el$77, "data-workspace-resizable", _p$.o = _v$65);
-        _p$.i = _$style(_el$77, _v$66, _p$.i);
+        var _v$63 = `k2b-app-workspace ${props.class ?? ""}`,
+          _v$64 = props.mobileSurface,
+          _v$65 = initialLayoutState()?.sidebarCollapsed === undefined ? undefined : String(initialLayoutState()?.sidebarCollapsed),
+          _v$66 = props.resizable === false ? "false" : "true",
+          _v$67 = appWorkspaceLayoutStyle(initialLayoutState());
+        _v$63 !== _p$.e && _$className(_el$77, _p$.e = _v$63);
+        _v$64 !== _p$.t && _$setAttribute(_el$77, "data-mobile-surface", _p$.t = _v$64);
+        _v$65 !== _p$.a && _$setAttribute(_el$77, "data-sidebar-collapsed", _p$.a = _v$65);
+        _v$66 !== _p$.o && _$setAttribute(_el$77, "data-workspace-resizable", _p$.o = _v$66);
+        _p$.i = _$style(_el$77, _v$67, _p$.i);
         return _p$;
       }, {
         e: undefined,