@k2b/ui 0.1.1 → 0.3.0

package/dist/browser/layout/BottomSheet.js

@@ -0,0 +1,95 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-bottom-sheet__handle><span aria-hidden=true>`);
+import { Show } from "solid-js";
+import { useUiMessages } from "../intl/messages";
+import PanelDialog from "./PanelDialog";
+export const bottomSheetOptions = {
+  panelClassName: "k2b-dialog k2b-bottom-sheet-frame",
+  contentClassName: "k2b-panel-dialog-viewport k2b-bottom-sheet-viewport"
+};
+function BottomSheetRoot(props) {
+  const messages = useUiMessages();
+  let pointer;
+  let suppressClick = false;
+  const dismiss = () => {
+    if (!props.dismissDisabled) void props.onDismiss();
+  };
+  return _$createComponent(PanelDialog, {
+    get children() {
+      return [_$createComponent(Show, {
+        get when() {
+          return props.handle !== false;
+        },
+        get children() {
+          var _el$ = _$getNextElement(_tmpl$);
+          _el$.$$click = event => {
+            if (event.detail !== 0 && suppressClick) {
+              suppressClick = false;
+              return;
+            }
+            dismiss();
+          };
+          _el$.addEventListener("lostpointercapture", () => {
+            if (pointer) {
+              pointer = undefined;
+              suppressClick = true;
+            }
+          });
+          _el$.addEventListener("pointercancel", () => {
+            pointer = undefined;
+            suppressClick = true;
+          });
+          _el$.$$pointerup = event => {
+            if (pointer?.id !== event.pointerId) return;
+            const distance = event.clientY - pointer.y;
+            pointer = undefined;
+            // A drag must not turn into a second dismiss request through click.
+            suppressClick = Math.abs(distance) > 8;
+            if (distance > 60) dismiss();
+          };
+          _el$.$$pointerdown = event => {
+            if (!event.isPrimary || event.button !== 0 || props.dismissDisabled) return;
+            suppressClick = false;
+            pointer = {
+              id: event.pointerId,
+              y: event.clientY
+            };
+            event.currentTarget.setPointerCapture(event.pointerId);
+          };
+          _$effect(_p$ => {
+            var _v$ = props.dismissLabel ?? messages().close,
+              _v$2 = props.dismissDisabled;
+            _v$ !== _p$.e && _$setAttribute(_el$, "aria-label", _p$.e = _v$);
+            _v$2 !== _p$.t && _$setProperty(_el$, "disabled", _p$.t = _v$2);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          _$runHydrationEvents();
+          return _el$;
+        }
+      }), _$memo(() => props.children)];
+    }
+  });
+}
+
+/** Bottom-edge presentation; dialogCore continues to own all modal state. */
+const BottomSheet = Object.assign(BottomSheetRoot, {
+  Header: PanelDialog.Header,
+  Body: PanelDialog.Body,
+  Footer: PanelDialog.Footer,
+  Section: PanelDialog.Section,
+  Tabs: PanelDialog.Tabs
+});
+export default BottomSheet;
+_$delegateEvents(["pointerdown", "pointerup", "click"]);
+//# sourceMappingURL=BottomSheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Show","useUiMessages","PanelDialog","bottomSheetOptions","panelClassName","contentClassName","BottomSheetRoot","props","messages","pointer","suppressClick","dismiss","dismissDisabled","onDismiss","_$createComponent","children","when","handle","_el$","_$getNextElement","_tmpl$","$$click","event","detail","addEventListener","undefined","$$pointerup","id","pointerId","distance","clientY","y","Math","abs","$$pointerdown","isPrimary","button","currentTarget","setPointerCapture","_$effect","_p$","_v$","dismissLabel","close","_v$2","e","_$setAttribute","t","_$setProperty","_$runHydrationEvents","_$memo","BottomSheet","Object","assign","Header","Body","Footer","Section","Tabs","_$delegateEvents"],"sources":["layout/BottomSheet.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport type { OpenDialogOptions } from \"../feedback/dialog-core\";\nimport { useUiMessages } from \"../intl/messages\";\nimport PanelDialog from \"./PanelDialog\";\n\nexport const bottomSheetOptions = {\n  panelClassName: \"k2b-dialog k2b-bottom-sheet-frame\",\n  contentClassName: \"k2b-panel-dialog-viewport k2b-bottom-sheet-viewport\",\n} satisfies OpenDialogOptions;\n\nexport type BottomSheetProps = {\n  children: JSX.Element;\n  /** Pass dialogCore's render context requestDismiss, never the completion callback. */\n  onDismiss: () => void | Promise<void>;\n  dismissDisabled?: boolean;\n  dismissLabel?: string;\n  handle?: boolean;\n};\n\nfunction BottomSheetRoot(props: BottomSheetProps) {\n  const messages = useUiMessages();\n  let pointer: { id: number; y: number } | undefined;\n  let suppressClick = false;\n  const dismiss = () => {\n    if (!props.dismissDisabled) void props.onDismiss();\n  };\n  return (\n    <PanelDialog>\n      <Show when={props.handle !== false}>\n        <button\n          type=\"button\"\n          class=\"k2b-bottom-sheet__handle\"\n          aria-label={props.dismissLabel ?? messages().close}\n          disabled={props.dismissDisabled}\n          onPointerDown={(event) => {\n            if (!event.isPrimary || event.button !== 0 || props.dismissDisabled) return;\n            suppressClick = false;\n            pointer = { id: event.pointerId, y: event.clientY };\n            event.currentTarget.setPointerCapture(event.pointerId);\n          }}\n          onPointerUp={(event) => {\n            if (pointer?.id !== event.pointerId) return;\n            const distance = event.clientY - pointer.y;\n            pointer = undefined;\n            // A drag must not turn into a second dismiss request through click.\n            suppressClick = Math.abs(distance) > 8;\n            if (distance > 60) dismiss();\n          }}\n          onPointerCancel={() => {\n            pointer = undefined;\n            suppressClick = true;\n          }}\n          onLostPointerCapture={() => {\n            if (pointer) {\n              pointer = undefined;\n              suppressClick = true;\n            }\n          }}\n          onClick={(event) => {\n            if (event.detail !== 0 && suppressClick) {\n              suppressClick = false;\n              return;\n            }\n            dismiss();\n          }}\n        >\n          <span aria-hidden=\"true\" />\n        </button>\n      </Show>\n      {props.children}\n    </PanelDialog>\n  );\n}\n\n/** Bottom-edge presentation; dialogCore continues to own all modal state. */\nconst BottomSheet = Object.assign(BottomSheetRoot, {\n  Header: PanelDialog.Header,\n  Body: PanelDialog.Body,\n  Footer: PanelDialog.Footer,\n  Section: PanelDialog.Section,\n  Tabs: PanelDialog.Tabs,\n});\nexport default BottomSheet;\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/layout/DetailPanel.js

@@ -2,6 +2,7 @@ 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 { className as _$className } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
 import { getNextMarker as _$getNextMarker } from "solid-js/web";
@@ -29,13 +30,17 @@ var _tmpl$ = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__header-leadin
   _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(`<span class=k2b-detail-panel__section-description>`),
-  _tmpl$19 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__section-meta>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<details><summary class=k2b-detail-panel__section-summary><!$><!/><span class=k2b-detail-panel__section-copy><span class=k2b-detail-panel__section-title></span><!$><!/></span><!$><!/><i class="ti ti-chevron-down"aria-hidden=true></i></summary><div class=k2b-detail-panel__section-body>`),
-  _tmpl$21 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__section-meta>`),
-  _tmpl$22 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__section-actions>`),
-  _tmpl$23 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__section-body>`),
-  _tmpl$24 = /*#__PURE__*/_$template(`<section><header class=k2b-detail-panel__section-header><!$><!/><div class=k2b-detail-panel__section-copy><h3></h3><!$><!/></div><!$><!/><!$><!/></header><!$><!/>`);
-import { createUniqueId, Show, splitProps } from "solid-js";
+  _tmpl$19 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__section-copy><span class=k2b-detail-panel__section-title></span><!$><!/>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<span class=k2b-detail-panel__section-meta>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<i class="ti ti-chevron-down"aria-hidden=true>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__section-meta>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<i class="ti ti-chevron-up"aria-hidden=true>`),
+  _tmpl$24 = /*#__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$25 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__section-actions>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<div class=k2b-detail-panel__section-body>`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<section><header class=k2b-detail-panel__section-header><!$><!/><div class=k2b-detail-panel__section-copy><h3></h3><!$><!/></div><!$><!/><!$><!/></header><!$><!/>`);
+import { createScrollFade } from "./scroll-fade";
+import { children, createEffect, createSignal, createUniqueId, Show, splitProps } from "solid-js";
 import { Button, ButtonLink } from "../actions/Button";
 import { Dropdown } from "../actions/Dropdown";
 const classNames = (base, extra) => extra ? `${base} ${extra}` : base;
@@ -132,21 +137,30 @@ const DetailPanelHeader = props => (() => {
   _$effect(() => _$className(_el$, classNames("k2b-detail-panel__header", props.class)));
   return _el$;
 })();
-const DetailPanelBody = props => (() => {
-  var _el$25 = _$getNextElement(_tmpl$9);
-  _$insert(_el$25, () => props.children);
-  _$effect(_p$ => {
-    var _v$ = classNames("k2b-detail-panel__body", props.class),
-      _v$2 = props.scrollPreserveKey;
-    _v$ !== _p$.e && _$className(_el$25, _p$.e = _v$);
-    _v$2 !== _p$.t && _$setAttribute(_el$25, "data-scroll-preserve", _p$.t = _v$2);
-    return _p$;
-  }, {
-    e: undefined,
-    t: undefined
-  });
-  return _el$25;
-})();
+const DetailPanelBody = props => {
+  let body;
+  createScrollFade(() => body, () => props.scrollFade !== false);
+  return (() => {
+    var _el$25 = _$getNextElement(_tmpl$9);
+    var _ref$ = body;
+    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);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$25;
+  })();
+};
 const DetailPanelSummary = props => {
   const headingId = `k2b-detail-panel-summary-${createUniqueId()}`;
   return (() => {
@@ -178,10 +192,10 @@ const DetailPanelGroup = props => (() => {
   var _el$33 = _$getNextElement(_tmpl$10);
   _$insert(_el$33, () => props.children);
   _$effect(_p$ => {
-    var _v$3 = classNames("k2b-detail-panel__group", props.class),
-      _v$4 = props.label;
-    _v$3 !== _p$.e && _$className(_el$33, _p$.e = _v$3);
-    _v$4 !== _p$.t && _$setAttribute(_el$33, "aria-label", _p$.t = _v$4);
+    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);
     return _p$;
   }, {
     e: undefined,
@@ -197,10 +211,10 @@ const DetailPanelSectionIcon = props => _$createComponent(Show, {
     var _el$34 = _$getNextElement(_tmpl$11),
       _el$35 = _el$34.firstChild;
     _$effect(_p$ => {
-      var _v$5 = props.tone ?? "neutral",
-        _v$6 = icon();
-      _v$5 !== _p$.e && _$setAttribute(_el$34, "data-tone", _p$.e = _v$5);
-      _v$6 !== _p$.t && _$className(_el$35, _p$.t = _v$6);
+      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);
       return _p$;
     }, {
       e: undefined,
@@ -334,145 +348,256 @@ const DetailPanelAction = props => {
 };
 const DetailPanelSection = props => {
   const headingId = `k2b-detail-panel-section-${createUniqueId()}`;
+  const bodyId = `${headingId}-body`;
+  const [internalOpen, setInternalOpen] = createSignal(props.defaultOpen ?? false);
+  const open = () => props.open ?? internalOpen();
+  let expand;
+  let collapse;
+  let body;
+  const toggle = next => {
+    if (props.disabled) return;
+    if (props.open === undefined) setInternalOpen(next);
+    props.onOpenChange?.(next);
+  };
+  createEffect(() => {
+    const expanded = open();
+    // Restore focus only when its current control becomes hidden, including
+    // a parent-controlled collapse while focus is inside an editor.
+    queueMicrotask(() => {
+      if (expanded !== open()) return;
+      const active = expand?.ownerDocument.activeElement;
+      if (expanded && active === expand) collapse?.focus();
+      if (!expanded && (active === collapse || active && body?.contains(active))) expand?.focus();
+    });
+  });
   const className = () => classNames("k2b-detail-panel__section", props.class);
+  // Resolve once: reading `props.children` twice would instantiate the section body twice.
+  const resolved = children(() => props.children);
   return _$createComponent(Show, {
     get when() {
       return props.collapsible;
     },
     get fallback() {
       return (() => {
-        var _el$63 = _$getNextElement(_tmpl$24),
-          _el$64 = _el$63.firstChild,
-          _el$72 = _el$64.firstChild,
-          [_el$73, _co$14] = _$getNextMarker(_el$72.nextSibling),
-          _el$65 = _el$73.nextSibling,
-          _el$66 = _el$65.firstChild,
-          _el$68 = _el$66.nextSibling,
-          [_el$69, _co$13] = _$getNextMarker(_el$68.nextSibling),
-          _el$74 = _el$65.nextSibling,
-          [_el$75, _co$15] = _$getNextMarker(_el$74.nextSibling),
-          _el$76 = _el$75.nextSibling,
-          [_el$77, _co$16] = _$getNextMarker(_el$76.nextSibling),
-          _el$79 = _el$64.nextSibling,
-          [_el$80, _co$17] = _$getNextMarker(_el$79.nextSibling);
-        _$setAttribute(_el$63, "aria-labelledby", headingId);
-        _$insert(_el$64, _$createComponent(DetailPanelSectionIcon, {
+        var _el$74 = _$getNextElement(_tmpl$27),
+          _el$75 = _el$74.firstChild,
+          _el$83 = _el$75.firstChild,
+          [_el$84, _co$16] = _$getNextMarker(_el$83.nextSibling),
+          _el$76 = _el$84.nextSibling,
+          _el$77 = _el$76.firstChild,
+          _el$79 = _el$77.nextSibling,
+          [_el$80, _co$15] = _$getNextMarker(_el$79.nextSibling),
+          _el$85 = _el$76.nextSibling,
+          [_el$86, _co$17] = _$getNextMarker(_el$85.nextSibling),
+          _el$87 = _el$86.nextSibling,
+          [_el$88, _co$18] = _$getNextMarker(_el$87.nextSibling),
+          _el$90 = _el$75.nextSibling,
+          [_el$91, _co$19] = _$getNextMarker(_el$90.nextSibling);
+        _$setAttribute(_el$74, "aria-labelledby", headingId);
+        _$insert(_el$75, _$createComponent(DetailPanelSectionIcon, {
           get icon() {
             return props.icon;
           },
           get tone() {
             return props.tone;
           }
-        }), _el$73, _co$14);
-        _$setAttribute(_el$66, "id", headingId);
-        _$insert(_el$66, () => props.title);
-        _$insert(_el$65, _$createComponent(Show, {
+        }), _el$84, _co$16);
+        _$setAttribute(_el$77, "id", headingId);
+        _$insert(_el$77, () => props.title);
+        _$insert(_el$76, _$createComponent(Show, {
           get when() {
             return props.description;
           },
           get children() {
-            var _el$67 = _$getNextElement(_tmpl$2);
-            _$insert(_el$67, () => props.description);
-            return _el$67;
+            var _el$78 = _$getNextElement(_tmpl$2);
+            _$insert(_el$78, () => props.description);
+            return _el$78;
           }
-        }), _el$69, _co$13);
-        _$insert(_el$64, _$createComponent(Show, {
+        }), _el$80, _co$15);
+        _$insert(_el$75, _$createComponent(Show, {
           get when() {
             return props.meta;
           },
           get children() {
-            var _el$70 = _$getNextElement(_tmpl$21);
-            _$insert(_el$70, () => props.meta);
-            return _el$70;
+            var _el$81 = _$getNextElement(_tmpl$22);
+            _$insert(_el$81, () => props.meta);
+            return _el$81;
           }
-        }), _el$75, _co$15);
-        _$insert(_el$64, _$createComponent(Show, {
+        }), _el$86, _co$17);
+        _$insert(_el$75, _$createComponent(Show, {
           get when() {
             return props.actions;
           },
           get children() {
-            var _el$71 = _$getNextElement(_tmpl$22);
-            _$insert(_el$71, () => props.actions);
-            return _el$71;
+            var _el$82 = _$getNextElement(_tmpl$25);
+            _$insert(_el$82, () => props.actions);
+            return _el$82;
           }
-        }), _el$77, _co$16);
-        _$insert(_el$63, _$createComponent(Show, {
+        }), _el$88, _co$18);
+        _$insert(_el$74, _$createComponent(Show, {
           get when() {
-            return props.children !== undefined;
+            return resolved();
           },
           get children() {
-            var _el$78 = _$getNextElement(_tmpl$23);
-            _$insert(_el$78, () => props.children);
-            return _el$78;
+            var _el$89 = _$getNextElement(_tmpl$26);
+            _$insert(_el$89, resolved);
+            return _el$89;
           }
-        }), _el$80, _co$17);
-        _$effect(() => _$className(_el$63, className()));
-        return _el$63;
+        }), _el$91, _co$19);
+        _$effect(() => _$className(_el$74, className()));
+        return _el$74;
       })();
     },
     get children() {
-      var _el$49 = _$getNextElement(_tmpl$20),
+      var _el$49 = _$getNextElement(_tmpl$24),
         _el$50 = _el$49.firstChild,
-        _el$58 = _el$50.firstChild,
-        [_el$59, _co$11] = _$getNextMarker(_el$58.nextSibling),
-        _el$51 = _el$59.nextSibling,
-        _el$52 = _el$51.firstChild,
-        _el$54 = _el$52.nextSibling,
-        [_el$55, _co$10] = _$getNextMarker(_el$54.nextSibling),
-        _el$60 = _el$51.nextSibling,
-        [_el$61, _co$12] = _$getNextMarker(_el$60.nextSibling),
-        _el$57 = _el$61.nextSibling,
-        _el$62 = _el$50.nextSibling;
-      _$insert(_el$50, _$createComponent(DetailPanelSectionIcon, {
+        _el$58 = _el$50.nextSibling,
+        _el$59 = _el$58.firstChild,
+        _el$67 = _el$59.firstChild,
+        [_el$68, _co$12] = _$getNextMarker(_el$67.nextSibling),
+        _el$60 = _el$68.nextSibling,
+        _el$61 = _el$60.firstChild,
+        _el$63 = _el$61.nextSibling,
+        [_el$64, _co$11] = _$getNextMarker(_el$63.nextSibling),
+        _el$69 = _el$60.nextSibling,
+        [_el$70, _co$13] = _$getNextMarker(_el$69.nextSibling),
+        _el$71 = _el$70.nextSibling,
+        [_el$72, _co$14] = _$getNextMarker(_el$71.nextSibling),
+        _el$73 = _el$58.nextSibling;
+      _$insert(_el$50, _$createComponent(Button, {
+        ref(r$) {
+          var _ref$2 = expand;
+          typeof _ref$2 === "function" ? _ref$2(r$) : expand = r$;
+        },
+        variant: "ghost",
+        "class": "k2b-detail-panel__section-summary",
+        get disabled() {
+          return props.disabled;
+        },
+        "aria-expanded": false,
+        "aria-controls": bodyId,
+        onClick: () => toggle(true),
+        get children() {
+          return [_$createComponent(DetailPanelSectionIcon, {
+            get icon() {
+              return props.icon;
+            },
+            get tone() {
+              return props.tone;
+            }
+          }), (() => {
+            var _el$51 = _$getNextElement(_tmpl$19),
+              _el$52 = _el$51.firstChild,
+              _el$54 = _el$52.nextSibling,
+              [_el$55, _co$10] = _$getNextMarker(_el$54.nextSibling);
+            _$setAttribute(_el$52, "id", `${headingId}-closed`);
+            _$insert(_el$52, () => props.title);
+            _$insert(_el$51, _$createComponent(Show, {
+              get when() {
+                return props.description;
+              },
+              get children() {
+                var _el$53 = _$getNextElement(_tmpl$18);
+                _$insert(_el$53, () => props.description);
+                return _el$53;
+              }
+            }), _el$55, _co$10);
+            return _el$51;
+          })(), _$createComponent(Show, {
+            get when() {
+              return props.meta;
+            },
+            get children() {
+              var _el$56 = _$getNextElement(_tmpl$20);
+              _$insert(_el$56, () => props.meta);
+              return _el$56;
+            }
+          }), _$getNextElement(_tmpl$21)];
+        }
+      }));
+      _$insert(_el$59, _$createComponent(DetailPanelSectionIcon, {
         get icon() {
           return props.icon;
         },
         get tone() {
           return props.tone;
         }
-      }), _el$59, _co$11);
-      _$setAttribute(_el$52, "id", headingId);
-      _$insert(_el$52, () => props.title);
-      _$insert(_el$51, _$createComponent(Show, {
+      }), _el$68, _co$12);
+      _$setAttribute(_el$61, "id", headingId);
+      _$insert(_el$61, () => props.title);
+      _$insert(_el$60, _$createComponent(Show, {
         get when() {
           return props.description;
         },
         get children() {
-          var _el$53 = _$getNextElement(_tmpl$18);
-          _$insert(_el$53, () => props.description);
-          return _el$53;
+          var _el$62 = _$getNextElement(_tmpl$2);
+          _$insert(_el$62, () => props.description);
+          return _el$62;
         }
-      }), _el$55, _co$10);
-      _$insert(_el$50, _$createComponent(Show, {
+      }), _el$64, _co$11);
+      _$insert(_el$59, _$createComponent(Show, {
         get when() {
           return props.meta;
         },
         get children() {
-          var _el$56 = _$getNextElement(_tmpl$19);
-          _$insert(_el$56, () => props.meta);
-          return _el$56;
+          var _el$65 = _$getNextElement(_tmpl$22);
+          _$insert(_el$65, () => props.meta);
+          return _el$65;
+        }
+      }), _el$70, _co$13);
+      _$insert(_el$59, _$createComponent(Button, {
+        ref(r$) {
+          var _ref$3 = collapse;
+          typeof _ref$3 === "function" ? _ref$3(r$) : collapse = r$;
+        },
+        variant: "ghost",
+        size: "sm",
+        get disabled() {
+          return props.disabled;
+        },
+        "aria-labelledby": headingId,
+        "aria-expanded": true,
+        "aria-controls": bodyId,
+        onClick: () => toggle(false),
+        get children() {
+          return _$getNextElement(_tmpl$23);
         }
-      }), _el$61, _co$12);
-      _$insert(_el$62, () => props.children);
+      }), _el$72, _co$14);
+      var _ref$4 = body;
+      typeof _ref$4 === "function" ? _$use(_ref$4, _el$73) : body = _el$73;
+      _$setAttribute(_el$73, "id", bodyId);
+      _$insert(_el$73, () => props.children);
       _$effect(_p$ => {
-        var _v$7 = className(),
-          _v$8 = props.defaultOpen;
-        _v$7 !== _p$.e && _$className(_el$49, _p$.e = _v$7);
-        _v$8 !== _p$.t && _$setProperty(_el$49, "open", _p$.t = _v$8);
+        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$49, _p$.e = _v$8);
+        _v$9 !== _p$.t && _$setAttribute(_el$49, "aria-labelledby", _p$.t = _v$9);
+        _v$0 !== _p$.a && _$setAttribute(_el$49, "data-open", _p$.a = _v$0);
+        _v$1 !== _p$.o && _$setProperty(_el$50, "hidden", _p$.o = _v$1);
+        _v$10 !== _p$.i && _$setProperty(_el$58, "hidden", _p$.i = _v$10);
+        _v$11 !== _p$.n && _$setProperty(_el$73, "hidden", _p$.n = _v$11);
         return _p$;
       }, {
         e: undefined,
-        t: undefined
+        t: undefined,
+        a: undefined,
+        o: undefined,
+        i: undefined,
+        n: undefined
       });
       return _el$49;
     }
   });
 };
 const DetailPanel = props => (() => {
-  var _el$81 = _$getNextElement(_tmpl$9);
-  _$insert(_el$81, () => props.children);
-  _$effect(() => _$className(_el$81, classNames("k2b-detail-panel", props.class)));
-  return _el$81;
+  var _el$92 = _$getNextElement(_tmpl$9);
+  _$insert(_el$92, () => props.children);
+  _$effect(() => _$className(_el$92, classNames("k2b-detail-panel", props.class)));
+  return _el$92;
 })();
 DetailPanel.Header = DetailPanelHeader;
 DetailPanel.Body = DetailPanelBody;