@spfx-fast/sharepoint-ui 0.4.3 → 0.5.0

package/dist/elements/sharepoint-fields.js

@@ -1,460 +0,0 @@
-import { getSharePointFieldAdapter, } from "../sharepoint-fields.js";
-import { createFormField } from "./field-composition.js";
-import { defineSharePointFieldBasicControls } from "./sharepoint-field-basic-controls.js";
-const textValue = (value) => {
-    if (value == null)
-        return "";
-    if (value instanceof Date) {
-        const pad = (part) => String(part).padStart(2, "0");
-        return `${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}${value.getHours() || value.getMinutes() ? `T${pad(value.getHours())}:${pad(value.getMinutes())}` : ""}`;
-    }
-    if (typeof value === "object" && "url" in value)
-        return value.url;
-    return String(value);
-};
-function makeOption(tag, option) {
-    const element = document.createElement(tag);
-    element.setAttribute("value", String(option.value));
-    element.setAttribute(tag === "option" ? "value" : "label", tag === "option" ? String(option.value) : option.label);
-    if (tag === "option")
-        element.textContent = option.label;
-    else
-        element.textContent = option.label;
-    if (option.disabled)
-        element.setAttribute("disabled", "");
-    return element;
-}
-async function loadFieldControl(adapter) {
-    switch (adapter.control) {
-        case "input":
-        case "read-only":
-        case "textarea":
-        case "radio-group":
-        case "checkbox":
-        case "multi-choice":
-        case "select":
-            if (adapter.control === "select" && adapter.allowFillIn && !customElements.get("spui-combobox")) {
-                await import(/* webpackChunkName: "spui-sharepoint-field-freeform-choice" */ "./combobox.js").then(module => module.defineCombobox());
-            }
-            return;
-        case "rich-text-editor":
-            if (!customElements.get("spui-rich-text-editor"))
-                (await import(/* webpackChunkName: "spui-sharepoint-field-rich-text" */ "./rich-text-editor.js")).defineRichTextEditor();
-            break;
-        case "date-picker":
-            if (!customElements.get("spui-date-picker"))
-                (await import(/* webpackChunkName: "spui-sharepoint-field-date" */ "./date-picker.js")).defineDatePicker();
-            break;
-        case "combobox":
-            if (!customElements.get("spui-combobox"))
-                (await import(/* webpackChunkName: "spui-sharepoint-field-lookup" */ "./combobox.js")).defineCombobox();
-            break;
-    }
-}
-/** Render SharePoint field metadata as a framework-free, theme-aware form control. */
-export function defineSharePointField() {
-    if (customElements.get("spui-sharepoint-field"))
-        return;
-    defineSharePointFieldBasicControls();
-    class SpuiSharePointField extends HTMLElement {
-        static observedAttributes = ["field", "value", "disabled", "hint", "validation-message", "empty-option-label", "add-choice-label"];
-        fieldValue;
-        currentValue;
-        initialValue;
-        currentOptions = [];
-        hasProvidedOptions = false;
-        controlled = false;
-        renderVersion = 0;
-        valueChangeCallback;
-        unsupportedRenderer;
-        get field() { return this.fieldValue; }
-        set field(value) { this.fieldValue = value; if (this.isConnected)
-            this.render(); }
-        get value() { return this.currentValue; }
-        set value(value) {
-            this.controlled = true;
-            this.currentValue = value;
-            this.syncControlValue();
-        }
-        get defaultValue() { return this.initialValue; }
-        set defaultValue(value) {
-            this.initialValue = value;
-            if (!this.controlled)
-                this.currentValue = value;
-            if (this.isConnected)
-                this.render();
-        }
-        get options() { return this.currentOptions; }
-        set options(value) { this.currentOptions = [...(value ?? [])]; this.hasProvidedOptions = true; if (this.isConnected)
-            this.render(); }
-        get disabled() { return this.hasAttribute("disabled"); }
-        set disabled(value) { this.toggleAttribute("disabled", Boolean(value)); }
-        get onValueChange() { return this.valueChangeCallback; }
-        set onValueChange(value) { this.valueChangeCallback = value; }
-        get renderUnsupported() { return this.unsupportedRenderer; }
-        set renderUnsupported(value) { this.unsupportedRenderer = value; }
-        attributeChangedCallback(name, _oldValue, value) {
-            if (!this.isConnected)
-                return;
-            if (name === "field") {
-                try {
-                    this.fieldValue = value ? JSON.parse(value) : undefined;
-                }
-                catch {
-                    this.fieldValue = undefined;
-                }
-                this.render();
-            }
-            else if (name === "value") {
-                if (!this.controlled) {
-                    this.currentValue = value;
-                    this.initialValue = value;
-                }
-                this.syncControlValue();
-            }
-            else
-                this.render();
-        }
-        connectedCallback() {
-            if (!this.fieldValue) {
-                const encoded = this.getAttribute("field");
-                if (encoded) {
-                    try {
-                        this.fieldValue = JSON.parse(encoded);
-                    }
-                    catch { /* Keep a useful fallback below. */ }
-                }
-            }
-            if (this.currentValue === undefined && this.hasAttribute("value"))
-                this.currentValue = this.getAttribute("value");
-            if (this.initialValue === undefined && this.hasAttribute("value"))
-                this.initialValue = this.getAttribute("value");
-            this.render();
-        }
-        async render() {
-            const renderVersion = ++this.renderVersion;
-            const field = this.fieldValue;
-            if (!field) {
-                this.hidden = false;
-                this.removeAttribute("aria-busy");
-                this.replaceChildren();
-                return;
-            }
-            const adapter = getSharePointFieldAdapter(field);
-            this.setAttribute("aria-busy", "true");
-            try {
-                await loadFieldControl(adapter);
-                if (!this.isConnected || renderVersion !== this.renderVersion)
-                    return;
-                this.removeAttribute("aria-busy");
-                const options = this.hasProvidedOptions ? this.currentOptions : (adapter.choices ?? []).map(value => ({ value, label: value }));
-                const label = adapter.label || adapter.name || adapter.fieldType;
-                const value = this.currentValue;
-                const valueText = textValue(value);
-                const defaultValueText = textValue(this.initialValue);
-                const name = adapter.name || undefined;
-                const disabled = this.hasAttribute("disabled");
-                const controlDisabled = disabled || (adapter.readOnly && !["input", "textarea", "rich-text-editor"].includes(adapter.control));
-                let control;
-                const setBasics = (element) => {
-                    if (name)
-                        element.setAttribute("name", name);
-                    if (adapter.required)
-                        element.setAttribute("required", "");
-                    if (controlDisabled)
-                        element.setAttribute("disabled", "");
-                    return element;
-                };
-                const selectOptions = (element, tag) => {
-                    if (tag === "option") {
-                        const empty = document.createElement("option");
-                        empty.value = "";
-                        empty.textContent = this.getAttribute("empty-option-label") ?? "Select an option";
-                        empty.disabled = adapter.required;
-                        element.append(empty, ...options.map(option => makeOption(tag, option)));
-                    }
-                    else
-                        element.append(...options.map(option => makeOption(tag, option)));
-                };
-                switch (adapter.control) {
-                    case "input": {
-                        const input = setBasics(document.createElement("spui-input"));
-                        input.setAttribute("type", adapter.inputType ?? "text");
-                        if (this.initialValue !== undefined)
-                            input.setAttribute("value", defaultValueText);
-                        if (adapter.min !== undefined)
-                            input.setAttribute("min", String(adapter.min));
-                        if (adapter.max !== undefined)
-                            input.setAttribute("max", String(adapter.max));
-                        if (adapter.step !== undefined)
-                            input.setAttribute("step", String(adapter.step));
-                        if (adapter.maxLength !== undefined)
-                            input.setAttribute("maxlength", String(adapter.maxLength));
-                        if (adapter.readOnly)
-                            input.setAttribute("read-only", "");
-                        input.value = valueText;
-                        control = input;
-                        break;
-                    }
-                    case "textarea": {
-                        const textarea = setBasics(document.createElement("spui-textarea"));
-                        if (this.initialValue !== undefined)
-                            textarea.setAttribute("value", defaultValueText);
-                        if (adapter.maxLength !== undefined)
-                            textarea.setAttribute("maxlength", String(adapter.maxLength));
-                        if (adapter.readOnly)
-                            textarea.setAttribute("read-only", "");
-                        textarea.value = valueText;
-                        control = textarea;
-                        break;
-                    }
-                    case "rich-text-editor": {
-                        const editor = setBasics(document.createElement("spui-rich-text-editor"));
-                        if (this.initialValue !== undefined)
-                            editor.setAttribute("value", defaultValueText);
-                        editor.setAttribute("content-mode", adapter.richText?.contentMode ?? "rich");
-                        if (adapter.richText?.allowHyperlink === false)
-                            editor.setAttribute("allow-hyperlink", "false");
-                        if (adapter.readOnly)
-                            editor.setAttribute("read-only", "");
-                        editor.value = valueText;
-                        control = editor;
-                        break;
-                    }
-                    case "select": {
-                        if (adapter.allowFillIn) {
-                            const combo = setBasics(document.createElement("spui-combobox"));
-                            combo.setAttribute("allow-freeform", "");
-                            combo.setAttribute("placeholder", this.getAttribute("empty-option-label") ?? "Select an option");
-                            selectOptions(combo, "spui-combobox-option");
-                            combo.value = valueText;
-                            control = combo;
-                        }
-                        else {
-                            const select = setBasics(document.createElement("spui-select"));
-                            selectOptions(select, "option");
-                            if (this.initialValue !== undefined)
-                                select.setAttribute("default-value", defaultValueText);
-                            select.value = valueText;
-                            control = select;
-                        }
-                        break;
-                    }
-                    case "radio-group": {
-                        const radio = setBasics(document.createElement("spui-radio-group"));
-                        selectOptions(radio, "spui-radio-option");
-                        if (this.initialValue !== undefined)
-                            radio.setAttribute("default-value", defaultValueText);
-                        radio.value = valueText;
-                        control = radio;
-                        break;
-                    }
-                    case "checkbox": {
-                        const checkbox = setBasics(document.createElement("spui-checkbox"));
-                        checkbox.setAttribute("label", label);
-                        if (this.initialValue !== undefined)
-                            checkbox.defaultChecked = this.initialValue === true || this.initialValue === "true";
-                        checkbox.checked = value === true || value === "true";
-                        control = checkbox;
-                        break;
-                    }
-                    case "multi-choice": {
-                        const group = document.createElement("fieldset");
-                        group.style.minWidth = "0";
-                        group.style.margin = "0";
-                        group.style.padding = "0";
-                        group.style.border = "0";
-                        group.style.display = "grid";
-                        group.style.gap = "var(--spui-control-gap,6px)";
-                        const legend = document.createElement("legend");
-                        legend.textContent = label;
-                        group.append(legend);
-                        const selected = Array.isArray(value) ? value.map(String) : [];
-                        const visibleOptions = [...options];
-                        const initialSelected = Array.isArray(this.initialValue) ? this.initialValue.map(String) : [];
-                        for (const selectedValue of [...selected, ...initialSelected])
-                            if (!visibleOptions.some(option => String(option.value) === selectedValue))
-                                visibleOptions.push({ value: selectedValue, label: selectedValue });
-                        for (const option of visibleOptions) {
-                            const checkbox = document.createElement("spui-checkbox");
-                            checkbox.setAttribute("label", option.label);
-                            checkbox.setAttribute("value", String(option.value));
-                            if (option.disabled || controlDisabled)
-                                checkbox.setAttribute("disabled", "");
-                            if (Array.isArray(this.initialValue) && this.initialValue.map(String).includes(String(option.value)))
-                                checkbox.setAttribute("default-checked", "");
-                            checkbox.checked = selected.includes(String(option.value));
-                            group.append(checkbox);
-                        }
-                        if (adapter.allowFillIn) {
-                            const fillIn = document.createElement("spui-input");
-                            fillIn.setAttribute("type", "text");
-                            fillIn.setAttribute("aria-label", this.getAttribute("add-choice-label") ?? "Add another choice");
-                            const add = document.createElement("spui-button");
-                            add.setAttribute("appearance", "secondary");
-                            add.textContent = this.getAttribute("add-choice-label") ?? "Add another choice";
-                            if (controlDisabled)
-                                add.setAttribute("disabled", "");
-                            const addFillIn = () => {
-                                const choice = fillIn.value?.trim() ?? "";
-                                if (!choice || selected.includes(choice))
-                                    return;
-                                this.acceptValue([...selected, choice]);
-                                fillIn.value = "";
-                            };
-                            fillIn.addEventListener("keydown", event => { if (event instanceof KeyboardEvent && event.key === "Enter") {
-                                event.preventDefault();
-                                addFillIn();
-                            } });
-                            add.addEventListener("click", addFillIn);
-                            const fillInRow = document.createElement("div");
-                            fillInRow.append(fillIn, add);
-                            group.append(fillInRow);
-                            fillInRow.style.display = "flex";
-                            fillInRow.style.alignItems = "end";
-                            fillInRow.style.gap = "var(--spui-control-gap,8px)";
-                        }
-                        control = group;
-                        break;
-                    }
-                    case "date-picker": {
-                        const datePicker = setBasics(document.createElement("spui-date-picker"));
-                        if (this.initialValue !== undefined)
-                            datePicker.setAttribute("value", textValue(this.initialValue));
-                        datePicker.value = valueText;
-                        control = datePicker;
-                        break;
-                    }
-                    case "combobox": {
-                        const combo = setBasics(document.createElement("spui-combobox"));
-                        if (adapter.multiple)
-                            combo.setAttribute("multiselect", "");
-                        combo.setAttribute("placeholder", this.getAttribute("empty-option-label") ?? "Select an option");
-                        selectOptions(combo, "spui-combobox-option");
-                        if (adapter.multiple) {
-                            if (Array.isArray(this.initialValue))
-                                combo.setAttribute("default-selected-options", JSON.stringify(this.initialValue.map(String)));
-                            combo.selectedOptions = Array.isArray(value) ? value.map(String) : [];
-                        }
-                        else {
-                            if (this.initialValue !== undefined) {
-                                combo.setAttribute("selected-value", defaultValueText);
-                                combo.setAttribute("value", options.find(option => String(option.value) === defaultValueText)?.label ?? defaultValueText);
-                            }
-                            combo.selectedValue = valueText;
-                            combo.value = options.find(option => String(option.value) === valueText)?.label ?? valueText;
-                        }
-                        control = combo;
-                        break;
-                    }
-                    case "read-only": {
-                        const readonly = setBasics(document.createElement("spui-input"));
-                        readonly.setAttribute("type", "text");
-                        readonly.setAttribute("read-only", "");
-                        readonly.value = valueText;
-                        control = readonly;
-                        break;
-                    }
-                    case "unsupported": {
-                        const custom = this.renderUnsupported?.(field, adapter.unsupportedReason ?? "No renderer is registered for this SharePoint field type.");
-                        const fallback = custom ?? Object.assign(document.createElement("div"), { textContent: `This SharePoint field type needs a custom renderer (${adapter.fieldType}).` });
-                        if (!custom && fallback instanceof HTMLElement)
-                            fallback.setAttribute("role", "note");
-                        control = fallback;
-                        break;
-                    }
-                }
-                const wrapper = createFormField(control, {
-                    id: this.id ? `${this.id}-field` : undefined,
-                    className: this.getAttribute("class") ?? undefined,
-                    label: adapter.control === "multi-choice" ? undefined : label,
-                    hint: this.getAttribute("hint") ?? adapter.description,
-                    validationMessage: this.getAttribute("validation-message") ?? undefined,
-                    required: adapter.required,
-                    disabled,
-                });
-                wrapper.dataset.sharePointField = adapter.name || adapter.fieldType;
-                this.hidden = adapter.hidden;
-                this.replaceChildren(wrapper);
-            }
-            catch {
-                if (!this.isConnected || renderVersion !== this.renderVersion)
-                    return;
-                this.removeAttribute("aria-busy");
-                const error = document.createElement("div");
-                error.setAttribute("role", "alert");
-                error.textContent = "The field control could not be loaded.";
-                this.replaceChildren(error);
-            }
-        }
-        syncControlValue() {
-            const wrapper = this.querySelector(".spui-form-field");
-            const first = wrapper?.firstElementChild;
-            const control = (first?.localName === "fieldset" ? first : first?.nextElementSibling);
-            if (!control)
-                return;
-            if (control.localName === "fieldset") {
-                const selected = new Set(Array.isArray(this.currentValue) ? this.currentValue.map(String) : []);
-                control.querySelectorAll("spui-checkbox").forEach(checkbox => { checkbox.checked = selected.has(checkbox.getAttribute("value") ?? ""); });
-            }
-            else if (control.localName === "spui-checkbox")
-                control.checked = this.currentValue === true || this.currentValue === "true";
-            else if (control.localName === "spui-combobox" && control.hasAttribute("multiselect"))
-                control.selectedOptions = Array.isArray(this.currentValue) ? this.currentValue.map(String) : [];
-            else if ("value" in control)
-                control.value = textValue(this.currentValue);
-        }
-        acceptValue(value) {
-            this.currentValue = value;
-            const field = this.fieldValue;
-            if (!field)
-                return;
-            this.onValueChange?.(value, field);
-            this.dispatchEvent(new CustomEvent("spui-field-value-change", { detail: { value, field }, bubbles: true, composed: true }));
-        }
-        constructor() {
-            super();
-            for (const key of ["field", "value", "defaultValue", "options", "disabled", "onValueChange", "renderUnsupported"]) {
-                if (!Object.prototype.hasOwnProperty.call(this, key))
-                    continue;
-                const pending = this[key];
-                delete this[key];
-                this[key] = pending;
-            }
-            this.addEventListener("spui-input", event => {
-                const target = event.target;
-                if ((target?.localName === "spui-combobox" && !target.hasAttribute("allow-freeform")) || (target?.localName === "spui-input" && target.closest("fieldset")))
-                    return;
-                const value = event.detail?.value;
-                if (value !== undefined)
-                    this.acceptValue(value);
-            });
-            this.addEventListener("spui-change", event => {
-                const detail = event.detail;
-                if (!detail)
-                    return;
-                if (detail.checked !== undefined) {
-                    if (this.fieldValue && getSharePointFieldAdapter(this.fieldValue).control === "multi-choice") {
-                        const checkbox = event.target;
-                        const choice = checkbox.getAttribute("value") ?? "";
-                        const selected = new Set(Array.isArray(this.currentValue) ? this.currentValue.map(String) : []);
-                        if (detail.checked === true)
-                            selected.add(choice);
-                        else
-                            selected.delete(choice);
-                        this.acceptValue([...selected]);
-                    }
-                    else
-                        this.acceptValue(detail.checked === true);
-                }
-                else if (detail.selectedOptions)
-                    this.acceptValue(detail.selectedOptions);
-                else if (detail.selectedValue !== undefined)
-                    this.acceptValue(detail.selectedValue || null);
-                else if (detail.value !== undefined)
-                    this.acceptValue(detail.value || null);
-            });
-        }
-    }
-    customElements.define("spui-sharepoint-field", SpuiSharePointField);
-}

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;