@spfx-fast/sharepoint-ui 0.4.2 → 0.5.0

package/dist/elements/dialog.js

@@ -1,409 +0,0 @@
-import { base } from "./shared.js";
-let dialogId = 0;
-const dialogParts = [
-    ["spui-dialog-surface", "surface"],
-    ["spui-dialog-title", "title"],
-    ["spui-dialog-content", "content"],
-    ["spui-dialog-body", "body"],
-    ["spui-dialog-actions", "actions"],
-    ["spui-dialog-trigger", "trigger"],
-];
-const documentScrollLocks = new WeakMap();
-function acquireDocumentScrollLock(doc) {
-    const active = documentScrollLocks.get(doc);
-    if (active) {
-        active.count++;
-        return true;
-    }
-    const body = doc.body;
-    const view = doc.defaultView;
-    if (!body || !view || Math.floor(body.getBoundingClientRect().height) <= view.innerHeight)
-        return false;
-    const lock = { count: 1, htmlOverflowY: doc.documentElement.style.overflowY, bodyOverflowY: body.style.overflowY, scrollbarGutter: doc.documentElement.style.scrollbarGutter };
-    documentScrollLocks.set(doc, lock);
-    doc.documentElement.style.overflowY = "clip";
-    doc.documentElement.style.scrollbarGutter = "stable";
-    body.style.overflowY = "hidden";
-    return true;
-}
-function releaseDocumentScrollLock(doc) {
-    const lock = documentScrollLocks.get(doc);
-    if (!lock || --lock.count > 0)
-        return;
-    if (doc.documentElement.style.overflowY === "clip")
-        doc.documentElement.style.overflowY = lock.htmlOverflowY;
-    if (doc.documentElement.style.scrollbarGutter === "stable")
-        doc.documentElement.style.scrollbarGutter = lock.scrollbarGutter;
-    if (doc.body?.style.overflowY === "hidden")
-        doc.body.style.overflowY = lock.bodyOverflowY;
-    documentScrollLocks.delete(doc);
-}
-function defineDialogPart(tag, styles, namedSlots = []) {
-    if (customElements.get(tag))
-        return;
-    class SpuiDialogPart extends HTMLElement {
-        connectedCallback() {
-            if (this.shadowRoot)
-                return;
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{${styles}}${tag === "spui-dialog-actions" ? ":host([position=start]){justify-content:flex-start}:host([fluid])::slotted(*){flex:1}" : tag === "spui-dialog-title" ? "slot:not([name]){flex:1;min-width:0}slot[name=action]{margin-inline-start:auto}" : ""}`;
-            if (tag === "spui-dialog-title") {
-                this.setAttribute("role", "heading");
-                this.setAttribute("aria-level", "2");
-            }
-            const slot = document.createElement("slot");
-            shadow.append(style, slot, ...namedSlots.map(name => { const named = document.createElement("slot"); named.name = name; return named; }));
-        }
-    }
-    customElements.define(tag, SpuiDialogPart);
-}
-export function defineDialogSurface() { defineDialogPart("spui-dialog-surface", "display:block;min-width:0;color:inherit;background:inherit"); }
-export function defineDialogTitle() { defineDialogPart("spui-dialog-title", "display:flex;align-items:center;gap:12px;margin:0;padding:20px 20px 0;font-size:20px;line-height:1.3;font-weight:650", ["action"]); }
-export function defineDialogContent() { defineDialogPart("spui-dialog-content", "display:block"); }
-export function defineDialogBody() { defineDialogPart("spui-dialog-body", "display:block;padding:16px 20px 20px;line-height:1.5"); }
-export function defineDialogActions() {
-    defineDialogPart("spui-dialog-actions", "display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding:12px 20px 20px;border-top:1px solid var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1))");
-}
-export function defineDialogTrigger() {
-    const tag = "spui-dialog-trigger";
-    if (customElements.get(tag))
-        return;
-    class SpuiDialogTrigger extends HTMLElement {
-        constructor() {
-            super();
-            this.addEventListener("click", event => this.dispatchEvent(new CustomEvent("spui-dialog-trigger", { bubbles: true, composed: true, detail: { action: this.getAttribute("action") ?? (this.closest('[slot="surface"],spui-dialog-surface') ? "close" : "open"), trigger: event.composedPath().find(node => node instanceof HTMLElement && node.matches("button,a[href],[role=button]")), originalEvent: event } })));
-        }
-        connectedCallback() {
-            if (!this.hasAttribute("slot") && !this.closest('[slot="surface"],spui-dialog-surface'))
-                this.slot = "trigger";
-            if (!this.shadowRoot) {
-                const shadow = this.attachShadow({ mode: "open" });
-                const style = document.createElement("style");
-                style.textContent = `${base}:host{display:contents}`;
-                const slot = document.createElement("slot");
-                shadow.append(style, slot);
-            }
-        }
-    }
-    customElements.define(tag, SpuiDialogTrigger);
-}
-export function defineDialog() {
-    defineDialogSurface();
-    defineDialogTitle();
-    defineDialogContent();
-    defineDialogBody();
-    defineDialogActions();
-    defineDialogTrigger();
-    if (customElements.get("spui-dialog"))
-        return;
-    class SpuiDialog extends HTMLElement {
-        static observedAttributes = ["open", "default-open", "motion", "motion-visible", "motion-exit-complete", "title", "dialog-label", "modal", "modal-type", "inert-trap-focus", "dismissible", "close-label", "aria-label"];
-        titleObserver;
-        previousFocus;
-        fallbackTrapActive = false;
-        refocusing = false;
-        bodyScrollLockHeld = false;
-        focusGuard;
-        get open() { return this.hasAttribute("open"); }
-        set open(value) { this.toggleAttribute("open", Boolean(value)); }
-        connectedCallback() {
-            if (!this.shadowRoot)
-                this.render();
-            if (!this.hasAttribute("open") && this.hasAttribute("default-open"))
-                this.open = true;
-            this.observeTitle();
-            this.syncOpen();
-        }
-        disconnectedCallback() { this.titleObserver?.disconnect(); this.releaseBodyScrollLock(); }
-        attributeChangedCallback() { if (this.isConnected)
-            this.syncOpen(); }
-        syncOpen() {
-            const dialog = this.shadowRoot?.querySelector("dialog");
-            if (!dialog)
-                return;
-            const motionExiting = this.hasAttribute("motion") && this.getAttribute("motion-visible") === "false" && !this.hasAttribute("motion-exit-complete");
-            const shouldOpen = this.open || motionExiting;
-            this.syncBodyScrollLock(shouldOpen);
-            if (shouldOpen && !dialog.open) {
-                this.previousFocus ??= document.activeElement instanceof HTMLElement ? document.activeElement : undefined;
-                const modalType = this.getAttribute("modal-type");
-                const nonModal = modalType === "non-modal" || (modalType == null && this.hasAttribute("modal") && this.getAttribute("modal") === "false");
-                if (nonModal || this.getAttribute("inert-trap-focus") === "false" || this.hasAttribute("data-has-custom-backdrop")) {
-                    dialog.show();
-                    this.fallbackTrapActive = !nonModal;
-                    const backdrop = this.shadowRoot?.querySelector(".modal-backdrop");
-                    if (backdrop)
-                        backdrop.hidden = !this.fallbackTrapActive;
-                    if (this.fallbackTrapActive) {
-                        dialog.setAttribute("aria-modal", "true");
-                        queueMicrotask(() => (this.focusableElements()[0] ?? dialog).focus());
-                        this.focusGuard = event => {
-                            if (this.refocusing || event.composedPath().includes(dialog))
-                                return;
-                            this.refocusing = true;
-                            (this.focusableElements()[0] ?? dialog).focus();
-                            queueMicrotask(() => { this.refocusing = false; });
-                        };
-                        document.addEventListener("focus", this.focusGuard, true);
-                    }
-                }
-                else
-                    dialog.showModal();
-            }
-            else if (!shouldOpen) {
-                if (dialog.open)
-                    dialog.close();
-                const restoreFocus = this.fallbackTrapActive ? this.previousFocus : undefined;
-                this.fallbackTrapActive = false;
-                const backdrop = this.shadowRoot?.querySelector(".modal-backdrop");
-                if (backdrop)
-                    backdrop.hidden = true;
-                if (this.focusGuard)
-                    document.removeEventListener("focus", this.focusGuard, true);
-                this.focusGuard = undefined;
-                this.previousFocus = undefined;
-                if (restoreFocus)
-                    window.setTimeout(() => { if (restoreFocus.isConnected)
-                        restoreFocus.focus(); }, 0);
-            }
-            dialog.inert = motionExiting;
-            if (motionExiting)
-                dialog.setAttribute("aria-hidden", "true");
-            else
-                dialog.removeAttribute("aria-hidden");
-            if (this.getAttribute("modal-type") === "alert")
-                dialog.setAttribute("role", "alertdialog");
-            else
-                dialog.removeAttribute("role");
-            const title = this.getAttribute("title");
-            const fallbackTitle = this.shadowRoot?.querySelector(".fallback-title");
-            if (fallbackTitle)
-                fallbackTitle.textContent = title ?? this.getAttribute("dialog-label") ?? "Dialog";
-            const titleSlot = this.shadowRoot?.querySelector("slot[name=title]");
-            if (fallbackTitle && titleSlot)
-                fallbackTitle.hidden = titleSlot.assignedNodes().length > 0;
-            const close = this.shadowRoot?.querySelector(".close");
-            if (close) {
-                close.setAttribute("aria-label", this.getAttribute("close-label") ?? "Close");
-                close.hidden = this.getAttribute("modal-type") === "alert" || (this.hasAttribute("dismissible") && this.getAttribute("dismissible") === "false");
-            }
-            if (dialog)
-                this.syncAccessibleName(dialog);
-        }
-        syncAccessibleName(dialog) {
-            const explicitLabel = this.getAttribute("aria-label");
-            const composedTitle = this.querySelector("[data-spui-dialog-title],spui-dialog-title");
-            if (explicitLabel) {
-                dialog.setAttribute("aria-label", explicitLabel);
-                dialog.removeAttribute("aria-labelledby");
-            }
-            else if (composedTitle) {
-                const titleText = composedTitle.matches("[data-spui-dialog-title]")
-                    ? [...composedTitle.childNodes].filter(node => !(node instanceof Element && node.hasAttribute("data-spui-dialog-title-action"))).map(node => node.textContent ?? "").join("").trim()
-                    : composedTitle.shadowRoot?.querySelector("slot:not([name])")?.assignedNodes({ flatten: true }).map(node => node.textContent ?? "").join("").trim();
-                dialog.setAttribute("aria-label", titleText || this.getAttribute("title") || "Dialog");
-                dialog.removeAttribute("aria-labelledby");
-            }
-            else {
-                dialog.removeAttribute("aria-label");
-                dialog.setAttribute("aria-labelledby", "title");
-            }
-        }
-        emitOpenChange(data) {
-            this.dispatchEvent(new CustomEvent("spui-open-change", { bubbles: true, composed: true, detail: data }));
-        }
-        focusableElements() {
-            const selector = 'button,a[href],input,select,textarea,[tabindex]';
-            const controls = [];
-            const seen = new Set();
-            const visit = (root) => {
-                for (const element of root.querySelectorAll("*")) {
-                    if (element.closest('[slot="trigger"]'))
-                        continue;
-                    if (element.matches(selector) && !element.matches(":disabled") && element.tabIndex >= 0 && element.getClientRects().length > 0 && !seen.has(element)) {
-                        controls.push(element);
-                        seen.add(element);
-                    }
-                    if (element.shadowRoot)
-                        visit(element.shadowRoot);
-                    if (element instanceof HTMLSlotElement)
-                        for (const assigned of element.assignedElements({ flatten: true }))
-                            visit(assigned);
-                }
-            };
-            visit(this);
-            return controls;
-        }
-        closeDialog(type, event, trigger) {
-            if (!this.open)
-                return;
-            if (this.hasAttribute("motion")) {
-                if (this.getAttribute("motion-visible") === "false")
-                    return;
-                this.emitOpenChange({ open: false, type, event, trigger });
-                return;
-            }
-            this.removeAttribute("open");
-            const dialog = this.shadowRoot?.querySelector("dialog");
-            if (dialog?.open)
-                dialog.close();
-            this.emitOpenChange({ open: false, type, event, trigger });
-        }
-        isDismissible() { return !(this.hasAttribute("dismissible") && this.getAttribute("dismissible") === "false"); }
-        isModal() {
-            const modalType = this.getAttribute("modal-type");
-            return modalType === "modal" || (modalType == null && this.getAttribute("modal") !== "false");
-        }
-        syncBodyScrollLock(shouldOpen) {
-            const modalType = this.getAttribute("modal-type");
-            const shouldLock = shouldOpen && modalType !== "non-modal" && (modalType != null || this.getAttribute("modal") !== "false");
-            if (shouldLock && !this.bodyScrollLockHeld)
-                this.bodyScrollLockHeld = acquireDocumentScrollLock(this.ownerDocument);
-            else if (!shouldLock)
-                this.releaseBodyScrollLock();
-        }
-        releaseBodyScrollLock() {
-            if (!this.bodyScrollLockHeld)
-                return;
-            this.bodyScrollLockHeld = false;
-            releaseDocumentScrollLock(this.ownerDocument);
-        }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const dialog = document.createElement("dialog");
-            dialog.id = `spui-dialog-${++dialogId}`;
-            dialog.part.add("surface");
-            dialog.setAttribute("aria-labelledby", "title");
-            const header = document.createElement("header");
-            const heading = document.createElement("h2");
-            heading.id = "title";
-            const fallbackTitle = document.createElement("span");
-            fallbackTitle.className = "fallback-title";
-            fallbackTitle.textContent = this.getAttribute("title") ?? this.getAttribute("dialog-label") ?? "Dialog";
-            const titleSlot = document.createElement("slot");
-            titleSlot.name = "title";
-            titleSlot.addEventListener("slotchange", () => { fallbackTitle.hidden = titleSlot.assignedNodes().length > 0; });
-            heading.append(fallbackTitle, titleSlot);
-            const close = document.createElement("button");
-            close.type = "button";
-            close.className = "close";
-            close.part.add("close-button");
-            const closeMark = document.createElement("span");
-            closeMark.setAttribute("aria-hidden", "true");
-            closeMark.textContent = "×";
-            close.append(closeMark);
-            close.addEventListener("click", event => this.closeDialog("triggerClick", event));
-            header.append(heading, close);
-            const body = document.createElement("div");
-            body.className = "body";
-            body.part.add("body");
-            body.append(document.createElement("slot"));
-            const footer = document.createElement("footer");
-            footer.part.add("actions");
-            footer.hidden = true;
-            const actions = document.createElement("slot");
-            actions.name = "actions";
-            actions.addEventListener("slotchange", () => { footer.hidden = actions.assignedElements().length === 0; });
-            footer.append(actions);
-            dialog.append(header, body, footer);
-            const surface = document.createElement("slot");
-            surface.name = "surface";
-            surface.addEventListener("slotchange", () => {
-                const composed = surface.assignedElements().length > 0;
-                header.hidden = false;
-                heading.hidden = composed;
-                body.hidden = composed;
-                footer.hidden = composed;
-                this.syncAccessibleName(dialog);
-                if (this.fallbackTrapActive)
-                    requestAnimationFrame(() => (this.focusableElements()[0] ?? dialog).focus());
-            });
-            this.titleObserver = new MutationObserver(() => this.syncAccessibleName(dialog));
-            dialog.insertBefore(surface, body);
-            dialog.addEventListener("cancel", event => event.preventDefault());
-            dialog.addEventListener("keydown", event => {
-                if (event.key === "Escape") {
-                    if (event.defaultPrevented)
-                        return;
-                    window.setTimeout(() => {
-                        if (event.defaultPrevented || !this.open)
-                            return;
-                        event.preventDefault();
-                        if (this.isDismissible())
-                            this.closeDialog("escapeKeyDown", event);
-                    }, 0);
-                    return;
-                }
-                if (!this.fallbackTrapActive)
-                    return;
-                if (event.key !== "Tab")
-                    return;
-                const controls = this.focusableElements();
-                if (!controls.length) {
-                    event.preventDefault();
-                    dialog.focus();
-                    return;
-                }
-                const target = event.composedPath()[0];
-                const index = controls.indexOf(target instanceof HTMLElement ? target : document.activeElement);
-                if (event.shiftKey && index <= 0) {
-                    event.preventDefault();
-                    controls.at(-1)?.focus();
-                }
-                else if (!event.shiftKey && index === controls.length - 1) {
-                    event.preventDefault();
-                    controls[0]?.focus();
-                }
-            });
-            dialog.addEventListener("click", event => {
-                if (event.target !== dialog || !this.isModal() || !this.isDismissible())
-                    return;
-                const rect = dialog.getBoundingClientRect();
-                if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom)
-                    this.closeDialog("backdropClick", event);
-            });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:contents}dialog{position:relative;z-index:2147483647;box-sizing:border-box;width:min(520px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding:0;border:1px solid var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1));border-radius:var(--spui-card-radius,12px);background:var(--spui-card-background,var(--spui-ui-surface,#fff));box-shadow:var(--spui-card-shadow,0 16px 48px #0004);color:var(--spui-ui-text,var(--spui-semantic-body-text,#242424))}dialog::backdrop{background:color-mix(in srgb,var(--spui-ui-text,#242424) 42%,transparent);backdrop-filter:blur(2px)}:host([backdrop-appearance=transparent]) dialog::backdrop{background:transparent;backdrop-filter:none}header{display:flex;align-items:start;justify-content:space-between;gap:16px;padding:20px 20px 0}h2{margin:0;font-size:20px;line-height:1.3;font-weight:650}.close{display:inline-grid;place-items:center;flex:none;width:var(--spui-control-height,32px);height:var(--spui-control-height,32px);margin:-5px -6px 0 0;margin-left:auto;border:0;border-radius:var(--spui-control-radius,6px);background:transparent;color:inherit;font-size:24px;line-height:1;cursor:pointer}.close:hover{background:var(--spui-ui-surface-hover,#f5f5f5)}.close:focus-visible{outline:2px solid var(--spui-focus-ring,#005a9e);outline-offset:2px}.body{padding:16px 20px 20px;line-height:1.5}footer{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding:12px 20px 20px;border-top:1px solid var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1))}footer[hidden]{display:none}@media(forced-colors:active){dialog{border-color:CanvasText;box-shadow:none}dialog::backdrop{background:Canvas} .close:focus-visible{outline-color:Highlight}}`;
-            const overlayStyle = document.createElement("style");
-            overlayStyle.textContent = ".modal-backdrop{position:fixed;inset:0;z-index:2147483000;background:color-mix(in srgb,var(--spui-ui-text,#242424) 42%,transparent);backdrop-filter:blur(2px)}.modal-backdrop[hidden]{display:none}.modal-backdrop slot{position:absolute;inset:0}:host([data-has-custom-backdrop]) .modal-backdrop{background:transparent;backdrop-filter:none}:host([backdrop-appearance=transparent]) .modal-backdrop{background:transparent;backdrop-filter:none}::slotted([slot=backdrop]){position:absolute;inset:0;display:block;background:color-mix(in srgb,var(--spui-ui-text,#242424) 42%,transparent)}::slotted([slot=backdrop][data-appearance=transparent]){background:transparent}";
-            const backdrop = document.createElement("div");
-            backdrop.className = "modal-backdrop";
-            backdrop.part.add("backdrop");
-            backdrop.hidden = true;
-            backdrop.setAttribute("aria-hidden", "true");
-            const backdropSlot = document.createElement("slot");
-            backdropSlot.name = "backdrop";
-            backdrop.append(backdropSlot);
-            backdrop.addEventListener("click", event => { if (this.isModal() && this.isDismissible())
-                this.closeDialog("backdropClick", event); });
-            const triggerSlot = document.createElement("slot");
-            triggerSlot.name = "trigger";
-            triggerSlot.addEventListener("slotchange", () => {
-                for (const trigger of triggerSlot.assignedElements()) {
-                    const innerSlot = trigger.shadowRoot?.querySelector("slot");
-                    for (const target of innerSlot?.assignedElements({ flatten: true }) ?? []) {
-                        if (!trigger.hasAttribute("disable-button-enhancement") && !target.hasAttribute("aria-haspopup"))
-                            target.setAttribute("aria-haspopup", "dialog");
-                    }
-                }
-            });
-            shadow.append(style, overlayStyle, triggerSlot, backdrop, dialog);
-            this.addEventListener("spui-dialog-trigger", event => {
-                const detail = event.detail;
-                if (detail?.action === "close")
-                    this.closeDialog("triggerClick", detail.originalEvent, detail.trigger);
-                else if (!this.open) {
-                    this.previousFocus = detail?.trigger ?? this.querySelector('spui-dialog-trigger[slot="trigger"] button,spui-dialog-trigger[slot="trigger"] a[href],[slot="trigger"] [role="button"]') ?? undefined;
-                    this.open = true;
-                    if (detail?.originalEvent)
-                        this.emitOpenChange({ open: true, type: "triggerClick", event: detail.originalEvent, trigger: detail.trigger });
-                }
-            });
-        }
-        observeTitle() {
-            this.titleObserver?.observe(this, { subtree: true, childList: true, characterData: true });
-        }
-    }
-    customElements.define("spui-dialog", SpuiDialog);
-}

package/dist/elements/divider.d.ts

@@ -1,2 +0,0 @@
-export type DividerAppearance = "brand" | "default" | "strong" | "subtle";
-export declare function defineDivider(): void;

package/dist/elements/divider.js

@@ -1,66 +0,0 @@
-import { base } from "./shared.js";
-export function defineDivider() {
-    if (customElements.get("spui-divider"))
-        return;
-    class SpuiDivider extends HTMLElement {
-        static observedAttributes = ["orientation", "vertical", "align", "align-content", "appearance", "inset"];
-        generatedAriaLabel;
-        connectedCallback() {
-            if (!this.shadowRoot)
-                this.render();
-            this.sync();
-        }
-        attributeChangedCallback() { if (this.isConnected)
-            this.sync(); }
-        sync() {
-            const orientation = this.hasAttribute("vertical") || this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
-            this.dataset.orientation = orientation;
-            const wrapper = this.shadowRoot?.querySelector("slot[name=wrapper]");
-            const slot = this.shadowRoot?.querySelector("slot:not([name])");
-            const hasLabel = Boolean(wrapper?.assignedNodes().length
-                ? wrapper.assignedNodes().some(node => node.nodeType === Node.ELEMENT_NODE || Boolean(node.textContent?.trim()))
-                : slot?.assignedNodes().some(node => node.nodeType === Node.ELEMENT_NODE || Boolean(node.textContent?.trim())));
-            this.dataset.hasLabel = String(hasLabel);
-            this.dataset.alignContent = this.getAttribute("align-content") ?? this.getAttribute("align") ?? "center";
-            this.dataset.dividerAppearance = this.getAttribute("appearance") ?? "default";
-            this.setAttribute("role", "separator");
-            this.setAttribute("aria-orientation", orientation);
-            if (hasLabel && !this.hasAttribute("aria-labelledby")) {
-                const label = this.textContent?.trim();
-                if (label && (this.getAttribute("aria-label") === null || this.getAttribute("aria-label") === this.generatedAriaLabel)) {
-                    this.generatedAriaLabel = label;
-                    if (this.getAttribute("aria-label") !== label)
-                        this.setAttribute("aria-label", label);
-                }
-            }
-            else if (this.generatedAriaLabel !== undefined && this.getAttribute("aria-label") === this.generatedAriaLabel) {
-                this.removeAttribute("aria-label");
-                this.generatedAriaLabel = undefined;
-            }
-        }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const before = document.createElement("span");
-            before.className = "line";
-            before.part.add("line");
-            before.setAttribute("aria-hidden", "true");
-            const after = document.createElement("span");
-            after.className = "line";
-            after.part.add("line");
-            after.setAttribute("aria-hidden", "true");
-            const wrapper = document.createElement("div");
-            wrapper.className = "wrapper";
-            const wrapperSlot = document.createElement("slot");
-            wrapperSlot.name = "wrapper";
-            wrapperSlot.addEventListener("slotchange", () => this.sync());
-            const slot = document.createElement("slot");
-            slot.addEventListener("slotchange", () => this.sync());
-            wrapperSlot.append(slot);
-            wrapper.append(wrapperSlot);
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:flex;align-items:center;gap:var(--spui-divider-gap,12px);min-width:0;margin-block:var(--spui-divider-margin-block,12px);color:var(--spui-ui-muted,var(--spui-semantic-body-subtext,#616161));font:inherit}:host([data-orientation=vertical]){display:inline-flex;flex-direction:column;align-self:stretch;min-height:1em;width:1px;margin-inline:var(--spui-divider-margin-inline,12px);margin-block:0}:host([data-has-label=false]) .wrapper{display:none}:host([data-has-label=false]) .line:last-of-type{display:none}:host([data-has-label=true]) .wrapper{font-size:.875em;line-height:1.25;text-align:center}.wrapper{min-width:0}.line{flex:1;min-height:1px;background:var(--spui-divider-color,var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1)))}:host([data-orientation=vertical]) .line{min-height:0;width:1px;height:auto;min-width:1px;background:var(--spui-divider-color,var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1)))}:host([data-divider-appearance=brand]) .line{background:var(--spui-divider-color,var(--spui-base-accent,var(--spui-ui-accent,#0078d4)))}:host([data-divider-appearance=strong]) .line{background:var(--spui-divider-color,color-mix(in srgb,var(--spui-ui-text,#242424) 44%,var(--spui-ui-stroke,#d1d1d1)))}:host([data-divider-appearance=subtle]) .line{background:var(--spui-divider-color,color-mix(in srgb,var(--spui-ui-stroke,#d1d1d1) 56%,transparent))}:host([data-align-content=start]) .line:first-of-type{flex:0}:host([data-align-content=end]) .line:last-of-type{flex:0}:host([data-align-content=center]) .line{flex:1}:host([inset]){margin-inline-start:var(--spui-divider-inset,16px)}@media(forced-colors:active){.line{background:CanvasText}}`;
-            shadow.append(style, before, wrapper, after);
-        }
-    }
-    customElements.define("spui-divider", SpuiDivider);
-}

package/dist/elements/drawer.d.ts

@@ -1,3 +0,0 @@
-export declare function defineDrawer(): void;
-/** Non-modal, in-flow companion surface for navigation and supporting work. */
-export declare function defineInlineDrawer(): void;