@unofficialbox/box-open-elements 0.1.0

package/dist/components/collections/carousel.js

@@ -0,0 +1,406 @@
+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-carousel";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const carouselStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="carousel"] {
+    display: grid;
+    gap: 0.55rem;
+    padding: 0.7rem;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 84%, var(--boe-token-surface-surface, #ffffff) 16%);
+    border-radius: ${boeRadius.large};
+    background: var(--boe-token-surface-surface-secondary, #fbfbfb);
+    box-shadow:
+      0 18px 36px rgba(15, 23, 42, 0.05);
+  }
+
+  [part="label"] {
+    font-size: 0.82rem;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+
+  [part="viewport"] {
+    display: grid;
+    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
+    gap: 0.55rem;
+    align-items: stretch;
+  }
+
+  [part="image"],
+  [part="image-placeholder"] {
+    inline-size: 100%;
+    block-size: 100%;
+    min-block-size: 12rem;
+    border-radius: ${boeRadius.med};
+    object-fit: cover;
+    background:
+      linear-gradient(
+        145deg,
+        color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 28%, var(--boe-token-surface-surface, #ffffff) 72%) 0%,
+        color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 16%, var(--boe-token-surface-surface-secondary, #fbfbfb) 84%) 44%,
+        color-mix(in srgb, var(--boe-token-surface-surface-secondary, #fbfbfb) 78%, var(--boe-token-surface-surface, #ffffff) 22%) 100%
+      );
+    border: 1px solid color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent);
+    box-shadow:
+      0 18px 34px rgba(15, 23, 42, 0.08);
+  }
+
+  [part="content"] {
+    display: grid;
+    gap: 0.55rem;
+    align-content: center;
+    padding: 0.7rem 0.75rem;
+    border: 1px solid color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-stroke-stroke, #e8e8e8) 90%);
+    border-radius: ${boeRadius.med};
+    background: var(--boe-token-surface-surface, #ffffff);
+    box-shadow:
+      0 10px 22px rgba(15, 23, 42, 0.04);
+  }
+
+  [part="eyebrow"] {
+    font-size: 0.82rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+  }
+
+  [part="title"] {
+          margin: 0;
+          font: inherit;
+    font-size: 1.15rem;
+    font-weight: 700;
+    line-height: 1.12;
+    letter-spacing: -0.03em;
+  }
+
+  [part="description"] {
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    line-height: 1.58;
+    max-width: 44ch;
+  }
+
+  [part="controls"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.55rem;
+    padding-top: 0.2rem;
+  }
+
+  [part="nav"] {
+    display: flex;
+    gap: 0.65rem;
+  }
+
+  [part="previous"],
+  [part="next"] {
+    inline-size: 2.45rem;
+    block-size: 2.45rem;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 76%, var(--boe-token-surface-surface, #ffffff) 24%);
+    border-radius: ${boeRadius.control};
+    background: var(--boe-token-surface-surface, #ffffff);
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    font: inherit;
+    cursor: pointer;
+    box-shadow:
+      0 10px 20px rgba(15, 23, 42, 0.04);
+    transition:
+      border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      background ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="pagination"] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.55rem;
+    padding: 0.35rem 0.45rem;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 70%, var(--boe-token-surface-surface, #ffffff) 30%);
+    border-radius: 999px;
+    background: var(--boe-token-surface-surface, #ffffff);
+  }
+
+  [part~="dot"] {
+    inline-size: 0.74rem;
+    block-size: 0.72rem;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 72%, transparent);
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--boe-token-surface-surface, #ffffff) 90%, var(--boe-token-surface-surface-secondary, #fbfbfb) 10%);
+    cursor: pointer;
+    transition: inline-size ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, background ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part~="dot-selected"] {
+    inline-size: 1.4rem;
+    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 16%, var(--boe-token-surface-surface, #ffffff) 84%);
+    border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 24%, transparent);
+  }
+
+  ${boeNeutralInteractiveStyles('[part="previous"]')}
+  ${boeNeutralInteractiveStyles('[part="next"]')}
+  ${boeNeutralInteractiveStyles('[part~="dot"]')}
+
+  [part~="dot-selected"]:hover:not(:disabled),
+  [part~="dot-selected"]:active:not(:disabled) {
+    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 16%, var(--boe-token-surface-surface, #ffffff) 84%);
+    border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 24%, transparent);
+  }
+
+  [part="previous"]:hover:not(:disabled),
+  [part="next"]:hover:not(:disabled) {
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+  }
+
+  [part="empty"],
+  [part="stage"][hidden],
+  [part="controls"][hidden],
+  [part="eyebrow"][hidden],
+  [part="description"][hidden],
+  [part="empty"][hidden] {
+    display: none;
+  }
+
+  [part="empty"]:not([hidden]) {
+    display: block;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    line-height: 1.58;
+  }
+
+  @media (max-width: 720px) {
+    [part="viewport"] {
+      grid-template-columns: 1fr;
+    }
+  }
+`;
+export class BoxCarouselElement extends BaseElement {
+    static get observedAttributes() {
+        return ["items", "label", "value"];
+    }
+    valueInternal = 0;
+    lastItemsJson = "";
+    carouselEl;
+    labelEl;
+    stageEl;
+    mediaEl;
+    eyebrowEl;
+    titleEl;
+    descriptionEl;
+    controlsEl;
+    paginationEl;
+    emptyEl;
+    previousEl;
+    nextEl;
+    get label() {
+        return this.getAttribute("label") ?? "Carousel";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get items() {
+        const raw = this.getAttribute("items");
+        if (!raw) {
+            return [];
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    set items(value) {
+        this.setAttribute("items", JSON.stringify(value));
+    }
+    get value() {
+        return this.valueInternal;
+    }
+    set value(value) {
+        this.valueInternal = this.normalizeIndex(value);
+        this.setAttribute("value", String(this.valueInternal));
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "value") {
+            this.valueInternal = this.normalizeIndex(Number(this.getAttribute("value") ?? "0"));
+        }
+        if (name === "items") {
+            this.valueInternal = this.normalizeIndex(this.valueInternal);
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    normalizeIndex(value) {
+        const maxIndex = Math.max(0, this.items.length - 1);
+        if (!Number.isFinite(value)) {
+            return 0;
+        }
+        return Math.min(maxIndex, Math.max(0, Math.round(value)));
+    }
+    emitValueChanged(index) {
+        this.dispatchEvent(new CustomEvent("value-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { value: index },
+        }));
+    }
+    setIndex(index) {
+        const nextIndex = this.normalizeIndex(index);
+        this.valueInternal = nextIndex;
+        this.setAttribute("value", String(nextIndex));
+        this.emitValueChanged(nextIndex);
+    }
+    changeBy(delta) {
+        if (this.items.length === 0) {
+            return;
+        }
+        const nextIndex = (this.valueInternal + delta + this.items.length) % this.items.length;
+        this.setIndex(nextIndex);
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${carouselStyles}</style>
+      <section part="carousel">
+        <div part="label"></div>
+        <div part="stage">
+          <div part="viewport">
+            <div part="media"></div>
+            <div part="content">
+              <div part="eyebrow" hidden></div>
+              <h2 part="title"></h2>
+              <div part="description" hidden></div>
+            </div>
+          </div>
+        </div>
+        <div part="controls">
+          <div part="nav">
+            <button type="button" part="previous" aria-label="Previous slide">‹</button>
+            <button type="button" part="next" aria-label="Next slide">›</button>
+          </div>
+          <div part="pagination" role="group" aria-label="Slides"></div>
+        </div>
+        <div part="empty" hidden>No items</div>
+      </section>
+    `;
+        this.carouselEl = this.shadowRoot.querySelector('[part="carousel"]');
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.stageEl = this.shadowRoot.querySelector('[part="stage"]');
+        this.mediaEl = this.shadowRoot.querySelector('[part="media"]');
+        this.eyebrowEl = this.shadowRoot.querySelector('[part="eyebrow"]');
+        this.titleEl = this.shadowRoot.querySelector('[part="title"]');
+        this.descriptionEl = this.shadowRoot.querySelector('[part="description"]');
+        this.controlsEl = this.shadowRoot.querySelector('[part="controls"]');
+        this.paginationEl = this.shadowRoot.querySelector('[part="pagination"]');
+        this.emptyEl = this.shadowRoot.querySelector('[part="empty"]');
+        this.previousEl = this.shadowRoot.querySelector('[part="previous"]');
+        this.nextEl = this.shadowRoot.querySelector('[part="next"]');
+    }
+    setupListeners() {
+        this.previousEl.addEventListener("click", () => this.changeBy(-1));
+        this.nextEl.addEventListener("click", () => this.changeBy(1));
+        this.paginationEl.addEventListener("click", event => {
+            const target = event.target?.closest('[part~="dot"]');
+            if (!target || !this.paginationEl.contains(target)) {
+                return;
+            }
+            const index = Number(target.dataset.index ?? "0");
+            this.setIndex(index);
+        });
+        this.carouselEl.addEventListener("keydown", event => {
+            const keyboardEvent = event;
+            if (keyboardEvent.key === "ArrowLeft") {
+                keyboardEvent.preventDefault();
+                this.changeBy(-1);
+                return;
+            }
+            if (keyboardEvent.key === "ArrowRight") {
+                keyboardEvent.preventDefault();
+                this.changeBy(1);
+            }
+        });
+    }
+    update() {
+        if (!this.carouselEl || !this.labelEl || !this.stageEl || !this.mediaEl) {
+            return;
+        }
+        const items = this.items;
+        const itemsJson = this.getAttribute("items") ?? "";
+        const activeItem = items[this.valueInternal] ?? null;
+        const label = this.label;
+        this.carouselEl.setAttribute("aria-label", label);
+        this.labelEl.textContent = label;
+        this.paginationEl.setAttribute("aria-label", `${label} slides`);
+        if (!activeItem) {
+            this.stageEl.hidden = true;
+            this.controlsEl.hidden = true;
+            this.emptyEl.hidden = false;
+            this.lastItemsJson = itemsJson;
+            return;
+        }
+        this.stageEl.hidden = false;
+        this.controlsEl.hidden = false;
+        this.emptyEl.hidden = true;
+        if (activeItem.imageSrc) {
+            this.mediaEl.innerHTML = `<img part="image" src="${escapeHtml(activeItem.imageSrc)}" alt="" />`;
+        }
+        else {
+            this.mediaEl.innerHTML = `<div part="image-placeholder" aria-hidden="true"></div>`;
+        }
+        this.eyebrowEl.textContent = activeItem.eyebrow ?? "";
+        this.eyebrowEl.hidden = !activeItem.eyebrow;
+        this.titleEl.textContent = activeItem.title;
+        this.descriptionEl.textContent = activeItem.description ?? "";
+        this.descriptionEl.hidden = !activeItem.description;
+        if (itemsJson !== this.lastItemsJson) {
+            this.paginationEl.innerHTML = items
+                .map((item, index) => {
+                const dotPart = index === this.valueInternal ? "dot dot-selected" : "dot";
+                return `
+            <button
+              type="button"
+              part="${dotPart}"
+              aria-label="Go to slide ${index + 1}: ${escapeHtml(item.title)}"
+              aria-current="${index === this.valueInternal ? "true" : "false"}"
+              data-index="${index}"
+            ></button>
+          `;
+            })
+                .join("");
+            this.lastItemsJson = itemsJson;
+        }
+        else {
+            this.paginationEl.querySelectorAll('[part~="dot"]').forEach(node => {
+                const button = node;
+                const index = Number(button.dataset.index ?? "0");
+                const selected = index === this.valueInternal;
+                button.setAttribute("part", selected ? "dot dot-selected" : "dot");
+                button.setAttribute("aria-current", String(selected));
+            });
+        }
+    }
+}
+export const defineBoxCarouselElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxCarouselElement);
+    return BoxCarouselElement;
+};

package/dist/components/collections/datalist-item.d.ts

@@ -0,0 +1,32 @@
+import { BaseElement } from "../../core/index.js";
+/**
+ * A single selectable row for a picker/typeahead list — a leading glyph, a
+ * primary label, and optional secondary meta. It is a `role="option"` (meant to
+ * sit inside a host listbox) and emits `select` with its `value` on click or
+ * Enter/Space; `selected` reflects to `aria-selected`. The host owns the list
+ * and its roving focus.
+ */
+export declare class BoxDatalistItemElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private itemEl;
+    private thumbEl;
+    private labelEl;
+    private metaEl;
+    get label(): string;
+    set label(value: string);
+    get meta(): string;
+    set meta(value: string);
+    get icon(): string;
+    set icon(value: string);
+    get value(): string;
+    set value(value: string);
+    get selected(): boolean;
+    set selected(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private choose;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxDatalistItemElement: (tagName?: string) => typeof BoxDatalistItemElement;

package/dist/components/collections/datalist-item.js

@@ -0,0 +1,196 @@
+import { BaseElement } from "../../core/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-datalist-item";
+const datalistItemStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="item"] {
+    display: flex;
+    align-items: center;
+    gap: 0.55rem;
+    padding: 0.5rem 0.65rem;
+    border-radius: ${boeRadius.med};
+    cursor: pointer;
+    color: var(--boe-token-text-text, #222222);
+    transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="item"]:hover {
+    background: var(--boe-token-surface-surface-hover, #f4f4f4);
+  }
+
+  [part="item"][data-selected="true"] {
+    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-surface-surface, #ffffff) 90%);
+  }
+
+  [part="item"][data-disabled="true"] {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  [part="item"]:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 22%, transparent);
+  }
+
+  [part="thumb"] {
+    flex: none;
+    display: grid;
+    place-items: center;
+    inline-size: 1.9rem;
+    block-size: 1.9rem;
+    border-radius: ${boeRadius.large};
+    background: color-mix(in srgb, var(--boe-token-surface-surface-secondary, #fbfbfb) 82%, var(--boe-token-surface-surface, #ffffff) 18%);
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    font-weight: 700;
+    font-size: 0.85rem;
+  }
+
+  [part="body"] {
+    min-inline-size: 0;
+    display: grid;
+    gap: 0.1rem;
+  }
+
+  [part="label"] {
+    font-size: 0.9rem;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [part="meta"] {
+    font-size: 0.78rem;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part="meta"][hidden] {
+    display: none;
+  }
+`;
+/**
+ * A single selectable row for a picker/typeahead list — a leading glyph, a
+ * primary label, and optional secondary meta. It is a `role="option"` (meant to
+ * sit inside a host listbox) and emits `select` with its `value` on click or
+ * Enter/Space; `selected` reflects to `aria-selected`. The host owns the list
+ * and its roving focus.
+ */
+export class BoxDatalistItemElement extends BaseElement {
+    static get observedAttributes() {
+        return ["disabled", "icon", "label", "meta", "selected", "value"];
+    }
+    itemEl;
+    thumbEl;
+    labelEl;
+    metaEl;
+    get label() {
+        return this.getAttribute("label") ?? "";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get meta() {
+        return this.getAttribute("meta") ?? "";
+    }
+    set meta(value) {
+        this.setAttribute("meta", value);
+    }
+    get icon() {
+        return this.getAttribute("icon") ?? "";
+    }
+    set icon(value) {
+        this.setAttribute("icon", value);
+    }
+    get value() {
+        return this.getAttribute("value") ?? this.label;
+    }
+    set value(value) {
+        this.setAttribute("value", value);
+    }
+    get selected() {
+        return this.hasAttribute("selected");
+    }
+    set selected(value) {
+        this.toggleAttribute("selected", value);
+    }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        this.toggleAttribute("disabled", value);
+    }
+    choose() {
+        if (this.disabled) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent("select", {
+            bubbles: true,
+            composed: true,
+            detail: { value: this.value },
+        }));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${datalistItemStyles}</style>
+      <div part="item" role="option">
+        <span part="thumb" aria-hidden="true"></span>
+        <span part="body">
+          <span part="label"></span>
+          <span part="meta" hidden></span>
+        </span>
+      </div>
+    `;
+        this.itemEl = this.shadowRoot.querySelector('[part="item"]');
+        this.thumbEl = this.shadowRoot.querySelector('[part="thumb"]');
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.metaEl = this.shadowRoot.querySelector('[part="meta"]');
+    }
+    setupListeners() {
+        this.itemEl.addEventListener("click", () => this.choose());
+        this.itemEl.addEventListener("keydown", event => {
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                this.choose();
+            }
+        });
+    }
+    update() {
+        if (!this.itemEl || !this.thumbEl || !this.labelEl || !this.metaEl) {
+            return;
+        }
+        const selected = this.selected;
+        const disabled = this.disabled;
+        const meta = this.meta;
+        this.itemEl.setAttribute("aria-selected", selected ? "true" : "false");
+        this.itemEl.dataset.selected = selected ? "true" : "false";
+        this.itemEl.dataset.disabled = disabled ? "true" : "false";
+        this.itemEl.tabIndex = disabled ? -1 : 0;
+        if (disabled) {
+            this.itemEl.setAttribute("aria-disabled", "true");
+        }
+        else {
+            this.itemEl.removeAttribute("aria-disabled");
+        }
+        this.thumbEl.textContent = this.icon;
+        this.labelEl.textContent = this.label;
+        this.metaEl.textContent = meta;
+        this.metaEl.hidden = !meta;
+    }
+}
+export const defineBoxDatalistItemElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxDatalistItemElement);
+    return BoxDatalistItemElement;
+};

package/dist/components/collections/draggable-list.d.ts

@@ -0,0 +1,33 @@
+import { BaseElement } from "../../core/index.js";
+type BoxDraggableListItem = {
+    value: string;
+    label: string;
+};
+/**
+ * A reorderable list. Items arrive via the `items` property; reordering is
+ * available by pointer drag and by keyboard (focus a row's handle, then
+ * ArrowUp/ArrowDown to move it). Every reorder updates `items` and emits a
+ * `reorder` event carrying the moved value, its old/new index, and the new
+ * order. It owns no persistence — the host stores the order.
+ */
+export declare class BoxDraggableListElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private dragValue;
+    private focusValue;
+    private lastItemsJson;
+    private contentEl;
+    private statusEl;
+    get items(): BoxDraggableListItem[];
+    set items(value: BoxDraggableListItem[]);
+    get label(): string;
+    set label(value: string);
+    /** Move the item at `from` to `to`, persist, and announce it. */
+    private moveItem;
+    private indexOf;
+    private renderRows;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxDraggableListElement: (tagName?: string) => typeof BoxDraggableListElement;
+export {};