@spfx-fast/sharepoint-ui 0.4.2 → 0.5.0

package/dist/elements/shared.js

@@ -1,396 +0,0 @@
-export const base = `:host{font:inherit;font-family:var(--spui-font-family,inherit);color:var(--spui-ui-text,var(--spui-semantic-body-text,var(--colorNeutralForeground1,#323130)));color-scheme:var(--spui-color-scheme,light dark)}button,input,textarea{font:inherit;font-family:var(--spui-font-family,inherit)}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-semantic-focus-border,var(--colorStrokeFocus2,#005a9e)));outline-offset:2px}`;
-const accessibleNameSyncStates = new WeakMap();
-function stopHostAccessibleNameObserver(host, control) {
-    const hostStates = accessibleNameSyncStates.get(host);
-    const states = control ? [hostStates?.get(control)].filter((state) => Boolean(state)) : [...(hostStates?.values() ?? [])];
-    for (const state of states) {
-        state.observer?.disconnect();
-        state.observer = undefined;
-    }
-}
-function stopHostAccessibleDescriptionObserver(host, control) {
-    const hostStates = accessibleNameSyncStates.get(host);
-    const states = control ? [hostStates?.get(control)].filter((state) => Boolean(state)) : [...(hostStates?.values() ?? [])];
-    for (const state of states) {
-        state.descriptionObserver?.disconnect();
-        state.descriptionObserver = undefined;
-    }
-}
-export function stopHostAccessibleNameSync(host) {
-    stopHostAccessibleNameObserver(host);
-    stopHostAccessibleDescriptionObserver(host);
-    for (const state of accessibleNameSyncStates.get(host)?.values() ?? []) {
-        state.labelledBy = undefined;
-        state.describedBy = undefined;
-    }
-}
-function accessibleNameRoots(context) {
-    const isDocument = context.nodeType === Node.DOCUMENT_NODE;
-    const root = isDocument ? context : context.getRootNode();
-    const document = isDocument ? context : context.ownerDocument;
-    return [...new Set([root, document].filter((value) => value != null && (value.nodeType === Node.DOCUMENT_NODE || (value.nodeType === Node.DOCUMENT_FRAGMENT_NODE && "host" in value))))];
-}
-function accessibleNameHidden(element) {
-    const view = element.ownerDocument.defaultView;
-    let current = element;
-    while (current) {
-        if (current.hasAttribute("hidden") || current.getAttribute("aria-hidden") === "true")
-            return true;
-        if (view) {
-            const style = view.getComputedStyle(current);
-            if (style.display === "none" || style.visibility === "hidden" || style.visibility === "collapse" || style.contentVisibility === "hidden")
-                return true;
-        }
-        if (current.parentElement)
-            current = current.parentElement;
-        else {
-            const root = current.getRootNode();
-            current = root.nodeType === Node.DOCUMENT_FRAGMENT_NODE && "host" in root ? root.host : null;
-        }
-    }
-    return false;
-}
-function normalizeAccessibleText(value) {
-    return value.replace(/\s+/g, " ").trim();
-}
-function resolveAccessibleText(context, labelledBy) {
-    const roots = accessibleNameRoots(context);
-    const targets = new Set();
-    const contentPath = new Set();
-    let unresolved = false;
-    const find = (id) => {
-        for (const root of roots) {
-            const target = root.getElementById(id);
-            if (target)
-                return target;
-        }
-        return null;
-    };
-    const resolveIds = (ids, path) => ids.trim().split(/\s+/).filter(Boolean).map(id => {
-        const target = find(id);
-        if (!target) {
-            unresolved = true;
-            return "";
-        }
-        return nameOf(target, path, true);
-    }).filter(Boolean).join(" ");
-    const nameOf = (element, path, referenced) => {
-        targets.add(element);
-        const alreadyReferenced = path.has(element);
-        const repeatedContent = contentPath.has(element);
-        const addedReference = referenced && !alreadyReferenced;
-        if (addedReference)
-            path.add(element);
-        const addedContent = !repeatedContent;
-        if (addedContent)
-            contentPath.add(element);
-        try {
-            const hidden = accessibleNameHidden(element);
-            if (hidden && !referenced)
-                return "";
-            const includeHiddenDescendants = hidden && referenced;
-            if (referenced && ["none", "presentation"].includes(element.getAttribute("role") ?? ""))
-                return "";
-            const labelledByValue = element.getAttribute("aria-labelledby");
-            if (labelledByValue && !alreadyReferenced) {
-                const name = resolveIds(labelledByValue, path);
-                if (name)
-                    return name;
-            }
-            const embedded = referenced || element.closest("label") !== null;
-            if (embedded) {
-                const role = element.getAttribute("role");
-                if (role === "textbox" && element.isContentEditable)
-                    return normalizeAccessibleText(element.textContent ?? "");
-                if (["slider", "spinbutton", "scrollbar", "progressbar"].includes(role ?? "")) {
-                    const valueText = element.getAttribute("aria-valuetext");
-                    if (valueText !== null)
-                        return normalizeAccessibleText(valueText);
-                    const valueNow = element.getAttribute("aria-valuenow");
-                    if (valueNow !== null)
-                        return normalizeAccessibleText(valueNow);
-                }
-                if (element.localName === "input") {
-                    const input = element;
-                    if (["text", "search", "url", "tel", "email", "password", "number"].includes(input.type))
-                        return normalizeAccessibleText(input.value);
-                    if (input.type === "range")
-                        return normalizeAccessibleText(input.value);
-                }
-                if (element.localName === "textarea")
-                    return normalizeAccessibleText(element.value);
-                if (element.localName === "select") {
-                    const selected = [...element.selectedOptions].map(option => normalizeAccessibleText(option.textContent ?? "")).filter(Boolean);
-                    return selected.join(" ");
-                }
-            }
-            const ariaLabel = element.getAttribute("aria-label");
-            if (ariaLabel?.trim())
-                return normalizeAccessibleText(ariaLabel);
-            if (element.localName === "img" && element.hasAttribute("alt"))
-                return normalizeAccessibleText(element.getAttribute("alt") ?? "");
-            if (element.localName === "input") {
-                const input = element;
-                if (input.type === "image" && element.hasAttribute("alt"))
-                    return normalizeAccessibleText(element.getAttribute("alt") ?? "");
-                if (["button", "submit", "reset"].includes(input.type) && input.value)
-                    return normalizeAccessibleText(input.value);
-            }
-            if (element.namespaceURI === "http://www.w3.org/2000/svg" && element.localName === "svg") {
-                const title = element.querySelector(":scope > title")?.textContent;
-                if (title?.trim())
-                    return normalizeAccessibleText(title);
-            }
-            const text = [...element.childNodes].map(node => {
-                if (node.nodeType === Node.TEXT_NODE)
-                    return normalizeAccessibleText(node.textContent ?? "");
-                return node.nodeType === Node.ELEMENT_NODE && !repeatedContent ? nameOf(node, path, includeHiddenDescendants) : "";
-            }).filter(Boolean).join(" ");
-            return normalizeAccessibleText(text || element.getAttribute("title") || "");
-        }
-        finally {
-            if (addedReference)
-                path.delete(element);
-            if (addedContent)
-                contentPath.delete(element);
-        }
-    };
-    return { text: resolveIds(labelledBy, new Set()), targets, unresolved };
-}
-export function observeAccessibleTextFromIdRefs(context, labelledBy, onText) {
-    const view = context.ownerDocument.defaultView;
-    const Observer = view?.MutationObserver ?? MutationObserver;
-    const observer = new Observer(() => update());
-    const roots = accessibleNameRoots(context);
-    const valueListeners = new Map();
-    const removeValueListeners = () => {
-        for (const [target, listener] of valueListeners) {
-            target.removeEventListener("input", listener);
-            target.removeEventListener("change", listener);
-        }
-        valueListeners.clear();
-    };
-    const disconnectNative = observer.disconnect.bind(observer);
-    const update = () => {
-        const result = resolveAccessibleText(context, labelledBy);
-        onText(result.text);
-        disconnectNative();
-        removeValueListeners();
-        const subscriptions = new Map();
-        const add = (node, options) => {
-            const current = subscriptions.get(node) ?? {};
-            const filters = new Set([...(current.attributeFilter ?? []), ...(options.attributeFilter ?? [])]);
-            subscriptions.set(node, {
-                childList: current.childList || options.childList,
-                subtree: current.subtree || options.subtree,
-                characterData: current.characterData || options.characterData,
-                attributes: current.attributes || options.attributes,
-                ...(filters.size ? { attributeFilter: [...filters] } : {}),
-            });
-        };
-        for (const target of result.targets) {
-            add(target, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ["aria-label", "aria-labelledby", "alt", "title", "hidden", "aria-hidden", "id", "value", "class", "style"] });
-            if (target.parentNode)
-                add(target.parentNode, { childList: true });
-            for (let parent = target.parentElement; parent; parent = parent.parentElement) {
-                add(parent, { attributes: true, attributeFilter: ["class", "style", "hidden", "aria-hidden"] });
-            }
-        }
-        if (result.unresolved)
-            for (const root of roots)
-                add(root, { subtree: true, childList: true, attributes: true, attributeFilter: ["id"] });
-        for (const [node, options] of subscriptions)
-            observer.observe(node, options);
-        for (const target of result.targets)
-            if (["input", "textarea", "select"].includes(target.localName)) {
-                const listener = () => update();
-                target.addEventListener("input", listener);
-                target.addEventListener("change", listener);
-                valueListeners.set(target, listener);
-            }
-    };
-    update();
-    return { disconnect: () => { disconnectNative(); removeValueListeners(); } };
-}
-export function resolveAccessibleTextFromIdRefs(context, labelledBy) {
-    return resolveAccessibleText(context, labelledBy).text;
-}
-function syncHostAccessibleDescription(host, control, state) {
-    const description = host.getAttribute("aria-description");
-    const describedBy = host.getAttribute("aria-describedby");
-    const setResolvedDescription = (text) => {
-        const value = host.hasAttribute("data-spui-field-description") ? [text, description].filter(Boolean).join(" ") : text;
-        if (value) {
-            if (control.getAttribute("aria-description") !== value)
-                control.setAttribute("aria-description", value);
-        }
-        else if (control.hasAttribute("aria-description"))
-            control.removeAttribute("aria-description");
-    };
-    if (describedBy !== null) {
-        const ids = describedBy.trim().split(/\s+/).filter(Boolean);
-        const localRoot = control.getRootNode();
-        if (ids.length && ids.every(id => localRoot.getElementById(id))) {
-            stopHostAccessibleDescriptionObserver(host, control);
-            state.describedBy = describedBy;
-            state.resolvedDescription = undefined;
-            if (control.getAttribute("aria-describedby") !== describedBy)
-                control.setAttribute("aria-describedby", describedBy);
-            if (description === null)
-                control.removeAttribute("aria-description");
-            else if (control.getAttribute("aria-description") !== description)
-                control.setAttribute("aria-description", description);
-            return;
-        }
-        if (control.hasAttribute("aria-describedby"))
-            control.removeAttribute("aria-describedby");
-        if (state.describedBy !== describedBy || !state.descriptionObserver) {
-            stopHostAccessibleDescriptionObserver(host, control);
-            state.describedBy = describedBy;
-            state.descriptionObserver = observeAccessibleTextFromIdRefs(host, describedBy, text => {
-                state.resolvedDescription = text;
-                setResolvedDescription(text);
-            });
-        }
-        else {
-            setResolvedDescription(state.resolvedDescription ?? "");
-        }
-        return;
-    }
-    stopHostAccessibleDescriptionObserver(host, control);
-    state.describedBy = null;
-    state.resolvedDescription = undefined;
-    if (state.originalDescribedBy === null)
-        control.removeAttribute("aria-describedby");
-    else if (control.getAttribute("aria-describedby") !== state.originalDescribedBy)
-        control.setAttribute("aria-describedby", state.originalDescribedBy);
-    if (description === null) {
-        if (state.originalDescription === null)
-            control.removeAttribute("aria-description");
-        else if (control.getAttribute("aria-description") !== state.originalDescription)
-            control.setAttribute("aria-description", state.originalDescription);
-    }
-    else if (control.getAttribute("aria-description") !== description)
-        control.setAttribute("aria-description", description);
-}
-export function syncHostAccessibleName(host, control) {
-    const label = host.getAttribute("aria-label");
-    const labelledBy = host.getAttribute("aria-labelledby");
-    const description = host.getAttribute("aria-description");
-    const describedBy = host.getAttribute("aria-describedby");
-    const root = control.getRootNode();
-    const inShadowRoot = host.shadowRoot?.contains(control) ?? false;
-    // Most controls live inside the host's shadow root, but compound React adapters
-    // can provide the active control as a slotted light-DOM child. In that case the
-    // host and control share the same tree, so native ID references can be forwarded
-    // directly instead of being ignored.
-    if (!inShadowRoot && host.getRootNode() !== root)
-        return;
-    let hostStates = accessibleNameSyncStates.get(host);
-    if (!hostStates) {
-        hostStates = new Map();
-        accessibleNameSyncStates.set(host, hostStates);
-    }
-    let state = hostStates.get(control);
-    if (!state) {
-        state = {
-            control,
-            originalLabel: control.getAttribute("aria-label") === label ? null : control.getAttribute("aria-label"),
-            originalLabelledBy: control.getAttribute("aria-labelledby") === labelledBy ? null : control.getAttribute("aria-labelledby"),
-            originalDescription: control.getAttribute("aria-description") === description ? null : control.getAttribute("aria-description"),
-            originalDescribedBy: control.getAttribute("aria-describedby") === describedBy ? null : control.getAttribute("aria-describedby"),
-        };
-        hostStates.set(control, state);
-    }
-    if (label === null && labelledBy === null) {
-        stopHostAccessibleNameObserver(host, control);
-        if (state.originalLabel === null)
-            control.removeAttribute("aria-label");
-        else
-            control.setAttribute("aria-label", state.originalLabel);
-        if (state.originalLabelledBy === null)
-            control.removeAttribute("aria-labelledby");
-        else
-            control.setAttribute("aria-labelledby", state.originalLabelledBy);
-        syncHostAccessibleDescription(host, control, state);
-        if (description === null && describedBy === null) {
-            hostStates.delete(control);
-            if (hostStates.size === 0)
-                accessibleNameSyncStates.delete(host);
-        }
-        return;
-    }
-    if (labelledBy !== null && inShadowRoot) {
-        const ids = labelledBy.trim().split(/\s+/).filter(Boolean);
-        const localRoot = root;
-        if (ids.length && ids.every(id => localRoot.getElementById(id))) {
-            stopHostAccessibleNameObserver(host, control);
-            state.labelledBy = labelledBy;
-            control.removeAttribute("aria-label");
-            control.setAttribute("aria-labelledby", labelledBy);
-            syncHostAccessibleDescription(host, control, state);
-            return;
-        }
-        control.removeAttribute("aria-labelledby");
-        if (state.labelledBy !== labelledBy || !state.observer) {
-            stopHostAccessibleNameObserver(host, control);
-            state.labelledBy = labelledBy;
-            state.observer = observeAccessibleTextFromIdRefs(host, labelledBy, resolved => {
-                if (resolved) {
-                    if (control.getAttribute("aria-label") !== resolved)
-                        control.setAttribute("aria-label", resolved);
-                }
-                else if (control.hasAttribute("aria-label"))
-                    control.removeAttribute("aria-label");
-            });
-        }
-        syncHostAccessibleDescription(host, control, state);
-        return;
-    }
-    stopHostAccessibleNameObserver(host, control);
-    state.labelledBy = labelledBy;
-    if (labelledBy !== null)
-        control.setAttribute("aria-labelledby", labelledBy);
-    else
-        control.removeAttribute("aria-labelledby");
-    if (labelledBy === null && label !== null)
-        control.setAttribute("aria-label", label);
-    else
-        control.removeAttribute("aria-label");
-    syncHostAccessibleDescription(host, control, state);
-}
-export function rememberNativeFormControlDefaults(current, control) {
-    if (current?.control === control)
-        return current;
-    return {
-        control,
-        disabled: control.disabled,
-        required: control.required,
-        readOnly: "readOnly" in control && control.readOnly,
-        multiple: "multiple" in control && control.multiple,
-        value: control.value,
-        defaultValue: "defaultValue" in control ? control.defaultValue : control.value,
-        checked: "checked" in control && control.checked,
-        defaultChecked: "defaultChecked" in control && control.defaultChecked,
-    };
-}
-export function findFocusable(root) {
-    const selector = "button,a[href],input:not([type=hidden]),select,textarea,[tabindex],slot";
-    const candidates = [...(root instanceof HTMLElement && root.matches(selector) ? [root] : []), ...root.querySelectorAll(selector)];
-    for (const node of candidates) {
-        if (!node.hasAttribute("disabled") && node.tabIndex >= 0 && node.getClientRects().length)
-            return node;
-        if (node.shadowRoot) {
-            const nested = findFocusable(node.shadowRoot);
-            if (nested)
-                return nested;
-        }
-        if (node instanceof HTMLSlotElement)
-            for (const assigned of node.assignedElements({ flatten: true })) {
-                const nested = findFocusable(assigned);
-                if (nested)
-                    return nested;
-            }
-    }
-    return undefined;
-}

package/dist/elements/skeleton.d.ts

@@ -1,6 +0,0 @@
-export type SkeletonAnimation = "wave" | "pulse" | "none";
-export type SkeletonAppearance = "opaque" | "translucent";
-export type SkeletonShape = "text" | "rectangle" | "rounded" | "circle" | "square";
-export declare function defineSkeleton(): void;
-export type SkeletonItemSize = 8 | 12 | 14 | 16 | 20 | 22 | 24 | 28 | 32 | 36 | 40 | 48 | 52 | 56 | 64 | 72 | 92 | 96 | 120 | 128;
-export declare function defineSkeletonItem(): void;

package/dist/elements/skeleton.js

@@ -1,91 +0,0 @@
-import { base } from "./shared.js";
-export function defineSkeleton() {
-    if (customElements.get("spui-skeleton"))
-        return;
-    defineSkeletonItem();
-    class SpuiSkeleton extends HTMLElement {
-        static observedAttributes = ["shape", "width", "height", "animated", "animation", "appearance", "size"];
-        connectedCallback() { if (!this.shadowRoot)
-            this.render(); this.sync(); }
-        attributeChangedCallback() { if (this.isConnected)
-            this.sync(); }
-        sync() {
-            const shape = this.getAttribute("shape") ?? "text";
-            this.dataset.shape = ["text", "rectangle", "circle", "rounded", "square"].includes(shape) ? shape : "text";
-            const width = this.getAttribute("width");
-            const height = this.getAttribute("height");
-            if (width)
-                this.style.setProperty("--spui-skeleton-width", this.cssLength(width));
-            else
-                this.style.removeProperty("--spui-skeleton-width");
-            if (height)
-                this.style.setProperty("--spui-skeleton-height", this.cssLength(height));
-            else
-                this.style.removeProperty("--spui-skeleton-height");
-            const slot = this.shadowRoot?.querySelector("slot");
-            const hasItems = Boolean(slot?.assignedElements().length);
-            this.toggleAttribute("data-has-items", hasItems);
-            if (!this.hasAttribute("role"))
-                this.setAttribute("role", "progressbar");
-            if (!this.hasAttribute("aria-busy"))
-                this.setAttribute("aria-busy", "true");
-            const animation = this.getAttribute("animated") === "false" ? "none" : this.getAttribute("animation") ?? "wave";
-            this.dataset.animation = ["wave", "pulse", "none"].includes(animation) ? animation : "wave";
-            this.dataset.appearance = this.getAttribute("appearance") === "translucent" ? "translucent" : "opaque";
-            if (hasItems) {
-                for (const item of this.querySelectorAll("spui-skeleton-item"))
-                    item.refresh?.();
-            }
-            else {
-                this.removeAttribute("data-has-items");
-            }
-        }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const block = document.createElement("span");
-            block.part.add("shape");
-            const children = document.createElement("slot");
-            children.addEventListener("slotchange", () => this.sync());
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:inline-block;vertical-align:middle;width:var(--spui-skeleton-width,100%);height:var(--spui-skeleton-height,1em);max-width:100%;overflow:hidden;border-radius:3px;background:var(--spui-skeleton-background,var(--spui-ui-stroke,#e5e5e5));color:transparent}:host([data-appearance=translucent]){background:var(--spui-skeleton-translucent,color-mix(in srgb,var(--spui-skeleton-background,var(--spui-ui-stroke,#e5e5e5)) 28%,transparent))}:host([data-shape=text]){height:var(--spui-skeleton-height,1em);width:var(--spui-skeleton-width,100%);border-radius:3px}:host([data-shape=rectangle]){height:var(--spui-skeleton-height,120px);border-radius:var(--spui-card-radius,8px)}:host([data-shape=rounded]){height:var(--spui-skeleton-height,40px);border-radius:999px}:host([data-shape=circle]){width:var(--spui-skeleton-width,40px);height:var(--spui-skeleton-height,40px);border-radius:50%}:host([data-shape=square]){width:var(--spui-skeleton-width,40px);height:var(--spui-skeleton-height,40px);border-radius:3px}:host([data-has-items]){display:block;width:auto;height:auto;overflow:visible;background:none}span{display:block;width:100%;height:100%;background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--spui-ui-surface,#fff) 55%,transparent) 50%,transparent 80%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite}:host([data-animation=pulse]) span{animation:spui-skeleton-pulse 1s ease-in-out infinite;background:none}slot{display:none}:host([data-has-items]) span{display:none}:host([data-has-items]) slot{display:block}:host([data-has-items]) slot::slotted(spui-skeleton-item){margin-inline-end:8px}@keyframes shimmer{to{background-position-x:-200%}}@keyframes spui-skeleton-pulse{50%{opacity:.4}}:host([animated=false]) span,:host([data-animation=none]) span{animation:none;background:none}@media(prefers-reduced-motion:reduce){span{animation:none;background:none}}@media(forced-colors:active){:host{forced-color-adjust:none;background:CanvasText;opacity:.25}span{display:none}}`;
-            shadow.append(style, block, children);
-        }
-        cssLength(value) {
-            return /^-?(?:\d+\.?\d*|\.\d+)$/.test(value.trim()) ? `${value.trim()}px` : value;
-        }
-    }
-    customElements.define("spui-skeleton", SpuiSkeleton);
-}
-const skeletonItemSizes = new Set([8, 12, 14, 16, 20, 22, 24, 28, 32, 36, 40, 48, 52, 56, 64, 72, 92, 96, 120, 128]);
-export function defineSkeletonItem() {
-    if (customElements.get("spui-skeleton-item"))
-        return;
-    class SpuiSkeletonItem extends HTMLElement {
-        static observedAttributes = ["animation", "appearance", "size", "shape"];
-        connectedCallback() { if (!this.shadowRoot)
-            this.render(); this.sync(); }
-        attributeChangedCallback() { if (this.isConnected)
-            this.sync(); }
-        refresh() { this.sync(); }
-        sync() {
-            const parent = this.closest("spui-skeleton");
-            const animation = this.getAttribute("animation") ?? (parent?.getAttribute("animated") === "false" ? "none" : parent?.getAttribute("animation") ?? "wave");
-            const appearance = this.getAttribute("appearance") ?? parent?.getAttribute("appearance") ?? "opaque";
-            const requestedSize = Number(this.getAttribute("size") ?? parent?.getAttribute("size") ?? 16);
-            const size = skeletonItemSizes.has(requestedSize) ? requestedSize : 16;
-            const shape = this.getAttribute("shape") ?? parent?.getAttribute("shape") ?? "rectangle";
-            this.dataset.animation = ["wave", "pulse", "none"].includes(animation) ? animation : "wave";
-            this.dataset.appearance = appearance === "translucent" ? "translucent" : "opaque";
-            this.dataset.size = String(size);
-            this.dataset.shape = ["circle", "square", "rectangle"].includes(shape) ? shape : "rectangle";
-        }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const sizeRules = [...skeletonItemSizes].map(size => `:host([data-size="${size}"]){--spui-skeleton-size:${size}px}`).join("");
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{position:relative;display:inline-block;vertical-align:middle;box-sizing:border-box;overflow:hidden;min-width:0;background:var(--spui-skeleton-background,var(--spui-ui-stroke,#e1e1e1));border-radius:4px}${sizeRules}:host([data-shape=rectangle]){display:block;width:100%;height:var(--spui-skeleton-size,16px)}:host([data-shape=square]){width:var(--spui-skeleton-size,16px);height:var(--spui-skeleton-size,16px)}:host([data-shape=circle]){width:var(--spui-skeleton-size,16px);height:var(--spui-skeleton-size,16px);border-radius:50%}:host([data-appearance=translucent]){background:var(--spui-skeleton-translucent,color-mix(in srgb,var(--spui-skeleton-background,var(--spui-ui-stroke,#e1e1e1)) 28%,transparent))}:host::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0%,var(--spui-skeleton-highlight,color-mix(in srgb,var(--spui-ui-surface,#fff) 60%,transparent)) 50%,transparent 100%);transform:translateX(-100%);animation:spui-skeleton-wave 1.5s ease-in-out infinite}:host([data-animation=pulse]){animation:spui-skeleton-pulse 1s ease-in-out infinite}:host([data-animation=pulse])::after{display:none}:host([data-animation=none]){animation:none}:host([data-animation=none])::after{display:none}@keyframes spui-skeleton-wave{to{transform:translateX(100%)}}@keyframes spui-skeleton-pulse{50%{opacity:.4}}@media(prefers-reduced-motion:reduce){:host,:host::after{animation:none}}@media(forced-colors:active){:host{forced-color-adjust:none;background:CanvasText;opacity:.25}:host::after{display:none}}`;
-            shadow.append(style);
-        }
-    }
-    customElements.define("spui-skeleton-item", SpuiSkeletonItem);
-}

package/dist/elements/slider.d.ts

@@ -1 +0,0 @@
-export declare function defineSlider(): void;