@k2b/ui 0.26.0 → 0.28.0

package/dist/browser/layout/DetailPanel.js

@@ -1,8 +1,8 @@
 import { template as _$template } from "solid-js/web";
 import { setProperty as _$setProperty } from "solid-js/web";
 import { mergeProps as _$mergeProps } from "solid-js/web";
-import { setAttribute as _$setAttribute } from "solid-js/web";
 import { use as _$use } from "solid-js/web";
+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";
@@ -23,32 +23,38 @@ var _tmpl$ = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__header-leadin
   _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-detail-panel__action-leading>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__action-description>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__action-copy><span class=k2b-detail-panel__action-title></span><!$><!/>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__action-trailing>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<i class="ti ti-dots"aria-hidden=true>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__action-row><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
-  _tmpl$19 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__section-description>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__section-copy><span class=k2b-detail-panel__section-title></span><!$><!/>`),
-  _tmpl$21 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__section-meta>`),
-  _tmpl$22 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__section-toggle aria-hidden=true><i class="ti ti-chevron-down">`),
-  _tmpl$23 = /*#__PURE__*/_$template(`<p class=k2b-detail-panel__section-description>`),
-  _tmpl$24 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__section-meta>`),
-  _tmpl$25 = /*#__PURE__*/_$template(`<i class="ti ti-chevron-up"aria-hidden=true>`),
-  _tmpl$26 = /*#__PURE__*/_$template(`<section><div></div><div><header class=k2b-detail-panel__section-header><!$><!/><div class=k2b-detail-panel__section-copy><h3></h3><!$><!/></div><!$><!/><!$><!/></header></div><div class=k2b-detail-panel__section-body>`),
-  _tmpl$27 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__section-actions>`),
-  _tmpl$28 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__section-body>`),
-  _tmpl$29 = /*#__PURE__*/_$template(`<section><header class=k2b-detail-panel__section-header><!$><!/><div class=k2b-detail-panel__section-copy><h3></h3><!$><!/></div><!$><!/><!$><!/></header><!$><!/>`);
+  _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 { children, createEffect, createSignal, createUniqueId, Show, splitProps } from "solid-js";
 import { Button, ButtonLink, IconButton } from "../actions/Button";
 import { Dropdown } from "../actions/Dropdown";
+import { useDetailPanelMessages } from "./detail-panel-messages";
 import { createScrollFade } from "./scroll-fade";
 
 /** One direct secondary command, rendered as a sibling icon button at the end of the row. */
 
 const classNames = (base, extra) => extra ? `${base} ${extra}` : base;
+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,
@@ -85,6 +91,7 @@ const DetailPanelHeader = props => (() => {
       return _el$3;
     }
   }), _el$17, _co$5);
+  _el$5.addEventListener("pointerenter", showTruncatedTitle);
   _$insert(_el$5, () => props.title);
   _$insert(_el$4, _$createComponent(Show, {
     get when() {
@@ -139,7 +146,16 @@ const DetailPanelHeader = props => (() => {
       return _el$20;
     }
   }), _el$22, _co$7);
-  _$effect(() => _$className(_el$, classNames("k2b-detail-panel__header", props.class)));
+  _$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$;
 })();
 const DetailPanelBody = props => {
@@ -151,12 +167,12 @@ const DetailPanelBody = props => {
     typeof _ref$ === "function" ? _$use(_ref$, _el$25) : body = _el$25;
     _$insert(_el$25, () => props.children);
     _$effect(_p$ => {
-      var _v$ = classNames("k2b-detail-panel__body", props.class),
-        _v$2 = props.scrollFade !== false ? "both" : undefined,
-        _v$3 = props.scrollPreserveKey;
-      _v$ !== _p$.e && _$className(_el$25, _p$.e = _v$);
-      _v$2 !== _p$.t && _$setAttribute(_el$25, "data-scroll-fade-mode", _p$.t = _v$2);
-      _v$3 !== _p$.a && _$setAttribute(_el$25, "data-scroll-preserve", _p$.a = _v$3);
+      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);
       return _p$;
     }, {
       e: undefined,
@@ -197,10 +213,10 @@ const DetailPanelGroup = props => (() => {
   var _el$33 = _$getNextElement(_tmpl$10);
   _$insert(_el$33, () => props.children);
   _$effect(_p$ => {
-    var _v$4 = classNames("k2b-detail-panel__group", props.class),
-      _v$5 = props.label;
-    _v$4 !== _p$.e && _$className(_el$33, _p$.e = _v$4);
-    _v$5 !== _p$.t && _$setAttribute(_el$33, "aria-label", _p$.t = _v$5);
+    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,
@@ -216,10 +232,10 @@ const DetailPanelSectionIcon = props => _$createComponent(Show, {
     var _el$34 = _$getNextElement(_tmpl$11),
       _el$35 = _el$34.firstChild;
     _$effect(_p$ => {
-      var _v$6 = props.tone ?? "neutral",
-        _v$7 = icon();
-      _v$6 !== _p$.e && _$setAttribute(_el$34, "data-tone", _p$.e = _v$6);
-      _v$7 !== _p$.t && _$className(_el$35, _p$.t = _v$7);
+      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);
       return _p$;
     }, {
       e: undefined,
@@ -228,44 +244,84 @@ const DetailPanelSectionIcon = props => _$createComponent(Show, {
     return _el$34;
   })()
 });
-const DetailPanelActionContent = props => [_$createComponent(Show, {
+
+/** A count chip, or "None yet" for zero; shared by sections and discussions. */
+export const DetailPanelCount = props => {
+  const messages = useDetailPanelMessages();
+  return _$createComponent(Show, {
+    get when() {
+      return props.count > 0;
+    },
+    get fallback() {
+      return (() => {
+        var _el$37 = _$getNextElement(_tmpl$13);
+        _$insert(_el$37, () => messages().noneYet);
+        return _el$37;
+      })();
+    },
+    get children() {
+      var _el$36 = _$getNextElement(_tmpl$12);
+      _$insert(_el$36, () => props.count);
+      return _el$36;
+    }
+  });
+};
+
+/** Title, then its count and state right after it, so every section reads the same way. */
+const SectionTitleMeta = props => [_$createComponent(Show, {
   get when() {
-    return props.leading;
+    return props.count !== undefined;
   },
   get children() {
-    var _el$36 = _$getNextElement(_tmpl$12);
-    _$insert(_el$36, () => props.leading);
-    return _el$36;
+    return _$createComponent(DetailPanelCount, {
+      get count() {
+        return props.count ?? 0;
+      }
+    });
   }
-}), (() => {
-  var _el$37 = _$getNextElement(_tmpl$14),
-    _el$38 = _el$37.firstChild,
-    _el$40 = _el$38.nextSibling,
-    [_el$41, _co$9] = _$getNextMarker(_el$40.nextSibling);
-  _$insert(_el$38, () => props.title);
-  _$insert(_el$37, _$createComponent(Show, {
+}), _$createComponent(Show, {
+  get when() {
+    return props.meta;
+  },
+  get children() {
+    var _el$38 = _$getNextElement(_tmpl$14);
+    _$insert(_el$38, () => props.meta);
+    return _el$38;
+  }
+})];
+const DetailPanelActionContent = props => [(() => {
+  var _el$39 = _$getNextElement(_tmpl$15);
+  _$insert(_el$39, () => props.leading);
+  return _el$39;
+})(), (() => {
+  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, {
     get when() {
       return props.description;
     },
     get children() {
-      var _el$39 = _$getNextElement(_tmpl$13);
-      _$insert(_el$39, () => props.description);
-      return _el$39;
+      var _el$42 = _$getNextElement(_tmpl$16);
+      _$insert(_el$42, () => props.description);
+      return _el$42;
     }
-  }), _el$41, _co$9);
-  return _el$37;
+  }), _el$44, _co$9);
+  return _el$40;
 })(), _$createComponent(Show, {
   get when() {
     return props.trailing;
   },
   get children() {
-    var _el$42 = _$getNextElement(_tmpl$15);
-    _$insert(_el$42, () => props.trailing);
-    return _el$42;
+    var _el$45 = _$getNextElement(_tmpl$18);
+    _$insert(_el$45, () => props.trailing);
+    return _el$45;
   }
 })];
 const DetailPanelAction = props => {
-  const [local, rest] = splitProps(props, ["class", "description", "href", "leading", "menuItems", "menuLabel", "secondaryAction", "title", "trailing"]);
+  const [local, rest] = splitProps(props, ["class", "current", "description", "href", "leading", "menuItems", "menuLabel", "secondaryAction", "title", "trailing", "wrap"]);
   const className = classNames("k2b-detail-panel__action", local.class);
   const content = () => _$createComponent(DetailPanelActionContent, {
     get title() {
@@ -288,6 +344,15 @@ const DetailPanelAction = props => {
     get fallback() {
       return _$createComponent(Button, _$mergeProps(rest, {
         "class": className,
+        get ["aria-current"]() {
+          return local.current ? "true" : undefined;
+        },
+        get ["data-current"]() {
+          return local.current ? "true" : undefined;
+        },
+        get ["data-wrap"]() {
+          return local.wrap ? "true" : undefined;
+        },
         variant: "ghost",
         size: "sm",
         get children() {
@@ -301,6 +366,15 @@ const DetailPanelAction = props => {
           return local.href;
         },
         "class": className,
+        get ["aria-current"]() {
+          return local.current ? "location" : undefined;
+        },
+        get ["data-current"]() {
+          return local.current ? "true" : undefined;
+        },
+        get ["data-wrap"]() {
+          return local.wrap ? "true" : undefined;
+        },
         variant: "ghost",
         size: "sm",
         get children() {
@@ -317,15 +391,15 @@ const DetailPanelAction = props => {
       return action();
     },
     get children() {
-      var _el$43 = _$getNextElement(_tmpl$17),
-        _el$45 = _el$43.firstChild,
-        [_el$46, _co$0] = _$getNextMarker(_el$45.nextSibling),
-        _el$47 = _el$46.nextSibling,
-        [_el$48, _co$1] = _$getNextMarker(_el$47.nextSibling),
-        _el$49 = _el$48.nextSibling,
-        [_el$50, _co$10] = _$getNextMarker(_el$49.nextSibling);
-      _$insert(_el$43, action, _el$46, _co$0);
-      _$insert(_el$43, _$createComponent(Show, {
+      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, {
         get when() {
           return local.secondaryAction;
         },
@@ -341,13 +415,13 @@ const DetailPanelAction = props => {
           },
           onClick: () => secondary().onClick(),
           get children() {
-            var _el$51 = _$getNextElement(_tmpl$18);
-            _$effect(() => _$className(_el$51, secondary().icon));
-            return _el$51;
+            var _el$54 = _$getNextElement(_tmpl$21);
+            _$effect(() => _$className(_el$54, secondary().icon));
+            return _el$54;
           }
         })
-      }), _el$48, _co$1);
-      _$insert(_el$43, _$createComponent(Show, {
+      }), _el$51, _co$1);
+      _$insert(_el$46, _$createComponent(Show, {
         get when() {
           return local.menuItems?.length;
         },
@@ -371,14 +445,14 @@ const DetailPanelAction = props => {
                 },
                 "class": "k2b-detail-panel__action-menu-trigger",
                 get children() {
-                  return _$getNextElement(_tmpl$16);
+                  return _$getNextElement(_tmpl$19);
                 }
               });
             }
           });
         }
-      }), _el$50, _co$10);
-      return _el$43;
+      }), _el$53, _co$10);
+      return _el$46;
     }
   });
 };
@@ -415,92 +489,101 @@ const DetailPanelSection = props => {
     },
     get fallback() {
       return (() => {
-        var _el$77 = _$getNextElement(_tmpl$29),
-          _el$78 = _el$77.firstChild,
-          _el$86 = _el$78.firstChild,
-          [_el$87, _co$17] = _$getNextMarker(_el$86.nextSibling),
-          _el$79 = _el$87.nextSibling,
-          _el$80 = _el$79.firstChild,
-          _el$82 = _el$80.nextSibling,
-          [_el$83, _co$16] = _$getNextMarker(_el$82.nextSibling),
-          _el$88 = _el$79.nextSibling,
-          [_el$89, _co$18] = _$getNextMarker(_el$88.nextSibling),
-          _el$90 = _el$89.nextSibling,
-          [_el$91, _co$19] = _$getNextMarker(_el$90.nextSibling),
-          _el$93 = _el$78.nextSibling,
-          [_el$94, _co$20] = _$getNextMarker(_el$93.nextSibling);
-        _$setAttribute(_el$77, "aria-labelledby", headingId);
-        _$insert(_el$78, _$createComponent(DetailPanelSectionIcon, {
+        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, {
           get icon() {
             return props.icon;
           },
           get tone() {
             return props.tone;
           }
-        }), _el$87, _co$17);
-        _$setAttribute(_el$80, "id", headingId);
-        _$insert(_el$80, () => props.title);
-        _$insert(_el$79, _$createComponent(Show, {
-          get when() {
-            return props.description;
+        }), _el$94, _co$19);
+        _$setAttribute(_el$86, "id", headingId);
+        _$insert(_el$86, () => props.title);
+        _$insert(_el$85, _$createComponent(SectionTitleMeta, {
+          get count() {
+            return props.count;
           },
-          get children() {
-            var _el$81 = _$getNextElement(_tmpl$23);
-            _$insert(_el$81, () => props.description);
-            return _el$81;
+          get meta() {
+            return props.meta;
           }
-        }), _el$83, _co$16);
-        _$insert(_el$78, _$createComponent(Show, {
+        }), _el$88, _co$17);
+        _$insert(_el$84, _$createComponent(Show, {
           get when() {
-            return props.meta;
+            return props.description;
           },
           get children() {
-            var _el$84 = _$getNextElement(_tmpl$24);
-            _$insert(_el$84, () => props.meta);
-            return _el$84;
+            var _el$89 = _$getNextElement(_tmpl$25);
+            _$insert(_el$89, () => props.description);
+            return _el$89;
           }
-        }), _el$89, _co$18);
-        _$insert(_el$78, _$createComponent(Show, {
+        }), _el$91, _co$18);
+        _$insert(_el$83, _$createComponent(Show, {
           get when() {
             return props.actions;
           },
           get children() {
-            var _el$85 = _$getNextElement(_tmpl$27);
-            _$insert(_el$85, () => props.actions);
-            return _el$85;
+            var _el$92 = _$getNextElement(_tmpl$28);
+            _$insert(_el$92, () => props.actions);
+            return _el$92;
           }
-        }), _el$91, _co$19);
-        _$insert(_el$77, _$createComponent(Show, {
+        }), _el$96, _co$20);
+        _$insert(_el$82, _$createComponent(Show, {
           get when() {
             return resolved();
           },
           get children() {
-            var _el$92 = _$getNextElement(_tmpl$28);
-            _$insert(_el$92, resolved);
-            return _el$92;
+            var _el$97 = _$getNextElement(_tmpl$29);
+            _$insert(_el$97, resolved);
+            return _el$97;
           }
-        }), _el$94, _co$20);
-        _$effect(() => _$className(_el$77, className()));
-        return _el$77;
+        }), _el$99, _co$21);
+        _$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);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$82;
       })();
     },
     get children() {
-      var _el$52 = _$getNextElement(_tmpl$26),
-        _el$53 = _el$52.firstChild,
-        _el$61 = _el$53.nextSibling,
-        _el$62 = _el$61.firstChild,
-        _el$70 = _el$62.firstChild,
-        [_el$71, _co$13] = _$getNextMarker(_el$70.nextSibling),
-        _el$63 = _el$71.nextSibling,
-        _el$64 = _el$63.firstChild,
-        _el$66 = _el$64.nextSibling,
-        [_el$67, _co$12] = _$getNextMarker(_el$66.nextSibling),
-        _el$72 = _el$63.nextSibling,
-        [_el$73, _co$14] = _$getNextMarker(_el$72.nextSibling),
-        _el$74 = _el$73.nextSibling,
-        [_el$75, _co$15] = _$getNextMarker(_el$74.nextSibling),
-        _el$76 = _el$61.nextSibling;
-      _$insert(_el$53, _$createComponent(Button, {
+      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, {
         ref(r$) {
           var _ref$2 = expand;
           typeof _ref$2 === "function" ? _ref$2(r$) : expand = r$;
@@ -522,66 +605,66 @@ const DetailPanelSection = props => {
               return props.tone;
             }
           }), (() => {
-            var _el$54 = _$getNextElement(_tmpl$20),
-              _el$55 = _el$54.firstChild,
-              _el$57 = _el$55.nextSibling,
-              [_el$58, _co$11] = _$getNextMarker(_el$57.nextSibling);
-            _$setAttribute(_el$55, "id", `${headingId}-closed`);
-            _$insert(_el$55, () => props.title);
-            _$insert(_el$54, _$createComponent(Show, {
+            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, {
+              get count() {
+                return props.count;
+              },
+              get meta() {
+                return props.meta;
+              }
+            }), _el$61, _co$11);
+            _$insert(_el$57, _$createComponent(Show, {
               get when() {
                 return props.description;
               },
               get children() {
-                var _el$56 = _$getNextElement(_tmpl$19);
-                _$insert(_el$56, () => props.description);
-                return _el$56;
+                var _el$62 = _$getNextElement(_tmpl$22);
+                _$insert(_el$62, () => props.description);
+                return _el$62;
               }
-            }), _el$58, _co$11);
-            return _el$54;
-          })(), _$createComponent(Show, {
-            get when() {
-              return props.meta;
-            },
-            get children() {
-              var _el$59 = _$getNextElement(_tmpl$21);
-              _$insert(_el$59, () => props.meta);
-              return _el$59;
-            }
-          }), _$getNextElement(_tmpl$22)];
+            }), _el$64, _co$12);
+            return _el$57;
+          })(), _$getNextElement(_tmpl$24)];
         }
       }));
-      _$insert(_el$62, _$createComponent(DetailPanelSectionIcon, {
+      _$insert(_el$67, _$createComponent(DetailPanelSectionIcon, {
         get icon() {
           return props.icon;
         },
         get tone() {
           return props.tone;
         }
-      }), _el$71, _co$13);
-      _$setAttribute(_el$64, "id", headingId);
-      _$insert(_el$64, () => props.title);
-      _$insert(_el$63, _$createComponent(Show, {
-        get when() {
-          return props.description;
+      }), _el$78, _co$15);
+      _$setAttribute(_el$70, "id", headingId);
+      _$insert(_el$70, () => props.title);
+      _$insert(_el$69, _$createComponent(SectionTitleMeta, {
+        get count() {
+          return props.count;
         },
-        get children() {
-          var _el$65 = _$getNextElement(_tmpl$23);
-          _$insert(_el$65, () => props.description);
-          return _el$65;
+        get meta() {
+          return props.meta;
         }
-      }), _el$67, _co$12);
-      _$insert(_el$62, _$createComponent(Show, {
+      }), _el$72, _co$13);
+      _$insert(_el$68, _$createComponent(Show, {
         get when() {
-          return props.meta;
+          return props.description;
         },
         get children() {
-          var _el$68 = _$getNextElement(_tmpl$24);
-          _$insert(_el$68, () => props.meta);
-          return _el$68;
+          var _el$73 = _$getNextElement(_tmpl$25);
+          _$insert(_el$73, () => props.description);
+          return _el$73;
         }
-      }), _el$73, _co$14);
-      _$insert(_el$62, _$createComponent(Button, {
+      }), _el$75, _co$14);
+      _$insert(_el$67, _$createComponent(Button, {
         ref(r$) {
           var _ref$3 = collapse;
           typeof _ref$3 === "function" ? _ref$3(r$) : collapse = r$;
@@ -597,26 +680,28 @@ const DetailPanelSection = props => {
         "aria-controls": bodyId,
         onClick: () => toggle(false),
         get children() {
-          return _$getNextElement(_tmpl$25);
+          return _$getNextElement(_tmpl$26);
         }
-      }), _el$75, _co$15);
+      }), _el$80, _co$16);
       var _ref$4 = body;
-      typeof _ref$4 === "function" ? _$use(_ref$4, _el$76) : body = _el$76;
-      _$setAttribute(_el$76, "id", bodyId);
-      _$insert(_el$76, () => props.children);
+      typeof _ref$4 === "function" ? _$use(_ref$4, _el$81) : body = _el$81;
+      _$setAttribute(_el$81, "id", bodyId);
+      _$insert(_el$81, () => props.children);
       _$effect(_p$ => {
-        var _v$8 = className(),
-          _v$9 = open() ? headingId : `${headingId}-closed`,
-          _v$0 = open(),
-          _v$1 = open(),
-          _v$10 = !open(),
-          _v$11 = !open();
-        _v$8 !== _p$.e && _$className(_el$52, _p$.e = _v$8);
-        _v$9 !== _p$.t && _$setAttribute(_el$52, "aria-labelledby", _p$.t = _v$9);
-        _v$0 !== _p$.a && _$setAttribute(_el$52, "data-open", _p$.a = _v$0);
-        _v$1 !== _p$.o && _$setProperty(_el$53, "hidden", _p$.o = _v$1);
-        _v$10 !== _p$.i && _$setProperty(_el$61, "hidden", _p$.i = _v$10);
-        _v$11 !== _p$.n && _$setProperty(_el$76, "hidden", _p$.n = _v$11);
+        var _v$0 = className(),
+          _v$1 = open() ? headingId : `${headingId}-closed`,
+          _v$10 = open(),
+          _v$11 = props.icon ? "true" : undefined,
+          _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);
         return _p$;
       }, {
         e: undefined,
@@ -624,17 +709,18 @@ const DetailPanelSection = props => {
         a: undefined,
         o: undefined,
         i: undefined,
-        n: undefined
+        n: undefined,
+        s: undefined
       });
-      return _el$52;
+      return _el$55;
     }
   });
 };
 const DetailPanel = props => (() => {
-  var _el$95 = _$getNextElement(_tmpl$9);
-  _$insert(_el$95, () => props.children);
-  _$effect(() => _$className(_el$95, classNames("k2b-detail-panel", props.class)));
-  return _el$95;
+  var _el$100 = _$getNextElement(_tmpl$9);
+  _$insert(_el$100, () => props.children);
+  _$effect(() => _$className(_el$100, classNames("k2b-detail-panel", props.class)));
+  return _el$100;
 })();
 DetailPanel.Header = DetailPanelHeader;
 DetailPanel.Body = DetailPanelBody;