@limetech/lime-elements 40.5.4 → 40.6.1

package/dist/collection/components/input-field/input-field.js

@@ -184,9 +184,11 @@ export class InputField {
             if (this.type === 'number') {
                 props.step = this.step;
             }
+            // eslint-disable-next-line unicorn/prefer-number-is-safe-integer -- integers beyond the safe range must still be applied
             if (this.type === 'number' && Number.isInteger(this.min)) {
                 props.min = this.min;
             }
+            // eslint-disable-next-line unicorn/prefer-number-is-safe-integer -- integers beyond the safe range must still be applied
             if (this.type === 'number' && Number.isInteger(this.max)) {
                 props.max = this.max;
             }
@@ -216,11 +218,11 @@ export class InputField {
         };
         this.renderHelperLine = () => {
             var _a;
-            const text = this.getCurrentValue() || '';
-            const length = text.length;
             if (!this.hasHelperLine()) {
                 return;
             }
+            const text = this.getCurrentValue() || '';
+            const length = text.length;
             return (h("limel-helper-line", { helperTextId: this.helperTextId, helperText: (_a = this.helperText) !== null && _a !== void 0 ? _a : this.validationMessage, length: length, maxLength: this.maxlength, invalid: this.isInvalid() }));
         };
         this.renderSuffix = () => {
@@ -293,7 +295,7 @@ export class InputField {
             if (!this.isInvalid() && this.hasLink()) {
                 return this.renderLinkIcon(this.getLink(), trailingIcon);
             }
-            else if (trailingIcon) {
+            if (trailingIcon) {
                 return this.renderTrailingIcon(trailingIcon);
             }
         };
@@ -395,10 +397,11 @@ export class InputField {
                 listElement.focus();
                 return;
             }
-            if (isUp) {
-                const listElement = list.shadowRoot.querySelector('.mdc-deprecated-list-item:last-child');
-                listElement.focus();
+            if (!isUp) {
+                return;
             }
+            const listElement = list.shadowRoot.querySelector('.mdc-deprecated-list-item:last-child');
+            listElement.focus();
         };
         this.handleCompletionChange = (event) => {
             event.stopPropagation();
@@ -594,13 +597,10 @@ export class InputField {
         if (ariaControls) {
             properties['aria-controls'] = ariaControls;
         }
-        return (h(Host, { key: '9e509e181e05f451deadc92e052dc11075032f9a' }, h("limel-notched-outline", { key: '2f2307e2c7d96eec0c5753d27bf1fc76c9ad8eb2', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasLeadingIcon: !!this.leadingIcon }, h("label", { key: 'a21372b10d416423aea6ff9f318bf12ef8d4832a', slot: "content", class: this.getContainerClassList() }, this.renderLeadingIcon(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton())), this.renderHelperLine(), this.renderAutocompleteList()));
+        return (h(Host, { key: 'f75582060395fe9167939a30d0fb07a89d225cf2' }, h("limel-notched-outline", { key: '85e40d1ceee2efb56a7175f090b876b6514a41cb', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasLeadingIcon: !!this.leadingIcon }, h("label", { key: '683ee7c3e879a07f590ac27e8056489cb626b36f', slot: "content", class: this.getContainerClassList() }, this.renderLeadingIcon(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton())), this.renderHelperLine(), this.renderAutocompleteList()));
     }
     valueWatcher(newValue) {
-        if (!this.mdcTextField) {
-            return;
-        }
-        if (this.changeWaiting) {
+        if (!this.mdcTextField || this.changeWaiting) {
             return;
         }
         if (this.type === 'number' &&

package/dist/collection/components/list/list-renderer.js

@@ -14,9 +14,7 @@ export class ListRenderer {
             if (role === 'listbox' || role === 'radiogroup') {
                 return 'vertical';
             }
-            else {
-                return null;
-            }
+            return null;
         };
         /**
          * Determine which ListItem should have the `tab-index` attribute set,
@@ -29,12 +27,12 @@ export class ListRenderer {
          */
         this.getIndexForWhichToApplyTabIndex = (items) => {
             let result;
-            for (let i = 0, max = items.length; i < max; i += 1) {
-                if ('separator' in items[i]) {
+            for (const [i, entry] of items.entries()) {
+                if ('separator' in entry) {
                     // Ignore ListSeparator
                 }
                 else {
-                    const item = items[i];
+                    const item = entry;
                     if (item.disabled) {
                         // Skip disabled items - they should never get tabindex
                         continue;
@@ -92,7 +90,7 @@ export class ListRenderer {
         };
     }
     render(items, config = {}) {
-        items = items || [];
+        items || (items = []);
         this.config = Object.assign(Object.assign({}, this.defaultConfig), config);
         let role;
         switch (this.config.type) {

package/dist/collection/components/list/list.js

@@ -189,12 +189,12 @@ export class List {
             type: this.type,
             iconSize: this.iconSize,
         };
-        let maxLinesSecondaryText = +((_a = this.maxLinesSecondaryText) === null || _a === void 0 ? void 0 : _a.toFixed());
+        let maxLinesSecondaryText = +((_a = this.maxLinesSecondaryText) === null || _a === void 0 ? void 0 : _a.toFixed(0));
         if (this.maxLinesSecondaryText < 1) {
             maxLinesSecondaryText = 1;
         }
         const html = this.listRenderer.render(this.items, this.config);
-        return (h(Host, { key: 'f15badb0936caf891cd8bd272ef5d3224645c3c7', style: {
+        return (h(Host, { key: 'b8c5f38d03402596fbd227a19587a801ef0c8b6e', style: {
                 '--maxLinesSecondaryText': `${maxLinesSecondaryText}`,
             } }, html));
     }

package/dist/collection/components/list-item/list-item.js

@@ -158,9 +158,9 @@ export class ListItemComponent {
             // also keep for `menuitem` for visual state consistency
             ariaProps['aria-selected'] = this.selected ? 'true' : 'false';
         }
-        return (h(Host, Object.assign({ key: '8fc88d6a74e504e5f70bf3385286593e55224978', role: this.getHostRole(), class: {
+        return (h(Host, Object.assign({ key: '005e6e5fa87bab94b1d3c00970ed4efff409de1b', role: this.getHostRole(), class: {
                 'has-primary-component': !!((_a = this.primaryComponent) === null || _a === void 0 ? void 0 : _a.name),
-            } }, ariaProps), this.renderRadioButton(), this.renderCheckbox(), this.renderIcon(), this.renderImage(), this.renderPrimaryComponent(), h("div", { key: 'eb51efec9974eec1561a91e6e62cc9cced501fe0', class: "text" }, this.renderLabel(), this.renderDescription()), this.renderActionMenu(this.actions)));
+            } }, ariaProps), this.renderRadioButton(), this.renderCheckbox(), this.renderIcon(), this.renderImage(), this.renderPrimaryComponent(), h("div", { key: '351438e788b747b86a9700ab1a8c700532aee409', class: "text" }, this.renderLabel(), this.renderDescription()), this.renderActionMenu(this.actions)));
     }
     /**
      * Returns a stable reference for the provided actions array to avoid

package/dist/collection/components/list-item/menu-item-meta/menu-item-meta.js

@@ -22,7 +22,7 @@ export class MenuItemMeta {
         this.showChevron = false;
     }
     render() {
-        return (h(Host, { key: '3255a600c159784b9e488480b100f86f2104b406' }, this.renderCommandText(), this.renderBadge(), this.renderChevron()));
+        return (h(Host, { key: '6dbc3a71962933c5cfdf415096e41f90e84e7740' }, this.renderCommandText(), this.renderBadge(), this.renderChevron()));
     }
     renderCommandText() {
         if (this.hotkey) {

package/dist/collection/components/markdown/hydrate-custom-elements.js

@@ -32,12 +32,13 @@ function hydrateElement(element, attributes) {
             continue;
         }
         const parsed = tryParseJson(value);
-        if (parsed !== undefined) {
-            const sanitized = sanitizeUrls(parsed);
-            // Set the JS property (camelCase) instead of the attribute
-            const propName = attributeToPropName(attrName);
-            element[propName] = sanitized;
+        if (parsed === undefined) {
+            continue;
         }
+        const sanitized = sanitizeUrls(parsed);
+        // Set the JS property (camelCase) instead of the attribute
+        const propName = attributeToPropName(attrName);
+        element[propName] = sanitized;
     }
 }
 function tryParseJson(value) {

package/dist/collection/components/markdown/image-intersection-observer.js

@@ -5,15 +5,16 @@ export class ImageIntersectionObserver {
     constructor(containerElement) {
         this.handleIntersection = (entries) => {
             for (const entry of entries) {
-                if (entry.isIntersecting) {
-                    const img = entry.target;
-                    const dataSrc = img.dataset.src;
-                    if (dataSrc) {
-                        img.setAttribute('src', dataSrc);
-                        delete img.dataset.src;
-                    }
-                    this.observer.unobserve(img);
+                if (!entry.isIntersecting) {
+                    continue;
                 }
+                const img = entry.target;
+                const dataSrc = img.dataset.src;
+                if (dataSrc) {
+                    img.setAttribute('src', dataSrc);
+                    delete img.dataset.src;
+                }
+                this.observer.unobserve(img);
             }
         };
         this.observer = new IntersectionObserver(this.handleIntersection);

package/dist/collection/components/markdown/image-markdown-plugin.js

@@ -12,14 +12,16 @@ export function createLazyLoadImagesPlugin(lazyLoadImages = false) {
         }
         return (tree) => {
             visit(tree, 'element', (node) => {
-                if (node.tagName === 'img') {
-                    node.properties = node.properties || {};
-                    node.properties.loading = 'lazy';
-                    if (node.properties.src) {
-                        node.properties['data-src'] = node.properties.src;
-                        node.properties.src = undefined;
-                    }
+                if (node.tagName !== 'img') {
+                    return;
                 }
+                node.properties || (node.properties = {});
+                node.properties.loading = 'lazy';
+                if (!node.properties.src) {
+                    return;
+                }
+                node.properties['data-src'] = node.properties.src;
+                node.properties.src = undefined;
             });
             return tree;
         };

package/dist/collection/components/markdown/link-markdown-plugin.js

@@ -11,17 +11,18 @@ export function createLinksPlugin() {
         return (tree) => {
             visit(tree, 'element', (node) => {
                 var _a, _b;
-                if (node.tagName === 'a') {
-                    const href = (_a = node.properties) === null || _a === void 0 ? void 0 : _a.href;
-                    const title = (_b = node.properties) === null || _b === void 0 ? void 0 : _b.title;
-                    if (!href) {
-                        return;
-                    }
-                    const attributes = getLinkAttributes(href, title);
-                    node.properties.target = attributes.target;
-                    node.properties.rel = attributes.rel;
-                    node.properties.referrerpolicy = attributes.referrerpolicy;
+                if (node.tagName !== 'a') {
+                    return;
                 }
+                const href = (_a = node.properties) === null || _a === void 0 ? void 0 : _a.href;
+                if (!href) {
+                    return;
+                }
+                const title = (_b = node.properties) === null || _b === void 0 ? void 0 : _b.title;
+                const attributes = getLinkAttributes(href, title);
+                node.properties.target = attributes.target;
+                node.properties.rel = attributes.rel;
+                node.properties.referrerpolicy = attributes.referrerpolicy;
             });
             return tree;
         };

package/dist/collection/components/markdown/markdown-exporter.js

@@ -0,0 +1,186 @@
+import { fromDom } from "hast-util-from-dom";
+import { defaultHandlers } from "hast-util-to-mdast";
+import { defaultHandlers as defaultMarkdownHandlers, } from "mdast-util-to-markdown";
+import rehypeRemark from "rehype-remark";
+import remarkGfm from "remark-gfm";
+import remarkParse from "remark-parse";
+import remarkStringify from "remark-stringify";
+import { unified } from "unified";
+/**
+ * Convert rendered markdown content back to markdown, replacing each
+ * whitelisted custom element with the markdown it describes itself as.
+ *
+ * Elements that do not implement {@link MarkdownDescribable} are
+ * converted like any unknown element: their light DOM children are kept,
+ * and an element without children disappears.
+ *
+ * @param container - The element holding the rendered content.
+ * @param whitelist - The custom elements allowed in the content.
+ * @returns The content as GitHub Flavored Markdown.
+ */
+export async function exportMarkdown(container, whitelist) {
+    const tagNames = new Set(whitelist
+        .map((definition) => definition.tagName)
+        .filter(isDescribableTag));
+    // The tree is captured before any description is awaited, so that
+    // content rendered in the meantime cannot end up in the export without
+    // its description.
+    const describableElements = new Map();
+    const tree = fromDom(container, {
+        afterTransform: (domNode, hastNode) => {
+            if (hastNode.type !== 'element') {
+                return;
+            }
+            restoreDeferredImage(hastNode);
+            hideFootnoteBackReference(hastNode);
+            if (domNode instanceof Element && tagNames.has(domNode.localName)) {
+                describableElements.set(hastNode, domNode);
+            }
+        },
+    });
+    await describeElements(describableElements);
+    const handlers = {
+        sup: handleSup,
+        section: handleSection,
+    };
+    for (const tagName of tagNames) {
+        handlers[tagName] = handleCustomElement;
+    }
+    const processor = unified()
+        .use(rehypeRemark, { handlers })
+        .use(remarkGfm)
+        .use(remarkStringify, {
+        bullet: '-',
+        handlers: { break: handleBreak },
+    });
+    const mdast = await processor.run({
+        type: 'root',
+        children: tree.children,
+    });
+    return processor.stringify(mdast).trimEnd();
+}
+/**
+ * The description is kept on the node itself, since `rehype-remark`
+ * works on a clone of the tree. It also becomes the node's only child, so
+ * that whitespace minification treats the element as content and keeps
+ * the spaces around it. An element whose description fails is converted
+ * as if it did not describe itself.
+ * @param elements
+ */
+async function describeElements(elements) {
+    await Promise.all([...elements].map(async ([node, element]) => {
+        try {
+            const description = await element.toMarkdown();
+            node.properties.dataMarkdownDescription = description;
+            node.children = [{ type: 'text', value: description }];
+        }
+        catch (error) {
+            console.error('Failed to describe element as markdown', error);
+        }
+    }));
+}
+const handleCustomElement = (state, node) => {
+    const description = node.properties.dataMarkdownDescription;
+    if (typeof description === 'string') {
+        return parseMarkdown(description);
+    }
+    return state.all(node);
+};
+/**
+ * Write hard line breaks as two trailing spaces rather than a backslash,
+ * since the export is also read as plain text, where the spaces are
+ * invisible.
+ * @param args
+ */
+const handleBreak = (...args) => {
+    const markdown = defaultMarkdownHandlers.break(...args);
+    return markdown === '\\\n' ? '  \n' : markdown;
+};
+/**
+ * Parse a description into mdast nodes. A description that is a single
+ * paragraph gives phrasing content, so that an element inside a
+ * paragraph or list item stays inline.
+ * @param markdown
+ */
+function parseMarkdown(markdown) {
+    const { children } = unified()
+        .use(remarkParse)
+        .use(remarkGfm)
+        .parse(markdown);
+    if (children.length === 1 && children[0].type === 'paragraph') {
+        return children[0].children;
+    }
+    return children;
+}
+/**
+ * An image that has not been scrolled into view yet keeps its URL in
+ * `data-src`, until the lazy loading moves it to `src`.
+ * @param node
+ */
+function restoreDeferredImage(node) {
+    const deferredSrc = node.properties.dataSrc;
+    if (node.tagName === 'img' && !node.properties.src && deferredSrc) {
+        node.properties.src = deferredSrc;
+    }
+}
+/**
+ * The links from a footnote back to its references are recreated when the
+ * markdown is rendered again.
+ * @param node
+ */
+function hideFootnoteBackReference(node) {
+    if (node.tagName === 'a' &&
+        node.properties.dataFootnoteBackref !== undefined) {
+        node.properties.dataMdast = 'ignore';
+    }
+}
+/**
+ * Footnotes are labelled with their rendered numbers. The ids only keep an
+ * encoded, lowercased form of the original labels, which cannot be turned
+ * back into them reliably. A reference shows its footnote's number, and
+ * the definitions are listed in the same order.
+ * @param state
+ * @param node
+ */
+const handleSup = (state, node) => {
+    const link = node.children.find((child) => isElement(child, 'a') &&
+        child.properties.dataFootnoteRef !== undefined);
+    if (!link) {
+        return defaultHandlers.sup(state, node);
+    }
+    const identifier = link.children
+        .map((child) => (child.type === 'text' ? child.value : ''))
+        .join('');
+    return { type: 'footnoteReference', identifier, label: identifier };
+};
+const handleSection = (state, node) => {
+    if (node.properties.dataFootnotes === undefined) {
+        return defaultHandlers.section(state, node);
+    }
+    const list = node.children.find((child) => isElement(child, 'ol'));
+    const items = list === null || list === void 0 ? void 0 : list.children.filter((child) => isElement(child, 'li'));
+    return (items !== null && items !== void 0 ? items : []).map((item, index) => {
+        const identifier = String(index + 1);
+        return {
+            type: 'footnoteDefinition',
+            identifier,
+            label: identifier,
+            children: state.toFlow(state.all(item)),
+        };
+    });
+};
+function isElement(node, tagName) {
+    return node.type === 'element' && node.tagName === tagName;
+}
+/**
+ * Whether the custom element registered for the tag implements
+ * {@link MarkdownDescribable}. Stencil defines a component's methods on
+ * the element's prototype when the tag is registered, before the
+ * component itself has loaded.
+ * @param tagName
+ */
+function isDescribableTag(tagName) {
+    var _a;
+    const prototype = (_a = customElements.get(tagName)) === null || _a === void 0 ? void 0 : _a.prototype;
+    return typeof (prototype === null || prototype === void 0 ? void 0 : prototype.toMarkdown) === 'function';
+}

package/dist/collection/components/markdown/markdown-parser.js

@@ -2,6 +2,7 @@ import { unified } from "unified";
 import remarkParse from "remark-parse";
 import remarkRehype from "remark-rehype";
 import remarkGfm from "remark-gfm";
+import remarkBreaks from "remark-breaks";
 import rehypeParse from "rehype-parse";
 import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
 import rehypeStringify from "rehype-stringify";
@@ -27,12 +28,10 @@ import { createRemoveEmptyParagraphsPlugin } from "./remove-empty-paragraphs-plu
  */
 export async function markdownToHTML(text, options) {
     var _a;
-    if (options === null || options === void 0 ? void 0 : options.forceHardLineBreaks) {
-        text = text.replaceAll(/(?<!\\)([\n\r])/g, '  $1');
-    }
     const file = await unified()
         .use(remarkParse)
         .use(remarkGfm)
+        .use((options === null || options === void 0 ? void 0 : options.forceHardLineBreaks) ? [remarkBreaks] : [])
         .use(remarkRehype, { allowDangerousHtml: true })
         .use(rehypeRaw)
         .use(createLinksPlugin())

package/dist/collection/components/markdown/markdown.js

@@ -39,6 +39,7 @@ import { adaptColorContrast } from "../../util/adapt-color-contrast";
  * @exampleComponent limel-example-markdown-custom-component-with-json-props
  * @exampleComponent limel-example-markdown-remove-empty-paragraphs
  * @exampleComponent limel-example-markdown-adapt-color-contrast
+ * @exampleComponent limel-example-markdown-to-markdown
  * @exampleComponent limel-example-markdown-composite
  */
 export class Markdown {
@@ -97,7 +98,31 @@ export class Markdown {
         this.adaptColorContrast = false;
         this.imageIntersectionObserver = null;
     }
-    async textChanged() {
+    /**
+     * Returns the content as markdown, with every whitelisted custom
+     * element replaced by the markdown it describes itself as.
+     *
+     * Use this to hand the content to a target that cannot render custom
+     * elements, such as the clipboard. An element describes itself by
+     * implementing `MarkdownDescribable`; elements that do not keep
+     * their child content, or are removed if they have none.
+     *
+     * The markdown is generated from the rendered content, so it may be
+     * formatted differently from `value`.
+     *
+     * @alpha
+     * @returns The content as markdown.
+     */
+    async toMarkdown() {
+        await this.rendering;
+        const { exportMarkdown } = await import('./markdown-exporter');
+        return exportMarkdown(this.rootElement, this.cachedCombinedWhitelist);
+    }
+    textChanged() {
+        this.rendering = this.renderMarkdown();
+        return this.rendering;
+    }
+    async renderMarkdown() {
         try {
             this.cleanupImageIntersectionObserver();
             // The whitelist merge and default import live here (not in
@@ -145,7 +170,7 @@ export class Markdown {
         this.cleanupImageIntersectionObserver();
     }
     render() {
-        return (h(Host, { key: 'd10bcceddc2844e43817d406965155f282e21549' }, h("div", { key: '4253c517b72dbd21081e5fe26aaa0e75a91cb7db', id: "markdown", ref: (el) => (this.rootElement = el) })));
+        return (h(Host, { key: 'cb9496c27479dce2acf8005bff7c780190f923ba' }, h("div", { key: 'a48bd187c4b08db7d7b2e105fe4b1c92089d1a57', id: "markdown", ref: (el) => (this.rootElement = el) })));
     }
     setupImageIntersectionObserver() {
         if (this.lazyLoadImages) {
@@ -153,10 +178,11 @@ export class Markdown {
         }
     }
     cleanupImageIntersectionObserver() {
-        if (this.imageIntersectionObserver) {
-            this.imageIntersectionObserver.disconnect();
-            this.imageIntersectionObserver = null;
+        if (!this.imageIntersectionObserver) {
+            return;
         }
+        this.imageIntersectionObserver.disconnect();
+        this.imageIntersectionObserver = null;
     }
     static get is() { return "limel-markdown"; }
     static get encapsulation() { return "shadow"; }
@@ -282,6 +308,33 @@ export class Markdown {
             }
         };
     }
+    static get methods() {
+        return {
+            "toMarkdown": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Returns the content as markdown, with every whitelisted custom\nelement replaced by the markdown it describes itself as.\n\nUse this to hand the content to a target that cannot render custom\nelements, such as the clipboard. An element describes itself by\nimplementing `MarkdownDescribable`; elements that do not keep\ntheir child content, or are removed if they have none.\n\nThe markdown is generated from the rendered content, so it may be\nformatted differently from `value`.",
+                    "tags": [{
+                            "name": "alpha",
+                            "text": undefined
+                        }, {
+                            "name": "returns",
+                            "text": "The content as markdown."
+                        }]
+                }
+            }
+        };
+    }
     static get watchers() {
         return [{
                 "propName": "value",
@@ -320,7 +373,7 @@ function mergeWhitelists(defaults, consumer) {
             merged.set(def.tagName, new Set(def.attributes));
         }
     }
-    return [...merged.entries()].map(([tagName, attrs]) => ({
+    return [...merged].map(([tagName, attrs]) => ({
         tagName,
         attributes: [...attrs],
     }));

package/dist/collection/components/markdown/remove-empty-paragraphs-plugin.js

@@ -9,7 +9,7 @@ export const createRemoveEmptyParagraphsPlugin = (enabled = false) => {
         };
     };
 };
-const NBSP_REGEX = /\u00A0/g;
+const NBSP_REGEX = /\u{A0}/gu;
 const ZERO_WIDTH_HEX_CODES = ['200B', '200C', '200D', 'FEFF'];
 const MEANINGFUL_VOID_ELEMENTS = new Set([
     'audio',
@@ -78,10 +78,9 @@ const isNodeEffectivelyEmpty = (node) => {
         if (isMeaningfulElement(tagName)) {
             return false;
         }
-        if (TREAT_AS_EMPTY_ELEMENTS.has(tagName)) {
-            return true;
-        }
-        if (!Array.isArray(element.children) || element.children.length === 0) {
+        if (TREAT_AS_EMPTY_ELEMENTS.has(tagName) ||
+            !Array.isArray(element.children) ||
+            element.children.length === 0) {
             return true;
         }
         return element.children.every((child) => isNodeEffectivelyEmpty(child));

package/dist/collection/components/masonry-layout/masonry-layout.js

@@ -40,10 +40,11 @@ export class MasonryLayout {
         this.hasRendered = true;
     }
     connectedCallback() {
-        if (this.hasRendered) {
-            this.setupObservers();
-            this.scheduleLayout();
+        if (!this.hasRendered) {
+            return;
         }
+        this.setupObservers();
+        this.scheduleLayout();
     }
     disconnectedCallback() {
         var _a, _b, _c;
@@ -58,7 +59,7 @@ export class MasonryLayout {
         const style = {
             height: `${this.containerHeight}rem`,
         };
-        return (h(Host, { key: '624673859a36747b6bcb08e5e7e8a8fef0a14105', style: style, class: { 'is-laid-out': this.hasRendered } }, h("slot", { key: '0df7ce4bc96c0a42f5bdbb10c835313991d89212' })));
+        return (h(Host, { key: 'eac58da6cc41749eaaae8ca78d9940132c632fba', style: style, class: { 'is-laid-out': this.hasRendered } }, h("slot", { key: 'c551e446908efa397c665301f121a02c2efb068c' })));
     }
     setupObservers() {
         this.resizeObserver = new ResizeObserver(() => {