@k2b/ui 0.27.0 → 0.28.0

package/dist/browser/layout/Discussion.js

@@ -15,48 +15,50 @@ 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(`<h2>`),
-  _tmpl$2 = /*#__PURE__*/_$template(`<span class=k2b-discussion__count>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-discussion__actions>`),
-  _tmpl$4 = /*#__PURE__*/_$template(`<section><header class=k2b-discussion__header><!$><!/><!$><!/><!$><!/><!$><!/></header><div class=k2b-discussion__body>`),
-  _tmpl$5 = /*#__PURE__*/_$template(`<span class=k2b-discussion__icon aria-hidden=true><i>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<h3>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<i class="ti ti-send"aria-hidden=true>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<form><div class=k2b-discussion__composer-field data-has-inset-action=true><!$><!/><div class=k2b-discussion__composer-inset-action></div></div><!$><!/><!$><!/>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<p class=k2b-discussion__status role=alert>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<footer>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<p class=k2b-discussion__status role=status><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i> <!$><!/>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<div class=k2b-discussion__actions>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<section><header class=k2b-discussion__header><!$><!/><!$><!/><!$><!/><!$><!/></header><div class=k2b-discussion__body>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<span class=k2b-discussion__icon aria-hidden=true><i>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<h3>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<i class="ti ti-send"aria-hidden=true>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<form><div class=k2b-discussion__composer-field data-has-inset-action=true><!$><!/><div class=k2b-discussion__composer-inset-action></div></div><!$><!/><!$><!/>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<p class=k2b-discussion__status role=alert>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<footer>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<p class=k2b-discussion__status role=status><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i> <!$><!/>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<button type=button class=k2b-discussion__fold><i aria-hidden=true></i><!$><!/>`),
   _tmpl$10 = /*#__PURE__*/_$template(`<button type=button class=k2b-discussion__load-more><i aria-hidden=true></i><!$><!/>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<div><div class=k2b-discussion__sentinel aria-hidden=true></div><!$><!/><!$><!/><!$><!/><!$><!/><ol class=k2b-discussion__list>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<div><div class=k2b-discussion__sentinel aria-hidden=true></div><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><ol class=k2b-discussion__list>`),
   _tmpl$12 = /*#__PURE__*/_$template(`<button type=button>`),
   _tmpl$13 = /*#__PURE__*/_$template(`<div class=k2b-discussion__status role=alert><span></span><!$><!/>`),
   _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-discussion__status role=alert><span></span><button type=button>`),
   _tmpl$15 = /*#__PURE__*/_$template(`<div class=k2b-discussion__avatar>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<span class=k2b-discussion__timestamp>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<span class=k2b-discussion__meta>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<div class=k2b-discussion__item-actions>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<span class=k2b-discussion__meta>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<div class=k2b-discussion__item-actions>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<span class=k2b-discussion__timestamp>`),
   _tmpl$19 = /*#__PURE__*/_$template(`<div class=k2b-discussion__reply-context>`),
   _tmpl$20 = /*#__PURE__*/_$template(`<li><!$><!/><div class=k2b-discussion__entry><header><strong></strong><!$><!/><!$><!/><!$><!/></header><!$><!/><div class=k2b-discussion__content>`);
-import { createEffect, createSignal, createUniqueId, onCleanup, onMount, Show, splitProps } from "solid-js";
+import { children, createEffect, createSignal, createUniqueId, onCleanup, onMount, Show, splitProps } from "solid-js";
 import { Button, IconButton } from "../actions/Button";
 import { useChatMessages } from "../chat/chat-messages";
 import { MarkdownEditor } from "../inputs/markdown/MarkdownEditor";
 import { useUiMessages } from "../intl/messages";
+import { DetailPanelCount } from "./DetailPanel";
+import { useDetailPanelMessages } from "./detail-panel-messages";
 const classNames = (base, extra) => extra ? `${base} ${extra}` : base;
 const DiscussionRoot = props => {
   const headingId = `k2b-discussion-${createUniqueId()}`;
   const [local, sectionProps] = splitProps(props, ["label", "children", "icon", "count", "actions", "as", "surface", "class"]);
   return (() => {
-    var _el$ = _$getNextElement(_tmpl$4),
+    var _el$ = _$getNextElement(_tmpl$3),
       _el$2 = _el$.firstChild,
-      _el$6 = _el$2.firstChild,
-      [_el$7, _co$] = _$getNextMarker(_el$6.nextSibling),
-      _el$8 = _el$7.nextSibling,
-      [_el$9, _co$2] = _$getNextMarker(_el$8.nextSibling),
-      _el$0 = _el$9.nextSibling,
-      [_el$1, _co$3] = _$getNextMarker(_el$0.nextSibling),
-      _el$10 = _el$1.nextSibling,
-      [_el$11, _co$4] = _$getNextMarker(_el$10.nextSibling),
-      _el$12 = _el$2.nextSibling;
+      _el$5 = _el$2.firstChild,
+      [_el$6, _co$] = _$getNextMarker(_el$5.nextSibling),
+      _el$7 = _el$6.nextSibling,
+      [_el$8, _co$2] = _$getNextMarker(_el$7.nextSibling),
+      _el$9 = _el$8.nextSibling,
+      [_el$0, _co$3] = _$getNextMarker(_el$9.nextSibling),
+      _el$1 = _el$0.nextSibling,
+      [_el$10, _co$4] = _$getNextMarker(_el$1.nextSibling),
+      _el$11 = _el$2.nextSibling;
     _$spread(_el$, _$mergeProps(sectionProps, {
       get ["class"]() {
         return classNames("k2b-discussion", local.class);
@@ -71,22 +73,22 @@ const DiscussionRoot = props => {
         return _$memo(() => local.icon !== false)() && local.icon;
       },
       children: icon => (() => {
-        var _el$13 = _$getNextElement(_tmpl$5),
-          _el$14 = _el$13.firstChild;
-        _$effect(() => _$className(_el$14, icon()));
-        return _el$13;
+        var _el$12 = _$getNextElement(_tmpl$4),
+          _el$13 = _el$12.firstChild;
+        _$effect(() => _$className(_el$13, icon()));
+        return _el$12;
       })()
-    }), _el$7, _co$);
+    }), _el$6, _co$);
     _$insert(_el$2, _$createComponent(Show, {
       get when() {
         return local.as === "h2";
       },
       get fallback() {
         return (() => {
-          var _el$15 = _$getNextElement(_tmpl$6);
-          _$setAttribute(_el$15, "id", headingId);
-          _$insert(_el$15, () => local.label);
-          return _el$15;
+          var _el$14 = _$getNextElement(_tmpl$5);
+          _$setAttribute(_el$14, "id", headingId);
+          _$insert(_el$14, () => local.label);
+          return _el$14;
         })();
       },
       get children() {
@@ -95,28 +97,30 @@ const DiscussionRoot = props => {
         _$insert(_el$3, () => local.label);
         return _el$3;
       }
-    }), _el$9, _co$2);
+    }), _el$8, _co$2);
     _$insert(_el$2, _$createComponent(Show, {
       get when() {
         return local.count !== undefined;
       },
       get children() {
-        var _el$4 = _$getNextElement(_tmpl$2);
-        _$insert(_el$4, () => local.count);
-        return _el$4;
+        return _$createComponent(DetailPanelCount, {
+          get count() {
+            return local.count ?? 0;
+          }
+        });
       }
-    }), _el$1, _co$3);
+    }), _el$0, _co$3);
     _$insert(_el$2, _$createComponent(Show, {
       get when() {
         return local.actions !== undefined;
       },
       get children() {
-        var _el$5 = _$getNextElement(_tmpl$3);
-        _$insert(_el$5, () => local.actions);
-        return _el$5;
+        var _el$4 = _$getNextElement(_tmpl$2);
+        _$insert(_el$4, () => local.actions);
+        return _el$4;
       }
-    }), _el$11, _co$4);
-    _$insert(_el$12, () => local.children);
+    }), _el$10, _co$4);
+    _$insert(_el$11, () => local.children);
     _$runHydrationEvents();
     return _el$;
   })();
@@ -143,16 +147,16 @@ const DiscussionComposer = props => {
     }
   };
   return (() => {
-    var _el$16 = _$getNextElement(_tmpl$8),
-      _el$17 = _el$16.firstChild,
-      _el$20 = _el$17.firstChild,
-      [_el$21, _co$5] = _$getNextMarker(_el$20.nextSibling),
-      _el$18 = _el$21.nextSibling,
-      _el$22 = _el$17.nextSibling,
-      [_el$23, _co$6] = _$getNextMarker(_el$22.nextSibling),
-      _el$24 = _el$23.nextSibling,
-      [_el$25, _co$7] = _$getNextMarker(_el$24.nextSibling);
-    _$spread(_el$16, _$mergeProps(formProps, {
+    var _el$15 = _$getNextElement(_tmpl$7),
+      _el$16 = _el$15.firstChild,
+      _el$19 = _el$16.firstChild,
+      [_el$20, _co$5] = _$getNextMarker(_el$19.nextSibling),
+      _el$17 = _el$20.nextSibling,
+      _el$21 = _el$16.nextSibling,
+      [_el$22, _co$6] = _$getNextMarker(_el$21.nextSibling),
+      _el$23 = _el$22.nextSibling,
+      [_el$24, _co$7] = _$getNextMarker(_el$23.nextSibling);
+    _$spread(_el$15, _$mergeProps(formProps, {
       get ["class"]() {
         return classNames("k2b-discussion__composer", local.class);
       },
@@ -161,7 +165,7 @@ const DiscussionComposer = props => {
         void submit();
       }
     }), false, true);
-    _$insert(_el$17, _$createComponent(MarkdownEditor, {
+    _$insert(_el$16, _$createComponent(MarkdownEditor, {
       get ["aria-label"]() {
         return local.label;
       },
@@ -186,8 +190,8 @@ const DiscussionComposer = props => {
         return submitError() !== null;
       },
       onSubmit: () => void submit()
-    }), _el$21, _co$5);
-    _$insert(_el$18, _$createComponent(IconButton, {
+    }), _el$20, _co$5);
+    _$insert(_el$17, _$createComponent(IconButton, {
       type: "submit",
       get label() {
         return local.submitLabel ?? chatMessages().postMessage;
@@ -201,26 +205,26 @@ const DiscussionComposer = props => {
         return submitting() || !message().trim();
       },
       get children() {
-        return _$getNextElement(_tmpl$7);
+        return _$getNextElement(_tmpl$6);
       }
     }));
-    _$insert(_el$16, _$createComponent(Show, {
+    _$insert(_el$15, _$createComponent(Show, {
       get when() {
         return submitError();
       },
       children: error => (() => {
-        var _el$26 = _$getNextElement(_tmpl$9);
-        _$insert(_el$26, error);
-        return _el$26;
+        var _el$25 = _$getNextElement(_tmpl$8);
+        _$insert(_el$25, error);
+        return _el$25;
       })()
-    }), _el$23, _co$6);
-    _$insert(_el$16, _$createComponent(Show, {
+    }), _el$22, _co$6);
+    _$insert(_el$15, _$createComponent(Show, {
       get when() {
         return local.onCancel;
       },
       children: onCancel => (() => {
-        var _el$27 = _$getNextElement(_tmpl$0);
-        _$insert(_el$27, _$createComponent(Button, {
+        var _el$26 = _$getNextElement(_tmpl$9);
+        _$insert(_el$26, _$createComponent(Button, {
           type: "button",
           variant: "ghost",
           size: "xs",
@@ -234,11 +238,11 @@ const DiscussionComposer = props => {
             return local.cancelLabel ?? messages().cancel;
           }
         }));
-        return _el$27;
+        return _el$26;
       })()
-    }), _el$25, _co$7);
+    }), _el$24, _co$7);
     _$runHydrationEvents();
-    return _el$16;
+    return _el$15;
   })();
 };
 const scrollOwner = element => {
@@ -253,6 +257,18 @@ const scrollOwner = element => {
 const DiscussionList = props => {
   const messages = useUiMessages();
   const chatMessages = useChatMessages();
+  const foldMessages = useDetailPanelMessages();
+  const [internalExpanded, setInternalExpanded] = createSignal(false);
+  const expanded = () => props.expanded ?? internalExpanded();
+  const setExpanded = next => {
+    if (props.expanded === undefined) setInternalExpanded(next);
+    props.onExpandedChange?.(next);
+  };
+  const resolved = children(() => props.children);
+  const entries = () => resolved.toArray();
+  const hidden = () => props.fold !== undefined && !expanded() ? Math.max(0, entries().length - props.fold) : 0;
+  const folded = () => props.fold !== undefined && entries().length > props.fold;
+  const visible = () => hidden() > 0 ? entries().slice(hidden()) : entries();
   const [loadingMoreInternally, setLoadingMoreInternally] = createSignal(false);
   const [loadMoreError, setLoadMoreError] = createSignal(null);
   const [sentinelVisible, setSentinelVisible] = createSignal(false);
@@ -263,9 +279,9 @@ const DiscussionList = props => {
   let adjustmentFrame;
   let active = true;
   const loadingMore = () => Boolean(props.loadingMore || loadingMoreInternally());
-  const canLoadMore = () => Boolean(!props.loading && !props.error && !loadMoreError() && props.hasMore && props.onLoadMore && !loadingMore());
+  const canLoadMore = () => Boolean(!props.loading && !props.error && !loadMoreError() && hidden() === 0 && props.hasMore && props.onLoadMore && !loadingMore());
   const loadMore = async (retry = false) => {
-    if (props.loading || props.error || !retry && loadMoreError() || !props.onLoadMore || !props.hasMore || loadingMore()) return false;
+    if (props.loading || props.error || !retry && loadMoreError() || hidden() > 0 || !props.onLoadMore || !props.hasMore || loadingMore()) return false;
     const owner = listRef ? scrollOwner(listRef) : null;
     const previousScrollHeight = owner?.scrollHeight ?? 0;
     setLoadMoreError(null);
@@ -312,136 +328,168 @@ const DiscussionList = props => {
     if (adjustmentFrame !== undefined) cancelAnimationFrame(adjustmentFrame);
   });
   return (() => {
-    var _el$28 = _$getNextElement(_tmpl$11),
-      _el$29 = _el$28.firstChild,
-      _el$40 = _el$29.nextSibling,
-      [_el$41, _co$0] = _$getNextMarker(_el$40.nextSibling),
-      _el$42 = _el$41.nextSibling,
-      [_el$43, _co$1] = _$getNextMarker(_el$42.nextSibling),
-      _el$44 = _el$43.nextSibling,
-      [_el$45, _co$10] = _$getNextMarker(_el$44.nextSibling),
-      _el$46 = _el$45.nextSibling,
-      [_el$47, _co$11] = _$getNextMarker(_el$46.nextSibling),
-      _el$39 = _el$47.nextSibling;
+    var _el$27 = _$getNextElement(_tmpl$11),
+      _el$28 = _el$27.firstChild,
+      _el$43 = _el$28.nextSibling,
+      [_el$44, _co$1] = _$getNextMarker(_el$43.nextSibling),
+      _el$45 = _el$44.nextSibling,
+      [_el$46, _co$10] = _$getNextMarker(_el$45.nextSibling),
+      _el$47 = _el$46.nextSibling,
+      [_el$48, _co$11] = _$getNextMarker(_el$47.nextSibling),
+      _el$49 = _el$48.nextSibling,
+      [_el$50, _co$12] = _$getNextMarker(_el$49.nextSibling),
+      _el$51 = _el$50.nextSibling,
+      [_el$52, _co$13] = _$getNextMarker(_el$51.nextSibling),
+      _el$42 = _el$52.nextSibling;
     var _ref$ = sentinelRef;
-    typeof _ref$ === "function" ? _$use(_ref$, _el$29) : sentinelRef = _el$29;
-    _$insert(_el$28, _$createComponent(Show, {
+    typeof _ref$ === "function" ? _$use(_ref$, _el$28) : sentinelRef = _el$28;
+    _$insert(_el$27, _$createComponent(Show, {
       get when() {
         return props.loading;
       },
       get children() {
-        var _el$30 = _$getNextElement(_tmpl$1),
-          _el$31 = _el$30.firstChild,
+        var _el$29 = _$getNextElement(_tmpl$0),
+          _el$30 = _el$29.firstChild,
+          _el$31 = _el$30.nextSibling,
           _el$32 = _el$31.nextSibling,
-          _el$33 = _el$32.nextSibling,
-          [_el$34, _co$8] = _$getNextMarker(_el$33.nextSibling);
-        _$insert(_el$30, () => props.loadingLabel ?? chatMessages().loadingMessages, _el$34, _co$8);
-        return _el$30;
+          [_el$33, _co$8] = _$getNextMarker(_el$32.nextSibling);
+        _$insert(_el$29, () => props.loadingLabel ?? chatMessages().loadingMessages, _el$33, _co$8);
+        return _el$29;
       }
-    }), _el$41, _co$0);
-    _$insert(_el$28, _$createComponent(Show, {
+    }), _el$44, _co$1);
+    _$insert(_el$27, _$createComponent(Show, {
       get when() {
         return props.error;
       },
       children: error => (() => {
-        var _el$48 = _$getNextElement(_tmpl$13),
-          _el$49 = _el$48.firstChild,
-          _el$51 = _el$49.nextSibling,
-          [_el$52, _co$12] = _$getNextMarker(_el$51.nextSibling);
-        _$insert(_el$49, error);
-        _$insert(_el$48, _$createComponent(Show, {
+        var _el$53 = _$getNextElement(_tmpl$13),
+          _el$54 = _el$53.firstChild,
+          _el$56 = _el$54.nextSibling,
+          [_el$57, _co$14] = _$getNextMarker(_el$56.nextSibling);
+        _$insert(_el$54, error);
+        _$insert(_el$53, _$createComponent(Show, {
           get when() {
             return props.onRetry;
           },
           get children() {
-            var _el$50 = _$getNextElement(_tmpl$12);
-            _$addEventListener(_el$50, "click", props.onRetry, true);
-            _$insert(_el$50, () => messages().retry);
+            var _el$55 = _$getNextElement(_tmpl$12);
+            _$addEventListener(_el$55, "click", props.onRetry, true);
+            _$insert(_el$55, () => messages().retry);
             _$runHydrationEvents();
-            return _el$50;
+            return _el$55;
           }
-        }), _el$52, _co$12);
-        return _el$48;
+        }), _el$57, _co$14);
+        return _el$53;
       })()
-    }), _el$43, _co$1);
-    _$insert(_el$28, _$createComponent(Show, {
+    }), _el$46, _co$10);
+    _$insert(_el$27, _$createComponent(Show, {
       get when() {
         return loadMoreError();
       },
       children: error => (() => {
-        var _el$53 = _$getNextElement(_tmpl$14),
-          _el$54 = _el$53.firstChild,
-          _el$55 = _el$54.nextSibling;
-        _$insert(_el$54, error);
-        _el$55.$$click = () => void loadMore(true);
-        _$insert(_el$55, () => messages().retry);
+        var _el$58 = _$getNextElement(_tmpl$14),
+          _el$59 = _el$58.firstChild,
+          _el$60 = _el$59.nextSibling;
+        _$insert(_el$59, error);
+        _el$60.$$click = () => void loadMore(true);
+        _$insert(_el$60, () => messages().retry);
         _$runHydrationEvents();
-        return _el$53;
+        return _el$58;
       })()
-    }), _el$45, _co$10);
-    _$insert(_el$28, _$createComponent(Show, {
+    }), _el$48, _co$11);
+    _$insert(_el$27, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!folded())() && !props.loading;
+      },
+      get children() {
+        var _el$34 = _$getNextElement(_tmpl$1),
+          _el$35 = _el$34.firstChild,
+          _el$36 = _el$35.nextSibling,
+          [_el$37, _co$9] = _$getNextMarker(_el$36.nextSibling);
+        _el$34.$$click = () => setExpanded(hidden() > 0);
+        _$insert(_el$34, (() => {
+          var _c$ = _$memo(() => hidden() > 0);
+          return () => _c$() ? foldMessages().showOlder({
+            count: hidden()
+          }) : foldMessages().showLess;
+        })(), _el$37, _co$9);
+        _$effect(_p$ => {
+          var _v$ = hidden() === 0,
+            _v$2 = `ti ${hidden() > 0 ? "ti-chevron-down" : "ti-chevron-up"}`;
+          _v$ !== _p$.e && _$setAttribute(_el$34, "aria-expanded", _p$.e = _v$);
+          _v$2 !== _p$.t && _$className(_el$35, _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        _$runHydrationEvents();
+        return _el$34;
+      }
+    }), _el$50, _co$12);
+    _$insert(_el$27, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!(!props.loading && !props.error && !loadMoreError()))() && (canLoadMore() || loadingMore());
       },
       get children() {
-        var _el$35 = _$getNextElement(_tmpl$10),
-          _el$36 = _el$35.firstChild,
-          _el$37 = _el$36.nextSibling,
-          [_el$38, _co$9] = _$getNextMarker(_el$37.nextSibling);
-        _el$35.$$click = () => void loadMore();
-        _$insert(_el$35, (() => {
-          var _c$ = _$memo(() => !!loadingMore());
-          return () => _c$() ? props.loadingLabel ?? chatMessages().loadingMessages : props.loadMoreLabel ?? chatMessages().loadEarlier;
-        })(), _el$38, _co$9);
+        var _el$38 = _$getNextElement(_tmpl$10),
+          _el$39 = _el$38.firstChild,
+          _el$40 = _el$39.nextSibling,
+          [_el$41, _co$0] = _$getNextMarker(_el$40.nextSibling);
+        _el$38.$$click = () => void loadMore();
+        _$insert(_el$38, (() => {
+          var _c$2 = _$memo(() => !!loadingMore());
+          return () => _c$2() ? props.loadingLabel ?? chatMessages().loadingMessages : props.loadMoreLabel ?? chatMessages().loadEarlier;
+        })(), _el$41, _co$0);
         _$effect(_p$ => {
-          var _v$ = loadingMore(),
-            _v$2 = `ti ${loadingMore() ? "ti-loader-2 k2b-spin" : "ti-history"}`;
-          _v$ !== _p$.e && _$setProperty(_el$35, "disabled", _p$.e = _v$);
-          _v$2 !== _p$.t && _$className(_el$36, _p$.t = _v$2);
+          var _v$3 = loadingMore(),
+            _v$4 = `ti ${loadingMore() ? "ti-loader-2 k2b-spin" : "ti-history"}`;
+          _v$3 !== _p$.e && _$setProperty(_el$38, "disabled", _p$.e = _v$3);
+          _v$4 !== _p$.t && _$className(_el$39, _p$.t = _v$4);
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
         _$runHydrationEvents();
-        return _el$35;
+        return _el$38;
       }
-    }), _el$47, _co$11);
+    }), _el$52, _co$13);
     var _ref$2 = listRef;
-    typeof _ref$2 === "function" ? _$use(_ref$2, _el$39) : listRef = _el$39;
-    _$insert(_el$39, () => props.children);
+    typeof _ref$2 === "function" ? _$use(_ref$2, _el$42) : listRef = _el$42;
+    _$insert(_el$42, visible);
     _$effect(_p$ => {
-      var _v$3 = classNames("k2b-discussion__list-region", props.class),
-        _v$4 = props.loading || loadingMore() ? "true" : undefined;
-      _v$3 !== _p$.e && _$className(_el$28, _p$.e = _v$3);
-      _v$4 !== _p$.t && _$setAttribute(_el$28, "aria-busy", _p$.t = _v$4);
+      var _v$5 = classNames("k2b-discussion__list-region", props.class),
+        _v$6 = props.loading || loadingMore() ? "true" : undefined;
+      _v$5 !== _p$.e && _$className(_el$27, _p$.e = _v$5);
+      _v$6 !== _p$.t && _$setAttribute(_el$27, "aria-busy", _p$.t = _v$6);
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$28;
+    return _el$27;
   })();
 };
 const DiscussionItem = props => {
   const [local, itemProps] = splitProps(props, ["author", "children", "avatar", "timestamp", "meta", "replyContext", "actions", "actionVisibility", "class"]);
   return (() => {
-    var _el$56 = _$getNextElement(_tmpl$20),
-      _el$74 = _el$56.firstChild,
-      [_el$75, _co$17] = _$getNextMarker(_el$74.nextSibling),
-      _el$58 = _el$75.nextSibling,
-      _el$59 = _el$58.firstChild,
-      _el$60 = _el$59.firstChild,
-      _el$64 = _el$60.nextSibling,
-      [_el$65, _co$13] = _$getNextMarker(_el$64.nextSibling),
-      _el$66 = _el$65.nextSibling,
-      [_el$67, _co$14] = _$getNextMarker(_el$66.nextSibling),
-      _el$68 = _el$67.nextSibling,
-      [_el$69, _co$15] = _$getNextMarker(_el$68.nextSibling),
-      _el$72 = _el$59.nextSibling,
-      [_el$73, _co$16] = _$getNextMarker(_el$72.nextSibling),
-      _el$71 = _el$73.nextSibling;
-    _$spread(_el$56, _$mergeProps(itemProps, {
+    var _el$61 = _$getNextElement(_tmpl$20),
+      _el$79 = _el$61.firstChild,
+      [_el$80, _co$19] = _$getNextMarker(_el$79.nextSibling),
+      _el$63 = _el$80.nextSibling,
+      _el$64 = _el$63.firstChild,
+      _el$65 = _el$64.firstChild,
+      _el$69 = _el$65.nextSibling,
+      [_el$70, _co$15] = _$getNextMarker(_el$69.nextSibling),
+      _el$71 = _el$70.nextSibling,
+      [_el$72, _co$16] = _$getNextMarker(_el$71.nextSibling),
+      _el$73 = _el$72.nextSibling,
+      [_el$74, _co$17] = _$getNextMarker(_el$73.nextSibling),
+      _el$77 = _el$64.nextSibling,
+      [_el$78, _co$18] = _$getNextMarker(_el$77.nextSibling),
+      _el$76 = _el$78.nextSibling;
+    _$spread(_el$61, _$mergeProps(itemProps, {
       get ["class"]() {
         return classNames("k2b-discussion__item", local.class);
       },
@@ -449,61 +497,61 @@ const DiscussionItem = props => {
         return local.avatar !== undefined ? "true" : undefined;
       }
     }), false, true);
-    _$insert(_el$56, _$createComponent(Show, {
+    _$insert(_el$61, _$createComponent(Show, {
       get when() {
         return local.avatar !== undefined;
       },
       get children() {
-        var _el$57 = _$getNextElement(_tmpl$15);
-        _$insert(_el$57, () => local.avatar);
-        return _el$57;
+        var _el$62 = _$getNextElement(_tmpl$15);
+        _$insert(_el$62, () => local.avatar);
+        return _el$62;
       }
-    }), _el$75, _co$17);
-    _$insert(_el$60, () => local.author);
-    _$insert(_el$59, _$createComponent(Show, {
+    }), _el$80, _co$19);
+    _$insert(_el$65, () => local.author);
+    _$insert(_el$64, _$createComponent(Show, {
       get when() {
-        return local.timestamp !== undefined;
+        return local.meta !== undefined;
       },
       get children() {
-        var _el$61 = _$getNextElement(_tmpl$16);
-        _$insert(_el$61, () => local.timestamp);
-        return _el$61;
+        var _el$66 = _$getNextElement(_tmpl$16);
+        _$insert(_el$66, () => local.meta);
+        return _el$66;
       }
-    }), _el$65, _co$13);
-    _$insert(_el$59, _$createComponent(Show, {
+    }), _el$70, _co$15);
+    _$insert(_el$64, _$createComponent(Show, {
       get when() {
-        return local.meta !== undefined;
+        return local.actions !== undefined;
       },
       get children() {
-        var _el$62 = _$getNextElement(_tmpl$17);
-        _$insert(_el$62, () => local.meta);
-        return _el$62;
+        var _el$67 = _$getNextElement(_tmpl$17);
+        _$insert(_el$67, () => local.actions);
+        _$effect(() => _$setAttribute(_el$67, "data-visibility", local.actionVisibility ?? "progressive"));
+        return _el$67;
       }
-    }), _el$67, _co$14);
-    _$insert(_el$59, _$createComponent(Show, {
+    }), _el$72, _co$16);
+    _$insert(_el$64, _$createComponent(Show, {
       get when() {
-        return local.actions !== undefined;
+        return local.timestamp !== undefined;
       },
       get children() {
-        var _el$63 = _$getNextElement(_tmpl$18);
-        _$insert(_el$63, () => local.actions);
-        _$effect(() => _$setAttribute(_el$63, "data-visibility", local.actionVisibility ?? "progressive"));
-        return _el$63;
+        var _el$68 = _$getNextElement(_tmpl$18);
+        _$insert(_el$68, () => local.timestamp);
+        return _el$68;
       }
-    }), _el$69, _co$15);
-    _$insert(_el$58, _$createComponent(Show, {
+    }), _el$74, _co$17);
+    _$insert(_el$63, _$createComponent(Show, {
       get when() {
         return local.replyContext !== undefined;
       },
       get children() {
-        var _el$70 = _$getNextElement(_tmpl$19);
-        _$insert(_el$70, () => local.replyContext);
-        return _el$70;
+        var _el$75 = _$getNextElement(_tmpl$19);
+        _$insert(_el$75, () => local.replyContext);
+        return _el$75;
       }
-    }), _el$73, _co$16);
-    _$insert(_el$71, () => local.children);
+    }), _el$78, _co$18);
+    _$insert(_el$76, () => local.children);
     _$runHydrationEvents();
-    return _el$56;
+    return _el$61;
   })();
 };
 const Discussion = DiscussionRoot;