@k2b/ui 0.32.0 → 0.34.0

package/dist/browser/layout/DetailPanel.js

@@ -6,42 +6,45 @@ import { setAttribute as _$setAttribute } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
 import { getNextMarker as _$getNextMarker } from "solid-js/web";
-import { memo as _$memo } from "solid-js/web";
-import { getNextElement as _$getNextElement } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
-var _tmpl$ = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__header-leading>`),
-  _tmpl$2 = /*#__PURE__*/_$template(`<p>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__meta>`),
-  _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__supporting><!$><!/><!$><!/>`),
-  _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__actions>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__primary-actions>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<header><div class=k2b-detail-panel__header-main><!$><!/><!$><!/><div class=k2b-detail-panel__heading><h2></h2><!$><!/></div><!$><!/></div><!$><!/>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__header-icon aria-hidden=true><i>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<div>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__summary-actions>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<section><header class=k2b-detail-panel__summary-header><h3></h3><!$><!/></header><div class=k2b-detail-panel__summary-body>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<div role=group>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__section-icon aria-hidden=true><i>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<span class=k2b-count-chip>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__none>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__section-meta>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__action-leading>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__action-description>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__action-copy><span class=k2b-detail-panel__action-title></span><!$><!/>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__action-trailing>`),
-  _tmpl$19 = /*#__PURE__*/_$template(`<i class="ti ti-dots"aria-hidden=true>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__action-row><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$21 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
-  _tmpl$22 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__section-description>`),
-  _tmpl$23 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__section-copy><span class=k2b-detail-panel__section-heading><span class=k2b-detail-panel__section-title></span><!$><!/></span><!$><!/>`),
-  _tmpl$24 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__section-toggle aria-hidden=true><i class="ti ti-chevron-down">`),
-  _tmpl$25 = /*#__PURE__*/_$template(`<p class=k2b-detail-panel__section-description>`),
-  _tmpl$26 = /*#__PURE__*/_$template(`<i class="ti ti-chevron-up"aria-hidden=true>`),
-  _tmpl$27 = /*#__PURE__*/_$template(`<section><div></div><div><header class=k2b-detail-panel__section-header><!$><!/><div class=k2b-detail-panel__section-copy><div class=k2b-detail-panel__section-heading><h3></h3><!$><!/></div><!$><!/></div><!$><!/></header></div><div class=k2b-detail-panel__section-body>`),
-  _tmpl$28 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__section-actions>`),
-  _tmpl$29 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__section-body>`),
-  _tmpl$30 = /*#__PURE__*/_$template(`<section><header class=k2b-detail-panel__section-header><!$><!/><div class=k2b-detail-panel__section-copy><div class=k2b-detail-panel__section-heading><h3></h3><!$><!/></div><!$><!/></div><!$><!/></header><!$><!/>`);
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<i class="ti ti-dots"aria-hidden=true>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__header-leading>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__kind>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<p>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__meta>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__supporting><!$><!/><!$><!/>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__actions><!$><!/><!$><!/>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__primary-actions><!$><!/><!$><!/>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<header><div class=k2b-detail-panel__header-main><!$><!/><!$><!/><div class=k2b-detail-panel__heading><!$><!/><h2></h2><!$><!/></div><!$><!/></div><!$><!/>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__header-icon aria-hidden=true><i>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<div>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__summary-actions>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<section><header class=k2b-detail-panel__summary-header><h3></h3><!$><!/></header><div class=k2b-detail-panel__summary-body>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__group-title>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<div role=group><!$><!/><!$><!/>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__section-icon aria-hidden=true><i>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<span class=k2b-count-chip>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__none>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__section-meta>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__action-leading>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__action-description>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__action-copy><span class=k2b-detail-panel__action-title></span><!$><!/>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__action-trailing>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__action-row><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<span class="k2b-detail-panel__section-preview k2b-truncate-fade">`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__section-description>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__section-copy><span class=k2b-detail-panel__section-heading><span class=k2b-detail-panel__section-title></span><!$><!/><!$><!/></span><!$><!/>`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__section-toggle aria-hidden=true><i class="ti ti-chevron-down">`),
+  _tmpl$28 = /*#__PURE__*/_$template(`<p class=k2b-detail-panel__section-description>`),
+  _tmpl$29 = /*#__PURE__*/_$template(`<i class="ti ti-chevron-up"aria-hidden=true>`),
+  _tmpl$30 = /*#__PURE__*/_$template(`<section><div></div><div><header class=k2b-detail-panel__section-header><!$><!/><div class=k2b-detail-panel__section-copy><div class=k2b-detail-panel__section-heading><h3></h3><!$><!/></div><!$><!/></div><!$><!/></header></div><div class=k2b-detail-panel__section-body>`),
+  _tmpl$31 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__section-actions>`),
+  _tmpl$32 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__section-body>`),
+  _tmpl$33 = /*#__PURE__*/_$template(`<section><header class=k2b-detail-panel__section-header><!$><!/><div class=k2b-detail-panel__section-copy><div class=k2b-detail-panel__section-heading><h3></h3><!$><!/></div><!$><!/></div><!$><!/></header><!$><!/>`);
 import { children, createEffect, createSignal, createUniqueId, Show, splitProps } from "solid-js";
 import { Button, ButtonLink, IconButton } from "../actions/Button";
 import { Dropdown } from "../actions/Dropdown";
@@ -55,193 +58,285 @@ const showTruncatedTitle = event => {
   const heading = event.currentTarget;
   if (heading.scrollHeight > heading.clientHeight + 1) heading.title = heading.textContent ?? "";else heading.removeAttribute("title");
 };
-const DetailPanelHeader = props => (() => {
-  var _el$ = _$getNextElement(_tmpl$7),
-    _el$2 = _el$.firstChild,
-    _el$14 = _el$2.firstChild,
-    [_el$15, _co$4] = _$getNextMarker(_el$14.nextSibling),
-    _el$16 = _el$15.nextSibling,
-    [_el$17, _co$5] = _$getNextMarker(_el$16.nextSibling),
-    _el$4 = _el$17.nextSibling,
-    _el$5 = _el$4.firstChild,
-    _el$11 = _el$5.nextSibling,
-    [_el$12, _co$3] = _$getNextMarker(_el$11.nextSibling),
-    _el$18 = _el$4.nextSibling,
-    [_el$19, _co$6] = _$getNextMarker(_el$18.nextSibling),
-    _el$21 = _el$2.nextSibling,
-    [_el$22, _co$7] = _$getNextMarker(_el$21.nextSibling);
-  _$insert(_el$2, _$createComponent(Show, {
-    get when() {
-      return props.icon;
-    },
-    children: icon => (() => {
-      var _el$23 = _$getNextElement(_tmpl$8),
-        _el$24 = _el$23.firstChild;
-      _$effect(() => _$className(_el$24, icon()));
-      return _el$23;
-    })()
-  }), _el$15, _co$4);
-  _$insert(_el$2, _$createComponent(Show, {
-    get when() {
-      return props.leading;
+const DetailPanelHeader = props => {
+  const t = useDetailPanelMessages();
+  const menuLabel = () => props.menuLabel ?? t().moreActions;
+  const menuTrigger = () => _$createComponent(Dropdown.Root, {
+    get items() {
+      return props.menu ?? [];
     },
-    get children() {
-      var _el$3 = _$getNextElement(_tmpl$);
-      _$insert(_el$3, () => props.leading);
-      return _el$3;
-    }
-  }), _el$17, _co$5);
-  _el$5.addEventListener("pointerenter", showTruncatedTitle);
-  _$insert(_el$5, () => props.title);
-  _$insert(_el$4, _$createComponent(Show, {
-    get when() {
-      return props.subtitle || props.meta;
+    align: "end",
+    get label() {
+      return menuLabel();
     },
+    phone: "sheet",
     get children() {
-      var _el$6 = _$getNextElement(_tmpl$4),
-        _el$9 = _el$6.firstChild,
-        [_el$0, _co$] = _$getNextMarker(_el$9.nextSibling),
-        _el$1 = _el$0.nextSibling,
-        [_el$10, _co$2] = _$getNextMarker(_el$1.nextSibling);
-      _$insert(_el$6, _$createComponent(Show, {
-        get when() {
-          return props.subtitle;
+      return _$createComponent(Dropdown.Trigger, {
+        iconOnly: true,
+        size: "sm",
+        variant: "ghost",
+        get label() {
+          return menuLabel();
         },
-        get children() {
-          var _el$7 = _$getNextElement(_tmpl$2);
-          _$insert(_el$7, () => props.subtitle);
-          return _el$7;
-        }
-      }), _el$0, _co$);
-      _$insert(_el$6, _$createComponent(Show, {
-        get when() {
-          return props.meta;
+        get tooltip() {
+          return menuLabel();
         },
         get children() {
-          var _el$8 = _$getNextElement(_tmpl$3);
-          _$insert(_el$8, () => props.meta);
-          return _el$8;
+          return _$getNextElement(_tmpl$);
         }
-      }), _el$10, _co$2);
-      return _el$6;
-    }
-  }), _el$12, _co$3);
-  _$insert(_el$2, _$createComponent(Show, {
-    get when() {
-      return props.actions;
-    },
-    get children() {
-      var _el$13 = _$getNextElement(_tmpl$5);
-      _$insert(_el$13, () => props.actions);
-      return _el$13;
-    }
-  }), _el$19, _co$6);
-  _$insert(_el$, _$createComponent(Show, {
-    get when() {
-      return props.primaryActions;
-    },
-    get children() {
-      var _el$20 = _$getNextElement(_tmpl$6);
-      _$insert(_el$20, () => props.primaryActions);
-      return _el$20;
+      });
     }
-  }), _el$22, _co$7);
-  _$effect(_p$ => {
-    var _v$ = classNames("k2b-detail-panel__header", props.class),
-      _v$2 = props.icon || props.leading ? "true" : undefined;
-    _v$ !== _p$.e && _$className(_el$, _p$.e = _v$);
-    _v$2 !== _p$.t && _$setAttribute(_el$2, "data-identity", _p$.t = _v$2);
-    return _p$;
-  }, {
-    e: undefined,
-    t: undefined
   });
-  return _el$;
-})();
+  // With primary actions, "…" ends their row, next to the commands it extends; otherwise it sits beside close.
+  const menuInActions = () => Boolean(props.menu?.length) && !props.primaryActions;
+  return (() => {
+    var _el$2 = _$getNextElement(_tmpl$9),
+      _el$3 = _el$2.firstChild,
+      _el$22 = _el$3.firstChild,
+      [_el$23, _co$7] = _$getNextMarker(_el$22.nextSibling),
+      _el$24 = _el$23.nextSibling,
+      [_el$25, _co$8] = _$getNextMarker(_el$24.nextSibling),
+      _el$5 = _el$25.nextSibling,
+      _el$13 = _el$5.firstChild,
+      [_el$14, _co$3] = _$getNextMarker(_el$13.nextSibling),
+      _el$7 = _el$14.nextSibling,
+      _el$15 = _el$7.nextSibling,
+      [_el$16, _co$4] = _$getNextMarker(_el$15.nextSibling),
+      _el$26 = _el$5.nextSibling,
+      [_el$27, _co$9] = _$getNextMarker(_el$26.nextSibling),
+      _el$33 = _el$3.nextSibling,
+      [_el$34, _co$10] = _$getNextMarker(_el$33.nextSibling);
+    _$insert(_el$3, _$createComponent(Show, {
+      get when() {
+        return props.icon;
+      },
+      children: icon => (() => {
+        var _el$35 = _$getNextElement(_tmpl$0),
+          _el$36 = _el$35.firstChild;
+        _$effect(() => _$className(_el$36, icon()));
+        return _el$35;
+      })()
+    }), _el$23, _co$7);
+    _$insert(_el$3, _$createComponent(Show, {
+      get when() {
+        return props.leading;
+      },
+      get children() {
+        var _el$4 = _$getNextElement(_tmpl$2);
+        _$insert(_el$4, () => props.leading);
+        return _el$4;
+      }
+    }), _el$25, _co$8);
+    _$insert(_el$5, _$createComponent(Show, {
+      get when() {
+        return props.kind;
+      },
+      get children() {
+        var _el$6 = _$getNextElement(_tmpl$3);
+        _$insert(_el$6, () => props.kind);
+        return _el$6;
+      }
+    }), _el$14, _co$3);
+    _el$7.addEventListener("pointerenter", showTruncatedTitle);
+    _$insert(_el$7, () => props.title);
+    _$insert(_el$5, _$createComponent(Show, {
+      get when() {
+        return props.subtitle || props.meta;
+      },
+      get children() {
+        var _el$8 = _$getNextElement(_tmpl$6),
+          _el$1 = _el$8.firstChild,
+          [_el$10, _co$] = _$getNextMarker(_el$1.nextSibling),
+          _el$11 = _el$10.nextSibling,
+          [_el$12, _co$2] = _$getNextMarker(_el$11.nextSibling);
+        _$insert(_el$8, _$createComponent(Show, {
+          get when() {
+            return props.subtitle;
+          },
+          get children() {
+            var _el$9 = _$getNextElement(_tmpl$4);
+            _$insert(_el$9, () => props.subtitle);
+            return _el$9;
+          }
+        }), _el$10, _co$);
+        _$insert(_el$8, _$createComponent(Show, {
+          get when() {
+            return props.meta;
+          },
+          get children() {
+            var _el$0 = _$getNextElement(_tmpl$5);
+            _$insert(_el$0, () => props.meta);
+            return _el$0;
+          }
+        }), _el$12, _co$2);
+        return _el$8;
+      }
+    }), _el$16, _co$4);
+    _$insert(_el$3, _$createComponent(Show, {
+      get when() {
+        return menuInActions() || props.actions;
+      },
+      get children() {
+        var _el$17 = _$getNextElement(_tmpl$7),
+          _el$18 = _el$17.firstChild,
+          [_el$19, _co$5] = _$getNextMarker(_el$18.nextSibling),
+          _el$20 = _el$19.nextSibling,
+          [_el$21, _co$6] = _$getNextMarker(_el$20.nextSibling);
+        _$insert(_el$17, _$createComponent(Show, {
+          get when() {
+            return menuInActions();
+          },
+          get children() {
+            return menuTrigger();
+          }
+        }), _el$19, _co$5);
+        _$insert(_el$17, () => props.actions, _el$21, _co$6);
+        return _el$17;
+      }
+    }), _el$27, _co$9);
+    _$insert(_el$2, _$createComponent(Show, {
+      get when() {
+        return props.primaryActions;
+      },
+      get children() {
+        var _el$28 = _$getNextElement(_tmpl$8),
+          _el$29 = _el$28.firstChild,
+          [_el$30, _co$0] = _$getNextMarker(_el$29.nextSibling),
+          _el$31 = _el$30.nextSibling,
+          [_el$32, _co$1] = _$getNextMarker(_el$31.nextSibling);
+        _$insert(_el$28, () => props.primaryActions, _el$30, _co$0);
+        _$insert(_el$28, _$createComponent(Show, {
+          get when() {
+            return props.menu?.length;
+          },
+          get children() {
+            return menuTrigger();
+          }
+        }), _el$32, _co$1);
+        return _el$28;
+      }
+    }), _el$34, _co$10);
+    _$effect(_p$ => {
+      var _v$ = classNames("k2b-detail-panel__header", props.class),
+        _v$2 = props.icon || props.leading ? "true" : undefined;
+      _v$ !== _p$.e && _$className(_el$2, _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute(_el$3, "data-identity", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$2;
+  })();
+};
 const DetailPanelBody = props => {
   let body;
   createScrollFade(() => body, () => props.scrollFade !== false);
   return (() => {
-    var _el$25 = _$getNextElement(_tmpl$9);
+    var _el$37 = _$getNextElement(_tmpl$1);
     var _ref$ = body;
-    typeof _ref$ === "function" ? _$use(_ref$, _el$25) : body = _el$25;
-    _$insert(_el$25, () => props.children);
+    typeof _ref$ === "function" ? _$use(_ref$, _el$37) : body = _el$37;
+    _$insert(_el$37, () => props.children);
     _$effect(_p$ => {
       var _v$3 = classNames("k2b-detail-panel__body", props.class),
         _v$4 = props.scrollFade !== false ? "both" : undefined,
         _v$5 = props.scrollPreserveKey;
-      _v$3 !== _p$.e && _$className(_el$25, _p$.e = _v$3);
-      _v$4 !== _p$.t && _$setAttribute(_el$25, "data-scroll-fade-mode", _p$.t = _v$4);
-      _v$5 !== _p$.a && _$setAttribute(_el$25, "data-scroll-preserve", _p$.a = _v$5);
+      _v$3 !== _p$.e && _$className(_el$37, _p$.e = _v$3);
+      _v$4 !== _p$.t && _$setAttribute(_el$37, "data-scroll-fade-mode", _p$.t = _v$4);
+      _v$5 !== _p$.a && _$setAttribute(_el$37, "data-scroll-preserve", _p$.a = _v$5);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined
     });
-    return _el$25;
+    return _el$37;
   })();
 };
 const DetailPanelSummary = props => {
   const headingId = `k2b-detail-panel-summary-${createUniqueId()}`;
   return (() => {
-    var _el$26 = _$getNextElement(_tmpl$1),
-      _el$27 = _el$26.firstChild,
-      _el$28 = _el$27.firstChild,
-      _el$30 = _el$28.nextSibling,
-      [_el$31, _co$8] = _$getNextMarker(_el$30.nextSibling),
-      _el$32 = _el$27.nextSibling;
-    _$setAttribute(_el$26, "aria-labelledby", headingId);
-    _$setAttribute(_el$28, "id", headingId);
-    _$insert(_el$28, () => props.title);
-    _$insert(_el$27, _$createComponent(Show, {
+    var _el$38 = _$getNextElement(_tmpl$11),
+      _el$39 = _el$38.firstChild,
+      _el$40 = _el$39.firstChild,
+      _el$42 = _el$40.nextSibling,
+      [_el$43, _co$11] = _$getNextMarker(_el$42.nextSibling),
+      _el$44 = _el$39.nextSibling;
+    _$setAttribute(_el$38, "aria-labelledby", headingId);
+    _$setAttribute(_el$40, "id", headingId);
+    _$insert(_el$40, () => props.title);
+    _$insert(_el$39, _$createComponent(Show, {
       get when() {
         return props.actions;
       },
       get children() {
-        var _el$29 = _$getNextElement(_tmpl$0);
-        _$insert(_el$29, () => props.actions);
-        return _el$29;
+        var _el$41 = _$getNextElement(_tmpl$10);
+        _$insert(_el$41, () => props.actions);
+        return _el$41;
+      }
+    }), _el$43, _co$11);
+    _$insert(_el$44, () => props.children);
+    _$effect(() => _$className(_el$38, classNames("k2b-detail-panel__summary", props.class)));
+    return _el$38;
+  })();
+};
+const DetailPanelGroup = props => {
+  const titleId = `k2b-detail-panel-group-${createUniqueId()}`;
+  return (() => {
+    var _el$45 = _$getNextElement(_tmpl$13),
+      _el$47 = _el$45.firstChild,
+      [_el$48, _co$12] = _$getNextMarker(_el$47.nextSibling),
+      _el$49 = _el$48.nextSibling,
+      [_el$50, _co$13] = _$getNextMarker(_el$49.nextSibling);
+    _$insert(_el$45, _$createComponent(Show, {
+      get when() {
+        return props.title;
+      },
+      get children() {
+        var _el$46 = _$getNextElement(_tmpl$12);
+        _$setAttribute(_el$46, "id", titleId);
+        _$insert(_el$46, () => props.title);
+        return _el$46;
       }
-    }), _el$31, _co$8);
-    _$insert(_el$32, () => props.children);
-    _$effect(() => _$className(_el$26, classNames("k2b-detail-panel__summary", props.class)));
-    return _el$26;
+    }), _el$48, _co$12);
+    _$insert(_el$45, () => props.children, _el$50, _co$13);
+    _$effect(_p$ => {
+      var _v$6 = classNames("k2b-detail-panel__group", props.class),
+        _v$7 = props.title ? undefined : props.label,
+        _v$8 = props.title ? titleId : undefined,
+        _v$9 = props.title ? "true" : undefined;
+      _v$6 !== _p$.e && _$className(_el$45, _p$.e = _v$6);
+      _v$7 !== _p$.t && _$setAttribute(_el$45, "aria-label", _p$.t = _v$7);
+      _v$8 !== _p$.a && _$setAttribute(_el$45, "aria-labelledby", _p$.a = _v$8);
+      _v$9 !== _p$.o && _$setAttribute(_el$45, "data-titled", _p$.o = _v$9);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined
+    });
+    return _el$45;
   })();
 };
-const DetailPanelGroup = props => (() => {
-  var _el$33 = _$getNextElement(_tmpl$10);
-  _$insert(_el$33, () => props.children);
-  _$effect(_p$ => {
-    var _v$6 = classNames("k2b-detail-panel__group", props.class),
-      _v$7 = props.label;
-    _v$6 !== _p$.e && _$className(_el$33, _p$.e = _v$6);
-    _v$7 !== _p$.t && _$setAttribute(_el$33, "aria-label", _p$.t = _v$7);
-    return _p$;
-  }, {
-    e: undefined,
-    t: undefined
-  });
-  return _el$33;
-})();
 const DetailPanelSectionIcon = props => _$createComponent(Show, {
   get when() {
     return props.icon;
   },
   children: icon => (() => {
-    var _el$34 = _$getNextElement(_tmpl$11),
-      _el$35 = _el$34.firstChild;
+    var _el$51 = _$getNextElement(_tmpl$14),
+      _el$52 = _el$51.firstChild;
     _$effect(_p$ => {
-      var _v$8 = props.tone ?? "neutral",
-        _v$9 = icon();
-      _v$8 !== _p$.e && _$setAttribute(_el$34, "data-tone", _p$.e = _v$8);
-      _v$9 !== _p$.t && _$className(_el$35, _p$.t = _v$9);
+      var _v$0 = props.tone ?? "neutral",
+        _v$1 = icon();
+      _v$0 !== _p$.e && _$setAttribute(_el$51, "data-tone", _p$.e = _v$0);
+      _v$1 !== _p$.t && _$className(_el$52, _p$.t = _v$1);
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$34;
+    return _el$51;
   })()
 });
 
@@ -254,15 +349,15 @@ export const DetailPanelCount = props => {
     },
     get fallback() {
       return (() => {
-        var _el$37 = _$getNextElement(_tmpl$13);
-        _$insert(_el$37, () => messages().noneYet);
-        return _el$37;
+        var _el$54 = _$getNextElement(_tmpl$16);
+        _$insert(_el$54, () => messages().noneYet);
+        return _el$54;
       })();
     },
     get children() {
-      var _el$36 = _$getNextElement(_tmpl$12);
-      _$insert(_el$36, () => props.count);
-      return _el$36;
+      var _el$53 = _$getNextElement(_tmpl$15);
+      _$insert(_el$53, () => props.count);
+      return _el$53;
     }
   });
 };
@@ -284,40 +379,40 @@ const SectionTitleMeta = props => [_$createComponent(Show, {
     return props.meta;
   },
   get children() {
-    var _el$38 = _$getNextElement(_tmpl$14);
-    _$insert(_el$38, () => props.meta);
-    return _el$38;
+    var _el$55 = _$getNextElement(_tmpl$17);
+    _$insert(_el$55, () => props.meta);
+    return _el$55;
   }
 })];
 const DetailPanelActionContent = props => [(() => {
-  var _el$39 = _$getNextElement(_tmpl$15);
-  _$insert(_el$39, () => props.leading);
-  return _el$39;
+  var _el$56 = _$getNextElement(_tmpl$18);
+  _$insert(_el$56, () => props.leading);
+  return _el$56;
 })(), (() => {
-  var _el$40 = _$getNextElement(_tmpl$17),
-    _el$41 = _el$40.firstChild,
-    _el$43 = _el$41.nextSibling,
-    [_el$44, _co$9] = _$getNextMarker(_el$43.nextSibling);
-  _$insert(_el$41, () => props.title);
-  _$insert(_el$40, _$createComponent(Show, {
+  var _el$57 = _$getNextElement(_tmpl$20),
+    _el$58 = _el$57.firstChild,
+    _el$60 = _el$58.nextSibling,
+    [_el$61, _co$14] = _$getNextMarker(_el$60.nextSibling);
+  _$insert(_el$58, () => props.title);
+  _$insert(_el$57, _$createComponent(Show, {
     get when() {
       return props.description;
     },
     get children() {
-      var _el$42 = _$getNextElement(_tmpl$16);
-      _$insert(_el$42, () => props.description);
-      return _el$42;
+      var _el$59 = _$getNextElement(_tmpl$19);
+      _$insert(_el$59, () => props.description);
+      return _el$59;
     }
-  }), _el$44, _co$9);
-  return _el$40;
+  }), _el$61, _co$14);
+  return _el$57;
 })(), _$createComponent(Show, {
   get when() {
     return props.trailing;
   },
   get children() {
-    var _el$45 = _$getNextElement(_tmpl$18);
-    _$insert(_el$45, () => props.trailing);
-    return _el$45;
+    var _el$62 = _$getNextElement(_tmpl$21);
+    _$insert(_el$62, () => props.trailing);
+    return _el$62;
   }
 })];
 const DetailPanelAction = props => {
@@ -391,15 +486,15 @@ const DetailPanelAction = props => {
       return action();
     },
     get children() {
-      var _el$46 = _$getNextElement(_tmpl$20),
-        _el$48 = _el$46.firstChild,
-        [_el$49, _co$0] = _$getNextMarker(_el$48.nextSibling),
-        _el$50 = _el$49.nextSibling,
-        [_el$51, _co$1] = _$getNextMarker(_el$50.nextSibling),
-        _el$52 = _el$51.nextSibling,
-        [_el$53, _co$10] = _$getNextMarker(_el$52.nextSibling);
-      _$insert(_el$46, action, _el$49, _co$0);
-      _$insert(_el$46, _$createComponent(Show, {
+      var _el$63 = _$getNextElement(_tmpl$22),
+        _el$65 = _el$63.firstChild,
+        [_el$66, _co$15] = _$getNextMarker(_el$65.nextSibling),
+        _el$67 = _el$66.nextSibling,
+        [_el$68, _co$16] = _$getNextMarker(_el$67.nextSibling),
+        _el$69 = _el$68.nextSibling,
+        [_el$70, _co$17] = _$getNextMarker(_el$69.nextSibling);
+      _$insert(_el$63, action, _el$66, _co$15);
+      _$insert(_el$63, _$createComponent(Show, {
         get when() {
           return local.secondaryAction;
         },
@@ -415,13 +510,13 @@ const DetailPanelAction = props => {
           },
           onClick: () => secondary().onClick(),
           get children() {
-            var _el$54 = _$getNextElement(_tmpl$21);
-            _$effect(() => _$className(_el$54, secondary().icon));
-            return _el$54;
+            var _el$71 = _$getNextElement(_tmpl$23);
+            _$effect(() => _$className(_el$71, secondary().icon));
+            return _el$71;
           }
         })
-      }), _el$51, _co$1);
-      _$insert(_el$46, _$createComponent(Show, {
+      }), _el$68, _co$16);
+      _$insert(_el$63, _$createComponent(Show, {
         get when() {
           return local.menuItems?.length;
         },
@@ -445,14 +540,14 @@ const DetailPanelAction = props => {
                 },
                 "class": "k2b-detail-panel__action-menu-trigger",
                 get children() {
-                  return _$getNextElement(_tmpl$19);
+                  return _$getNextElement(_tmpl$);
                 }
               });
             }
           });
         }
-      }), _el$53, _co$10);
-      return _el$46;
+      }), _el$70, _co$17);
+      return _el$63;
     }
   });
 };
@@ -489,101 +584,101 @@ const DetailPanelSection = props => {
     },
     get fallback() {
       return (() => {
-        var _el$82 = _$getNextElement(_tmpl$30),
-          _el$83 = _el$82.firstChild,
-          _el$93 = _el$83.firstChild,
-          [_el$94, _co$19] = _$getNextMarker(_el$93.nextSibling),
-          _el$84 = _el$94.nextSibling,
-          _el$85 = _el$84.firstChild,
-          _el$86 = _el$85.firstChild,
-          _el$87 = _el$86.nextSibling,
-          [_el$88, _co$17] = _$getNextMarker(_el$87.nextSibling),
-          _el$90 = _el$85.nextSibling,
-          [_el$91, _co$18] = _$getNextMarker(_el$90.nextSibling),
-          _el$95 = _el$84.nextSibling,
-          [_el$96, _co$20] = _$getNextMarker(_el$95.nextSibling),
-          _el$98 = _el$83.nextSibling,
-          [_el$99, _co$21] = _$getNextMarker(_el$98.nextSibling);
-        _$setAttribute(_el$82, "aria-labelledby", headingId);
-        _$insert(_el$83, _$createComponent(DetailPanelSectionIcon, {
+        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,
+          _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, {
           get icon() {
             return props.icon;
           },
           get tone() {
             return props.tone;
           }
-        }), _el$94, _co$19);
-        _$setAttribute(_el$86, "id", headingId);
-        _$insert(_el$86, () => props.title);
-        _$insert(_el$85, _$createComponent(SectionTitleMeta, {
+        }), _el$114, _co$27);
+        _$setAttribute(_el$106, "id", headingId);
+        _$insert(_el$106, () => props.title);
+        _$insert(_el$105, _$createComponent(SectionTitleMeta, {
           get count() {
             return props.count;
           },
           get meta() {
             return props.meta;
           }
-        }), _el$88, _co$17);
-        _$insert(_el$84, _$createComponent(Show, {
+        }), _el$108, _co$25);
+        _$insert(_el$104, _$createComponent(Show, {
           get when() {
             return props.description;
           },
           get children() {
-            var _el$89 = _$getNextElement(_tmpl$25);
-            _$insert(_el$89, () => props.description);
-            return _el$89;
+            var _el$109 = _$getNextElement(_tmpl$28);
+            _$insert(_el$109, () => props.description);
+            return _el$109;
           }
-        }), _el$91, _co$18);
-        _$insert(_el$83, _$createComponent(Show, {
+        }), _el$111, _co$26);
+        _$insert(_el$103, _$createComponent(Show, {
           get when() {
             return props.actions;
           },
           get children() {
-            var _el$92 = _$getNextElement(_tmpl$28);
-            _$insert(_el$92, () => props.actions);
-            return _el$92;
+            var _el$112 = _$getNextElement(_tmpl$31);
+            _$insert(_el$112, () => props.actions);
+            return _el$112;
           }
-        }), _el$96, _co$20);
-        _$insert(_el$82, _$createComponent(Show, {
+        }), _el$116, _co$28);
+        _$insert(_el$102, _$createComponent(Show, {
           get when() {
             return resolved();
           },
           get children() {
-            var _el$97 = _$getNextElement(_tmpl$29);
-            _$insert(_el$97, resolved);
-            return _el$97;
+            var _el$117 = _$getNextElement(_tmpl$32);
+            _$insert(_el$117, resolved);
+            return _el$117;
           }
-        }), _el$99, _co$21);
+        }), _el$119, _co$29);
         _$effect(_p$ => {
-          var _v$15 = className(),
-            _v$16 = props.icon ? "true" : undefined;
-          _v$15 !== _p$.e && _$className(_el$82, _p$.e = _v$15);
-          _v$16 !== _p$.t && _$setAttribute(_el$82, "data-icon", _p$.t = _v$16);
+          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);
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
-        return _el$82;
+        return _el$102;
       })();
     },
     get children() {
-      var _el$55 = _$getNextElement(_tmpl$27),
-        _el$56 = _el$55.firstChild,
-        _el$66 = _el$56.nextSibling,
-        _el$67 = _el$66.firstChild,
-        _el$77 = _el$67.firstChild,
-        [_el$78, _co$15] = _$getNextMarker(_el$77.nextSibling),
-        _el$68 = _el$78.nextSibling,
-        _el$69 = _el$68.firstChild,
-        _el$70 = _el$69.firstChild,
-        _el$71 = _el$70.nextSibling,
-        [_el$72, _co$13] = _$getNextMarker(_el$71.nextSibling),
-        _el$74 = _el$69.nextSibling,
-        [_el$75, _co$14] = _$getNextMarker(_el$74.nextSibling),
-        _el$79 = _el$68.nextSibling,
-        [_el$80, _co$16] = _$getNextMarker(_el$79.nextSibling),
-        _el$81 = _el$66.nextSibling;
-      _$insert(_el$56, _$createComponent(Button, {
+      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,
+        _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, {
         ref(r$) {
           var _ref$2 = expand;
           typeof _ref$2 === "function" ? _ref$2(r$) : expand = r$;
@@ -605,66 +700,78 @@ const DetailPanelSection = props => {
               return props.tone;
             }
           }), (() => {
-            var _el$57 = _$getNextElement(_tmpl$23),
-              _el$58 = _el$57.firstChild,
-              _el$59 = _el$58.firstChild,
-              _el$60 = _el$59.nextSibling,
-              [_el$61, _co$11] = _$getNextMarker(_el$60.nextSibling),
-              _el$63 = _el$58.nextSibling,
-              [_el$64, _co$12] = _$getNextMarker(_el$63.nextSibling);
-            _$setAttribute(_el$59, "id", `${headingId}-closed`);
-            _$insert(_el$59, () => props.title);
-            _$insert(_el$58, _$createComponent(SectionTitleMeta, {
+            var _el$74 = _$getNextElement(_tmpl$26),
+              _el$75 = _el$74.firstChild,
+              _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, {
               get count() {
                 return props.count;
               },
               get meta() {
                 return props.meta;
               }
-            }), _el$61, _co$11);
-            _$insert(_el$57, _$createComponent(Show, {
+            }), _el$79, _co$18);
+            _$insert(_el$75, _$createComponent(Show, {
+              get when() {
+                return props.summary;
+              },
+              get children() {
+                var _el$77 = _$getNextElement(_tmpl$24);
+                _$insert(_el$77, () => props.summary);
+                return _el$77;
+              }
+            }), _el$81, _co$19);
+            _$insert(_el$74, _$createComponent(Show, {
               get when() {
                 return props.description;
               },
               get children() {
-                var _el$62 = _$getNextElement(_tmpl$22);
-                _$insert(_el$62, () => props.description);
-                return _el$62;
+                var _el$82 = _$getNextElement(_tmpl$25);
+                _$insert(_el$82, () => props.description);
+                return _el$82;
               }
-            }), _el$64, _co$12);
-            return _el$57;
-          })(), _$getNextElement(_tmpl$24)];
+            }), _el$84, _co$20);
+            return _el$74;
+          })(), _$getNextElement(_tmpl$27)];
         }
       }));
-      _$insert(_el$67, _$createComponent(DetailPanelSectionIcon, {
+      _$insert(_el$87, _$createComponent(DetailPanelSectionIcon, {
         get icon() {
           return props.icon;
         },
         get tone() {
           return props.tone;
         }
-      }), _el$78, _co$15);
-      _$setAttribute(_el$70, "id", headingId);
-      _$insert(_el$70, () => props.title);
-      _$insert(_el$69, _$createComponent(SectionTitleMeta, {
+      }), _el$98, _co$23);
+      _$setAttribute(_el$90, "id", headingId);
+      _$insert(_el$90, () => props.title);
+      _$insert(_el$89, _$createComponent(SectionTitleMeta, {
         get count() {
           return props.count;
         },
         get meta() {
           return props.meta;
         }
-      }), _el$72, _co$13);
-      _$insert(_el$68, _$createComponent(Show, {
+      }), _el$92, _co$21);
+      _$insert(_el$88, _$createComponent(Show, {
         get when() {
           return props.description;
         },
         get children() {
-          var _el$73 = _$getNextElement(_tmpl$25);
-          _$insert(_el$73, () => props.description);
-          return _el$73;
+          var _el$93 = _$getNextElement(_tmpl$28);
+          _$insert(_el$93, () => props.description);
+          return _el$93;
         }
-      }), _el$75, _co$14);
-      _$insert(_el$67, _$createComponent(Button, {
+      }), _el$95, _co$22);
+      _$insert(_el$87, _$createComponent(Button, {
         ref(r$) {
           var _ref$3 = collapse;
           typeof _ref$3 === "function" ? _ref$3(r$) : collapse = r$;
@@ -680,28 +787,30 @@ const DetailPanelSection = props => {
         "aria-controls": bodyId,
         onClick: () => toggle(false),
         get children() {
-          return _$getNextElement(_tmpl$26);
+          return _$getNextElement(_tmpl$29);
         }
-      }), _el$80, _co$16);
+      }), _el$100, _co$24);
       var _ref$4 = body;
-      typeof _ref$4 === "function" ? _$use(_ref$4, _el$81) : body = _el$81;
-      _$setAttribute(_el$81, "id", bodyId);
-      _$insert(_el$81, () => props.children);
+      typeof _ref$4 === "function" ? _$use(_ref$4, _el$101) : body = _el$101;
+      _$setAttribute(_el$101, "id", bodyId);
+      _$insert(_el$101, () => props.children);
       _$effect(_p$ => {
-        var _v$0 = className(),
-          _v$1 = open() ? headingId : `${headingId}-closed`,
-          _v$10 = open(),
-          _v$11 = props.icon ? "true" : undefined,
+        var _v$10 = className(),
+          _v$11 = open() ? headingId : `${headingId}-closed`,
           _v$12 = open(),
-          _v$13 = !open(),
-          _v$14 = !open();
-        _v$0 !== _p$.e && _$className(_el$55, _p$.e = _v$0);
-        _v$1 !== _p$.t && _$setAttribute(_el$55, "aria-labelledby", _p$.t = _v$1);
-        _v$10 !== _p$.a && _$setAttribute(_el$55, "data-open", _p$.a = _v$10);
-        _v$11 !== _p$.o && _$setAttribute(_el$55, "data-icon", _p$.o = _v$11);
-        _v$12 !== _p$.i && _$setProperty(_el$56, "hidden", _p$.i = _v$12);
-        _v$13 !== _p$.n && _$setProperty(_el$66, "hidden", _p$.n = _v$13);
-        _v$14 !== _p$.s && _$setProperty(_el$81, "hidden", _p$.s = _v$14);
+          _v$13 = props.icon ? "true" : undefined,
+          _v$14 = props.summary ? "true" : undefined,
+          _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);
         return _p$;
       }, {
         e: undefined,
@@ -710,26 +819,27 @@ const DetailPanelSection = props => {
         o: undefined,
         i: undefined,
         n: undefined,
-        s: undefined
+        s: undefined,
+        h: undefined
       });
-      return _el$55;
+      return _el$72;
     }
   });
 };
 const DetailPanel = props => (() => {
-  var _el$100 = _$getNextElement(_tmpl$9);
-  _$insert(_el$100, () => props.children);
+  var _el$120 = _$getNextElement(_tmpl$1);
+  _$insert(_el$120, () => props.children);
   _$effect(_p$ => {
-    var _v$17 = classNames("k2b-detail-panel", props.class),
-      _v$18 = props.surface;
-    _v$17 !== _p$.e && _$className(_el$100, _p$.e = _v$17);
-    _v$18 !== _p$.t && _$setAttribute(_el$100, "data-surface", _p$.t = _v$18);
+    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);
     return _p$;
   }, {
     e: undefined,
     t: undefined
   });
-  return _el$100;
+  return _el$120;
 })();
 DetailPanel.Header = DetailPanelHeader;
 DetailPanel.Body = DetailPanelBody;