@unofficialbox/box-open-elements 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kyle @ Unofficial Box
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,125 @@
+# box-open-elements
+
+`box-open-elements` is an open, framework-agnostic design system and web component library for Box-style experiences.
+
+It is a ground-up rebuild of [`box-open-web-components`](https://github.com/unofficialbox/box-open-web-components), carrying forward that repo's validated architecture, docs, and research — without its accumulated baggage — under a new industry-standard taxonomy:
+
+- **Foundations** — design decisions as data: tokens, color, typography, iconography, accessibility, theming
+- **Components** — accessible Web Components for single controls, organized by category
+- **Patterns** — combinations of components that address user objectives with sequences and flows: headless controllers, transport contracts, and composed workflow surfaces, grouped by Box noun
+
+See [docs/taxonomy.md](./docs/taxonomy.md) for the canonical model.
+
+The guiding idea is unchanged: predictable, extensible building blocks that are easy for both human developers and AI coding assistants to compose.
+
+- plain TypeScript modules, no React requirement in the core package
+- state and business logic separate from rendering: controllers and stores, not framework components
+- standard DOM events where a UI layer needs them
+- accessibility semantics and keyboard support as part of the component contract
+- injected transport contracts instead of SDK coupling
+
+## Setup
+
+This package uses Bun as its package manager and task runner.
+
+```bash
+bun install
+```
+
+## Common commands
+
+```bash
+bun run typecheck
+bun run test
+bun run test:coverage
+bun run build
+bun run verify
+bun run docs
+```
+
+`bun run docs` builds the library and serves the component-documentation site at `http://localhost:4600` — browse the full catalog with live previews, events/properties inspectors, and foundations pages.
+
+`bun run verify` is the main safety check and runs typecheck, **coverage-gated** tests (`test:coverage`), and build in sequence.
+
+## Current state
+
+Full catalog parity with the reference repo, plus every scoped gap the research surfaced:
+
+- `src/core` — typed event emitter, controller base class, `BaseElement` (in-place shadow DOM render contract), and `FormAssociatedElement` (native form participation + invalid state)
+- `src/foundations/tokens` — the design-system registry (tokens, icons, illustrations), the Box default bundle, and the Box dark bundle, retoned to Box's modernized Blueprint palette with an Inter typography baseline; shared interaction helpers (`interaction.ts`) for focus/hover/active/disabled
+- `src/foundations/motion` — shared duration/easing vocabulary and reduced-motion CSS helper
+- `src/foundations/icons` — the generated Box iconography manifest and alias layer
+- `tools/style-bridge` — CSS/SCSS → BOE token/selector bridge (`bun run style-bridge`; BUE explorer: `bun run style-bridge:bue-explorer`)
+- `src/components` — 72 components across all ten categories, including the Phase 5 gap fills (`box-chip`, `box-divider`, `box-calendar`, `box-tag-input`, `box-nav-sidebar`, `box-sidebar-toggle-button`, `box-grid-view`, `box-fieldset`, `box-section`, `box-error-mask`, `box-draggable-list`, `box-nudge`, `box-pill-cloud`, `box-pill-selector-dropdown`, `box-datalist-item`, `box-contact-datalist-item`, `box-category-selector`)
+- `src/patterns/content-explorer` — the full headless explorer stack (collection, navigation, selection, actions, facade controller, data-source contracts, Box transport, wire schemas) plus the `box-explorer-*` presentation adapters and the composed `box-content-explorer` surface
+- `src/patterns/{search,item,metadata,share,preview,file-request,task,governance,insights}` — all nine composition/workflow areas, including contracts and wire schemas for metadata and share, the provider-neutral preview adapter stack, the pluggable `box-preview-element`, and the share workflows (`box-presence`, `box-invite-collaborators-modal`, `box-unified-share-modal`, `box-access-stats`, `box-collaborator-avatars`)
+- `packages/box-server` — a dependency-free server-side adapter: CCG auth + REST client, Box-backed explorer/share/metadata data sources, DTO mappers, and framework-neutral route handlers (see [docs/integration/box-server.md](./docs/integration/box-server.md))
+- `packages/react` — optional React wrappers (`@box-open-elements/react`); the validated surface ships `BoxButton`, `BoxTextField`, and `BoxSelect`. React, Angular, Vue, and Svelte progress is tracked in [docs/integration/framework-adapters.md](./docs/integration/framework-adapters.md).
+- `storybook/` — a Bun-native workshop: typed stories → identity-guarded extracted JSON → a self-contained, separately-deployable static site, with no Storybook/Vite runtime or consumer dependency (see [storybook/README.md](./storybook/README.md))
+- Docs site + CI — live GitHub Pages deploy, Storybook-backed variant dropdown, and a strict pixel-diff visual-regression gate in CI
+
+**Fidelity program**: complete — Batches 0–7, the medium/low audit nits, and the design-heavy leftovers have shipped.
+
+Everything in the [components catalog](./docs/components/catalog.md) and [patterns catalog](./docs/patterns/catalog.md) that carries a **built** marker is implemented here with dedicated tests. Remaining catalog entries are intentional generic-component gaps whose current implementations are explorer-bound; future additions are gap-driven rather than phase-gated ports.
+
+## Example: foundations + components
+
+```ts
+import {
+  applyDesignTokens,
+  registerBoxDefaultDesignSystem,
+} from "@unofficialbox/box-open-elements/foundations/tokens";
+import { defineBoxButtonElement } from "@unofficialbox/box-open-elements/components/actions/button";
+
+registerBoxDefaultDesignSystem({ setActive: true });
+applyDesignTokens(document.documentElement, "box-default");
+defineBoxButtonElement();
+```
+
+```html
+<box-button label="Save" tone="primary"></box-button>
+```
+
+Components consume foundation tokens (`--boe-token-*`) with safe fallbacks, so they render sensibly with no design system registered and restyle automatically when one is active.
+
+## Example: headless patterns
+
+```ts
+import { ExplorerSelectionController } from "@unofficialbox/box-open-elements/patterns/content-explorer/selection";
+
+const selection = new ExplorerSelectionController({ selectionMode: "multiple" });
+
+selection.subscribe("selectionChanged", ({ selectedItemIds }) => {
+  console.log(selectedItemIds);
+});
+
+selection.setItems([{ id: "1" }, { id: "2" }]);
+selection.toggleSelection("1");
+```
+
+Workflow patterns begin as headless behavior and gain presentation adapters, so custom React components, Angular templates, Vue SFCs, Svelte components, Web Components, and plain DOM can all consume the same state.
+
+## Import contract
+
+- root exports: `@unofficialbox/box-open-elements`
+- shared runtime: `@unofficialbox/box-open-elements/core`
+- foundations: `@unofficialbox/box-open-elements/foundations/<module>`
+- components: `@unofficialbox/box-open-elements/components/<category>/<name>`
+- patterns: `@unofficialbox/box-open-elements/patterns/<area>` and `@unofficialbox/box-open-elements/patterns/<area>/<module>`
+
+New exports follow the wildcard contract by default instead of adding explicit `package.json` entries. See [docs/api-guidelines.md](./docs/api-guidelines.md).
+
+## Documentation
+
+The docs index is at [docs/README.md](./docs/README.md). The most important entries:
+
+- [Taxonomy](./docs/taxonomy.md)
+- [Architecture](./docs/architecture.md)
+- [API Guidelines](./docs/api-guidelines.md)
+- [Design Tokens](./docs/foundations/tokens.md)
+- [Content Explorer](./docs/patterns/content-explorer.md)
+- [Box Server Integration](./docs/integration/box-server.md)
+
+## Contributing
+
+See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup, the `bun run verify` gate, component conventions, the conformance audits, and the PR workflow. Maintainers: see [RELEASING.md](./RELEASING.md) for publishing to npm.

package/dist/components/actions/button-group.d.ts

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

package/dist/components/actions/button-group.js

@@ -0,0 +1,255 @@
+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-button-group";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const buttonGroupStyles = `
+  :host {
+    display: inline-block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="group"] {
+    display: inline-flex;
+    align-items: stretch;
+    gap: 0.5rem;
+  }
+
+  [part="group"][data-layout="attached"] {
+    gap: 0;
+  }
+
+  [part="button"] {
+    appearance: none;
+    font: inherit;
+    font-weight: 600;
+    line-height: 1.2;
+    padding: 0.45em 1em;
+    border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8);
+    border-radius: ${boeRadius.control};
+    background: var(--boe-token-surface-surface, #ffffff);
+    color: var(--boe-token-text-text, #222222);
+    cursor: pointer;
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+    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="button"][data-layout="attached"] {
+    border-radius: 0;
+  }
+
+  [part="button"][data-layout="attached"][data-position="first"] {
+    border-top-left-radius: ${boeRadius.control};
+    border-bottom-left-radius: ${boeRadius.control};
+  }
+
+  [part="button"][data-layout="attached"][data-position="last"] {
+    border-top-right-radius: ${boeRadius.control};
+    border-bottom-right-radius: ${boeRadius.control};
+  }
+
+  [part="button"][data-layout="attached"][data-position="only"] {
+    border-radius: ${boeRadius.control};
+  }
+
+  [part="button"][data-layout="attached"][data-position="middle"],
+  [part="button"][data-layout="attached"][data-position="last"] {
+    margin-left: -1px;
+  }
+
+  [part="button"]:not([data-selected="true"]):hover {
+    background: var(--boe-token-surface-surface-hover, #f4f4f4);
+    border-color: var(--boe-token-stroke-stroke-hover, #bcbcbc);
+  }
+
+  [part="button"][data-selected="true"] {
+    border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 22%, var(--boe-token-stroke-stroke, #e8e8e8) 78%);
+    background: var(--boe-token-surface-surface, #ffffff);
+    color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 80%, var(--boe-token-text-text, #222222) 20%);
+    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.035);
+    z-index: 1;
+  }
+
+  [part="button"]: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: 2;
+  }
+
+  [part="button"]:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+`;
+export class BoxButtonGroupElement extends BaseElement {
+    static get observedAttributes() {
+        return ["label", "layout", "options", "value"];
+    }
+    valueInternal = "";
+    groupEl;
+    get label() {
+        return this.getAttribute("label") ?? "Button group";
+    }
+    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);
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${buttonGroupStyles}</style>
+      <div part="group" role="radiogroup"></div>
+    `;
+        this.groupEl = this.shadowRoot.querySelector('[part="group"]');
+    }
+    update() {
+        if (!this.groupEl) {
+            return;
+        }
+        const options = this.options;
+        const selectedValue = this.valueInternal || options[0]?.value || "";
+        if (selectedValue !== this.valueInternal) {
+            this.valueInternal = selectedValue;
+            this.setAttribute("value", selectedValue);
+        }
+        this.groupEl.dataset.layout = this.layout;
+        this.groupEl.setAttribute("aria-label", this.label);
+        // Rebuild the option buttons (their count may have changed)
+        this.groupEl.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="button"
+            role="radio"
+            data-value="${escapeHtml(option.value)}"
+            data-layout="${this.layout}"
+            data-position="${position}"
+            data-selected="${String(option.value === selectedValue)}"
+            aria-checked="${String(option.value === selectedValue)}"
+            tabindex="${option.value === selectedValue ? "0" : "-1"}"
+          >
+            ${escapeHtml(option.label)}
+          </button>
+        `;
+        })
+            .join("");
+        this.groupEl.querySelectorAll('[part="button"]').forEach((button, index) => {
+            button.addEventListener("click", () => {
+                const nextValue = button.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;
+                const lastIndex = options.length - 1;
+                let nextIndex = index;
+                if (keyboardEvent.key === "ArrowRight" || keyboardEvent.key === "ArrowDown") {
+                    nextIndex = index >= lastIndex ? 0 : index + 1;
+                }
+                else if (keyboardEvent.key === "ArrowLeft" || keyboardEvent.key === "ArrowUp") {
+                    nextIndex = index <= 0 ? lastIndex : index - 1;
+                }
+                else if (keyboardEvent.key === "Home") {
+                    nextIndex = 0;
+                }
+                else if (keyboardEvent.key === "End") {
+                    nextIndex = lastIndex;
+                }
+                else {
+                    return;
+                }
+                keyboardEvent.preventDefault();
+                const nextOption = options[nextIndex];
+                if (!nextOption) {
+                    return;
+                }
+                this.valueInternal = nextOption.value;
+                this.setAttribute("value", nextOption.value);
+                this.dispatchEvent(new CustomEvent("value-changed", {
+                    bubbles: true,
+                    composed: true,
+                    detail: { value: nextOption.value },
+                }));
+                this.update();
+                queueMicrotask(() => {
+                    const nextButton = this.groupEl?.querySelectorAll('[part="button"]')[nextIndex];
+                    nextButton?.focus();
+                });
+            });
+        });
+    }
+}
+export const defineBoxButtonGroupElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxButtonGroupElement);
+    return BoxButtonGroupElement;
+};

package/dist/components/actions/button.d.ts

@@ -0,0 +1,16 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxButtonElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private buttonEl;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get label(): string;
+    set label(value: string);
+    get size(): string;
+    set size(value: string);
+    get tone(): string;
+    set tone(value: string);
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxButtonElement: (tagName?: string) => typeof BoxButtonElement;

package/dist/components/actions/button.js

@@ -0,0 +1,190 @@
+import { BaseElement } from "../../core/index.js";
+import { boeControl, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-button";
+/**
+ * Visual language tracks box-ui-elements `.btn` / `.btn-primary`
+ * (`src/styles/common/_buttons.scss` + constants/_buttons.scss).
+ * Default tone remains `primary` for API stability; `neutral` is the
+ * secondary/bordered BUE default look.
+ */
+const buttonStyles = `
+  :host {
+    display: inline-block;
+    color: inherit;
+    font: inherit;
+  }
+
+  button {
+    appearance: none;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: ${boeSpace[2]};
+    min-height: ${boeControl.height};
+    padding: 0 ${boeControl.paddingInline};
+    font-family: inherit;
+    font-size: ${boeControl.fontSize};
+    font-weight: 700;
+    line-height: 1;
+    letter-spacing: ${boeControl.letterSpacing};
+    white-space: nowrap;
+    border-radius: ${boeRadius.control};
+    border: 1px solid var(--boe-token-surface-surface-brand, #0061d5);
+    cursor: pointer;
+    background: var(--boe-token-surface-surface-brand, #0061d5);
+    color: var(--boe-token-text-text-on-brand, #ffffff);
+    box-shadow: none;
+    transition:
+      background-color ${boeMotionDuration.fast} ${boeMotionEasing.standard},
+      border-color ${boeMotionDuration.fast} ${boeMotionEasing.standard},
+      color ${boeMotionDuration.fast} ${boeMotionEasing.standard},
+      box-shadow ${boeMotionDuration.fast} ${boeMotionEasing.standard};
+  }
+
+  button:hover:not(:disabled) {
+    background: var(--boe-token-surface-surface-brand-hover, #006ae9);
+    border-color: var(--boe-token-surface-surface-brand-hover, #006ae9);
+  }
+
+  button:active:not(:disabled) {
+    background: var(--boe-token-surface-surface-brand-pressed, #004eac);
+    border-color: var(--boe-token-surface-surface-brand-pressed, #004eac);
+    box-shadow: none;
+  }
+
+  button:focus-visible {
+    outline: none;
+    background: var(--boe-token-surface-surface-brand-hover, #006ae9);
+    border-color: var(--boe-token-surface-surface-brand, #0061d5);
+    box-shadow: ${boeControl.primaryFocusShadow};
+  }
+
+  button[data-tone="neutral"] {
+    background: var(--boe-token-surface-surface, #ffffff);
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    border-color: ${boeControl.buttonBorder};
+    box-shadow: none;
+  }
+
+  button[data-tone="neutral"]:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--boe-token-surface-surface, #ffffff) 97%, black 3%);
+    border-color: ${boeControl.buttonBorder};
+  }
+
+  button[data-tone="neutral"]:active:not(:disabled) {
+    background: color-mix(in srgb, var(--boe-token-surface-surface, #ffffff) 92%, black 8%);
+    border-color: ${boeControl.buttonBorder};
+  }
+
+  button[data-tone="neutral"]:focus-visible {
+    border-color: var(--boe-token-text-text, #222222);
+    box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
+  }
+
+  button[data-tone="danger"] {
+    background: var(--boe-token-surface-status-surface-error, #ed3757);
+    border-color: var(--boe-token-surface-status-surface-error, #ed3757);
+    color: var(--boe-token-text-text-on-brand, #ffffff);
+  }
+
+  button[data-tone="danger"]:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 92%, white 8%);
+    border-color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 92%, white 8%);
+  }
+
+  button[data-tone="danger"]:active:not(:disabled) {
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 88%, black 12%);
+    border-color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 88%, black 12%);
+  }
+
+  button[data-tone="danger"]:focus-visible {
+    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 80%), 0 1px 2px rgb(0 0 0 / 10%);
+  }
+
+  button[data-size="small"] {
+    min-height: 28px;
+    padding: 0 ${boeSpace[3]};
+    font-size: 12px;
+    border-radius: ${boeRadius.control};
+  }
+
+  button[data-size="large"] {
+    min-height: ${boeControl.heightLarge};
+    padding: 0 ${boeSpace[5]};
+  }
+
+  button:disabled {
+    cursor: default;
+    opacity: ${boeControl.disabledOpacity};
+    box-shadow: none;
+  }
+`;
+export class BoxButtonElement extends BaseElement {
+    static get observedAttributes() {
+        return ["disabled", "label", "size", "tone"];
+    }
+    buttonEl;
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        if (value) {
+            this.setAttribute("disabled", "");
+        }
+        else {
+            this.removeAttribute("disabled");
+        }
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Button";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get size() {
+        return this.getAttribute("size") ?? "medium";
+    }
+    set size(value) {
+        this.setAttribute("size", value);
+    }
+    get tone() {
+        return this.getAttribute("tone") ?? "primary";
+    }
+    set tone(value) {
+        this.setAttribute("tone", value);
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${buttonStyles}</style>
+      <button type="button" part="button"></button>
+    `;
+        this.buttonEl = this.shadowRoot.querySelector('[part="button"]');
+    }
+    update() {
+        if (!this.buttonEl) {
+            return;
+        }
+        this.buttonEl.dataset.tone = this.tone;
+        this.buttonEl.dataset.size = this.size;
+        if (this.disabled) {
+            this.buttonEl.setAttribute("disabled", "");
+        }
+        else {
+            this.buttonEl.removeAttribute("disabled");
+        }
+        this.buttonEl.textContent = this.label;
+    }
+}
+export const defineBoxButtonElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxButtonElement);
+    return BoxButtonElement;
+};

package/dist/components/actions/icon-button.d.ts

@@ -0,0 +1,20 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxIconButtonElement extends BaseElement {
+    private readonly handleDesignSystemChange;
+    static get observedAttributes(): string[];
+    private buttonEl;
+    private iconEl;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get icon(): string;
+    set icon(value: string);
+    get label(): string;
+    set label(value: string);
+    get tone(): string;
+    set tone(value: string);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxIconButtonElement: (tagName?: string) => typeof BoxIconButtonElement;