@spfx-fast/sharepoint-ui 0.4.2 → 0.5.0

package/dist/elements/breadcrumb.js

@@ -1,233 +0,0 @@
-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

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

package/dist/elements/button-group.js

@@ -1,20 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,339 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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;