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

package/dist/elements/dialog.js

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

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

package/dist/elements/divider.js

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

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