@spfx-fast/sharepoint-ui 0.4.1 → 0.4.3

package/dist/react.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { createPortal } from "react-dom";
-import { observeAccessibleTextFromIdRefs, resolveAccessibleTextFromIdRefs } from "./elements/shared.js";
+import { getDirectionFromLanguage, observeAccessibleTextFromIdRefs, resolveAccessibleTextFromIdRefs } from "./elements/shared.js";
 import { defineButton } from "./elements/button.js";
 import { defineButtonGroup } from "./elements/button-group.js";
 import { defineCompoundButton, defineMenuButton, defineSplitButton, defineToggleButton } from "./elements/button-variants.js";
@@ -27,7 +27,9 @@ import { defineSpinButton } from "./elements/spin-button.js";
 import { defineSlider } from "./elements/slider.js";
 import { defineDatePicker } from "./elements/date-picker.js";
 import { defineCombobox } from "./elements/combobox.js";
-import { defineRichTextEditor } from "./elements/rich-text-editor.js";
+import { defineRichTextEditor, getRichTextEditorFieldOptions } from "./elements/rich-text-editor.js";
+export { getRichTextEditorFieldOptions } from "./elements/rich-text-editor.js";
+import { getSharePointFieldAdapter } from "./sharepoint-fields.js";
 import { defineAlert } from "./elements/alert.js";
 import { defineSkeleton, defineSkeletonItem } from "./elements/skeleton.js";
 import { defineLink } from "./elements/link.js";
@@ -70,7 +72,8 @@ import { defineOverflow, defineOverflowItem, defineOverflowDivider } from "./ele
 import { defineSwatchPicker as defineNativeSwatchPicker } from "./elements/swatch-picker.js";
 import { createTableColumn as createNativeTableColumn, defineTable as defineNativeTable } from "./elements/table.js";
 import { getSharePointUIStyleTokens } from "./appearance.js";
-import { getSharePointUIDesignTokens } from "./theme.js";
+import { getSharePointThemeColorPresets, getSharePointUIDesignTokens } from "./theme.js";
+export { getSharePointThemeColorPresets } from "./theme.js";
 export { createResizeObserverFromDocument, getRTLRootMargin, scrollToItemDynamic, scrollToItemStatic, useDynamicVirtualizerMeasure, useIntersectionObserver, useMeasureList, useResizeObserverRef_unstable, useStaticVirtualizerMeasure } from "./virtualizer-hooks.js";
 export { composeSharePointUIDesignThemes } from "./theme.js";
 const FieldContext = React.createContext(undefined);
@@ -105,9 +108,9 @@ export function useFieldControlProps_unstable(props, options = {}) {
         next.style = { ...next.style, "--spui-control-border": tokens.border, "--spui-input-border": tokens.border, "--spui-focus-ring": tokens.border };
     return next;
 }
-const defaultStrings = { loading: "Loading", close: "Close", dialogLabel: "Dialog", richTextEditorLabel: "Rich text", dismiss: "Dismiss", notifications: "Notifications", clear: "Clear", spinButtonIncrement: "Increment value", spinButtonDecrement: "Decrement value", remove: "Remove", noResults: "No results", selectedOptionsLabel: "Selected options", required: "Required", invalidValue: "Enter a valid value", moreInformation: "More information", people: "People", showMorePeople: "Show more people ({count})", showFewerPeople: "Show fewer people", navigationMenu: "Open navigation", navigationClose: "Close navigation", navigationExpand: "Expand navigation", navigationCollapse: "Collapse navigation", treeLabel: "Tree", treeToggleLabel: "Expand or collapse", treeEmptyMessage: "No items", splitButtonMenuLabel: "More options", navigationToggle: "Toggle navigation", splitNavItemActionLabel: "More actions", virtualizerLabel: "Items", dataGridLabel: "Data grid", dataGridFilterLabel: "Search rows", dataGridSelectRow: "Select row", dataGridSelectAll: "Select all rows", dataGridRowLabel: "row", dataGridLoadingLabel: "Loading…", dataGridEmptyLabel: "No items", dataGridSortPriority: "Sort priority {priority}", dataGridResizeLabel: "Resize column", dataGridReorderLabel: "Reorder column", dataGridEmptyGroupLabel: "No value", dataGridExpandGroupLabel: "Expand group", dataGridCollapseGroupLabel: "Collapse group", dataGridGroupCountLabel: "{count} items", dataGridEditHint: "Press Enter or F2 to edit", tableResizeHandle: "Resize column", dataGridSelectionCopied: "Selection copied.", dataGridCopyFailed: "Copy failed. {message}", dataGridPasteOne: "Pasted {count} cell.", dataGridPasteMany: "Pasted {count} cells.", dataGridPasteFailed: "Paste failed. {message}", dataGridColumnReordered: "{label}, {position} of {count}", toolbarLabel: "Toolbar", breadcrumbLabel: "Breadcrumb", menuBarLabel: "Menu bar", drawerExpand: "Expand drawer to full screen", drawerRestore: "Restore drawer size", drawerLabel: "Supplementary content", drawerNavigation: "Drawer navigation", tableResizeColumn: "Resize {column} column", ratingValue: "{value} of {max}", colorChoose: "Choose color", colorHex: "Hex color", colorHue: "Hue", colorArea: "Saturation and brightness", colorAreaValue: "{saturation}% saturation, {brightness}% brightness", colorSaturation: "Saturation", colorValue: "Brightness", colorFormat: "Color format", colorRgb: "RGB color values", colorRed: "Red", colorGreen: "Green", colorBlue: "Blue", colorOpacity: "Opacity", colorSwatches: "Color swatches", colorAdd: "Add color", colorSwatch: "Select {color}", colorInvalid: "Enter a 3 or 6 digit hex color, for example #336699.", richTextBold: "Bold", richTextItalic: "Italic", richTextUnderline: "Underline", richTextBulletList: "Bulleted list", richTextNumberList: "Numbered list", richTextLink: "Link", richTextToolbar: "Rich text formatting", richTextLinkPrompt: "Link URL", richTextRequired: "Enter some text.", richTextChooseImage: "Choose image", richTextUndo: "Undo", richTextRedo: "Redo", richTextInsertTable: "Insert table", richTextInsertImage: "Insert image", richTextInsertRowAbove: "Insert row above", richTextInsertRowBelow: "Insert row below", richTextInsertColumnBefore: "Insert column before", richTextInsertColumnAfter: "Insert column after", richTextDeleteRow: "Delete row", richTextDeleteColumn: "Delete column", richTextDeleteTable: "Delete table", fileUploadBrowse: "Browse files", fileUploadDrop: "Drag files here or browse to select", fileUploadRemove: "Remove", fileUploadSelected: "Selected files", fileUploadRequired: "Select at least one file.", fileUploadTypeError: "The selected file type is not accepted.", fileUploadSizeError: "The selected file exceeds the allowed size.", fileUploadLimitError: "The maximum number of files has been reached.", carouselDescription: "Carousel", carouselPrevious: "Previous slide", carouselNext: "Next slide", carouselSlide: "Slide {index} of {count}", carouselRoleDescription: "carousel", carouselSlides: "Carousel slides", carouselNavigation: "Slide navigation", carouselPlay: "Play", carouselPause: "Pause", teachingPopoverLabel: "Guided steps", teachingPopoverDismiss: "Dismiss", teachingPopoverPrevious: "Previous step", teachingPopoverNext: "Next step", teachingPopoverFinish: "Finish tour", teachingPopoverSteps: "Tour steps", teachingPopoverPageCount: "{current} of {total}", teachingPopoverPageLabel: "Step {current} of {total}", overflowDescription: "Overflow actions", overflowMenuLabel: "More actions ({count})" };
+const defaultStrings = { loading: "Loading", close: "Close", dialogLabel: "Dialog", richTextEditorLabel: "Rich text", dismiss: "Dismiss", notifications: "Notifications", clear: "Clear", spinButtonIncrement: "Increment value", spinButtonDecrement: "Decrement value", remove: "Remove", noResults: "No results", selectedOptionsLabel: "Selected options", required: "Required", invalidValue: "Enter a valid value", moreInformation: "More information", people: "People", presenceAvailable: "Available", presenceBusy: "Busy", presenceDoNotDisturb: "Do not disturb", presenceAway: "Away", presenceOffline: "Offline", presenceUnknown: "Presence unknown", presenceOutOfOffice: "Out of office", presenceBlocked: "Blocked", presenceOutOfOfficeLabel: "{status}, out of office", showMorePeople: "Show more people ({count})", showFewerPeople: "Show fewer people", navigationMenu: "Open navigation", navigationClose: "Close navigation", navigationExpand: "Expand navigation", navigationCollapse: "Collapse navigation", treeLabel: "Tree", treeToggleLabel: "Expand or collapse", treeEmptyMessage: "No items", splitButtonMenuLabel: "More options", navigationToggle: "Toggle navigation", splitNavItemActionLabel: "More actions", virtualizerLabel: "Items", dataGridLabel: "Data grid", dataGridFilterLabel: "Search rows", dataGridSelectRow: "Select row", dataGridSelectAll: "Select all rows", dataGridRowLabel: "row", dataGridLoadingLabel: "Loading…", dataGridEmptyLabel: "No items", dataGridSortPriority: "Sort priority {priority}", dataGridResizeLabel: "Resize column", dataGridReorderLabel: "Reorder column", dataGridReorderHint: "Reorder {column}; use Alt+Shift+Arrow keys", dataGridLoadError: "Data could not be loaded.", dataGridEditError: "The value could not be saved.", dataGridEmptyGroupLabel: "No value", dataGridExpandGroupLabel: "Expand group", dataGridCollapseGroupLabel: "Collapse group", dataGridGroupCountLabel: "{count} items", dataGridEditHint: "Press Enter or F2 to edit", tableResizeHandle: "Resize column", dataGridSelectionCopied: "Selection copied.", dataGridCopyFailed: "Copy failed.", dataGridPasteOne: "Pasted {count} cell.", dataGridPasteMany: "Pasted {count} cells.", dataGridPasteFailed: "Paste failed.", dataGridColumnReordered: "{label}, {position} of {count}", toolbarLabel: "Toolbar", breadcrumbLabel: "Breadcrumb", menuBarLabel: "Menu bar", drawerExpand: "Expand drawer to full screen", drawerRestore: "Restore drawer size", drawerLabel: "Supplementary content", drawerNavigation: "Drawer navigation", tableResizeColumn: "Resize {column} column", ratingValue: "{value} of {max}", colorChoose: "Choose color", colorHex: "Hex color", colorHue: "Hue", colorArea: "Saturation and brightness", colorAreaValue: "{saturation}% saturation, {brightness}% brightness", colorSaturation: "Saturation", colorValue: "Brightness", colorFormat: "Color format", colorRgb: "RGB color values", colorRed: "Red", colorGreen: "Green", colorBlue: "Blue", colorOpacity: "Opacity", colorSwatches: "Color swatches", colorAdd: "Add color", colorSwatch: "Select {color}", colorInvalid: "Enter a 3 or 6 digit hex color, for example #336699.", richTextBold: "Bold", richTextTextColor: "Text color", richTextHighlightColor: "Highlight color", richTextCustomColor: "Custom color", richTextThemeAccent: "SharePoint theme accent", richTextFontFamily: "Font family", richTextFontSize: "Font size", richTextItalic: "Italic", richTextUnderline: "Underline", richTextStrike: "Strikethrough", richTextClearFormatting: "Clear formatting", richTextFormatBlock: "Text style", richTextParagraph: "Paragraph", richTextHeading1: "Heading 1", richTextHeading2: "Heading 2", richTextHeading3: "Heading 3", richTextBlockquote: "Quote", richTextPreformatted: "Preformatted", richTextBulletList: "Bulleted list", richTextNumberList: "Numbered list", richTextLink: "Link", richTextToolbar: "Rich text formatting", richTextLinkPrompt: "Link URL", richTextRequired: "Enter some text.", richTextChooseImage: "Choose image", richTextUndo: "Undo", richTextRedo: "Redo", richTextInsertTable: "Insert table", richTextInsertImage: "Insert image", richTextInsertRowAbove: "Insert row above", richTextInsertRowBelow: "Insert row below", richTextInsertColumnBefore: "Insert column before", richTextInsertColumnAfter: "Insert column after", richTextDeleteRow: "Delete row", richTextDeleteColumn: "Delete column", richTextDeleteTable: "Delete table", fileUploadBrowse: "Browse files", fileUploadDrop: "Drag files here or browse to select", fileUploadRemove: "Remove", fileUploadSelected: "Selected files", fileUploadRequired: "Select at least one file.", fileUploadTypeError: "The selected file type is not accepted.", fileUploadSizeError: "The selected file exceeds the allowed size.", fileUploadLimitError: "The maximum number of files has been reached.", carouselDescription: "Carousel", carouselPrevious: "Previous slide", carouselNext: "Next slide", carouselSlide: "Slide {index} of {count}", carouselRoleDescription: "carousel", carouselSlides: "Carousel slides", carouselNavigation: "Slide navigation", carouselPlay: "Play", carouselPause: "Pause", teachingPopoverLabel: "Guided steps", teachingPopoverDismiss: "Dismiss", teachingPopoverPrevious: "Previous step", teachingPopoverNext: "Next step", teachingPopoverFinish: "Finish tour", teachingPopoverSteps: "Tour steps", teachingPopoverPageCount: "{current} of {total}", teachingPopoverPageLabel: "Step {current} of {total}", overflowDescription: "Overflow actions", overflowMenuLabel: "More actions ({count})" };
 const defaultHostStyle = Object.freeze({ "--spui-font-family": '"Segoe UI", sans-serif', "--spui-color-scheme": "light", colorScheme: "light" });
-const UIContext = React.createContext({ appearance: "fluent", baseAppearance: "fluent", density: "comfortable", hasThemeValues: false, styleTokens: getSharePointUIStyleTokens(), fluentTokenStyles: {}, hostStyle: defaultHostStyle, providesCssInheritance: false, strings: defaultStrings });
+const UIContext = React.createContext({ dirIsExplicit: false, appearance: "fluent", baseAppearance: "fluent", density: "comfortable", hasThemeValues: false, styleTokens: getSharePointUIStyleTokens(), fluentTokenStyles: {}, hostStyle: defaultHostStyle, providesCssInheritance: false, strings: defaultStrings });
 const AvatarGroupSizeContext = React.createContext(32);
 const AvatarGroupContext = React.createContext(undefined);
 const BreadcrumbSizeContext = React.createContext("medium");
@@ -138,7 +141,9 @@ function hasDesignThemeValues(theme) {
 function useHostProps(props) {
     const context = React.useContext(UIContext);
     const lang = context.lang || (typeof document === "undefined" ? undefined : document.documentElement.lang || undefined);
-    const dir = context.dir || (typeof document === "undefined" ? undefined : document.documentElement.dir || undefined);
+    const documentDir = typeof document === "undefined" ? undefined : document.documentElement.dir || undefined;
+    const localLang = typeof props.lang === "string" ? props.lang : undefined;
+    const dir = props.dir ?? (context.dirIsExplicit ? context.dir : localLang ? getDirectionFromLanguage(localLang) ?? context.dir ?? documentDir : context.dir ?? documentDir ?? getDirectionFromLanguage(lang));
     const style = context.providesCssInheritance ? props.style : props.style ? { ...context.hostStyle, ...props.style } : context.hostStyle;
     const className = props.className;
     return { ...props, className, "data-spui-appearance": props["data-spui-appearance"] ?? context.appearance, "data-spui-base-appearance": props["data-spui-base-appearance"] ?? context.baseAppearance, style, ...(props.lang === undefined && lang ? { lang } : {}), ...(props.dir === undefined && dir ? { dir } : {}) };
@@ -235,12 +240,25 @@ const nativeEventBindings = [
         ["transitionend", "onTransitionEnd", false, "transition"], ["transitionend", "onTransitionEndCapture", true, "transition"],
     ].map(([eventName, prop, capture, kind]) => ({ eventName, prop, capture, kind })),
 ];
+const nativeEventBindingsByProp = new Map();
+const nativeEventBindingOrder = new Map(nativeEventBindings.map((binding, index) => [binding, index]));
+for (const binding of nativeEventBindings) {
+    const bindings = nativeEventBindingsByProp.get(binding.prop);
+    if (bindings)
+        bindings.push(binding);
+    else
+        nativeEventBindingsByProp.set(binding.prop, [binding]);
+}
 const nativeEventPropNames = new Set(nativeEventBindings.map(binding => binding.prop));
 function withoutNativeControlEventProps(props) {
-    const hostProps = { ...props };
-    for (const prop of nativeEventPropNames)
+    let hostProps;
+    for (const prop in props) {
+        if (!Object.prototype.hasOwnProperty.call(props, prop) || !nativeEventPropNames.has(prop))
+            continue;
+        hostProps ??= { ...props };
         delete hostProps[prop];
-    return hostProps;
+    }
+    return hostProps ?? props;
 }
 function nativeControlHostProps(props) {
     return useCustomElementProps(withoutNativeControlEventProps(props));
@@ -249,7 +267,12 @@ function useNativeControlEvents(ref, selector, onClick, onClickCapture, events,
     const handlers = { ...events, onClick, onClickCapture };
     const handlersRef = React.useRef(handlers);
     React.useLayoutEffect(() => { handlersRef.current = handlers; });
-    const activeBindings = nativeEventBindings.filter(binding => typeof handlers[binding.prop] === "function");
+    const activeBindings = [];
+    for (const prop of Object.keys(handlers)) {
+        if (typeof handlers[prop] === "function")
+            activeBindings.push(...(nativeEventBindingsByProp.get(prop) ?? []));
+    }
+    activeBindings.sort((a, b) => nativeEventBindingOrder.get(a) - nativeEventBindingOrder.get(b));
     const subscriptionKey = activeBindings.map(binding => binding.eventName + ":" + binding.prop + ":" + (binding.capture ? 1 : 0)).join("|");
     const hasMouseTransitions = typeof handlers.onMouseEnter === "function" || typeof handlers.onMouseLeave === "function";
     const hasPointerTransitions = typeof handlers.onPointerEnter === "function" || typeof handlers.onPointerLeave === "function";
@@ -499,6 +522,10 @@ function useNativeMotionPresence(ref, visible, enabled, animationRoot = ref, ref
 }
 export function SharePointUIProvider({ children, lang, dir, appearance, baseAppearance, density, theme, tokens, fluentTokens, strings }) {
     const parent = React.useContext(UIContext);
+    const resolvedLang = lang ?? parent.lang ?? (typeof document === "undefined" ? undefined : document.documentElement.lang || undefined);
+    const documentDir = typeof document === "undefined" ? undefined : document.documentElement.dir || undefined;
+    const resolvedDir = dir ?? (parent.dirIsExplicit ? parent.dir : lang !== undefined ? getDirectionFromLanguage(lang) ?? parent.dir ?? documentDir : parent.dir ?? documentDir ?? getDirectionFromLanguage(resolvedLang));
+    const dirIsExplicit = dir !== undefined || parent.dirIsExplicit;
     const mergedTheme = { ...parent.theme, ...theme, palette: { ...parent.theme?.palette, ...theme?.palette }, fluentTokens: { ...parent.theme?.fluentTokens, ...theme?.fluentTokens }, colors: { ...parent.theme?.colors, ...theme?.colors }, typography: { ...parent.theme?.typography, ...theme?.typography }, spacing: { ...parent.theme?.spacing, ...theme?.spacing }, shape: { ...parent.theme?.shape, ...theme?.shape }, elevation: { ...parent.theme?.elevation, ...theme?.elevation }, materials: { ...parent.theme?.materials, ...theme?.materials }, motion: { ...parent.theme?.motion, ...theme?.motion }, layers: { ...parent.theme?.layers, ...theme?.layers }, customProperties: { ...parent.theme?.customProperties, ...theme?.customProperties } };
     const mergedTokens = { ...parent.tokens, ...tokens };
     const mergedFluentTokens = { ...parent.fluentTokens, ...fluentTokens };
@@ -510,8 +537,8 @@ export function SharePointUIProvider({ children, lang, dir, appearance, baseAppe
     const hasThemeValues = hasDesignThemeValues(mergedTheme);
     const inheritsDefaultTokens = resolvedAppearance === "fluent" && resolvedBaseAppearance === "fluent" && resolvedDensity === "comfortable" && !hasThemeValues && !Object.keys(mergedTokens).length && !Object.keys(mergedFluentTokens).length;
     const hostStyle = inheritsDefaultTokens ? defaultHostStyle : Object.freeze({ ...fluentTokenStyles, ...styleTokens, colorScheme: styleTokens["--spui-color-scheme"] });
-    const value = { lang: lang ?? parent.lang, dir: dir ?? parent.dir, appearance: resolvedAppearance, baseAppearance: resolvedBaseAppearance, density: resolvedDensity, theme: mergedTheme, hasThemeValues, tokens: mergedTokens, fluentTokens: mergedFluentTokens, styleTokens, fluentTokenStyles, hostStyle, providesCssInheritance: true, strings: { ...parent.strings, ...strings } };
-    return _jsx(UIContext.Provider, { value: value, children: _jsx("div", { "data-spui-provider": "", "data-spui-appearance": resolvedAppearance, "data-spui-base-appearance": resolvedBaseAppearance, lang: lang ?? parent.lang, dir: dir ?? parent.dir, style: { ...hostStyle, display: "contents" }, children: children }) });
+    const value = { lang: resolvedLang, dir: resolvedDir, dirIsExplicit, appearance: resolvedAppearance, baseAppearance: resolvedBaseAppearance, density: resolvedDensity, theme: mergedTheme, hasThemeValues, tokens: mergedTokens, fluentTokens: mergedFluentTokens, styleTokens, fluentTokenStyles, hostStyle, providesCssInheritance: true, strings: { ...parent.strings, ...strings } };
+    return _jsx(UIContext.Provider, { value: value, children: _jsx("div", { "data-spui-provider": "", "data-spui-appearance": resolvedAppearance, "data-spui-base-appearance": resolvedBaseAppearance, lang: resolvedLang, dir: resolvedDir, style: { ...hostStyle, display: "contents" }, children: children }) });
 }
 export const Text = /* @__PURE__ */ React.forwardRef(function Text({ as = "span", size = 300, weight, font = "base", align = "start", italic = false, underline = false, strikethrough = false, truncate = false, wrap = true, block = false, children, style, ...props }, forwardedRef) {
     const defaultBold = as === "strong" || as === "b";
@@ -836,7 +863,7 @@ export function useOverflowMenu(id) {
     }, [registerOverflowMenu, id]);
     return { ref, overflowCount, isOverflowing: hasOverflow };
 }
-export function Overflow({ children, label, minimumVisible = 0, overflowDirection = "end", overflowAxis = "horizontal", hasHiddenItems = false, overflowContent, padding = 10, onOverflowChange, onOverflowItemSelect, ...props }) {
+export function Overflow({ children, label, minimumVisible = 0, overflowDirection = "end", overflowAxis = "horizontal", density = "comfortable", hasHiddenItems = false, overflowContent, padding = 10, onOverflowChange, onOverflowItemSelect, ...props }) {
     const ref = React.useRef(null);
     const [overflowIds, setOverflowIds] = React.useState([]);
     const [overflowState, setOverflowState] = React.useState(emptyOverflowContext);
@@ -941,7 +968,7 @@ export function Overflow({ children, label, minimumVisible = 0, overflowDirectio
     });
     const trigger = React.createElement(Button, { appearance: "subtle", size: "small", iconOnly: true, "aria-label": menuLabel }, React.createElement("span", { "aria-hidden": true }, "⋯"));
     const menu = React.createElement(Menu, { label: label || strings.overflowDescription, trigger, onSelect: value => onOverflowItemSelect?.(value) }, ...menuItems, overflowContent);
-    const host = React.createElement("spui-overflow", useCustomElementProps({ ...props, ref, "aria-label": label || strings.overflowDescription, "minimum-visible": minimumVisible, "overflow-direction": overflowDirection, "overflow-axis": overflowAxis, "has-hidden-items": hasHiddenItems || undefined, padding }), children, React.createElement("div", { slot: "overflow-trigger", hidden: overflowIds.length === 0 && !hasHiddenItems }, menu));
+    const host = React.createElement("spui-overflow", useCustomElementProps({ ...props, ref, "aria-label": label || strings.overflowDescription, "minimum-visible": minimumVisible, "overflow-direction": overflowDirection, "overflow-axis": overflowAxis, density, "has-hidden-items": hasHiddenItems || undefined, padding }), children, React.createElement("div", { slot: "overflow-trigger", hidden: overflowIds.length === 0 && !hasHiddenItems }, menu));
     return React.createElement(OverflowProvider, { value: contextValue }, host);
 }
 export const Card = /* @__PURE__ */ React.forwardRef(function Card({ children, appearance = "filled", orientation = "vertical", size = "medium", focusMode, selected, defaultSelected, disabled = false, selectionLabel, checkbox, floatingAction, onSelectionChange, ...props }, forwardedRef) {
@@ -1310,10 +1337,10 @@ export const Drawer = /* @__PURE__ */ React.forwardRef(function Drawer({ type =
 export function DrawerHeader({ children }) {
     return React.createElement(React.Fragment, null, children);
 }
-export function DrawerHeaderNavigation({ children, label, ...props }) {
+export const DrawerHeaderNavigation = /* @__PURE__ */ React.forwardRef(function DrawerHeaderNavigation({ children, label, ...props }, forwardedRef) {
     const context = React.useContext(UIContext);
-    return React.createElement("nav", useHostProps({ ...props, slot: "header-navigation", "aria-label": props["aria-label"] ?? label ?? context.strings.drawerNavigation ?? "Drawer navigation", style: { display: "flex", alignItems: "center", gap: 8, ...props.style } }), children);
-}
+    return React.createElement("nav", useHostProps({ ...props, ref: forwardedRef, slot: "header-navigation", "aria-label": props["aria-label"] ?? label ?? context.strings.drawerNavigation ?? "Drawer navigation", style: { display: "flex", alignItems: "center", gap: 8, ...props.style } }), children);
+});
 export function DrawerHeaderTitle({ children, action, heading, ...props }) {
     const headingElement = heading;
     const title = React.isValidElement(headingElement)
@@ -1321,12 +1348,12 @@ export function DrawerHeaderTitle({ children, action, heading, ...props }) {
         : React.createElement("h2", { slot: "title", "data-spui-drawer-title": "", style: { margin: 0 }, ...(heading ?? {}) }, children);
     return React.createElement(React.Fragment, null, React.createElement("div", useHostProps({ ...props, slot: "title", "data-spui-drawer-title": "", style: { display: "flex", alignItems: "center", ...props.style } }), title), action == null ? null : React.createElement("span", { slot: "header-action", style: { display: "inline-flex", alignItems: "center" } }, action));
 }
-export function DrawerBody({ children, ...props }) {
-    return React.createElement("div", useHostProps({ ...props, style: { minWidth: 0, ...props.style } }), children);
-}
-export function DrawerFooter({ children, ...props }) {
-    return React.createElement("div", useHostProps({ ...props, slot: "actions", style: { display: "flex", alignItems: "center", justifyContent: "flex-end", flexWrap: "wrap", gap: 8, ...props.style } }), children);
-}
+export const DrawerBody = /* @__PURE__ */ React.forwardRef(function DrawerBody({ children, ...props }, forwardedRef) {
+    return React.createElement("div", useHostProps({ ...props, ref: forwardedRef, style: { minWidth: 0, ...props.style } }), children);
+});
+export const DrawerFooter = /* @__PURE__ */ React.forwardRef(function DrawerFooter({ children, ...props }, forwardedRef) {
+    return React.createElement("div", useHostProps({ ...props, ref: forwardedRef, slot: "actions", style: { display: "flex", alignItems: "center", justifyContent: "flex-end", flexWrap: "wrap", gap: 8, ...props.style } }), children);
+});
 export const InlineDrawer = /* @__PURE__ */ React.forwardRef(function InlineDrawer({ open = false, title, position = "start", size = "small", separator = false, unmountOnClose = true, surfaceMotion, actions, children, ...props }, forwardedRef) {
     const context = React.useContext(UIContext);
     ensureDefined(defineInlineDrawer);
@@ -1521,7 +1548,7 @@ export const DatePicker = /* @__PURE__ */ React.forwardRef(function DatePicker(i
     return React.createElement("spui-date-picker", nativeControlHostProps({ ...props, ref, label, min, max, name, placeholder, required, disabled, "read-only": readOnly, "calendar-label": calendarLabel ?? context.strings.datePickerCalendar, "previous-month-label": previousMonthLabel ?? context.strings.datePickerPreviousMonth, "next-month-label": nextMonthLabel ?? context.strings.datePickerNextMonth, "invalid-date-message": invalidDateMessage ?? context.strings.datePickerInvalid, "required-message": requiredMessage ?? context.strings.datePickerRequired }));
 });
 export const ComboBox = /* @__PURE__ */ React.forwardRef(function ComboBox(inputProps, forwardedRef) {
-    const { label, selectedLabel, value, defaultValue, selectedValue, selectedOptions, defaultSelectedOptions, multiselect = false, name, input, listbox, mountNode, placeholder, required, disabled, freeform, allowFreeform, noResults, clearable, clearIcon, expandIcon, defaultOpen, disableAutoFocus, inlinePopup, open, appearance, size, positioning, onValueChange, onOptionSelect, onSelectedOptionsChange, onOpenChange, onActiveOptionChange, children, ...props } = useFieldControlProps_unstable(inputProps, { supportsRequired: true, supportsSize: true });
+    const { label, selectedLabel, requiredMessage, value, defaultValue, selectedValue, selectedOptions, defaultSelectedOptions, multiselect = false, name, input, listbox, mountNode, placeholder, required, disabled, freeform, allowFreeform, noResults, clearable, clearIcon, expandIcon, defaultOpen, disableAutoFocus, inlinePopup, open, appearance, size, positioning, onValueChange, onOptionSelect, onSelectedOptionsChange, onOpenChange, onActiveOptionChange, children, ...props } = useFieldControlProps_unstable(inputProps, { supportsRequired: true, supportsSize: true });
     const ref = React.useRef(null);
     useExposeHostRef(ref, forwardedRef);
     ;
@@ -1609,7 +1636,7 @@ export const ComboBox = /* @__PURE__ */ React.forwardRef(function ComboBox(input
     const expandIconSlot = expandIcon == null ? null : React.isValidElement(expandIcon)
         ? React.cloneElement(expandIcon, { slot: "expand-icon" })
         : React.createElement("span", { slot: "expand-icon", "aria-hidden": true }, expandIcon);
-    return React.createElement(CompoundComboboxContext.Provider, { value: { ...provider, mode: "combobox", value: value ?? provider?.value, selectedOptions: selectedOptions ?? provider?.selectedOptions, multiselect } }, React.createElement(React.Fragment, null, React.createElement("spui-combobox", nativeControlHostProps({ ...props, ref, label, "selected-label": selectedLabel ?? context.strings.selectedOptionsLabel, value: value ?? defaultValue ?? provider?.value, "selected-value": selectedValue, multiselect: multiselect || undefined, name, placeholder, required, disabled, "allow-freeform": freeform ?? allowFreeform, "no-results": noResults ?? context.strings.noResults, clearable, "default-open": open === undefined && provider?.open === undefined ? defaultOpen : undefined, open: open ?? provider?.open ? "" : undefined, "disable-auto-focus": disableAutoFocus, appearance: appearance ?? provider?.appearance, size: size ?? provider?.size, positioning: typeof positioning === "string" ? positioning : positioning?.position ? `${positioning.position}${positioning.align && positioning.align !== "center" ? `-${positioning.align}` : ""}` : undefined, "inline-popup": inlinePopup }), children, inputSlot, clearIconSlot, expandIconSlot, listboxSlot), listboxPortal));
+    return React.createElement(CompoundComboboxContext.Provider, { value: { ...provider, mode: "combobox", value: value ?? provider?.value, selectedOptions: selectedOptions ?? provider?.selectedOptions, multiselect } }, React.createElement(React.Fragment, null, React.createElement("spui-combobox", nativeControlHostProps({ ...props, ref, label, "selected-label": selectedLabel ?? context.strings.selectedOptionsLabel, "required-message": requiredMessage ?? context.strings.required, value: value ?? defaultValue ?? provider?.value, "selected-value": selectedValue, multiselect: multiselect || undefined, name, placeholder, required, disabled, "allow-freeform": freeform ?? allowFreeform, "no-results": noResults ?? context.strings.noResults, clearable, "default-open": open === undefined && provider?.open === undefined ? defaultOpen : undefined, open: open ?? provider?.open ? "" : undefined, "disable-auto-focus": disableAutoFocus, appearance: appearance ?? provider?.appearance, size: size ?? provider?.size, positioning: typeof positioning === "string" ? positioning : positioning?.position ? `${positioning.position}${positioning.align && positioning.align !== "center" ? `-${positioning.align}` : ""}` : undefined, "inline-popup": inlinePopup }), children, inputSlot, clearIconSlot, expandIconSlot, listboxSlot), listboxPortal));
 });
 export const ComboOption = /* @__PURE__ */ React.forwardRef(function ComboOption({ value, label, disabled, children }, forwardedRef) {
     ensureDefined(defineCombobox);
@@ -1801,8 +1828,14 @@ export const OptionGroup = /* @__PURE__ */ React.forwardRef(function OptionGroup
         return React.createElement("spui-combobox-option-group", useCustomElementProps({ ref: forwardedRef, ...props, label }), children);
     return _jsxs("div", { ...props, ref: forwardedRef, role: "group", "aria-label": label, children: [label ? _jsx("div", { children: label }) : null, children] });
 });
+const richTextEditorModeRank = { plain: 0, restricted: 1, rich: 2, html: 3 };
 export const RichTextEditor = /* @__PURE__ */ React.forwardRef(function RichTextEditor(inputProps, forwardedRef) {
-    const { label, editorLabel, value, defaultValue, placeholder, disabled, readOnly, required, name, onValueChange, onImageUpload, ...props } = useFieldControlProps_unstable(inputProps, { supportsRequired: true });
+    const { label, editorLabel, value, defaultValue, placeholder, field, contentMode, allowHyperlink, disabled, readOnly, required, name, onValueChange, onImageUpload, onImageUploadError, linkPicker, onLinkPickerError, ...props } = useFieldControlProps_unstable(inputProps, { supportsRequired: true });
+    const fieldOptions = field ? getRichTextEditorFieldOptions(field) : undefined;
+    const effectiveContentMode = fieldOptions && contentMode
+        ? richTextEditorModeRank[contentMode] < richTextEditorModeRank[fieldOptions.contentMode] ? contentMode : fieldOptions.contentMode
+        : contentMode ?? fieldOptions?.contentMode;
+    const effectiveAllowHyperlink = fieldOptions?.allowHyperlink === false ? false : allowHyperlink ?? fieldOptions?.allowHyperlink;
     const ref = React.useRef(null);
     useExposeHostRef(ref, forwardedRef);
     ;
@@ -1812,10 +1845,18 @@ export const RichTextEditor = /* @__PURE__ */ React.forwardRef(function RichText
     React.useEffect(() => { const element = ref.current; if (element)
         element.uploadImage = onImageUpload; return () => { if (element)
         delete element.uploadImage; }; }, [onImageUpload]);
+    React.useEffect(() => { const element = ref.current; if (element)
+        element.linkPicker = linkPicker; return () => { if (element)
+        delete element.linkPicker; }; }, [linkPicker]);
     useSpuiEvent(ref, "spui-input", value !== undefined || onValueChange ? detail => {
         onValueChange?.(String(detail.value ?? ""));
-        if (value !== undefined && ref.current)
-            ref.current.value = value;
+    } : undefined);
+    useSpuiEvent(ref, "spui-image-upload-error", onImageUploadError ? detail => {
+        const data = detail;
+        onImageUploadError({ fileName: String(data.fileName ?? ""), error: data.error });
+    } : undefined);
+    useSpuiEvent(ref, "spui-link-picker-error", onLinkPickerError ? detail => {
+        onLinkPickerError(detail.error);
     } : undefined);
     React.useLayoutEffect(() => {
         const element = ref.current;
@@ -1831,7 +1872,7 @@ export const RichTextEditor = /* @__PURE__ */ React.forwardRef(function RichText
                 element.value = defaultValue;
         }
     }, [value, defaultValue]);
-    return React.createElement("spui-rich-text-editor", nativeControlHostProps({ ...props, ref, label, placeholder, disabled, "read-only": readOnly, required, name, "required-message": strings.richTextRequired, "editor-label": editorLabel ?? strings.richTextEditorLabel, "bold-label": strings.richTextBold, "italic-label": strings.richTextItalic, "underline-label": strings.richTextUnderline, "bullet-list-label": strings.richTextBulletList, "number-list-label": strings.richTextNumberList, "link-label": strings.richTextLink, "undo-label": strings.richTextUndo, "redo-label": strings.richTextRedo, "insert-table-label": strings.richTextInsertTable, "insert-image-label": strings.richTextInsertImage, "image-input-label": strings.richTextChooseImage, "insert-row-above-label": strings.richTextInsertRowAbove, "insert-row-below-label": strings.richTextInsertRowBelow, "insert-column-before-label": strings.richTextInsertColumnBefore, "insert-column-after-label": strings.richTextInsertColumnAfter, "delete-row-label": strings.richTextDeleteRow, "delete-column-label": strings.richTextDeleteColumn, "delete-table-label": strings.richTextDeleteTable, "toolbar-label": strings.richTextToolbar, "link-prompt": strings.richTextLinkPrompt }));
+    return React.createElement("spui-rich-text-editor", nativeControlHostProps({ ...props, ref, label, placeholder, "content-mode": effectiveContentMode, "allow-hyperlink": effectiveAllowHyperlink === false ? "false" : undefined, disabled, "read-only": readOnly, required, name, "required-message": strings.richTextRequired, "editor-label": editorLabel ?? strings.richTextEditorLabel, "bold-label": strings.richTextBold, "italic-label": strings.richTextItalic, "underline-label": strings.richTextUnderline, "strike-label": strings.richTextStrike ?? "Strikethrough", "subscript-label": strings.richTextSubscript ?? "Subscript", "superscript-label": strings.richTextSuperscript ?? "Superscript", "align-left-label": strings.richTextAlignLeft ?? "Align left", "align-center-label": strings.richTextAlignCenter ?? "Align center", "align-right-label": strings.richTextAlignRight ?? "Align right", "align-justify-label": strings.richTextAlignJustify ?? "Justify text", "clear-formatting-label": strings.richTextClearFormatting ?? "Clear formatting", "format-block-label": strings.richTextFormatBlock ?? "Text style", "font-family-label": strings.richTextFontFamily ?? "Font family", "font-size-label": strings.richTextFontSize ?? "Font size", "paragraph-label": strings.richTextParagraph ?? "Paragraph", "heading-1-label": strings.richTextHeading1 ?? "Heading 1", "heading-2-label": strings.richTextHeading2 ?? "Heading 2", "heading-3-label": strings.richTextHeading3 ?? "Heading 3", "blockquote-label": strings.richTextBlockquote ?? "Quote", "preformatted-label": strings.richTextPreformatted ?? "Preformatted", "bullet-list-label": strings.richTextBulletList, "number-list-label": strings.richTextNumberList, "link-label": strings.richTextLink, "text-color-label": strings.richTextTextColor ?? "Text color", "highlight-color-label": strings.richTextHighlightColor ?? "Highlight color", "custom-color-label": strings.richTextCustomColor ?? "Custom color", "theme-accent-label": strings.richTextThemeAccent ?? "SharePoint theme accent", "color-swatch-label": strings.colorSwatch, "undo-label": strings.richTextUndo, "redo-label": strings.richTextRedo, "insert-table-label": strings.richTextInsertTable, "insert-image-label": strings.richTextInsertImage, "image-input-label": strings.richTextChooseImage, "insert-row-above-label": strings.richTextInsertRowAbove, "insert-row-below-label": strings.richTextInsertRowBelow, "insert-column-before-label": strings.richTextInsertColumnBefore, "insert-column-after-label": strings.richTextInsertColumnAfter, "delete-row-label": strings.richTextDeleteRow, "delete-column-label": strings.richTextDeleteColumn, "delete-table-label": strings.richTextDeleteTable, "toolbar-label": strings.richTextToolbar, "link-prompt": strings.richTextLinkPrompt, "link-dialog-label": strings.richTextLinkDialog ?? "Edit link", "link-text-label": strings.richTextLinkText ?? "Display text", "link-title-label": strings.richTextLinkTitle ?? "Title", "link-apply-label": strings.richTextLinkApply ?? "Apply link", "link-remove-label": strings.richTextLinkRemove ?? "Remove link", "link-cancel-label": strings.richTextLinkCancel ?? strings.close, "link-new-tab-label": strings.richTextLinkNewTab ?? "Open in new tab", "link-invalid-message": strings.richTextLinkInvalid ?? "Enter a valid HTTP, HTTPS, or mailto link.", "link-picker-label": strings.richTextLinkBrowse ?? "Browse SharePoint", "link-picker-loading-label": strings.richTextLinkBrowsing ?? "Opening picker…", "link-picker-error-message": strings.richTextLinkPickerError ?? "Unable to open the SharePoint link picker." }));
 });
 export const Badge = /* @__PURE__ */ React.forwardRef(function Badge({ children, icon, appearance = "filled", color = "brand", iconPosition = "before", shape = "circular", size = "medium", ...props }, forwardedRef) {
     ensureDefined(defineBadge);
@@ -1843,7 +1884,10 @@ export const CounterBadge = /* @__PURE__ */ React.forwardRef(function CounterBad
 });
 export const PresenceBadge = /* @__PURE__ */ React.forwardRef(function PresenceBadge({ status = "available", outOfOffice = false, size = "medium", icon, ...props }, forwardedRef) {
     ensureDefined(definePresenceBadge);
-    return React.createElement("spui-presence-badge", useCustomElementProps({ ref: forwardedRef, ...props, status, "out-of-office": outOfOffice || undefined, size }), icon == null ? null : React.createElement("span", { slot: "icon", "aria-hidden": true }, icon));
+    const strings = React.useContext(UIContext).strings;
+    const statusLabel = strings[presenceStringKeys[status]] ?? status.replaceAll("-", " ");
+    const presenceLabel = outOfOffice && status !== "out-of-office" ? (strings.presenceOutOfOfficeLabel ?? "{status}, out of office").replace("{status}", statusLabel) : statusLabel;
+    return React.createElement("spui-presence-badge", useCustomElementProps({ ref: forwardedRef, ...props, status, "aria-label": props["aria-label"] ?? presenceLabel, "out-of-office": outOfOffice || undefined, size }), icon == null ? null : React.createElement("span", { slot: "icon", "aria-hidden": true }, icon));
 });
 export const Tag = /* @__PURE__ */ React.forwardRef(function Tag({ children, appearance, size, shape = "rounded", color, value, label, disabled = false, selected = false, dismissible = false, dismissLabel, onDismiss, media, icon, primaryText, secondaryText, dismissIcon, ...props }, forwardedRef) {
     const ref = React.useRef(null);
@@ -1897,7 +1941,7 @@ export const TagGroup = /* @__PURE__ */ React.forwardRef(function TagGroup({ chi
     }, [selectedValues]);
     return React.createElement("spui-tag-group", useCustomElementProps({ ...props, ref, role: props.role ?? "toolbar", orientation, label, appearance, size, disabled: disabled || undefined, dismissible: dismissible || undefined, "default-selected-values": defaultSelectedValues === undefined ? undefined : JSON.stringify(defaultSelectedValues), "aria-label": props["aria-label"] ?? label }), children);
 });
-export const TagPicker = /* @__PURE__ */ React.forwardRef(function TagPicker({ children, label, selectedLabel, selectedOptions, defaultSelectedOptions, selectedValues, defaultSelectedValues, inputValue, open, defaultOpen, positioning, disableAutoFocus = false, inline = false, noPopover = false, disabled, onOpenChange, onOptionSelect, onInputValueChange, onChange, ...props }, forwardedRef) {
+export const TagPicker = /* @__PURE__ */ React.forwardRef(function TagPicker({ children, label, selectedLabel, requiredMessage, selectedOptions, defaultSelectedOptions, selectedValues, defaultSelectedValues, inputValue, open, defaultOpen, positioning, disableAutoFocus = false, inline = false, noPopover = false, disabled, onOpenChange, onOptionSelect, onInputValueChange, onChange, ...props }, forwardedRef) {
     const ref = React.useRef(null);
     useExposeHostRef(ref, forwardedRef);
     ;
@@ -1937,7 +1981,7 @@ export const TagPicker = /* @__PURE__ */ React.forwardRef(function TagPicker({ c
     }, [selected, inputValue, open, defaultOpen]);
     React.useLayoutEffect(() => { const element = ref.current; if (element)
         element.positioning = positioning; }, [positioning]);
-    return React.createElement("spui-tag-picker", useCustomElementProps({ ...props, ref, label, disabled, "disable-auto-focus": disableAutoFocus || undefined, "selected-label": selectedLabel ?? strings.selectedOptionsLabel, "default-selected-options": defaultSelected === undefined ? undefined : JSON.stringify(defaultSelected), "input-value": inputValue, inline: inline || undefined, "no-popover": noPopover || undefined, "no-results": strings.noResults, "remove-label": strings.remove }), children);
+    return React.createElement("spui-tag-picker", useCustomElementProps({ ...props, ref, label, disabled, "disable-auto-focus": disableAutoFocus || undefined, "selected-label": selectedLabel ?? strings.selectedOptionsLabel, "required-message": requiredMessage ?? strings.required, "default-selected-options": defaultSelected === undefined ? undefined : JSON.stringify(defaultSelected), "input-value": inputValue, inline: inline || undefined, "no-popover": noPopover || undefined, "no-results": strings.noResults, "remove-label": strings.remove }), children);
 });
 export function TagPickerControl({ children, secondaryAction, expandIcon }) {
     return React.createElement(React.Fragment, null, children, secondaryAction == null ? null : React.createElement("span", { slot: "secondary-action" }, secondaryAction), expandIcon == null ? null : React.createElement("span", { slot: "expand-icon", "aria-hidden": true }, expandIcon));
@@ -1962,16 +2006,16 @@ export const TagPickerInput = /* @__PURE__ */ React.forwardRef(function TagPicke
 export function TagPickerList({ children }) {
     return React.createElement(React.Fragment, null, children);
 }
-export function TagPickerButton({ children, appearance = "outline", size = "medium", disabled = false, ...props }) {
-    return React.createElement("button", useCustomElementProps({ ...props, slot: "button", type: "button", "data-appearance": appearance, "data-size": size, disabled: disabled || undefined }), children);
-}
+export const TagPickerButton = /* @__PURE__ */ React.forwardRef(function TagPickerButton({ children, appearance = "outline", size = "medium", disabled = false, ...props }, forwardedRef) {
+    return React.createElement("button", useHostProps({ ...props, ref: forwardedRef, slot: "button", type: "button", "data-appearance": appearance, "data-size": size, disabled: disabled || undefined }), children);
+});
 export const TagPickerOption = /* @__PURE__ */ React.forwardRef(function TagPickerOption({ value, text, label, group, media, secondaryContent, disabled = false, children, ...props }, forwardedRef) {
     return React.createElement("spui-tag-picker-option", useCustomElementProps({ ref: forwardedRef, ...props, value, text, label, group, disabled: disabled || undefined }), media == null ? null : React.createElement("span", { slot: "media" }, media), React.createElement("span", { slot: "label" }, children), secondaryContent == null ? null : React.createElement("span", { slot: "secondary-content" }, secondaryContent));
 });
 export const TagPickerOptionGroup = /* @__PURE__ */ React.forwardRef(function TagPickerOptionGroup({ children, label, disabled = false }, forwardedRef) {
     return React.createElement("spui-tag-picker-option-group", useCustomElementProps({ ref: forwardedRef, label, disabled: disabled || undefined }), children);
 });
-export const Rating = /* @__PURE__ */ React.forwardRef(function Rating({ value, defaultValue = 0, max = 5, step = 1, size = "extra-large", color = "neutral", label, itemLabel, iconFilled, iconOutline, fullValueInput, halfValueInput, name, disabled = false, readOnly = false, required = false, onChange, ...props }, forwardedRef) {
+export const Rating = /* @__PURE__ */ React.forwardRef(function Rating({ value, defaultValue = 0, max = 5, step = 1, size = "extra-large", color = "neutral", label, requiredMessage, itemLabel, iconFilled, iconOutline, fullValueInput, halfValueInput, name, disabled = false, readOnly = false, required = false, onChange, ...props }, forwardedRef) {
     const ref = React.useRef(null);
     useExposeHostRef(ref, forwardedRef);
     ;
@@ -1995,7 +2039,7 @@ export const Rating = /* @__PURE__ */ React.forwardRef(function Rating({ value,
             ? React.cloneElement(slot, { slot: name, hidden: true, "aria-hidden": true, tabIndex: -1 })
             : React.createElement("input", { ...slot, slot: name, hidden: true, "aria-hidden": true, tabIndex: -1 });
     };
-    return React.createElement("spui-rating", useCustomElementProps({ ...props, ref, value, "default-value": defaultValue, max, step, size, color, label, name, disabled: disabled || undefined, readonly: readOnly || undefined, required: required || undefined, "item-label": strings.ratingValue }), iconOutline == null ? null : React.createElement("span", { slot: "icon-outline", hidden: true }, React.createElement(iconOutline, { "aria-hidden": true, focusable: "false" })), iconFilled == null ? null : React.createElement("span", { slot: "icon-filled", hidden: true }, React.createElement(iconFilled, { "aria-hidden": true, focusable: "false" })), inputSlot(fullValueInput, "full-value-input"), inputSlot(halfValueInput, "half-value-input"));
+    return React.createElement("spui-rating", useCustomElementProps({ ...props, ref, value, "default-value": defaultValue, max, step, size, color, label, name, disabled: disabled || undefined, readonly: readOnly || undefined, required: required || undefined, "required-message": requiredMessage ?? strings.required, "item-label": strings.ratingValue }), iconOutline == null ? null : React.createElement("span", { slot: "icon-outline", hidden: true }, React.createElement(iconOutline, { "aria-hidden": true, focusable: "false" })), iconFilled == null ? null : React.createElement("span", { slot: "icon-filled", hidden: true }, React.createElement(iconFilled, { "aria-hidden": true, focusable: "false" })), inputSlot(fullValueInput, "full-value-input"), inputSlot(halfValueInput, "half-value-input"));
 });
 export const RatingItem = /* @__PURE__ */ React.forwardRef(function RatingItem({ value = 1, selectedIcon, unselectedIcon, ...props }, forwardedRef) {
     ensureDefined(defineRatingItem);
@@ -2208,7 +2252,7 @@ export const BreadcrumbDivider = /* @__PURE__ */ React.forwardRef(function Bread
     ensureDefined(defineBreadcrumbDivider);
     return React.createElement("spui-breadcrumb-divider", useCustomElementProps({ ...props, ref: forwardedRef }), children);
 });
-export const Nav = /* @__PURE__ */ React.forwardRef(function Nav({ children, label = "Navigation", selectedValue, defaultSelectedValue, selectedCategoryValue, defaultSelectedCategoryValue, openCategories, defaultOpenCategories = [], open, defaultOpen, collapsed, defaultCollapsed, collapsible = false, multiple = true, density = "medium", openLabel, closeLabel, onItemSelect, onCategoryToggle, onNavItemSelect, onNavCategoryItemToggle, onOpenChange, onCollapsedChange, onClick, onClickCapture, onKeyDown, onKeyDownCapture, onKeyUp, onKeyUpCapture, onKeyPress, onKeyPressCapture, onFocus, onFocusCapture, onBlur, onBlurCapture, onAuxClick, onAuxClickCapture, onContextMenu, onContextMenuCapture, onDoubleClick, onDoubleClickCapture, onMouseDown, onMouseDownCapture, onMouseMove, onMouseMoveCapture, onMouseOut, onMouseOutCapture, onMouseOver, onMouseOverCapture, onMouseUp, onMouseUpCapture, onGotPointerCapture, onGotPointerCaptureCapture, onLostPointerCapture, onLostPointerCaptureCapture, onPointerCancel, onPointerCancelCapture, onPointerDown, onPointerDownCapture, onPointerMove, onPointerMoveCapture, onPointerOut, onPointerOutCapture, onPointerOver, onPointerOverCapture, onPointerUp, onPointerUpCapture, onMouseEnter, onMouseLeave, onPointerEnter, onPointerLeave, ...props }, forwardedRef) {
+export const Nav = /* @__PURE__ */ React.forwardRef(function Nav({ children, label = "Navigation", selectedValue, defaultSelectedValue, selectedCategoryValue, defaultSelectedCategoryValue, openCategories, defaultOpenCategories = [], open, defaultOpen, collapsed, defaultCollapsed, fullWidth = false, collapsible = false, multiple = true, density = "medium", openLabel, closeLabel, onItemSelect, onCategoryToggle, onNavItemSelect, onNavCategoryItemToggle, onOpenChange, onCollapsedChange, onClick, onClickCapture, onKeyDown, onKeyDownCapture, onKeyUp, onKeyUpCapture, onKeyPress, onKeyPressCapture, onFocus, onFocusCapture, onBlur, onBlurCapture, onAuxClick, onAuxClickCapture, onContextMenu, onContextMenuCapture, onDoubleClick, onDoubleClickCapture, onMouseDown, onMouseDownCapture, onMouseMove, onMouseMoveCapture, onMouseOut, onMouseOutCapture, onMouseOver, onMouseOverCapture, onMouseUp, onMouseUpCapture, onGotPointerCapture, onGotPointerCaptureCapture, onLostPointerCapture, onLostPointerCaptureCapture, onPointerCancel, onPointerCancelCapture, onPointerDown, onPointerDownCapture, onPointerMove, onPointerMoveCapture, onPointerOut, onPointerOutCapture, onPointerOver, onPointerOverCapture, onPointerUp, onPointerUpCapture, onMouseEnter, onMouseLeave, onPointerEnter, onPointerLeave, ...props }, forwardedRef) {
     const ref = React.useRef(null);
     useExposeHostRef(ref, forwardedRef);
     ;
@@ -2246,7 +2290,7 @@ export const Nav = /* @__PURE__ */ React.forwardRef(function Nav({ children, lab
             element.defaultCollapsed = defaultCollapsed;
         defaultsApplied.current = true;
     }, [selectedValue, defaultSelectedValue, selectedCategoryValue, defaultSelectedCategoryValue, openCategories, defaultOpenCategories, open, defaultOpen, collapsed, defaultCollapsed]);
-    return React.createElement("spui-nav", nativeControlHostProps({ ...props, ref, label, multiple: multiple ? "" : "false", density, collapsible: collapsible || undefined, "open-label": openLabel ?? strings.navigationMenu ?? "Open navigation", "close-label": closeLabel ?? strings.navigationClose ?? strings.close, "expand-label": strings.navigationExpand ?? "Expand navigation", "collapse-label": strings.navigationCollapse ?? "Collapse navigation" }), children);
+    return React.createElement("spui-nav", nativeControlHostProps({ ...props, ref, label, multiple: multiple ? "" : "false", density, "full-width": fullWidth || undefined, collapsible: collapsible || undefined, "open-label": openLabel ?? strings.navigationMenu ?? "Open navigation", "close-label": closeLabel ?? strings.navigationClose ?? strings.close, "expand-label": strings.navigationExpand ?? "Expand navigation", "collapse-label": strings.navigationCollapse ?? "Collapse navigation" }), children);
 });
 function renderNavAvatar(avatar) {
     return avatar ? React.cloneElement(avatar, { slot: "avatar", ...(avatar.type === Avatar ? { decorative: true } : {}) }) : null;
@@ -3087,6 +3131,7 @@ export function AvatarGroupPopover({ children, count, indicator, label, triggerL
     const context = React.useContext(UIContext);
     const size = React.useContext(AvatarGroupSizeContext);
     const itemCount = count ?? React.Children.count(children);
+    const resolvedLabel = label ?? context.strings.people ?? "More people";
     const triggerText = (triggerLabel ?? context.strings.showMorePeople ?? "Show more people ({count})").replace("{count}", String(itemCount));
     const showCount = indicator ?? (size < 24 ? "icon" : "count");
     const defaultTriggerContent = showCount === "icon"
@@ -3110,12 +3155,13 @@ export function AvatarGroupPopover({ children, count, indicator, label, triggerL
         : React.createElement("ul", { ...contentProps, role: contentProps.role ?? "list" }, React.createElement(AvatarGroupOverflowContext.Provider, { value: true }, listChildren));
     const surfaceElement = React.isValidElement(popoverSurface) ? popoverSurface : undefined;
     const surfaceProps = (surfaceElement ? surfaceElement.props : popoverSurface ?? {});
+    const surfaceLabel = surfaceProps["aria-label"] ?? resolvedLabel;
     const surfaceContent = surfaceElement
-        ? React.cloneElement(surfaceElement, { "aria-label": surfaceProps["aria-label"] ?? "Overflow", tabIndex: surfaceProps.tabIndex ?? 0, children: listContent })
-        : React.createElement(PopoverSurface, { ...surfaceProps, "aria-label": surfaceProps["aria-label"] ?? "Overflow", tabIndex: surfaceProps.tabIndex ?? 0 }, listContent);
+        ? React.cloneElement(surfaceElement, { "aria-label": surfaceLabel, tabIndex: surfaceProps.tabIndex ?? 0, children: listContent })
+        : React.createElement(PopoverSurface, { ...surfaceProps, "aria-label": surfaceLabel, tabIndex: surfaceProps.tabIndex ?? 0 }, listContent);
     return React.createElement(Popover, {
         ...props,
-        label: label ?? context.strings.people ?? "More people",
+        label: resolvedLabel,
         placement,
         open,
         trapFocus: true,
@@ -3123,15 +3169,18 @@ export function AvatarGroupPopover({ children, count, indicator, label, triggerL
         onOpenChange: (_event, data) => onOpenChange?.(data.open),
     }, surfaceContent);
 }
+const presenceStringKeys = { available: "presenceAvailable", busy: "presenceBusy", "do-not-disturb": "presenceDoNotDisturb", away: "presenceAway", offline: "presenceOffline", unknown: "presenceUnknown", "out-of-office": "presenceOutOfOffice", blocked: "presenceBlocked" };
 export const Persona = /* @__PURE__ */ React.forwardRef(function Persona({ name, image, initials, primaryText, secondaryText, tertiaryText, quaternaryText, presence, presenceLabel, size = "medium", color = "neutral", textPosition = "after", textAlignment = "start", presenceOnly = false, avatar, children, ...props }, forwardedRef) {
     ensureDefined(definePersona);
     const ref = React.useRef(null);
     useExposeHostRef(ref, forwardedRef);
     useNativeControlEvents(ref, ".layout", props.onClick, props.onClickCapture, props);
+    const strings = React.useContext(UIContext).strings;
+    const presenceLabelFromProvider = presence ? strings[presenceStringKeys[presence]] : undefined;
     const textSlot = (node, slot) => node == null ? null : React.isValidElement(node)
         ? React.cloneElement(node, { slot })
         : React.createElement("span", { slot }, node);
-    return React.createElement("spui-persona", nativeControlHostProps({ ref, ...props, name, image, initials, "secondary-text": typeof secondaryText === "string" ? secondaryText : undefined, "tertiary-text": typeof tertiaryText === "string" ? tertiaryText : undefined, presence, "presence-label": presenceLabel, size, color, "text-position": textPosition, "text-alignment": textAlignment, "presence-only": presenceOnly || undefined }), textSlot(primaryText, "primary-text"), textSlot(secondaryText, "secondary-text"), textSlot(tertiaryText, "tertiary-text"), textSlot(quaternaryText, "quaternary-text"), avatar === undefined ? null : React.createElement("span", { slot: "avatar" }, avatar), children === undefined ? null : React.createElement("span", { slot: "details" }, children));
+    return React.createElement("spui-persona", nativeControlHostProps({ ref, ...props, name, image, initials, "secondary-text": typeof secondaryText === "string" ? secondaryText : undefined, "tertiary-text": typeof tertiaryText === "string" ? tertiaryText : undefined, presence, "presence-label": presenceLabel ?? presenceLabelFromProvider, size, color, "text-position": textPosition, "text-alignment": textAlignment, "presence-only": presenceOnly || undefined }), textSlot(primaryText, "primary-text"), textSlot(secondaryText, "secondary-text"), textSlot(tertiaryText, "tertiary-text"), textSlot(quaternaryText, "quaternary-text"), avatar === undefined ? null : React.createElement("span", { slot: "avatar" }, avatar), children === undefined ? null : React.createElement("span", { slot: "details" }, children));
 });
 const VirtualizerScrollViewRootContext = React.createContext(null);
 function mergeVirtualizerRootProps(slotProps, rootProps) {
@@ -3660,7 +3709,7 @@ const EMPTY_DATA_GRID_ITEMS = [];
 const EMPTY_DATA_GRID_COLUMN_WIDTHS = Object.freeze({});
 const EMPTY_DATA_GRID_COLUMN_SIZING_OPTIONS = Object.freeze({});
 const DEFAULT_DATA_GRID_RESIZABLE_COLUMNS_OPTIONS = Object.freeze({ autoFitColumns: true });
-function VirtualDataGrid({ items, dataSource, onDataLoadError, onDataSourceGroupToggle, columns, getRowId, label: labelProp, height = 400, rowHeight = 40, getRowHeight, overscan = 4, virtualize, virtualizeColumns, focusMode = "cell", subtleSelection = false, selectionAppearance = "brand", selectionMode = "none", selectedKeys, defaultSelectedKeys = [], selectionModel, defaultSelectionModel, onDataSourceSelectionChange, onSelectionChange, sort, defaultSort, onSortChange, multiSort, defaultMultiSort = [], onMultiSortChange, sortPriorityLabel: sortPriorityLabelProp, filterable = false, filterValue, defaultFilterValue = "", onFilterValueChange, filterLabel: filterLabelProp, renderCell, onCellEdit, onCellsEdit, validateCellEdit, rowLabel: rowLabelProp, editHint: editHintProp, emptyMessage: emptyMessageProp, loadingLabel: loadingLabelProp, selectLabel: selectLabelProp, selectAllLabel: selectAllLabelProp, resizableColumns = false, columnWidths, defaultColumnWidths = EMPTY_DATA_GRID_COLUMN_WIDTHS, columnSizingOptions = EMPTY_DATA_GRID_COLUMN_SIZING_OPTIONS, resizableColumnsOptions = DEFAULT_DATA_GRID_RESIZABLE_COLUMNS_OPTIONS, containerWidthOffset = 0, onColumnResize, resizeLabel: resizeLabelProp, reorderableColumns = false, columnOrder, defaultColumnOrder, onColumnOrderChange, reorderLabel: reorderLabelProp, groupBy, collapsedGroupKeys, defaultCollapsedGroupKeys = [], onCollapsedGroupKeysChange, emptyGroupLabel: emptyGroupLabelProp, expandGroupLabel: expandGroupLabelProp, collapseGroupLabel: collapseGroupLabelProp, onRenderedRange, ...props }) {
+function VirtualDataGrid({ items, dataSource, onDataLoadError, onDataSourceGroupToggle, columns, getRowId, label: labelProp, height = 400, rowHeight = 40, getRowHeight, overscan = 4, virtualize, virtualizeColumns, focusMode = "cell", subtleSelection = false, selectionAppearance = "brand", selectionMode = "none", selectedKeys, defaultSelectedKeys = [], selectionModel, defaultSelectionModel, onDataSourceSelectionChange, onSelectionChange, sort, defaultSort, onSortChange, multiSort, defaultMultiSort = [], onMultiSortChange, sortPriorityLabel: sortPriorityLabelProp, filterable = false, filterValue, defaultFilterValue = "", onFilterValueChange, filterLabel: filterLabelProp, renderCell, onCellEdit, onCellEditError, onCellsEdit, validateCellEdit, rowLabel: rowLabelProp, editHint: editHintProp, emptyMessage: emptyMessageProp, loadingLabel: loadingLabelProp, selectLabel: selectLabelProp, selectAllLabel: selectAllLabelProp, resizableColumns = false, columnWidths, defaultColumnWidths = EMPTY_DATA_GRID_COLUMN_WIDTHS, columnSizingOptions = EMPTY_DATA_GRID_COLUMN_SIZING_OPTIONS, resizableColumnsOptions = DEFAULT_DATA_GRID_RESIZABLE_COLUMNS_OPTIONS, containerWidthOffset = 0, onColumnResize, resizeLabel: resizeLabelProp, reorderableColumns = false, columnOrder, defaultColumnOrder, onColumnOrderChange, reorderLabel: reorderLabelProp, groupBy, collapsedGroupKeys, defaultCollapsedGroupKeys = [], onCollapsedGroupKeysChange, emptyGroupLabel: emptyGroupLabelProp, expandGroupLabel: expandGroupLabelProp, collapseGroupLabel: collapseGroupLabelProp, onRenderedRange, ...props }) {
     selectionMode = selectionMode === "multiselect" ? "multiple" : selectionMode;
     const [scrollTop, setScrollTop] = React.useState(0);
     const [viewportHeight, setViewportHeight] = React.useState(typeof height === "number" ? height : 400);
@@ -3996,7 +4045,9 @@ function VirtualDataGrid({ items, dataSource, onDataLoadError, onDataSourceGroup
         }
         catch (reason) {
             const message = reason instanceof Error ? reason.message : String(reason || "The value could not be saved.");
-            updateEditingCell({ ...current, draft, saving: false, error: message });
+            updateEditingCell({ ...current, draft, saving: false, error: uiStrings.dataGridEditError ?? defaultStrings.dataGridEditError });
+            onCellEditError?.({ item: edit.item, rowId: edit.rowId, columnId: edit.columnId, previousValue: edit.previousValue, value: edit.value, error: message });
+            viewport.current?.dispatchEvent(new CustomEvent("spui-cell-edit-error", { detail: { item: edit.item, rowId: edit.rowId, columnId: edit.columnId, previousValue: edit.previousValue, value: edit.value, error: message }, bubbles: true, composed: true }));
             requestAnimationFrame(() => viewport.current?.querySelector("[data-testid='spui-data-grid-editor']")?.focus());
         }
     };
@@ -4093,7 +4144,7 @@ function VirtualDataGrid({ items, dataSource, onDataLoadError, onDataSourceGroup
             if (controller.signal.aborted)
                 return;
             const message = reason instanceof Error ? reason.message : String(reason);
-            setReorderAnnouncement((uiStrings.dataGridCopyFailed ?? defaultStrings.dataGridCopyFailed).replace("{message}", message));
+            setReorderAnnouncement(uiStrings.dataGridCopyFailed ?? defaultStrings.dataGridCopyFailed);
             viewport.current?.dispatchEvent(new CustomEvent("spui-clipboard-error", { detail: { operation: "copy", message }, bubbles: true, composed: true }));
         });
     };
@@ -4177,7 +4228,7 @@ function VirtualDataGrid({ items, dataSource, onDataLoadError, onDataSourceGroup
             if (clipboardController.current?.signal.aborted)
                 return;
             const message = reason instanceof Error ? reason.message : String(reason);
-            setReorderAnnouncement((uiStrings.dataGridPasteFailed ?? defaultStrings.dataGridPasteFailed).replace("{message}", message));
+            setReorderAnnouncement(uiStrings.dataGridPasteFailed ?? defaultStrings.dataGridPasteFailed);
             viewport.current?.dispatchEvent(new CustomEvent("spui-cells-edit-error", { detail: { message, edits }, bubbles: true, composed: true }));
         }
     };
@@ -4416,7 +4467,7 @@ function VirtualDataGrid({ items, dataSource, onDataLoadError, onDataSourceGroup
                                         else
                                             setSelection(event.currentTarget.checked ? sortedItems.map(getRowId).map(String) : []); } }) }), orderedColumns.map((column, columnIndex) => _jsxs("div", { role: "columnheader", "data-column-id": column.id, "data-column-index": columnIndex, "aria-colindex": columnIndex + (selectionMode === "none" ? 1 : 2), "aria-sort": column.sortable === false ? undefined : activeSorts[0]?.columnId === column.id ? activeSorts[0].direction : "none", className: "spui-grid-cell spui-grid-header-cell", onDragOver: event => { if (reorderableColumns && draggedColumn.current)
                                         event.preventDefault(); }, onDrop: event => { event.preventDefault(); const rect = event.currentTarget.getBoundingClientRect(); const rtl = getComputedStyle(viewport.current).direction === "rtl"; const after = rtl ? event.clientX < rect.left + rect.width / 2 : event.clientX > rect.left + rect.width / 2; if (reorderableColumns)
-                                        moveColumn(draggedColumn.current ?? "", column.id, after); draggedColumn.current = undefined; }, children: [reorderableColumns && _jsx("button", { type: "button", className: "spui-grid-reorder-handle", "data-reorder-column": column.id, draggable: true, "aria-label": `${reorderLabel} ${column.label}`, title: `${reorderLabel} ${column.label}; use Alt+Shift+Arrow keys`, onDragStart: event => { draggedColumn.current = column.id; event.dataTransfer.effectAllowed = "move"; event.dataTransfer.setData("text/plain", column.id); }, onDragEnd: () => { draggedColumn.current = undefined; }, children: "\u283F" }), column.sortable === false ? column.label : _jsxs("button", { type: "button", "aria-label": activeSorts.some(entry => entry.columnId === column.id) ? `${column.label}, ${sortPriorityLabel.replace("{priority}", String(activeSorts.findIndex(entry => entry.columnId === column.id) + 1))}` : column.label, onClick: event => changeSort(column.id, event.shiftKey), children: [column.label, activeSorts.some(entry => entry.columnId === column.id) ? ` ${activeSorts.findIndex(entry => entry.columnId === column.id) + 1}${activeSorts.find(entry => entry.columnId === column.id)?.direction === "ascending" ? "▲" : "▼"}` : ""] }), resizableColumns && column.resizable !== false && _jsx("div", { ref: element => { if (element && activeColumnWidths[column.id] === undefined)
+                                        moveColumn(draggedColumn.current ?? "", column.id, after); draggedColumn.current = undefined; }, children: [reorderableColumns && _jsx("button", { type: "button", className: "spui-grid-reorder-handle", "data-reorder-column": column.id, draggable: true, "aria-label": `${reorderLabel} ${column.label}`, title: (uiStrings.dataGridReorderHint ?? defaultStrings.dataGridReorderHint).replace("{column}", column.label), onDragStart: event => { draggedColumn.current = column.id; event.dataTransfer.effectAllowed = "move"; event.dataTransfer.setData("text/plain", column.id); }, onDragEnd: () => { draggedColumn.current = undefined; }, children: "\u283F" }), column.sortable === false ? column.label : _jsxs("button", { type: "button", "aria-label": activeSorts.some(entry => entry.columnId === column.id) ? `${column.label}, ${sortPriorityLabel.replace("{priority}", String(activeSorts.findIndex(entry => entry.columnId === column.id) + 1))}` : column.label, onClick: event => changeSort(column.id, event.shiftKey), children: [column.label, activeSorts.some(entry => entry.columnId === column.id) ? ` ${activeSorts.findIndex(entry => entry.columnId === column.id) + 1}${activeSorts.find(entry => entry.columnId === column.id)?.direction === "ascending" ? "▲" : "▼"}` : ""] }), resizableColumns && column.resizable !== false && _jsx("div", { ref: element => { if (element && activeColumnWidths[column.id] === undefined)
                                                 element.setAttribute("aria-valuenow", String(Math.round(element.parentElement?.getBoundingClientRect().width ?? 120))); }, className: "spui-grid-resize-handle", "data-resize-column": column.id, role: "separator", "aria-orientation": "vertical", "aria-label": `${resizeLabel} ${column.label}`, "aria-valuemin": getDataGridColumnSizing(column, columnSizingOptions).minWidth, "aria-valuemax": column.maxWidth ?? 1600, "aria-valuenow": activeColumnWidths[column.id] ?? getDataGridColumnSizing(column, columnSizingOptions).defaultWidth, tabIndex: 0, onDoubleClick: event => autoFitResize(column, event), onPointerDown: event => startResize(column, event), onPointerMove: moveResize, onPointerUp: event => endResize(event), onPointerCancel: event => endResize(event, true), onLostPointerCapture: event => endResize(event, true) })] }, column.id))] }) }), _jsx("div", { role: "rowgroup", style: { position: "relative" }, children: (dataSource ? sourceLength : sortedItems.length) === 0 ? _jsx("div", { role: "row", "aria-rowindex": 2, className: "spui-grid-row", style: { gridTemplateColumns: gridColumns }, children: _jsx("div", { role: "gridcell", className: "spui-grid-cell", style: { gridColumn: `1 / span ${columns.length + (selectionMode === "none" ? 0 : 1)}` }, children: shownEmptyMessage }) }) : _jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": "true", role: "presentation", style: { height: shouldVirtualize ? rowSizes.offset(first) : 0 } }), Array.from({ length: last - first }, (_, offset) => {
                                     const rowIndex = first + offset;
                                     const sourceRow = dataSource ? getDataGridDataSourceRow(dataSource, rowIndex) : undefined;
@@ -4448,9 +4499,9 @@ function VirtualDataGrid({ items, dataSource, onDataLoadError, onDataSourceGroup
                                                                 else if (event.key === "Enter") {
                                                                     event.preventDefault();
                                                                     event.currentTarget.blur();
-                                                                } }, style: { boxSizing: "border-box", width: "100%", minWidth: 0, minHeight: 30, padding: "3px 6px", border: `1px solid var(${editingCell.error ? "--spui-semantic-danger" : "--spui-ui-accent"},${editingCell.error ? "#d13438" : "#78716c"})`, borderRadius: "var(--spui-control-radius,4px)", background: "var(--spui-base-surface,var(--spui-ui-surface,#fff))", color: "var(--spui-ui-text,var(--spui-semantic-body-text,#242424))", font: "inherit" } })] }) : Object.hasOwn(editedCells, editedKey) ? String(displayValue ?? "") : renderCell ? renderCell(item, column, itemIndex) : String(displayValue ?? "") }, column.id);
+                                                                } }, style: { boxSizing: "border-box", width: "100%", minWidth: 0, minHeight: 30, padding: "3px 6px", border: `2px solid var(${editingCell.error ? "--spui-semantic-danger" : "--spui-ui-accent"},${editingCell.error ? "#d13438" : "#78716c"})`, outline: "none", borderRadius: "var(--spui-control-radius,4px)", background: "var(--spui-base-surface,var(--spui-ui-surface,#fff))", color: "var(--spui-ui-text,var(--spui-semantic-body-text,#242424))", font: "inherit" } })] }) : Object.hasOwn(editedCells, editedKey) ? String(displayValue ?? "") : renderCell ? renderCell(item, column, itemIndex) : String(displayValue ?? "") }, column.id);
                                             })] }, key);
-                                }), _jsx("div", { "aria-hidden": "true", role: "presentation", style: { height: shouldVirtualize ? Math.max(0, rowSizes.totalSize - rowSizes.offset(last)) : 0 } })] }) })] }), _jsx("div", { className: "spui-grid-reorder-status", role: "status", "aria-live": "polite", children: sourceError ? `Data could not be loaded: ${sourceError}` : reorderAnnouncement })] });
+                                }), _jsx("div", { "aria-hidden": "true", role: "presentation", style: { height: shouldVirtualize ? Math.max(0, rowSizes.totalSize - rowSizes.offset(last)) : 0 } })] }) })] }), _jsx("div", { className: "spui-grid-reorder-status", role: "status", "aria-live": "polite", children: sourceError ? uiStrings.dataGridLoadError ?? defaultStrings.dataGridLoadError : reorderAnnouncement })] });
 }
 const defaultDataGridContextValue = {
     items: [], totalRows: 0, firstRow: 0, lastRow: 0, rowHeight: 40, sourceBusy: false, sourceError: "",
@@ -4523,7 +4574,7 @@ function useDataGridContextSelector(selector) {
 export function useDataGridContext_unstable(selector) {
     return useDataGridContextSelector(context => selector(context ?? defaultDataGridContextValue));
 }
-function ComposedDataGrid({ items = [], dataSource, onDataLoadError, onDataSourceSelectionChange, onDataSourceGroupToggle, onRenderedRange, rowHeight: requestedRowHeight = 40, overscan = 4, virtualize, loadingLabel: loadingLabelProp, expandGroupLabel: expandGroupLabelProp, collapseGroupLabel: collapseGroupLabelProp, groupCountLabel: groupCountLabelProp, columns, getRowId, selectionMode = "none", selectionAppearance = "brand", subtleSelection = false, focusMode = "cell", selectedItems, defaultSelectedItems = new Set(), selectionModel, defaultSelectionModel, onSelectionChange, sortState, defaultSortState, onSortChange, onCellEdit, validateCellEdit, rowLabel: rowLabelProp, editHint: editHintProp, label: labelProp, resizableColumns = false, columnWidths, defaultColumnWidths = EMPTY_DATA_GRID_COLUMN_WIDTHS, columnSizingOptions = EMPTY_DATA_GRID_COLUMN_SIZING_OPTIONS, resizableColumnsOptions = DEFAULT_DATA_GRID_RESIZABLE_COLUMNS_OPTIONS, containerWidthOffset = 0, onColumnResize, resizeLabel: resizeLabelProp, reorderableColumns = false, columnOrder, defaultColumnOrder, onColumnOrderChange, reorderLabel: reorderLabelProp, children, onKeyDown: onGridKeyDown, ...props }) {
+function ComposedDataGrid({ items = [], dataSource, onDataLoadError, onDataSourceSelectionChange, onDataSourceGroupToggle, onRenderedRange, rowHeight: requestedRowHeight = 40, overscan = 4, virtualize, loadingLabel: loadingLabelProp, expandGroupLabel: expandGroupLabelProp, collapseGroupLabel: collapseGroupLabelProp, groupCountLabel: groupCountLabelProp, columns, getRowId, selectionMode = "none", selectionAppearance = "brand", subtleSelection = false, focusMode = "cell", selectedItems, defaultSelectedItems = new Set(), selectionModel, defaultSelectionModel, onSelectionChange, sortState, defaultSortState, onSortChange, onCellEdit, onCellEditError, validateCellEdit, rowLabel: rowLabelProp, editHint: editHintProp, label: labelProp, resizableColumns = false, columnWidths, defaultColumnWidths = EMPTY_DATA_GRID_COLUMN_WIDTHS, columnSizingOptions = EMPTY_DATA_GRID_COLUMN_SIZING_OPTIONS, resizableColumnsOptions = DEFAULT_DATA_GRID_RESIZABLE_COLUMNS_OPTIONS, containerWidthOffset = 0, onColumnResize, resizeLabel: resizeLabelProp, reorderableColumns = false, columnOrder, defaultColumnOrder, onColumnOrderChange, reorderLabel: reorderLabelProp, children, onKeyDown: onGridKeyDown, ...props }) {
     const compositionStrings = React.useContext(UIContext).strings;
     const label = labelProp ?? (typeof props["aria-label"] === "string" ? props["aria-label"] : compositionStrings.dataGridLabel ?? defaultStrings.dataGridLabel);
     const loadingLabel = loadingLabelProp ?? compositionStrings.dataGridLoadingLabel ?? defaultStrings.dataGridLoadingLabel;
@@ -4878,7 +4929,7 @@ function ComposedDataGrid({ items = [], dataSource, onDataLoadError, onDataSourc
             },
         };
     }, [orderedColumns, columnSizingOptions, activeWidths, resizeColumn, resizableColumns, resizeLabel, keyboardSizingColumns]);
-    const context = React.useMemo(() => ({ items: contextItems, dataSource, totalRows, firstRow, lastRow, rowHeight: safeRowHeight, sourceBusy, sourceError, expandGroupLabel, collapseGroupLabel, groupCountLabel, toggleGroup, columns: contextColumns, getRowId, selectionMode, selectionAppearance, subtleSelection, focusMode, selectedItems: selected, selectionModel: activeSelectionModel, setSelectionModel, isItemSelected, isRowSelected, setSelectedItems, sortState: activeSort, setSortState: setSort, activeCell, setActiveCell, columnWidths: activeWidths, resizeColumn, columnSizingOptions, resizableColumns, autoFitColumns, resizeLabel, orderedColumns, reorderColumn: moveColumn, reorderableColumns, reorderLabel, draggedColumn, editHint, rowLabel, editedCells, onCellEdit, validateCellEdit, setEditedCell, getRows: fluentRows, selection: fluentSelection, sort: fluentSort, tableRef: gridRoot, columnSizing_unstable: fluentSizing, selectableRows: selectionMode !== "none", compositeRowTabsterAttribute: tableRowNavigationAttribute }), [contextItems, contextColumns, dataSource, totalRows, firstRow, lastRow, safeRowHeight, sourceBusy, sourceError, expandGroupLabel, collapseGroupLabel, groupCountLabel, onDataSourceGroupToggle, columns, getRowId, selectionMode, selectionAppearance, subtleSelection, focusMode, selected, selectionModel, activeSelectionModel, setSelectionModel, isItemSelected, isRowSelected, setSelectedItems, onSelectionChange, onDataSourceSelectionChange, activeSort, sortState, onSortChange, activeCell, activeWidths, columnWidths, columnSizingOptions, onColumnResize, resizableColumns, autoFitColumns, resizeLabel, orderedColumns, columnOrder, onColumnOrderChange, reorderableColumns, reorderLabel, editHint, rowLabel, editedCells, onCellEdit, validateCellEdit, fluentRows, fluentSelection, fluentSort, fluentSizing]);
+    const context = React.useMemo(() => ({ items: contextItems, dataSource, totalRows, firstRow, lastRow, rowHeight: safeRowHeight, sourceBusy, sourceError, expandGroupLabel, collapseGroupLabel, groupCountLabel, toggleGroup, columns: contextColumns, getRowId, selectionMode, selectionAppearance, subtleSelection, focusMode, selectedItems: selected, selectionModel: activeSelectionModel, setSelectionModel, isItemSelected, isRowSelected, setSelectedItems, sortState: activeSort, setSortState: setSort, activeCell, setActiveCell, columnWidths: activeWidths, resizeColumn, columnSizingOptions, resizableColumns, autoFitColumns, resizeLabel, orderedColumns, reorderColumn: moveColumn, reorderableColumns, reorderLabel, draggedColumn, editHint, rowLabel, editedCells, onCellEdit, onCellEditError, validateCellEdit, setEditedCell, getRows: fluentRows, selection: fluentSelection, sort: fluentSort, tableRef: gridRoot, columnSizing_unstable: fluentSizing, selectableRows: selectionMode !== "none", compositeRowTabsterAttribute: tableRowNavigationAttribute }), [contextItems, contextColumns, dataSource, totalRows, firstRow, lastRow, safeRowHeight, sourceBusy, sourceError, expandGroupLabel, collapseGroupLabel, groupCountLabel, onDataSourceGroupToggle, columns, getRowId, selectionMode, selectionAppearance, subtleSelection, focusMode, selected, selectionModel, activeSelectionModel, setSelectionModel, isItemSelected, isRowSelected, setSelectedItems, onSelectionChange, onDataSourceSelectionChange, activeSort, sortState, onSortChange, activeCell, activeWidths, columnWidths, columnSizingOptions, onColumnResize, resizableColumns, autoFitColumns, resizeLabel, orderedColumns, columnOrder, onColumnOrderChange, reorderableColumns, reorderLabel, editHint, rowLabel, editedCells, onCellEdit, onCellEditError, validateCellEdit, fluentRows, fluentSelection, fluentSort, fluentSizing]);
     const focusBy = (event) => {
         if (event.ctrlKey && (event.key === "Home" || event.key === "End")) {
             event.preventDefault();
@@ -4950,7 +5001,7 @@ function ComposedDataGrid({ items = [], dataSource, onDataLoadError, onDataSourc
                             const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
                             moveColumn(from, to, rtl ? event.clientX < rect.left + rect.width / 2 : event.clientX > rect.left + rect.width / 2);
                             draggedColumn.current = undefined;
-                        } props.onDrop?.(event); }, "data-selection-appearance": selectionAppearance, "data-spui-composed-grid": "", style: { boxSizing: "border-box", width: "100%", overflow: "auto", border: "1px solid var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1))", borderRadius: "var(--spui-control-radius,6px)", background: "var(--spui-base-surface,var(--spui-ui-surface,#fff))", color: "var(--spui-ui-text,var(--spui-semantic-body-text,#242424))", fontFamily: "var(--spui-font-family,inherit)", "--spui-composed-grid-columns": tracks, ...props.style } }), children: children }), sourceBusy && _jsx("div", { role: "status", "aria-live": "polite", className: "spui-sr-only", children: loadingLabel }), sourceError && _jsx("div", { role: "alert", children: sourceError }), _jsx("div", { className: "spui-grid-reorder-status", role: "status", "aria-live": "polite", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }, children: reorderAnnouncement })] }) });
+                        } props.onDrop?.(event); }, "data-selection-appearance": selectionAppearance, "data-spui-composed-grid": "", style: { boxSizing: "border-box", width: "100%", overflow: "auto", border: "1px solid var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1))", borderRadius: "var(--spui-control-radius,6px)", background: "var(--spui-base-surface,var(--spui-ui-surface,#fff))", color: "var(--spui-ui-text,var(--spui-semantic-body-text,#242424))", fontFamily: "var(--spui-font-family,inherit)", "--spui-composed-grid-columns": tracks, ...props.style } }), children: children }), sourceBusy && _jsx("div", { role: "status", "aria-live": "polite", className: "spui-sr-only", children: loadingLabel }), sourceError && _jsx("div", { role: "alert", children: compositionStrings.dataGridLoadError ?? defaultStrings.dataGridLoadError }), _jsx("div", { className: "spui-grid-reorder-status", role: "status", "aria-live": "polite", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }, children: reorderAnnouncement })] }) });
 }
 export function DataGrid(props) {
     if ("children" in props && props.children !== undefined)
@@ -5077,6 +5128,7 @@ export function DataGridCell({ children, columnId, rowIndex = 1, columnIndex = 0
     return _jsx(ComposedDataGridCell, { ...props, item: item, context: context, cellKey: cellKey, rowIndex: rowIndex, columnIndex: effectiveColumnIndex, columnId: id, focusMode: focusMode, editable: editable, value: value, editType: editType, editLabel: editLabel, children: children });
 }
 function ComposedDataGridCell({ children, item, context, cellKey, rowIndex = 1, columnIndex, columnId, focusMode, editable, value, editType, editLabel, ...props }) {
+    const uiStrings = React.useContext(UIContext).strings;
     const [editing, setEditing] = React.useState(false);
     const [draft, setDraft] = React.useState("");
     const [error, setError] = React.useState("");
@@ -5131,8 +5183,9 @@ function ComposedDataGridCell({ children, item, context, cellKey, rowIndex = 1,
         }
         catch (reason) {
             const message = reason instanceof Error ? reason.message : String(reason || "The value could not be saved.");
-            setError(message);
-            cell.current?.dispatchEvent(new CustomEvent("spui-cell-edit-error", { bubbles: true, detail: { ...edit, error: message } }));
+            setError(uiStrings.dataGridEditError ?? defaultStrings.dataGridEditError);
+            context.onCellEditError?.({ item: edit.item, rowId: edit.rowId, columnId: edit.columnId, previousValue: edit.previousValue, value: edit.value, error: message });
+            cell.current?.dispatchEvent(new CustomEvent("spui-cell-edit-error", { bubbles: true, composed: true, detail: { item: edit.item, rowId: edit.rowId, columnId: edit.columnId, previousValue: edit.previousValue, value: edit.value, error: message } }));
             requestAnimationFrame(() => input.current?.focus());
         }
         finally {
@@ -5171,10 +5224,11 @@ function ComposedDataGridCell({ children, item, context, cellKey, rowIndex = 1,
                     }
                     else if (event.key.startsWith("Arrow"))
                         event.stopPropagation(); }, onBlur: () => { if (!savingRef.current && !cancelledRef.current)
-                        void commit(); }, style: { width: "100%", minWidth: 0, boxSizing: "border-box", font: "inherit", color: "inherit", background: "var(--spui-base-surface,var(--spui-ui-surface,#fff))", border: "1px solid var(--spui-ui-accent,var(--spui-semantic-primary-button-background,#0078d4))", borderRadius: "var(--spui-control-radius,4px)", padding: "4px 6px", outline: "2px solid color-mix(in srgb,var(--spui-ui-accent,#0078d4) 22%,transparent)" } }), error && _jsx("span", { id: `${cellKey}-error`, role: "alert", className: "spui-sr-only", children: error })] }) : rendered });
+                        void commit(); }, style: { width: "100%", minWidth: 0, boxSizing: "border-box", font: "inherit", color: "inherit", background: "var(--spui-base-surface,var(--spui-ui-surface,#fff))", border: error ? "2px solid var(--spui-semantic-danger,var(--spui-ui-danger,#d13438))" : "2px solid var(--spui-ui-accent,var(--spui-semantic-primary-button-background,#0078d4))", outline: "none", borderRadius: "var(--spui-control-radius,4px)", padding: "4px 6px" } }), error && _jsx("span", { id: `${cellKey}-error`, role: "alert", className: "spui-sr-only", children: error })] }) : rendered });
 }
 export function DataGridHeaderCell({ children, columnId, rowIndex = 0, columnIndex = 0, sortable = true, sortDirection: explicitSortDirection, focusMode = "cell", aside, sortIcon, button, ...props }) {
     const context = useDataGridComposition();
+    const uiStrings = React.useContext(UIContext).strings;
     const contextualColumnId = React.useContext(DataGridColumnIdContext);
     const grid = useDataGridComposition();
     const id = contextualColumnId ?? columnId;
@@ -5239,7 +5293,7 @@ export function DataGridHeaderCell({ children, columnId, rowIndex = 0, columnInd
         event.stopPropagation();
         grid.reorderColumn(String(id), ids[nextIndex], nextIndex > index);
     };
-    return _jsxs("div", { ...props, role: "columnheader", "aria-sort": sortDirection, "data-column-id": id == null ? undefined : String(id), style: { boxSizing: "border-box", position: "relative", display: "flex", gridColumn: effectiveColumnIndex + 1, width: "100%", minWidth: 0, borderBlockEnd: "1px solid var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1))", fontWeight: 600, ...props.style }, children: [grid?.reorderableColumns && id !== undefined && _jsx("button", { type: "button", draggable: true, "aria-label": `${grid.reorderLabel ?? "Reorder column"} ${headerLabel}`, title: `${grid.reorderLabel ?? "Reorder column"} ${headerLabel}; use Alt+Shift+Arrow keys`, "data-reorder-column": String(id), "data-testid": `data-grid-reorder-${String(id)}`, onKeyDown: reorderKey, onDragStart: event => { event.dataTransfer.effectAllowed = "move"; event.dataTransfer.setData("text/plain", String(id)); }, style: { flex: "none", width: 26, minHeight: 40, padding: 0, border: 0, background: "transparent", color: "var(--spui-ui-muted,var(--spui-semantic-body-subtext,#616161))", cursor: "grab" }, children: "\u283F" }), headerControl, renderSpanSlot(aside), grid?.resizableColumns && id !== undefined && _jsx("div", { ref: handleRef, role: "separator", "aria-orientation": "vertical", "aria-label": `${grid.resizeLabel} ${headerLabel}`, "aria-valuemin": getDataGridColumnSizing({ id: String(id), label: String(id) }, grid.columnSizingOptions).minWidth, "aria-valuemax": 1600, "aria-valuenow": width, tabIndex: 0, "data-testid": `data-grid-resize-${String(id)}`, onKeyDown: resizeKey, onDoubleClick: fit, onPointerDown: event => { if (event.button !== 0)
+    return _jsxs("div", { ...props, role: "columnheader", "aria-sort": sortDirection, "data-column-id": id == null ? undefined : String(id), style: { boxSizing: "border-box", position: "relative", display: "flex", gridColumn: effectiveColumnIndex + 1, width: "100%", minWidth: 0, borderBlockEnd: "1px solid var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1))", fontWeight: 600, ...props.style }, children: [grid?.reorderableColumns && id !== undefined && _jsx("button", { type: "button", draggable: true, "aria-label": `${grid.reorderLabel ?? "Reorder column"} ${headerLabel}`, title: (uiStrings.dataGridReorderHint ?? defaultStrings.dataGridReorderHint).replace("{column}", headerLabel), "data-reorder-column": String(id), "data-testid": `data-grid-reorder-${String(id)}`, onKeyDown: reorderKey, onDragStart: event => { event.dataTransfer.effectAllowed = "move"; event.dataTransfer.setData("text/plain", String(id)); }, style: { flex: "none", width: 26, minHeight: 40, padding: 0, border: 0, background: "transparent", color: "var(--spui-ui-muted,var(--spui-semantic-body-subtext,#616161))", cursor: "grab" }, children: "\u283F" }), headerControl, renderSpanSlot(aside), grid?.resizableColumns && id !== undefined && _jsx("div", { ref: handleRef, role: "separator", "aria-orientation": "vertical", "aria-label": `${grid.resizeLabel} ${headerLabel}`, "aria-valuemin": getDataGridColumnSizing({ id: String(id), label: String(id) }, grid.columnSizingOptions).minWidth, "aria-valuemax": 1600, "aria-valuenow": width, tabIndex: 0, "data-testid": `data-grid-resize-${String(id)}`, onKeyDown: resizeKey, onDoubleClick: fit, onPointerDown: event => { if (event.button !== 0)
                     return; resizeStart.current = { x: event.clientX, width: width ?? getDataGridColumnSizing({ id: String(id), label: String(id) }, grid.columnSizingOptions).defaultWidth }; event.currentTarget.setPointerCapture(event.pointerId); event.preventDefault(); }, onPointerMove: event => { if (!resizeStart.current)
                     return; const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1; grid.resizeColumn(String(id), resizeStart.current.width + (event.clientX - resizeStart.current.x) * direction, event.nativeEvent); }, onPointerUp: event => { resizeStart.current = null; if (event.currentTarget.hasPointerCapture(event.pointerId))
                     event.currentTarget.releasePointerCapture(event.pointerId); }, style: { position: "absolute", zIndex: 1, insetBlock: 0, insetInlineEnd: 0, width: 10, cursor: "col-resize", touchAction: "none", outline: "none" } })] });
@@ -5399,7 +5453,7 @@ export function Tree({ items, children, label, selectionMode = "none", selectedK
     const allEntries = React.useMemo(() => flattenAllTree(treeItems), [treeItems]);
     const currentActiveKey = visible.some(entry => entry.key === activeKey) ? activeKey : visible[0]?.key ?? "";
     const lang = String(props.lang ?? context.lang ?? (typeof document === "undefined" ? "" : document.documentElement.lang)).toLowerCase();
-    const languageIsRtl = /^(ar|fa|he|ur|ps|sd|ug|yi)(-|$)/.test(lang);
+    const languageIsRtl = getDirectionFromLanguage(lang) === "rtl";
     const direction = props.dir ?? context.dir;
     const isRtl = direction === "rtl" || (direction === "auto" && languageIsRtl) || (direction === undefined && (languageIsRtl || (typeof document !== "undefined" && getComputedStyle(document.documentElement).direction === "rtl")));
     const updateSelected = (node, event) => {
@@ -5596,7 +5650,7 @@ export const TextField = /* @__PURE__ */ React.forwardRef(function TextField(inp
     return React.createElement("spui-field", useCustomElementProps({ ...props, ref, label, value }));
 });
 /** Pair one form control with a theme-aware label, hint, and validation message. */
-export function Field({ children, label, hint, validationMessage, validationMessageIcon, validationState, required, disabled, orientation = "vertical", size = "medium", className, style, ...props }) {
+export const Field = /* @__PURE__ */ React.forwardRef(function Field({ children, label, hint, validationMessage, validationMessageIcon, validationState, required, disabled, orientation = "vertical", size = "medium", className, style, ...props }, forwardedRef) {
     const generatedId = React.useId();
     const initialControl = React.isValidElement(children) && children.type !== React.Fragment ? children : undefined;
     const initialControlProps = initialControl?.props ?? {};
@@ -5678,8 +5732,8 @@ export function Field({ children, label, hint, validationMessage, validationMess
         hintId,
         disabled: Boolean(disabled || controlProps.disabled),
     };
-    return _jsxs("div", { ...useHostProps({ ...props, className: ["spui-form-field", className].filter(Boolean).join(" "), style: gridStyle, "data-orientation": orientation, "data-size": size, "data-validation-state": state }), children: [label == null ? null : _jsx(Label, { id: labelId, htmlFor: controlId, size: size, required: requiredValue, disabled: Boolean(disabled || controlProps.disabled), style: { gridArea: orientation === "horizontal" ? "1 / 1 / span 3 / 2" : undefined }, children: label }), _jsx("div", { style: { gridArea: orientation === "horizontal" ? "1 / 2 / span 3 / 3" : undefined, minWidth: 0 }, children: _jsx(FieldContext.Provider, { value: fieldContextValue, children: enhancedControl }) }), hint == null ? null : _jsx("div", { id: hintId, style: { gridArea: orientation === "horizontal" ? "2 / 2" : undefined, color: "var(--spui-ui-muted,var(--spui-semantic-body-subtext,#616161))", fontSize: "var(--spui-field-hint-size,12px)" }, children: hint }), !hasValidationMessage ? null : _jsxs("div", { id: messageId, "data-field-validation": state, role: state === "error" || state === "warning" ? "alert" : undefined, style: { gridArea: orientation === "horizontal" ? "3 / 2" : undefined, display: "flex", alignItems: "baseline", gap: 6, color: tokens?.foreground, fontSize: "var(--spui-field-message-size,12px)" }, children: [state === "none" ? null : _jsx("span", { "data-slot": "validationMessageIcon", "aria-hidden": "true", children: validationMessageIcon ?? (state === "success" ? "✓" : "!") }), validationMessage] })] });
-}
+    return _jsxs("div", { ...useHostProps({ ...props, ref: forwardedRef, className: ["spui-form-field", className].filter(Boolean).join(" "), style: gridStyle, "data-orientation": orientation, "data-size": size, "data-validation-state": state }), children: [label == null ? null : _jsx(Label, { id: labelId, htmlFor: controlId, size: size, required: requiredValue, disabled: Boolean(disabled || controlProps.disabled), style: { gridArea: orientation === "horizontal" ? "1 / 1 / span 3 / 2" : undefined }, children: label }), _jsx("div", { style: { gridArea: orientation === "horizontal" ? "1 / 2 / span 3 / 3" : undefined, minWidth: 0 }, children: _jsx(FieldContext.Provider, { value: fieldContextValue, children: enhancedControl }) }), hint == null ? null : _jsx("div", { id: hintId, style: { gridArea: orientation === "horizontal" ? "2 / 2" : undefined, color: "var(--spui-ui-muted,var(--spui-semantic-body-subtext,#616161))", fontSize: "var(--spui-field-hint-size,12px)" }, children: hint }), !hasValidationMessage ? null : _jsxs("div", { id: messageId, "data-field-validation": state, role: state === "error" || state === "warning" ? "alert" : undefined, style: { gridArea: orientation === "horizontal" ? "3 / 2" : undefined, display: "flex", alignItems: "baseline", gap: 6, color: tokens?.foreground, fontSize: "var(--spui-field-message-size,12px)" }, children: [state === "none" ? null : _jsx("span", { "data-slot": "validationMessageIcon", "aria-hidden": "true", children: validationMessageIcon ?? (state === "success" ? "✓" : "!") }), validationMessage] })] });
+});
 /** Bare input primitive. Supply aria-label or aria-labelledby; use TextField when a shadow-safe visible label is needed. */
 export const Input = /* @__PURE__ */ React.forwardRef(function Input(inputProps, forwardedRef) {
     const { type = "text", value, defaultValue, checked, defaultChecked, input: inputControl, onValueChange, onChange, contentBefore, contentAfter, size = "medium", appearance = "outline", disabled, required, readOnly, placeholder, capture, formNoValidate, ...props } = useFieldControlProps_unstable(inputProps, { supportsRequired: true, supportsSize: true });
@@ -5889,6 +5943,95 @@ export const AlphaSlider = /* @__PURE__ */ React.forwardRef(function AlphaSlider
         element.defaultColor = defaultColor; }, [color, defaultColor]);
     return React.createElement("spui-alpha-slider", nativeControlHostProps({ ...props, ref, color: undefined, defaultColor: undefined, shape, transparency: transparency || undefined, vertical: vertical || undefined, slot: "alpha", "aria-label": props["aria-label"] || context.strings.colorOpacity }));
 });
+/** Load and persist a user's compact command-shelf choice in this browser. Use a site/app-scoped key. */
+export function useStoredOverflowCompactMode(storageKey, defaultCompact = false) {
+    const key = `spfx-fast:overflow-compact:${storageKey}`;
+    const [compact, setCompactState] = React.useState(defaultCompact);
+    const [ready, setReady] = React.useState(false);
+    React.useEffect(() => {
+        const read = (value) => {
+            if (value === "true" || value === "false")
+                setCompactState(value === "true");
+            else
+                setCompactState(defaultCompact);
+        };
+        try {
+            read(globalThis.localStorage?.getItem(key) ?? null);
+        }
+        catch {
+            setCompactState(defaultCompact);
+        }
+        setReady(true);
+        const onStorage = (event) => { if (event.key === key)
+            read(event.newValue); };
+        globalThis.addEventListener?.("storage", onStorage);
+        return () => globalThis.removeEventListener?.("storage", onStorage);
+    }, [key, defaultCompact]);
+    const setCompact = React.useCallback((value) => {
+        setCompactState(value);
+        try {
+            globalThis.localStorage?.setItem(key, String(value));
+        }
+        catch { /* Keep the current-session choice if storage is unavailable. */ }
+    }, [key]);
+    const toggleCompact = React.useCallback(() => setCompact(!compact), [compact, setCompact]);
+    return { compact, ready, setCompact, toggleCompact };
+}
+export function useSavedSwatchPalettes(store) {
+    const [palettes, setPalettes] = React.useState([]);
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState(null);
+    const request = React.useRef(0);
+    const mounted = React.useRef(false);
+    const reload = React.useCallback(async () => {
+        const current = ++request.current;
+        setLoading(true);
+        setError(null);
+        try {
+            const result = await store.list();
+            if (mounted.current && request.current === current)
+                setPalettes(result);
+            return result;
+        }
+        catch (cause) {
+            if (mounted.current && request.current === current)
+                setError(cause);
+            throw cause;
+        }
+        finally {
+            if (mounted.current && request.current === current)
+                setLoading(false);
+        }
+    }, [store]);
+    React.useEffect(() => { mounted.current = true; void reload().catch(() => { }); return () => { mounted.current = false; request.current++; }; }, [reload]);
+    const save = React.useCallback(async (palette) => {
+        if (mounted.current)
+            setError(null);
+        try {
+            await store.save(palette);
+            await reload();
+        }
+        catch (cause) {
+            if (mounted.current)
+                setError(cause);
+            throw cause;
+        }
+    }, [store, reload]);
+    const remove = React.useCallback(async (id) => {
+        if (mounted.current)
+            setError(null);
+        try {
+            await store.remove(id);
+            await reload();
+        }
+        catch (cause) {
+            if (mounted.current)
+                setError(cause);
+            throw cause;
+        }
+    }, [store, reload]);
+    return { palettes, loading, error, reload, save, remove };
+}
 export const SwatchPicker = /* @__PURE__ */ React.forwardRef(function SwatchPicker({ children, selectedValue, defaultSelectedValue, selectedValues, defaultSelectedValues, selectionMode = "single", layout = "grid", size = "medium", shape = "square", spacing = "medium", focusMode = "arrow", columns = 6, onSelectionChange, ...props }, forwardedRef) {
     const strings = React.useContext(UIContext).strings;
     const ref = React.useRef(null);
@@ -5907,6 +6050,12 @@ export const ColorSwatch = /* @__PURE__ */ React.forwardRef(function ColorSwatch
     ensureDefined(defineNativeSwatchPicker);
     return React.createElement("spui-color-swatch", useCustomElementProps({ ref: forwardedRef, ...props, color, value, disabled: disabled || undefined, size, shape, "border-color": borderColor }), children, icon == null ? null : React.createElement("span", { slot: "icon" }, icon), disabledIcon == null ? null : React.createElement("span", { slot: "disabled-icon" }, disabledIcon));
 });
+export function SharePointThemeSwatches({ palette, labelForColor }) {
+    const themePalette = React.useContext(UIContext).theme?.palette;
+    const presets = getSharePointThemeColorPresets(palette ?? themePalette, labelForColor);
+    ensureDefined(defineNativeSwatchPicker);
+    return React.createElement(React.Fragment, null, presets.map(preset => React.createElement(ColorSwatch, { key: preset.name, color: preset.color, value: preset.value, "aria-label": preset.label })));
+}
 export const ImageSwatch = /* @__PURE__ */ React.forwardRef(function ImageSwatch({ src, value, disabled, size, shape, children, ...props }, forwardedRef) {
     ensureDefined(defineNativeSwatchPicker);
     return React.createElement("spui-image-swatch", useCustomElementProps({ ref: forwardedRef, ...props, src, value, disabled: disabled || undefined, size, shape }), children);
@@ -6835,3 +6984,114 @@ export const AccordionPanel = /* @__PURE__ */ React.forwardRef(function Accordio
     const open = React.useContext(AccordionItemOpenContext);
     return React.createElement("spui-accordion-panel", useCustomElementProps({ ref: forwardedRef, ...props, slot: "panel", motion: collapseMotion ? true : undefined }), collapseMotion ? React.createElement(collapseMotion, { visible: open, appear: true, unmountOnExit: true }, children) : children);
 });
+/** Render a SharePoint field recipe using the library's matching form control. */
+export function SharePointField({ field, value, defaultValue, options: providedOptions, onValueChange, disabled = false, hint, validationMessage, renderUnsupported, addChoiceLabel = "Add another choice", emptyOptionLabel = "Select an option", className, style, ...hostProps }) {
+    const adapter = getSharePointFieldAdapter(field);
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const [fillInValue, setFillInValue] = React.useState("");
+    if (adapter.hidden)
+        return null;
+    const currentValue = value === undefined ? internalValue : value;
+    const updateValue = (next) => {
+        if (value === undefined)
+            setInternalValue(next);
+        onValueChange?.(next);
+    };
+    const label = adapter.label || adapter.name || adapter.fieldType;
+    const name = adapter.name || undefined;
+    const stringValue = adapter.control === "date-picker" ? toSharePointDateControlString(currentValue) : toSharePointControlString(currentValue);
+    const choices = providedOptions ?? (adapter.choices ?? []).map(choice => ({ value: choice, label: choice }));
+    const controlDisabled = disabled || (adapter.readOnly && !["input", "textarea", "rich-text-editor"].includes(adapter.control));
+    let control;
+    switch (adapter.control) {
+        case "input":
+            control = _jsx(Input, { type: adapter.inputType ?? "text", name: name, value: stringValue, min: adapter.min, max: adapter.max, step: adapter.step, maxLength: adapter.maxLength, required: adapter.required, disabled: disabled, readOnly: adapter.readOnly, onValueChange: next => updateValue(next) });
+            break;
+        case "textarea":
+            control = _jsx(TextArea, { name: name, value: stringValue, maxLength: adapter.maxLength, required: adapter.required, disabled: disabled, readOnly: adapter.readOnly, onValueChange: next => updateValue(next) });
+            break;
+        case "rich-text-editor":
+            control = _jsx(RichTextEditor, { name: name, value: stringValue, field: field, required: adapter.required, disabled: disabled, readOnly: adapter.readOnly, onValueChange: next => updateValue(next) });
+            break;
+        case "select":
+            control = adapter.allowFillIn
+                ? _jsx(ComboBox, { name: name, value: stringValue, selectedValue: stringValue, placeholder: emptyOptionLabel, freeform: true, allowFreeform: true, required: adapter.required, disabled: controlDisabled, onValueChange: next => updateValue(next), onOptionSelect: (_, data) => updateValue(data.optionValue ?? null), children: choices.map(option => _jsx(Option, { value: String(option.value), text: option.label, disabled: option.disabled, children: option.label }, String(option.value))) })
+                : _jsxs(Select, { name: name, value: stringValue, required: adapter.required, disabled: controlDisabled, onValueChange: next => updateValue(next), children: [_jsx("option", { value: "", disabled: adapter.required, children: emptyOptionLabel }), choices.map(option => _jsx("option", { value: String(option.value), disabled: option.disabled, children: option.label }, String(option.value)))] });
+            break;
+        case "radio-group":
+            control = _jsx(RadioGroup, { name: name, value: stringValue, required: adapter.required, disabled: controlDisabled, onValueChange: next => updateValue(next), children: choices.map(option => _jsx(Radio, { value: String(option.value), label: option.label, disabled: option.disabled }, String(option.value))) });
+            break;
+        case "checkbox":
+            control = _jsx(Checkbox, { name: name, checked: currentValue === true || currentValue === "true", disabled: controlDisabled, onCheckedChange: next => updateValue(next) });
+            break;
+        case "multi-choice": {
+            const selected = Array.isArray(currentValue) ? currentValue.map(String) : [];
+            const visibleOptions = [...choices];
+            for (const selectedValue of selected) {
+                if (!visibleOptions.some(option => String(option.value) === selectedValue))
+                    visibleOptions.push({ value: selectedValue, label: selectedValue });
+            }
+            const setSelected = (choice, checked) => {
+                const next = checked ? [...new Set([...selected, choice])] : selected.filter(item => item !== choice);
+                updateValue(next);
+            };
+            const addFillIn = () => {
+                const next = fillInValue.trim();
+                if (!next || selected.includes(next))
+                    return;
+                updateValue([...selected, next]);
+                setFillInValue("");
+            };
+            control = _jsxs(_Fragment, { children: [visibleOptions.map(option => _jsx(Checkbox, { label: option.label, checked: selected.includes(String(option.value)), disabled: controlDisabled || option.disabled, onCheckedChange: checked => setSelected(String(option.value), checked) }, String(option.value))), adapter.allowFillIn ? _jsxs("div", { style: { display: "flex", alignItems: "end", gap: 8, marginBlockStart: 8 }, children: [_jsx(Input, { type: "text", value: fillInValue, "aria-label": addChoiceLabel, disabled: controlDisabled, onValueChange: setFillInValue, onKeyDown: event => { if (event.key === "Enter") {
+                                    event.preventDefault();
+                                    addFillIn();
+                                } } }), _jsx(Button, { type: "button", appearance: "outline", disabled: controlDisabled || !fillInValue.trim(), onClick: addFillIn, children: addChoiceLabel })] }) : null] });
+            break;
+        }
+        case "date-picker":
+            control = _jsx(DatePicker, { name: name, value: stringValue, required: adapter.required, disabled: controlDisabled, readOnly: adapter.readOnly, onValueChange: next => updateValue(next) });
+            break;
+        case "combobox":
+            control = _jsx(ComboBox, { name: name, multiselect: adapter.multiple, selectedValue: adapter.multiple ? undefined : stringValue, selectedOptions: adapter.multiple && Array.isArray(currentValue) ? currentValue.map(String) : undefined, required: adapter.required, disabled: controlDisabled, placeholder: emptyOptionLabel, onOptionSelect: (_, data) => { if (!adapter.multiple)
+                    updateValue(data.optionValue ?? null); }, onSelectedOptionsChange: next => { if (adapter.multiple)
+                    updateValue(next); }, children: choices.map(option => _jsx(Option, { value: String(option.value), text: option.label, disabled: option.disabled, children: option.label }, String(option.value))) });
+            break;
+        case "read-only":
+            control = _jsx(TextField, { name: name, value: stringValue, readOnly: true });
+            break;
+        case "unsupported": {
+            const fallback = renderUnsupported?.(field, adapter.unsupportedReason ?? "No renderer is registered for this SharePoint field type.");
+            control = fallback ?? _jsxs("div", { role: "note", children: ["This SharePoint field type needs a custom renderer (", adapter.fieldType, ")."] });
+            break;
+        }
+    }
+    if (adapter.control === "multi-choice") {
+        return _jsx(Field, { ...hostProps, hint: hint ?? adapter.description, validationMessage: validationMessage, disabled: disabled, className: className, style: style, children: _jsx(SharePointMultiChoiceGroup, { label: label, required: adapter.required, disabled: disabled, children: control }) });
+    }
+    return _jsx(Field, { ...hostProps, label: label, hint: hint ?? adapter.description, validationMessage: validationMessage, required: adapter.required, disabled: disabled, className: className, style: style, children: control });
+}
+function toSharePointControlString(value) {
+    if (value == null)
+        return "";
+    if (typeof value === "string" || typeof value === "number")
+        return String(value);
+    if (value instanceof Date) {
+        const pad = (part) => String(part).padStart(2, "0");
+        return `${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}T${pad(value.getHours())}:${pad(value.getMinutes())}`;
+    }
+    if (typeof value === "object" && "url" in value)
+        return value.url;
+    return "";
+}
+function SharePointMultiChoiceGroup({ label, required, disabled, children }) {
+    const fieldProps = useFieldControlProps_unstable({ role: "group", "aria-label": label }, { supportsRequired: false });
+    return _jsxs("fieldset", { ...fieldProps, "aria-required": required || undefined, disabled: disabled, style: { minWidth: 0, margin: 0, padding: 0, border: 0 }, children: [_jsxs("legend", { children: [label, required ? _jsx("span", { "aria-hidden": "true", children: " *" }) : null] }), children] });
+}
+function toSharePointDateControlString(value) {
+    if (value instanceof Date) {
+        const pad = (part) => String(part).padStart(2, "0");
+        return `${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}`;
+    }
+    const text = toSharePointControlString(value);
+    return /^\d{4}-\d{2}-\d{2}/.exec(text)?.[0] ?? text;
+}