@unofficialbox/box-open-elements 0.1.0

package/dist/components/actions/segmented-control.d.ts

@@ -0,0 +1,27 @@
+import { BaseElement } from "../../core/index.js";
+export interface SegmentedControlOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export declare class BoxSegmentedControlElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private valueInternal;
+    private controlEl;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get label(): string;
+    set label(value: string);
+    get layout(): "attached" | "separated";
+    set layout(value: "attached" | "separated");
+    get options(): SegmentedControlOption[];
+    set options(value: SegmentedControlOption[]);
+    get value(): string;
+    set value(nextValue: string);
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private moveSelection;
+    private moveSelectionTo;
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxSegmentedControlElement: (tagName?: string) => typeof BoxSegmentedControlElement;

package/dist/components/actions/segmented-control.js

@@ -0,0 +1,273 @@
+import { BaseElement } from "../../core/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-segmented-control";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const segmentedControlStyles = `
+  :host {
+    display: inline-block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="control"] {
+    display: inline-flex;
+    align-items: stretch;
+    gap: 0.25rem;
+    padding: 0.25rem;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 84%, var(--boe-token-surface-surface, #ffffff) 16%);
+    border-radius: ${boeRadius.control};
+    background: var(--boe-token-surface-surface-secondary, #fbfbfb);
+    box-shadow: none;
+  }
+
+  [part="control"][data-layout="attached"] {
+    gap: 0;
+  }
+
+  [part="segment"] {
+    appearance: none;
+    font: inherit;
+    font-weight: 600;
+    line-height: 1.2;
+    padding: 0.45em 1em;
+    border: 1px solid transparent;
+    border-radius: ${boeRadius.control};
+    background: transparent;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    cursor: pointer;
+    transition:
+      background-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="segment"]:hover:not(:disabled):not([data-selected="true"]) {
+    background: color-mix(in srgb, var(--boe-token-surface-surface-hover, #f4f4f4) 60%, var(--boe-token-surface-surface, #ffffff) 40%);
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part="segment"][data-selected="true"] {
+    background: var(--boe-token-surface-surface, #ffffff);
+    border-color: color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 70%, var(--boe-token-surface-surface, #ffffff) 30%);
+    color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 84%, var(--boe-token-text-text, #222222) 16%);
+    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
+  }
+
+  [part="segment"]:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent);
+    z-index: 1;
+  }
+
+  [part="segment"]:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+`;
+export class BoxSegmentedControlElement extends BaseElement {
+    static get observedAttributes() {
+        return ["disabled", "label", "layout", "options", "value"];
+    }
+    valueInternal = "";
+    controlEl;
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        if (value) {
+            this.setAttribute("disabled", "");
+        }
+        else {
+            this.removeAttribute("disabled");
+        }
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Segmented Control";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get layout() {
+        return this.getAttribute("layout") === "attached" ? "attached" : "separated";
+    }
+    set layout(value) {
+        this.setAttribute("layout", value);
+    }
+    get options() {
+        const raw = this.getAttribute("options");
+        if (!raw) {
+            return [];
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    set options(value) {
+        this.setAttribute("options", JSON.stringify(value));
+    }
+    get value() {
+        return this.valueInternal;
+    }
+    set value(nextValue) {
+        this.valueInternal = nextValue;
+        this.setAttribute("value", nextValue);
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "value") {
+            this.valueInternal = this.getAttribute("value") ?? "";
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    moveSelection(direction) {
+        const enabledOptions = this.options.filter(option => !option.disabled);
+        if (enabledOptions.length === 0) {
+            return;
+        }
+        const currentIndex = enabledOptions.findIndex(option => option.value === this.valueInternal);
+        const nextIndex = currentIndex < 0
+            ? 0
+            : (currentIndex + direction + enabledOptions.length) % enabledOptions.length;
+        this.moveSelectionTo(nextIndex, enabledOptions);
+    }
+    moveSelectionTo(index, enabledOptions = this.options.filter(option => !option.disabled)) {
+        if (enabledOptions.length === 0) {
+            return;
+        }
+        const nextIndex = Math.max(0, Math.min(enabledOptions.length - 1, index));
+        const nextValue = enabledOptions[nextIndex]?.value ?? "";
+        const focusSegment = (value) => {
+            const nextButton = Array.from(this.controlEl?.querySelectorAll('[part="segment"]') ?? []).find(button => button.dataset.value === value);
+            nextButton?.focus();
+        };
+        if (!nextValue || nextValue === this.valueInternal) {
+            focusSegment(nextValue);
+            return;
+        }
+        this.valueInternal = nextValue;
+        this.setAttribute("value", nextValue);
+        this.dispatchEvent(new CustomEvent("value-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { value: nextValue },
+        }));
+        this.update();
+        focusSegment(nextValue);
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${segmentedControlStyles}</style>
+      <div part="control" role="radiogroup"></div>
+    `;
+        this.controlEl = this.shadowRoot.querySelector('[part="control"]');
+    }
+    update() {
+        if (!this.controlEl) {
+            return;
+        }
+        const options = this.options;
+        const firstEnabledValue = options.find(option => !option.disabled)?.value ?? "";
+        const selectedValue = this.valueInternal || firstEnabledValue;
+        if (selectedValue !== this.valueInternal) {
+            this.valueInternal = selectedValue;
+            this.setAttribute("value", selectedValue);
+        }
+        this.controlEl.dataset.layout = this.layout;
+        this.controlEl.setAttribute("aria-label", this.label);
+        this.controlEl.setAttribute("aria-disabled", String(this.disabled));
+        // Rebuild segments (count may change)
+        this.controlEl.innerHTML = options
+            .map((option, index) => {
+            const position = options.length === 1
+                ? "only"
+                : index === 0
+                    ? "first"
+                    : index === options.length - 1
+                        ? "last"
+                        : "middle";
+            return `
+          <button
+            type="button"
+            part="segment"
+            data-value="${escapeHtml(option.value)}"
+            data-layout="${this.layout}"
+            data-position="${position}"
+            data-selected="${String(option.value === selectedValue)}"
+            role="radio"
+            aria-checked="${String(option.value === selectedValue)}"
+            tabindex="${option.value === selectedValue ? "0" : "-1"}"
+            ${this.disabled || option.disabled ? "disabled" : ""}
+          >
+            ${escapeHtml(option.label)}
+          </button>
+        `;
+        })
+            .join("");
+        this.controlEl.querySelectorAll('[part="segment"]').forEach(button => {
+            button.addEventListener("click", () => {
+                const target = button;
+                if (target.disabled) {
+                    return;
+                }
+                const nextValue = target.dataset.value ?? "";
+                if (!nextValue || nextValue === this.valueInternal) {
+                    return;
+                }
+                this.valueInternal = nextValue;
+                this.setAttribute("value", nextValue);
+                this.dispatchEvent(new CustomEvent("value-changed", {
+                    bubbles: true,
+                    composed: true,
+                    detail: { value: nextValue },
+                }));
+                this.update();
+            });
+            button.addEventListener("keydown", event => {
+                const keyboardEvent = event;
+                if (keyboardEvent.key === "ArrowRight" || keyboardEvent.key === "ArrowDown") {
+                    keyboardEvent.preventDefault();
+                    this.moveSelection(1);
+                    return;
+                }
+                if (keyboardEvent.key === "ArrowLeft" || keyboardEvent.key === "ArrowUp") {
+                    keyboardEvent.preventDefault();
+                    this.moveSelection(-1);
+                    return;
+                }
+                if (keyboardEvent.key === "Home") {
+                    keyboardEvent.preventDefault();
+                    this.moveSelectionTo(0);
+                    return;
+                }
+                if (keyboardEvent.key === "End") {
+                    keyboardEvent.preventDefault();
+                    this.moveSelectionTo(this.options.length - 1);
+                }
+            });
+        });
+    }
+}
+export const defineBoxSegmentedControlElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxSegmentedControlElement);
+    return BoxSegmentedControlElement;
+};

package/dist/components/collections/card.d.ts

@@ -0,0 +1,13 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxCardElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private eyebrowEl;
+    private titleEl;
+    get eyebrow(): string;
+    set eyebrow(value: string);
+    get heading(): string;
+    set heading(value: string);
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxCardElement: (tagName?: string) => typeof BoxCardElement;

package/dist/components/collections/card.js

@@ -0,0 +1,110 @@
+import { BaseElement } from "../../core/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-card";
+const cardStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="card"] {
+    display: grid;
+    gap: 0.55rem;
+    padding: 0.7rem;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, var(--boe-token-surface-surface, #ffffff) 18%);
+    border-radius: ${boeRadius.large};
+    background: var(--boe-token-surface-surface-secondary, #fbfbfb);
+    box-shadow:
+      0 14px 28px rgba(15, 23, 42, 0.04);
+  }
+
+  [part="header"] {
+    display: grid;
+    gap: 0.35rem;
+  }
+
+  [part="eyebrow"] {
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+    font-size: 0.78rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  [part~="title"] {
+    margin: 0;
+    font: inherit;
+    font-size: 1.04rem;
+    font-weight: 700;
+    line-height: 1.25;
+    letter-spacing: -0.02em;
+  }
+
+  [part="body"] {
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    line-height: 1.55;
+  }
+
+  [part="eyebrow"][hidden],
+  [part~="title"][hidden] {
+    display: none;
+  }
+`;
+export class BoxCardElement extends BaseElement {
+    static get observedAttributes() {
+        return ["eyebrow", "heading"];
+    }
+    eyebrowEl;
+    titleEl;
+    get eyebrow() {
+        return this.getAttribute("eyebrow") ?? "";
+    }
+    set eyebrow(value) {
+        this.setAttribute("eyebrow", value);
+    }
+    get heading() {
+        return this.getAttribute("heading") ?? "";
+    }
+    set heading(value) {
+        this.setAttribute("heading", value);
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${cardStyles}</style>
+      <article part="card">
+        <header part="header">
+          <span part="eyebrow" hidden></span>
+          <h2 part="title heading" hidden></h2>
+        </header>
+        <div part="body">
+          <slot></slot>
+        </div>
+      </article>
+    `;
+        this.eyebrowEl = this.shadowRoot.querySelector('[part="eyebrow"]');
+        this.titleEl = this.shadowRoot.querySelector('[part~="title"]');
+    }
+    update() {
+        if (!this.eyebrowEl || !this.titleEl) {
+            return;
+        }
+        const eyebrow = this.eyebrow;
+        const heading = this.heading;
+        this.eyebrowEl.textContent = eyebrow;
+        this.eyebrowEl.hidden = !eyebrow;
+        this.titleEl.textContent = heading;
+        this.titleEl.hidden = !heading;
+    }
+}
+export const defineBoxCardElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxCardElement);
+    return BoxCardElement;
+};

package/dist/components/collections/carousel.d.ts

@@ -0,0 +1,40 @@
+import { BaseElement } from "../../core/index.js";
+type CarouselItem = {
+    eyebrow?: string;
+    title: string;
+    description?: string;
+    imageSrc?: string;
+};
+export declare class BoxCarouselElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private valueInternal;
+    private lastItemsJson;
+    private carouselEl;
+    private labelEl;
+    private stageEl;
+    private mediaEl;
+    private eyebrowEl;
+    private titleEl;
+    private descriptionEl;
+    private controlsEl;
+    private paginationEl;
+    private emptyEl;
+    private previousEl;
+    private nextEl;
+    get label(): string;
+    set label(value: string);
+    get items(): CarouselItem[];
+    set items(value: CarouselItem[]);
+    get value(): number;
+    set value(value: number);
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private normalizeIndex;
+    private emitValueChanged;
+    private setIndex;
+    private changeBy;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxCarouselElement: (tagName?: string) => typeof BoxCarouselElement;
+export {};