@spfx-fast/sharepoint-ui 0.0.0-stage → 0.4.1

package/dist/elements/breadcrumb.js

@@ -0,0 +1,233 @@
+import { base } from "./shared.js";
+import { buttonControlCss } from "./button.js";
+export function defineBreadcrumb() {
+    if (customElements.get("spui-breadcrumb"))
+        return;
+    class SpuiBreadcrumb extends HTMLElement {
+        static observedAttributes = ["label", "focus-mode", "size", "separator", "aria-label"];
+        observer;
+        events;
+        connectedCallback() {
+            if (!this.shadowRoot)
+                this.render();
+            this.observer = new MutationObserver(() => this.syncItems());
+            this.observer.observe(this, { childList: true, subtree: true });
+            this.events?.abort();
+            this.events = new AbortController();
+            this.addEventListener("keydown", event => this.onKeyDown(event), { signal: this.events.signal });
+            this.addEventListener("focusin", event => this.onFocusIn(event), { signal: this.events.signal });
+            queueMicrotask(() => this.syncItems());
+        }
+        disconnectedCallback() { this.observer?.disconnect(); this.events?.abort(); }
+        attributeChangedCallback(name) {
+            if (!this.isConnected)
+                return;
+            if (name === "label" || name === "aria-label") {
+                const nav = this.shadowRoot?.querySelector("nav");
+                const label = this.getAttribute("aria-label") ?? this.getAttribute("label") ?? "Breadcrumb";
+                nav?.setAttribute("aria-label", label);
+            }
+            if (name === "separator")
+                this.style.setProperty("--spui-breadcrumb-separator", JSON.stringify(this.getAttribute("separator") ?? "›"));
+            if (name === "focus-mode")
+                this.syncItems();
+        }
+        listRoot() { return this.querySelector(":scope > [slot=list]") ?? this; }
+        items() { return [...this.listRoot().children].filter((child) => child.localName === "spui-breadcrumb-item"); }
+        linkFor(item) {
+            const child = [...item.children].find(element => element.localName === "spui-link" || element.localName === "spui-breadcrumb-button" || element.matches("a,button,[tabindex]"));
+            if (!child)
+                return null;
+            return child.localName === "spui-link" || child.localName === "spui-breadcrumb-button" ? child.shadowRoot?.querySelector("a,button") ?? null : child;
+        }
+        syncItems() {
+            const items = this.items();
+            const explicitDivider = [...this.listRoot().children].some(child => child.localName === "spui-breadcrumb-divider");
+            items.forEach(item => explicitDivider ? item.setAttribute("data-explicit-divider", "") : item.removeAttribute("data-explicit-divider"));
+            const links = items.map(item => this.linkFor(item));
+            const active = links.findIndex(link => link?.matches(":focus"));
+            if (active >= 0)
+                this.dataset.rovingIndex = String(active);
+            const selected = Math.max(0, Math.min(Number(this.dataset.rovingIndex ?? 0), Math.max(0, links.length - 1)));
+            links.forEach((link, index) => {
+                if (!link)
+                    return;
+                if (!link.hasAttribute("data-spui-breadcrumb-tabindex"))
+                    link.setAttribute("data-spui-breadcrumb-tabindex", link.getAttribute("tabindex") ?? "__unset");
+                if (this.getAttribute("focus-mode") === "arrow")
+                    link.tabIndex = index === selected ? 0 : -1;
+                else {
+                    const original = link.getAttribute("data-spui-breadcrumb-tabindex");
+                    if (original === "__unset")
+                        link.removeAttribute("tabindex");
+                    else if (original !== null)
+                        link.setAttribute("tabindex", original);
+                }
+            });
+        }
+        onFocusIn(event) {
+            const path = event.composedPath();
+            const index = this.items().findIndex(item => path.includes(item));
+            if (index >= 0 && this.getAttribute("focus-mode") === "arrow") {
+                this.dataset.rovingIndex = String(index);
+                this.syncItems();
+            }
+        }
+        onKeyDown(event) {
+            if (this.getAttribute("focus-mode") !== "arrow")
+                return;
+            const items = this.items();
+            const links = items.map(item => this.linkFor(item));
+            const actionable = links.flatMap((link, index) => link ? [index] : []);
+            if (!actionable.length)
+                return;
+            const path = event.composedPath();
+            const current = items.findIndex(item => path.includes(item));
+            if (current < 0)
+                return;
+            const currentAction = actionable.indexOf(current);
+            if (currentAction < 0)
+                return;
+            const rtl = getComputedStyle(this).direction === "rtl";
+            let nextAction = -1;
+            if (event.key === (rtl ? "ArrowLeft" : "ArrowRight"))
+                nextAction = (currentAction + 1) % actionable.length;
+            else if (event.key === (rtl ? "ArrowRight" : "ArrowLeft"))
+                nextAction = (currentAction - 1 + actionable.length) % actionable.length;
+            else if (event.key === "Home")
+                nextAction = 0;
+            else if (event.key === "End")
+                nextAction = actionable.length - 1;
+            if (nextAction < 0)
+                return;
+            const next = actionable[nextAction];
+            const link = links[next];
+            if (!link)
+                return;
+            event.preventDefault();
+            this.dataset.rovingIndex = String(next);
+            this.syncItems();
+            link.focus();
+        }
+        render() {
+            const shadow = this.attachShadow({ mode: "open" });
+            const nav = document.createElement("nav");
+            nav.setAttribute("aria-label", this.getAttribute("aria-label") ?? this.getAttribute("label") ?? "Breadcrumb");
+            nav.part.add("navigation");
+            const list = document.createElement("ol");
+            list.part.add("list");
+            list.setAttribute("role", "list");
+            list.append(document.createElement("slot"));
+            const listSlot = document.createElement("slot");
+            listSlot.name = "list";
+            listSlot.addEventListener("slotchange", () => {
+                const assignedList = listSlot.assignedElements()[0];
+                if (assignedList instanceof HTMLElement && !assignedList.hasAttribute("role"))
+                    assignedList.setAttribute("role", "list");
+                this.syncItems();
+            });
+            listSlot.append(list);
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:block;min-width:0;--spui-breadcrumb-separator:${JSON.stringify(this.getAttribute("separator") ?? "›")}}nav{min-width:0;color:var(--spui-ui-muted,var(--spui-semantic-body-text,#616161));font-family:var(--spui-font-family,inherit);font-size:var(--spui-breadcrumb-font-size,14px)}ol,::slotted([slot=list]){display:flex;flex-wrap:wrap;align-items:center;gap:0;min-width:0;margin:0;padding:0;list-style:none}:host([size=small]) nav{--spui-breadcrumb-font-size:12px}:host([size=large]) nav{--spui-breadcrumb-font-size:16px}:host([size=medium]),:host(:not([size])){--spui-breadcrumb-item-gap:10px}::slotted(spui-breadcrumb-item){--spui-breadcrumb-separator-gap:var(--spui-breadcrumb-item-gap,10px)}@media(forced-colors:active){nav{color:CanvasText}}`;
+            nav.append(listSlot);
+            shadow.append(style, nav);
+        }
+    }
+    customElements.define("spui-breadcrumb", SpuiBreadcrumb);
+}
+export function defineBreadcrumbItem() {
+    if (customElements.get("spui-breadcrumb-item"))
+        return;
+    class SpuiBreadcrumbItem extends HTMLElement {
+        static observedAttributes = ["current", "size"];
+        connectedCallback() { if (!this.shadowRoot)
+            this.render(); this.sync(); }
+        attributeChangedCallback() { if (this.isConnected)
+            this.sync(); }
+        sync() {
+            this.setAttribute("role", "listitem");
+            if (this.hasAttribute("current"))
+                this.setAttribute("aria-current", "page");
+            else if (this.getAttribute("aria-current") === "page")
+                this.removeAttribute("aria-current");
+        }
+        render() {
+            const shadow = this.attachShadow({ mode: "open" });
+            const slot = document.createElement("slot");
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:inline-flex;flex:none;align-items:center;min-width:0;color:var(--spui-ui-muted,var(--spui-semantic-body-text,#616161));font:inherit}:host([current]){color:var(--spui-ui-text,var(--spui-semantic-body-text,#323130));font-weight:600}:host([size=small]){font-size:12px}:host([size=large]){font-size:16px}:host(:not(:last-child):not([data-explicit-divider]))::after{content:var(--spui-breadcrumb-separator,"›");display:inline-block;margin-inline-start:var(--spui-breadcrumb-separator-gap,10px);color:var(--spui-ui-stroke,var(--spui-semantic-body-divider,#a19f9d))}:host-context([dir=rtl]):not(:last-child):not([data-explicit-divider])::after{transform:scaleX(-1)}@media(forced-colors:active){:host{color:CanvasText}:host(:not(:last-child):not([data-explicit-divider]))::after{color:CanvasText}}`;
+            shadow.append(style, slot);
+        }
+    }
+    customElements.define("spui-breadcrumb-item", SpuiBreadcrumbItem);
+}
+export function defineBreadcrumbDivider() {
+    if (customElements.get("spui-breadcrumb-divider"))
+        return;
+    class SpuiBreadcrumbDivider extends HTMLElement {
+        connectedCallback() {
+            if (this.shadowRoot)
+                return;
+            this.setAttribute("role", "presentation");
+            this.setAttribute("aria-hidden", "true");
+            const shadow = this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:inline-flex;flex:none;align-items:center;justify-content:center;padding-inline:var(--spui-breadcrumb-item-gap,10px);color:var(--spui-ui-stroke,var(--spui-semantic-body-divider,#a19f9d));font:inherit}:host-context([dir=rtl]){transform:scaleX(-1)}@media(forced-colors:active){:host{color:CanvasText}}`;
+            const slot = document.createElement("slot");
+            if (!this.childNodes.length)
+                this.textContent = "›";
+            shadow.append(style, slot);
+        }
+    }
+    customElements.define("spui-breadcrumb-divider", SpuiBreadcrumbDivider);
+}
+export function defineBreadcrumbButton() {
+    if (customElements.get("spui-breadcrumb-button"))
+        return;
+    class SpuiBreadcrumbButton extends HTMLElement {
+        static observedAttributes = ["href", "target", "rel", "type", "disabled", "disabled-focusable", "current", "size", "aria-label", "aria-current", "tabindex", "title"];
+        connectedCallback() { this.render(); }
+        attributeChangedCallback() { if (this.isConnected)
+            this.render(); }
+        render() {
+            const shadow = this.shadowRoot ?? this.attachShadow({ mode: "open", delegatesFocus: true });
+            const href = this.getAttribute("href");
+            const control = document.createElement(href !== null ? "a" : "button");
+            if (href !== null) {
+                control.setAttribute("href", href);
+                for (const name of ["target", "rel"]) {
+                    const value = this.getAttribute(name);
+                    if (value !== null)
+                        control.setAttribute(name, value);
+                }
+            }
+            else
+                control.type = this.getAttribute("type") === "submit" ? "submit" : "button";
+            const disabled = this.hasAttribute("disabled");
+            const disabledFocusable = this.hasAttribute("disabled-focusable");
+            if (disabled && href === null && !disabledFocusable)
+                control.disabled = true;
+            if (disabled && disabledFocusable || this.hasAttribute("current"))
+                control.setAttribute("aria-disabled", "true");
+            const current = this.getAttribute("aria-current") ?? (this.hasAttribute("current") ? "page" : null);
+            if (current)
+                control.setAttribute("aria-current", current);
+            for (const name of ["aria-label", "tabindex", "title"]) {
+                const value = this.getAttribute(name);
+                if (value !== null)
+                    control.setAttribute(name, value);
+            }
+            if (disabled && (href !== null || disabledFocusable))
+                control.addEventListener("click", event => { event.preventDefault(); event.stopImmediatePropagation(); });
+            control.className = "subtle";
+            control.part.add("control");
+            const style = document.createElement("style");
+            style.textContent = `${buttonControlCss}:host{display:inline-flex;font:inherit}:host([size=small]) button,:host([size=small]) a{min-height:24px;padding-inline:8px;font-size:12px}:host([size=large]) button,:host([size=large]) a{min-height:40px;padding-inline:16px;font-size:16px}a{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:var(--spui-control-height,32px);padding-inline:14px;border:1px solid transparent;border-radius:var(--spui-control-radius,4px);color:inherit;text-decoration:none;cursor:pointer;font:inherit}a:hover{background:var(--spui-button-secondary-hover,color-mix(in srgb,var(--spui-ui-surface,#fff) 90%,var(--spui-ui-text,#242424) 10%))}:is(button,a):focus-visible{outline:2px solid var(--spui-ui-focus,var(--spui-semantic-focus-border,#005a9e));outline-offset:2px}:is(button,a)[aria-disabled=true]{opacity:.55;cursor:not-allowed}`;
+            const icon = document.createElement("slot");
+            icon.name = "icon";
+            control.append(icon, document.createElement("slot"));
+            shadow.replaceChildren(style, control);
+        }
+    }
+    customElements.define("spui-breadcrumb-button", SpuiBreadcrumbButton);
+}

package/dist/elements/button-group.d.ts

@@ -0,0 +1 @@
+export declare function defineButtonGroup(): void;

package/dist/elements/button-group.js

@@ -0,0 +1,20 @@
+import { base } from "./shared.js";
+export function defineButtonGroup() {
+    if (customElements.get("spui-button-group"))
+        return;
+    class SpuiButtonGroup extends HTMLElement {
+        static observedAttributes = ["orientation"];
+        connectedCallback() {
+            if (!this.shadowRoot) {
+                const shadow = this.attachShadow({ mode: "open" });
+                const style = document.createElement("style");
+                style.textContent = `${base}:host{display:inline-flex;align-items:center;gap:var(--spui-button-group-gap,8px);min-width:0;vertical-align:middle}:host([orientation=vertical]){flex-direction:column;align-items:stretch}:host([hidden]){display:none}`;
+                shadow.append(style, document.createElement("slot"));
+            }
+            this.setAttribute("role", "group");
+        }
+        attributeChangedCallback() { if (this.isConnected)
+            this.setAttribute("role", "group"); }
+    }
+    customElements.define("spui-button-group", SpuiButtonGroup);
+}

package/dist/elements/button-variants.d.ts

@@ -0,0 +1,6 @@
+export type { ButtonAppearance, ButtonShape, ButtonSize } from "./button.js";
+export declare function defineCompoundButton(): void;
+/** A button trigger for Menu. The containing spui-menu owns popup state and focus management. */
+export declare function defineMenuButton(): void;
+export declare function defineToggleButton(): void;
+export declare function defineSplitButton(): void;

package/dist/elements/button-variants.js

@@ -0,0 +1,339 @@
+import { buttonControlCss } from "./button.js";
+import { base, stopHostAccessibleNameSync, syncHostAccessibleName } from "./shared.js";
+const forward = ["aria-label", "aria-labelledby", "aria-describedby", "aria-description", "title"];
+export function defineCompoundButton() {
+    if (customElements.get("spui-compound-button"))
+        return;
+    class SpuiCompoundButton extends HTMLElement {
+        static observedAttributes = ["appearance", "size", "shape", "disabled", "disabled-focusable", "icon-position", ...forward];
+        observer;
+        connectedCallback() {
+            if (!this.shadowRoot)
+                this.render();
+            else
+                this.sync();
+            this.observer?.disconnect();
+            this.observer = new MutationObserver(() => this.sync());
+            this.observer.observe(this, { childList: true, subtree: true, characterData: true });
+        }
+        disconnectedCallback() { this.observer?.disconnect(); }
+        attributeChangedCallback() { if (this.isConnected)
+            this.sync(); }
+        render() {
+            const shadow = this.attachShadow({ mode: "open" });
+            const button = document.createElement("button");
+            button.type = "button";
+            button.part.add("control");
+            const icon = document.createElement("span");
+            icon.className = "icon";
+            icon.hidden = true;
+            icon.setAttribute("aria-hidden", "true");
+            const iconSlot = document.createElement("slot");
+            iconSlot.name = "icon";
+            icon.append(iconSlot);
+            const content = document.createElement("span");
+            content.className = "content";
+            const title = document.createElement("span");
+            title.className = "title";
+            const titleSlot = document.createElement("slot");
+            titleSlot.addEventListener("slotchange", () => this.sync());
+            title.append(titleSlot);
+            const description = document.createElement("span");
+            description.className = "description";
+            description.id = "description";
+            description.hidden = true;
+            const descriptionSlot = document.createElement("slot");
+            descriptionSlot.name = "secondary-content";
+            descriptionSlot.addEventListener("slotchange", () => this.sync());
+            description.append(descriptionSlot);
+            const contentSlot = document.createElement("slot");
+            contentSlot.name = "content-container";
+            contentSlot.addEventListener("slotchange", () => this.sync());
+            contentSlot.append(content);
+            iconSlot.addEventListener("slotchange", () => this.sync());
+            content.append(title, description);
+            button.append(icon, contentSlot);
+            const style = document.createElement("style");
+            style.textContent = `${buttonControlCss}:host{display:inline-block;max-width:100%;vertical-align:middle}button{justify-content:flex-start;min-height:64px;padding:10px 14px;text-align:start}.icon:empty{display:none}.content,::slotted([slot=content-container]){display:grid;flex:1;min-width:0;gap:3px}.title{font-weight:600}.description{color:var(--spui-ui-muted,var(--spui-semantic-body-subtext,#605e5c));font-size:12px;line-height:1.35}:host([size=small]) button{min-height:52px}:host([size=large]) button{min-height:76px}:host([disabled-focusable]) button:disabled{opacity:1}.description:empty{display:none}@media(forced-colors:active){.description{color:CanvasText}}`;
+            button.addEventListener("click", event => { if (this.hasAttribute("disabled") && this.hasAttribute("disabled-focusable")) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                event.stopPropagation();
+            } });
+            shadow.append(style, button);
+            this.sync();
+        }
+        sync() {
+            const button = this.shadowRoot?.querySelector("button");
+            if (!button)
+                return;
+            const appearance = this.getAttribute("appearance") ?? "secondary";
+            button.className = appearance === "primary" ? "primary" : appearance === "outline" || appearance === "subtle" || appearance === "transparent" ? appearance : "secondary";
+            const disabled = this.hasAttribute("disabled");
+            const disabledFocusable = disabled && this.hasAttribute("disabled-focusable");
+            button.disabled = disabled && !disabledFocusable;
+            disabledFocusable ? button.setAttribute("aria-disabled", "true") : button.removeAttribute("aria-disabled");
+            for (const name of forward) {
+                const value = this.getAttribute(name);
+                value === null ? button.removeAttribute(name) : button.setAttribute(name, value);
+            }
+            const titleSlot = this.shadowRoot?.querySelector(".title slot");
+            const customContent = this.querySelector(":scope > [slot=content-container]");
+            const markedTitle = customContent?.querySelector("[data-content-title]");
+            const titleText = titleSlot?.assignedNodes({ flatten: true }).map(node => node.textContent ?? "").join("").trim() || markedTitle?.textContent?.trim() || customContent?.textContent?.trim() || "";
+            if (!this.hasAttribute("aria-label") && !this.hasAttribute("aria-labelledby") && titleText)
+                button.setAttribute("aria-label", titleText);
+            const descriptionSlot = this.shadowRoot?.querySelector(".description slot");
+            const customDescription = customContent?.querySelector("[data-content-description], #description");
+            const hasDescription = customDescription ? Boolean(customDescription.textContent?.trim()) : Boolean(descriptionSlot?.assignedNodes({ flatten: true }).some(node => (node.textContent ?? "").trim() || node instanceof Element));
+            const description = this.shadowRoot?.querySelector(".description");
+            if (description)
+                description.hidden = !hasDescription || Boolean(customContent);
+            const ariaDescription = [this.getAttribute("aria-description"), customContent ? customDescription?.textContent?.trim() : ""].filter(Boolean).join(" ");
+            if (ariaDescription)
+                button.setAttribute("aria-description", ariaDescription);
+            else
+                button.removeAttribute("aria-description");
+            const describedBy = [this.getAttribute("aria-describedby"), hasDescription && !customContent ? "description" : ""].filter(Boolean).join(" ");
+            if (describedBy)
+                button.setAttribute("aria-describedby", describedBy);
+            else
+                button.removeAttribute("aria-describedby");
+            const iconSlot = this.shadowRoot?.querySelector(".icon slot");
+            const icon = this.shadowRoot?.querySelector(".icon");
+            if (icon)
+                icon.hidden = !iconSlot?.assignedNodes({ flatten: true }).length;
+        }
+    }
+    customElements.define("spui-compound-button", SpuiCompoundButton);
+}
+/** A button trigger for Menu. The containing spui-menu owns popup state and focus management. */
+export function defineMenuButton() {
+    if (customElements.get("spui-menu-button"))
+        return;
+    class SpuiMenuButton extends HTMLElement {
+        static observedAttributes = ["appearance", "size", "shape", "disabled", "disabled-focusable", "type", "tabindex", "aria-label", "aria-labelledby", "aria-describedby", "aria-haspopup", "aria-controls", "aria-expanded", "title"];
+        connectedCallback() { if (!this.shadowRoot)
+            this.render();
+        else
+            this.sync(); }
+        disconnectedCallback() { stopHostAccessibleNameSync(this); }
+        attributeChangedCallback() { if (this.isConnected)
+            this.sync(); }
+        render() {
+            const shadow = this.attachShadow({ mode: "open", delegatesFocus: true });
+            const button = document.createElement("button");
+            button.part.add("control");
+            const icon = document.createElement("span");
+            icon.className = "icon";
+            icon.setAttribute("aria-hidden", "true");
+            const iconSlot = document.createElement("slot");
+            iconSlot.name = "icon";
+            icon.append(iconSlot);
+            const content = document.createElement("span");
+            content.className = "content";
+            content.append(document.createElement("slot"));
+            const menuIcon = document.createElement("span");
+            menuIcon.className = "menu-icon";
+            menuIcon.setAttribute("aria-hidden", "true");
+            const menuIconSlot = document.createElement("slot");
+            menuIconSlot.name = "menu-icon";
+            menuIcon.append(menuIconSlot);
+            if (!this.querySelector('[slot="menu-icon"]')) {
+                const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+                svg.setAttribute("viewBox", "0 0 16 16");
+                svg.setAttribute("width", "16");
+                svg.setAttribute("height", "16");
+                svg.setAttribute("focusable", "false");
+                const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                path.setAttribute("d", "m4 6 4 4 4-4");
+                path.setAttribute("fill", "none");
+                path.setAttribute("stroke", "currentColor");
+                path.setAttribute("stroke-width", "1.5");
+                path.setAttribute("stroke-linecap", "round");
+                path.setAttribute("stroke-linejoin", "round");
+                svg.append(path);
+                menuIconSlot.append(svg);
+            }
+            iconSlot.addEventListener("slotchange", this.syncSlots);
+            menuIconSlot.addEventListener("slotchange", this.syncSlots);
+            button.append(icon, content, menuIcon);
+            const style = document.createElement("style");
+            style.textContent = `${buttonControlCss}:host{display:inline-block;vertical-align:middle;max-width:100%}.menu-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:0}.menu-icon:empty{display:none}:host([disabled-focusable]) button:disabled{opacity:1}@media(forced-colors:active){.menu-icon{color:ButtonText}}`;
+            button.addEventListener("click", event => { if (this.hasAttribute("disabled") && this.hasAttribute("disabled-focusable")) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                event.stopPropagation();
+            } });
+            shadow.append(style, button);
+            this.sync();
+            this.syncSlots();
+        }
+        syncSlots = () => {
+            for (const [slotName, className] of [["icon", ".icon"], ["menu-icon", ".menu-icon"]]) {
+                const slot = this.shadowRoot?.querySelector(`slot[name="${slotName}"]`);
+                const host = this.shadowRoot?.querySelector(className);
+                if (host && slot)
+                    host.hidden = slotName === "icon" ? !slot.assignedNodes({ flatten: true }).length : !slot.assignedNodes({ flatten: true }).length && !slot.childNodes.length;
+            }
+        };
+        sync() {
+            const button = this.shadowRoot?.querySelector("button");
+            if (!button)
+                return;
+            const appearance = this.getAttribute("appearance") ?? "secondary";
+            button.className = appearance === "primary" ? "primary" : appearance === "outline" || appearance === "subtle" || appearance === "transparent" ? appearance : "secondary";
+            button.type = this.getAttribute("type") === "submit" || this.getAttribute("type") === "reset" ? this.getAttribute("type") : "button";
+            const disabled = this.hasAttribute("disabled");
+            const disabledFocusable = disabled && this.hasAttribute("disabled-focusable");
+            button.disabled = disabled && !disabledFocusable;
+            disabledFocusable ? button.setAttribute("aria-disabled", "true") : button.removeAttribute("aria-disabled");
+            if (this.hasAttribute("tabindex"))
+                button.setAttribute("tabindex", this.getAttribute("tabindex"));
+            else
+                button.removeAttribute("tabindex");
+            for (const name of ["aria-label", "aria-describedby", "aria-haspopup", "aria-controls", "aria-expanded", "title"]) {
+                const value = this.getAttribute(name);
+                value === null ? button.removeAttribute(name) : button.setAttribute(name, value);
+            }
+            syncHostAccessibleName(this, button);
+            if (!this.hasAttribute("aria-label") && !this.hasAttribute("aria-labelledby")) {
+                const text = this.textContent?.trim();
+                if (text)
+                    button.setAttribute("aria-label", text);
+            }
+        }
+    }
+    customElements.define("spui-menu-button", SpuiMenuButton);
+}
+export function defineToggleButton() {
+    if (customElements.get("spui-toggle-button"))
+        return;
+    class SpuiToggleButton extends HTMLElement {
+        static observedAttributes = ["pressed", "checked", "default-pressed", "default-checked", "controlled", "is-accessible", "appearance", "size", "shape", "disabled", "disabled-focusable", "icon-position", "tabindex", "aria-label", "aria-describedby", "title"];
+        get pressed() { return this.hasAttribute("checked") || this.hasAttribute("pressed"); }
+        set pressed(value) { this.checked = value; }
+        get checked() { return this.pressed; }
+        set checked(value) { this.toggleAttribute("checked", Boolean(value)); this.toggleAttribute("pressed", Boolean(value)); }
+        connectedCallback() {
+            if (!this.shadowRoot)
+                this.render();
+            if (!this.hasAttribute("pressed") && !this.hasAttribute("checked"))
+                this.checked = this.hasAttribute("default-checked") || this.hasAttribute("default-pressed");
+            this.sync();
+        }
+        attributeChangedCallback(name, _oldValue, newValue) {
+            if (name === "checked" && this.hasAttribute("pressed") !== (newValue !== null))
+                this.toggleAttribute("pressed", newValue !== null);
+            if (name === "pressed" && this.hasAttribute("checked") !== (newValue !== null))
+                this.toggleAttribute("checked", newValue !== null);
+            if (this.isConnected)
+                this.sync();
+        }
+        render() {
+            const shadow = this.attachShadow({ mode: "open" });
+            const button = document.createElement("button");
+            button.type = "button";
+            button.part.add("control");
+            const icon = document.createElement("span");
+            icon.className = "icon";
+            icon.hidden = true;
+            icon.setAttribute("aria-hidden", "true");
+            const iconSlot = document.createElement("slot");
+            iconSlot.name = "icon";
+            iconSlot.addEventListener("slotchange", () => { icon.hidden = !iconSlot.assignedNodes({ flatten: true }).length; });
+            icon.append(iconSlot);
+            const content = document.createElement("span");
+            content.className = "content";
+            content.append(document.createElement("slot"));
+            button.append(icon, content);
+            button.addEventListener("click", event => {
+                if (this.hasAttribute("disabled")) {
+                    event.preventDefault();
+                    event.stopImmediatePropagation();
+                    event.stopPropagation();
+                    return;
+                }
+                const checked = !this.checked;
+                if (!this.hasAttribute("controlled"))
+                    this.checked = checked;
+                this.dispatchEvent(new CustomEvent("spui-checked-change", { bubbles: true, composed: true, detail: { checked, sourceEvent: event, currentTarget: event.currentTarget } }));
+                this.dispatchEvent(new CustomEvent("spui-pressed-change", { bubbles: true, composed: true, detail: { pressed: checked } }));
+            });
+            const style = document.createElement("style");
+            style.textContent = `${buttonControlCss}:host{display:inline-block;vertical-align:middle}:host([pressed]) button,:host([checked]) button{border-color:var(--spui-toggle-pressed-border,var(--spui-ui-accent,var(--colorBrandBackground,#0078d4)));background:var(--spui-toggle-pressed-background,color-mix(in srgb,var(--spui-ui-accent,var(--colorBrandBackground,#0078d4)) 12%,var(--spui-ui-surface,var(--colorNeutralBackground1,#fff))))}:host([pressed]) button:hover:not(:disabled),:host([checked]) button:hover:not(:disabled){background:var(--spui-toggle-pressed-hover,color-mix(in srgb,var(--spui-ui-accent,var(--colorBrandBackground,#0078d4)) 18%,var(--spui-ui-surface,var(--colorNeutralBackground1,#fff))))}:host([is-accessible][checked]) button,:host([is-accessible][pressed]) button{border-color:var(--spui-ui-accent,var(--colorBrandBackground,#0078d4));background:var(--spui-ui-accent,var(--colorBrandBackground,#0078d4));color:var(--spui-ui-accent-text,#fff)}:host([is-accessible][checked]) button:hover:not(:disabled),:host([is-accessible][pressed]) button:hover:not(:disabled){background:var(--spui-ui-accent-hover,var(--colorBrandBackgroundHover,#106ebe))}:host([disabled-focusable]) button:disabled{opacity:1}@media(forced-colors:active){:host([pressed]) button,:host([checked]) button{outline:1px solid Highlight}}`;
+            shadow.append(style, button);
+            this.sync();
+        }
+        sync() {
+            const button = this.shadowRoot?.querySelector("button");
+            if (!button)
+                return;
+            const appearance = this.getAttribute("appearance") ?? "secondary";
+            button.className = appearance === "primary" ? "primary" : appearance === "outline" || appearance === "subtle" || appearance === "transparent" ? appearance : "secondary";
+            const disabled = this.hasAttribute("disabled");
+            const disabledFocusable = disabled && this.hasAttribute("disabled-focusable");
+            button.disabled = disabled && !disabledFocusable;
+            if (disabledFocusable)
+                button.setAttribute("aria-disabled", "true");
+            else
+                button.removeAttribute("aria-disabled");
+            if (this.hasAttribute("tabindex"))
+                button.setAttribute("tabindex", this.getAttribute("tabindex"));
+            else
+                button.removeAttribute("tabindex");
+            button.setAttribute("aria-pressed", String(this.checked));
+            for (const name of ["aria-label", "aria-describedby", "title"]) {
+                const value = this.getAttribute(name);
+                value === null ? button.removeAttribute(name) : button.setAttribute(name, value);
+            }
+        }
+    }
+    customElements.define("spui-toggle-button", SpuiToggleButton);
+}
+export function defineSplitButton() {
+    if (customElements.get("spui-split-button"))
+        return;
+    class SpuiSplitButton extends HTMLElement {
+        static observedAttributes = ["aria-label"];
+        primarySegment;
+        triggerSegment;
+        connectedCallback() {
+            if (!this.shadowRoot) {
+                const shadow = this.attachShadow({ mode: "open" });
+                const style = document.createElement("style");
+                style.textContent = `${base}:host{display:inline-flex;align-items:center;gap:0;max-width:100%;vertical-align:middle}::slotted([slot=primary]){position:relative;z-index:1;margin-inline-end:-1px}::slotted([slot=menu]){display:contents}@media(forced-colors:active){:host{outline-color:Highlight}}`;
+                const primary = document.createElement("slot");
+                primary.name = "primary";
+                const menu = document.createElement("slot");
+                menu.name = "menu";
+                shadow.append(style, primary, menu);
+                primary.addEventListener("slotchange", this.syncSegments);
+                menu.addEventListener("slotchange", this.syncSegments);
+            }
+            this.syncSegments();
+            if (!this.hasAttribute("role"))
+                this.setAttribute("role", "group");
+            if (!this.hasAttribute("aria-label"))
+                this.setAttribute("aria-label", "Actions");
+        }
+        disconnectedCallback() { this.primarySegment?.removeAttribute("data-spui-split-primary"); this.triggerSegment?.removeAttribute("data-spui-split-trigger"); }
+        syncSegments = () => {
+            const slots = this.shadowRoot?.querySelectorAll("slot");
+            if (!slots)
+                return;
+            const primary = slots[0]?.assignedElements().find(element => element instanceof HTMLElement);
+            const menu = slots[1]?.assignedElements().find(element => element instanceof HTMLElement);
+            const trigger = menu?.querySelector("[slot=trigger]") ?? undefined;
+            if (this.primarySegment !== primary)
+                this.primarySegment?.removeAttribute("data-spui-split-primary");
+            if (this.triggerSegment !== trigger)
+                this.triggerSegment?.removeAttribute("data-spui-split-trigger");
+            this.primarySegment = primary;
+            this.triggerSegment = trigger;
+            this.primarySegment?.setAttribute("data-spui-split-primary", "");
+            this.triggerSegment?.setAttribute("data-spui-split-trigger", "");
+        };
+    }
+    customElements.define("spui-split-button", SpuiSplitButton);
+}

package/dist/elements/button.d.ts

@@ -0,0 +1,5 @@
+export type ButtonAppearance = "primary" | "secondary" | "outline" | "subtle" | "transparent";
+export type ButtonSize = "small" | "medium" | "large";
+export type ButtonShape = "rounded" | "circular" | "square";
+export declare const buttonControlCss: string;
+export declare function defineButton(): void;