@salesforcedevs/dx-components 1.20.14-cb-plain-loading-2 → 1.20.17-cb-plain-loading-1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.20.14-cb-plain-loading-2",
+    "version": "1.20.17-cb-plain-loading-1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/codeBlock/codeBlock.css

@@ -133,7 +133,7 @@ dx-button {
     --dx-g-button-icon-color: var(--dx-g-cloud-blue-vibrant-50);
 }
 
-.code-block-loading-container {
+.code-block-loader {
     position: absolute;
     top: 0;
     left: 0;
@@ -147,6 +147,6 @@ dx-button {
     z-index: 10;
 }
 
-.dx-theme-dark .code-block-loading-container {
+.dx-theme-dark .code-block-loader {
     background-color: rgb(0 0 0 / 90%);
 }

package/src/modules/dx/codeBlock/codeBlock.html

@@ -73,8 +73,8 @@
                 </div>
             </div>
             <div class="code-block-content" lwc:dom="manual"></div>
-            <div class="code-block-loading-container" if:true={showLoaderUI}>
-                <dx-spinner size="large" variant="brand"></dx-spinner>
+            <div class="code-block-loader" if:true={showLoaderUI}>
+                <dx-spinner size="medium" variant="brand"></dx-spinner>
             </div>
         </div>
     </template>

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -31,18 +31,9 @@ export default class CodeBlock extends LightningElement {
     // if it is true, it renders code as is coming instead of wrapping it into html/xml comments tags.
     @api isEncoded = false;
 
-    @api
-    get showLoadingIndicator() {
-        return this._showLoadingIndicator;
-    }
-
-    set showLoadingIndicator(value) {
-        this._showLoadingIndicator = normalizeBoolean(value);
-    }
-
     private _codeBlockRendered: boolean = false;
     private _showLoadingIndicator: boolean = false;
-    private _loaderHeightSet: boolean = false;
+    private _isCbHeightCalculated: boolean = false;
     private markupLangs = ["visualforce", "html", "xml"];
     private componentLoaded: boolean = false;
     private showLanguageDropdown: boolean = false;
@@ -94,7 +85,7 @@ export default class CodeBlock extends LightningElement {
     }
     set codeBlock(value: string) {
         this._codeBlockRendered = false;
-        this._loaderHeightSet = false;
+        this._isCbHeightCalculated = false;
         let match;
         this._codeBlock = (
             (match = preTagRegexp.exec(value.trim())) === null
@@ -103,6 +94,15 @@ export default class CodeBlock extends LightningElement {
         ).trim();
     }
 
+    @api
+    get showLoadingIndicator() {
+        return this._showLoadingIndicator;
+    }
+
+    set showLoadingIndicator(value) {
+        this._showLoadingIndicator = normalizeBoolean(value);
+    }
+
     get updateThemeBtnText(): string {
         return `Switch to ${this.theme === DARK ? "Light" : "Dark"} mode`;
     }
@@ -118,8 +118,8 @@ export default class CodeBlock extends LightningElement {
     get showLoaderUI(): boolean {
         return (
             this.showLoadingIndicator &&
-            !this._codeBlockRendered &&
-            this._loaderHeightSet
+            this._isCbHeightCalculated &&
+            !this._codeBlockRendered
         );
     }
 
@@ -141,31 +141,37 @@ export default class CodeBlock extends LightningElement {
         // If no custom height, calculate from number of lines + padding
         if (this.codeBlock) {
             const lines = this.codeBlock.split("\n").length;
-            const lineHeight = 20; // px
-            const verticalPadding = 28; // 14px top + 14px bottom
-            return lines * lineHeight + verticalPadding;
+
+            const textSmValue =
+                parseFloat(computedStyle.getPropertyValue("--dx-g-text-sm")) ||
+                14;
+            const spacingMlgValue =
+                parseFloat(
+                    computedStyle.getPropertyValue("--dx-g-spacing-mlg")
+                ) || 20;
+
+            const codeLineHeight = spacingMlgValue;
+            const codeVerticalPadding = textSmValue * 2;
+
+            return lines * codeLineHeight + codeVerticalPadding;
         }
 
-        return null; // No height calculation possible
+        return null;
     }
 
-    private showPlainLoader(): void {
+    private setupLoadingIndicator(): void {
         if (!this.showLoadingIndicator) {
             return;
         }
-
         const containerHeight = this.calculateContainerHeight();
         if (containerHeight) {
-            // Set height on the content container for proper positioning
             const contentContainer = this.template.querySelector(
                 ".code-block-content"
             ) as HTMLElement;
             if (contentContainer) {
                 contentContainer.style.height = `${containerHeight}px`;
             }
-
-            // Mark that loader height is set, which will show the loader
-            this._loaderHeightSet = true;
+            this._isCbHeightCalculated = true;
         }
     }
 
@@ -187,7 +193,7 @@ export default class CodeBlock extends LightningElement {
 
     async formatCodeBlock() {
         // Show loading indicator immediately
-        this.showPlainLoader();
+        this.setupLoadingIndicator();
 
         const divEl = this.template.querySelector("div.code-block-content");
         const templateEl = document.createElement("template");
@@ -286,9 +292,8 @@ export default class CodeBlock extends LightningElement {
                     );
                 }
             }
-            // Content is now rendered, hide the loader
-            this._codeBlockRendered = true;
         }
+        this._codeBlockRendered = true;
     }
 
     onLanguageChange(newLang: any) {

package/src/modules/dx/emptyState/emptyState.html

@@ -3,7 +3,7 @@
         <img class={imageClassName} src={imageAssetPath} alt={imageAlt} />
         <img
             class="image-alt-small"
-            src="https://a.sfdcstatic.com/developer-website/images/binary-cloud-circle-small.svg"
+            src="https://a.sfdcstatic.com/developer-website/prod/images/binary-cloud-circle-small.svg"
             alt="Cloud with binary code floating above"
             lwc:if={altVariant}
         />

package/src/modules/dx/emptyState/emptyState.ts

@@ -60,10 +60,10 @@ export default class EmptyState extends LightningElement {
 
     get imageAssetPath() {
         return this.variant === "base"
-            ? `https://a.sfdcstatic.com/developer-website/images/docs-empty-state${
+            ? `https://a.sfdcstatic.com/developer-website/prod/images/docs-empty-state${
                   this.size === "small" ? "-small" : ""
               }.svg`
-            : `https://a.sfdcstatic.com/developer-website/images/binary-cloud-circle${
+            : `https://a.sfdcstatic.com/developer-website/prod/images/binary-cloud-circle${
                   this.size === "small" ? "-small" : ""
               }.svg`;
     }

package/src/modules/dx/error/error.css

@@ -8,9 +8,9 @@
 
 .error_container {
     background-color: #3a49da;
-    background-image: url("https://a.sfdcstatic.com/developer-website/images/bottom-right.svg"),
-        url("https://a.sfdcstatic.com/developer-website/images/lower-left.svg"),
-        url("https://a.sfdcstatic.com/developer-website/images/top-right.svg");
+    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/bottom-right.svg"),
+        url("https://a.sfdcstatic.com/developer-website/prod/images/lower-left.svg"),
+        url("https://a.sfdcstatic.com/developer-website/prod/images/top-right.svg");
     background-position: right bottom, left 90%, right top;
     background-repeat: no-repeat;
     padding: var(--dx-g-spacing-3xl) calc(var(--dx-g-spacing-3xl) + 20px) 130px

package/src/modules/dx/errorFallback/errorFallback.html

@@ -1,7 +1,7 @@
 <template>
     <div class="error-container">
         <img
-            src="https://a.sfdcstatic.com/developer-website/images/error-fallback.svg"
+            src="https://a.sfdcstatic.com/developer-website/prod/images/error-fallback.svg"
             alt="error fallback image"
             class="error-image"
         />

package/src/modules/dx/feature/feature.css

@@ -3,7 +3,7 @@
 
 :host {
     --dx-c-feature-img-box-shadow: 0 6px 30px 0 rgb(0 20 45 / 40%);
-    --dx-c-feature-description-left-img-src: url("https://a.sfdcstatic.com/developer-website/images/feature-backdrop1.svg");
+    --dx-c-feature-description-left-img-src: url("https://a.sfdcstatic.com/developer-website/prod/images/feature-backdrop1.svg");
     --dx-c-feature-description-max-width: 31.75rem;
     --dx-c-feature-img-margin-left: auto;
     --dx-c-feature-img-container-padding: 4rem;
@@ -83,7 +83,7 @@ section {
 
 .description-right .image {
     margin-right: auto;
-    background-image: url("https://a.sfdcstatic.com/developer-website/images/feature-backdrop2.svg");
+    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/feature-backdrop2.svg");
 }
 
 .image-display-container {

package/src/modules/dx/feature/feature.html

@@ -21,7 +21,7 @@
         <div if:true={isDisplay} class="image-display-container">
             <img
                 class="image-display"
-                src="https://a.sfdcstatic.com/developer-website/images/featured-demo-art-blank.svg"
+                src="https://a.sfdcstatic.com/developer-website/prod/images/featured-demo-art-blank.svg"
                 alt={header}
             />
             <div class="image-container">

package/src/modules/dx/featuredContentHeader/featuredContentHeader.css

@@ -221,8 +221,8 @@
 
 .custom-bg-trial::after {
     content: "";
-    background-image: url("https://a.sfdcstatic.com/developer-website/images/trial-left.svg"),
-        url("https://a.sfdcstatic.com/developer-website/images/trial-right.svg");
+    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/trial-left.svg"),
+        url("https://a.sfdcstatic.com/developer-website/prod/images/trial-right.svg");
     background-position: var(--dx-g-page-padding-horizontal) 50px,
         right 15px top;
     background-repeat: no-repeat;
@@ -235,7 +235,7 @@
 
 @media screen and (max-width: 1024px) {
     .custom-bg-trial::after {
-        background-image: url("https://a.sfdcstatic.com/developer-website/images/trial-left.svg");
+        background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/trial-left.svg");
         background-position: 48px 30px;
         background-size: contain;
     }
@@ -243,7 +243,7 @@
 
 .custom-bg-big-moon::after {
     content: "";
-    background-image: url("https://a.sfdcstatic.com/developer-website/images/big-moon.svg");
+    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/big-moon.svg");
     background-position: top right;
     background-repeat: no-repeat;
     position: absolute;
@@ -258,7 +258,7 @@
     justify-content: center;
     align-items: center;
     position: absolute;
-    background-image: url("https://a.sfdcstatic.com/developer-website/images/blue-circle.svg");
+    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/blue-circle.svg");
     top: 110px;
     right: 230px;
     left: unset;

package/src/modules/dx/featuredContentHeader/svgs.ts

@@ -6,10 +6,10 @@ const treesMobile =
 
 // These codey-* ones are a bit of a hack for now: we were only given a PNG and limited time, so we're wrapping the PNG in an SVG.
 const codeyDesktop =
-    '<svg class="codey-desktop" width="381" height="337" viewBox="0 0 381 337" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="381" height="337" xlink:href="https://a.sfdcstatic.com/developer-website/images/podcast-bear.png" />';
+    '<svg class="codey-desktop" width="381" height="337" viewBox="0 0 381 337" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="381" height="337" xlink:href="https://a.sfdcstatic.com/developer-website/prod/images/podcast-bear.png" />';
 
 const codeyMobile =
-    '<svg class="codey-mobile" width="381" height="337" viewBox="0 0 381 337" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="381" height="337" xlink:href="https://a.sfdcstatic.com/developer-website/images/podcast-bear.png" />';
+    '<svg class="codey-mobile" width="381" height="337" viewBox="0 0 381 337" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="381" height="337" xlink:href="https://a.sfdcstatic.com/developer-website/prod/images/podcast-bear.png" />';
 
 const moonDesktop =
     '<svg width="1221" height="507" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M745.819 45.482c0 24.567-19.915 44.482-44.482 44.482s-44.483-19.915-44.483-44.482C656.854 20.916 676.77 1 701.337 1c24.567 0 44.482 19.916 44.482 44.482"/><path d="M745.819 45.482c0 24.567-19.915 44.482-44.482 44.482s-44.483-19.915-44.483-44.482C656.854 20.916 676.77 1 701.337 1c24.567 0 44.482 19.916 44.482 44.482Z" stroke="#90D0FE" stroke-width="2"/><path d="M476.154 420.627a4.095 4.095 0 1 1-8.191 0 4.095 4.095 0 1 1 8.19 0ZM99.154 150.627a4.095 4.095 0 1 1-8.191 0 4.095 4.095 0 1 1 8.19 0ZM1210.142 97.587l-1.518 4.1a1.063 1.063 0 0 1-.631.633l-4.102 1.518c-.933.346-.933 1.664 0 2.009l4.102 1.517c.293.109.523.34.63.633l1.519 4.102c.346.93 1.664.93 2.009 0l1.517-4.102c.109-.293.34-.524.633-.633l4.102-1.517c.932-.345.932-1.663 0-2.01l-4.102-1.517a1.068 1.068 0 0 1-.633-.632l-1.517-4.101c-.345-.933-1.663-.933-2.01 0ZM8.142 490.372l-1.518 4.1a1.067 1.067 0 0 1-.632.633l-4.1 1.518c-.934.345-.934 1.664 0 2.009l4.1 1.517c.293.109.524.34.632.633l1.518 4.1c.345.933 1.664.933 2.01 0l1.516-4.1c.11-.293.34-.524.633-.633l4.101-1.517c.932-.345.932-1.664 0-2.01l-4.1-1.517a1.071 1.071 0 0 1-.634-.632l-1.517-4.101c-.345-.933-1.664-.933-2.009 0ZM127.142 115.587l-1.518 4.1a1.064 1.064 0 0 1-.632.633l-4.1 1.518c-.934.346-.934 1.664 0 2.009l4.1 1.517c.293.109.524.34.632.633l1.518 4.102c.345.93 1.664.93 2.01 0l1.516-4.102c.11-.293.34-.524.633-.633l4.101-1.517c.932-.345.932-1.663 0-2.01l-4.1-1.517a1.068 1.068 0 0 1-.634-.632l-1.517-4.101c-.345-.933-1.664-.933-2.009 0ZM909.009 306.108c-5.999-11.612-9.387-24.793-9.387-38.765 0-11.403 2.257-22.279 6.348-32.206M1067.92 255.215c.568 3.96.862 8.01.862 12.129 0 46.713-37.867 84.58-84.58 84.58-28.474 0-53.664-14.071-68.99-35.64M911.555 224.004c14.768-24.701 41.776-41.24 72.647-41.24 38.302 0 70.658 25.459 81.068 60.378M1055.511 147.787l-3.452 9.329a2.439 2.439 0 0 1-1.44 1.44l-9.329 3.452c-2.121.784-2.121 3.784 0 4.569l9.329 3.452a2.436 2.436 0 0 1 1.44 1.44l3.452 9.329c.785 2.12 3.785 2.12 4.569 0l3.452-9.33a2.441 2.441 0 0 1 1.44-1.44l9.329-3.451c2.121-.785 2.121-3.785 0-4.57l-9.329-3.451a2.444 2.444 0 0 1-1.44-1.44l-3.452-9.33c-.784-2.12-3.784-2.12-4.569 0ZM919.251 376.385c0 5.69-4.614 10.304-10.306 10.304-5.69 0-10.305-4.613-10.305-10.305 0-5.692 4.614-10.306 10.305-10.306 5.692 0 10.306 4.615 10.306 10.307Z" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M984.116 224.502a5.027 5.027 0 1 1-10.054 0 5.027 5.027 0 0 1 10.054 0" fill="#90D0FE"/><path stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M1046.716 254.771h29.772M1087.929 254.771h7.089M902.279 225.33h23.242M870.108 225.33h10.053"/><path d="M893.055 225.33a2.01 2.01 0 1 1-4.021 0 2.01 2.01 0 0 1 4.02 0" fill="#90D0FE"/><path stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M893.425 315.627h31.409"/><path d="M936.898 315.627a2.011 2.011 0 1 1-4.023 0 2.011 2.011 0 0 1 4.023 0" fill="#90D0FE"/><path stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M1013.52 292.398v-16.036M1021.537 284.382l-16.051.002"/></g></svg>';

package/src/modules/dx/footer/footer.css

@@ -118,7 +118,7 @@ footer.signup-variant-no-signup {
     height: 112px;
     width: 110px;
     margin-right: var(--dx-g-spacing-lg);
-    background-image: url("https://a.sfdcstatic.com/developer-website/images/footer-graphic-trees.svg");
+    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/footer-graphic-trees.svg");
     filter: var(--dx-g-svg-filter);
 }
 
@@ -126,7 +126,7 @@ footer.signup-variant-no-signup {
     height: 96px;
     width: 220px;
     margin-right: var(--dx-g-spacing-lg);
-    background-image: url("https://a.sfdcstatic.com/developer-website/images/footer-graphic-mountains-2.svg");
+    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/footer-graphic-mountains-2.svg");
     filter: var(--dx-g-svg-filter);
 }
 
@@ -137,7 +137,7 @@ footer.signup-variant-no-signup {
     bottom: 0;
     height: 56px;
     width: 100px;
-    background-image: url("https://a.sfdcstatic.com/developer-website/images/footer-graphic-mountains-small-2.svg");
+    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/footer-graphic-mountains-small-2.svg");
     filter: var(--dx-g-svg-filter);
 }
 
@@ -145,7 +145,7 @@ footer.signup-variant-no-signup {
     height: 66px;
     width: 52px;
     margin-left: var(--dx-g-spacing-lg);
-    background-image: url("https://a.sfdcstatic.com/developer-website/images/footer-graphic-trees-small.svg");
+    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/footer-graphic-trees-small.svg");
     filter: var(--dx-g-svg-filter);
 }
 

package/src/modules/dx/footer/footer.html

@@ -48,7 +48,7 @@
         >
             <a class="logo" href="/">
                 <img
-                    src="https://a.sfdcstatic.com/developer-website/images/salesforce-logo-corporate.svg"
+                    src="https://a.sfdcstatic.com/developer-website/prod/images/salesforce-logo-corporate.svg"
                     alt="Salesforce logo"
                 />
             </a>

package/src/modules/dx/footer/links.ts

@@ -170,7 +170,7 @@ export const termsLinks = [
     {
         href: "https://www.salesforce.com/form/other/privacy-request/",
         label: "Your Privacy Choices",
-        img: "https://a.sfdcstatic.com/developer-website/images/privacyoptions.svg"
+        img: "https://a.sfdcstatic.com/developer-website/prod/images/privacyoptions.svg"
     },
     {
         href: "https://www.salesforce.com/company/disclosure/",

package/src/modules/dx/input/input.ts

@@ -195,7 +195,7 @@ export default class Input extends LightningElement {
     }
 
     private get shortcutImgSrc() {
-        return `https://a.sfdcstatic.com/developer-website/images/${this.commandKey}.svg`;
+        return `https://a.sfdcstatic.com/developer-website/prod/images/${this.commandKey}.svg`;
     }
 
     private get shortcutImgAlt() {

package/src/modules/dx/logo/logo.ts

@@ -3,7 +3,7 @@ import { LightningElement, api } from "lwc";
 export default class Logo extends LightningElement {
     @api href: string = "/";
     @api imgSrc: string =
-        "https://a.sfdcstatic.com/developer-website/images/salesforce-cloud.svg";
+        "https://a.sfdcstatic.com/developer-website/prod/images/salesforce-cloud.svg";
     @api imgAlt: string = "Salesforce logo";
     @api label!: string;
 }

package/src/modules/dx/searchResults/resultsTemplate.js

@@ -9,7 +9,7 @@ export default html`
     <div class="coveo-show-if-no-results">
         <div class="no-results">
             <img
-                src="https://a.sfdcstatic.com/developer-website/images/binary-cloud-circle-small.svg"
+                src="https://a.sfdcstatic.com/developer-website/prod/images/binary-cloud-circle-small.svg"
                 alt="purple cloud with floating binary numbers above"
             />
             <div class="no-results-info">

package/src/modules/dx/searchResults/searchResults.css

@@ -311,7 +311,7 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 
 .dx-search-header {
     padding: var(--dx-g-spacing-xl);
-    background: url("https://a.sfdcstatic.com/developer-website/images/binary-cloud-trees.svg")
+    background: url("https://a.sfdcstatic.com/developer-website/prod/images/binary-cloud-trees.svg")
             no-repeat 100% 0,
         linear-gradient(
             77deg,
@@ -352,7 +352,7 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 
 @media (min-width: 928px) and (max-width: 1024px) {
     .dx-search-header {
-        background: url("https://a.sfdcstatic.com/developer-website/images/binary-cloud-trees.svg")
+        background: url("https://a.sfdcstatic.com/developer-website/prod/images/binary-cloud-trees.svg")
                 no-repeat 200% 0,
             linear-gradient(
                 77deg,
@@ -380,7 +380,7 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 
 @media (min-width: 768px) and (max-width: 928px) {
     .dx-search-header {
-        background: url("https://a.sfdcstatic.com/developer-website/images/binary-trees.svg")
+        background: url("https://a.sfdcstatic.com/developer-website/prod/images/binary-trees.svg")
                 no-repeat 90% 50%,
             linear-gradient(
                 77deg,
@@ -392,7 +392,7 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 
 @media (max-width: 768px) {
     .dx-search-header {
-        background: url("https://a.sfdcstatic.com/developer-website/images/binary.svg")
+        background: url("https://a.sfdcstatic.com/developer-website/prod/images/binary.svg")
                 no-repeat 90% 50%,
             linear-gradient(
                 77deg,

package/src/modules/dx/sectionBanner/sectionBanner.html

@@ -3,7 +3,7 @@
         <img
             if:false={hideTopGraphic}
             class="graphic"
-            src="https://a.sfdcstatic.com/developer-website/images/dx-section-banner-graphic-1.svg"
+            src="https://a.sfdcstatic.com/developer-website/prod/images/dx-section-banner-graphic-1.svg"
             alt=""
         />
         <div class="content">

package/src/modules/dx/sidebar/sidebar.html

@@ -69,7 +69,7 @@
             <img
                 lwc:if={isSearchLoading}
                 class="loading-skeleton padding-horizontal"
-                src="https://a.sfdcstatic.com/developer-website/images/sidebar-loading.svg"
+                src="https://a.sfdcstatic.com/developer-website/prod/images/sidebar-loading.svg"
                 alt="loading"
             />
             <template

package/src/modules/dx/treeItem/treeItem.html

@@ -16,7 +16,7 @@
     <img
         if:true={showChildrenLoading}
         class="tree-children-loading"
-        src="https://a.sfdcstatic.com/developer-website/images/sidebar-item-loading.svg"
+        src="https://a.sfdcstatic.com/developer-website/prod/images/sidebar-item-loading.svg"
         alt="childrenLoading"
     />
     <template if:true={showChildren} tabindex="0">