@spfx-fast/sharepoint-ui 0.4.2 → 0.5.0

package/dist/elements/tags.d.ts

@@ -1,21 +0,0 @@
-export type TagAppearance = "filled" | "outline" | "brand";
-export type TagShape = "rounded" | "circular";
-export type TagSize = "extra-small" | "small" | "medium";
-export type InteractionTagSelectData = {
-    value: string;
-    selected: boolean;
-};
-export type TagGroupSelectData = {
-    event: Event;
-    type: "click";
-    value: string;
-    selectedValues: string[];
-};
-export interface SharePointTagGroupElement extends HTMLElement {
-    selectedValues: string[];
-}
-export declare function defineTag(): void;
-export declare function defineTagGroup(): void;
-export declare function defineInteractionTagPrimary(): void;
-export declare function defineInteractionTagSecondary(): void;
-export declare function defineInteractionTag(): void;

package/dist/elements/tags.js

@@ -1,421 +0,0 @@
-import { base } from "./shared.js";
-export function defineTag() {
-    if (customElements.get("spui-tag"))
-        return;
-    class SpuiTag extends HTMLElement {
-        static observedAttributes = ["dismissible", "dismiss-label", "label", "disabled", "selected"];
-        connectedCallback() {
-            if (!this.shadowRoot)
-                this.render();
-            this.updateDismissButton();
-        }
-        attributeChangedCallback() { if (this.isConnected)
-            this.updateDismissButton(); }
-        updateDismissButton() {
-            const root = this.shadowRoot;
-            if (!root)
-                return;
-            let button = root.querySelector("button");
-            if (!this.hasAttribute("dismissible")) {
-                button?.remove();
-                return;
-            }
-            if (!button) {
-                button = document.createElement("button");
-                button.type = "button";
-                button.className = "dismiss";
-                button.addEventListener("click", event => this.dispatchEvent(new CustomEvent("spui-dismiss", { detail: { value: this.getAttribute("value") ?? "", label: this.getAttribute("label") ?? this.textContent?.trim() ?? "", originalEvent: event }, bubbles: true, composed: true })));
-                const icon = document.createElement("slot");
-                icon.name = "dismiss-icon";
-                const fallback = document.createElement("span");
-                fallback.setAttribute("aria-hidden", "true");
-                fallback.textContent = "×";
-                icon.append(fallback);
-                button.append(icon);
-                root.append(button);
-            }
-            button.disabled = this.hasAttribute("disabled");
-            const primary = root.querySelector(".primary-text");
-            const primaryText = primary?.assignedNodes({ flatten: true }).map(node => node.textContent ?? "").join("").trim();
-            button.setAttribute("aria-label", `${this.getAttribute("dismiss-label") || "Remove"} ${this.getAttribute("label") || primaryText || this.textContent?.trim() || "tag"}`);
-        }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;max-width:100%;border:1px solid var(--spui-tag-border,var(--spui-base-stroke,var(--spui-ui-stroke,var(--spui-semantic-control-border,#8a8886))));border-radius:var(--spui-control-radius,4px);background:var(--spui-tag-background,color-mix(in srgb,var(--spui-base-accent,var(--spui-ui-accent,#0078d4)) 30%,var(--spui-base-surface,var(--spui-ui-surface,#fff))));color:var(--spui-tag-color,var(--spui-ui-text,var(--spui-semantic-body-text,#323130)));font-size:var(--spui-tag-font-size,13px);font-weight:500;line-height:1.25;white-space:nowrap}:host([size=extra-small]){min-height:18px;padding-block:1px;padding-inline:6px;font-size:10px}:host([size=small]){min-height:22px;padding-block:2px;padding-inline:7px;font-size:11px}:host(:not([size]),[size=medium]){min-height:28px;padding-block:4px;padding-inline:9px}:host([size=large]){min-height:34px;padding-block:6px;padding-inline:12px;font-size:14px}:host([shape=circular]){border-radius:999px}:host([appearance=outline]){background:var(--spui-base-surface,var(--spui-ui-surface,#fff))}:host([appearance=brand]){border-color:color-mix(in srgb,var(--spui-ui-accent,var(--spui-semantic-accent,#0078d4)) 64%,var(--spui-base-surface,var(--spui-ui-surface,#fff)));background:color-mix(in srgb,var(--spui-ui-accent,var(--spui-semantic-accent,#0078d4)) 42%,var(--spui-base-surface,var(--spui-ui-surface,#fff)))}:host([selected]){border-color:var(--spui-ui-accent,var(--spui-semantic-accent,#0078d4));background:color-mix(in srgb,var(--spui-ui-accent,var(--spui-semantic-accent,#0078d4)) 16%,var(--spui-ui-surface,#fff))}:host([disabled]){opacity:.55}.media,.icon{display:inline-flex;align-items:center;justify-content:center;flex:none}.text{display:grid;gap:2px;min-width:0}.label{min-width:0;overflow:hidden;text-overflow:ellipsis}.secondary{overflow:hidden;color:var(--spui-ui-muted,var(--spui-semantic-body-subtext,#616161));font-size:.9em;text-overflow:ellipsis}.dismiss{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;margin-inline-end:-5px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font-size:17px;line-height:1;cursor:pointer}.dismiss:hover{background:color-mix(in srgb,currentColor 12%,transparent)}.dismiss:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:1px}.dismiss:disabled{cursor:not-allowed}.media[hidden],.icon[hidden],.secondary[hidden]{display:none}@media(forced-colors:active){:host{border-color:CanvasText}:host([selected]){outline:1px solid Highlight}.dismiss:focus-visible{outline-color:Highlight}}`;
-            style.textContent += `:host([color=success]){--spui-tag-tone:var(--spui-ui-success,#107c10)}:host([color=warning]){--spui-tag-tone:var(--spui-ui-warning,#835b00)}:host([color=danger]){--spui-tag-tone:var(--spui-ui-danger,#b10e1c)}:host([color=informative]){--spui-tag-tone:var(--spui-ui-info,var(--spui-ui-accent,#0078d4))}:host([color=success]),:host([color=warning]),:host([color=danger]),:host([color=informative]){--spui-tag-foreground:color-mix(in srgb,var(--spui-tag-tone) 40%,var(--spui-ui-text,#242424) 60%);color:var(--spui-tag-foreground);border-color:var(--spui-tag-foreground)}:host([color=success]:not([appearance=outline]):not([selected])),:host([color=warning]:not([appearance=outline]):not([selected])),:host([color=danger]:not([appearance=outline]):not([selected])),:host([color=informative]:not([appearance=outline]):not([selected])){background:color-mix(in srgb,var(--spui-tag-tone) 12%,var(--spui-base-surface,var(--spui-ui-surface,#fff)))}:host([color=success][appearance=brand]:not([selected])),:host([color=warning][appearance=brand]:not([selected])),:host([color=danger][appearance=brand]:not([selected])),:host([color=informative][appearance=brand]:not([selected])){background:color-mix(in srgb,var(--spui-tag-tone) 24%,var(--spui-base-surface,var(--spui-ui-surface,#fff)))}`;
-            style.textContent += `:host([selected][color=success]),:host([selected][color=warning]),:host([selected][color=danger]),:host([selected][color=informative]){color:var(--spui-selection-foreground,var(--spui-ui-text,#242424));border-color:var(--spui-selection-foreground,var(--spui-ui-text,#242424))}@media(forced-colors:active){:host([color=success]),:host([color=warning]),:host([color=danger]),:host([color=informative]){color:CanvasText;border-color:CanvasText;background:Canvas}:host([selected][color=success]),:host([selected][color=warning]),:host([selected][color=danger]),:host([selected][color=informative]){outline:1px solid Highlight}}`;
-            const media = document.createElement("span");
-            media.className = "media";
-            media.hidden = true;
-            const mediaSlot = document.createElement("slot");
-            mediaSlot.name = "media";
-            media.append(mediaSlot);
-            const icon = document.createElement("span");
-            icon.className = "icon";
-            icon.hidden = true;
-            const iconSlot = document.createElement("slot");
-            iconSlot.name = "icon";
-            icon.append(iconSlot);
-            const text = document.createElement("span");
-            text.className = "text";
-            const label = document.createElement("span");
-            label.className = "label";
-            label.part.add("label");
-            const primarySlot = document.createElement("slot");
-            primarySlot.name = "primary-text";
-            const defaultSlot = document.createElement("slot");
-            label.append(primarySlot);
-            primarySlot.append(defaultSlot);
-            const secondary = document.createElement("span");
-            secondary.className = "secondary";
-            secondary.hidden = true;
-            secondary.part.add("secondary-text");
-            const secondarySlot = document.createElement("slot");
-            secondarySlot.name = "secondary-text";
-            secondary.append(secondarySlot);
-            text.append(label, secondary);
-            for (const [slot, container] of [[mediaSlot, media], [iconSlot, icon], [secondarySlot, secondary]]) {
-                slot.addEventListener("slotchange", () => { container.hidden = !slot.assignedNodes({ flatten: true }).length; this.updateDismissButton(); });
-            }
-            primarySlot.addEventListener("slotchange", () => this.updateDismissButton());
-            defaultSlot.addEventListener("slotchange", () => this.updateDismissButton());
-            shadow.append(style, media, icon, text);
-        }
-    }
-    customElements.define("spui-tag", SpuiTag);
-}
-export function defineTagGroup() {
-    if (customElements.get("spui-tag-group"))
-        return;
-    class SpuiTagGroup extends HTMLElement {
-        static observedAttributes = ["orientation", "label", "selected-values", "default-selected-values", "disabled", "dismissible", "appearance", "size", "role"];
-        observer;
-        values = [];
-        controlled = false;
-        initialized = false;
-        syncing = false;
-        childBase = new WeakMap();
-        childApplied = new WeakMap();
-        get selectedValues() { return [...this.values]; }
-        set selectedValues(value) {
-            this.controlled = true;
-            this.values = Array.isArray(value) ? value.map(String) : [];
-            this.initialized = true;
-            this.sync();
-        }
-        connectedCallback() {
-            if (!this.shadowRoot)
-                this.render();
-            if (!this.hasAttribute("role"))
-                this.setAttribute("role", "toolbar");
-            if (!this.hasAttribute("aria-label") && this.hasAttribute("label"))
-                this.setAttribute("aria-label", this.getAttribute("label"));
-            if (!this.initialized) {
-                const defaults = this.readValues(this.getAttribute("default-selected-values"));
-                this.values = this.readValues(this.getAttribute("selected-values") ?? JSON.stringify(defaults));
-                this.controlled = this.hasAttribute("selected-values");
-                this.initialized = true;
-            }
-            this.addEventListener("spui-tag-select", this.onTagSelect);
-            this.addEventListener("spui-dismiss", this.onTagDismiss);
-            this.addEventListener("keydown", this.onKeyDown);
-            this.observer?.disconnect();
-            this.observer = new MutationObserver(() => this.sync());
-            this.observer.observe(this, { childList: true, subtree: true, attributes: true, attributeFilter: ["disabled", "dismissible", "appearance", "size", "selected", "value"] });
-            this.sync();
-        }
-        disconnectedCallback() {
-            this.observer?.disconnect();
-            this.removeEventListener("spui-tag-select", this.onTagSelect);
-            this.removeEventListener("spui-dismiss", this.onTagDismiss);
-            this.removeEventListener("keydown", this.onKeyDown);
-        }
-        attributeChangedCallback(name) {
-            if (!this.isConnected)
-                return;
-            if (name === "selected-values") {
-                this.controlled = this.hasAttribute("selected-values");
-                if (this.controlled)
-                    this.values = this.readValues(this.getAttribute("selected-values"));
-            }
-            this.sync();
-        }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spui-tag-group-gap,8px);min-width:0}:host([orientation=vertical]){flex-direction:column;align-items:stretch}:host(:focus-visible){outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:2px}@media(forced-colors:active){:host(:focus-visible){outline-color:Highlight}}`;
-            const slot = document.createElement("slot");
-            shadow.append(style, slot);
-        }
-        readValues(raw) {
-            if (!raw)
-                return [];
-            try {
-                const value = JSON.parse(raw);
-                return Array.isArray(value) ? value.map(String) : [];
-            }
-            catch {
-                return raw.split(",").map(value => value.trim()).filter(Boolean);
-            }
-        }
-        sync() {
-            if (!this.isConnected || this.syncing)
-                return;
-            this.syncing = true;
-            try {
-                if (this.hasAttribute("label") && !this.hasAttribute("aria-label"))
-                    this.setAttribute("aria-label", this.getAttribute("label"));
-                this.setAttribute("aria-disabled", String(this.hasAttribute("disabled")));
-                const children = [...this.querySelectorAll("spui-tag,spui-interaction-tag")].filter(child => child.closest("spui-tag-group") === this);
-                const groupDefaults = ["disabled", "dismissible", "appearance", "size"];
-                for (const [index, child] of children.entries()) {
-                    if (!child.hasAttribute("value"))
-                        child.setAttribute("value", `spui-tag-group-${index + 1}`);
-                    let baseState = this.childBase.get(child);
-                    let applied = this.childApplied.get(child);
-                    if (!baseState) {
-                        baseState = Object.fromEntries([...groupDefaults, "selected"].map(name => [name, child.getAttribute(name)]));
-                        this.childBase.set(child, baseState);
-                        applied = {};
-                    }
-                    else {
-                        for (const name of [...groupDefaults, "selected"])
-                            if (child.getAttribute(name) !== applied?.[name])
-                                baseState[name] = child.getAttribute(name);
-                    }
-                    const next = {};
-                    for (const name of groupDefaults) {
-                        let value = baseState[name] ?? null;
-                        if (name === "disabled" && this.hasAttribute("disabled"))
-                            value = "";
-                        else if (name === "dismissible" && value === null && this.hasAttribute("dismissible"))
-                            value = "";
-                        else if (name === "appearance" && value === null)
-                            value = this.getAttribute("appearance");
-                        else if (name === "size" && value === null)
-                            value = this.getAttribute("size");
-                        next[name] = value;
-                    }
-                    const selected = (baseState.selected === "" || this.values.includes(child.getAttribute("value"))) ? "" : null;
-                    next.selected = selected;
-                    for (const name of [...groupDefaults, "selected"]) {
-                        const value = next[name];
-                        if (value === null) {
-                            if (child.hasAttribute(name))
-                                child.removeAttribute(name);
-                        }
-                        else if (child.getAttribute(name) !== value)
-                            child.setAttribute(name, value);
-                    }
-                    this.childApplied.set(child, next);
-                }
-            }
-            finally {
-                this.syncing = false;
-            }
-        }
-        onTagSelect = (event) => {
-            if (this.hasAttribute("disabled") || event.defaultPrevented) {
-                event.preventDefault();
-                return;
-            }
-            const value = String(event.detail?.value ?? "");
-            const next = this.values.includes(value) ? this.values.filter(item => item !== value) : [...this.values, value];
-            if (!this.controlled)
-                this.values = next;
-            this.sync();
-            this.dispatchEvent(new CustomEvent("spui-selection-change", { bubbles: true, composed: true, detail: { event: event.detail?.originalEvent ?? event, type: "click", value, selectedValues: next } }));
-        };
-        onTagDismiss = (event) => {
-            if (this.hasAttribute("disabled")) {
-                event.preventDefault();
-                return;
-            }
-            this.dispatchEvent(new CustomEvent("spui-tag-dismiss", { bubbles: true, composed: true, detail: { value: String(event.detail?.value ?? ""), sourceEvent: event.detail?.originalEvent ?? event } }));
-        };
-        focusableItems() {
-            const result = [];
-            const visit = (root) => {
-                for (const node of root.querySelectorAll("button,a[href],[tabindex]")) {
-                    if (!node.hasAttribute("disabled") && node.tabIndex >= 0 && node.getClientRects().length)
-                        result.push(node);
-                }
-                for (const node of root.querySelectorAll("*")) {
-                    if (node.shadowRoot)
-                        visit(node.shadowRoot);
-                    if (node instanceof HTMLSlotElement)
-                        for (const assigned of node.assignedElements({ flatten: true }))
-                            visit(assigned);
-                }
-            };
-            for (const child of this.querySelectorAll("spui-tag,spui-interaction-tag"))
-                if (child.closest("spui-tag-group") === this)
-                    visit(child.shadowRoot ?? child);
-            return [...new Set(result)];
-        }
-        onKeyDown = (event) => {
-            const items = this.focusableItems();
-            if (!items.length)
-                return;
-            const active = event.composedPath().find((node) => node instanceof HTMLElement && items.includes(node));
-            const from = active ? items.indexOf(active) : -1;
-            let next = -1;
-            if (event.key === "Home")
-                next = 0;
-            else if (event.key === "End")
-                next = items.length - 1;
-            else if (event.key === "ArrowDown" || event.key === (getComputedStyle(this).direction === "rtl" ? "ArrowLeft" : "ArrowRight"))
-                next = (from + 1 + items.length) % items.length;
-            else if (event.key === "ArrowUp" || event.key === (getComputedStyle(this).direction === "rtl" ? "ArrowRight" : "ArrowLeft"))
-                next = (from - 1 + items.length) % items.length;
-            if (next >= 0) {
-                event.preventDefault();
-                items[next].focus();
-            }
-        };
-    }
-    customElements.define("spui-tag-group", SpuiTagGroup);
-}
-export function defineInteractionTagPrimary() {
-    if (customElements.get("spui-interaction-tag-primary"))
-        return;
-    class SpuiInteractionTagPrimary extends HTMLElement {
-        static observedAttributes = ["disabled", "selected", "has-secondary-action", "size"];
-        button;
-        connectedCallback() { if (!this.shadowRoot)
-            this.render(); this.sync(); }
-        attributeChangedCallback() { this.sync(); }
-        render() {
-            const shadow = this.attachShadow({ mode: "open", delegatesFocus: true });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:inline-flex;min-width:0}button{box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;min-width:0;min-height:28px;padding:4px 10px;border:0;border-radius:inherit;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer}button:hover{background:color-mix(in srgb,currentColor 8%,transparent)}button:focus-visible{position:relative;z-index:1;outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,var(--spui-semantic-focus-border,var(--colorStrokeFocus2,#0078d4))));outline-offset:1px}:host([disabled]) button{cursor:not-allowed}:host([has-secondary-action]) button{padding-inline-end:4px}:host([size=small]) button{min-height:22px;padding-block:2px}:host([size=extra-small]) button{min-height:18px;padding-block:1px;font-size:12px}.media:empty,.icon:empty,.secondary:empty{display:none}.media,.icon,.secondary{display:inline-flex;align-items:center;flex:none}.text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}button[aria-pressed=true]{font-weight:600}@media(forced-colors:active){button:focus-visible{outline-color:Highlight}}`;
-            const button = document.createElement("button");
-            button.type = "button";
-            button.part.add("button");
-            const media = document.createElement("span");
-            media.className = "media";
-            media.append(Object.assign(document.createElement("slot"), { name: "media" }));
-            const icon = document.createElement("span");
-            icon.className = "icon";
-            icon.append(Object.assign(document.createElement("slot"), { name: "icon" }));
-            const text = document.createElement("span");
-            text.className = "text";
-            const primaryText = document.createElement("slot");
-            primaryText.name = "primary-text";
-            primaryText.append(document.createElement("slot"));
-            text.append(primaryText);
-            const secondary = document.createElement("span");
-            secondary.className = "secondary";
-            secondary.append(Object.assign(document.createElement("slot"), { name: "secondary-text" }));
-            button.append(media, icon, text, secondary);
-            button.addEventListener("click", event => {
-                const owner = this.closest("spui-interaction-tag");
-                if (owner)
-                    owner.dispatchEvent(new CustomEvent("spui-tag-select", { bubbles: true, composed: true, cancelable: true, detail: { value: owner.getAttribute("value") ?? "", selected: owner.hasAttribute("selected"), originalEvent: event } }));
-            });
-            this.button = button;
-            shadow.append(style, button);
-        }
-        sync() {
-            if (!this.button)
-                return;
-            this.button.disabled = this.hasAttribute("disabled");
-            if (this.hasAttribute("selected"))
-                this.button.setAttribute("aria-pressed", String(this.getAttribute("selected") !== "false"));
-            else
-                this.button.removeAttribute("aria-pressed");
-        }
-    }
-    customElements.define("spui-interaction-tag-primary", SpuiInteractionTagPrimary);
-}
-export function defineInteractionTagSecondary() {
-    if (customElements.get("spui-interaction-tag-secondary"))
-        return;
-    class SpuiInteractionTagSecondary extends HTMLElement {
-        static observedAttributes = ["disabled", "label", "remove-label"];
-        button;
-        connectedCallback() { if (!this.shadowRoot)
-            this.render(); this.sync(); }
-        attributeChangedCallback() { this.sync(); }
-        render() {
-            const shadow = this.attachShadow({ mode: "open", delegatesFocus: true });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:inline-flex;flex:none}button{display:grid;place-items:center;width:26px;min-height:28px;padding:0;border:0;border-radius:inherit;background:transparent;color:inherit;font:inherit;cursor:pointer}button:hover{background:color-mix(in srgb,currentColor 10%,transparent)}button:focus-visible{position:relative;z-index:1;outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,var(--spui-semantic-focus-border,var(--colorStrokeFocus2,#0078d4))));outline-offset:1px}:host([disabled]) button{cursor:not-allowed}.mark{font-size:17px;line-height:1}@media(forced-colors:active){button:focus-visible{outline-color:Highlight}}`;
-            const button = document.createElement("button");
-            button.type = "button";
-            button.part.add("button");
-            button.innerHTML = '<span class="mark" aria-hidden="true">×</span><slot></slot>';
-            button.addEventListener("click", event => {
-                const owner = this.closest("spui-interaction-tag");
-                if (owner)
-                    owner.dispatchEvent(new CustomEvent("spui-dismiss", { bubbles: true, composed: true, cancelable: true, detail: { value: owner.getAttribute("value") ?? "", originalEvent: event } }));
-            });
-            this.button = button;
-            shadow.append(style, button);
-        }
-        sync() {
-            if (!this.button)
-                return;
-            this.button.disabled = this.hasAttribute("disabled");
-            const owner = this.closest("spui-interaction-tag");
-            const label = this.getAttribute("label") ?? `${this.getAttribute("remove-label") ?? "Remove"} ${owner?.getAttribute("label") ?? owner?.getAttribute("value") ?? "tag"}`;
-            this.button.setAttribute("aria-label", label);
-        }
-    }
-    customElements.define("spui-interaction-tag-secondary", SpuiInteractionTagSecondary);
-}
-export function defineInteractionTag() {
-    defineInteractionTagPrimary();
-    defineInteractionTagSecondary();
-    if (customElements.get("spui-interaction-tag"))
-        return;
-    class SpuiInteractionTag extends HTMLElement {
-        static observedAttributes = ["appearance", "disabled", "selected", "shape", "size", "value"];
-        observer;
-        connectedCallback() {
-            this.style.display ||= "inline-flex";
-            this.style.alignItems ||= "center";
-            this.style.maxWidth ||= "100%";
-            this.observer?.disconnect();
-            this.observer = new MutationObserver(() => this.sync());
-            this.observer.observe(this, { childList: true });
-            this.sync();
-        }
-        disconnectedCallback() { this.observer?.disconnect(); }
-        attributeChangedCallback() { this.sync(); }
-        sync() {
-            this.style.border ||= "1px solid var(--spui-tag-border,var(--spui-ui-stroke,var(--spui-semantic-body-divider,var(--colorNeutralStroke2,#8a8886))))";
-            this.style.borderRadius = this.getAttribute("shape") === "circular" ? "999px" : "var(--spui-control-radius,8px)";
-            this.style.background = this.getAttribute("appearance") === "outline" ? "var(--spui-ui-surface,var(--spui-semantic-card-background,var(--colorNeutralBackground1,#fff)))" : this.getAttribute("appearance") === "brand" ? "color-mix(in srgb,var(--spui-ui-accent,var(--spui-semantic-primary-button-background,var(--colorBrandBackground,#78716c))) 22%,var(--spui-ui-surface,var(--spui-semantic-card-background,var(--colorNeutralBackground1,#fff))))" : "color-mix(in srgb,var(--spui-ui-accent,var(--spui-semantic-primary-button-background,var(--colorBrandBackground,#78716c))) 12%,var(--spui-ui-surface,var(--spui-semantic-card-background,var(--colorNeutralBackground1,#fff))))";
-            this.style.color = "var(--spui-ui-text,var(--spui-semantic-body-text,var(--colorNeutralForeground1,inherit)))";
-            this.style.fontFamily = "var(--spui-font-family,inherit)";
-            this.toggleAttribute("data-selected", this.hasAttribute("selected"));
-            const primary = this.querySelector("spui-interaction-tag-primary");
-            const secondary = this.querySelector("spui-interaction-tag-secondary");
-            if (primary)
-                for (const name of ["disabled", "selected", "appearance", "shape", "size"]) {
-                    if (this.hasAttribute(name))
-                        primary.setAttribute(name, this.getAttribute(name));
-                    else
-                        primary.removeAttribute(name);
-                }
-            if (primary) {
-                const explicit = primary.hasAttribute("data-spui-explicit-has-secondary-action") || (primary.hasAttribute("has-secondary-action") && !primary.hasAttribute("data-spui-generated-has-secondary-action"));
-                if (secondary || explicit)
-                    primary.setAttribute("has-secondary-action", "");
-                else
-                    primary.removeAttribute("has-secondary-action");
-                primary.toggleAttribute("data-spui-generated-has-secondary-action", Boolean(secondary) && !explicit);
-            }
-            if (secondary)
-                for (const name of ["disabled", "appearance", "shape", "size"]) {
-                    if (this.hasAttribute(name))
-                        secondary.setAttribute(name, this.getAttribute(name));
-                    else
-                        secondary.removeAttribute(name);
-                }
-        }
-    }
-    customElements.define("spui-interaction-tag", SpuiInteractionTag);
-}

package/dist/elements/teaching-popover.d.ts

@@ -1,32 +0,0 @@
-export type TeachingPopoverAnnouncementFunction = (newValue: string) => string;
-export type TeachingPopoverCarouselValueChangeType = "click" | "keydown" | "programmatic";
-export type TeachingPopoverCarouselValueChangeDetail = {
-    value?: string;
-    event?: Event;
-    type: TeachingPopoverCarouselValueChangeType;
-    currentPage?: number;
-    totalPages?: number;
-};
-export type TeachingPopoverFinishDetail = {
-    value?: string;
-    event?: Event;
-    type: "click";
-};
-export type TeachingPopoverAnnouncementDetail = {
-    value: string;
-    message: string;
-    currentPage: number;
-    totalPages: number;
-};
-export interface SharePointTeachingPopoverCarouselElement extends HTMLElement {
-    value: string;
-    defaultValue: string;
-    announcement?: TeachingPopoverAnnouncementFunction;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "spui-teaching-popover-carousel": SharePointTeachingPopoverCarouselElement;
-    }
-}
-/** Register the framework-neutral TeachingPopover and its composable guided-tour parts. */
-export declare function defineTeachingPopover(): void;