@k2b/ui 0.2.0 → 0.3.0

package/dist/browser/layout/Navigation.js

@@ -0,0 +1,278 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { effect as _$effect } 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(`<ul class=k2b-navigation__list>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<small>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<span class=k2b-navigation__copy><span></span><!$><!/>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<span class=k2b-navigation__color>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<span class=k2b-navigation__badge>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<button type=button class=k2b-navigation__disclosure><i aria-hidden=true>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<i class="ti ti-dots"aria-hidden=true>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<div>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<li><div class=k2b-navigation__row><!$><!/><!$><!/><!$><!/></div><!$><!/>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<button type=button class=k2b-navigation__control><!$><!/><!$><!/>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<nav class=k2b-navigation>`);
+import { documentNavigate, Link } from "@k2b/ssr/nav";
+import { createSignal, For, Show } from "solid-js";
+import { Dropdown } from "../actions/Dropdown";
+import { useUiMessages } from "../intl/messages";
+export default function Navigation(props) {
+  const messages = useUiMessages();
+  const [expanded, setExpanded] = createSignal({});
+  const ready = async () => (await props.beforeSelect?.()) !== false;
+  const activate = async id => {
+    if (await ready()) await props.navigation.activate(id);
+  };
+  const Rows = rows => (() => {
+    var _el$ = _$getNextElement(_tmpl$);
+    _$insert(_el$, _$createComponent(For, {
+      get each() {
+        return rows.items.map(item => item.id);
+      },
+      children: id => {
+        const item = () => rows.items.find(entry => entry.id === id);
+        const disabled = () => rows.disabled || item().disabled;
+        const open = () => expanded()[id] ?? item().defaultExpanded ?? true;
+        const toggle = () => setExpanded(current => ({
+          ...current,
+          [id]: !open()
+        }));
+        const content = () => [_$createComponent(Show, {
+          get when() {
+            return item().icon;
+          },
+          get children() {
+            var _el$2 = _$getNextElement(_tmpl$2);
+            _$effect(() => _$className(_el$2, item().icon));
+            return _el$2;
+          }
+        }), (() => {
+          var _el$3 = _$getNextElement(_tmpl$4),
+            _el$4 = _el$3.firstChild,
+            _el$6 = _el$4.nextSibling,
+            [_el$7, _co$] = _$getNextMarker(_el$6.nextSibling);
+          _$insert(_el$4, () => item().label);
+          _$insert(_el$3, _$createComponent(Show, {
+            get when() {
+              return item().description;
+            },
+            get children() {
+              var _el$5 = _$getNextElement(_tmpl$3);
+              _$insert(_el$5, () => item().description);
+              return _el$5;
+            }
+          }), _el$7, _co$);
+          return _el$3;
+        })(), _$createComponent(Show, {
+          get when() {
+            return item().color;
+          },
+          get children() {
+            var _el$8 = _$getNextElement(_tmpl$5);
+            _$effect(_$p => _$setStyleProperty(_el$8, "background-color", item().color));
+            return _el$8;
+          }
+        }), _$createComponent(Show, {
+          get when() {
+            return item().badge !== undefined;
+          },
+          get children() {
+            var _el$9 = _$getNextElement(_tmpl$6);
+            _$insert(_el$9, () => item().badge);
+            return _el$9;
+          }
+        })];
+        return (() => {
+          var _el$0 = _$getNextElement(_tmpl$0),
+            _el$1 = _el$0.firstChild,
+            _el$13 = _el$1.firstChild,
+            [_el$14, _co$2] = _$getNextMarker(_el$13.nextSibling),
+            _el$15 = _el$14.nextSibling,
+            [_el$16, _co$3] = _$getNextMarker(_el$15.nextSibling),
+            _el$17 = _el$16.nextSibling,
+            [_el$18, _co$4] = _$getNextMarker(_el$17.nextSibling),
+            _el$20 = _el$1.nextSibling,
+            [_el$21, _co$5] = _$getNextMarker(_el$20.nextSibling);
+          _$insert(_el$1, _$createComponent(Show, {
+            get when() {
+              return item().href;
+            },
+            get fallback() {
+              return (() => {
+                var _el$22 = _$getNextElement(_tmpl$1),
+                  _el$24 = _el$22.firstChild,
+                  [_el$25, _co$6] = _$getNextMarker(_el$24.nextSibling),
+                  _el$26 = _el$25.nextSibling,
+                  [_el$27, _co$7] = _$getNextMarker(_el$26.nextSibling);
+                _el$22.$$click = () => item().action ? void activate(id) : toggle();
+                _$insert(_el$22, content, _el$25, _co$6);
+                _$insert(_el$22, _$createComponent(Show, {
+                  get when() {
+                    return _$memo(() => !!!item().action)() && item().children?.length;
+                  },
+                  get children() {
+                    var _el$23 = _$getNextElement(_tmpl$2);
+                    _$effect(() => _$className(_el$23, open() ? "ti ti-chevron-down" : "ti ti-chevron-right"));
+                    return _el$23;
+                  }
+                }), _el$27, _co$7);
+                _$effect(_p$ => {
+                  var _v$5 = disabled(),
+                    _v$6 = !item().action ? open() : undefined;
+                  _v$5 !== _p$.e && _$setProperty(_el$22, "disabled", _p$.e = _v$5);
+                  _v$6 !== _p$.t && _$setAttribute(_el$22, "aria-expanded", _p$.t = _v$6);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined
+                });
+                _$runHydrationEvents();
+                return _el$22;
+              })();
+            },
+            children: href => _$createComponent(Link, {
+              "class": "k2b-navigation__control",
+              get href() {
+                return href();
+              },
+              get ["aria-current"]() {
+                return item().active ? "page" : undefined;
+              },
+              get ["aria-disabled"]() {
+                return disabled() || undefined;
+              },
+              get tabIndex() {
+                return disabled() ? -1 : undefined;
+              },
+              get scroll() {
+                return item().scroll;
+              },
+              onNavigate: async event => {
+                if (!(await ready())) return;
+                if (item().navigation === "enhanced" && props.navigation.onNavigate) await props.navigation.onNavigate(event);else event.fallback();
+              },
+              onClick: event => {
+                if (disabled()) {
+                  event.preventDefault();
+                  return;
+                }
+                if (!item().action || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+                // Local opening can fetch before committing navigation, outside a view transition.
+                event.preventDefault();
+                void activate(id);
+              },
+              get children() {
+                return content();
+              }
+            })
+          }), _el$14, _co$2);
+          _$insert(_el$1, _$createComponent(Show, {
+            get when() {
+              return _$memo(() => !!(item().href || item().action))() && item().children?.length;
+            },
+            get children() {
+              var _el$10 = _$getNextElement(_tmpl$7),
+                _el$11 = _el$10.firstChild;
+              _el$10.$$click = toggle;
+              _$effect(_p$ => {
+                var _v$ = item().label,
+                  _v$2 = open(),
+                  _v$3 = disabled(),
+                  _v$4 = open() ? "ti ti-chevron-down" : "ti ti-chevron-right";
+                _v$ !== _p$.e && _$setAttribute(_el$10, "aria-label", _p$.e = _v$);
+                _v$2 !== _p$.t && _$setAttribute(_el$10, "aria-expanded", _p$.t = _v$2);
+                _v$3 !== _p$.a && _$setProperty(_el$10, "disabled", _p$.a = _v$3);
+                _v$4 !== _p$.o && _$className(_el$11, _p$.o = _v$4);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined,
+                a: undefined,
+                o: undefined
+              });
+              _$runHydrationEvents();
+              return _el$10;
+            }
+          }), _el$16, _co$3);
+          _$insert(_el$1, _$createComponent(Show, {
+            get when() {
+              return item().actions?.length;
+            },
+            get children() {
+              return _$createComponent(Dropdown.Root, {
+                get items() {
+                  return (item().actions ?? []).map(action => ({
+                    label: action.label,
+                    icon: action.icon,
+                    disabled: disabled() || action.disabled,
+                    action: () => {
+                      if (action.href) void ready().then(allowed => {
+                        if (allowed) documentNavigate(action.href);
+                      });else void activate(action.id);
+                    }
+                  }));
+                },
+                get children() {
+                  return _$createComponent(Dropdown.Trigger, {
+                    iconOnly: true,
+                    get label() {
+                      return `${item().label}: ${messages().rowAction}`;
+                    },
+                    variant: "ghost",
+                    get children() {
+                      return _$getNextElement(_tmpl$8);
+                    }
+                  });
+                }
+              });
+            }
+          }), _el$18, _co$4);
+          _$insert(_el$0, _$createComponent(Show, {
+            get when() {
+              return item().children?.length;
+            },
+            get children() {
+              var _el$19 = _$getNextElement(_tmpl$9);
+              _$insert(_el$19, _$createComponent(Rows, {
+                get items() {
+                  return item().children ?? [];
+                },
+                get disabled() {
+                  return disabled();
+                }
+              }));
+              _$effect(() => _$setProperty(_el$19, "hidden", !open()));
+              return _el$19;
+            }
+          }), _el$21, _co$5);
+          _$effect(() => _$setAttribute(_el$1, "data-active", item().active || undefined));
+          return _el$0;
+        })();
+      }
+    }));
+    return _el$;
+  })();
+  return (() => {
+    var _el$28 = _$getNextElement(_tmpl$10);
+    _$insert(_el$28, _$createComponent(Rows, {
+      get items() {
+        return props.navigation.items();
+      }
+    }));
+    _$effect(() => _$setAttribute(_el$28, "aria-label", props.label));
+    return _el$28;
+  })();
+}
+_$delegateEvents(["click"]);
+//# sourceMappingURL=Navigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["documentNavigate","Link","createSignal","For","Show","Dropdown","useUiMessages","Navigation","props","messages","expanded","setExpanded","ready","beforeSelect","activate","id","navigation","Rows","rows","_el$","_$getNextElement","_tmpl$","_$insert","_$createComponent","each","items","map","item","children","find","entry","disabled","open","defaultExpanded","toggle","current","content","when","icon","_el$2","_tmpl$2","_$effect","_$className","_el$3","_tmpl$4","_el$4","firstChild","_el$6","nextSibling","_el$7","_co$","_$getNextMarker","label","description","_el$5","_tmpl$3","color","_el$8","_tmpl$5","_$p","_$setStyleProperty","badge","undefined","_el$9","_tmpl$6","_el$0","_tmpl$0","_el$1","_el$13","_el$14","_co$2","_el$15","_el$16","_co$3","_el$17","_el$18","_co$4","_el$20","_el$21","_co$5","href","fallback","_el$22","_tmpl$1","_el$24","_el$25","_co$6","_el$26","_el$27","_co$7","$$click","action","_$memo","length","_el$23","_p$","_v$5","_v$6","e","_$setProperty","t","_$setAttribute","_$runHydrationEvents","aria-current","active","aria-disabled","tabIndex","scroll","onNavigate","event","onClick","preventDefault","button","metaKey","ctrlKey","shiftKey","altKey","_el$10","_tmpl$7","_el$11","_v$","_v$2","_v$3","_v$4","a","o","actions","Root","then","allowed","Trigger","iconOnly","rowAction","variant","_tmpl$8","_el$19","_tmpl$9","_el$28","_tmpl$10","_$delegateEvents"],"sources":["layout/Navigation.tsx"],"sourcesContent":["import { documentNavigate, Link } from \"@k2b/ssr/nav\";\nimport { createSignal, For, Show } from \"solid-js\";\nimport { Dropdown } from \"../actions/Dropdown\";\nimport { useUiMessages } from \"../intl/messages\";\nimport type { NavigationController, NavigationItem } from \"./navigation-model\";\n\nexport type NavigationProps = {\n  navigation: NavigationController;\n  label: string;\n  /** A host can finish dismissing its menu before the selected operation runs. */\n  beforeSelect?: () => boolean | void | Promise<boolean | void>;\n};\n\nexport default function Navigation(props: NavigationProps) {\n  const messages = useUiMessages();\n  const [expanded, setExpanded] = createSignal<Record<string, boolean>>({});\n  const ready = async () => (await props.beforeSelect?.()) !== false;\n  const activate = async (id: string) => {\n    if (await ready()) await props.navigation.activate(id);\n  };\n  const Rows = (rows: { items: readonly NavigationItem[]; disabled?: boolean }) => (\n    <ul class=\"k2b-navigation__list\">\n      <For each={rows.items.map((item) => item.id)}>\n        {(id) => {\n          const item = () => rows.items.find((entry) => entry.id === id)!;\n          const disabled = () => rows.disabled || item().disabled;\n          const open = () => expanded()[id] ?? item().defaultExpanded ?? true;\n          const toggle = () => setExpanded((current) => ({ ...current, [id]: !open() }));\n          const content = () => (\n            <>\n              <Show when={item().icon}>\n                <i class={item().icon} aria-hidden=\"true\" />\n              </Show>\n              <span class=\"k2b-navigation__copy\">\n                <span>{item().label}</span>\n                <Show when={item().description}>\n                  <small>{item().description}</small>\n                </Show>\n              </span>\n              <Show when={item().color}>\n                <span class=\"k2b-navigation__color\" style={{ \"background-color\": item().color }} />\n              </Show>\n              <Show when={item().badge !== undefined}>\n                <span class=\"k2b-navigation__badge\">{item().badge}</span>\n              </Show>\n            </>\n          );\n          return (\n            <li>\n              <div class=\"k2b-navigation__row\" data-active={item().active || undefined}>\n                <Show\n                  when={item().href}\n                  fallback={\n                    <button\n                      type=\"button\"\n                      class=\"k2b-navigation__control\"\n                      disabled={disabled()}\n                      aria-expanded={!item().action ? open() : undefined}\n                      onClick={() => (item().action ? void activate(id) : toggle())}\n                    >\n                      {content()}\n                      <Show when={!item().action && item().children?.length}>\n                        <i class={open() ? \"ti ti-chevron-down\" : \"ti ti-chevron-right\"} aria-hidden=\"true\" />\n                      </Show>\n                    </button>\n                  }\n                >\n                  {(href) => (\n                    <Link\n                      class=\"k2b-navigation__control\"\n                      href={href()}\n                      aria-current={item().active ? \"page\" : undefined}\n                      aria-disabled={disabled() || undefined}\n                      tabIndex={disabled() ? -1 : undefined}\n                      scroll={item().scroll}\n                      onNavigate={async (event) => {\n                        if (!(await ready())) return;\n                        if (item().navigation === \"enhanced\" && props.navigation.onNavigate) await props.navigation.onNavigate(event);\n                        else event.fallback();\n                      }}\n                      onClick={(event) => {\n                        if (disabled()) {\n                          event.preventDefault();\n                          return;\n                        }\n                        if (!item().action || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)\n                          return;\n                        // Local opening can fetch before committing navigation, outside a view transition.\n                        event.preventDefault();\n                        void activate(id);\n                      }}\n                    >\n                      {content()}\n                    </Link>\n                  )}\n                </Show>\n                <Show when={(item().href || item().action) && item().children?.length}>\n                  <button\n                    type=\"button\"\n                    class=\"k2b-navigation__disclosure\"\n                    aria-label={item().label}\n                    aria-expanded={open()}\n                    disabled={disabled()}\n                    onClick={toggle}\n                  >\n                    <i class={open() ? \"ti ti-chevron-down\" : \"ti ti-chevron-right\"} aria-hidden=\"true\" />\n                  </button>\n                </Show>\n                <Show when={item().actions?.length}>\n                  <Dropdown.Root\n                    items={(item().actions ?? []).map((action) => ({\n                      label: action.label,\n                      icon: action.icon,\n                      disabled: disabled() || action.disabled,\n                      action: () => {\n                        if (action.href)\n                          void ready().then((allowed) => {\n                            if (allowed) documentNavigate(action.href!);\n                          });\n                        else void activate(action.id);\n                      },\n                    }))}\n                  >\n                    <Dropdown.Trigger iconOnly label={`${item().label}: ${messages().rowAction}`} variant=\"ghost\">\n                      <i class=\"ti ti-dots\" aria-hidden=\"true\" />\n                    </Dropdown.Trigger>\n                  </Dropdown.Root>\n                </Show>\n              </div>\n              <Show when={item().children?.length}>\n                <div hidden={!open()}>\n                  <Rows items={item().children ?? []} disabled={disabled()} />\n                </div>\n              </Show>\n            </li>\n          );\n        }}\n      </For>\n    </ul>\n  );\n  return (\n    <nav class=\"k2b-navigation\" aria-label={props.label}>\n      <Rows items={props.navigation.items()} />\n    </nav>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/layout/PanelDialog.js

@@ -1,6 +1,7 @@
 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 { use as _$use } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
 import { setProperty as _$setProperty } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
@@ -18,13 +19,20 @@ var _tmpl$ = /*#__PURE__*/_$template(`<p>`),
   _tmpl$5 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
   _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-panel-dialog__body>`),
   _tmpl$7 = /*#__PURE__*/_$template(`<footer class=k2b-panel-dialog__footer>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<section class=k2b-panel-dialog__section><header><!$><!/><div><h3></h3><!$><!/></div><!$><!/></header><div class=k2b-panel-dialog__section-body>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<span class=k2b-panel-dialog__section-icon><i aria-hidden=true>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-panel-dialog>`);
-import { createContext, Show, useContext } from "solid-js";
+  _tmpl$8 = /*#__PURE__*/_$template(`<span class=k2b-panel-dialog__section-subtitle>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<span class=k2b-panel-dialog__section-copy><span class=k2b-panel-dialog__section-title></span><!$><!/>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<i class="ti ti-eye"aria-hidden=true>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<div>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<i class="ti ti-eye-off"aria-hidden=true>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<section class=k2b-panel-dialog__section><!$><!/><header><!$><!/><div><h3></h3><!$><!/></div><!$><!/><!$><!/></header><div class=k2b-panel-dialog__section-body>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<span class=k2b-panel-dialog__section-icon><i aria-hidden=true>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<div class=k2b-panel-dialog>`);
+import { createContext, createEffect, createSignal, createUniqueId, Show, useContext } from "solid-js";
+import { Button } from "../actions/Button";
 import { Tabs } from "../actions/Tabs";
 import { prompts } from "../feedback/prompts";
 import { resolveUiMessages, useUiMessages } from "../intl/messages";
+import { createScrollFade } from "./scroll-fade";
 const PanelDialogSurfaceContext = createContext("contained");
 const usePanelDialogSurface = () => useContext(PanelDialogSurfaceContext);
 const panelDialogBasePanelClass = "k2b-dialog k2b-panel-dialog-frame";
@@ -136,75 +144,215 @@ const PanelDialogHeader = props => {
     return _el$;
   })();
 };
-const PanelDialogBody = props => (() => {
-  var _el$14 = _$getNextElement(_tmpl$6);
-  _$insert(_el$14, () => props.children);
-  _$effect(_p$ => {
-    var _v$5 = props.scrollPreserveKey,
-      _v$6 = usePanelDialogSurface();
-    _v$5 !== _p$.e && _$setAttribute(_el$14, "data-scroll-preserve", _p$.e = _v$5);
-    _v$6 !== _p$.t && _$setAttribute(_el$14, "data-surface", _p$.t = _v$6);
-    return _p$;
-  }, {
-    e: undefined,
-    t: undefined
-  });
-  return _el$14;
-})();
+const PanelDialogBody = props => {
+  let body;
+  createScrollFade(() => body, () => props.scrollFade !== false);
+  return (() => {
+    var _el$14 = _$getNextElement(_tmpl$6);
+    var _ref$ = body;
+    typeof _ref$ === "function" ? _$use(_ref$, _el$14) : body = _el$14;
+    _$insert(_el$14, () => props.children);
+    _$effect(_p$ => {
+      var _v$5 = props.scrollPreserveKey,
+        _v$6 = usePanelDialogSurface(),
+        _v$7 = props.scrollFade !== false ? "both" : undefined;
+      _v$5 !== _p$.e && _$setAttribute(_el$14, "data-scroll-preserve", _p$.e = _v$5);
+      _v$6 !== _p$.t && _$setAttribute(_el$14, "data-surface", _p$.t = _v$6);
+      _v$7 !== _p$.a && _$setAttribute(_el$14, "data-scroll-fade-mode", _p$.a = _v$7);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$14;
+  })();
+};
 const PanelDialogFooter = props => (() => {
   var _el$15 = _$getNextElement(_tmpl$7);
   _$insert(_el$15, () => props.children);
   _$effect(() => _$setAttribute(_el$15, "data-surface", usePanelDialogSurface()));
   return _el$15;
 })();
-const PanelDialogSection = props => (() => {
-  var _el$16 = _$getNextElement(_tmpl$8),
-    _el$17 = _el$16.firstChild,
-    _el$24 = _el$17.firstChild,
-    [_el$25, _co$6] = _$getNextMarker(_el$24.nextSibling),
-    _el$18 = _el$25.nextSibling,
-    _el$19 = _el$18.firstChild,
-    _el$21 = _el$19.nextSibling,
-    [_el$22, _co$5] = _$getNextMarker(_el$21.nextSibling),
-    _el$26 = _el$18.nextSibling,
-    [_el$27, _co$7] = _$getNextMarker(_el$26.nextSibling),
-    _el$28 = _el$17.nextSibling;
-  _$insert(_el$17, _$createComponent(Show, {
-    get when() {
-      return props.icon;
-    },
-    children: icon => (() => {
-      var _el$29 = _$getNextElement(_tmpl$9),
-        _el$30 = _el$29.firstChild;
-      _$effect(() => _$className(_el$30, icon()));
-      return _el$29;
-    })()
-  }), _el$25, _co$6);
-  _$insert(_el$19, () => props.title);
-  _$insert(_el$18, _$createComponent(Show, {
-    get when() {
-      return props.subtitle;
-    },
-    get children() {
-      var _el$20 = _$getNextElement(_tmpl$);
-      _$insert(_el$20, () => props.subtitle);
-      return _el$20;
-    }
-  }), _el$22, _co$5);
-  _$insert(_el$17, _$createComponent(Show, {
-    get when() {
-      return props.actions;
-    },
-    get children() {
-      var _el$23 = _$getNextElement(_tmpl$2);
-      _$insert(_el$23, () => props.actions);
-      return _el$23;
-    }
-  }), _el$27, _co$7);
-  _$insert(_el$28, () => props.children);
-  _$effect(() => _$setAttribute(_el$16, "data-surface", usePanelDialogSurface()));
-  return _el$16;
-})();
+const PanelDialogSection = props => {
+  const id = `k2b-panel-dialog-section-${createUniqueId()}`;
+  const [internalOpen, setInternalOpen] = createSignal(props.defaultOpen ?? false);
+  const open = () => !props.hideable || (props.open ?? internalOpen());
+  let section;
+  let expand;
+  let collapse;
+  const toggle = next => {
+    if (props.disabled) return;
+    if (props.open === undefined) setInternalOpen(next);
+    props.onOpenChange?.(next);
+  };
+  createEffect(() => {
+    if (!props.hideable) return;
+    const expanded = open();
+    queueMicrotask(() => {
+      if (expanded !== open()) return;
+      const active = section?.ownerDocument.activeElement;
+      if (expanded && active === expand) collapse?.focus();
+      if (!expanded && active && active !== expand && section?.contains(active)) expand?.focus();
+    });
+  });
+  return (() => {
+    var _el$16 = _$getNextElement(_tmpl$11),
+      _el$39 = _el$16.firstChild,
+      [_el$40, _co$0] = _$getNextMarker(_el$39.nextSibling),
+      _el$24 = _el$40.nextSibling,
+      _el$32 = _el$24.firstChild,
+      [_el$33, _co$7] = _$getNextMarker(_el$32.nextSibling),
+      _el$25 = _el$33.nextSibling,
+      _el$26 = _el$25.firstChild,
+      _el$28 = _el$26.nextSibling,
+      [_el$29, _co$6] = _$getNextMarker(_el$28.nextSibling),
+      _el$34 = _el$25.nextSibling,
+      [_el$35, _co$8] = _$getNextMarker(_el$34.nextSibling),
+      _el$36 = _el$35.nextSibling,
+      [_el$37, _co$9] = _$getNextMarker(_el$36.nextSibling),
+      _el$38 = _el$24.nextSibling;
+    var _ref$2 = section;
+    typeof _ref$2 === "function" ? _$use(_ref$2, _el$16) : section = _el$16;
+    _$insert(_el$16, _$createComponent(Show, {
+      get when() {
+        return props.hideable;
+      },
+      get children() {
+        var _el$17 = _$getNextElement(_tmpl$1);
+        _$insert(_el$17, _$createComponent(Button, {
+          ref(r$) {
+            var _ref$3 = expand;
+            typeof _ref$3 === "function" ? _ref$3(r$) : expand = r$;
+          },
+          variant: "ghost",
+          "class": "k2b-panel-dialog__section-summary",
+          get disabled() {
+            return props.disabled;
+          },
+          "aria-expanded": false,
+          "aria-controls": `${id}-body`,
+          onClick: () => toggle(true),
+          get children() {
+            return [_$createComponent(Show, {
+              get when() {
+                return props.icon;
+              },
+              children: icon => (() => {
+                var _el$41 = _$getNextElement(_tmpl$5);
+                _$effect(() => _$className(_el$41, icon()));
+                return _el$41;
+              })()
+            }), (() => {
+              var _el$18 = _$getNextElement(_tmpl$9),
+                _el$19 = _el$18.firstChild,
+                _el$21 = _el$19.nextSibling,
+                [_el$22, _co$5] = _$getNextMarker(_el$21.nextSibling);
+              _$setAttribute(_el$19, "id", `${id}-closed`);
+              _$insert(_el$19, () => props.title);
+              _$insert(_el$18, _$createComponent(Show, {
+                get when() {
+                  return props.subtitle;
+                },
+                get children() {
+                  var _el$20 = _$getNextElement(_tmpl$8);
+                  _$insert(_el$20, () => props.subtitle);
+                  return _el$20;
+                }
+              }), _el$22, _co$5);
+              return _el$18;
+            })(), _$getNextElement(_tmpl$0)];
+          }
+        }));
+        _$effect(() => _$setProperty(_el$17, "hidden", open()));
+        return _el$17;
+      }
+    }), _el$40, _co$0);
+    _$insert(_el$24, _$createComponent(Show, {
+      get when() {
+        return props.icon;
+      },
+      children: icon => (() => {
+        var _el$42 = _$getNextElement(_tmpl$12),
+          _el$43 = _el$42.firstChild;
+        _$effect(() => _$className(_el$43, icon()));
+        return _el$42;
+      })()
+    }), _el$33, _co$7);
+    _$setAttribute(_el$26, "id", id);
+    _$insert(_el$26, () => props.title);
+    _$insert(_el$25, _$createComponent(Show, {
+      get when() {
+        return props.subtitle;
+      },
+      get children() {
+        var _el$27 = _$getNextElement(_tmpl$);
+        _$insert(_el$27, () => props.subtitle);
+        return _el$27;
+      }
+    }), _el$29, _co$6);
+    _$insert(_el$24, _$createComponent(Show, {
+      get when() {
+        return props.actions;
+      },
+      get children() {
+        var _el$30 = _$getNextElement(_tmpl$2);
+        _$insert(_el$30, () => props.actions);
+        return _el$30;
+      }
+    }), _el$35, _co$8);
+    _$insert(_el$24, _$createComponent(Show, {
+      get when() {
+        return props.hideable;
+      },
+      get children() {
+        return _$createComponent(Button, {
+          ref(r$) {
+            var _ref$4 = collapse;
+            typeof _ref$4 === "function" ? _ref$4(r$) : collapse = r$;
+          },
+          variant: "ghost",
+          size: "sm",
+          get disabled() {
+            return props.disabled;
+          },
+          "aria-labelledby": id,
+          "aria-expanded": true,
+          "aria-controls": `${id}-body`,
+          onClick: () => toggle(false),
+          get children() {
+            return _$getNextElement(_tmpl$10);
+          }
+        });
+      }
+    }), _el$37, _co$9);
+    _$setAttribute(_el$38, "id", `${id}-body`);
+    _$insert(_el$38, () => props.children);
+    _$effect(_p$ => {
+      var _v$8 = usePanelDialogSurface(),
+        _v$9 = props.hideable || undefined,
+        _v$0 = props.hideable ? open() : undefined,
+        _v$1 = open() ? id : `${id}-closed`,
+        _v$10 = !open(),
+        _v$11 = !open();
+      _v$8 !== _p$.e && _$setAttribute(_el$16, "data-surface", _p$.e = _v$8);
+      _v$9 !== _p$.t && _$setAttribute(_el$16, "data-hideable", _p$.t = _v$9);
+      _v$0 !== _p$.a && _$setAttribute(_el$16, "data-open", _p$.a = _v$0);
+      _v$1 !== _p$.o && _$setAttribute(_el$16, "aria-labelledby", _p$.o = _v$1);
+      _v$10 !== _p$.i && _$setProperty(_el$24, "hidden", _p$.i = _v$10);
+      _v$11 !== _p$.n && _$setProperty(_el$38, "hidden", _p$.n = _v$11);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined
+    });
+    return _el$16;
+  })();
+};
 const PanelDialogTabs = props => {
   const messages = useUiMessages();
   return _$createComponent(Tabs, {
@@ -228,10 +376,10 @@ const PanelDialog = props => {
   return _$createComponent(PanelDialogSurfaceContext.Provider, {
     value: surface,
     get children() {
-      var _el$31 = _$getNextElement(_tmpl$0);
-      _$setAttribute(_el$31, "data-surface", surface);
-      _$insert(_el$31, () => props.children);
-      return _el$31;
+      var _el$44 = _$getNextElement(_tmpl$13);
+      _$setAttribute(_el$44, "data-surface", surface);
+      _$insert(_el$44, () => props.children);
+      return _el$44;
     }
   });
 };