@k2b/ui 0.45.0 → 0.47.0

package/dist/browser/layout/AppWorkspaceSidebarItemStatus.js

@@ -0,0 +1,113 @@
+import { template as _$template } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-mention aria-hidden=true>@`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-muted aria-hidden=true><i class="ti ti-bell-off">`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-count>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-unread aria-hidden=true>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<span class=k2b-sr-only>, <!$><!/>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-dot>`);
+import { Show } from "solid-js";
+import { useWorkspaceMessages } from "./workspace-messages";
+
+/**
+ * Unread state for the trailing `meta` slot. Every mark keeps a fixed width,
+ * so the row keeps its height and the label its start in every state.
+ */
+
+export const AppWorkspaceSidebarItemStatus = props => {
+  const workspaceMessages = useWorkspaceMessages();
+  const waiting = () => props.waiting && Number.isFinite(props.waiting.count) ? Math.max(0, Math.floor(props.waiting.count)) : null;
+  const count = () => waiting() ?? (typeof props.unread === "number" && props.unread >= 1 ? Math.floor(props.unread) : 0);
+  const dot = () => waiting() === null && props.unread === true;
+  // The marks are decorative; the row's accessible name gets one phrase instead,
+  // which says no more than the "99+" a capped count shows.
+  const description = () => [waiting() !== null ? props.waiting?.label ?? "" : count() > 99 ? workspaceMessages().sidebarUnreadMany : count() ? workspaceMessages().sidebarUnread({
+    count: count()
+  }) : dot() ? workspaceMessages().sidebarNewActivity : "", props.mention ? workspaceMessages().sidebarMentioned : "", props.muted ? workspaceMessages().sidebarMuted : ""].filter(Boolean).join(", ");
+  // The unread slot stays reserved at the end, and the marks that change most
+  // often sit outermost, so new activity or a mention never moves another mark.
+  // The element itself stays when there is nothing to show: empty, it takes no
+  // space, and it still keeps the row's label on one line, so the first count
+  // never re-wraps the label and moves the rows below.
+  return (() => {
+    var _el$ = _$getNextElement(_tmpl$6);
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return description();
+      },
+      get children() {
+        return [_$createComponent(Show, {
+          get when() {
+            return props.mention;
+          },
+          get children() {
+            return _$getNextElement(_tmpl$);
+          }
+        }), _$createComponent(Show, {
+          get when() {
+            return props.muted;
+          },
+          get children() {
+            return _$getNextElement(_tmpl$2);
+          }
+        }), (() => {
+          var _el$4 = _$getNextElement(_tmpl$4);
+          _$insert(_el$4, _$createComponent(Show, {
+            get when() {
+              return count() || waiting() === 0;
+            },
+            get fallback() {
+              return _$createComponent(Show, {
+                get when() {
+                  return dot();
+                },
+                get children() {
+                  return _$getNextElement(_tmpl$7);
+                }
+              });
+            },
+            get children() {
+              var _el$5 = _$getNextElement(_tmpl$3);
+              _$insert(_el$5, (() => {
+                var _c$ = _$memo(() => count() > 99);
+                return () => _c$() ? "99+" : count();
+              })());
+              _$effect(() => _$setAttribute(_el$5, "data-mention", props.mention ? "true" : undefined));
+              return _el$5;
+            }
+          }));
+          return _el$4;
+        })(), (() => {
+          var _el$6 = _$getNextElement(_tmpl$5),
+            _el$7 = _el$6.firstChild,
+            _el$8 = _el$7.nextSibling,
+            [_el$9, _co$] = _$getNextMarker(_el$8.nextSibling);
+          _$insert(_el$6, description, _el$9, _co$);
+          return _el$6;
+        })()];
+      }
+    }));
+    _$effect(_p$ => {
+      var _v$ = waiting() !== null ? undefined : count() ? "count" : dot() ? "dot" : undefined,
+        _v$2 = waiting() === null ? undefined : waiting() ? "count" : "zero",
+        _v$3 = props.muted ? "true" : undefined;
+      _v$ !== _p$.e && _$setAttribute(_el$, "data-unread", _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute(_el$, "data-waiting", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setAttribute(_el$, "data-muted", _p$.a = _v$3);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$;
+  })();
+};
+//# sourceMappingURL=AppWorkspaceSidebarItemStatus.js.map

package/dist/browser/layout/AppWorkspaceSidebarItemStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["layout/AppWorkspaceSidebarItemStatus.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport { useWorkspaceMessages } from \"./workspace-messages\";\n\n/**\n * Unread state for the trailing `meta` slot. Every mark keeps a fixed width,\n * so the row keeps its height and the label its start in every state.\n */\nexport type AppWorkspaceSidebarItemStatusProps = {\n  /**\n   * A positive number shows a count (above 99 as \"99+\") and sets the label in\n   * a stronger weight; `true` shows a quiet dot for new activity that should\n   * not draw attention, such as in a muted conversation.\n   */\n  unread?: number | boolean;\n  /** Marks unread items that mention the person with \"@\". */\n  mention?: boolean;\n  /**\n   * Shows a muted bell, and the item reads as set aside: its label in the muted ink without unread weight, and a\n   * mention count without its fill.\n   */\n  muted?: boolean;\n  /**\n   * Items that wait for the person, such as requests to approve, in the unread slot instead of `unread`. `label` is\n   * the phrase a screen reader hears, for example \"3 waiting\". `0` stays as a muted count, for a count that dropped\n   * to zero while the row is still shown; leave the prop out when nothing waits.\n   */\n  waiting?: { count: number; label: string };\n};\nexport const AppWorkspaceSidebarItemStatus = (props: AppWorkspaceSidebarItemStatusProps): JSX.Element => {\n  const workspaceMessages = useWorkspaceMessages();\n  const waiting = () => (props.waiting && Number.isFinite(props.waiting.count) ? Math.max(0, Math.floor(props.waiting.count)) : null);\n  const count = () => waiting() ?? (typeof props.unread === \"number\" && props.unread >= 1 ? Math.floor(props.unread) : 0);\n  const dot = () => waiting() === null && props.unread === true;\n  // The marks are decorative; the row's accessible name gets one phrase instead,\n  // which says no more than the \"99+\" a capped count shows.\n  const description = () =>\n    [\n      waiting() !== null\n        ? (props.waiting?.label ?? \"\")\n        : count() > 99\n          ? workspaceMessages().sidebarUnreadMany\n          : count()\n            ? workspaceMessages().sidebarUnread({ count: count() })\n            : dot()\n              ? workspaceMessages().sidebarNewActivity\n              : \"\",\n      props.mention ? workspaceMessages().sidebarMentioned : \"\",\n      props.muted ? workspaceMessages().sidebarMuted : \"\",\n    ]\n      .filter(Boolean)\n      .join(\", \");\n  // The unread slot stays reserved at the end, and the marks that change most\n  // often sit outermost, so new activity or a mention never moves another mark.\n  // The element itself stays when there is nothing to show: empty, it takes no\n  // space, and it still keeps the row's label on one line, so the first count\n  // never re-wraps the label and moves the rows below.\n  return (\n    <span\n      class=\"k2b-app-workspace__sidebar-status\"\n      data-unread={waiting() !== null ? undefined : count() ? \"count\" : dot() ? \"dot\" : undefined}\n      data-waiting={waiting() === null ? undefined : waiting() ? \"count\" : \"zero\"}\n      data-muted={props.muted ? \"true\" : undefined}\n    >\n      <Show when={description()}>\n        <Show when={props.mention}>\n          <span class=\"k2b-app-workspace__sidebar-status-mention\" aria-hidden=\"true\">\n            @\n          </span>\n        </Show>\n        <Show when={props.muted}>\n          <span class=\"k2b-app-workspace__sidebar-status-muted\" aria-hidden=\"true\">\n            <i class=\"ti ti-bell-off\" />\n          </span>\n        </Show>\n        <span class=\"k2b-app-workspace__sidebar-status-unread\" aria-hidden=\"true\">\n          <Show\n            when={count() || waiting() === 0}\n            fallback={\n              <Show when={dot()}>\n                <span class=\"k2b-app-workspace__sidebar-status-dot\" />\n              </Show>\n            }\n          >\n            <span class=\"k2b-app-workspace__sidebar-status-count\" data-mention={props.mention ? \"true\" : undefined}>\n              {count() > 99 ? \"99+\" : count()}\n            </span>\n          </Show>\n        </span>\n        <span class=\"k2b-sr-only\">, {description()}</span>\n      </Show>\n    </span>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/layout/DetailPanel.js

@@ -53,6 +53,8 @@ import { createScrollFade } from "./scroll-fade";
 
 /** One direct secondary command, rendered as a sibling icon button at the end of the row. */
 
+/** A row that only shows something, such as a person and their role: the columns of an action, without a command. */
+
 const classNames = (base, extra) => extra ? `${base} ${extra}` : base;
 const showTruncatedTitle = event => {
   const heading = event.currentTarget;
@@ -551,6 +553,25 @@ const DetailPanelAction = props => {
     }
   });
 };
+const DetailPanelRow = props => (() => {
+  var _el$72 = _$getNextElement(_tmpl$1);
+  _$insert(_el$72, _$createComponent(DetailPanelActionContent, {
+    get title() {
+      return props.title;
+    },
+    get description() {
+      return props.description;
+    },
+    get leading() {
+      return props.leading;
+    },
+    get trailing() {
+      return props.trailing;
+    }
+  }));
+  _$effect(() => _$className(_el$72, classNames("k2b-detail-panel__row", props.class)));
+  return _el$72;
+})();
 const DetailPanelSection = props => {
   const headingId = `k2b-detail-panel-section-${createUniqueId()}`;
   const bodyId = `${headingId}-body`;
@@ -584,101 +605,101 @@ const DetailPanelSection = props => {
     },
     get fallback() {
       return (() => {
-        var _el$102 = _$getNextElement(_tmpl$33),
-          _el$103 = _el$102.firstChild,
-          _el$113 = _el$103.firstChild,
-          [_el$114, _co$27] = _$getNextMarker(_el$113.nextSibling),
-          _el$104 = _el$114.nextSibling,
-          _el$105 = _el$104.firstChild,
+        var _el$103 = _$getNextElement(_tmpl$33),
+          _el$104 = _el$103.firstChild,
+          _el$114 = _el$104.firstChild,
+          [_el$115, _co$27] = _$getNextMarker(_el$114.nextSibling),
+          _el$105 = _el$115.nextSibling,
           _el$106 = _el$105.firstChild,
-          _el$107 = _el$106.nextSibling,
-          [_el$108, _co$25] = _$getNextMarker(_el$107.nextSibling),
-          _el$110 = _el$105.nextSibling,
-          [_el$111, _co$26] = _$getNextMarker(_el$110.nextSibling),
-          _el$115 = _el$104.nextSibling,
-          [_el$116, _co$28] = _$getNextMarker(_el$115.nextSibling),
-          _el$118 = _el$103.nextSibling,
-          [_el$119, _co$29] = _$getNextMarker(_el$118.nextSibling);
-        _$setAttribute(_el$102, "aria-labelledby", headingId);
-        _$insert(_el$103, _$createComponent(DetailPanelSectionIcon, {
+          _el$107 = _el$106.firstChild,
+          _el$108 = _el$107.nextSibling,
+          [_el$109, _co$25] = _$getNextMarker(_el$108.nextSibling),
+          _el$111 = _el$106.nextSibling,
+          [_el$112, _co$26] = _$getNextMarker(_el$111.nextSibling),
+          _el$116 = _el$105.nextSibling,
+          [_el$117, _co$28] = _$getNextMarker(_el$116.nextSibling),
+          _el$119 = _el$104.nextSibling,
+          [_el$120, _co$29] = _$getNextMarker(_el$119.nextSibling);
+        _$setAttribute(_el$103, "aria-labelledby", headingId);
+        _$insert(_el$104, _$createComponent(DetailPanelSectionIcon, {
           get icon() {
             return props.icon;
           },
           get tone() {
             return props.tone;
           }
-        }), _el$114, _co$27);
-        _$setAttribute(_el$106, "id", headingId);
-        _$insert(_el$106, () => props.title);
-        _$insert(_el$105, _$createComponent(SectionTitleMeta, {
+        }), _el$115, _co$27);
+        _$setAttribute(_el$107, "id", headingId);
+        _$insert(_el$107, () => props.title);
+        _$insert(_el$106, _$createComponent(SectionTitleMeta, {
           get count() {
             return props.count;
           },
           get meta() {
             return props.meta;
           }
-        }), _el$108, _co$25);
-        _$insert(_el$104, _$createComponent(Show, {
+        }), _el$109, _co$25);
+        _$insert(_el$105, _$createComponent(Show, {
           get when() {
             return props.description;
           },
           get children() {
-            var _el$109 = _$getNextElement(_tmpl$28);
-            _$insert(_el$109, () => props.description);
-            return _el$109;
+            var _el$110 = _$getNextElement(_tmpl$28);
+            _$insert(_el$110, () => props.description);
+            return _el$110;
           }
-        }), _el$111, _co$26);
-        _$insert(_el$103, _$createComponent(Show, {
+        }), _el$112, _co$26);
+        _$insert(_el$104, _$createComponent(Show, {
           get when() {
             return props.actions;
           },
           get children() {
-            var _el$112 = _$getNextElement(_tmpl$31);
-            _$insert(_el$112, () => props.actions);
-            return _el$112;
+            var _el$113 = _$getNextElement(_tmpl$31);
+            _$insert(_el$113, () => props.actions);
+            return _el$113;
           }
-        }), _el$116, _co$28);
-        _$insert(_el$102, _$createComponent(Show, {
+        }), _el$117, _co$28);
+        _$insert(_el$103, _$createComponent(Show, {
           get when() {
             return resolved();
           },
           get children() {
-            var _el$117 = _$getNextElement(_tmpl$32);
-            _$insert(_el$117, resolved);
-            return _el$117;
+            var _el$118 = _$getNextElement(_tmpl$32);
+            _$insert(_el$118, resolved);
+            return _el$118;
           }
-        }), _el$119, _co$29);
+        }), _el$120, _co$29);
         _$effect(_p$ => {
           var _v$18 = className(),
             _v$19 = props.icon ? "true" : undefined;
-          _v$18 !== _p$.e && _$className(_el$102, _p$.e = _v$18);
-          _v$19 !== _p$.t && _$setAttribute(_el$102, "data-icon", _p$.t = _v$19);
+          _v$18 !== _p$.e && _$className(_el$103, _p$.e = _v$18);
+          _v$19 !== _p$.t && _$setAttribute(_el$103, "data-icon", _p$.t = _v$19);
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
-        return _el$102;
+        return _el$103;
       })();
     },
     get children() {
-      var _el$72 = _$getNextElement(_tmpl$30),
-        _el$73 = _el$72.firstChild,
-        _el$86 = _el$73.nextSibling,
-        _el$87 = _el$86.firstChild,
-        _el$97 = _el$87.firstChild,
-        [_el$98, _co$23] = _$getNextMarker(_el$97.nextSibling),
-        _el$88 = _el$98.nextSibling,
-        _el$89 = _el$88.firstChild,
+      var _el$73 = _$getNextElement(_tmpl$30),
+        _el$74 = _el$73.firstChild,
+        _el$87 = _el$74.nextSibling,
+        _el$88 = _el$87.firstChild,
+        _el$98 = _el$88.firstChild,
+        [_el$99, _co$23] = _$getNextMarker(_el$98.nextSibling),
+        _el$89 = _el$99.nextSibling,
         _el$90 = _el$89.firstChild,
-        _el$91 = _el$90.nextSibling,
-        [_el$92, _co$21] = _$getNextMarker(_el$91.nextSibling),
-        _el$94 = _el$89.nextSibling,
-        [_el$95, _co$22] = _$getNextMarker(_el$94.nextSibling),
-        _el$99 = _el$88.nextSibling,
-        [_el$100, _co$24] = _$getNextMarker(_el$99.nextSibling),
-        _el$101 = _el$86.nextSibling;
-      _$insert(_el$73, _$createComponent(Button, {
+        _el$91 = _el$90.firstChild,
+        _el$92 = _el$91.nextSibling,
+        [_el$93, _co$21] = _$getNextMarker(_el$92.nextSibling),
+        _el$95 = _el$90.nextSibling,
+        [_el$96, _co$22] = _$getNextMarker(_el$95.nextSibling),
+        _el$100 = _el$89.nextSibling,
+        [_el$101, _co$24] = _$getNextMarker(_el$100.nextSibling),
+        _el$102 = _el$87.nextSibling;
+      _$insert(_el$74, _$createComponent(Button, {
         ref(r$) {
           var _ref$2 = expand;
           typeof _ref$2 === "function" ? _ref$2(r$) : expand = r$;
@@ -700,78 +721,78 @@ const DetailPanelSection = props => {
               return props.tone;
             }
           }), (() => {
-            var _el$74 = _$getNextElement(_tmpl$26),
-              _el$75 = _el$74.firstChild,
+            var _el$75 = _$getNextElement(_tmpl$26),
               _el$76 = _el$75.firstChild,
-              _el$78 = _el$76.nextSibling,
-              [_el$79, _co$18] = _$getNextMarker(_el$78.nextSibling),
-              _el$80 = _el$79.nextSibling,
-              [_el$81, _co$19] = _$getNextMarker(_el$80.nextSibling),
-              _el$83 = _el$75.nextSibling,
-              [_el$84, _co$20] = _$getNextMarker(_el$83.nextSibling);
-            _$setAttribute(_el$76, "id", `${headingId}-closed`);
-            _$insert(_el$76, () => props.title);
-            _$insert(_el$75, _$createComponent(SectionTitleMeta, {
+              _el$77 = _el$76.firstChild,
+              _el$79 = _el$77.nextSibling,
+              [_el$80, _co$18] = _$getNextMarker(_el$79.nextSibling),
+              _el$81 = _el$80.nextSibling,
+              [_el$82, _co$19] = _$getNextMarker(_el$81.nextSibling),
+              _el$84 = _el$76.nextSibling,
+              [_el$85, _co$20] = _$getNextMarker(_el$84.nextSibling);
+            _$setAttribute(_el$77, "id", `${headingId}-closed`);
+            _$insert(_el$77, () => props.title);
+            _$insert(_el$76, _$createComponent(SectionTitleMeta, {
               get count() {
                 return props.count;
               },
               get meta() {
                 return props.meta;
               }
-            }), _el$79, _co$18);
-            _$insert(_el$75, _$createComponent(Show, {
+            }), _el$80, _co$18);
+            _$insert(_el$76, _$createComponent(Show, {
               get when() {
                 return props.summary;
               },
               get children() {
-                var _el$77 = _$getNextElement(_tmpl$24);
-                _$insert(_el$77, () => props.summary);
-                return _el$77;
+                var _el$78 = _$getNextElement(_tmpl$24);
+                _$insert(_el$78, () => props.summary);
+                return _el$78;
               }
-            }), _el$81, _co$19);
-            _$insert(_el$74, _$createComponent(Show, {
+            }), _el$82, _co$19);
+            _$insert(_el$75, _$createComponent(Show, {
               get when() {
                 return props.description;
               },
               get children() {
-                var _el$82 = _$getNextElement(_tmpl$25);
-                _$insert(_el$82, () => props.description);
-                return _el$82;
+                var _el$83 = _$getNextElement(_tmpl$25);
+                _$insert(_el$83, () => props.description);
+                return _el$83;
               }
-            }), _el$84, _co$20);
-            return _el$74;
+            }), _el$85, _co$20);
+            return _el$75;
           })(), _$getNextElement(_tmpl$27)];
         }
       }));
-      _$insert(_el$87, _$createComponent(DetailPanelSectionIcon, {
+      _$insert(_el$88, _$createComponent(DetailPanelSectionIcon, {
         get icon() {
           return props.icon;
         },
         get tone() {
           return props.tone;
         }
-      }), _el$98, _co$23);
-      _$setAttribute(_el$90, "id", headingId);
-      _$insert(_el$90, () => props.title);
-      _$insert(_el$89, _$createComponent(SectionTitleMeta, {
+      }), _el$99, _co$23);
+      _$setAttribute(_el$91, "id", headingId);
+      _$insert(_el$91, () => props.title);
+      _$insert(_el$90, _$createComponent(SectionTitleMeta, {
         get count() {
           return props.count;
         },
         get meta() {
           return props.meta;
         }
-      }), _el$92, _co$21);
-      _$insert(_el$88, _$createComponent(Show, {
+      }), _el$93, _co$21);
+      _$insert(_el$89, _$createComponent(Show, {
         get when() {
           return props.description;
         },
         get children() {
-          var _el$93 = _$getNextElement(_tmpl$28);
-          _$insert(_el$93, () => props.description);
-          return _el$93;
+          var _el$94 = _$getNextElement(_tmpl$28);
+          _$insert(_el$94, () => props.description);
+          return _el$94;
         }
-      }), _el$95, _co$22);
-      _$insert(_el$87, _$createComponent(Button, {
+      }), _el$96, _co$22);
+      _$insert(_el$88, _$createComponent(Button, {
         ref(r$) {
           var _ref$3 = collapse;
           typeof _ref$3 === "function" ? _ref$3(r$) : collapse = r$;
@@ -789,11 +810,11 @@ const DetailPanelSection = props => {
         get children() {
           return _$getNextElement(_tmpl$29);
         }
-      }), _el$100, _co$24);
+      }), _el$101, _co$24);
       var _ref$4 = body;
-      typeof _ref$4 === "function" ? _$use(_ref$4, _el$101) : body = _el$101;
-      _$setAttribute(_el$101, "id", bodyId);
-      _$insert(_el$101, () => props.children);
+      typeof _ref$4 === "function" ? _$use(_ref$4, _el$102) : body = _el$102;
+      _$setAttribute(_el$102, "id", bodyId);
+      _$insert(_el$102, resolved);
       _$effect(_p$ => {
         var _v$10 = className(),
           _v$11 = open() ? headingId : `${headingId}-closed`,
@@ -803,14 +824,14 @@ const DetailPanelSection = props => {
           _v$15 = open(),
           _v$16 = !open(),
           _v$17 = !open();
-        _v$10 !== _p$.e && _$className(_el$72, _p$.e = _v$10);
-        _v$11 !== _p$.t && _$setAttribute(_el$72, "aria-labelledby", _p$.t = _v$11);
-        _v$12 !== _p$.a && _$setAttribute(_el$72, "data-open", _p$.a = _v$12);
-        _v$13 !== _p$.o && _$setAttribute(_el$72, "data-icon", _p$.o = _v$13);
-        _v$14 !== _p$.i && _$setAttribute(_el$72, "data-summary", _p$.i = _v$14);
-        _v$15 !== _p$.n && _$setProperty(_el$73, "hidden", _p$.n = _v$15);
-        _v$16 !== _p$.s && _$setProperty(_el$86, "hidden", _p$.s = _v$16);
-        _v$17 !== _p$.h && _$setProperty(_el$101, "hidden", _p$.h = _v$17);
+        _v$10 !== _p$.e && _$className(_el$73, _p$.e = _v$10);
+        _v$11 !== _p$.t && _$setAttribute(_el$73, "aria-labelledby", _p$.t = _v$11);
+        _v$12 !== _p$.a && _$setAttribute(_el$73, "data-open", _p$.a = _v$12);
+        _v$13 !== _p$.o && _$setAttribute(_el$73, "data-icon", _p$.o = _v$13);
+        _v$14 !== _p$.i && _$setAttribute(_el$73, "data-summary", _p$.i = _v$14);
+        _v$15 !== _p$.n && _$setProperty(_el$74, "hidden", _p$.n = _v$15);
+        _v$16 !== _p$.s && _$setProperty(_el$87, "hidden", _p$.s = _v$16);
+        _v$17 !== _p$.h && _$setProperty(_el$102, "hidden", _p$.h = _v$17);
         return _p$;
       }, {
         e: undefined,
@@ -822,24 +843,24 @@ const DetailPanelSection = props => {
         s: undefined,
         h: undefined
       });
-      return _el$72;
+      return _el$73;
     }
   });
 };
 const DetailPanel = props => (() => {
-  var _el$120 = _$getNextElement(_tmpl$1);
-  _$insert(_el$120, () => props.children);
+  var _el$121 = _$getNextElement(_tmpl$1);
+  _$insert(_el$121, () => props.children);
   _$effect(_p$ => {
     var _v$20 = classNames("k2b-detail-panel", props.class),
       _v$21 = props.surface;
-    _v$20 !== _p$.e && _$className(_el$120, _p$.e = _v$20);
-    _v$21 !== _p$.t && _$setAttribute(_el$120, "data-surface", _p$.t = _v$21);
+    _v$20 !== _p$.e && _$className(_el$121, _p$.e = _v$20);
+    _v$21 !== _p$.t && _$setAttribute(_el$121, "data-surface", _p$.t = _v$21);
     return _p$;
   }, {
     e: undefined,
     t: undefined
   });
-  return _el$120;
+  return _el$121;
 })();
 DetailPanel.Header = DetailPanelHeader;
 DetailPanel.Body = DetailPanelBody;
@@ -847,5 +868,6 @@ DetailPanel.Summary = DetailPanelSummary;
 DetailPanel.Group = DetailPanelGroup;
 DetailPanel.Section = DetailPanelSection;
 DetailPanel.Action = DetailPanelAction;
+DetailPanel.Row = DetailPanelRow;
 export default DetailPanel;
 //# sourceMappingURL=DetailPanel.js.map