@k2b/ui 0.1.1 → 0.3.0

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";
@@ -123,79 +131,228 @@ const PanelDialogHeader = props => {
         return _el$8;
       }
     }), _el$12, _co$4);
-    _$effect(() => _$setAttribute(_el$, "data-surface", usePanelDialogSurface()));
+    _$effect(_p$ => {
+      var _v$3 = usePanelDialogSurface(),
+        _v$4 = Boolean(props.subtitle);
+      _v$3 !== _p$.e && _$setAttribute(_el$, "data-surface", _p$.e = _v$3);
+      _v$4 !== _p$.t && _$setAttribute(_el$, "data-has-subtitle", _p$.t = _v$4);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     return _el$;
   })();
 };
-const PanelDialogBody = props => (() => {
-  var _el$14 = _$getNextElement(_tmpl$6);
-  _$insert(_el$14, () => props.children);
-  _$effect(_p$ => {
-    var _v$3 = props.scrollPreserveKey,
-      _v$4 = usePanelDialogSurface();
-    _v$3 !== _p$.e && _$setAttribute(_el$14, "data-scroll-preserve", _p$.e = _v$3);
-    _v$4 !== _p$.t && _$setAttribute(_el$14, "data-surface", _p$.t = _v$4);
-    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, {
@@ -219,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;
     }
   });
 };

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

@@ -1 +1 @@
-{"version":3,"names":["createContext","Show","useContext","Tabs","prompts","resolveUiMessages","useUiMessages","PanelDialogSurfaceContext","usePanelDialogSurface","panelDialogBasePanelClass","panelDialogPanelClass","panelDialogOptions","panelClassName","contentClassName","panelDialogWidePanelClass","panelDialogWideOptions","panelDialogFixedPanelClass","panelDialogFixedOptions","panelDialogWorkspacePanelClass","panelDialogWorkspaceOptions","confirmDiscardIfDirty","dirty","hasChanges","Boolean","confirm","discardUnsavedChanges","title","unsavedChangesTitle","variant","confirmText","discard","PanelDialogHeader","props","messages","_el$","_$getNextElement","_tmpl$4","_el$9","firstChild","_el$0","_co$2","_$getNextMarker","nextSibling","_el$2","_el$3","_el$5","_el$6","_co$","_el$1","_el$10","_co$3","_el$11","_el$12","_co$4","_$insert","_$createComponent","when","icon","children","_el$13","_tmpl$5","_$effect","_$className","subtitle","_el$4","_tmpl$","actions","_el$7","_tmpl$2","close","_el$8","_tmpl$3","_$addEventListener","_p$","_v$","closeLabel","closeDialog","_v$2","closeDisabled","e","_$setAttribute","t","_$setProperty","undefined","_$runHydrationEvents","PanelDialogBody","_el$14","_tmpl$6","_v$3","scrollPreserveKey","_v$4","PanelDialogFooter","_el$15","_tmpl$7","PanelDialogSection","_el$16","_tmpl$8","_el$17","_el$24","_el$25","_co$6","_el$18","_el$19","_el$21","_el$22","_co$5","_el$26","_el$27","_co$7","_el$28","_el$29","_tmpl$9","_el$30","_el$20","_el$23","PanelDialogTabs","value","onValueChange","ariaLabel","label","dialogTabs","options","PanelDialog","surface","Provider","_el$31","_tmpl$0","Header","Body","Footer","Section","_$delegateEvents"],"sources":["layout/PanelDialog.tsx"],"sourcesContent":["import { createContext, type JSX, Show, useContext } from \"solid-js\";\nimport { Tabs } from \"../actions/Tabs\";\nimport type { OpenDialogOptions } from \"../feedback/dialog-core\";\nimport { prompts } from \"../feedback/prompts\";\nimport { resolveUiMessages, useUiMessages } from \"../intl/messages\";\n\nexport type PanelDialogSurface = \"contained\" | \"floating\";\n\nexport type PanelDialogProps = {\n  children: JSX.Element;\n  surface?: PanelDialogSurface;\n};\n\nexport type PanelDialogHeaderProps = {\n  title: JSX.Element;\n  subtitle?: JSX.Element;\n  icon?: string;\n  actions?: JSX.Element;\n  close?: () => void;\n  closeDisabled?: boolean;\n  closeLabel?: string;\n};\n\nexport type PanelDialogBodyProps = {\n  children: JSX.Element;\n  scrollPreserveKey?: string;\n};\n\nexport type PanelDialogFooterProps = {\n  children: JSX.Element;\n};\n\nexport type PanelDialogSectionProps = {\n  title: JSX.Element;\n  subtitle?: JSX.Element;\n  icon?: string;\n  actions?: JSX.Element;\n  children: JSX.Element;\n};\n\nexport type PanelDialogTabOption<T extends string = string> = {\n  value: T;\n  label: JSX.Element;\n  icon?: string;\n  disabled?: boolean;\n};\n\nexport type PanelDialogTabsProps<T extends string = string> = {\n  options: readonly PanelDialogTabOption<T>[];\n  value: T | (() => T);\n  onValueChange: (value: T) => void;\n  ariaLabel?: string;\n  label?: string;\n};\n\ntype PanelDialogComponent = ((props: PanelDialogProps) => JSX.Element) & {\n  Header: (props: PanelDialogHeaderProps) => JSX.Element;\n  Body: (props: PanelDialogBodyProps) => JSX.Element;\n  Footer: (props: PanelDialogFooterProps) => JSX.Element;\n  Section: (props: PanelDialogSectionProps) => JSX.Element;\n  Tabs: <T extends string>(props: PanelDialogTabsProps<T>) => JSX.Element;\n};\n\nconst PanelDialogSurfaceContext = createContext<PanelDialogSurface>(\"contained\");\nconst usePanelDialogSurface = () => useContext(PanelDialogSurfaceContext);\n\nconst panelDialogBasePanelClass = \"k2b-dialog k2b-panel-dialog-frame\";\n\nexport const panelDialogPanelClass = `${panelDialogBasePanelClass} is-standard`;\nexport const panelDialogOptions = {\n  panelClassName: panelDialogPanelClass,\n  contentClassName: \"k2b-panel-dialog-viewport\",\n} satisfies OpenDialogOptions;\n\nexport const panelDialogWidePanelClass = `${panelDialogBasePanelClass} is-wide`;\nexport const panelDialogWideOptions = {\n  panelClassName: panelDialogWidePanelClass,\n  contentClassName: \"k2b-panel-dialog-viewport\",\n} satisfies OpenDialogOptions;\n\nexport const panelDialogFixedPanelClass = `${panelDialogBasePanelClass} is-fixed`;\nexport const panelDialogFixedOptions = {\n  panelClassName: panelDialogFixedPanelClass,\n  contentClassName: \"k2b-panel-dialog-viewport is-fixed\",\n} satisfies OpenDialogOptions;\n\nexport const panelDialogWorkspacePanelClass = `${panelDialogBasePanelClass} is-workspace`;\nexport const panelDialogWorkspaceOptions = {\n  panelClassName: panelDialogWorkspacePanelClass,\n  contentClassName: \"k2b-panel-dialog-viewport is-workspace\",\n} satisfies OpenDialogOptions;\n\nexport const confirmDiscardIfDirty = async (dirty: boolean | (() => boolean)): Promise<boolean> => {\n  const hasChanges = typeof dirty === \"function\" ? dirty() : dirty;\n  if (!hasChanges) return true;\n  return Boolean(\n    await prompts.confirm(resolveUiMessages().discardUnsavedChanges, {\n      title: resolveUiMessages().unsavedChangesTitle,\n      variant: \"danger\",\n      confirmText: resolveUiMessages().discard,\n    }),\n  );\n};\n\nconst PanelDialogHeader = (props: PanelDialogHeaderProps): JSX.Element => {\n  const messages = useUiMessages();\n  return (\n    <header class=\"k2b-panel-dialog__header\" data-surface={usePanelDialogSurface()}>\n      <Show when={props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n      <div class=\"k2b-panel-dialog__heading\">\n        <h2>{props.title}</h2>\n        <Show when={props.subtitle}>\n          <p>{props.subtitle}</p>\n        </Show>\n      </div>\n      <Show when={props.actions}>\n        <div class=\"k2b-panel-dialog__actions\">{props.actions}</div>\n      </Show>\n      <Show when={props.close}>\n        <button\n          type=\"button\"\n          class=\"k2b-dialog__close\"\n          aria-label={props.closeLabel ?? messages().closeDialog}\n          disabled={props.closeDisabled}\n          onClick={props.close}\n        >\n          <i class=\"ti ti-x\" aria-hidden=\"true\" />\n        </button>\n      </Show>\n    </header>\n  );\n};\n\nconst PanelDialogBody = (props: PanelDialogBodyProps): JSX.Element => (\n  <div class=\"k2b-panel-dialog__body\" data-scroll-preserve={props.scrollPreserveKey} data-surface={usePanelDialogSurface()}>\n    {props.children}\n  </div>\n);\n\nconst PanelDialogFooter = (props: PanelDialogFooterProps): JSX.Element => (\n  <footer class=\"k2b-panel-dialog__footer\" data-surface={usePanelDialogSurface()}>\n    {props.children}\n  </footer>\n);\n\nconst PanelDialogSection = (props: PanelDialogSectionProps): JSX.Element => (\n  <section class=\"k2b-panel-dialog__section\" data-surface={usePanelDialogSurface()}>\n    <header>\n      <Show when={props.icon}>\n        {(icon) => (\n          <span class=\"k2b-panel-dialog__section-icon\">\n            <i class={icon()} aria-hidden=\"true\" />\n          </span>\n        )}\n      </Show>\n      <div>\n        <h3>{props.title}</h3>\n        <Show when={props.subtitle}>\n          <p>{props.subtitle}</p>\n        </Show>\n      </div>\n      <Show when={props.actions}>\n        <div class=\"k2b-panel-dialog__actions\">{props.actions}</div>\n      </Show>\n    </header>\n    <div class=\"k2b-panel-dialog__section-body\">{props.children}</div>\n  </section>\n);\n\nconst PanelDialogTabs = <T extends string>(props: PanelDialogTabsProps<T>): JSX.Element => {\n  const messages = useUiMessages();\n  return (\n    <Tabs\n      class=\"k2b-panel-dialog__tabs\"\n      value={props.value}\n      onValueChange={props.onValueChange}\n      ariaLabel={props.ariaLabel ?? props.label ?? messages().dialogTabs}\n      options={props.options}\n    />\n  );\n};\n\nconst PanelDialog = ((props: PanelDialogProps): JSX.Element => {\n  const surface = props.surface ?? \"contained\";\n  return (\n    <PanelDialogSurfaceContext.Provider value={surface}>\n      <div class=\"k2b-panel-dialog\" data-surface={surface}>\n        {props.children}\n      </div>\n    </PanelDialogSurfaceContext.Provider>\n  );\n}) as PanelDialogComponent;\n\nPanelDialog.Header = PanelDialogHeader;\nPanelDialog.Body = PanelDialogBody;\nPanelDialog.Footer = PanelDialogFooter;\nPanelDialog.Section = PanelDialogSection;\nPanelDialog.Tabs = PanelDialogTabs;\n\nexport default PanelDialog;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["createContext","createEffect","createSignal","createUniqueId","Show","useContext","Button","Tabs","prompts","resolveUiMessages","useUiMessages","createScrollFade","PanelDialogSurfaceContext","usePanelDialogSurface","panelDialogBasePanelClass","panelDialogPanelClass","panelDialogOptions","panelClassName","contentClassName","panelDialogWidePanelClass","panelDialogWideOptions","panelDialogFixedPanelClass","panelDialogFixedOptions","panelDialogWorkspacePanelClass","panelDialogWorkspaceOptions","confirmDiscardIfDirty","dirty","hasChanges","Boolean","confirm","discardUnsavedChanges","title","unsavedChangesTitle","variant","confirmText","discard","PanelDialogHeader","props","messages","_el$","_$getNextElement","_tmpl$4","_el$9","firstChild","_el$0","_co$2","_$getNextMarker","nextSibling","_el$2","_el$3","_el$5","_el$6","_co$","_el$1","_el$10","_co$3","_el$11","_el$12","_co$4","_$insert","_$createComponent","when","icon","children","_el$13","_tmpl$5","_$effect","_$className","subtitle","_el$4","_tmpl$","actions","_el$7","_tmpl$2","close","_el$8","_tmpl$3","_$addEventListener","_p$","_v$","closeLabel","closeDialog","_v$2","closeDisabled","e","_$setAttribute","t","_$setProperty","undefined","_$runHydrationEvents","_v$3","_v$4","PanelDialogBody","body","scrollFade","_el$14","_tmpl$6","_ref$","_$use","_v$5","scrollPreserveKey","_v$6","_v$7","a","PanelDialogFooter","_el$15","_tmpl$7","PanelDialogSection","id","internalOpen","setInternalOpen","defaultOpen","open","hideable","section","expand","collapse","toggle","next","disabled","onOpenChange","expanded","queueMicrotask","active","ownerDocument","activeElement","focus","contains","_el$16","_tmpl$11","_el$39","_el$40","_co$0","_el$24","_el$32","_el$33","_co$7","_el$25","_el$26","_el$28","_el$29","_co$6","_el$34","_el$35","_co$8","_el$36","_el$37","_co$9","_el$38","_ref$2","_el$17","_tmpl$1","ref","r$","_ref$3","onClick","_el$41","_el$18","_tmpl$9","_el$19","_el$21","_el$22","_co$5","_el$20","_tmpl$8","_tmpl$0","_el$42","_tmpl$12","_el$43","_el$27","_el$30","_ref$4","size","_tmpl$10","_v$8","_v$9","_v$0","_v$1","_v$10","_v$11","o","i","n","PanelDialogTabs","value","onValueChange","ariaLabel","label","dialogTabs","options","PanelDialog","surface","Provider","_el$44","_tmpl$13","Header","Body","Footer","Section","_$delegateEvents"],"sources":["layout/PanelDialog.tsx"],"sourcesContent":["import { createContext, createEffect, createSignal, createUniqueId, type JSX, Show, useContext } from \"solid-js\";\nimport { Button } from \"../actions/Button\";\nimport { Tabs } from \"../actions/Tabs\";\nimport type { OpenDialogOptions } from \"../feedback/dialog-core\";\nimport { prompts } from \"../feedback/prompts\";\nimport { resolveUiMessages, useUiMessages } from \"../intl/messages\";\nimport { createScrollFade } from \"./scroll-fade\";\n\nexport type PanelDialogSurface = \"contained\" | \"floating\";\n\nexport type PanelDialogProps = {\n  children: JSX.Element;\n  surface?: PanelDialogSurface;\n};\n\nexport type PanelDialogHeaderProps = {\n  title: JSX.Element;\n  subtitle?: JSX.Element;\n  icon?: string;\n  actions?: JSX.Element;\n  close?: () => void;\n  closeDisabled?: boolean;\n  closeLabel?: string;\n};\n\nexport type PanelDialogBodyProps = {\n  children: JSX.Element;\n  scrollPreserveKey?: string;\n  scrollFade?: boolean;\n};\n\nexport type PanelDialogFooterProps = {\n  children: JSX.Element;\n};\n\nexport type PanelDialogSectionProps = {\n  title: JSX.Element;\n  subtitle?: JSX.Element;\n  icon?: string;\n  actions?: JSX.Element;\n  children: JSX.Element;\n} & (\n  | { hideable?: false; open?: never; defaultOpen?: never; onOpenChange?: never; disabled?: never }\n  | { hideable: true; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; disabled?: boolean }\n);\n\nexport type PanelDialogTabOption<T extends string = string> = {\n  value: T;\n  label: JSX.Element;\n  icon?: string;\n  disabled?: boolean;\n};\n\nexport type PanelDialogTabsProps<T extends string = string> = {\n  options: readonly PanelDialogTabOption<T>[];\n  value: T | (() => T);\n  onValueChange: (value: T) => void;\n  ariaLabel?: string;\n  label?: string;\n};\n\ntype PanelDialogComponent = ((props: PanelDialogProps) => JSX.Element) & {\n  Header: (props: PanelDialogHeaderProps) => JSX.Element;\n  Body: (props: PanelDialogBodyProps) => JSX.Element;\n  Footer: (props: PanelDialogFooterProps) => JSX.Element;\n  Section: (props: PanelDialogSectionProps) => JSX.Element;\n  Tabs: <T extends string>(props: PanelDialogTabsProps<T>) => JSX.Element;\n};\n\nconst PanelDialogSurfaceContext = createContext<PanelDialogSurface>(\"contained\");\nconst usePanelDialogSurface = () => useContext(PanelDialogSurfaceContext);\n\nconst panelDialogBasePanelClass = \"k2b-dialog k2b-panel-dialog-frame\";\n\nexport const panelDialogPanelClass = `${panelDialogBasePanelClass} is-standard`;\nexport const panelDialogOptions = {\n  panelClassName: panelDialogPanelClass,\n  contentClassName: \"k2b-panel-dialog-viewport\",\n} satisfies OpenDialogOptions;\n\nexport const panelDialogWidePanelClass = `${panelDialogBasePanelClass} is-wide`;\nexport const panelDialogWideOptions = {\n  panelClassName: panelDialogWidePanelClass,\n  contentClassName: \"k2b-panel-dialog-viewport\",\n} satisfies OpenDialogOptions;\n\nexport const panelDialogFixedPanelClass = `${panelDialogBasePanelClass} is-fixed`;\nexport const panelDialogFixedOptions = {\n  panelClassName: panelDialogFixedPanelClass,\n  contentClassName: \"k2b-panel-dialog-viewport is-fixed\",\n} satisfies OpenDialogOptions;\n\nexport const panelDialogWorkspacePanelClass = `${panelDialogBasePanelClass} is-workspace`;\nexport const panelDialogWorkspaceOptions = {\n  panelClassName: panelDialogWorkspacePanelClass,\n  contentClassName: \"k2b-panel-dialog-viewport is-workspace\",\n} satisfies OpenDialogOptions;\n\nexport const confirmDiscardIfDirty = async (dirty: boolean | (() => boolean)): Promise<boolean> => {\n  const hasChanges = typeof dirty === \"function\" ? dirty() : dirty;\n  if (!hasChanges) return true;\n  return Boolean(\n    await prompts.confirm(resolveUiMessages().discardUnsavedChanges, {\n      title: resolveUiMessages().unsavedChangesTitle,\n      variant: \"danger\",\n      confirmText: resolveUiMessages().discard,\n    }),\n  );\n};\n\nconst PanelDialogHeader = (props: PanelDialogHeaderProps): JSX.Element => {\n  const messages = useUiMessages();\n  return (\n    <header class=\"k2b-panel-dialog__header\" data-surface={usePanelDialogSurface()} data-has-subtitle={Boolean(props.subtitle)}>\n      <Show when={props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n      <div class=\"k2b-panel-dialog__heading\">\n        <h2>{props.title}</h2>\n        <Show when={props.subtitle}>\n          <p>{props.subtitle}</p>\n        </Show>\n      </div>\n      <Show when={props.actions}>\n        <div class=\"k2b-panel-dialog__actions\">{props.actions}</div>\n      </Show>\n      <Show when={props.close}>\n        <button\n          type=\"button\"\n          class=\"k2b-dialog__close\"\n          aria-label={props.closeLabel ?? messages().closeDialog}\n          disabled={props.closeDisabled}\n          onClick={props.close}\n        >\n          <i class=\"ti ti-x\" aria-hidden=\"true\" />\n        </button>\n      </Show>\n    </header>\n  );\n};\n\nconst PanelDialogBody = (props: PanelDialogBodyProps): JSX.Element => {\n  let body: HTMLDivElement | undefined;\n  createScrollFade(\n    () => body,\n    () => props.scrollFade !== false,\n  );\n  return (\n    <div\n      ref={body}\n      class=\"k2b-panel-dialog__body\"\n      data-scroll-preserve={props.scrollPreserveKey}\n      data-surface={usePanelDialogSurface()}\n      data-scroll-fade-mode={props.scrollFade !== false ? \"both\" : undefined}\n    >\n      {props.children}\n    </div>\n  );\n};\n\nconst PanelDialogFooter = (props: PanelDialogFooterProps): JSX.Element => (\n  <footer class=\"k2b-panel-dialog__footer\" data-surface={usePanelDialogSurface()}>\n    {props.children}\n  </footer>\n);\n\nconst PanelDialogSection = (props: PanelDialogSectionProps): JSX.Element => {\n  const id = `k2b-panel-dialog-section-${createUniqueId()}`;\n  const [internalOpen, setInternalOpen] = createSignal(props.defaultOpen ?? false);\n  const open = () => !props.hideable || (props.open ?? internalOpen());\n  let section: HTMLElement | undefined;\n  let expand: HTMLButtonElement | undefined;\n  let collapse: HTMLButtonElement | undefined;\n  const toggle = (next: boolean) => {\n    if (props.disabled) return;\n    if (props.open === undefined) setInternalOpen(next);\n    props.onOpenChange?.(next);\n  };\n  createEffect(() => {\n    if (!props.hideable) return;\n    const expanded = open();\n    queueMicrotask(() => {\n      if (expanded !== open()) return;\n      const active = section?.ownerDocument.activeElement;\n      if (expanded && active === expand) collapse?.focus();\n      if (!expanded && active && active !== expand && section?.contains(active)) expand?.focus();\n    });\n  });\n\n  return (\n    <section\n      ref={section}\n      class=\"k2b-panel-dialog__section\"\n      data-surface={usePanelDialogSurface()}\n      data-hideable={props.hideable || undefined}\n      data-open={props.hideable ? open() : undefined}\n      aria-labelledby={open() ? id : `${id}-closed`}\n    >\n      <Show when={props.hideable}>\n        <div hidden={open()}>\n          <Button\n            ref={expand}\n            variant=\"ghost\"\n            class=\"k2b-panel-dialog__section-summary\"\n            disabled={props.disabled}\n            aria-expanded={false}\n            aria-controls={`${id}-body`}\n            onClick={() => toggle(true)}\n          >\n            <Show when={props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n            <span class=\"k2b-panel-dialog__section-copy\">\n              <span id={`${id}-closed`} class=\"k2b-panel-dialog__section-title\">\n                {props.title}\n              </span>\n              <Show when={props.subtitle}>\n                <span class=\"k2b-panel-dialog__section-subtitle\">{props.subtitle}</span>\n              </Show>\n            </span>\n            <i class=\"ti ti-eye\" aria-hidden=\"true\" />\n          </Button>\n        </div>\n      </Show>\n      <header hidden={!open()}>\n        <Show when={props.icon}>\n          {(icon) => (\n            <span class=\"k2b-panel-dialog__section-icon\">\n              <i class={icon()} aria-hidden=\"true\" />\n            </span>\n          )}\n        </Show>\n        <div>\n          <h3 id={id}>{props.title}</h3>\n          <Show when={props.subtitle}>\n            <p>{props.subtitle}</p>\n          </Show>\n        </div>\n        <Show when={props.actions}>\n          <div class=\"k2b-panel-dialog__actions\">{props.actions}</div>\n        </Show>\n        <Show when={props.hideable}>\n          <Button\n            ref={collapse}\n            variant=\"ghost\"\n            size=\"sm\"\n            disabled={props.disabled}\n            aria-labelledby={id}\n            aria-expanded={true}\n            aria-controls={`${id}-body`}\n            onClick={() => toggle(false)}\n          >\n            <i class=\"ti ti-eye-off\" aria-hidden=\"true\" />\n          </Button>\n        </Show>\n      </header>\n      <div id={`${id}-body`} class=\"k2b-panel-dialog__section-body\" hidden={!open()}>\n        {props.children}\n      </div>\n    </section>\n  );\n};\n\nconst PanelDialogTabs = <T extends string>(props: PanelDialogTabsProps<T>): JSX.Element => {\n  const messages = useUiMessages();\n  return (\n    <Tabs\n      class=\"k2b-panel-dialog__tabs\"\n      value={props.value}\n      onValueChange={props.onValueChange}\n      ariaLabel={props.ariaLabel ?? props.label ?? messages().dialogTabs}\n      options={props.options}\n    />\n  );\n};\n\nconst PanelDialog = ((props: PanelDialogProps): JSX.Element => {\n  const surface = props.surface ?? \"contained\";\n  return (\n    <PanelDialogSurfaceContext.Provider value={surface}>\n      <div class=\"k2b-panel-dialog\" data-surface={surface}>\n        {props.children}\n      </div>\n    </PanelDialogSurfaceContext.Provider>\n  );\n}) as PanelDialogComponent;\n\nPanelDialog.Header = PanelDialogHeader;\nPanelDialog.Body = PanelDialogBody;\nPanelDialog.Footer = PanelDialogFooter;\nPanelDialog.Section = PanelDialogSection;\nPanelDialog.Tabs = PanelDialogTabs;\n\nexport default PanelDialog;\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/layout/ScrollArea.js

@@ -2,17 +2,37 @@ import { template as _$template } from "solid-js/web";
 import { getNextElement as _$getNextElement } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
 import { spread as _$spread } from "solid-js/web";
 import { mergeProps as _$mergeProps } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<div>`);
 import { splitProps } from "solid-js";
+import { createScrollFade } from "./scroll-fade";
 export function ScrollArea(props) {
-  const [local, elementProps] = splitProps(props, ["children", "scrollPreserveKey", "class"]);
+  const [local, elementProps] = splitProps(props, ["children", "scrollPreserveKey", "class", "scrollFade", "orientation", "viewportSize", "ref"]);
+  let body;
+  createScrollFade(() => body, () => local.scrollFade !== false);
   const className = () => local.class?.trim();
   return (() => {
     var _el$ = _$getNextElement(_tmpl$);
+    _$use(el => {
+      body = el;
+      if (typeof local.ref === "function") local.ref(el);
+    }, _el$);
     _$spread(_el$, _$mergeProps(elementProps, {
+      get ["data-scroll-fade-axis"]() {
+        return local.orientation ?? "vertical";
+      },
+      get ["data-viewport-size"]() {
+        return local.viewportSize;
+      },
+      get ["data-orientation"]() {
+        return local.orientation ?? "vertical";
+      },
+      get ["data-scroll-fade-mode"]() {
+        return local.scrollFade !== false ? "both" : undefined;
+      },
       get ["class"]() {
         return _$memo(() => !!className())() ? `k2b-scroll-area ${className()}` : "k2b-scroll-area";
       },

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

@@ -1 +1 @@
-{"version":3,"names":["splitProps","ScrollArea","props","local","elementProps","className","class","trim","_el$","_$getNextElement","_tmpl$","_$spread","_$mergeProps","_$memo","data-scroll-preserve","scrollPreserveKey","undefined","_$insert","children","_$runHydrationEvents"],"sources":["layout/ScrollArea.tsx"],"sourcesContent":["import { type JSX, splitProps } from \"solid-js\";\n\nexport type ScrollAreaProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, \"children\" | \"class\"> & {\n  children: JSX.Element;\n  scrollPreserveKey?: string | false;\n  class?: string;\n};\n\nexport function ScrollArea(props: ScrollAreaProps): JSX.Element {\n  const [local, elementProps] = splitProps(props, [\"children\", \"scrollPreserveKey\", \"class\"]);\n  const className = () => local.class?.trim();\n\n  return (\n    <div\n      {...elementProps}\n      class={className() ? `k2b-scroll-area ${className()}` : \"k2b-scroll-area\"}\n      data-scroll-preserve={local.scrollPreserveKey || undefined}\n    >\n      {local.children}\n    </div>\n  );\n}\n\nexport default ScrollArea;\n"],"mappings":";;;;;;;;AAAA,SAAmBA,UAAU,QAAQ,UAAU;AAQ/C,OAAO,SAASC,UAAUA,CAACC,KAAsB,EAAe;EAC9D,MAAM,CAACC,KAAK,EAAEC,YAAY,CAAC,GAAGJ,UAAU,CAACE,KAAK,EAAE,CAAC,UAAU,EAAE,mBAAmB,EAAE,OAAO,CAAC,CAAC;EAC3F,MAAMG,SAAS,GAAGA,CAAA,KAAMF,KAAK,CAACG,KAAK,EAAEC,IAAI,CAAC,CAAC;EAE3C;IAAA,IAAAC,IAAA,GAAAC,gBAAA,CAAAC,MAAA;IAAAC,QAAA,CAAAH,IAAA,EAAAI,YAAA,CAEQR,YAAY;MAAA,aAAAE,CAAA;QAAA,OACTO,MAAA,SAAAR,SAAS,CAAC,CAAC,MAAG,mBAAmBA,SAAS,CAAC,CAAC,EAAE,GAAG,iBAAiB;MAAA;MAAA,4BAAAS,CAAA;QAAA,OACnDX,KAAK,CAACY,iBAAiB,IAAIC,SAAS;MAAA;IAAA;IAAAC,QAAA,CAAAT,IAAA,QAEzDL,KAAK,CAACe,QAAQ;IAAAC,oBAAA;IAAA,OAAAX,IAAA;EAAA;AAGrB;AAEA,eAAeP,UAAU","ignoreList":[]}
+{"version":3,"names":["splitProps","createScrollFade","ScrollArea","props","local","elementProps","body","scrollFade","className","class","trim","_el$","_$getNextElement","_tmpl$","_$use","el","ref","_$spread","_$mergeProps","data-scroll-fade-axis","orientation","data-viewport-size","viewportSize","data-orientation","data-scroll-fade-mode","undefined","_$memo","data-scroll-preserve","scrollPreserveKey","_$insert","children","_$runHydrationEvents"],"sources":["layout/ScrollArea.tsx"],"sourcesContent":["import { type JSX, splitProps } from \"solid-js\";\nimport { createScrollFade } from \"./scroll-fade\";\n\nexport type ScrollAreaProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, \"children\" | \"class\"> & {\n  children: JSX.Element;\n  scrollFade?: boolean;\n  /** Stable compact catalog height, clamped to 60% of the dynamic viewport. */\n  viewportSize?: \"compact\";\n  orientation?: \"vertical\" | \"horizontal\";\n  scrollPreserveKey?: string | false;\n  class?: string;\n};\n\nexport function ScrollArea(props: ScrollAreaProps): JSX.Element {\n  const [local, elementProps] = splitProps(props, [\"children\", \"scrollPreserveKey\", \"class\", \"scrollFade\", \"orientation\", \"viewportSize\", \"ref\"]);\n  let body!: HTMLDivElement;\n  createScrollFade(\n    () => body,\n    () => local.scrollFade !== false,\n  );\n  const className = () => local.class?.trim();\n\n  return (\n    <div\n      {...elementProps}\n      ref={(el) => {\n        body = el;\n        if (typeof local.ref === \"function\") local.ref(el);\n      }}\n      data-scroll-fade-axis={local.orientation ?? \"vertical\"}\n      data-viewport-size={local.viewportSize}\n      data-orientation={local.orientation ?? \"vertical\"}\n      data-scroll-fade-mode={local.scrollFade !== false ? \"both\" : undefined}\n      class={className() ? `k2b-scroll-area ${className()}` : \"k2b-scroll-area\"}\n      data-scroll-preserve={local.scrollPreserveKey || undefined}\n    >\n      {local.children}\n    </div>\n  );\n}\n\nexport default ScrollArea;\n"],"mappings":";;;;;;;;;AAAA,SAAmBA,UAAU,QAAQ,UAAU;AAC/C,SAASC,gBAAgB,QAAQ,eAAe;AAYhD,OAAO,SAASC,UAAUA,CAACC,KAAsB,EAAe;EAC9D,MAAM,CAACC,KAAK,EAAEC,YAAY,CAAC,GAAGL,UAAU,CAACG,KAAK,EAAE,CAAC,UAAU,EAAE,mBAAmB,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC;EAC/I,IAAIG,IAAqB;EACzBL,gBAAgB,CACd,MAAMK,IAAI,EACV,MAAMF,KAAK,CAACG,UAAU,KAAK,KAC7B,CAAC;EACD,MAAMC,SAAS,GAAGA,CAAA,KAAMJ,KAAK,CAACK,KAAK,EAAEC,IAAI,CAAC,CAAC;EAE3C;IAAA,IAAAC,IAAA,GAAAC,gBAAA,CAAAC,MAAA;IAAAC,KAAA,CAGUC,EAAE,IAAK;MACXT,IAAI,GAAGS,EAAE;MACT,IAAI,OAAOX,KAAK,CAACY,GAAG,KAAK,UAAU,EAAEZ,KAAK,CAACY,GAAG,CAACD,EAAE,CAAC;IACpD,CAAC,EAAAJ,IAAA;IAAAM,QAAA,CAAAN,IAAA,EAAAO,YAAA,CAJGb,YAAY;MAAA,6BAAAc,CAAA;QAAA,OAKOf,KAAK,CAACgB,WAAW,IAAI,UAAU;MAAA;MAAA,0BAAAC,CAAA;QAAA,OAClCjB,KAAK,CAACkB,YAAY;MAAA;MAAA,wBAAAC,CAAA;QAAA,OACpBnB,KAAK,CAACgB,WAAW,IAAI,UAAU;MAAA;MAAA,6BAAAI,CAAA;QAAA,OAC1BpB,KAAK,CAACG,UAAU,KAAK,KAAK,GAAG,MAAM,GAAGkB,SAAS;MAAA;MAAA,aAAAhB,CAAA;QAAA,OAC/DiB,MAAA,SAAAlB,SAAS,CAAC,CAAC,MAAG,mBAAmBA,SAAS,CAAC,CAAC,EAAE,GAAG,iBAAiB;MAAA;MAAA,4BAAAmB,CAAA;QAAA,OACnDvB,KAAK,CAACwB,iBAAiB,IAAIH,SAAS;MAAA;IAAA;IAAAI,QAAA,CAAAlB,IAAA,QAEzDP,KAAK,CAAC0B,QAAQ;IAAAC,oBAAA;IAAA,OAAApB,IAAA;EAAA;AAGrB;AAEA,eAAeT,UAAU","ignoreList":[]}