@unofficialbox/box-open-elements 0.3.0 → 0.4.0

package/dist/components/forms/text-field.js

@@ -1,6 +1,10 @@
 import { FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDescriptionMarkup, formErrorMessageMarkup, } from "../../core/index.js";
 import { boeControl, boeInputControlStyles, boeSpace } from "../../foundations/geometry/index.js";
+import { boeMotionDuration, boeMotionEasing, boeReducedMotionStyles, } from "../../foundations/motion/index.js";
 const DEFAULT_TAG_NAME = "box-text-field";
+const VALID_INPUT_TYPES = new Set(["text", "email", "tel", "url", "password", "search", "number"]);
+const spinnerMarkup = '<span part="spinner" aria-hidden="true"></span>';
+const validMarkup = '<svg part="valid-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M6.5 11L3 7.5l1-1 2.5 2.5L12 3.5l1 1z" fill="currentColor"/></svg>';
 /** Input chrome tracks BUE `@mixin box-inputs` (`src/styles/_inputs.scss`). */
 const textFieldStyles = `
   :host {
@@ -33,6 +37,78 @@ const textFieldStyles = `
     color: var(--boe-token-text-text-placeholder, #909090);
   }
 
+  /* Control wrapper holds the input plus optional leading icon and trailing
+     status. With no adornments it is layout-neutral (default renders unchanged). */
+  [part="control"] {
+    position: relative;
+    display: block;
+  }
+
+  [part="icon"] {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 0.6rem;
+    transform: translateY(-50%);
+    display: inline-flex;
+    align-items: center;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    pointer-events: none;
+  }
+
+  [part="icon"]:not(.has-content) {
+    display: none;
+  }
+
+  [part="icon"]::slotted(*) {
+    inline-size: 1rem;
+    block-size: 1rem;
+    display: block;
+  }
+
+  [part="control"][data-has-icon="true"] [part="input"] {
+    padding-inline-start: 2.1rem;
+  }
+
+  [part="status"] {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: 0.65rem;
+    transform: translateY(-50%);
+    display: none;
+    align-items: center;
+  }
+
+  [part="control"][data-status="loading"] [part="status"],
+  [part="control"][data-status="valid"] [part="status"] {
+    display: inline-flex;
+  }
+
+  [part="control"][data-status="loading"] [part="input"],
+  [part="control"][data-status="valid"] [part="input"] {
+    padding-inline-end: 2.2rem;
+  }
+
+  [part="spinner"] {
+    inline-size: 1rem;
+    block-size: 1rem;
+    border-radius: 999px;
+    border: 2px solid color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 20%, transparent);
+    border-top-color: var(--boe-token-surface-surface-brand, #0061d5);
+    animation: boe-text-field-spin ${boeMotionDuration.spin} ${boeMotionEasing.linear} infinite;
+  }
+
+  @keyframes boe-text-field-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  ${boeReducedMotionStyles('[part="spinner"]', "animation-duration: 1.6s;")}
+
+  [part="valid-icon"] {
+    inline-size: 1.05rem;
+    block-size: 1.05rem;
+    color: var(--boe-token-surface-status-surface-success, #26c281);
+  }
+
   ${boeFormFieldErrorStyles}
   ${boeFormFieldSupportStyles}
 `;
@@ -43,6 +119,9 @@ export class BoxTextFieldElement extends FormAssociatedElement {
             "disabled",
             "label",
             "placeholder",
+            "type",
+            "loading",
+            "valid",
             "value",
         ];
     }
@@ -51,6 +130,31 @@ export class BoxTextFieldElement extends FormAssociatedElement {
     labelEl;
     descriptionEl;
     errorEl;
+    controlEl;
+    iconSlot;
+    statusEl;
+    /** Input type passthrough (text/email/tel/url/password/search/number). */
+    get type() {
+        const value = this.getAttribute("type");
+        return value && VALID_INPUT_TYPES.has(value) ? value : "text";
+    }
+    set type(value) {
+        this.setAttribute("type", value);
+    }
+    /** Shows a trailing spinner (e.g. while validating/looking up asynchronously). */
+    get loading() {
+        return this.hasAttribute("loading");
+    }
+    set loading(value) {
+        this.toggleAttribute("loading", Boolean(value));
+    }
+    /** Shows a trailing success check (explicit valid affirmation). */
+    get valid() {
+        return this.hasAttribute("valid");
+    }
+    set valid(value) {
+        this.toggleAttribute("valid", Boolean(value));
+    }
     get value() {
         return this.valueInternal;
     }
@@ -105,7 +209,11 @@ export class BoxTextFieldElement extends FormAssociatedElement {
       <label part="field">
         <span part="label"></span>
         ${formDescriptionMarkup()}
-        <input type="text" part="input" />
+        <span part="control">
+          <slot name="icon" part="icon"></slot>
+          <input type="text" part="input" />
+          <span part="status" aria-hidden="true"></span>
+        </span>
         ${formErrorMessageMarkup()}
       </label>
     `;
@@ -113,8 +221,12 @@ export class BoxTextFieldElement extends FormAssociatedElement {
         this.descriptionEl = this.shadowRoot.querySelector('[part="description"]');
         this.inputEl = this.shadowRoot.querySelector('[part="input"]');
         this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
+        this.controlEl = this.shadowRoot.querySelector('[part="control"]');
+        this.iconSlot = this.shadowRoot.querySelector('slot[name="icon"]');
+        this.statusEl = this.shadowRoot.querySelector('[part="status"]');
     }
     setupListeners() {
+        this.iconSlot.addEventListener("slotchange", () => this.syncIconSlot());
         this.inputEl.addEventListener("input", event => {
             const nextValue = event.currentTarget.value;
             this.valueInternal = nextValue;
@@ -127,12 +239,35 @@ export class BoxTextFieldElement extends FormAssociatedElement {
             }));
         });
     }
+    syncIconSlot() {
+        if (!this.iconSlot || !this.controlEl) {
+            return;
+        }
+        const hasContent = this.iconSlot.assignedNodes({ flatten: true }).length > 0;
+        this.iconSlot.classList.toggle("has-content", hasContent);
+        this.controlEl.dataset.hasIcon = hasContent ? "true" : "false";
+    }
     update() {
         if (!this.inputEl || !this.labelEl || !this.errorEl) {
             return;
         }
         this.labelEl.textContent = this.label;
+        this.inputEl.type = this.type;
         this.inputEl.placeholder = this.placeholder;
+        this.syncIconSlot();
+        // Trailing status: loading spinner takes precedence over the valid check.
+        if (this.loading) {
+            this.controlEl.dataset.status = "loading";
+            this.statusEl.innerHTML = spinnerMarkup;
+        }
+        else if (this.valid) {
+            this.controlEl.dataset.status = "valid";
+            this.statusEl.innerHTML = validMarkup;
+        }
+        else {
+            this.controlEl.removeAttribute("data-status");
+            this.statusEl.innerHTML = "";
+        }
         if (this.shadowRoot?.activeElement !== this.inputEl) {
             this.inputEl.value = this.valueInternal;
         }

package/dist/components/forms/time-field.d.ts

@@ -21,6 +21,17 @@ export declare class BoxTimeFieldElement extends FormAssociatedElement {
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     protected getFormValue(): FormValue;
     protected restoreFormValue(value: FormValue): void;
+    /**
+     * Parse a human time string in 24-hour (`13:30`) or 12-hour (`1:30 PM`,
+     * `1 pm`) form to canonical `HH:MM`. Returns `""` for empty input and `null`
+     * when it cannot be parsed.
+     */
+    static parseTime(raw: string): string | null;
+    /**
+     * Set the value from a human 12h/24h string. On success updates the value and
+     * returns true; on a parse failure emits `parse-error` and returns false.
+     */
+    setTimeString(value: string): boolean;
     private syncValue;
     protected renderTemplate(): void;
     protected setupListeners(): void;

package/dist/components/forms/time-field.js

@@ -132,6 +132,57 @@ export class BoxTimeFieldElement extends FormAssociatedElement {
             this.update();
         }
     }
+    /**
+     * Parse a human time string in 24-hour (`13:30`) or 12-hour (`1:30 PM`,
+     * `1 pm`) form to canonical `HH:MM`. Returns `""` for empty input and `null`
+     * when it cannot be parsed.
+     */
+    static parseTime(raw) {
+        const value = raw.trim().toLowerCase();
+        if (!value) {
+            return "";
+        }
+        const twentyFour = value.match(/^([01]?\d|2[0-3]):([0-5]\d)$/);
+        if (twentyFour) {
+            return `${twentyFour[1].padStart(2, "0")}:${twentyFour[2]}`;
+        }
+        const twelve = value.match(/^(\d{1,2})(?::([0-5]\d))?\s*(am|pm)$/);
+        if (twelve) {
+            let hours = Number.parseInt(twelve[1], 10);
+            const minutes = twelve[2] ?? "00";
+            if (hours < 1 || hours > 12) {
+                return null;
+            }
+            if (twelve[3] === "pm" && hours !== 12) {
+                hours += 12;
+            }
+            else if (twelve[3] === "am" && hours === 12) {
+                hours = 0;
+            }
+            return `${String(hours).padStart(2, "0")}:${minutes}`;
+        }
+        return null;
+    }
+    /**
+     * Set the value from a human 12h/24h string. On success updates the value and
+     * returns true; on a parse failure emits `parse-error` and returns false.
+     */
+    setTimeString(value) {
+        const parsed = BoxTimeFieldElement.parseTime(value);
+        if (parsed === null) {
+            this.dispatchEvent(new CustomEvent("parse-error", {
+                bubbles: true,
+                composed: true,
+                detail: { value },
+            }));
+            return false;
+        }
+        this.syncValue(parsed);
+        if (this.isRendered) {
+            this.update();
+        }
+        return true;
+    }
     syncValue(nextValue) {
         this.valueInternal = nextValue;
         this.setAttribute("value", nextValue);

package/dist/components/identity/avatar.d.ts

@@ -2,6 +2,9 @@ import { BaseElement } from "../../core/index.js";
 export declare class BoxAvatarElement extends BaseElement {
     static get observedAttributes(): string[];
     private avatarEl;
+    /** Corner indicator: `""`/`none` (default), `online`, or `external`. */
+    get badge(): string;
+    set badge(value: string);
     get alt(): string;
     set alt(value: string);
     get initials(): string;
@@ -16,6 +19,7 @@ export declare class BoxAvatarElement extends BaseElement {
     set tone(value: string);
     protected renderTemplate(): void;
     protected update(): void;
+    private syncBadge;
     private showAvatarFallback;
 }
 export declare const defineBoxAvatarElement: (tagName?: string) => typeof BoxAvatarElement;

package/dist/components/identity/avatar.js

@@ -76,12 +76,49 @@ const avatarStyles = `
   [part="image"][hidden] {
     display: none;
   }
+
+  /* Corner status/external indicator. Absent by default (no layout impact). */
+  [part="badge"] {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    box-sizing: border-box;
+    inline-size: max(8px, calc(var(--avatar-size, ${DEFAULT_SIZE}px) * 0.34));
+    block-size: max(8px, calc(var(--avatar-size, ${DEFAULT_SIZE}px) * 0.34));
+    border-radius: 999px;
+    border: 2px solid var(--boe-token-surface-surface, #ffffff);
+    display: grid;
+    place-items: center;
+    color: #ffffff;
+  }
+
+  [part="badge"][data-badge="online"] {
+    background: var(--boe-token-surface-status-surface-success, #26c281);
+  }
+
+  [part="badge"][data-badge="external"] {
+    background: var(--boe-token-surface-status-surface-inprogress, #f5b31b);
+  }
+
+  [part="badge"] svg {
+    inline-size: 62%;
+    block-size: 62%;
+    fill: currentColor;
+  }
 `;
 export class BoxAvatarElement extends BaseElement {
     static get observedAttributes() {
-        return ["alt", "initials", "name", "size", "src", "tone"];
+        return ["alt", "badge", "initials", "name", "size", "src", "tone"];
     }
     avatarEl;
+    /** Corner indicator: `""`/`none` (default), `online`, or `external`. */
+    get badge() {
+        const value = this.getAttribute("badge");
+        return value === "online" || value === "external" ? value : "none";
+    }
+    set badge(value) {
+        this.setAttribute("badge", value);
+    }
     get alt() {
         return this.getAttribute("alt") ?? this.name;
     }
@@ -171,6 +208,33 @@ export class BoxAvatarElement extends BaseElement {
             }
             this.showAvatarFallback(existingFallback, fallback);
         }
+        this.syncBadge();
+    }
+    syncBadge() {
+        const badge = this.badge;
+        let badgeEl = this.avatarEl.querySelector('[part="badge"]');
+        if (badge === "none") {
+            badgeEl?.remove();
+            return;
+        }
+        if (!badgeEl) {
+            badgeEl = document.createElement("span");
+            badgeEl.setAttribute("part", "badge");
+            this.avatarEl.append(badgeEl);
+        }
+        badgeEl.dataset.badge = badge;
+        if (badge === "external") {
+            badgeEl.setAttribute("aria-label", "External user");
+            badgeEl.setAttribute("role", "img");
+            // Outward arrow marks an external collaborator.
+            badgeEl.innerHTML =
+                '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6 3h7v7h-2V6.4l-6.3 6.3-1.4-1.4L9.6 5H6V3z"/></svg>';
+        }
+        else {
+            badgeEl.setAttribute("aria-label", "Online");
+            badgeEl.setAttribute("role", "img");
+            badgeEl.innerHTML = "";
+        }
     }
     showAvatarFallback(existingFallback, fallback) {
         const fallbackEl = existingFallback ?? document.createElement("span");

package/dist/components/identity/contact-datalist-item.d.ts

@@ -10,7 +10,15 @@ export declare class BoxContactDatalistItemElement extends BaseElement {
     private itemEl;
     private avatarEl;
     private nameEl;
+    private externalEl;
+    private subtitleEl;
     private emailEl;
+    /** Marks the contact as an external collaborator. */
+    get external(): boolean;
+    set external(value: boolean);
+    /** Optional secondary detail line below the email (e.g. role or company). */
+    get subtitle(): string;
+    set subtitle(value: string);
     get name(): string;
     set name(value: string);
     get email(): string;

package/dist/components/identity/contact-datalist-item.js

@@ -71,6 +71,13 @@ const contactStyles = `
     gap: 0.1rem;
   }
 
+  [part="name-row"] {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    min-inline-size: 0;
+  }
+
   [part="name"] {
     font-size: 0.9rem;
     font-weight: 600;
@@ -79,6 +86,35 @@ const contactStyles = `
     white-space: nowrap;
   }
 
+  /* External-collaborator marker beside the name. */
+  [part="external"] {
+    flex: none;
+    font-size: 0.66rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    padding: 1px 5px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 18%, var(--boe-token-surface-surface, #ffffff) 82%);
+    color: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 55%, var(--boe-token-text-text, #222222));
+  }
+
+  [part="external"][hidden] {
+    display: none;
+  }
+
+  [part="subtitle"] {
+    font-size: 0.74rem;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [part="subtitle"][hidden] {
+    display: none;
+  }
+
   [part="email"] {
     font-size: 0.78rem;
     color: var(--boe-token-text-text-secondary, #6f6f6f);
@@ -99,12 +135,28 @@ const contactStyles = `
  */
 export class BoxContactDatalistItemElement extends BaseElement {
     static get observedAttributes() {
-        return ["disabled", "email", "name", "selected", "src", "value"];
+        return ["disabled", "email", "external", "name", "selected", "src", "subtitle", "value"];
     }
     itemEl;
     avatarEl;
     nameEl;
+    externalEl;
+    subtitleEl;
     emailEl;
+    /** Marks the contact as an external collaborator. */
+    get external() {
+        return this.hasAttribute("external");
+    }
+    set external(value) {
+        this.toggleAttribute("external", value);
+    }
+    /** Optional secondary detail line below the email (e.g. role or company). */
+    get subtitle() {
+        return this.getAttribute("subtitle") ?? "";
+    }
+    set subtitle(value) {
+        this.setAttribute("subtitle", value);
+    }
     get name() {
         return this.getAttribute("name") ?? "";
     }
@@ -160,14 +212,20 @@ export class BoxContactDatalistItemElement extends BaseElement {
       <div part="item" role="option">
         <span part="avatar" aria-hidden="true"></span>
         <span part="body">
-          <span part="name"></span>
+          <span part="name-row">
+            <span part="name"></span>
+            <span part="external" hidden>External</span>
+          </span>
           <span part="email" hidden></span>
+          <span part="subtitle" hidden></span>
         </span>
       </div>
     `;
         this.itemEl = this.shadowRoot.querySelector('[part="item"]');
         this.avatarEl = this.shadowRoot.querySelector('[part="avatar"]');
         this.nameEl = this.shadowRoot.querySelector('[part="name"]');
+        this.externalEl = this.shadowRoot.querySelector('[part="external"]');
+        this.subtitleEl = this.shadowRoot.querySelector('[part="subtitle"]');
         this.emailEl = this.shadowRoot.querySelector('[part="email"]');
     }
     setupListeners() {
@@ -215,6 +273,14 @@ export class BoxContactDatalistItemElement extends BaseElement {
             }
         }
         this.nameEl.textContent = this.name;
+        const external = this.external;
+        this.externalEl.hidden = !external;
+        if (external) {
+            this.itemEl.setAttribute("aria-description", "External collaborator");
+        }
+        else {
+            this.itemEl.removeAttribute("aria-description");
+        }
         if (this.email) {
             this.emailEl.hidden = false;
             this.emailEl.textContent = this.email;
@@ -223,6 +289,9 @@ export class BoxContactDatalistItemElement extends BaseElement {
             this.emailEl.hidden = true;
             this.emailEl.textContent = "";
         }
+        const subtitle = this.subtitle;
+        this.subtitleEl.hidden = !subtitle;
+        this.subtitleEl.textContent = subtitle;
     }
 }
 export const defineBoxContactDatalistItemElement = (tagName = DEFAULT_TAG_NAME) => {

package/dist/components/layout/nav-sidebar.js

@@ -88,6 +88,29 @@ const navSidebarStyles = `
     background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 8%, var(--boe-token-surface-surface, #ffffff) 92%);
   }
 
+  /* Grouped nav (NavList): slot a [data-nav-group] element as a section header,
+     and <hr> as a divider. Group labels collapse to nothing in the icon strip. */
+  [part="body"] ::slotted([data-nav-group]) {
+    display: block;
+    padding: 0.5rem 0.45rem 0.15rem;
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part="sidebar"][data-collapsed="true"] ::slotted([data-nav-group]) {
+    display: none;
+  }
+
+  [part="body"] ::slotted(hr) {
+    inline-size: 100%;
+    border: 0;
+    border-top: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 68%, transparent);
+    margin: 0.35rem 0.2rem;
+  }
+
   [part="sidebar"][data-collapsed="true"] ::slotted(a),
   [part="sidebar"][data-collapsed="true"] ::slotted(button) {
     justify-content: center;

package/dist/components/layout/sidebar-toggle-button.d.ts

@@ -9,6 +9,9 @@ import { BaseElement } from "../../core/index.js";
 export declare class BoxSidebarToggleButtonElement extends BaseElement {
     static get observedAttributes(): string[];
     private buttonEl;
+    /** Which side the companion sidebar sits on: `left` (default) or `right`. */
+    get direction(): string;
+    set direction(value: string);
     get expanded(): boolean;
     set expanded(value: boolean);
     get disabled(): boolean;

package/dist/components/layout/sidebar-toggle-button.js

@@ -37,10 +37,19 @@ const sidebarToggleButtonStyles = `
     color: var(--boe-token-text-text, #222222);
   }
 
-  /* Rotate the chevron to point the way the next activation will move. */
+  /* Point the glyph the way the next activation will move (left sidebar default). */
   [part="button"][data-expanded="false"] svg {
     transform: scaleX(-1);
   }
+
+  /* Right-side sidebar mirrors the direction. */
+  [part="button"][data-direction="right"][data-expanded="true"] svg {
+    transform: scaleX(-1);
+  }
+
+  [part="button"][data-direction="right"][data-expanded="false"] svg {
+    transform: none;
+  }
 `;
 /**
  * A disclosure control that expands and collapses a companion `box-nav-sidebar`.
@@ -51,9 +60,16 @@ const sidebarToggleButtonStyles = `
  */
 export class BoxSidebarToggleButtonElement extends BaseElement {
     static get observedAttributes() {
-        return ["controls", "disabled", "expanded", "label"];
+        return ["controls", "disabled", "expanded", "label", "direction"];
     }
     buttonEl;
+    /** Which side the companion sidebar sits on: `left` (default) or `right`. */
+    get direction() {
+        return this.getAttribute("direction") === "right" ? "right" : "left";
+    }
+    set direction(value) {
+        this.setAttribute("direction", value);
+    }
     get expanded() {
         // Default to expanded: a sidebar renders open until the user collapses it.
         return !this.hasAttribute("expanded") || this.getAttribute("expanded") !== "false";
@@ -116,8 +132,11 @@ export class BoxSidebarToggleButtonElement extends BaseElement {
         }
         const expanded = this.expanded;
         this.buttonEl.dataset.expanded = expanded ? "true" : "false";
+        this.buttonEl.dataset.direction = this.direction;
         this.buttonEl.setAttribute("aria-expanded", expanded ? "true" : "false");
         this.buttonEl.setAttribute("aria-label", this.label);
+        // Native hover tooltip reflects the action the next click performs.
+        this.buttonEl.title = expanded ? "Collapse sidebar" : "Expand sidebar";
         if (this.controls) {
             this.buttonEl.setAttribute("aria-controls", this.controls);
         }

package/dist/components/navigation/accordion.d.ts

@@ -6,6 +6,9 @@ type BoxAccordionItem = {
 };
 export declare class BoxAccordionElement extends BaseElement {
     static get observedAttributes(): string[];
+    /** Flat variant with no outer card border/background. */
+    get borderless(): boolean;
+    set borderless(value: boolean);
     private valueInternal;
     private lastItemsJson;
     private accordionEl;

package/dist/components/navigation/accordion.js

@@ -84,11 +84,26 @@ const accordionStyles = `
     display: none;
   }
 
+  /* Borderless variant: drop the outer card chrome, keep row dividers. */
+  :host([borderless]) [part="accordion"] {
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    overflow: visible;
+  }
+
   ${boeNeutralInteractiveStyles('[part="trigger"]')}
 `;
 export class BoxAccordionElement extends BaseElement {
     static get observedAttributes() {
-        return ["items", "label", "value"];
+        return ["items", "label", "value", "borderless"];
+    }
+    /** Flat variant with no outer card border/background. */
+    get borderless() {
+        return this.hasAttribute("borderless");
+    }
+    set borderless(value) {
+        this.toggleAttribute("borderless", Boolean(value));
     }
     valueInternal = "";
     lastItemsJson = "";
@@ -158,7 +173,7 @@ export class BoxAccordionElement extends BaseElement {
               role="region"
               aria-labelledby="${triggerId}"
               ${isOpen ? "" : "hidden"}
-            >${escapeHtml(item.content ?? "")}</div>
+            ><slot name="panel-${escapeHtml(item.value)}">${escapeHtml(item.content ?? "")}</slot></div>
           </section>
         `;
         })