@spfx-fast/sharepoint-ui 0.4.3 → 0.5.0

package/dist/elements/button.js

@@ -1,233 +0,0 @@
-import { base, stopHostAccessibleNameSync, syncHostAccessibleName } from "./shared.js";
-const buttonCss = `${base}button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--spui-control-height,32px);padding-inline:var(--spui-control-padding-inline,14px);border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-button-border,var(--colorNeutralStroke1,#8a8886))));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,var(--spui-semantic-button-background,var(--colorNeutralBackground1,#fff))));box-shadow:var(--spui-control-shadow,none);color:var(--spui-ui-text,var(--spui-semantic-button-text,var(--colorNeutralForeground1,#323130)));font:inherit;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;transition:background-color var(--spui-motion-duration-normal,.15s) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1)),border-color var(--spui-motion-duration-normal,.15s) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1)),transform var(--spui-motion-duration-normal,.15s) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1))}button:hover:not(:disabled):not([aria-disabled=true]){background:var(--spui-button-secondary-hover,color-mix(in srgb,var(--spui-control-background,var(--spui-ui-surface,#fff)) 90%,var(--spui-ui-text,#242424) 10%))}button:active:not(:disabled):not([aria-disabled=true]){transform:scale(.98)}button.primary{border-color:var(--spui-primary-background,var(--spui-ui-accent,var(--spui-semantic-primary-button-background,var(--colorBrandBackground,#0078d4))));background:var(--spui-primary-background,var(--spui-ui-accent,var(--spui-semantic-primary-button-background,var(--colorBrandBackground,#0078d4))));color:var(--spui-ui-accent-text,var(--spui-semantic-primary-button-text,var(--colorNeutralForegroundOnBrand,#fff)))}button.primary:hover:not(:disabled):not([aria-disabled=true]){background:var(--spui-primary-hover,var(--spui-ui-accent-hover,var(--colorBrandBackgroundHover,#106ebe)))}button.primary:active:not(:disabled):not([aria-disabled=true]){background:var(--spui-ui-accent-pressed,var(--colorBrandBackgroundPressed,var(--spui-ui-accent-hover,#106ebe)))}button.outline{background:transparent}button.subtle,button.transparent{border-color:transparent;box-shadow:none}button.subtle{background:var(--spui-button-subtle-background,transparent)}button.transparent{background:transparent}:host([data-spui-appearance=glass]) button:not(.primary),:host-context([data-spui-appearance=glass]) button:not(.primary){backdrop-filter:var(--spui-card-backdrop,blur(16px) saturate(150%))}button:disabled,button[aria-disabled=true]{opacity:.55;cursor:not-allowed}:host([size=small]) button{min-height:24px;padding-inline:8px;font-size:12px}:host([size=large]) button{min-height:40px;padding-inline:16px;font-size:16px}:host([shape=circular]) button{border-radius:999px}:host([shape=square]) button{border-radius:0}:host([data-spui-split-primary]) button{border-start-end-radius:0;border-end-end-radius:0}:host([data-spui-split-trigger]) button{border-start-start-radius:0;border-end-start-radius:0}:host([icon-only]) button{min-width:var(--spui-control-height,32px);padding-inline:0}:host([size=small][icon-only]) button{min-width:24px}:host([size=large][icon-only]) button{min-width:40px}:host([vertical]) button{flex-direction:column}.icon{display:inline-flex;align-items:center;justify-content:center;line-height:0}:host([vertical]) .icon{font-size:24px}.content{display:inline-flex;align-items:center;justify-content:center}:host([icon-position=after]) .icon{order:2}:host([icon-position=after]) .content{order:1}@media(prefers-reduced-motion:reduce){button{transition:none}}@media(forced-colors:active){button{border-color:ButtonText}button.primary{border-color:Highlight;background:Highlight;color:HighlightText}}`;
-export const buttonControlCss = buttonCss.replace(/\bbutton(?=[.#:[\s,{])/g, ":is(button,a)");
-const buttonSheets = new WeakMap();
-const buttonSheetUnsupported = new WeakSet();
-function buttonStyleNode(document) {
-    const style = document.createElement("style");
-    style.textContent = buttonControlCss;
-    return style;
-}
-function applyButtonStyle(shadow, button) {
-    const document = shadow.ownerDocument;
-    let sheet = buttonSheets.get(document);
-    if (!sheet && !buttonSheetUnsupported.has(document)) {
-        try {
-            if (typeof shadow.adoptedStyleSheets === "undefined" || !document.defaultView?.CSSStyleSheet)
-                throw new Error("Constructable stylesheets are unavailable");
-            sheet = new document.defaultView.CSSStyleSheet();
-            sheet.replaceSync(buttonControlCss);
-            buttonSheets.set(document, sheet);
-        }
-        catch {
-            buttonSheetUnsupported.add(document);
-        }
-    }
-    if (sheet) {
-        if (!shadow.adoptedStyleSheets.includes(sheet))
-            shadow.adoptedStyleSheets = [...shadow.adoptedStyleSheets, sheet];
-        shadow.replaceChildren(button);
-    }
-    else
-        shadow.replaceChildren(buttonStyleNode(document), button);
-}
-const unsafeHref = (href) => /^(?:javascript|data|vbscript):/i.test(href.trim());
-export function defineButton() {
-    if (customElements.get("spui-button"))
-        return;
-    class SpuiButton extends HTMLElement {
-        static formAssociated = true;
-        static observedAttributes = ["as", "href", "target", "rel", "download", "hreflang", "referrerpolicy", "form", "formaction", "formenctype", "formnovalidate", "formtarget", "name", "value", "variant", "appearance", "size", "shape", "icon-only", "icon-position", "vertical", "disabled", "disabled-focusable", "type", "tabindex", "aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-pressed", "aria-expanded", "aria-haspopup", "aria-controls", "aria-current", "aria-disabled", "title"];
-        internals = this.attachInternals();
-        formSubmitter;
-        formDisabled = false;
-        get form() { return this.internals.form; }
-        connectedCallback() { this.render(); }
-        formDisabledCallback(disabled) { this.formDisabled = disabled; this.render(); }
-        disconnectedCallback() { stopHostAccessibleNameSync(this); this.formSubmitter?.remove(); this.formSubmitter = undefined; }
-        attributeChangedCallback(name) {
-            if (!this.isConnected)
-                return;
-            if (name === "aria-label" || name === "aria-labelledby") {
-                const button = this.shadowRoot?.querySelector("button,a");
-                if (button)
-                    syncHostAccessibleName(this, button);
-                return;
-            }
-            if (["aria-description", "aria-describedby", "aria-pressed", "aria-expanded", "aria-haspopup", "aria-controls", "title"].includes(name)) {
-                const button = this.shadowRoot?.querySelector("button,a");
-                const value = this.getAttribute(name);
-                if (button && (name === "aria-description" || name === "aria-describedby"))
-                    syncHostAccessibleName(this, button);
-                else if (button)
-                    value === null ? button.removeAttribute(name) : button.setAttribute(name, value);
-                return;
-            }
-            if (name === "tabindex") {
-                const button = this.shadowRoot?.querySelector("button,a");
-                const value = this.getAttribute(name);
-                if (button)
-                    value === null ? button.removeAttribute("tabindex") : button.setAttribute("tabindex", value);
-                return;
-            }
-            this.render();
-        }
-        render() {
-            const shadow = this.shadowRoot ?? this.attachShadow({ mode: "open", delegatesFocus: true });
-            const previous = shadow.querySelector("button,a");
-            const restoreFocus = previous !== null && previous === shadow.activeElement;
-            const as = this.getAttribute("as") === "a" ? "a" : "button";
-            const button = document.createElement(as);
-            const type = this.getAttribute("type");
-            if (button instanceof HTMLButtonElement)
-                button.type = type === "submit" || type === "reset" ? type : "button";
-            const href = this.getAttribute("href")?.trim() ?? "";
-            const disabled = this.formDisabled || this.hasAttribute("disabled") || this.getAttribute("aria-disabled") === "true";
-            const disabledFocusable = this.hasAttribute("disabled-focusable");
-            const inactive = disabled || disabledFocusable;
-            const hasHref = as === "a" && !!href && !unsafeHref(href);
-            if (button instanceof HTMLAnchorElement) {
-                if (!inactive && hasHref)
-                    button.href = href;
-                for (const name of ["target", "rel", "download", "hreflang", "referrerpolicy"]) {
-                    const value = this.getAttribute(name);
-                    if (value !== null)
-                        button.setAttribute(name, value);
-                }
-                if (!disabled && button.target.toLowerCase() === "_blank") {
-                    const rel = new Set((button.getAttribute("rel") ?? "").split(/\s+/).filter(Boolean));
-                    rel.add("noopener");
-                    rel.add("noreferrer");
-                    button.rel = [...rel].join(" ");
-                }
-                if (inactive)
-                    button.setAttribute("aria-disabled", "true");
-                if (disabledFocusable)
-                    button.tabIndex = this.hasAttribute("tabindex") ? Number(this.getAttribute("tabindex")) : 0;
-                else if (!hasHref && !disabled)
-                    button.tabIndex = this.hasAttribute("tabindex") ? Number(this.getAttribute("tabindex")) : 0;
-                if (hasHref)
-                    button.setAttribute("role", "link");
-                else
-                    button.setAttribute("role", "button");
-                button.addEventListener("click", event => { if (disabled || !hasHref) {
-                    event.preventDefault();
-                    if (disabled)
-                        event.stopPropagation();
-                } });
-                button.addEventListener("keydown", event => {
-                    if (disabled) {
-                        if (event.key === "Enter" || event.key === " ") {
-                            event.preventDefault();
-                            event.stopPropagation();
-                        }
-                    }
-                    else if (event.key === "Enter") {
-                        event.preventDefault();
-                        button.click();
-                    }
-                    else if (event.key === " ")
-                        event.preventDefault();
-                });
-                button.addEventListener("keyup", event => {
-                    if (disabled) {
-                        if (event.key === "Enter" || event.key === " ") {
-                            event.preventDefault();
-                            event.stopPropagation();
-                        }
-                    }
-                    else if (event.key === " " && !hasHref) {
-                        event.preventDefault();
-                        button.click();
-                    }
-                });
-            }
-            else {
-                button.disabled = disabled && !disabledFocusable;
-                if (disabled && disabledFocusable) {
-                    button.setAttribute("aria-disabled", "true");
-                    button.addEventListener("click", event => { event.preventDefault(); event.stopImmediatePropagation(); event.stopPropagation(); });
-                }
-                for (const name of ["formaction", "formenctype", "formmethod", "formnovalidate", "formtarget"]) {
-                    const value = this.getAttribute(name);
-                    if (value === null)
-                        button.removeAttribute(name);
-                    else
-                        button.setAttribute(name, value);
-                }
-            }
-            this.syncFormSubmitter(as, type, disabled);
-            if (button instanceof HTMLButtonElement && (type === "submit" || type === "reset"))
-                button.addEventListener("click", event => {
-                    this.syncFormSubmitter(as, type, disabled);
-                    document.addEventListener("click", () => { if (!event.defaultPrevented && !disabled && this.formSubmitter?.isConnected)
-                        this.formSubmitter.click(); }, { once: true });
-                });
-            if (this.hasAttribute("tabindex"))
-                button.setAttribute("tabindex", this.getAttribute("tabindex"));
-            for (const name of ["aria-description", "aria-describedby", "aria-pressed", "aria-expanded", "aria-haspopup", "aria-controls", "aria-current", "title"]) {
-                const value = this.getAttribute(name);
-                if (value !== null)
-                    button.setAttribute(name, value);
-            }
-            const appearance = this.getAttribute("appearance") ?? (this.getAttribute("variant") === "primary" ? "primary" : "secondary");
-            button.className = appearance === "primary" ? "primary" : appearance === "outline" || appearance === "subtle" || appearance === "transparent" ? appearance : "secondary";
-            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);
-            iconSlot.addEventListener("slotchange", () => { icon.hidden = !iconSlot.assignedNodes({ flatten: true }).length; });
-            icon.hidden = !iconSlot.assignedNodes({ flatten: true }).length;
-            const content = document.createElement("span");
-            content.className = "content";
-            content.append(document.createElement("slot"));
-            button.append(icon, content);
-            applyButtonStyle(shadow, button);
-            syncHostAccessibleName(this, button);
-            if (restoreFocus)
-                button.focus();
-        }
-        syncFormSubmitter(as, type, disabled) {
-            if (type !== "submit" && type !== "reset") {
-                this.formSubmitter?.remove();
-                this.formSubmitter = undefined;
-                return;
-            }
-            const form = as === "button" ? this.internals.form ?? this.closest("form") : null;
-            if (!form) {
-                this.formSubmitter?.remove();
-                this.formSubmitter = undefined;
-                return;
-            }
-            const submitter = this.formSubmitter ?? document.createElement("button");
-            submitter.hidden = true;
-            submitter.tabIndex = -1;
-            submitter.setAttribute("aria-hidden", "true");
-            submitter.type = type;
-            submitter.disabled = disabled;
-            submitter.name = this.getAttribute("name") ?? "";
-            submitter.value = this.getAttribute("value") ?? "";
-            for (const name of ["formaction", "formenctype", "formmethod", "formnovalidate", "formtarget"]) {
-                const value = this.getAttribute(name);
-                if (value === null)
-                    submitter.removeAttribute(name);
-                else
-                    submitter.setAttribute(name, value);
-            }
-            const formId = this.getAttribute("form");
-            if (formId)
-                submitter.setAttribute("form", formId);
-            else
-                submitter.removeAttribute("form");
-            if (!this.formSubmitter)
-                submitter.addEventListener("click", event => event.stopPropagation());
-            if (!this.formSubmitter || submitter.form !== form)
-                form.append(submitter);
-            this.formSubmitter = submitter;
-        }
-    }
-    customElements.define("spui-button", SpuiButton);
-}

package/dist/elements/card-primitives.d.ts

@@ -1,3 +0,0 @@
-export declare function defineCardHeader(): void;
-export declare function defineCardFooter(): void;
-export declare function defineCardPreview(): void;

package/dist/elements/card-primitives.js

@@ -1,83 +0,0 @@
-import { base } from "./shared.js";
-export function defineCardHeader() {
-    if (customElements.get("spui-card-header"))
-        return;
-    class SpuiCardHeader extends HTMLElement {
-        connectedCallback() {
-            if (this.shadowRoot)
-                return;
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:block;min-width:0}.layout{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;align-items:center;column-gap:var(--spui-control-gap,12px);row-gap:3px}.main{display:grid;grid-template-columns:minmax(0,1fr);row-gap:3px;min-width:0}slot[name=image]{grid-column:1;grid-row:1 / span 2}slot[name=action]{grid-column:3;grid-row:1 / span 2;justify-self:end}slot[name=header]{font-size:var(--spui-card-header-size,14px);font-weight:600;line-height:1.35}slot[name=description]{color:var(--spui-ui-muted,var(--spui-semantic-body-text,#616161));font-size:12px;line-height:1.4}::slotted([slot=image]){display:inline-flex;max-width:48px;max-height:48px;align-items:center;justify-content:center}::slotted([slot=action]){display:inline-flex;align-items:center;justify-content:flex-end}@media(forced-colors:active){slot[name=description]{color:CanvasText}}`;
-            const layout = document.createElement("div");
-            layout.className = "layout";
-            layout.part.add("root");
-            const image = document.createElement("slot");
-            image.name = "image";
-            image.part.add("image");
-            const main = document.createElement("div");
-            main.className = "main";
-            main.part.add("content");
-            const header = document.createElement("slot");
-            header.name = "header";
-            header.part.add("header");
-            const defaultHeader = document.createElement("slot");
-            const description = document.createElement("slot");
-            description.name = "description";
-            description.part.add("description");
-            main.append(header);
-            header.append(defaultHeader);
-            main.append(description);
-            const action = document.createElement("slot");
-            action.name = "action";
-            action.part.add("action");
-            layout.append(image, main, action);
-            shadow.append(style, layout);
-        }
-    }
-    customElements.define("spui-card-header", SpuiCardHeader);
-}
-export function defineCardFooter() {
-    if (customElements.get("spui-card-footer"))
-        return;
-    class SpuiCardFooter extends HTMLElement {
-        connectedCallback() {
-            if (this.shadowRoot)
-                return;
-            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-control-gap,12px);min-width:0}slot[name=action]{margin-inline-start:auto}::slotted([slot=action]){display:inline-flex;align-items:center;justify-content:flex-end}@media(forced-colors:active){:host{color:CanvasText}}`;
-            const content = document.createElement("slot");
-            content.part.add("content");
-            const action = document.createElement("slot");
-            action.name = "action";
-            action.part.add("action");
-            shadow.append(style, content, action);
-        }
-    }
-    customElements.define("spui-card-footer", SpuiCardFooter);
-}
-export function defineCardPreview() {
-    if (customElements.get("spui-card-preview"))
-        return;
-    class SpuiCardPreview extends HTMLElement {
-        connectedCallback() {
-            if (this.shadowRoot)
-                return;
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{position:relative;display:block;min-width:0;overflow:hidden;margin-inline:calc(-1 * var(--spui-card-padding,16px));border-radius:inherit}:host(:first-child){margin-block-start:calc(-1 * var(--spui-card-padding,16px))}.preview{position:relative;min-width:0;overflow:hidden}slot:not([name=logo]){display:block}::slotted(img),::slotted(video),::slotted(picture){display:block;width:100%;max-width:100%;height:auto;max-height:360px;object-fit:cover}slot[name=logo]{position:absolute;inset-block-end:10px;inset-inline-start:10px;display:flex;align-items:center;justify-content:center;max-width:calc(100% - 20px);padding:4px;border:1px solid var(--spui-ui-stroke,#d1d1d1);border-radius:var(--spui-control-radius,6px);background:var(--spui-ui-surface,#fff);box-shadow:var(--spui-card-shadow,0 1px 3px #0002)}::slotted([slot=logo]){max-width:100%;max-height:40px}@media(forced-colors:active){:host{border:1px solid CanvasText}slot[name=logo]{border-color:CanvasText;background:Canvas;box-shadow:none}}`;
-            const preview = document.createElement("div");
-            preview.className = "preview";
-            preview.part.add("root");
-            const content = document.createElement("slot");
-            content.part.add("content");
-            const logo = document.createElement("slot");
-            logo.name = "logo";
-            logo.part.add("logo");
-            preview.append(content, logo);
-            shadow.append(style, preview);
-        }
-    }
-    customElements.define("spui-card-preview", SpuiCardPreview);
-}

package/dist/elements/card.d.ts

@@ -1,5 +0,0 @@
-export type CardAppearance = "filled" | "filled-alternative" | "outline" | "subtle";
-export type CardOrientation = "horizontal" | "vertical";
-export type CardSize = "small" | "medium" | "large";
-export type CardFocusMode = "off" | "no-tab" | "tab-exit" | "tab-only";
-export declare function defineCard(): void;

package/dist/elements/card.js

@@ -1,213 +0,0 @@
-import { base } from "./shared.js";
-const focusableSelector = 'a[href],area[href],button,input:not([type="hidden"]),select,textarea,iframe,object,embed,audio[controls],video[controls],summary,[contenteditable]:not([contenteditable="false"]),[tabindex]';
-function findCardFocusables(card) {
-    const found = [];
-    const visit = (element) => {
-        if (element instanceof HTMLElement && element.matches(focusableSelector) && element.tabIndex >= 0 && !element.matches(":disabled,[hidden],[aria-hidden=true]") && element.getClientRects().length > 0)
-            found.push(element);
-        if (element instanceof HTMLSlotElement) {
-            const assigned = element.assignedElements({ flatten: true });
-            for (const child of assigned.length ? assigned : [...element.children])
-                visit(child);
-            return;
-        }
-        const children = element.shadowRoot ? [...element.shadowRoot.children] : [...element.children];
-        for (const child of children)
-            visit(child);
-    };
-    for (const child of card.children)
-        visit(child);
-    return found;
-}
-function deepestActiveElement(document) {
-    let active = document.activeElement;
-    while (active?.shadowRoot?.activeElement)
-        active = active.shadowRoot.activeElement;
-    return active;
-}
-export function defineCard() {
-    if (customElements.get("spui-card"))
-        return;
-    class SpuiCard extends HTMLElement {
-        static observedAttributes = ["aria-label", "selectable", "selected", "default-selected", "disabled", "selection-label", "focus-mode"];
-        defaultSelectedValue;
-        focusGroupActive = false;
-        managedTabIndex = false;
-        managedRole = false;
-        selectionInput() {
-            const slot = this.shadowRoot?.querySelector("slot[name=checkbox]");
-            return slot?.assignedElements({ flatten: true }).find((element) => element instanceof HTMLInputElement)
-                ?? this.shadowRoot?.querySelector(".selection") ?? undefined;
-        }
-        get selected() { return this.hasAttribute("selected"); }
-        set selected(value) { this.toggleAttribute("selected", Boolean(value)); }
-        get defaultSelected() { return this.defaultSelectedValue ?? this.hasAttribute("default-selected"); }
-        set defaultSelected(value) { this.defaultSelectedValue = Boolean(value); this.setAttribute("selectable", ""); if (!this.hasAttribute("selected"))
-            this.toggleAttribute("selected", this.defaultSelectedValue); }
-        get focusMode() { const value = this.getAttribute("focus-mode"); return value === "no-tab" || value === "tab-exit" || value === "tab-only" ? value : "off"; }
-        set focusMode(value) { if (value === "off")
-            this.removeAttribute("focus-mode");
-        else
-            this.setAttribute("focus-mode", value); }
-        connectedCallback() {
-            if (this.hasAttribute("default-selected")) {
-                this.defaultSelectedValue = this.hasAttribute("default-selected");
-                this.setAttribute("selectable", "");
-                if (this.hasAttribute("default-selected") && !this.hasAttribute("selected"))
-                    this.toggleAttribute("selected", this.defaultSelectedValue ?? true);
-                this.removeAttribute("default-selected");
-            }
-            if (this.hasAttribute("aria-label"))
-                this.setAttribute("role", "region");
-            if (!this.shadowRoot) {
-                const shadow = this.attachShadow({ mode: "open" });
-                const style = document.createElement("style");
-                style.textContent = `${base}:host{display:block;position:relative;min-width:0;border:1px solid var(--spui-card-border,var(--spui-ui-stroke,var(--spui-semantic-card-border,var(--colorNeutralStroke2,#edebe9))));border-radius:var(--spui-card-radius,8px);background:var(--spui-card-background,var(--spui-ui-surface,var(--spui-semantic-card-background,var(--colorNeutralBackground1,#fff))));box-shadow:var(--spui-card-shadow,0 1px 3px #0001)}.content{min-width:0;padding:var(--spui-card-padding,16px)}:host([selectable]){cursor:pointer}:host([selectable]) .content{padding-inline-start:44px}:host([selected]){border-color:var(--spui-selection-border,var(--spui-semantic-focus-border,var(--colorCompoundBrandStroke,#0f6cbd)));background:var(--spui-selection-background,color-mix(in srgb,var(--spui-base-accent,var(--spui-ui-accent,#0f6cbd)) 7%,var(--spui-card-background,var(--spui-ui-surface,#fff)) 93%))}.selection{position:absolute;inset-block-start:12px;inset-inline-start:12px;width:18px;height:18px;margin:0;accent-color:var(--spui-base-accent,var(--spui-ui-accent,#0f6cbd));cursor:pointer}:host(:focus-within){outline:2px solid var(--spui-focus-ring,var(--spui-semantic-focus-border,var(--colorStrokeFocus2,#005a9e)));outline-offset:2px}:host([disabled]),:host([disabled]) .selection{cursor:default}:host([appearance=filled-alternative]){background:color-mix(in srgb,var(--spui-base-surface,var(--spui-ui-surface,#fff)) 90%,var(--spui-base-text,var(--spui-ui-text,#242424)) 10%)}:host([appearance=outline]){background:transparent;box-shadow:none}:host([appearance=subtle]){border-color:transparent;background:var(--spui-ui-canvas,var(--spui-semantic-body-background,#f5f5f5));box-shadow:none}:host([size=small]){--spui-card-padding:12px;--spui-control-gap:8px}:host([size=large]){--spui-card-padding:20px;--spui-control-gap:12px}:host([orientation=horizontal]) .content>slot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spui-control-gap,8px)}:host([data-spui-appearance=glass]),:host-context([data-spui-appearance=glass]){backdrop-filter:var(--spui-card-backdrop,none)}:host([selected]){border-color:var(--spui-selection-border,var(--spui-semantic-focus-border,var(--colorCompoundBrandStroke,#0f6cbd)));background:var(--spui-selection-background,color-mix(in srgb,var(--spui-base-accent,var(--spui-ui-accent,#0f6cbd)) 7%,var(--spui-card-background,var(--spui-ui-surface,#fff)) 93%))}@media(forced-colors:active){:host{border-color:CanvasText;box-shadow:none}:host([appearance=subtle]),:host([appearance=outline]){background:Canvas}:host([selected]){outline:2px solid Highlight}.selection{accent-color:Highlight}}`;
-                style.textContent += ":host([has-floating-action]) .content{padding-block-start:48px}.floating-action{position:absolute;z-index:1;inset-block-start:8px;inset-inline-end:8px;display:flex;align-items:center;justify-content:center}.floating-action:empty{display:none}";
-                const root = document.createElement("div");
-                root.className = "root";
-                root.part.add("root");
-                root.style.position = "relative";
-                root.style.minWidth = "0";
-                const content = document.createElement("div");
-                content.className = "content";
-                content.part.add("content");
-                content.append(document.createElement("slot"));
-                const floatingAction = document.createElement("div");
-                floatingAction.className = "floating-action";
-                const floatingSlot = document.createElement("slot");
-                floatingSlot.name = "floating-action";
-                floatingSlot.addEventListener("slotchange", () => this.toggleAttribute("has-floating-action", floatingSlot.assignedNodes({ flatten: true }).length > 0));
-                floatingAction.append(floatingSlot);
-                const checkbox = document.createElement("input");
-                checkbox.className = "selection";
-                checkbox.type = "checkbox";
-                checkbox.part.add("selection");
-                checkbox.addEventListener("change", event => this.setSelected(checkbox.checked, event));
-                const checkboxSlot = document.createElement("slot");
-                checkboxSlot.name = "checkbox";
-                checkboxSlot.append(checkbox);
-                checkboxSlot.addEventListener("slotchange", () => this.syncSelection());
-                root.append(checkboxSlot, floatingAction, content);
-                shadow.append(style, root);
-                this.addEventListener("change", event => {
-                    const input = event.target;
-                    if (input instanceof HTMLInputElement && input.slot === "checkbox")
-                        this.setSelected(input.checked, event);
-                });
-                this.addEventListener("click", event => {
-                    if (!this.isSelectable() || this.hasAttribute("disabled") || event.composedPath().some(target => target instanceof Element && target !== this && target.matches("a,button,input,select,textarea,[contenteditable=true],[role=button],[role=link],[role=checkbox]")))
-                        return;
-                    this.setSelected(!this.selected, event);
-                });
-                this.addEventListener("keydown", event => this.handleCardKeydown(event));
-                this.addEventListener("focusout", () => setTimeout(() => {
-                    const active = deepestActiveElement(this.ownerDocument);
-                    if (active !== this && !this.contains(active))
-                        this.focusGroupActive = false;
-                }, 0));
-            }
-            this.syncSelection();
-            this.syncFocusMode();
-        }
-        attributeChangedCallback(name) {
-            if (name === "aria-label" && this.hasAttribute("aria-label") && !this.hasAttribute("role"))
-                this.setAttribute("role", "region");
-            if (this.shadowRoot) {
-                this.syncSelection();
-                this.syncFocusMode();
-            }
-        }
-        isSelectable() { return this.hasAttribute("selectable") || this.hasAttribute("selected") || Boolean(this.defaultSelectedValue); }
-        syncSelection() {
-            const checkbox = this.selectionInput();
-            if (!checkbox)
-                return;
-            const selectable = this.isSelectable();
-            if (!checkbox.hasAttribute("type"))
-                checkbox.type = "checkbox";
-            checkbox.hidden = !selectable;
-            checkbox.disabled = this.hasAttribute("disabled");
-            checkbox.checked = this.selected;
-            checkbox.setAttribute("aria-label", this.getAttribute("selection-label") || `Select ${this.getAttribute("aria-label") || "card"}`);
-        }
-        syncFocusMode() {
-            const enabled = this.focusMode !== "off" && !this.isSelectable() && !this.hasAttribute("disabled");
-            if (enabled && !this.hasAttribute("tabindex")) {
-                this.tabIndex = 0;
-                this.managedTabIndex = true;
-            }
-            else if (!enabled && this.managedTabIndex) {
-                this.removeAttribute("tabindex");
-                this.managedTabIndex = false;
-            }
-            if (enabled && !this.hasAttribute("role")) {
-                this.setAttribute("role", "group");
-                this.managedRole = true;
-            }
-            else if (!enabled && this.managedRole) {
-                this.removeAttribute("role");
-                this.managedRole = false;
-            }
-            if (!enabled)
-                this.focusGroupActive = false;
-        }
-        handleFocusKeydown(event) {
-            const mode = this.focusMode;
-            if (mode === "off" || this.hasAttribute("disabled") || this.isSelectable())
-                return;
-            const focusables = findCardFocusables(this);
-            const focused = event.composedPath().find(target => target instanceof HTMLElement && focusables.includes(target)) ?? deepestActiveElement(this.ownerDocument);
-            if ((mode === "no-tab" || mode === "tab-exit") && event.key === "Enter" && focused === this && focusables.length) {
-                event.preventDefault();
-                this.focusGroupActive = true;
-                focusables[0].focus();
-                return;
-            }
-            if (!this.focusGroupActive)
-                return;
-            if (event.key === "Escape") {
-                event.preventDefault();
-                this.focusGroupActive = false;
-                this.focus();
-                return;
-            }
-            if (event.key !== "Tab" || !focusables.length)
-                return;
-            const index = focusables.indexOf(focused);
-            if (mode === "no-tab") {
-                if (event.shiftKey && index <= 0) {
-                    event.preventDefault();
-                    focusables.at(-1)?.focus();
-                }
-                else if (!event.shiftKey && index === focusables.length - 1) {
-                    event.preventDefault();
-                    focusables[0].focus();
-                }
-            }
-            else if (mode === "tab-exit" && ((event.shiftKey && index === 0) || (!event.shiftKey && index === focusables.length - 1))) {
-                this.focusGroupActive = false;
-            }
-        }
-        handleCardKeydown(event) {
-            if (event.key === "Enter" && !this.hasAttribute("disabled") && this.isSelectable()) {
-                const target = event.composedPath()[0];
-                if (target === this || target === this.selectionInput()) {
-                    event.preventDefault();
-                    this.setSelected(!this.selected, event);
-                    return;
-                }
-            }
-            this.handleFocusKeydown(event);
-        }
-        setSelected(selected, sourceEvent) {
-            if (this.hasAttribute("disabled") || !this.isSelectable() || this.selected === selected) {
-                this.syncSelection();
-                return;
-            }
-            this.toggleAttribute("selected", selected);
-            this.dispatchEvent(new CustomEvent("spui-selection-change", { bubbles: true, composed: true, detail: { selected, event: sourceEvent } }));
-        }
-    }
-    customElements.define("spui-card", SpuiCard);
-}

package/dist/elements/carousel.d.ts

@@ -1,92 +0,0 @@
-export type CarouselAlign = "start" | "center" | "end";
-export type CarouselAppearance = "flat" | "elevated";
-export type CarouselMotion = "slide" | "fade" | {
-    kind: "slide";
-    duration?: number;
-};
-export type CarouselAnnouncerFunction = (index: number, totalSlides: number, slideGroupList: number[][]) => string;
-export type CarouselIndexChangeData = {
-    event: MouseEvent;
-    type: "click";
-    index: number;
-} | {
-    event: FocusEvent;
-    type: "focus";
-    index: number;
-} | {
-    event: PointerEvent | MouseEvent;
-    type: "drag";
-    index: number;
-} | {
-    event: Event;
-    type: "autoplay" | "scroll" | "programmatic";
-    index: number;
-} | {
-    event: KeyboardEvent;
-    type: "keydown";
-    index: number;
-};
-export type CarouselIndexChangeSource = CarouselIndexChangeData extends infer T ? T extends {
-    index: number;
-} ? Omit<T, "index"> : never : never;
-export interface SharePointCarouselElement extends HTMLElement {
-    align: CarouselAlign;
-    appearance: CarouselAppearance;
-    motion: CarouselMotion;
-    motionDuration: number;
-    slideWidth: string;
-    groupSize: number | "auto";
-    draggable: boolean;
-    whitespace: boolean;
-    selectedIndex: number;
-    defaultSelectedIndex: number;
-    activeIndex: number;
-    defaultActiveIndex: number;
-    circular: boolean;
-    goTo(index: number): void;
-    nextSlide(): void;
-    previousSlide(): void;
-    announcement?: CarouselAnnouncerFunction;
-}
-export interface SharePointCarouselNavButtonElement extends HTMLElement {
-    index: number;
-    selected: boolean;
-    disabled: boolean;
-}
-export interface SharePointCarouselCardElement extends HTMLElement {
-    autoSize: boolean;
-}
-export interface SharePointCarouselButtonElement extends HTMLElement {
-    navType: "prev" | "next";
-    disabled: boolean;
-}
-export interface SharePointCarouselAutoplayButtonElement extends HTMLElement {
-    selected: boolean;
-}
-export interface SharePointCarouselSliderElement extends HTMLElement {
-    cardFocus: boolean;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "spui-carousel": SharePointCarouselElement;
-        "spui-carousel-card": SharePointCarouselCardElement;
-        "spui-carousel-nav": HTMLElement;
-        "spui-carousel-nav-button": SharePointCarouselNavButtonElement;
-        "spui-carousel-nav-image-button": SharePointCarouselNavButtonElement;
-        "spui-carousel-button": SharePointCarouselButtonElement;
-        "spui-carousel-autoplay-button": SharePointCarouselAutoplayButtonElement;
-        "spui-carousel-slider": SharePointCarouselSliderElement;
-        "spui-carousel-viewport": HTMLElement;
-        "spui-carousel-nav-container": HTMLElement;
-    }
-}
-export declare function defineCarouselCard(): void;
-export declare function defineCarouselNav(): void;
-export declare function defineCarouselNavButton(): void;
-export declare function defineCarouselNavImageButton(): void;
-export declare function defineCarouselButton(): void;
-export declare function defineCarouselAutoplayButton(): void;
-export declare function defineCarouselNavContainer(): void;
-export declare function defineCarouselSlider(): void;
-export declare function defineCarouselViewport(): void;
-export declare function defineCarousel(): void;