@spfx-fast/sharepoint-ui 0.4.1 → 0.4.3

package/dist/elements/tag-picker.js

@@ -1,12 +1,12 @@
 import { base, syncHostAccessibleName } from "./shared.js";
-import { getFloatingPosition } from "./floating-position.js";
+import { getFloatingBoundary, getFloatingPosition } from "./floating-position.js";
 /** Searchable multi-select picker with native form association and light-DOM options. */
 export function defineTagPicker() {
     if (customElements.get("spui-tag-picker"))
         return;
     class SpuiTagPicker extends HTMLElement {
         static formAssociated = true;
-        static observedAttributes = ["label", "placeholder", "selected-values", "selected-options", "default-selected-options", "input-value", "input-appearance", "input-disabled", "input-aria-label", "input-aria-describedby", "clearable", "selected-label", "inline", "no-popover", "disabled", "required", "name", "no-results", "remove-label", "open", "default-open", "positioning", "disable-auto-focus", "aria-label", "aria-labelledby", "aria-description", "aria-describedby"];
+        static observedAttributes = ["label", "placeholder", "selected-values", "selected-options", "default-selected-options", "input-value", "input-appearance", "input-disabled", "input-aria-label", "input-aria-describedby", "clearable", "selected-label", "required-message", "inline", "no-popover", "disabled", "required", "name", "no-results", "remove-label", "open", "default-open", "positioning", "disable-auto-focus", "aria-label", "aria-labelledby", "aria-description", "aria-describedby", "aria-invalid"];
         internals;
         observer;
         resizeObserver;
@@ -261,22 +261,31 @@ export function defineTagPicker() {
                 catch { /* Fixed positioning remains a fallback for browsers without Popover API support. */ }
             }
             const rect = anchor.getBoundingClientRect();
-            const width = Math.min(rect.width, window.innerWidth - 8);
+            const view = this.ownerDocument.defaultView ?? window;
+            const viewport = { width: view.innerWidth, height: view.innerHeight };
+            const config = this.positioningValue ?? this.getAttribute("positioning") ?? undefined;
+            const options = typeof config === "object" ? config : undefined;
+            const flipBoundary = getFloatingBoundary(options?.flipBoundary === undefined ? "clippingParents" : options.flipBoundary, this, viewport);
+            const overflowBoundary = getFloatingBoundary(options?.overflowBoundary === undefined ? "clippingParents" : options.overflowBoundary, this, viewport);
+            const bounds = overflowBoundary ?? { left: 0, top: 0, right: viewport.width, bottom: viewport.height };
+            const maxWidth = Math.max(0, Math.min(viewport.width - 8, bounds.right - bounds.left - 16));
+            const maxHeight = Math.max(0, Math.min(240, bounds.bottom - bounds.top - 16));
+            const width = Math.min(rect.width, maxWidth);
             popup.style.width = `${width}px`;
+            popup.style.maxWidth = `${maxWidth}px`;
+            popup.style.maxHeight = `${maxHeight}px`;
             const direction = getComputedStyle(this).direction === "rtl" ? "rtl" : "ltr";
-            const config = this.positioningValue;
             const raw = typeof config === "string" ? config : config?.position ?? "below";
             const [side = "below", suffix] = raw.split("-");
             const placementMap = { above: "top", below: "bottom", before: "start", after: "end", top: "top", bottom: "bottom", left: "left", right: "right", start: "start", end: "end" };
             const placement = placementMap[side] ?? "bottom";
             const align = (typeof config === "object" && config ? config.align : undefined) ?? (suffix === "start" || suffix === "end" || suffix === "top" || suffix === "bottom" ? suffix : "start");
-            const options = typeof config === "object" && config ? config : undefined;
             const offset = typeof options?.offset === "number" ? options.offset : typeof options?.offset === "object" ? options.offset.mainAxis : 4;
             const fallback = (options?.fallbackPositions ?? []).map(value => {
                 const [fallbackSide, fallbackAlign] = value.split("-");
                 return { placement: placementMap[fallbackSide] ?? "bottom", align: fallbackAlign };
             });
-            const position = getFloatingPosition(rect, { width: popup.offsetWidth, height: popup.offsetHeight }, placement, direction, offset, undefined, align, fallback, options?.pinned, undefined, undefined, { coverTarget: options?.coverTarget });
+            const position = getFloatingPosition(rect, { width: popup.offsetWidth, height: popup.offsetHeight }, placement, direction, offset, viewport, align, fallback, options?.pinned, flipBoundary, overflowBoundary, { coverTarget: options?.coverTarget });
             popup.dataset.placement = position.placement;
             popup.style.left = `${position.left}px`;
             popup.style.top = `${position.top}px`;
@@ -380,7 +389,7 @@ export function defineTagPicker() {
             this.internals?.setFormValue(values.length && name ? formData : null, JSON.stringify(values));
             const missing = this.hasAttribute("required") && values.length === 0;
             try {
-                this.internals?.setValidity(missing ? { valueMissing: true } : {}, missing ? "Choose at least one option." : "", (this.buttonTrigger() ?? input) ?? undefined);
+                this.internals?.setValidity(missing ? { valueMissing: true } : {}, missing ? this.getAttribute("required-message") || "Choose at least one option." : "", (this.buttonTrigger() ?? input) ?? undefined);
             }
             catch { /* The input itself retains required semantics as a fallback. */ }
         }
@@ -391,6 +400,11 @@ export function defineTagPicker() {
                 return;
             const expanded = this.open || this.hasAttribute("no-popover");
             input.setAttribute("aria-expanded", String(expanded));
+            const invalid = this.getAttribute("aria-invalid");
+            if (invalid === null)
+                input.removeAttribute("aria-invalid");
+            else
+                input.setAttribute("aria-invalid", invalid);
             if (expanded)
                 input.setAttribute("aria-controls", list.id);
             else
@@ -400,6 +414,10 @@ export function defineTagPicker() {
                 trigger.setAttribute("aria-haspopup", "listbox");
                 trigger.setAttribute("aria-expanded", String(this.open));
                 trigger.setAttribute("aria-required", String(this.hasAttribute("required")));
+                if (invalid === null)
+                    trigger.removeAttribute("aria-invalid");
+                else
+                    trigger.setAttribute("aria-invalid", invalid);
                 if (this.open)
                     trigger.setAttribute("aria-controls", list.id);
                 else
@@ -617,11 +635,11 @@ export function defineTagPicker() {
             popup.append(list, empty);
             control.append(selected, buttonSlot, input, popup, secondarySlot, expandSlot);
             const style = document.createElement("style");
-            style.textContent = `${base}:host{display:grid;gap:var(--spui-control-gap,6px);min-width:0}label{font-size:14px;font-weight:600;color:var(--spui-ui-muted,var(--spui-semantic-body-text,inherit))}.control{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px;box-sizing:border-box;min-height:var(--spui-control-height,36px);padding:4px 8px;border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,#8a8886)));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,var(--spui-semantic-input-background,#fff)));color:var(--spui-ui-text,inherit)}.control:focus-within{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:1px}.selected{display:contents}.chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:2px 5px 2px 8px;border:1px solid var(--spui-base-stroke,var(--spui-ui-stroke,#d1d1d1));border-radius:999px;background:color-mix(in srgb,var(--spui-base-accent,var(--spui-ui-accent,#0078d4)) 12%,var(--spui-base-surface,var(--spui-ui-surface,#fff)));font-size:12px}.chip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.remove{display:grid;place-items:center;flex:none;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font:inherit;font-size:16px;cursor:pointer}.remove:hover{background:color-mix(in srgb,currentColor 12%,transparent)}.remove:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4))}.remove:disabled{opacity:.5;cursor:not-allowed}input{flex:1 1 100px;min-width:72px;width:auto;min-height:28px;padding:2px 4px;border:0;outline:none;background:transparent;color:inherit;font:inherit}input::placeholder{color:var(--spui-ui-muted,#616161)}input:disabled{cursor:not-allowed}ul{position:absolute;z-index:var(--spui-layer-dropdown,20);top:calc(100% + 4px);inset-inline:0;box-sizing:border-box;max-height:240px;overflow:auto;margin:0;padding:4px;list-style:none;border:1px solid var(--spui-ui-stroke,#d1d1d1);border-radius:var(--spui-card-radius,8px);background:var(--spui-ui-surface,#fff);box-shadow:var(--spui-card-shadow,0 4px 14px #0002)}ul[hidden]{display:none}.group-heading{padding:7px 10px 3px;color:var(--spui-ui-muted,inherit);font-size:11px;font-weight:600}li[role=option]{padding:8px 10px;border-radius:var(--spui-control-radius,4px);color:var(--spui-ui-text,inherit);cursor:pointer}li[role=option][data-active=true],li[role=option][aria-selected=true]{background:var(--spui-ui-surface-hover,var(--spui-ui-canvas,#f5f5f5))}li[role=option][aria-disabled=true]{opacity:.5;cursor:not-allowed}.empty{position:absolute;z-index:calc(var(--spui-layer-dropdown,20) + 1);top:calc(100% + 4px);inset-inline:0;box-sizing:border-box;padding:12px;border:1px solid var(--spui-ui-stroke,#d1d1d1);border-radius:var(--spui-card-radius,8px);background:var(--spui-ui-surface,#fff);box-shadow:var(--spui-card-shadow,0 4px 14px #0002);color:var(--spui-ui-muted,inherit)}.empty[hidden]{display:none}:host([disabled]) .control{opacity:.55}@media(forced-colors:active){.control,ul,.empty{border-color:CanvasText}.chip{border-color:CanvasText}li[role=option][data-active=true]{outline:1px solid Highlight}}`;
+            style.textContent = `${base}:host{display:grid;gap:var(--spui-control-gap,6px);min-width:0}label{font-size:14px;font-weight:600;color:var(--spui-ui-muted,var(--spui-semantic-body-text,inherit))}.control{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px;box-sizing:border-box;min-height:var(--spui-control-height,36px);padding:4px 8px;border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,#8a8886)));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,var(--spui-semantic-input-background,#fff)));color:var(--spui-ui-text,inherit)}.control:focus-within{border-width:2px;border-color:var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline:0;box-shadow:none}.control:has(.remove:focus-visible){border-width:1px;border-color:var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,#8a8886)))}:host([aria-invalid]:not([aria-invalid=false])) .control{border-color:var(--spui-input-invalid-border,var(--spui-ui-danger,var(--colorPaletteRedBorder2,#c50f1f)))}.selected{display:contents}.chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:2px 5px 2px 8px;border:1px solid var(--spui-base-stroke,var(--spui-ui-stroke,#d1d1d1));border-radius:999px;background:color-mix(in srgb,var(--spui-base-accent,var(--spui-ui-accent,#0078d4)) 12%,var(--spui-base-surface,var(--spui-ui-surface,#fff)));font-size:12px}.chip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.remove{display:grid;place-items:center;flex:none;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font:inherit;font-size:16px;cursor:pointer}.remove:hover{background:color-mix(in srgb,currentColor 12%,transparent)}.remove:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4))}.remove:disabled{opacity:.5;cursor:not-allowed}input{flex:1 1 100px;min-width:72px;width:auto;min-height:28px;padding:2px 4px;border:0;outline:none;background:transparent;color:inherit;font:inherit}input:focus-visible{outline:0}input::placeholder{color:var(--spui-ui-muted,#616161)}input:disabled{cursor:not-allowed}ul{position:absolute;z-index:var(--spui-layer-dropdown,20);top:calc(100% + 4px);inset-inline:0;box-sizing:border-box;max-height:240px;overflow:auto;margin:0;padding:4px;list-style:none;border:1px solid var(--spui-ui-stroke,#d1d1d1);border-radius:var(--spui-card-radius,8px);background:var(--spui-ui-surface,#fff);box-shadow:var(--spui-card-shadow,0 4px 14px #0002)}ul[hidden]{display:none}.group-heading{padding:7px 10px 3px;color:var(--spui-ui-muted,inherit);font-size:11px;font-weight:600}li[role=option]{padding:8px 10px;border-radius:var(--spui-control-radius,4px);color:var(--spui-ui-text,inherit);cursor:pointer}li[role=option][data-active=true],li[role=option][aria-selected=true]{background:var(--spui-ui-surface-hover,var(--spui-ui-canvas,#f5f5f5))}li[role=option][aria-disabled=true]{opacity:.5;cursor:not-allowed}.empty{position:absolute;z-index:calc(var(--spui-layer-dropdown,20) + 1);top:calc(100% + 4px);inset-inline:0;box-sizing:border-box;padding:12px;border:1px solid var(--spui-ui-stroke,#d1d1d1);border-radius:var(--spui-card-radius,8px);background:var(--spui-ui-surface,#fff);box-shadow:var(--spui-card-shadow,0 4px 14px #0002);color:var(--spui-ui-muted,inherit)}.empty[hidden]{display:none}:host([disabled]) .control{opacity:.55}@media(forced-colors:active){.control,ul,.empty{border-color:CanvasText}.control:focus-within{border-color:Highlight}.remove:focus-visible{outline-color:Highlight}:host([aria-invalid]:not([aria-invalid=false])) .control{border-color:CanvasText}:host([aria-invalid]:not([aria-invalid=false])) .control:focus-within{border-color:Highlight}.chip{border-color:CanvasText}li[role=option][data-active=true]{outline:1px solid Highlight}}`;
             style.textContent += `.option-group{list-style:none;margin:0;padding:0}.option-media{display:inline-flex;align-items:center;justify-content:center;flex:none}.option-media img,.option-media svg{width:24px;height:24px;object-fit:cover}.chip .option-media img,.chip .option-media svg{width:20px;height:20px;border-radius:50%}li[role=option],[role=group] [role=option]{display:flex;align-items:center;gap:8px}.option-group-options [role=option]{padding:8px 10px;border-radius:var(--spui-control-radius,4px);color:var(--spui-ui-text,inherit);cursor:pointer}.option-group-options [role=option][data-active=true],.option-group-options [role=option][aria-selected=true]{background:var(--spui-ui-surface-hover,var(--spui-ui-canvas,#f5f5f5))}.option-group-options [role=option][aria-disabled=true]{opacity:.5;cursor:not-allowed}.option-label{min-width:0;overflow:hidden;text-overflow:ellipsis}.option-secondary{margin-inline-start:auto;color:var(--spui-ui-muted,inherit);font-size:12px;white-space:nowrap}`;
-            style.textContent += `:host([data-button-trigger]) input{display:none}::slotted(button[slot=button]){align-self:center;display:inline-flex;align-items:center;min-width:32px;min-height:28px;padding:4px 8px;border:1px solid var(--spui-control-border,var(--spui-ui-stroke,#8a8886));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,#fff));color:var(--spui-ui-text,inherit);font:inherit;cursor:pointer}::slotted(button[slot=button][data-appearance=filled-darker]){background:var(--spui-ui-surface-sunken,var(--spui-ui-canvas,#f5f5f5))}::slotted(button[slot=button][data-appearance=filled-lighter]){background:var(--spui-ui-surface,var(--spui-semantic-input-background,#fff))}::slotted(button[slot=button][data-appearance=underline]){border:0;border-bottom:1px solid currentColor;border-radius:0;background:transparent}::slotted(button[slot=button][data-size=small]){min-height:24px;padding:2px 6px;font-size:12px}::slotted(button[slot=button][data-size=large]){min-height:40px;padding:6px 12px;font-size:16px}::slotted(button[slot=button]:focus-visible){outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:1px}:host([disabled])::slotted(button[slot=button]){opacity:.55;cursor:not-allowed}`;
-            style.textContent += `::slotted(spui-tag-picker-group){display:contents}:host([input-appearance=filled-darker]) .control{background:var(--spui-ui-surface-sunken,var(--spui-ui-canvas,#f5f5f5))}:host([input-appearance=filled-lighter]) .control{background:var(--spui-ui-surface,var(--spui-semantic-input-background,#fff))}:host([input-appearance=underline]) .control{border:0;border-bottom:1px solid var(--spui-control-border,var(--spui-ui-stroke,#8a8886));border-radius:0;background:transparent}`;
-            style.textContent += `::slotted([slot=secondary-action]){display:inline-flex;align-items:center;flex:none}::slotted([slot=expand-icon]){display:inline-flex;align-items:center;justify-content:center;flex:none}:host([inline]) .popup,:host([no-popover]) .popup{position:absolute;inset-inline:0;top:calc(100% + 4px);left:auto;width:100%!important;max-height:min(240px,calc(100dvh - 8px));z-index:var(--spui-layer-dropdown,20)}`;
+            style.textContent += `:host([data-button-trigger]) input{display:none}::slotted(button[slot=button]){align-self:center;display:inline-flex;align-items:center;min-width:32px;min-height:28px;padding:4px 8px;border:1px solid var(--spui-control-border,var(--spui-ui-stroke,#8a8886));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,#fff));color:var(--spui-ui-text,inherit);font:inherit;cursor:pointer}::slotted(button[slot=button][data-appearance=filled-darker]){background:var(--spui-ui-surface-sunken,var(--spui-ui-canvas,#f5f5f5))}::slotted(button[slot=button][data-appearance=filled-lighter]){background:var(--spui-ui-surface,var(--spui-semantic-input-background,#fff))}::slotted(button[slot=button][data-appearance=underline]){border:0;border-bottom:1px solid currentColor;border-radius:0;background:transparent}::slotted(button[slot=button][data-size=small]){min-height:24px;padding:2px 6px;font-size:12px}::slotted(button[slot=button][data-size=large]){min-height:40px;padding:6px 12px;font-size:16px}::slotted(button[slot=button]:focus-visible){outline:0!important;outline-offset:0;box-shadow:none!important}:host([disabled])::slotted(button[slot=button]){opacity:.55;cursor:not-allowed}`;
+            style.textContent += `::slotted(spui-tag-picker-group){display:contents}:host([input-appearance=filled-darker]) .control{background:var(--spui-ui-surface-sunken,var(--spui-ui-canvas,#f5f5f5))}:host([input-appearance=filled-lighter]) .control{background:var(--spui-ui-surface,var(--spui-semantic-input-background,#fff))}:host([input-appearance=underline]) .control{border:0;border-bottom:1px solid var(--spui-control-border,var(--spui-ui-stroke,#8a8886));border-radius:0;background:transparent}:host([input-appearance=underline]) .control:focus-within{border-bottom-width:2px}:host([input-appearance=underline]) .control:has(.remove:focus-visible){border-bottom-width:1px}`;
+            style.textContent += `::slotted([slot=secondary-action]){display:inline-flex;align-items:center;flex:none}::slotted([slot=expand-icon]){display:inline-flex;align-items:center;justify-content:center;flex:none}:host([inline]) .popup,:host([no-popover]) .popup{position:absolute;inset-inline:0;top:calc(100% + 4px);width:100%!important;max-height:min(240px,calc(100dvh - 8px));z-index:var(--spui-layer-dropdown,20)}`;
             style.textContent += `.popup{position:fixed;inset:auto;z-index:var(--spui-layer-popover,10000);box-sizing:border-box;max-width:calc(100vw - 8px);max-height:min(240px,calc(100dvh - 8px));overflow:auto;margin:0;padding:4px;border:1px solid var(--spui-ui-stroke,#d1d1d1);border-radius:var(--spui-card-radius,8px);background:var(--spui-ui-surface,#fff);color:var(--spui-ui-text,inherit);box-shadow:var(--spui-card-shadow,0 4px 14px #0002)}.popup[hidden]{display:none}.popup ul{position:static;inset:auto;z-index:auto;max-height:none;overflow:visible;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}.popup .empty{position:static;inset:auto;z-index:auto;margin:0;padding:12px;border:0;border-radius:0;background:transparent;box-shadow:none}`;
             const slot = document.createElement("slot");
             slot.hidden = true;

package/dist/elements/textarea.js

@@ -58,8 +58,8 @@ export function defineTextArea() {
                     input.setAttribute(name, value);
             }
             const style = document.createElement("style");
-            style.textContent = `${base}:host{display:grid;gap:var(--spui-control-gap,6px)}label{font-size:14px;font-weight:600;color:var(--spui-ui-muted,var(--spui-semantic-body-text,inherit))}textarea{width:100%;min-height:72px;box-sizing:border-box;padding:var(--spui-control-padding-block,10px) var(--spui-control-padding-inline,12px);border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,var(--colorNeutralStroke1,#8a8886))));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,var(--spui-semantic-input-background,var(--colorNeutralBackground1,#fff))));box-shadow:var(--spui-control-shadow,none);color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit));font:inherit;resize:none}:host([size=small]) textarea{min-height:64px;padding-block:8px;font-size:var(--spui-text-font-size-small,12px)}:host([size=medium]) textarea{min-height:72px}:host([size=large]) textarea{min-height:88px;font-size:var(--spui-text-font-size-large,16px)}:host([appearance=filled-darker]),:host([appearance=filled-darker-shadow]){--spui-control-background:var(--spui-input-filled-darker,var(--spui-ui-surface-hover,var(--colorNeutralBackground3,#f0f0f0)));--spui-control-border:transparent}:host([appearance=filled-lighter]),:host([appearance=filled-lighter-shadow]){--spui-control-background:var(--spui-input-filled-lighter,var(--spui-ui-canvas,var(--colorNeutralBackground2,#fafafa)));--spui-control-border:transparent}:host([appearance=filled-darker-shadow]) textarea,:host([appearance=filled-lighter-shadow]) textarea{box-shadow:var(--spui-input-filled-shadow,var(--shadow2,0 1px 2px rgb(0 0 0 / 20%)))}:host([resize=vertical]) textarea{resize:vertical}:host([resize=horizontal]) textarea{resize:horizontal}:host([resize=both]) textarea{resize:both}textarea:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:1px}textarea:disabled{opacity:.55}@media(forced-colors:active){textarea{border-color:FieldText}textarea:focus-visible{outline-color:Highlight}}`;
-            style.textContent += `textarea[hidden]{display:none}slot[name=textarea]{display:contents}slot[name=textarea]::slotted(textarea){width:100%;min-height:72px;box-sizing:border-box;padding:var(--spui-control-padding-block,10px) var(--spui-control-padding-inline,12px);border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,var(--colorNeutralStroke1,#8a8886))));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,var(--spui-semantic-input-background,var(--colorNeutralBackground1,#fff))));box-shadow:var(--spui-control-shadow,none);color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit));font:inherit;resize:none}:host([size=small]) slot[name=textarea]::slotted(textarea){min-height:64px;padding-block:8px;font-size:var(--spui-text-font-size-small,12px)}:host([size=large]) slot[name=textarea]::slotted(textarea){min-height:88px;font-size:var(--spui-text-font-size-large,16px)}:host([resize=vertical]) slot[name=textarea]::slotted(textarea){resize:vertical}:host([resize=horizontal]) slot[name=textarea]::slotted(textarea){resize:horizontal}:host([resize=both]) slot[name=textarea]::slotted(textarea){resize:both}slot[name=textarea]::slotted(textarea:focus-visible){outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:1px}`;
+            style.textContent = `${base}:host{display:grid;gap:var(--spui-control-gap,6px)}label{font-size:14px;font-weight:600;color:var(--spui-ui-muted,var(--spui-semantic-body-text,inherit))}textarea{width:100%;min-height:72px;box-sizing:border-box;padding:var(--spui-control-padding-block,10px) var(--spui-control-padding-inline,12px);border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,var(--colorNeutralStroke1,#8a8886))));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,var(--spui-semantic-input-background,var(--colorNeutralBackground1,#fff))));box-shadow:var(--spui-control-shadow,none);color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit));font:inherit;resize:none}:host([size=small]) textarea{min-height:64px;padding-block:8px;font-size:var(--spui-text-font-size-small,12px)}:host([size=medium]) textarea{min-height:72px}:host([size=large]) textarea{min-height:88px;font-size:var(--spui-text-font-size-large,16px)}:host([appearance=filled-darker]),:host([appearance=filled-darker-shadow]){--spui-control-background:var(--spui-input-filled-darker,var(--spui-ui-surface-hover,var(--colorNeutralBackground3,#f0f0f0)));--spui-control-border:transparent}:host([appearance=filled-lighter]),:host([appearance=filled-lighter-shadow]){--spui-control-background:var(--spui-input-filled-lighter,var(--spui-ui-canvas,var(--colorNeutralBackground2,#fafafa)));--spui-control-border:transparent}:host([appearance=filled-darker-shadow]) textarea,:host([appearance=filled-lighter-shadow]) textarea{box-shadow:var(--spui-input-filled-shadow,var(--shadow2,0 1px 2px rgb(0 0 0 / 20%)))}:host([resize=vertical]) textarea{resize:vertical}:host([resize=horizontal]) textarea{resize:horizontal}:host([resize=both]) textarea{resize:both}textarea:focus-visible{border-width:2px;border-color:var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline:0}textarea[aria-invalid]:not([aria-invalid=false]){border-color:var(--spui-input-invalid-border,var(--spui-ui-danger,var(--colorPaletteRedBorder2,#c50f1f)))}textarea:disabled{opacity:.55}@media(forced-colors:active){textarea{border-color:FieldText}textarea[aria-invalid]:not([aria-invalid=false]){border-color:CanvasText}textarea:focus-visible{border-color:Highlight;outline:0}textarea[aria-invalid]:not([aria-invalid=false]):focus-visible{border-color:Highlight}}`;
+            style.textContent += `textarea[hidden]{display:none}slot[name=textarea]{display:contents}slot[name=textarea]::slotted(textarea){width:100%;min-height:72px;box-sizing:border-box;padding:var(--spui-control-padding-block,10px) var(--spui-control-padding-inline,12px);border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-input-border,var(--colorNeutralStroke1,#8a8886))));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,var(--spui-semantic-input-background,var(--colorNeutralBackground1,#fff))));box-shadow:var(--spui-control-shadow,none);color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit));font:inherit;resize:none}:host([size=small]) slot[name=textarea]::slotted(textarea){min-height:64px;padding-block:8px;font-size:var(--spui-text-font-size-small,12px)}:host([size=large]) slot[name=textarea]::slotted(textarea){min-height:88px;font-size:var(--spui-text-font-size-large,16px)}:host([resize=vertical]) slot[name=textarea]::slotted(textarea){resize:vertical}:host([resize=horizontal]) slot[name=textarea]::slotted(textarea){resize:horizontal}:host([resize=both]) slot[name=textarea]::slotted(textarea){resize:both}slot[name=textarea]::slotted(textarea:focus-visible){border-width:2px!important;border-color:var(--spui-focus-ring,var(--spui-ui-accent,#0078d4))!important;outline:0!important;outline-offset:0;box-shadow:none!important}slot[name=textarea]::slotted(textarea[aria-invalid]:not([aria-invalid=false])){border-color:var(--spui-input-invalid-border,var(--spui-ui-danger,var(--colorPaletteRedBorder2,#c50f1f)))!important}@media(forced-colors:active){slot[name=textarea]::slotted(textarea){border-color:FieldText}slot[name=textarea]::slotted(textarea:focus-visible){border-color:Highlight!important}slot[name=textarea]::slotted(textarea[aria-invalid]:not([aria-invalid=false]):focus-visible){border-color:Highlight!important}slot[name=textarea]::slotted(textarea[aria-invalid]:not([aria-invalid=false])){border-color:CanvasText!important}}`;
             style.textContent += `:host([appearance=filled-darker-shadow]) slot[name=textarea]::slotted(textarea),:host([appearance=filled-lighter-shadow]) slot[name=textarea]::slotted(textarea){box-shadow:var(--spui-input-filled-shadow,var(--shadow2,0 1px 2px rgb(0 0 0 / 20%)))}`;
             const controlSlot = document.createElement("slot");
             controlSlot.name = "textarea";

package/dist/elements/toaster.js

@@ -1,3 +1,4 @@
+import { directionByLanguage } from "./shared.js";
 import { defineToast } from "./toast.js";
 export function defineToaster() {
     if (customElements.get("spui-toaster"))
@@ -348,7 +349,7 @@ export function defineToaster() {
             this.politeRegion.setAttribute("aria-atomic", "true");
             announcer.append(this.assertiveRegion, this.politeRegion);
             const style = this.ownerDocument.createElement("style");
-            style.textContent = `:host{position:fixed;z-index:var(--spui-toaster-z-index,var(--spui-layer-toast,10000));display:flex;flex-direction:column;gap:var(--spui-toaster-gap,10px);box-sizing:border-box;inline-size:min(100vw,460px);max-block-size:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:auto;overscroll-behavior:contain;padding:calc(16px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px));pointer-events:none}:host([position=top-start]){inset-block-start:0;inset-inline-start:0;align-items:flex-start}:host([position=top-end]){inset-block-start:0;inset-inline-end:0;align-items:flex-end}:host([position=bottom-start]){inset-block-end:0;inset-inline-start:0;align-items:flex-start;flex-direction:column-reverse}:host([position=bottom-end]){inset-block-end:0;inset-inline-end:0;align-items:flex-end;flex-direction:column-reverse}slot{display:contents}::slotted(spui-toast){max-inline-size:100%}.announcer{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;clip-path:inset(50%);border:0}:host([inline]){position:relative;inset:auto;inline-size:100%;max-block-size:none;overflow:visible;padding:0}:host([inline][position^=bottom]){flex-direction:column}`;
+            style.textContent = `${directionByLanguage}:host{position:fixed;z-index:var(--spui-toaster-z-index,var(--spui-layer-toast,10000));display:flex;flex-direction:column;gap:var(--spui-toaster-gap,10px);box-sizing:border-box;inline-size:min(100vw,460px);max-block-size:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:auto;overscroll-behavior:contain;padding:calc(16px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px));pointer-events:none}:host([position=top-start]){inset-block-start:0;inset-inline-start:0;align-items:flex-start}:host([position=top-end]){inset-block-start:0;inset-inline-end:0;align-items:flex-end}:host([position=bottom-start]){inset-block-end:0;inset-inline-start:0;align-items:flex-start;flex-direction:column-reverse}:host([position=bottom-end]){inset-block-end:0;inset-inline-end:0;align-items:flex-end;flex-direction:column-reverse}slot{display:contents}::slotted(spui-toast){max-inline-size:100%}.announcer{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;clip-path:inset(50%);border:0}:host([inline]){position:relative;inset:auto;inline-size:100%;max-block-size:none;overflow:visible;padding:0}:host([inline][position^=bottom]){flex-direction:column}`;
             shadow.replaceChildren(style, this.toastSlot, announcer);
         }
     }

package/dist/elements/tooltip.js

@@ -1,4 +1,5 @@
 import { getFloatingPosition } from "./floating-position.js";
+import { getDirectionFromLanguage } from "./shared.js";
 const nextId = (() => { let value = 0; return () => `spui-tooltip-${++value}`; })();
 let activeTooltip;
 function rectEdges(rect) {
@@ -12,6 +13,22 @@ function parentElement(element) {
     const root = element.getRootNode();
     return root instanceof ShadowRoot ? root.host : null;
 }
+function getLayoutDirection(element) {
+    let explicitDirection;
+    let language;
+    for (let current = element; current; current = parentElement(current)) {
+        if (!explicitDirection && current.hasAttribute("dir"))
+            explicitDirection = current;
+        if (!language && (current.hasAttribute("lang") || current.hasAttribute("xml:lang")))
+            language = current;
+    }
+    if (explicitDirection)
+        return explicitDirection.ownerDocument.defaultView?.getComputedStyle(explicitDirection).direction === "rtl" ? "rtl" : "ltr";
+    const derived = getDirectionFromLanguage(language?.getAttribute("lang") ?? language?.getAttribute("xml:lang"));
+    if (derived)
+        return derived;
+    return element.ownerDocument.defaultView?.getComputedStyle(element).direction === "rtl" ? "rtl" : "ltr";
+}
 function intersectRects(rects) {
     if (!rects.length)
         return undefined;
@@ -277,7 +294,7 @@ export function defineTooltip() {
             const targetContext = target && "contextElement" in target ? target.contextElement : target && "nodeType" in target ? target : undefined;
             const targetRect = target?.getBoundingClientRect();
             const anchor = targetRect ?? trigger.getBoundingClientRect();
-            const direction = (targetContext && getComputedStyle(targetContext).direction) || (trigger && getComputedStyle(trigger).direction) || getComputedStyle(this).direction;
+            const direction = getLayoutDirection(targetContext ?? trigger ?? this);
             const rtl = direction === "rtl";
             const [requested, align, rawPosition] = this.getRequestedPosition(rtl ? "rtl" : "ltr");
             const configuredOffset = options?.offset;

package/dist/elements/tree.js

@@ -61,7 +61,7 @@ export function defineTree() {
             if (!rows.some(row => row.key === this.activeKey))
                 this.activeKey = rows[0]?.key ?? "";
             this.root.replaceChildren();
-            this.root.setAttribute("aria-label", this.getAttribute("label") || this.getAttribute("aria-label") || "Tree");
+            this.root.setAttribute("aria-label", this.getAttribute("aria-label") || this.getAttribute("label") || "Tree");
             if (this.mode() === "multiple")
                 this.root.setAttribute("aria-multiselectable", "true");
             else

package/dist/elements.d.ts

@@ -7,6 +7,7 @@ export { defineSwatchPicker, defineColorSwatch, defineImageSwatch, defineEmptySw
 export { createTableColumn, defineTable, defineTableHeader, defineTableBody, defineTableRow, defineTableHeaderCell, defineTableCell, defineTableCellLayout, defineTableCellActions, defineTableResizeHandle, defineTableSelectionCell, type CreateTableColumnOptions, type TableColumnDefinition, type TableColumnId } from "./elements/table.js";
 export type { TextFont, TextSize, TextTag, TextWeight } from "./elements/text.js";
 export { defineButton } from "./elements/button.js";
+export { defineSharePointField, type SharePointFieldElement, type SharePointFieldOption, type SharePointFieldValueChangeDetail } from "./elements/sharepoint-fields.js";
 export { defineButtonGroup } from "./elements/button-group.js";
 export { defineCompoundButton, defineMenuButton, defineSplitButton, defineToggleButton } from "./elements/button-variants.js";
 export type { ButtonAppearance, ButtonShape, ButtonSize } from "./elements/button.js";
@@ -34,7 +35,7 @@ export type { SpinButtonAppearance, SpinButtonSize, SpinButtonChangeData } from
 export { defineSlider } from "./elements/slider.js";
 export { defineDatePicker } from "./elements/date-picker.js";
 export { defineCombobox } from "./elements/combobox.js";
-export { defineRichTextEditor, type SharePointRichTextEditorElement } from "./elements/rich-text-editor.js";
+export { defineRichTextEditor, getRichTextEditorFieldOptions, type SharePointMultiLineField, type SharePointRichTextEditorElement, type RichTextEditorLink, type RichTextEditorLinkPicker } from "./elements/rich-text-editor.js";
 export { defineAlert, type AlertAppearance } from "./elements/alert.js";
 export { defineSkeleton, defineSkeletonItem, type SkeletonAnimation, type SkeletonAppearance, type SkeletonItemSize, type SkeletonShape } from "./elements/skeleton.js";
 export { defineLink } from "./elements/link.js";
@@ -46,7 +47,7 @@ export { defineAvatarGroupItem, defineAvatarGroupPopover } from "./elements/avat
 export { definePersona, type PersonaPresence, type PersonaSize } from "./elements/persona.js";
 export { defineVirtualList, type VirtualListDataSource, type VirtualListItemRenderer, type SharePointVirtualListElement } from "./elements/virtual-list.js";
 export { defineDataGrid, type DataGridCellRenderer, type DataGridCellsEditHandler, type DataGridRowHeightGetter, type DataGridSourceSelectionHandler, type SharePointDataGridElement } from "./elements/data-grid.js";
-export { clampDataGridRowHeight, fitDataGridColumnWidths, formatDataGridClipboard, getDataGridColumnSizing, isDataGridRowSelected, parseDataGridClipboard, parseDataGridClipboardValue, setDataGridRowSelected, writeDataGridClipboardText, type DataGridCellEdit, type DataGridClipboardColumn, type DataGridColumn, type DataGridColumnSizingOption, type DataGridColumnSizingOptions, type DataGridColumnWidths, type DataGridDataSource, type DataGridDataSourceRow, type DataGridSelectionModel, type DataGridEditValue, type DataGridFocusMode, type DataGridSelectionAppearance, type DataGridSort, type DataGridSortDirection } from "./elements/data-grid-model.js";
+export { clampDataGridRowHeight, fitDataGridColumnWidths, formatDataGridClipboard, getDataGridColumnSizing, isDataGridRowSelected, parseDataGridClipboard, parseDataGridClipboardValue, setDataGridRowSelected, writeDataGridClipboardText, type DataGridCellEdit, type DataGridCellEditError, type DataGridClipboardColumn, type DataGridColumn, type DataGridColumnSizingOption, type DataGridColumnSizingOptions, type DataGridColumnWidths, type DataGridDataSource, type DataGridDataSourceRow, type DataGridSelectionModel, type DataGridEditValue, type DataGridFocusMode, type DataGridSelectionAppearance, type DataGridSort, type DataGridSortDirection } from "./elements/data-grid-model.js";
 export { defineTree, type TreeCheckedItem, type TreeItemRenderer } from "./elements/tree.js";
 export { type TreeNode, type VisibleTreeNode } from "./elements/tree-model.js";
 export { defineInteractionTag, defineInteractionTagPrimary, defineInteractionTagSecondary, defineTag, defineTagGroup, type InteractionTagSelectData, type SharePointTagGroupElement, type TagAppearance, type TagGroupSelectData, type TagShape, type TagSize } from "./elements/tags.js";

package/dist/elements.js

@@ -57,6 +57,7 @@ import { defineCarousel } from "./elements/carousel.js";
 import { defineOverflow } from "./elements/overflow.js";
 import { defineSwatchPicker } from "./elements/swatch-picker.js";
 import { defineTable } from "./elements/table.js";
+import { defineSharePointField } from "./elements/sharepoint-fields.js";
 export { createLabel, getLabelStyle } from "./elements/label.js";
 export { defineInfoButton, createInfoLabel } from "./elements/info.js";
 export { defineCarousel, defineCarouselCard, defineCarouselNav, defineCarouselNavButton, defineCarouselNavImageButton, defineCarouselButton, defineCarouselAutoplayButton, defineCarouselNavContainer, defineCarouselSlider, defineCarouselViewport } from "./elements/carousel.js";
@@ -64,6 +65,7 @@ export { defineOverflow, defineOverflowItem, defineOverflowDivider } from "./ele
 export { defineSwatchPicker, defineColorSwatch, defineImageSwatch, defineEmptySwatch, defineSwatchPickerRow } from "./elements/swatch-picker.js";
 export { createTableColumn, defineTable, defineTableHeader, defineTableBody, defineTableRow, defineTableHeaderCell, defineTableCell, defineTableCellLayout, defineTableCellActions, defineTableResizeHandle, defineTableSelectionCell } from "./elements/table.js";
 export { defineButton } from "./elements/button.js";
+export { defineSharePointField } from "./elements/sharepoint-fields.js";
 export { defineButtonGroup } from "./elements/button-group.js";
 export { defineCompoundButton, defineMenuButton, defineSplitButton, defineToggleButton } from "./elements/button-variants.js";
 export { defineInput } from "./elements/input.js";
@@ -88,7 +90,7 @@ export { defineSpinButton } from "./elements/spin-button.js";
 export { defineSlider } from "./elements/slider.js";
 export { defineDatePicker } from "./elements/date-picker.js";
 export { defineCombobox } from "./elements/combobox.js";
-export { defineRichTextEditor } from "./elements/rich-text-editor.js";
+export { defineRichTextEditor, getRichTextEditorFieldOptions } from "./elements/rich-text-editor.js";
 export { defineAlert } from "./elements/alert.js";
 export { defineSkeleton, defineSkeletonItem } from "./elements/skeleton.js";
 export { defineLink } from "./elements/link.js";
@@ -155,6 +157,7 @@ export function defineSharePointUIElements() {
     defineDatePicker();
     defineCombobox();
     defineRichTextEditor();
+    defineSharePointField();
     defineAlert();
     defineSkeleton();
     defineLink();

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { defineSharePointUIElements } from "./elements.js";
 export { defineButton } from "./elements/button.js";
+export { defineSharePointField, type SharePointFieldElement, type SharePointFieldOption, type SharePointFieldValueChangeDetail } from "./elements/sharepoint-fields.js";
 export { defineButtonGroup } from "./elements/button-group.js";
 export { defineCompoundButton, defineMenuButton, defineSplitButton, defineToggleButton } from "./elements/button-variants.js";
 export type { ButtonAppearance, ButtonShape, ButtonSize } from "./elements/button.js";
@@ -16,7 +17,7 @@ export { defineToolbar, defineToolbarGroup, defineToolbarSeparator, defineToolba
 export { defineCarousel, defineCarouselCard, defineCarouselNav, defineCarouselNavButton, defineCarouselNavImageButton, defineCarouselButton, defineCarouselAutoplayButton, defineCarouselNavContainer, defineCarouselSlider, defineCarouselViewport } from "./elements/carousel.js";
 export type { CarouselIndexChangeData, CarouselIndexChangeSource } from "./elements/carousel.js";
 export type { CarouselAlign, CarouselAppearance, CarouselMotion, CarouselAnnouncerFunction, SharePointCarouselElement, SharePointCarouselCardElement, SharePointCarouselNavButtonElement, SharePointCarouselButtonElement, SharePointCarouselAutoplayButtonElement, SharePointCarouselSliderElement } from "./elements/carousel.js";
-export { defineOverflow, defineOverflowItem, defineOverflowDivider, type OverflowAxis, type OverflowState } from "./elements/overflow.js";
+export { defineOverflow, defineOverflowItem, defineOverflowDivider, type OverflowAxis, type OverflowDensity, type OverflowState } from "./elements/overflow.js";
 export { defineSwatchPicker, defineColorSwatch, defineImageSwatch, defineEmptySwatch, defineSwatchPickerRow } from "./elements/swatch-picker.js";
 export { createTableColumn, defineTable, defineTableHeader, defineTableBody, defineTableRow, defineTableHeaderCell, defineTableCell, defineTableCellLayout, defineTableCellActions, defineTableResizeHandle, defineTableSelectionCell, type CreateTableColumnOptions, type TableColumnDefinition, type TableColumnId } from "./elements/table.js";
 export { defineNav, defineNavItem, defineAppItem, defineAppItemStatic, defineHamburger, defineNavDrawer, defineNavDrawerBody, defineNavDrawerFooter, defineNavDrawerHeader, defineSplitNavItem, defineNavCategory, defineNavCategoryItem, defineNavSubItemGroup, defineNavSubItem, defineNavDivider, defineNavSectionHeader, type NavItemSelectData, type NavCategoryToggleData } from "./elements/nav.js";
@@ -43,11 +44,12 @@ export type { SpinButtonAppearance, SpinButtonSize, SpinButtonChangeData } from
 export { defineSlider } from "./elements/slider.js";
 export { defineDatePicker } from "./elements/date-picker.js";
 export { defineCombobox } from "./elements/combobox.js";
-export { defineRichTextEditor, type SharePointRichTextEditorElement } from "./elements/rich-text-editor.js";
+export { defineRichTextEditor, getRichTextEditorFieldOptions, type SharePointMultiLineField, type SharePointRichTextEditorElement, type RichTextEditorImageUploadResult, type RichTextEditorImageUploader, type RichTextEditorLink, type RichTextEditorLinkPicker } from "./elements/rich-text-editor.js";
 export { defineAlert, type AlertAppearance } from "./elements/alert.js";
 export { defineSkeleton, defineSkeletonItem, type SkeletonAnimation, type SkeletonAppearance, type SkeletonItemSize, type SkeletonShape } from "./elements/skeleton.js";
 export { DEFAULT_ACCENT, getSharePointUIStyleTokens, type SharePointUIAppearance, type SharePointUIBaseAppearance, type SharePointUIDensity, type SharePointUIStyleTokens } from "./appearance.js";
-export { applySharePointTheme, composeSharePointUIDesignThemes, getSharePointUIDesignTokens, type SharePointTheme, type FluentThemeTokens, type SharePointUIDesignTheme, type SharePointUIThemeOptions } from "./theme.js";
+export { applySharePointTheme, composeSharePointUIDesignThemes, getSharePointUIDesignTokens, getSharePointThemeColorPresets, type SharePointThemeColorPreset, type SharePointTheme, type FluentThemeTokens, type SharePointUIDesignTheme, type SharePointUIThemeOptions } from "./theme.js";
+export { getSharePointFieldAdapter, getSharePointFieldMetadataUrl, getSharePointListItemUrl, getSharePointLookupOptionsUrl, getSharePointNextPageUrl, serializeSharePointLookupValue, serializeSharePointChoiceValue, serializeSharePointFieldValue, serializeSharePointFieldValues, type SharePointFieldAdapter, type SharePointFieldControl, type SharePointFieldMetadata, type SharePointLookupId, type SharePointLookupUpdate, type SharePointLookupValue, type SharePointChoiceValue, type SharePointChoiceUpdate, type SharePointFieldValue, type SharePointFieldValues, type SharePointFieldUpdate, type SharePointFieldUpdateValue, type SharePointUrlValue } from "./sharepoint-fields.js";
 export { defineLink } from "./elements/link.js";
 export { defineDivider, type DividerAppearance } from "./elements/divider.js";
 export { defineAccordion, defineAccordionHeader, defineAccordionPanel, type AccordionItemValue, type AccordionNavigation, type AccordionToggleData } from "./elements/accordion.js";
@@ -57,7 +59,7 @@ export { defineAvatarGroupItem, defineAvatarGroupPopover } from "./elements/avat
 export { definePersona, type PersonaPresence, type PersonaSize } from "./elements/persona.js";
 export { defineVirtualList, type VirtualListDataSource, type VirtualListItemRenderer, type SharePointVirtualListElement } from "./elements/virtual-list.js";
 export { defineDataGrid, type DataGridCellRenderer, type DataGridCellsEditHandler, type DataGridRowHeightGetter, type DataGridSourceSelectionHandler, type SharePointDataGridElement } from "./elements/data-grid.js";
-export { clampDataGridRowHeight, fitDataGridColumnWidths, formatDataGridClipboard, getDataGridColumnSizing, getDataGridGroupKey, isDataGridRowSelected, parseDataGridClipboard, parseDataGridClipboardValue, setDataGridRowSelected, writeDataGridClipboardText, type DataGridCellEdit, type DataGridClipboardColumn, type DataGridColumn, type DataGridColumnSizingOption, type DataGridColumnSizingOptions, type DataGridColumnWidths, type DataGridDataSource, type DataGridDataSourceRow, type DataGridSelectionModel, type DataGridEditValue, type DataGridFocusMode, type DataGridGroup, type DataGridSelectionAppearance, type DataGridSort, type DataGridSortDirection, type DataGridSortState } from "./elements/data-grid-model.js";
+export { clampDataGridRowHeight, fitDataGridColumnWidths, formatDataGridClipboard, getDataGridColumnSizing, getDataGridGroupKey, isDataGridRowSelected, parseDataGridClipboard, parseDataGridClipboardValue, setDataGridRowSelected, writeDataGridClipboardText, type DataGridCellEdit, type DataGridCellEditError, type DataGridClipboardColumn, type DataGridColumn, type DataGridColumnSizingOption, type DataGridColumnSizingOptions, type DataGridColumnWidths, type DataGridDataSource, type DataGridDataSourceRow, type DataGridSelectionModel, type DataGridEditValue, type DataGridFocusMode, type DataGridGroup, type DataGridSelectionAppearance, type DataGridSort, type DataGridSortDirection, type DataGridSortState } from "./elements/data-grid-model.js";
 export { defineTree, type TreeCheckedItem, type TreeItemRenderer } from "./elements/tree.js";
 export { type TreeNode, type VisibleTreeNode } from "./elements/tree-model.js";
 export { defineInteractionTag, defineInteractionTagPrimary, defineInteractionTagSecondary, defineTag, defineTagGroup, type InteractionTagSelectData, type SharePointTagGroupElement, type TagAppearance, type TagGroupSelectData, type TagShape, type TagSize } from "./elements/tags.js";

package/dist/index.js

@@ -1,5 +1,6 @@
 export { defineSharePointUIElements } from "./elements.js";
 export { defineButton } from "./elements/button.js";
+export { defineSharePointField } from "./elements/sharepoint-fields.js";
 export { defineButtonGroup } from "./elements/button-group.js";
 export { defineCompoundButton, defineMenuButton, defineSplitButton, defineToggleButton } from "./elements/button-variants.js";
 export { defineInput } from "./elements/input.js";
@@ -37,11 +38,12 @@ export { defineSpinButton } from "./elements/spin-button.js";
 export { defineSlider } from "./elements/slider.js";
 export { defineDatePicker } from "./elements/date-picker.js";
 export { defineCombobox } from "./elements/combobox.js";
-export { defineRichTextEditor } from "./elements/rich-text-editor.js";
+export { defineRichTextEditor, getRichTextEditorFieldOptions } from "./elements/rich-text-editor.js";
 export { defineAlert } from "./elements/alert.js";
 export { defineSkeleton, defineSkeletonItem } from "./elements/skeleton.js";
 export { DEFAULT_ACCENT, getSharePointUIStyleTokens } from "./appearance.js";
-export { applySharePointTheme, composeSharePointUIDesignThemes, getSharePointUIDesignTokens } from "./theme.js";
+export { applySharePointTheme, composeSharePointUIDesignThemes, getSharePointUIDesignTokens, getSharePointThemeColorPresets } from "./theme.js";
+export { getSharePointFieldAdapter, getSharePointFieldMetadataUrl, getSharePointListItemUrl, getSharePointLookupOptionsUrl, getSharePointNextPageUrl, serializeSharePointLookupValue, serializeSharePointChoiceValue, serializeSharePointFieldValue, serializeSharePointFieldValues } from "./sharepoint-fields.js";
 export { defineLink } from "./elements/link.js";
 export { defineDivider } from "./elements/divider.js";
 export { defineAccordion, defineAccordionHeader, defineAccordionPanel } from "./elements/accordion.js";