@unofficialbox/box-open-elements 0.1.0

package/dist/components/layout/section.js

@@ -0,0 +1,143 @@
+import { BaseElement } from "../../core/index.js";
+const DEFAULT_TAG_NAME = "box-section";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const TITLE_ID = "box-section-title";
+const sectionStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="section"] {
+    display: grid;
+    gap: 0.6rem;
+  }
+
+  [part="header"] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 0.5rem;
+  }
+
+  [part="header-main"] {
+    display: grid;
+    gap: 0.18rem;
+  }
+
+  [part="eyebrow"] {
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part="title"] {
+    margin: 0;
+    font: inherit;
+    font-size: 1.05rem;
+    font-weight: 700;
+    line-height: 1.25;
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part="description"] {
+    margin: 0;
+    font-size: 0.85rem;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part="actions"] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.35rem;
+  }
+
+  [part="body"] {
+    min-inline-size: 0;
+  }
+`;
+/**
+ * A titled content region: an optional eyebrow, a heading, an optional
+ * description, an `actions` slot for header controls, and a default slot for
+ * content. The `<section>` is labelled by its heading via `aria-labelledby` so
+ * it is announced as a named region. Layout-only — it owns no behavior.
+ */
+export class BoxSectionElement extends BaseElement {
+    static get observedAttributes() {
+        return ["description", "eyebrow", "heading"];
+    }
+    headerMainEl;
+    get heading() {
+        return this.getAttribute("heading") ?? "Section";
+    }
+    set heading(value) {
+        this.setAttribute("heading", value);
+    }
+    get eyebrow() {
+        return this.getAttribute("eyebrow") ?? "";
+    }
+    set eyebrow(value) {
+        this.setAttribute("eyebrow", value);
+    }
+    get description() {
+        return this.getAttribute("description") ?? "";
+    }
+    set description(value) {
+        this.setAttribute("description", value);
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${sectionStyles}</style>
+      <section part="section" aria-labelledby="${TITLE_ID}">
+        <header part="header">
+          <div part="header-main"></div>
+          <div part="actions">
+            <slot name="actions"></slot>
+          </div>
+        </header>
+        <div part="body">
+          <slot></slot>
+        </div>
+      </section>
+    `;
+        this.headerMainEl = this.shadowRoot.querySelector('[part="header-main"]');
+    }
+    update() {
+        if (!this.headerMainEl) {
+            return;
+        }
+        const heading = this.heading;
+        const eyebrow = this.eyebrow;
+        const description = this.description;
+        const eyebrowMarkup = eyebrow ? `<span part="eyebrow">${escapeHtml(eyebrow)}</span>` : "";
+        const descriptionMarkup = description
+            ? `<p part="description">${escapeHtml(description)}</p>`
+            : "";
+        this.headerMainEl.innerHTML = `
+      ${eyebrowMarkup}
+      <h2 part="title heading" id="${TITLE_ID}">${escapeHtml(heading)}</h2>
+      ${descriptionMarkup}
+    `;
+    }
+}
+export const defineBoxSectionElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxSectionElement);
+    return BoxSectionElement;
+};

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

@@ -0,0 +1,26 @@
+import { BaseElement } from "../../core/index.js";
+/**
+ * A disclosure control that expands and collapses a companion `box-nav-sidebar`.
+ * It owns only its own `expanded` state and announces changes with a `toggle`
+ * event (`detail.expanded`); a host wires that to the sidebar's `collapsed`
+ * property. `controls` reflects to `aria-controls` so assistive tech can tie the
+ * button to the region it operates.
+ */
+export declare class BoxSidebarToggleButtonElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private buttonEl;
+    get expanded(): boolean;
+    set expanded(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get label(): string;
+    set label(value: string);
+    get controls(): string;
+    set controls(value: string);
+    /** Flip the expanded state and announce it, unless disabled. */
+    toggle(): void;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxSidebarToggleButtonElement: (tagName?: string) => typeof BoxSidebarToggleButtonElement;

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

@@ -0,0 +1,137 @@
+import { BaseElement } from "../../core/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-sidebar-toggle-button";
+const sidebarToggleButtonStyles = `
+  :host {
+    display: inline-block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="button"] {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 2.1rem;
+    block-size: 2.1rem;
+    padding: 0;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
+    border-radius: ${boeRadius.control};
+    background: var(--boe-token-surface-surface, #ffffff);
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    cursor: pointer;
+    transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="button"] svg {
+    inline-size: 1.1rem;
+    block-size: 1.1rem;
+  }
+
+  ${boeNeutralInteractiveStyles('[part="button"]')}
+
+  [part="button"]:hover:not(:disabled) {
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  /* Rotate the chevron to point the way the next activation will move. */
+  [part="button"][data-expanded="false"] svg {
+    transform: scaleX(-1);
+  }
+`;
+/**
+ * A disclosure control that expands and collapses a companion `box-nav-sidebar`.
+ * It owns only its own `expanded` state and announces changes with a `toggle`
+ * event (`detail.expanded`); a host wires that to the sidebar's `collapsed`
+ * property. `controls` reflects to `aria-controls` so assistive tech can tie the
+ * button to the region it operates.
+ */
+export class BoxSidebarToggleButtonElement extends BaseElement {
+    static get observedAttributes() {
+        return ["controls", "disabled", "expanded", "label"];
+    }
+    buttonEl;
+    get expanded() {
+        // Default to expanded: a sidebar renders open until the user collapses it.
+        return !this.hasAttribute("expanded") || this.getAttribute("expanded") !== "false";
+    }
+    set expanded(value) {
+        this.setAttribute("expanded", value ? "true" : "false");
+    }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        this.toggleAttribute("disabled", value);
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Toggle sidebar";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get controls() {
+        return this.getAttribute("controls") ?? "";
+    }
+    set controls(value) {
+        this.setAttribute("controls", value);
+    }
+    /** Flip the expanded state and announce it, unless disabled. */
+    toggle() {
+        if (this.disabled) {
+            return;
+        }
+        this.expanded = !this.expanded;
+        this.dispatchEvent(new CustomEvent("toggle", {
+            bubbles: true,
+            composed: true,
+            detail: { expanded: this.expanded },
+        }));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${sidebarToggleButtonStyles}</style>
+      <button type="button" part="button">
+        <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+          <path d="M2.5 4h11M2.5 8h11M2.5 12h7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+        </svg>
+      </button>
+    `;
+        this.buttonEl = this.shadowRoot.querySelector('[part="button"]');
+    }
+    setupListeners() {
+        // A native <button> turns Enter/Space into a click, so one listener covers
+        // pointer and keyboard activation.
+        this.buttonEl.addEventListener("click", () => this.toggle());
+    }
+    update() {
+        if (!this.buttonEl) {
+            return;
+        }
+        const expanded = this.expanded;
+        this.buttonEl.dataset.expanded = expanded ? "true" : "false";
+        this.buttonEl.setAttribute("aria-expanded", expanded ? "true" : "false");
+        this.buttonEl.setAttribute("aria-label", this.label);
+        if (this.controls) {
+            this.buttonEl.setAttribute("aria-controls", this.controls);
+        }
+        else {
+            this.buttonEl.removeAttribute("aria-controls");
+        }
+        this.buttonEl.disabled = this.disabled;
+    }
+}
+export const defineBoxSidebarToggleButtonElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxSidebarToggleButtonElement);
+    return BoxSidebarToggleButtonElement;
+};

package/dist/components/layout/split-view.d.ts

@@ -0,0 +1,19 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxSplitViewElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private isResizing;
+    private splitViewEl;
+    private separatorEl;
+    get label(): string;
+    set label(value: string);
+    get ratio(): number;
+    set ratio(value: number);
+    get resizable(): boolean;
+    set resizable(value: boolean);
+    private setRatioFromResize;
+    private stopResize;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxSplitViewElement: (tagName?: string) => typeof BoxSplitViewElement;

package/dist/components/layout/split-view.js

@@ -0,0 +1,157 @@
+import { BaseElement } from "../../core/index.js";
+const DEFAULT_TAG_NAME = "box-split-view";
+const splitViewStyles = `
+  :host {
+    display: block;
+  }
+
+  [part="split-view"] {
+    display: grid;
+    align-items: stretch;
+  }
+
+  [part="primary"],
+  [part="secondary"] {
+    min-width: 0;
+  }
+
+  [part="separator"] {
+    position: relative;
+    display: grid;
+    place-items: center;
+    cursor: col-resize;
+    touch-action: none;
+  }
+
+  [part="separator"][hidden] {
+    display: none;
+  }
+
+  [part="separator"]::before {
+    content: "";
+    width: 1px;
+    height: 100%;
+    background: color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
+  }
+`;
+export class BoxSplitViewElement extends BaseElement {
+    static get observedAttributes() {
+        return ["label", "ratio", "resizable"];
+    }
+    isResizing = false;
+    splitViewEl;
+    separatorEl;
+    get label() {
+        return this.getAttribute("label") ?? "Split View";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get ratio() {
+        const raw = Number(this.getAttribute("ratio") ?? "0.38");
+        if (!Number.isFinite(raw)) {
+            return 0.38;
+        }
+        return Math.max(0.2, Math.min(0.8, raw));
+    }
+    set ratio(value) {
+        this.setAttribute("ratio", String(value));
+    }
+    get resizable() {
+        return this.hasAttribute("resizable");
+    }
+    set resizable(value) {
+        this.toggleAttribute("resizable", value);
+    }
+    setRatioFromResize(nextRatio) {
+        const clamped = Math.max(0.2, Math.min(0.8, nextRatio));
+        const previous = this.ratio;
+        if (previous === clamped) {
+            return;
+        }
+        this.setAttribute("ratio", String(clamped));
+        this.dispatchEvent(new CustomEvent("ratio-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { ratio: clamped },
+        }));
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    stopResize(pointerId) {
+        this.isResizing = false;
+        if (typeof pointerId === "number") {
+            this.separatorEl.releasePointerCapture?.(pointerId);
+        }
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${splitViewStyles}</style>
+      <section part="split-view">
+        <div part="primary">
+          <slot name="primary"></slot>
+        </div>
+        <div part="separator" role="separator" aria-orientation="vertical" aria-label="Resize panels" hidden></div>
+        <div part="secondary">
+          <slot></slot>
+        </div>
+      </section>
+    `;
+        this.splitViewEl = this.shadowRoot.querySelector('[part="split-view"]');
+        this.separatorEl = this.shadowRoot.querySelector('[part="separator"]');
+    }
+    setupListeners() {
+        this.separatorEl.addEventListener("pointerdown", event => {
+            const pointerEvent = event;
+            this.isResizing = true;
+            this.separatorEl.setPointerCapture?.(pointerEvent.pointerId);
+            document.body.style.cursor = "col-resize";
+            document.body.style.userSelect = "none";
+        });
+        this.separatorEl.addEventListener("pointermove", event => {
+            const pointerEvent = event;
+            if (!this.isResizing) {
+                return;
+            }
+            const rect = this.getBoundingClientRect();
+            if (!rect.width) {
+                return;
+            }
+            const nextRatio = Math.max(0.2, Math.min(0.8, (pointerEvent.clientX - rect.left) / rect.width));
+            this.setRatioFromResize(nextRatio);
+        });
+        this.separatorEl.addEventListener("pointerup", event => {
+            this.stopResize(event.pointerId);
+        });
+        this.separatorEl.addEventListener("pointercancel", event => {
+            this.stopResize(event.pointerId);
+        });
+    }
+    update() {
+        if (!this.splitViewEl || !this.separatorEl) {
+            return;
+        }
+        const ratioPercent = `${Math.round(this.ratio * 100)}%`;
+        const resizable = this.resizable;
+        const splitColumns = resizable
+            ? `minmax(180px, ${ratioPercent}) 12px minmax(0, 1fr)`
+            : `minmax(180px, ${ratioPercent}) minmax(0, 1fr)`;
+        this.splitViewEl.style.gridTemplateColumns = splitColumns;
+        this.splitViewEl.setAttribute("aria-label", this.label);
+        this.separatorEl.hidden = !resizable;
+    }
+}
+export const defineBoxSplitViewElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxSplitViewElement);
+    return BoxSplitViewElement;
+};

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

@@ -0,0 +1,25 @@
+import { BaseElement } from "../../core/index.js";
+type BoxAccordionItem = {
+    content?: string;
+    label: string;
+    value: string;
+};
+export declare class BoxAccordionElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private valueInternal;
+    private lastItemsJson;
+    private accordionEl;
+    get label(): string;
+    set label(value: string);
+    get items(): BoxAccordionItem[];
+    set items(value: BoxAccordionItem[]);
+    get value(): string;
+    set value(nextValue: string);
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private renderItemsMarkup;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxAccordionElement: (tagName?: string) => typeof BoxAccordionElement;
+export {};