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

package/dist/elements/teaching-popover.js

@@ -0,0 +1,412 @@
+import { buttonControlCss, defineButton } from "./button.js";
+import { definePopoverVariant } from "./popover.js";
+import { base } from "./shared.js";
+const pageCountTag = "spui-teaching-popover-carousel-page-count";
+const cardTag = "spui-teaching-popover-carousel-card";
+const navButtonTag = "spui-teaching-popover-carousel-nav-button";
+const footerButtonTag = "spui-teaching-popover-carousel-footer-button";
+const carouselTag = "spui-teaching-popover-carousel";
+const partTag = (name) => `spui-teaching-popover-${name}`;
+function languageOf(element) {
+    return element.closest("[lang]")?.lang || document.documentElement.lang || "en";
+}
+function localize(template, current, total) {
+    return template.replaceAll("{current}", String(current)).replaceAll("{totalPages}", String(total)).replaceAll("{total}", String(total));
+}
+function definePart(tag, elementName, css, namedSlots = [], fallbacks = {}, closeSlots = namedSlots) {
+    if (customElements.get(tag))
+        return;
+    class SpuiTeachingPart extends HTMLElement {
+        connectedCallback() {
+            if (this.shadowRoot)
+                return;
+            const shadow = this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{box-sizing:border-box;display:block}${css}`;
+            const element = document.createElement(elementName);
+            element.part.add("root");
+            for (const name of namedSlots) {
+                const slot = document.createElement("slot");
+                slot.name = name;
+                if (name === "icon")
+                    slot.setAttribute("aria-hidden", "true");
+                const fallback = fallbacks[name]?.(this);
+                if (fallback)
+                    slot.append(fallback);
+                element.append(slot);
+            }
+            element.append(document.createElement("slot"));
+            if (closeSlots.length)
+                this.addEventListener("click", event => {
+                    const path = event.composedPath();
+                    if (event.defaultPrevented || path.some(node => node instanceof HTMLElement && node.hasAttribute("data-spui-react-action")) || !path.some(node => node instanceof HTMLElement && closeSlots.includes(node.slot)))
+                        return;
+                    this.dispatchEvent(new CustomEvent("spui-popover-request-close", { bubbles: true, composed: true, detail: { sourceEvent: event } }));
+                });
+            shadow.append(style, element);
+        }
+    }
+    customElements.define(tag, SpuiTeachingPart);
+}
+function defineTeachingButton(tag, kind) {
+    if (customElements.get(tag))
+        return;
+    class SpuiTeachingButton extends HTMLElement {
+        static observedAttributes = ["nav-type", "value", "alt-text", "aria-label", "aria-current", "tabindex", "disabled", "size", "appearance", "shape", "icon-only", "data-edge"];
+        button;
+        fallback;
+        alternate;
+        connectedCallback() {
+            if (!this.shadowRoot)
+                this.render();
+            this.style.display ||= "inline-flex";
+            this.sync();
+        }
+        attributeChangedCallback() { this.sync(); }
+        render() {
+            const shadow = this.attachShadow({ mode: "open", delegatesFocus: true });
+            const style = document.createElement("style");
+            style.textContent = buttonControlCss;
+            const button = document.createElement("button");
+            button.type = "button";
+            button.part.add("control");
+            const fallback = document.createElement("span");
+            fallback.className = "fallback";
+            fallback.append(document.createElement("slot"));
+            button.append(fallback);
+            this.button = button;
+            this.fallback = fallback;
+            if (kind === "footer") {
+                const alternate = document.createElement("span");
+                alternate.className = "alternate";
+                alternate.hidden = true;
+                button.append(alternate);
+                this.alternate = alternate;
+                style.textContent += `.fallback[hidden],.alternate[hidden]{display:none}.alternate{white-space:nowrap}`;
+            }
+            shadow.append(style, button);
+        }
+        sync() {
+            const button = this.button;
+            if (!button)
+                return;
+            const navType = this.getAttribute("nav-type") ?? (kind === "nav" ? "step" : "next");
+            const appearance = this.getAttribute("appearance") ?? (kind === "nav" ? "subtle" : navType === "next" ? "primary" : navType === "dismiss" ? "subtle" : "secondary");
+            const size = this.getAttribute("size") ?? (kind === "nav" ? "small" : "medium");
+            const shape = this.getAttribute("shape") ?? (kind === "nav" ? "circular" : "rounded");
+            const setIfChanged = (name, value) => { if (this.getAttribute(name) !== value)
+                this.setAttribute(name, value); };
+            button.className = appearance === "primary" ? "primary" : ["outline", "subtle", "transparent"].includes(appearance) ? appearance : "secondary";
+            this.toggleAttribute("data-spui-popover-close", kind === "footer" && navType === "dismiss");
+            if (kind === "nav" && !this.hasAttribute("icon-only"))
+                this.setAttribute("icon-only", "");
+            button.disabled = this.hasAttribute("disabled");
+            button.setAttribute("part", "control");
+            button.setAttribute("aria-label", this.getAttribute("aria-label") || this.textContent?.trim() || (kind === "nav" ? "Tour step" : navType));
+            if (this.hasAttribute("aria-current"))
+                button.setAttribute("aria-current", this.getAttribute("aria-current"));
+            else
+                button.removeAttribute("aria-current");
+            button.tabIndex = this.hasAttribute("tabindex") ? Number(this.getAttribute("tabindex")) : kind === "nav" ? -1 : 0;
+            setIfChanged("appearance", appearance);
+            setIfChanged("size", size);
+            setIfChanged("shape", shape);
+            if (kind === "footer") {
+                const edge = this.getAttribute("data-edge");
+                const isEdge = (navType === "previous" || navType === "prev") ? edge === "first" : navType === "next" && edge === "last";
+                const altText = this.getAttribute("alt-text");
+                const alternate = this.alternate;
+                if (this.fallback)
+                    this.fallback.hidden = Boolean(isEdge && altText);
+                if (alternate) {
+                    alternate.hidden = !(isEdge && altText);
+                    alternate.textContent = isEdge ? altText ?? "" : "";
+                }
+                const label = isEdge && altText ? altText : this.getAttribute("aria-label") || this.textContent?.trim() || (navType === "dismiss" ? "Finish tour" : navType === "previous" || navType === "prev" ? "Previous step" : "Next step");
+                button.setAttribute("aria-label", label);
+                setIfChanged("aria-label", label);
+            }
+        }
+    }
+    customElements.define(tag, SpuiTeachingButton);
+}
+function defineCarousel() {
+    if (customElements.get(carouselTag))
+        return;
+    class SpuiTeachingPopoverCarousel extends HTMLElement {
+        static observedAttributes = ["value", "default-value", "aria-label", "page-count-template", "page-label-template"];
+        currentValue = "";
+        events;
+        observer;
+        slotNode;
+        liveRegion;
+        announcement;
+        get value() { return this.getAttribute("value") ?? this.currentValue; }
+        set value(value) { this.setAttribute("value", value); }
+        get defaultValue() { return this.getAttribute("default-value") ?? ""; }
+        set defaultValue(value) { this.setAttribute("default-value", value); }
+        connectedCallback() {
+            this.style.display ||= "grid";
+            if (!this.shadowRoot)
+                this.render();
+            this.events?.abort();
+            this.events = new AbortController();
+            this.addEventListener("click", this.onClick, { signal: this.events.signal });
+            this.addEventListener("keydown", this.onKeyDown, { signal: this.events.signal });
+            this.slotNode?.addEventListener("slotchange", this.sync, { signal: this.events.signal });
+            this.observer?.disconnect();
+            this.observer = new MutationObserver(this.sync);
+            this.observer.observe(this, { childList: true, subtree: true, attributes: true, attributeFilter: ["value", "nav-type", "alt-text"] });
+            this.setAttribute("role", "region");
+            this.setAttribute("aria-roledescription", "carousel");
+            if (!this.hasAttribute("aria-label"))
+                this.setAttribute("aria-label", languageOf(this).startsWith("ar") ? "خطوات الجولة" : "Tour steps");
+            this.currentValue = this.defaultValue || this.cards()[0]?.getAttribute("value") || "";
+            this.sync();
+        }
+        disconnectedCallback() { this.events?.abort(); this.observer?.disconnect(); }
+        attributeChangedCallback() { if (this.isConnected)
+            this.sync(); }
+        render() {
+            const shadow = this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:grid;gap:8px;min-width:0}slot{display:contents}`;
+            this.slotNode = document.createElement("slot");
+            this.liveRegion = document.createElement("span");
+            this.liveRegion.setAttribute("aria-live", "polite");
+            this.liveRegion.setAttribute("aria-atomic", "true");
+            this.liveRegion.setAttribute("part", "announcement");
+            style.textContent += `span[part=announcement]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}`;
+            shadow.append(style, this.slotNode, this.liveRegion);
+        }
+        cards() { return [...this.querySelectorAll(cardTag)]; }
+        sync = () => {
+            const cards = this.cards();
+            if (!cards.length)
+                return;
+            const current = this.getAttribute("value") ?? this.currentValue ?? cards[0].getAttribute("value") ?? "";
+            const selectedIndex = Math.max(0, cards.findIndex(card => card.getAttribute("value") === current));
+            const selected = cards[selectedIndex];
+            if (!this.hasAttribute("value"))
+                this.currentValue = selected.getAttribute("value") ?? "";
+            const language = languageOf(this);
+            const pageTemplate = this.getAttribute("page-label-template") ?? (language.startsWith("ar") ? "الخطوة {current} من {total}" : "Step {current} of {total}");
+            cards.forEach((card, index) => {
+                const active = index === selectedIndex;
+                card.hidden = !active;
+                card.setAttribute("role", "group");
+                card.setAttribute("aria-roledescription", language.startsWith("ar") ? "شريحة" : "slide");
+                if (!card.hasAttribute("aria-label"))
+                    card.setAttribute("aria-label", localize(pageTemplate, index + 1, cards.length));
+                card.toggleAttribute("data-active", active);
+            });
+            this.querySelectorAll(navButtonTag).forEach(button => {
+                const active = button.getAttribute("value") === selected.getAttribute("value");
+                if (active)
+                    button.setAttribute("aria-current", "step");
+                else
+                    button.removeAttribute("aria-current");
+                button.setAttribute("tabindex", active ? "0" : "-1");
+            });
+            const edge = selectedIndex === 0 ? "first" : selectedIndex === cards.length - 1 ? "last" : "";
+            this.querySelectorAll(footerButtonTag).forEach(button => edge ? button.setAttribute("data-edge", edge) : button.removeAttribute("data-edge"));
+            const countTemplate = this.getAttribute("page-count-template") ?? (language.startsWith("ar") ? "{current} من {total}" : "{current} of {total}");
+            const count = localize(countTemplate, selectedIndex + 1, cards.length);
+            this.querySelectorAll(pageCountTag).forEach(pageCount => {
+                const value = pageCount.shadowRoot?.querySelector("[aria-live]");
+                if (value)
+                    value.textContent = count;
+            });
+            this.setAttribute("data-value", selected.getAttribute("value") ?? "");
+            this.setAttribute("data-current-page", String(selectedIndex + 1));
+            this.setAttribute("data-total-pages", String(cards.length));
+        };
+        changeTo(index, event) {
+            const cards = this.cards();
+            const next = cards[Math.max(0, Math.min(cards.length - 1, index))]?.getAttribute("value");
+            if (!next || next === this.value)
+                return;
+            const type = (event?.type ?? "programmatic");
+            if (this.hasAttribute("value")) {
+                this.dispatchEvent(new CustomEvent("spui-value-change", { bubbles: true, composed: true, detail: { value: next, event, type } }));
+                this.announceAfterUpdate(next, cards.length);
+                return;
+            }
+            this.currentValue = next;
+            this.sync();
+            const currentPage = cards.findIndex(card => card.getAttribute("value") === next) + 1;
+            const detail = { value: next, currentPage, totalPages: cards.length, event, type };
+            this.dispatchEvent(new CustomEvent("spui-value-change", { bubbles: true, composed: true, detail }));
+            this.dispatchEvent(new CustomEvent("spui-carousel-change", { bubbles: true, composed: true, detail }));
+            this.announceAfterUpdate(next, cards.length);
+        }
+        announceAfterUpdate(value, totalPages) {
+            if (!this.announcement)
+                return;
+            requestAnimationFrame(() => {
+                if (this.value !== value)
+                    return;
+                const message = this.announcement?.(value) ?? "";
+                if (this.liveRegion)
+                    this.liveRegion.textContent = message;
+                if (!message)
+                    return;
+                const currentPage = this.cards().findIndex(card => card.getAttribute("value") === value) + 1;
+                this.dispatchEvent(new CustomEvent("spui-announcement", { bubbles: true, composed: true, detail: { value, message, currentPage, totalPages } }));
+            });
+        }
+        onClick = (event) => {
+            if (event.defaultPrevented)
+                return;
+            const path = event.composedPath().filter((node) => node instanceof HTMLElement);
+            const nav = path.find(node => node.localName === navButtonTag);
+            if (nav) {
+                const index = this.cards().findIndex(card => card.getAttribute("value") === nav.getAttribute("value"));
+                if (index >= 0)
+                    this.changeTo(index, event);
+                return;
+            }
+            const button = path.find(node => node.localName === footerButtonTag);
+            if (!button)
+                return;
+            const type = button.getAttribute("nav-type");
+            const index = this.cards().findIndex(card => card.getAttribute("value") === this.value);
+            if (type === "prev" || type === "previous")
+                this.changeTo(index - 1, event);
+            else if (type === "next" && index === this.cards().length - 1)
+                this.dispatchEvent(new CustomEvent("spui-finish", { bubbles: true, composed: true, detail: { value: this.value, event, type: "click" } }));
+            else if (type === "next")
+                this.changeTo(index + 1, event);
+        };
+        onKeyDown = (event) => {
+            if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey)
+                return;
+            const cards = this.cards();
+            const index = cards.findIndex(card => card.getAttribute("value") === this.value);
+            const rtl = getComputedStyle(this).direction === "rtl";
+            const delta = event.key === "ArrowRight" ? (rtl ? -1 : 1) : event.key === "ArrowLeft" ? (rtl ? 1 : -1) : 0;
+            const next = event.key === "Home" ? 0 : event.key === "End" ? cards.length - 1 : delta ? Math.max(0, Math.min(cards.length - 1, index + delta)) : -1;
+            if (next < 0 || next === index)
+                return;
+            event.preventDefault();
+            this.changeTo(next, event);
+            const value = cards[next]?.getAttribute("value");
+            requestAnimationFrame(() => {
+                const control = [...this.querySelectorAll(navButtonTag)].find(item => item.getAttribute("value") === value);
+                (control?.shadowRoot?.querySelector("button") ?? control)?.focus();
+            });
+        };
+    }
+    customElements.define(carouselTag, SpuiTeachingPopoverCarousel);
+}
+function defineCard() {
+    if (customElements.get(cardTag))
+        return;
+    class SpuiTeachingPopoverCarouselCard extends HTMLElement {
+        static observedAttributes = ["value", "aria-label", "hidden"];
+        connectedCallback() {
+            this.style.display ||= "grid";
+            this.style.minWidth ||= "0";
+            if (!this.shadowRoot) {
+                const shadow = this.attachShadow({ mode: "open" });
+                const style = document.createElement("style");
+                style.textContent = `${base}:host([hidden]){display:none!important}slot{display:contents}`;
+                const slide = document.createElement("div");
+                slide.part.add("slide");
+                slide.append(document.createElement("slot"));
+                shadow.append(style, slide);
+            }
+        }
+    }
+    customElements.define(cardTag, SpuiTeachingPopoverCarouselCard);
+}
+function definePageCount() {
+    if (customElements.get(pageCountTag))
+        return;
+    class SpuiTeachingPopoverPageCount extends HTMLElement {
+        connectedCallback() {
+            if (this.shadowRoot)
+                return;
+            const shadow = this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:inline-flex;align-items:center;color:var(--spui-ui-text-muted,var(--colorNeutralForeground3,#616161));font-size:var(--spui-font-size-200,12px);white-space:nowrap}[aria-live]{display:inline}`;
+            const value = document.createElement("span");
+            value.setAttribute("aria-live", "polite");
+            value.setAttribute("part", "count");
+            shadow.append(style, value);
+        }
+    }
+    customElements.define(pageCountTag, SpuiTeachingPopoverPageCount);
+}
+function defineCarouselFooter() {
+    const tag = partTag("carousel-footer");
+    if (customElements.get(tag))
+        return;
+    class SpuiTeachingPopoverCarouselFooter extends HTMLElement {
+        static observedAttributes = ["layout", "initial-step-text", "final-step-text"];
+        slotNode;
+        footer;
+        connectedCallback() {
+            if (this.shadowRoot)
+                return;
+            this.style.display ||= "block";
+            const shadow = this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{box-sizing:border-box}footer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}slot{display:contents}`;
+            this.footer = document.createElement("footer");
+            this.footer.part.add("root");
+            const previous = document.createElement("slot");
+            previous.name = "previous";
+            const next = document.createElement("slot");
+            next.name = "next";
+            this.slotNode = document.createElement("slot");
+            this.slotNode.addEventListener("slotchange", this.sync);
+            this.footer.append(previous, this.slotNode, next);
+            shadow.append(style, this.footer);
+            this.sync();
+        }
+        attributeChangedCallback() { this.sync(); }
+        sync = () => {
+            if (this.footer)
+                this.footer.style.justifyContent = this.getAttribute("layout") === "offset" ? "space-between" : "center";
+            for (const [type, attr] of [["previous", "initial-step-text"], ["prev", "initial-step-text"], ["next", "final-step-text"]]) {
+                const text = this.getAttribute(attr);
+                for (const button of this.querySelectorAll(`${footerButtonTag}[nav-type="${type}"]`)) {
+                    const previousGenerated = button.getAttribute("data-spui-footer-alt-text");
+                    const existingAlt = button.getAttribute("alt-text");
+                    if ((previousGenerated && existingAlt !== previousGenerated) || (!previousGenerated && existingAlt))
+                        continue;
+                    if (text) {
+                        button.setAttribute("alt-text", text);
+                        button.setAttribute("data-spui-footer-alt-text", text);
+                    }
+                    else if (previousGenerated) {
+                        button.removeAttribute("alt-text");
+                        button.removeAttribute("data-spui-footer-alt-text");
+                    }
+                }
+            }
+        };
+    }
+    customElements.define(tag, SpuiTeachingPopoverCarouselFooter);
+}
+/** Register the framework-neutral TeachingPopover and its composable guided-tour parts. */
+export function defineTeachingPopover() {
+    defineButton();
+    definePopoverVariant("spui-teaching-popover", { label: "Guided tour", trapFocus: true, arrow: true });
+    definePart(partTag("trigger"), "span", ":host{display:contents!important}");
+    definePart(partTag("surface"), "div", ":host{display:grid;gap:12px;min-width:min(320px,calc(100vw - 64px));max-width:100%;box-sizing:border-box}");
+    const iconFallback = () => { const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("viewBox", "0 0 16 16"); svg.setAttribute("width", "16"); svg.setAttribute("height", "16"); svg.setAttribute("fill", "none"); svg.setAttribute("stroke", "currentColor"); svg.setAttribute("stroke-width", "1.25"); const path = document.createElementNS(svg.namespaceURI, "path"); path.setAttribute("d", "M5.1 10.6c-.3-.8-.7-1.3-1.2-2A4.3 4.3 0 1 1 12.1 8c-.5.7-.9 1.2-1.2 2.6H5.2l-.1 0Zm.4 1.3h5m-4.5 1.4h4m-3.4 1.2h2.8"); svg.append(path); return svg; };
+    const dismissFallback = (host) => { const button = document.createElement("button"); button.type = "button"; button.setAttribute("aria-label", languageOf(host).startsWith("ar") ? "إغلاق" : "Dismiss"); button.setAttribute("data-spui-popover-close", ""); button.textContent = "×"; return button; };
+    definePart(partTag("header"), "header", "header{display:flex;align-items:center;gap:8px;padding-block-end:4px;color:var(--spui-ui-text-muted,var(--colorNeutralForeground3,#616161));font-size:var(--spui-font-size-200,12px);font-weight:600}slot[name=icon]{display:inline-flex;align-items:center;flex:none;color:var(--spui-ui-accent,var(--colorBrandForeground1,#0f6cbd))}slot[name=dismiss-button]{margin-inline-start:auto}slot[name=dismiss-button] button,slot[name=dismiss-button]::slotted(button){box-sizing:border-box;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:var(--spui-control-radius,4px);background:transparent;color:inherit;font:inherit;cursor:pointer}slot[name=dismiss-button] button:hover,slot[name=dismiss-button]::slotted(button):hover{background:var(--spui-ui-surface-hover,var(--colorNeutralBackground1Hover,#f5f5f5))}slot[name=dismiss-button] button:focus-visible,slot[name=dismiss-button]::slotted(button):focus-visible{outline:2px solid var(--spui-ui-border-focus,var(--spui-ui-accent,#0f6cbd));outline-offset:1px}", ["icon", "dismiss-button"], { icon: iconFallback, "dismiss-button": dismissFallback }, ["dismiss-button"]);
+    definePart(partTag("title"), "h2", "h2{display:flex;align-items:center;gap:8px;margin:0;color:var(--spui-ui-text,var(--colorNeutralForeground1,#242424));font:600 20px/1.3 var(--spui-font-family,inherit)}slot[name=dismiss-button]{margin-inline-start:auto}", ["dismiss-button"]);
+    definePart(partTag("body"), "div", "div{display:grid;gap:8px;padding-block-end:8px;color:var(--spui-ui-text,var(--colorNeutralForeground1,#242424));font:var(--spui-font-family,inherit);line-height:1.5}");
+    definePart(partTag("footer"), "footer", "footer{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}slot[name=primary],slot[name=secondary]{display:inline-flex}slot:not([name]){display:contents}", ["primary", "secondary"]);
+    defineCarouselFooter();
+    definePart(partTag("carousel-nav"), "nav", "nav{display:flex;align-items:center;gap:4px}");
+    defineCard();
+    definePageCount();
+    defineCarousel();
+    defineTeachingButton(navButtonTag, "nav");
+    defineTeachingButton(footerButtonTag, "footer");
+}

package/dist/elements/text.d.ts

@@ -0,0 +1,5 @@
+export type TextSize = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000 | 1100 | 1200;
+export type TextWeight = "regular" | "medium" | "semibold" | "bold";
+export type TextFont = "base" | "monospace" | "numeric";
+export type TextTag = "span" | "p" | "div" | "strong" | "b" | "em" | "i" | "small" | "code" | "pre" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export declare function defineText(): void;

package/dist/elements/text.js

@@ -0,0 +1,69 @@
+import { base } from "./shared.js";
+const sizes = {
+    "100": ["10px", "14px"], "200": ["12px", "16px"], "300": ["14px", "20px"], "400": ["16px", "22px"],
+    "500": ["20px", "28px"], "600": ["24px", "32px"], "700": ["28px", "36px"], "800": ["32px", "40px"],
+    "900": ["40px", "52px"], "1000": ["68px", "92px"], "1100": ["80px", "104px"], "1200": ["96px", "128px"],
+};
+const fluentSizeTokens = {
+    "100": ["fontSizeBase100", "lineHeightBase100"], "200": ["fontSizeBase200", "lineHeightBase200"], "300": ["fontSizeBase300", "lineHeightBase300"],
+    "400": ["fontSizeBase400", "lineHeightBase400"], "500": ["fontSizeBase500", "lineHeightBase500"], "600": ["fontSizeBase600", "lineHeightBase600"],
+    "700": ["fontSizeHero700", "lineHeightHero700"], "800": ["fontSizeHero800", "lineHeightHero800"], "900": ["fontSizeHero900", "lineHeightHero900"], "1000": ["fontSizeHero1000", "lineHeightHero1000"],
+};
+const extendedSizeTokens = {
+    "1100": ["--spui-text-font-size-1100", "--spui-text-line-height-1100"],
+    "1200": ["--spui-text-font-size-1200", "--spui-text-line-height-1200"],
+};
+const tags = new Set(["span", "p", "div", "strong", "b", "em", "i", "small", "code", "pre", "blockquote", "h1", "h2", "h3", "h4", "h5", "h6"]);
+export function defineText() {
+    if (customElements.get("spui-text"))
+        return;
+    class SpuiText extends HTMLElement {
+        static observedAttributes = ["as", "size", "weight", "font", "align", "italic", "underline", "strikethrough", "truncate", "wrap", "block"];
+        connectedCallback() { if (!this.shadowRoot)
+            this.render();
+        else {
+            this.syncTag();
+            this.syncSize();
+        } }
+        attributeChangedCallback(name) {
+            if (!this.isConnected)
+                return;
+            if (name === "as")
+                this.syncTag();
+            if (name === "size")
+                this.syncSize();
+        }
+        tag() { const tag = this.getAttribute("as") ?? "span"; return tags.has(tag) ? tag : "span"; }
+        content() {
+            const content = document.createElement(this.tag());
+            content.className = "text";
+            content.part.add("content");
+            content.append(document.createElement("slot"));
+            return content;
+        }
+        render() {
+            const shadow = this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:inline;vertical-align:baseline}:host([block]),:host([as=p]),:host([as=div]),:host([as=pre]),:host([as=blockquote]),:host([as=h1]),:host([as=h2]),:host([as=h3]),:host([as=h4]),:host([as=h5]),:host([as=h6]){display:block}.text{box-sizing:border-box;margin:0;color:inherit;font-family:var(--spui-font-family,var(--fontFamilyBase,inherit));font-size:var(--spui-text-font-size,var(--fontSizeBase300,14px));font-weight:var(--spui-text-font-weight,var(--fontWeightRegular,400));line-height:var(--spui-text-line-height,var(--lineHeightBase300,20px));text-align:var(--spui-text-align,start);font-style:normal;text-decoration:none;white-space:normal;overflow-wrap:anywhere}:host([as=strong]) .text,:host([as=b]) .text{font-weight:var(--fontWeightBold,700)}:host([as=em]) .text,:host([as=i]) .text{font-style:italic}:host([weight=regular]) .text{font-weight:var(--fontWeightRegular,400)}:host([weight=medium]) .text{font-weight:var(--fontWeightMedium,500)}:host([weight=semibold]) .text{font-weight:var(--fontWeightSemibold,600)}:host([weight=bold]) .text{font-weight:var(--fontWeightBold,700)}:host([font=monospace]) .text{font-family:var(--spui-font-family-mono,var(--fontFamilyMonospace,ui-monospace,monospace))}:host([font=numeric]) .text{font-family:var(--fontFamilyNumeric,var(--fontFamilyBase,inherit));font-variant-numeric:tabular-nums}:host([align=center]) .text{text-align:center}:host([align=end]) .text{text-align:end}:host([align=justify]) .text{text-align:justify}:host([italic]) .text{font-style:italic}:host([underline]) .text{text-decoration:underline;text-underline-offset:.15em}:host([strikethrough]) .text{text-decoration:line-through}:host([underline][strikethrough]) .text{text-decoration-line:underline line-through}:host([truncate]){display:inline-block;max-width:100%;vertical-align:bottom}:host([truncate]) .text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}:host([wrap=false]) .text{white-space:nowrap;overflow-wrap:normal}:host([as=code]) .text,:host([as=pre]) .text{font-family:var(--spui-font-family-mono,var(--fontFamilyMonospace,ui-monospace,monospace))}:host([as=pre]) .text{white-space:pre-wrap;overflow-wrap:anywhere}@media(forced-colors:active){.text{color:CanvasText}}`;
+            shadow.replaceChildren(style, this.content());
+            this.syncSize();
+        }
+        syncTag() {
+            const content = this.shadowRoot?.querySelector(".text");
+            if (content && content.localName !== this.tag())
+                content.replaceWith(this.content());
+        }
+        syncSize() {
+            const content = this.shadowRoot?.querySelector(".text");
+            if (!content)
+                return;
+            const size = this.getAttribute("size") ?? "300";
+            const [fallbackSize, fallbackLine] = sizes[size] ?? sizes["300"];
+            const fluentTokens = fluentSizeTokens[size];
+            const [fontToken, lineToken] = extendedSizeTokens[size] ?? (fluentTokens ? [`--${fluentTokens[0]}`, `--${fluentTokens[1]}`] : [`--${fluentSizeTokens["300"][0]}`, `--${fluentSizeTokens["300"][1]}`]);
+            content.style.fontSize = `var(--spui-text-font-size,var(${fontToken},${fallbackSize}))`;
+            content.style.lineHeight = `var(--spui-text-line-height,var(${lineToken},${fallbackLine}))`;
+        }
+    }
+    customElements.define("spui-text", SpuiText);
+}

package/dist/elements/textarea.d.ts

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