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

package/dist/elements/file-upload.js

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

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

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

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

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

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

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

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