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

package/dist/elements/button.js

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

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

package/dist/elements/card-primitives.js

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

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

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

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