@spfx-fast/sharepoint-ui 0.4.3 → 0.5.0

package/dist/elements/file-upload.js

@@ -1,211 +0,0 @@
-import { base, syncHostAccessibleName } from "./shared.js";
-/** File selection surface. Uploading and SharePoint persistence remain the consumer's responsibility. */
-export function defineFileUpload() {
-    if (customElements.get("spui-file-upload"))
-        return;
-    class SpuiFileUpload extends HTMLElement {
-        static formAssociated = true;
-        static observedAttributes = ["accept", "multiple", "disabled", "required", "name", "max-files", "max-file-size", "label", "aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid", "browse-label", "remove-label", "drop-label", "selected-label", "invalid-message", "required-message"];
-        internals;
-        input;
-        list;
-        status;
-        selected = [];
-        formDisabled = false;
-        get form() { return this.internals?.form ?? null; }
-        get files() { return this.selected; }
-        constructor() { super(); try {
-            this.internals = this.attachInternals();
-        }
-        catch { /* Native picker continues to work where form-associated elements are unavailable. */ } }
-        connectedCallback() { if (!this.shadowRoot)
-            this.render(); this.sync(); }
-        attributeChangedCallback() { if (this.isConnected && this.input)
-            this.sync(); }
-        formDisabledCallback(disabled) { this.formDisabled = disabled; if (this.input)
-            this.sync(); }
-        formResetCallback() { if (this.status)
-            this.status.textContent = ""; this.setFiles([], false); }
-        formStateRestoreCallback(state) { if (state instanceof File)
-            this.setFiles([state], false);
-        else if (state instanceof FormData)
-            this.setFiles(state.getAll(this.getAttribute("name") || "").filter((value) => value instanceof File), false); }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:block;min-width:0;color:var(--spui-ui-text,var(--spui-semantic-body-text,#242424));font-family:var(--spui-font-family,inherit)}.label{display:block;margin-block-end:6px;font-size:14px;font-weight:600}.drop{box-sizing:border-box;display:grid;place-items:center;gap:6px;min-height:104px;padding:16px;border:1px dashed var(--spui-ui-stroke,var(--spui-semantic-input-border,#8a8886));border-radius:var(--spui-control-radius,6px);background:var(--spui-ui-surface,var(--spui-semantic-input-background,#fff));text-align:center;transition:border-color var(--spui-motion-duration-fast,120ms) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1)),background-color var(--spui-motion-duration-fast,120ms) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1))}.drop[data-dragging=true]{border-color:var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));background:var(--spui-ui-surface-hover,var(--spui-ui-canvas,#f5f5f5))}.hint{color:var(--spui-ui-muted,var(--spui-semantic-body-subtext,#616161));font-size:12px}.browse{min-height:32px;padding:4px 12px;border:1px solid var(--spui-control-border,var(--spui-ui-stroke,#8a8886));border-radius:var(--spui-control-radius,4px);background:var(--spui-ui-surface,#fff);color:inherit;font:inherit;cursor:pointer}.browse:hover:not(:disabled){background:var(--spui-ui-surface-hover,var(--spui-ui-canvas,#f5f5f5))}.browse:focus-visible,.remove:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:2px}.browse:disabled,.remove:disabled{opacity:.55;cursor:not-allowed}.input{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.files{display:grid;gap:4px;margin:8px 0 0;padding:0;list-style:none}.files:empty{display:none}.file{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 8px;border:1px solid var(--spui-ui-stroke,#d1d1d1);border-radius:var(--spui-control-radius,4px)}.filename{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.size{flex:none;color:var(--spui-ui-muted,#616161);font-size:12px;font-variant-numeric:tabular-nums}.remove{min-width:32px;min-height:32px;border:0;border-radius:var(--spui-control-radius,4px);background:transparent;color:inherit;font:inherit;cursor:pointer}.status{margin-block-start:6px;color:var(--spui-semantic-error-text,var(--spui-ui-danger,#b10e1c));font-size:12px}.status:empty{display:none}:host([data-spui-appearance=glass]) .drop,:host-context([data-spui-appearance=glass]) .drop{backdrop-filter:var(--spui-card-backdrop,blur(12px) saturate(1.2))}@media(prefers-reduced-motion:reduce){.drop{transition:none}}@media(forced-colors:active){.drop,.file{border-color:CanvasText;background:Canvas;color:CanvasText}.drop[data-dragging=true]{outline:2px solid Highlight}.browse{border-color:ButtonText;background:ButtonFace;color:ButtonText}}`;
-            const label = document.createElement("label");
-            label.className = "label";
-            label.part.add("label");
-            const drop = document.createElement("div");
-            drop.className = "drop";
-            drop.part.add("dropzone");
-            drop.tabIndex = -1;
-            const hint = document.createElement("span");
-            hint.className = "hint";
-            const browse = document.createElement("button");
-            browse.type = "button";
-            browse.className = "browse";
-            browse.part.add("browse-button");
-            this.input = document.createElement("input");
-            this.input.type = "file";
-            this.input.className = "input";
-            this.input.part.add("input");
-            browse.addEventListener("click", () => this.input.click());
-            this.input.addEventListener("change", () => { this.addFiles(Array.from(this.input.files ?? [])); this.input.value = ""; });
-            drop.addEventListener("dragover", event => { event.preventDefault(); if (!this.isDisabled())
-                drop.dataset.dragging = "true"; });
-            drop.addEventListener("dragleave", event => { if (!drop.contains(event.relatedTarget))
-                delete drop.dataset.dragging; });
-            drop.addEventListener("drop", event => { event.preventDefault(); delete drop.dataset.dragging; if (!this.isDisabled())
-                this.addFiles(Array.from(event.dataTransfer?.files ?? [])); });
-            drop.addEventListener("keydown", event => { if (event.key === "Enter" || event.key === " ") {
-                event.preventDefault();
-                this.input.click();
-            } });
-            this.input.addEventListener("focus", () => browse.focus());
-            this.list = document.createElement("ul");
-            this.list.className = "files";
-            this.list.part.add("file-list");
-            this.list.setAttribute("aria-label", "Selected files");
-            this.status = document.createElement("div");
-            this.status.className = "status";
-            this.status.part.add("status");
-            this.status.setAttribute("role", "status");
-            this.status.setAttribute("aria-live", "polite");
-            drop.append(hint, browse, this.input);
-            shadow.append(style, label, drop, this.list, this.status);
-        }
-        sync() {
-            const disabled = this.isDisabled();
-            this.input.accept = this.getAttribute("accept") || "";
-            this.input.multiple = this.hasAttribute("multiple");
-            this.input.disabled = disabled;
-            this.input.required = this.hasAttribute("required") && this.selected.length === 0;
-            const label = this.getAttribute("aria-label") || this.getAttribute("label") || "Add files";
-            const browse = this.getAttribute("browse-label") || "Browse files";
-            if (!this.hasAttribute("role"))
-                this.setAttribute("role", "group");
-            const labelElement = this.shadowRoot?.querySelector(".label");
-            if (labelElement) {
-                labelElement.textContent = this.getAttribute("label") || "";
-                labelElement.hidden = !this.hasAttribute("label");
-            }
-            this.input.setAttribute("aria-label", label);
-            syncHostAccessibleName(this, this.input);
-            const invalid = this.getAttribute("aria-invalid");
-            if (invalid === null)
-                this.input.removeAttribute("aria-invalid");
-            else
-                this.input.setAttribute("aria-invalid", invalid);
-            const hint = this.shadowRoot?.querySelector(".hint");
-            if (hint)
-                hint.textContent = this.getAttribute("drop-label") || "Drag files here or browse to select";
-            const button = this.shadowRoot?.querySelector(".browse");
-            if (button) {
-                button.textContent = browse;
-                button.disabled = disabled;
-                button.setAttribute("aria-label", browse);
-            }
-            this.list?.setAttribute("aria-label", `${label}: ${this.getAttribute("selected-label") || "selected files"}`);
-            this.renderFiles();
-            this.syncForm();
-        }
-        addFiles(files) {
-            if (!files.length || this.isDisabled())
-                return;
-            const max = Number(this.getAttribute("max-files"));
-            const limit = Number(this.getAttribute("max-file-size"));
-            const next = this.hasAttribute("multiple") ? [...this.selected] : [];
-            const errors = [];
-            for (const file of files) {
-                if (!this.accepts(file)) {
-                    errors.push({ code: "file-type-not-accepted", file });
-                    continue;
-                }
-                if (Number.isFinite(limit) && limit > 0 && file.size > limit) {
-                    errors.push({ code: "file-too-large", file });
-                    continue;
-                }
-                if (Number.isFinite(max) && max > 0 && next.length >= max) {
-                    errors.push({ code: "too-many-files", file });
-                    continue;
-                }
-                if (!next.some(existing => existing.name === file.name && existing.size === file.size && existing.lastModified === file.lastModified))
-                    next.push(file);
-            }
-            this.status.textContent = errors.length ? (this.getAttribute("invalid-message") || this.getAttribute(errors[0].code === "file-too-large" ? "file-too-large-message" : errors[0].code === "too-many-files" ? "max-files-message" : "file-type-message") || this.describeError(errors[0])) : "";
-            this.setFiles(next, true);
-            if (errors.length)
-                this.dispatchEvent(new CustomEvent("spui-file-error", { detail: { errors }, bubbles: true, composed: true }));
-        }
-        describeError(error) {
-            if (error.code === "file-too-large")
-                return `${error.file?.name || "File"} exceeds the allowed size.`;
-            if (error.code === "too-many-files")
-                return "The maximum number of files has been reached.";
-            return "The selected file type is not accepted.";
-        }
-        accepts(file) {
-            const accepted = (this.getAttribute("accept") || "").split(",").map(value => value.trim().toLowerCase()).filter(Boolean);
-            if (!accepted.length)
-                return true;
-            const name = file.name.toLowerCase();
-            const type = file.type.toLowerCase();
-            return accepted.some(value => value.startsWith(".") ? name.endsWith(value) : value.endsWith("/*") ? type.startsWith(value.slice(0, -1)) : type === value);
-        }
-        setFiles(files, emit) {
-            this.selected = files;
-            this.renderFiles();
-            this.syncForm();
-            if (emit)
-                this.dispatchEvent(new CustomEvent("spui-file-change", { detail: { files: [...files] }, bubbles: true, composed: true }));
-        }
-        renderFiles() {
-            if (!this.list)
-                return;
-            this.list.replaceChildren(...this.selected.map((file, index) => {
-                const item = document.createElement("li");
-                item.className = "file";
-                item.part.add("file");
-                const name = document.createElement("span");
-                name.className = "filename";
-                name.textContent = file.name;
-                const size = document.createElement("span");
-                size.className = "size";
-                size.textContent = this.formatSize(file.size);
-                const remove = document.createElement("button");
-                remove.type = "button";
-                remove.className = "remove";
-                remove.textContent = "×";
-                remove.disabled = this.isDisabled();
-                remove.setAttribute("aria-label", `${this.getAttribute("remove-label") || "Remove"} ${file.name}`);
-                remove.addEventListener("click", () => {
-                    this.status.textContent = "";
-                    const next = this.selected.filter((_, i) => i !== index);
-                    this.setFiles(next, true);
-                    const nextRemove = this.list.querySelectorAll(".remove")[Math.min(index, next.length - 1)];
-                    (nextRemove ?? this.shadowRoot?.querySelector(".browse"))?.focus();
-                });
-                item.append(name, size, remove);
-                return item;
-            }));
-        }
-        formatSize(size) { return size < 1024 ? `${size} B` : size < 1024 * 1024 ? `${(size / 1024).toFixed(1)} KB` : `${(size / (1024 * 1024)).toFixed(1)} MB`; }
-        syncForm() {
-            if (!this.internals)
-                return;
-            const name = this.getAttribute("name") || "";
-            const data = new FormData();
-            if (name)
-                this.selected.forEach(file => data.append(name, file, file.name));
-            this.internals.setFormValue(this.selected.length && name ? data : null, JSON.stringify(this.selected.map(file => ({ name: file.name, size: file.size, lastModified: file.lastModified }))));
-            if (this.hasAttribute("required") && !this.selected.length)
-                this.internals.setValidity({ valueMissing: true }, this.getAttribute("required-message") || "Select at least one file.", this.shadowRoot?.querySelector(".browse") ?? undefined);
-            else
-                this.internals.setValidity({});
-        }
-        isDisabled() { return this.formDisabled || this.hasAttribute("disabled"); }
-    }
-    customElements.define("spui-file-upload", SpuiFileUpload);
-}

package/dist/elements/floating-position.d.ts

@@ -1,36 +0,0 @@
-export type FloatingPlacement = "top" | "bottom" | "start" | "end" | "left" | "right";
-export type FloatingPosition = {
-    top: number;
-    left: number;
-    placement: Exclude<FloatingPlacement, "start" | "end">;
-    align: FloatingAlign;
-};
-export type FloatingAlign = "start" | "center" | "end" | "top" | "bottom";
-export type FloatingModifiers = {
-    crossAxisOffset?: number;
-    coverTarget?: boolean;
-    overflowBoundaryPadding?: {
-        top?: number;
-        right?: number;
-        bottom?: number;
-        left?: number;
-    };
-};
-export type FloatingAnchorRect = Pick<DOMRectReadOnly, "left" | "top" | "right" | "bottom" | "width" | "height">;
-export type FloatingBoundary = Element | {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-} | readonly Element[] | "clippingParents" | "scrollParent" | "window" | null;
-export declare function getFloatingBoundary(boundary: FloatingBoundary | undefined, context: Element, viewport?: {
-    width: number;
-    height: number;
-}): Pick<DOMRectReadOnly, "left" | "top" | "right" | "bottom"> | undefined;
-export declare function getFloatingPosition(anchor: FloatingAnchorRect, surface: Pick<DOMRectReadOnly, "width" | "height">, placement: FloatingPlacement, direction: "ltr" | "rtl", gap?: number, viewport?: {
-    width: number;
-    height: number;
-}, align?: FloatingAlign, fallbackPlacements?: Array<{
-    placement: FloatingPlacement;
-    align?: FloatingAlign;
-}>, pinned?: boolean, flipBoundary?: Pick<DOMRectReadOnly, "left" | "top" | "right" | "bottom">, overflowBoundary?: Pick<DOMRectReadOnly, "left" | "top" | "right" | "bottom">, modifiers?: FloatingModifiers): FloatingPosition;

package/dist/elements/floating-position.js

@@ -1,92 +0,0 @@
-export function getFloatingBoundary(boundary, context, viewport = { width: innerWidth, height: innerHeight }) {
-    if (boundary === undefined || boundary === null || boundary === "window")
-        return undefined;
-    const rectEdges = (rect) => {
-        const left = rect.left ?? rect.x ?? 0;
-        const top = rect.top ?? rect.y ?? 0;
-        return { left, top, right: left + rect.width, bottom: top + rect.height };
-    };
-    const isElement = (value) => Boolean(value && typeof value === "object" && value.nodeType === 1 && typeof value.getBoundingClientRect === "function");
-    if (Array.isArray(boundary)) {
-        const rects = boundary.map(element => rectEdges(element.getBoundingClientRect()));
-        if (!rects.length)
-            return undefined;
-        const left = Math.max(...rects.map(rect => rect.left));
-        const top = Math.max(...rects.map(rect => rect.top));
-        return { left, top, right: Math.max(left, Math.min(...rects.map(rect => rect.right))), bottom: Math.max(top, Math.min(...rects.map(rect => rect.bottom))) };
-    }
-    if (isElement(boundary))
-        return rectEdges(boundary.getBoundingClientRect());
-    if (typeof boundary === "object" && "width" in boundary && "height" in boundary)
-        return rectEdges(boundary);
-    if (boundary !== "clippingParents" && boundary !== "scrollParent")
-        return undefined;
-    const bounds = { left: 0, top: 0, right: viewport.width, bottom: viewport.height };
-    const view = context.ownerDocument.defaultView;
-    const parent = (current) => current.parentElement ?? (current.getRootNode() instanceof ShadowRoot ? current.getRootNode().host : null);
-    for (let current = parent(context); current; current = parent(current)) {
-        const style = view?.getComputedStyle(current);
-        if (!style)
-            continue;
-        const clipsX = /^(auto|scroll|hidden|clip|overlay)$/.test(style.overflowX);
-        const clipsY = /^(auto|scroll|hidden|clip|overlay)$/.test(style.overflowY);
-        const scrolls = /^(auto|scroll|hidden|overlay)$/.test(style.overflowX) || /^(auto|scroll|hidden|overlay)$/.test(style.overflowY);
-        if (boundary === "scrollParent" && !scrolls)
-            continue;
-        if (!clipsX && !clipsY)
-            continue;
-        const rect = current.getBoundingClientRect();
-        const left = rect.left + current.clientLeft;
-        const top = rect.top + current.clientTop;
-        if (boundary === "scrollParent")
-            return { left, top, right: left + current.clientWidth, bottom: top + current.clientHeight };
-        if (clipsX) {
-            bounds.left = Math.max(bounds.left, left);
-            bounds.right = Math.min(bounds.right, left + current.clientWidth);
-        }
-        if (clipsY) {
-            bounds.top = Math.max(bounds.top, top);
-            bounds.bottom = Math.min(bounds.bottom, top + current.clientHeight);
-        }
-    }
-    return { left: bounds.left, top: bounds.top, right: Math.max(bounds.left, bounds.right), bottom: Math.max(bounds.top, bounds.bottom) };
-}
-export function getFloatingPosition(anchor, surface, placement, direction, gap = 8, viewport = { width: innerWidth, height: innerHeight }, align = "center", fallbackPlacements = [], pinned = false, flipBoundary, overflowBoundary, modifiers = {}) {
-    const viewportBoundary = { left: 0, top: 0, right: viewport.width, bottom: viewport.height };
-    const flipBounds = flipBoundary ?? viewportBoundary;
-    const overflowBounds = overflowBoundary ?? viewportBoundary;
-    const overflowPadding = modifiers.overflowBoundaryPadding ?? {};
-    const side = placement === "start" ? direction === "rtl" ? "right" : "left" : placement === "end" ? direction === "rtl" ? "left" : "right" : placement;
-    const opposite = { top: "bottom", bottom: "top", left: "right", right: "left" };
-    const coordinates = (candidate, candidateAlign = align) => {
-        const candidateInlineAlign = candidateAlign === "start" || candidateAlign === "top" ? "start" : candidateAlign === "end" || candidateAlign === "bottom" ? "end" : "center";
-        const candidateBlockAlign = candidateAlign === "start" || candidateAlign === "top" ? "start" : candidateAlign === "end" || candidateAlign === "bottom" ? "end" : "center";
-        const inlineStartLeft = direction === "rtl" ? anchor.right - surface.width : anchor.left;
-        const inlineEndLeft = direction === "rtl" ? anchor.left : anchor.right - surface.width;
-        return candidate === "top" || candidate === "bottom"
-            ? { top: candidate === "top" ? (modifiers.coverTarget ? anchor.bottom : anchor.top) - surface.height - gap : (modifiers.coverTarget ? anchor.top : anchor.bottom) + gap, left: (candidateInlineAlign === "start" ? inlineStartLeft : candidateInlineAlign === "end" ? inlineEndLeft : anchor.left + (anchor.width - surface.width) / 2) + (modifiers.crossAxisOffset ?? 0) }
-            : { top: (candidateBlockAlign === "start" ? anchor.top : candidateBlockAlign === "end" ? anchor.bottom - surface.height : anchor.top + (anchor.height - surface.height) / 2) + (modifiers.crossAxisOffset ?? 0), left: candidate === "left" ? (modifiers.coverTarget ? anchor.right : anchor.left) - surface.width - gap : (modifiers.coverTarget ? anchor.left : anchor.right) + gap };
-    };
-    const fits = (_candidate, point) => point.top >= flipBounds.top + gap && point.left >= flipBounds.left + gap && point.top + surface.height <= flipBounds.bottom - gap && point.left + surface.width <= flipBounds.right - gap;
-    const candidates = [
-        { placement: side, align },
-        ...(pinned ? [] : fallbackPlacements),
-        ...(!pinned ? [{ placement: opposite[side], align }] : []),
-    ].map(candidate => ({ placement: candidate.placement === "start" ? direction === "rtl" ? "right" : "left" : candidate.placement === "end" ? direction === "rtl" ? "left" : "right" : candidate.placement, align: candidate.align ?? align }));
-    const unique = candidates.filter((candidate, index) => candidates.findIndex(other => other.placement === candidate.placement && other.align === candidate.align) === index);
-    let selected = unique.map(candidate => ({ ...candidate, point: coordinates(candidate.placement, candidate.align) })).find(candidate => fits(candidate.placement, candidate.point));
-    if (!selected) {
-        selected = unique.map(candidate => ({ ...candidate, point: coordinates(candidate.placement, candidate.align) })).sort((a, b) => {
-            const overflow = (candidate) => Math.max(0, flipBounds.left + gap - candidate.point.left) + Math.max(0, candidate.point.left + surface.width - (flipBounds.right - gap)) + Math.max(0, flipBounds.top + gap - candidate.point.top) + Math.max(0, candidate.point.top + surface.height - (flipBounds.bottom - gap));
-            return overflow(a) - overflow(b);
-        })[0];
-    }
-    const actual = selected.placement;
-    const point = selected.point;
-    return {
-        placement: actual,
-        align: selected.align,
-        left: Math.max(overflowBounds.left + gap + (overflowPadding.left ?? 0), Math.min(point.left, overflowBounds.right - surface.width - gap - (overflowPadding.right ?? 0))),
-        top: Math.max(overflowBounds.top + gap + (overflowPadding.top ?? 0), Math.min(point.top, overflowBounds.bottom - surface.height - gap - (overflowPadding.bottom ?? 0))),
-    };
-}

package/dist/elements/image.d.ts

@@ -1,28 +0,0 @@
-export type ImageFit = "none" | "center" | "contain" | "cover" | "default";
-export type ImageShape = "square" | "rounded" | "circular";
-export type ImageOptions = {
-    src: string;
-    alt: string;
-    srcSet?: string;
-    sizes?: string;
-    width?: number;
-    height?: number;
-    title?: string;
-    className?: string;
-    loading?: "eager" | "lazy";
-    decoding?: "async" | "sync" | "auto";
-    fetchPriority?: "high" | "low" | "auto";
-    fit?: ImageFit;
-    shape?: ImageShape;
-    block?: boolean;
-    bordered?: boolean;
-    shadow?: boolean;
-};
-type ImageStyleOptions = Pick<ImageOptions, "fit" | "shape" | "block" | "bordered" | "shadow"> & {
-    width?: number | string;
-    height?: number | string;
-};
-export declare function getImageStyle({ fit, shape, block, bordered, shadow, width, height }: ImageStyleOptions): Record<string, string>;
-/** Create a native image with browser-native responsive loading and meaningful alt text. */
-export declare function createImage(options: ImageOptions): HTMLImageElement;
-export {};

package/dist/elements/image.js

@@ -1,38 +0,0 @@
-export function getImageStyle({ fit = "default", shape = "square", block, bordered, shadow, width, height }) {
-    const fitFill = fit !== "default" && width == null && height == null;
-    return {
-        display: block ? "block" : "inline-block",
-        maxWidth: "100%",
-        ...(block ? { width: "100%" } : {}),
-        ...(fitFill ? { width: "100%", height: "100%" } : {}),
-        ...(fit === "default" ? {} : { objectFit: fit === "center" ? "none" : fit }),
-        ...(fit === "default" ? {} : { objectPosition: fit === "none" ? "left top" : "center" }),
-        borderRadius: shape === "circular" ? "50%" : shape === "rounded" ? "var(--spui-image-radius,var(--spui-control-radius,4px))" : "0",
-        ...(bordered ? { border: "1px solid var(--spui-image-border,var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1)))" } : {}),
-        ...(shadow ? { boxShadow: "var(--spui-image-shadow,var(--spui-card-shadow,0 1px 3px #0002))" } : {}),
-    };
-}
-/** Create a native image with browser-native responsive loading and meaningful alt text. */
-export function createImage(options) {
-    const image = document.createElement("img");
-    image.alt = options.alt;
-    if (options.srcSet)
-        image.srcset = options.srcSet;
-    if (options.sizes)
-        image.sizes = options.sizes;
-    if (options.width !== undefined)
-        image.width = options.width;
-    if (options.height !== undefined)
-        image.height = options.height;
-    if (options.title)
-        image.title = options.title;
-    if (options.className)
-        image.className = options.className;
-    image.loading = options.loading ?? "lazy";
-    image.decoding = options.decoding ?? "async";
-    image.fetchPriority = options.fetchPriority ?? "auto";
-    Object.assign(image.style, getImageStyle(options));
-    // Configure the candidate set and intrinsic layout before starting any image request.
-    image.src = options.src;
-    return image;
-}

package/dist/elements/info.d.ts

@@ -1,9 +0,0 @@
-import { type LabelOptions } from "./label.js";
-export type InfoPlacement = "top" | "bottom" | "start" | "end";
-export type InfoLabelOptions = LabelOptions & {
-    infoButtonLabel?: string;
-    placement?: InfoPlacement;
-};
-export declare function defineInfoButton(): void;
-/** Build a native form label with an adjacent, separately focusable information button. */
-export declare function createInfoLabel(labelContent: string | Node, info: string | Node, options?: InfoLabelOptions): HTMLSpanElement;

package/dist/elements/info.js

@@ -1,102 +0,0 @@
-import { definePopover } from "./popover.js";
-import { createLabel } from "./label.js";
-export function defineInfoButton() {
-    if (customElements.get("spui-info-button"))
-        return;
-    class SpuiInfoButton extends HTMLElement {
-        static observedAttributes = ["label", "info", "placement", "open", "disabled", "size", "inline", "popover-placement", "popover-label", "popover-arrow", "popover-trap-focus"];
-        popoverElement;
-        trigger;
-        contentSlot;
-        get open() { return this.popoverElement?.open ?? this.hasAttribute("open"); }
-        set open(value) { if (this.popoverElement)
-            this.popoverElement.open = Boolean(value);
-        else
-            this.toggleAttribute("open", Boolean(value)); }
-        get inline() { return this.getAttribute("inline") !== "false"; }
-        set inline(value) { if (value)
-            this.removeAttribute("inline");
-        else
-            this.setAttribute("inline", "false"); }
-        connectedCallback() {
-            definePopover();
-            if (!this.shadowRoot)
-                this.render();
-            this.sync();
-        }
-        attributeChangedCallback() { if (this.isConnected)
-            this.sync(); }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `:host{display:inline-flex;vertical-align:middle;line-height:1}:host([hidden]){display:none}button{display:inline-grid;place-items:center;box-sizing:border-box;width:var(--spui-info-button-size,20px);height:var(--spui-info-button-size,20px);padding:2px;border:1px solid transparent;border-radius:50%;background:transparent;color:var(--spui-info-button-color,var(--spui-ui-muted,var(--spui-semantic-body-text,#484644)));cursor:pointer;font:inherit}button:hover:not(:disabled){background:var(--spui-info-button-hover,var(--spui-ui-surface-hover,#f3f2f1));color:var(--spui-ui-accent,var(--spui-semantic-link,#0f6cbd))}button:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#005a9e));outline-offset:2px}button:disabled{opacity:.55;cursor:not-allowed}svg{width:calc(var(--spui-info-button-size,20px) * .8);height:calc(var(--spui-info-button-size,20px) * .8);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}:host([size=small]){--spui-info-button-size:16px}:host([size=large]){--spui-info-button-size:24px}:host([data-spui-appearance=glass]) button,:host-context([data-spui-appearance=glass]) button{backdrop-filter:blur(8px)}@media(forced-colors:active){button{border-color:ButtonText;color:ButtonText}button:focus-visible{outline-color:Highlight}}`;
-            const popover = document.createElement("spui-popover");
-            this.popoverElement = popover;
-            const trigger = document.createElement("button");
-            this.trigger = trigger;
-            trigger.type = "button";
-            trigger.slot = "trigger";
-            trigger.part.add("control");
-            const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-            svg.setAttribute("viewBox", "0 0 20 20");
-            svg.setAttribute("aria-hidden", "true");
-            const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-            path.setAttribute("d", "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0-9v5m0-8h.01");
-            svg.append(path);
-            trigger.append(svg);
-            const content = document.createElement("div");
-            content.slot = "content";
-            content.part.add("content");
-            const slot = document.createElement("slot");
-            this.contentSlot = slot;
-            slot.addEventListener("slotchange", () => this.syncContent());
-            content.append(slot);
-            popover.append(trigger, content);
-            popover.addEventListener("spui-open-change", event => {
-                if (event.detail.open)
-                    requestAnimationFrame(() => {
-                        const surface = popover.shadowRoot?.querySelector(".surface");
-                        surface?.setAttribute("tabindex", "-1");
-                        surface?.focus();
-                    });
-            });
-            shadow.append(style, popover);
-        }
-        sync() {
-            if (!this.popoverElement || !this.trigger)
-                return;
-            const label = this.getAttribute("label") || "More information";
-            this.trigger.setAttribute("aria-label", label);
-            this.trigger.disabled = this.hasAttribute("disabled");
-            this.popoverElement.setAttribute("placement", this.getAttribute("popover-placement") || this.getAttribute("placement") || "top");
-            this.popoverElement.setAttribute("label", this.getAttribute("popover-label") || label);
-            this.popoverElement.inline = this.inline;
-            this.popoverElement.toggleAttribute("arrow", this.hasAttribute("popover-arrow"));
-            this.popoverElement.toggleAttribute("trap-focus", this.hasAttribute("popover-trap-focus"));
-            if (this.popoverElement.open !== this.hasAttribute("open"))
-                this.popoverElement.open = this.hasAttribute("open");
-            this.syncContent();
-        }
-        syncContent() {
-            if (!this.contentSlot)
-                return;
-            this.contentSlot.textContent = !this.childNodes.length && this.hasAttribute("info") ? this.getAttribute("info") ?? "" : "";
-        }
-    }
-    customElements.define("spui-info-button", SpuiInfoButton);
-}
-/** Build a native form label with an adjacent, separately focusable information button. */
-export function createInfoLabel(labelContent, info, options = {}) {
-    defineInfoButton();
-    const wrapper = document.createElement("span");
-    Object.assign(wrapper.style, { display: "inline-flex", alignItems: "baseline", gap: "0.25em" });
-    const label = createLabel(labelContent, options);
-    wrapper.append(label);
-    const button = document.createElement("spui-info-button");
-    button.setAttribute("label", options.infoButtonLabel ?? "More information");
-    if (options.placement)
-        button.setAttribute("placement", options.placement);
-    button.append(typeof info === "string" ? document.createTextNode(info) : info);
-    wrapper.append(button);
-    return wrapper;
-}

package/dist/elements/input.d.ts

@@ -1,5 +0,0 @@
-export type InputSize = "small" | "medium" | "large";
-export type InputAppearance = "outline" | "underline" | "filled-darker" | "filled-lighter" | "filled-darker-shadow" | "filled-lighter-shadow";
-export type InputType = "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week" | (string & {});
-/** Bare, form-associated input; pair it with Label or Field for an accessible name. */
-export declare function defineInput(): void;