@spfx-fast/sharepoint-ui 0.4.1 → 0.4.3

package/components.json

@@ -340,15 +340,39 @@
           "host className/style"
         ],
         "reactSignature": "{ children, selectedValue, defaultSelectedValue, selectedValues, defaultSelectedValues, selectionMode = \"single\", layout = \"grid\", size = \"medium\", shape = \"square\", spacing = \"medium\", focusMode = \"arrow\", columns = 6, onSelectionChange, ...props }: SwatchPickerProps",
-        "reactRefType": "HTMLElement"
+        "reactRefType": "HTMLElement",
+        "relatedReactApis": [
+          {
+            "name": "useSavedSwatchPalettes(store)",
+            "description": "Load, save, remove, and refresh named palettes through a stable host-owned store. Use the app's SharePoint data service for tenant-wide persistence; the hook adds no network or storage dependency. See the saved palettes guide for a complete React recipe."
+          },
+          {
+            "name": "SwatchPaletteStore",
+            "description": "Implement list, save, and remove with the app's current persistence service. Keep the store object stable across React renders."
+          },
+          {
+            "name": "SavedSwatchPalette",
+            "description": "A named palette record with an id and color entries containing value, color, and optional label."
+          },
+          {
+            "name": "SharePointThemeSwatches",
+            "description": "Compose inside SwatchPicker to render every color in the nearest SharePointUIProvider theme palette. Pass palette to override the provider palette, or labelForColor to localize accessible color names."
+          },
+          {
+            "name": "getSharePointThemeColorPresets(palette, labelForKey?)",
+            "description": "Framework-neutral helper that maps every non-empty SharePoint palette entry, including custom tenant keys, to named swatch data."
+          },
+          {
+            "name": "SharePointThemeColorPreset",
+            "description": "A named palette key, controlled value, CSS color, and accessible label."
+          }
+        ]
       },
       "react": "SwatchPicker",
       "tag": "spui-swatch-picker",
       "define": "defineSwatchPicker",
       "summary": "Render accessible color and image swatches as a keyboard-operable single- or multi-selection grid or row.",
-      "highValueAdditions": [
-        "Offer reusable named theme-color presets alongside caller-defined palettes."
-      ]
+      "highValueAdditions": []
     },
     {
       "module": "swatch-picker",
@@ -449,7 +473,13 @@
       "module": "overflow",
       "category": "actions",
       "api": {
-        "reactSignature": "{ children, label, minimumVisible = 0, overflowDirection = \"end\", overflowAxis = \"horizontal\", hasHiddenItems = false, overflowContent, padding = 10, onOverflowChange, onOverflowItemSelect, ...props }: ElementProps & { children?: React.ReactNode; label?: string; minimumVisible?: number; overflowDirection?: \"start\" | \"end\"; overflowAxis?: OverflowAxis; hasHiddenItems?: boolean; overflowContent?: React.ReactNode; padding?: number; onOverflowChange?: (event: null, data: OverflowState) => void; onOverflowItemSelect?: (id: string) => void }",
+        "reactSignature": "{ children, label, minimumVisible = 0, overflowDirection = \"end\", overflowAxis = \"horizontal\", density = \"comfortable\", hasHiddenItems = false, overflowContent, padding = 10, onOverflowChange, onOverflowItemSelect, ...props }: ElementProps & { children?: React.ReactNode; label?: string; minimumVisible?: number; overflowDirection?: \"start\" | \"end\"; overflowAxis?: OverflowAxis; density?: OverflowDensity; hasHiddenItems?: boolean; overflowContent?: React.ReactNode; padding?: number; onOverflowChange?: (event: null, data: OverflowState) => void; onOverflowItemSelect?: (id: string) => void }",
+        "relatedReactApis": [
+          {
+            "name": "useStoredOverflowCompactMode(storageKey, defaultCompact?)",
+            "description": "Persist this browser's compact command-shelf choice; use the returned compact value as Overflow density and setCompact or toggleCompact from a ToggleButton. Scope storageKey to the app and SharePoint site. Custom-element consumers can set density=compact directly and persist it with their own preference store."
+          }
+        ],
         "callbackProps": [
           "onOverflowChange",
           "onOverflowItemSelect"
@@ -465,10 +495,8 @@
           "named ::part hooks"
         ]
       },
-      "summary": "Keep priority actions visible as space changes and render the overflowed actions through the existing Menu primitives without cloning or moving controls.",
-      "highValueAdditions": [
-        "Add a priority-aware responsive command shelf with group labels and persisted compact mode."
-      ]
+      "summary": "Keep priority actions visible as space changes, move the rest into a menu, and let a stored user preference switch the shelf to compact spacing.",
+      "highValueAdditions": []
     },
     {
       "react": "OverflowProvider",
@@ -586,7 +614,8 @@
           "motion accepts slide attraction physics: { kind: \"slide\", duration?: number }; duration follows Embla’s 20–60 recommendation"
         ],
         "highValueAdditions": [
-          "Enable drag with keyboard-equivalent announcements and preserve end padding when slides are centered."
+          "Enable drag with keyboard-equivalent announcements and preserve end padding when slides are centered.",
+          "Use CarouselNav appearance=thumbnails with CarouselNavImageButton for a horizontally scrollable image-preview strip."
         ],
         "reactRefType": "HTMLElement"
       },
@@ -918,8 +947,11 @@
           "default",
           "leading",
           "eyebrow",
+          "title",
+          "subtitle",
+          "description",
           "status",
-          "footer"
+          "actions"
         ],
         "styling": [
           "SharePointUIProvider tokens",
@@ -1413,6 +1445,7 @@
       "note": "React Field composes a single native or custom form control. createFormField returns a light-DOM wrapper for framework-neutral consumers.",
       "api": {
         "reactSignature": "{ children, label, hint, validationMessage, validationMessageIcon, validationState, required, disabled, orientation = \"vertical\", size = \"medium\", className, style, ...props }: FieldProps",
+        "reactRefType": "HTMLDivElement",
         "callbackProps": [],
         "slots": [
           "label",
@@ -1451,6 +1484,37 @@
       },
       "summary": "Edit a single-line value with an accessible label and controlled change events."
     },
+    {
+      "react": "SharePointField",
+      "tag": "spui-sharepoint-field",
+      "define": "defineSharePointField",
+      "module": "sharepoint-fields",
+      "category": "forms",
+      "summary": "Render SharePoint field metadata with accessible controls in React or as a framework-free custom element.",
+      "api": {
+        "reactSignature": "{ field, value, defaultValue, options: providedOptions, onValueChange, disabled = false, hint, validationMessage, renderUnsupported, addChoiceLabel = \"Add another choice\", emptyOptionLabel = \"Select an option\", className, style, ...hostProps }: SharePointFieldProps",
+        "callbackProps": [
+          "onValueChange"
+        ],
+        "slots": [],
+        "styling": [
+          "SharePointUIProvider tokens",
+          "Field label, hint, and validation states",
+          "id, ARIA, data attributes, className, and style"
+        ],
+        "customElementProperties": [
+          "field",
+          "value",
+          "defaultValue",
+          "options",
+          "onValueChange",
+          "renderUnsupported"
+        ],
+        "customElementEvents": [
+          "spui-field-value-change"
+        ]
+      }
+    },
     {
       "react": "SearchBox",
       "tag": "spui-search-box",
@@ -1486,7 +1550,7 @@
       "module": "text",
       "category": "typography",
       "api": {
-        "reactSignature": "{ as = \"span\", size = 300, weight, font = \"base\", align = \"start\", italic = false, underline = false, strikethrough = false, truncate = false, wrap = true, block = false, children, ...props }: TextProps",
+        "reactSignature": "{ as = \"span\", size = 300, weight, font = \"base\", align = \"start\", italic = false, underline = false, strikethrough = false, truncate = false, wrap = true, block = false, children, style, ...props }: TextProps",
         "callbackProps": [],
         "slots": [
           "default"
@@ -1816,7 +1880,7 @@
       "registered": false,
       "note": "Uses a native HTML label to preserve browser label association and click-to-focus behavior; createLabel returns an HTMLLabelElement for non-React consumers.",
       "api": {
-        "reactSignature": "{ htmlFor, size = \"medium\", weight = \"regular\", required = false, disabled = false, children, style, ...props }: React.LabelHTMLAttributes<HTMLLabelElement> & { size?: LabelSize; weight?: LabelWeight; required?: LabelRequired; disabled?: boolean }",
+        "reactSignature": "{ htmlFor, size = \"medium\", weight = \"regular\", required = false, disabled = false, children, style, ...props }: LabelProps",
         "reactRefType": "HTMLLabelElement",
         "callbackProps": [],
         "slots": [
@@ -1975,6 +2039,10 @@
       "api": {
         "reactSignature": "inputProps: ComboBoxProps",
         "relatedReactApis": [
+          {
+            "name": "ComboBoxProps.requiredMessage",
+            "description": "Sets the native form validation message; defaults to SharePointUIProvider.strings.required."
+          },
           {
             "name": "ComboBoxProps.selectedLabel",
             "description": "In multiselect mode, names the selected-options group; defaults to SharePointUIProvider.strings.selectedOptionsLabel."
@@ -2239,14 +2307,69 @@
       "api": {
         "reactSignature": "inputProps: RichTextEditorProps",
         "relatedReactApis": [
+          {
+            "name": "RichTextEditorProps.field",
+            "description": "Pass SharePoint Note metadata directly; the editor derives its capability ceiling. contentMode and allowHyperlink may narrow that ceiling, but cannot enable features the field forbids."
+          },
+          {
+            "name": "RichTextEditorProps.contentMode",
+            "description": "Choose plain, restricted, rich, or sanitized html output. With field metadata, this prop may narrow but cannot exceed the destination field's capabilities. Omit it for field-derived mode or unconstrained sanitized html."
+          },
+          {
+            "name": "getRichTextEditorFieldOptions(field)",
+            "description": "Maps SharePoint RichText, RestrictedMode, RichTextMode, and AllowHyperlink metadata to editor capabilities. Explicit restrictions are preserved; missing restrictions default to sanitized html. React consumers can pass field={metadata} directly."
+          },
           {
             "name": "RichTextEditorProps.editorLabel",
             "description": "Accessible name used when no aria-label or visible label is supplied; defaults to SharePointUIProvider.strings.richTextEditorLabel."
+          },
+          {
+            "name": "RichTextEditorProps color labels",
+            "description": "SharePointUIProvider.strings.richTextTextColor, richTextHighlightColor, richTextCustomColor, richTextThemeAccent, richTextFontFamily, richTextFontSize, and colorSwatch localize color and font controls and their palette labels. These are available for compatible-rich and FullHtml fields; restricted/plain fields hide them. Safe inline font/color styles are sanitized before values are emitted."
+          },
+          {
+            "name": "RichTextEditorProps.onValueChange",
+            "description": "Receives sanitized HTML after edits. With a controlled value prop, update that prop from this callback; the editor preserves its live selection while React applies the committed value."
+          },
+          {
+            "name": "RichTextEditorProps.onImageUpload",
+            "description": "Upload the selected file and return its URL string, or return { src, alt } to provide meaningful image alternative text. The object form requires alt; use alt: \"\" only for decorative images. String results use filename-based alternative text."
+          },
+          {
+            "name": "RichTextEditor mobile selection",
+            "description": "On touch devices, press and hold text to use the browser's native selection handles. The editor does not force blur or refocus during the gesture; toolbar formatting uses the saved range."
+          },
+          {
+            "name": "RichTextEditorProps.onImageUploadError",
+            "description": "Receives the failed image filename and error when the application-managed upload fails or returns an unsafe URL."
+          },
+          {
+            "name": "RichTextEditorProps.linkPicker",
+            "description": "Opens the host application's SharePoint picker with the current link, then fills the editor for review before the user applies it. Return null to cancel."
+          },
+          {
+            "name": "RichTextEditorProps.onLinkPickerError",
+            "description": "Receives an error when the host-provided SharePoint link picker fails."
+          },
+          {
+            "name": "SharePointUIProvider.strings.richTextLink*",
+            "description": "Customize the link editor's accessible name, field labels, action labels, picker states, and validation messages for the active language."
+          },
+          {
+            "name": "SharePointUIProvider.strings.richText*",
+            "description": "Localize the text-style menu, block names, formatting buttons, table actions, link editor, image controls, and required message."
+          },
+          {
+            "name": "RichTextEditor full HTML formatting",
+            "description": "Subscript, superscript, and left/center/right/justified paragraph alignment are available only when the effective contentMode is html. Localize them with SharePointUIProvider.strings.richTextSubscript, richTextSuperscript, richTextAlignLeft, richTextAlignCenter, richTextAlignRight, and richTextAlignJustify."
           }
         ],
         "callbackProps": [
           "onValueChange",
-          "onImageUpload"
+          "onImageUpload",
+          "onImageUploadError",
+          "linkPicker",
+          "onLinkPickerError"
         ],
         "slots": [],
         "styling": [
@@ -2257,7 +2380,10 @@
         ],
         "reactRefType": "HTMLElement"
       },
-      "summary": "Edit sanitized rich HTML with controlled or uncontrolled form values, accessible formatting history, table editing, and application-managed durable image upload for SharePoint persistence."
+      "summary": "Edit sanitized content with block styles, font family and size, text and highlight colors where the SharePoint field permits them, lists, tables, safe links, and host-managed images. Field metadata selects plain, restricted, compatible-rich, or FullHtml behavior.",
+      "highValueAdditions": [
+        "Preview SharePoint page titles and destination details before inserting internal links."
+      ]
     },
     {
       "react": "Spinner",
@@ -2395,7 +2521,7 @@
         ],
         "reactRefType": "HTMLElement"
       },
-      "summary": "Group related messages with consistent spacing and optional entry motion."
+      "summary": "Stack related status messages with optional entry, exit, and reflow motion."
     },
     {
       "react": "MessageBarTitle",
@@ -2674,7 +2800,8 @@
       "category": "feedback",
       "reactOnly": true,
       "api": {
-        "reactSignature": "{ children, ...props }: ElementProps & { children?: React.ReactNode }",
+        "reactSignature": "{ children, ...props }: DrawerFooterProps",
+        "reactRefType": "HTMLDivElement",
         "callbackProps": [],
         "slots": [
           "actions"
@@ -2694,7 +2821,8 @@
       "category": "feedback",
       "reactOnly": true,
       "api": {
-        "reactSignature": "{ children, ...props }: ElementProps & { children?: React.ReactNode }",
+        "reactSignature": "{ children, ...props }: DrawerBodyProps",
+        "reactRefType": "HTMLDivElement",
         "callbackProps": [],
         "slots": [
           "default"
@@ -2709,7 +2837,7 @@
     },
     {
       "react": "DrawerHeaderTitle",
-      "tag": "span",
+      "tag": "fragment",
       "module": "drawer",
       "category": "feedback",
       "reactOnly": true,
@@ -2736,7 +2864,8 @@
       "category": "feedback",
       "reactOnly": true,
       "api": {
-        "reactSignature": "{ children, label, ...props }: ElementProps & { children?: React.ReactNode; label?: string }",
+        "reactSignature": "{ children, label, ...props }: DrawerHeaderNavigationProps",
+        "reactRefType": "HTMLElement",
         "callbackProps": [],
         "slots": [
           "default"
@@ -3145,6 +3274,7 @@
           "onMultiSortChange",
           "onFilterValueChange",
           "onCellEdit",
+          "onCellEditError",
           "validateCellEdit",
           "getRowHeight",
           "onCellsEdit",
@@ -3162,7 +3292,7 @@
         "editing": {
           "columnOptions": "editable?: boolean; editType?: text | number | date",
           "activation": "Enter, F2, or double-click",
-          "commit": "Enter or focus leaving the editor; async onCellEdit errors keep the editor open",
+          "commit": "Enter or focus leaving the editor; async onCellEdit errors keep the editor open and call onCellEditError",
           "cancel": "Escape",
           "validation": "validateCellEdit returns an accessible error message",
           "persistence": "Callback receives row id, column id, previous value, new value, and item. The host owns SharePoint persistence and should supply refreshed items after save."
@@ -3501,8 +3631,12 @@
       "module": "tag-picker",
       "category": "form",
       "api": {
-        "reactSignature": "{ children, label, selectedLabel, selectedOptions, defaultSelectedOptions, selectedValues, defaultSelectedValues, inputValue, open, defaultOpen, positioning, disableAutoFocus = false, inline = false, noPopover = false, disabled, onOpenChange, onOptionSelect, onInputValueChange, onChange, ...props }: TagPickerProps",
+        "reactSignature": "{ children, label, selectedLabel, requiredMessage, selectedOptions, defaultSelectedOptions, selectedValues, defaultSelectedValues, inputValue, open, defaultOpen, positioning, disableAutoFocus = false, inline = false, noPopover = false, disabled, onOpenChange, onOptionSelect, onInputValueChange, onChange, ...props }: TagPickerProps",
         "relatedReactApis": [
+          {
+            "name": "TagPickerProps.requiredMessage",
+            "description": "Sets the native form validation message; defaults to SharePointUIProvider.strings.required."
+          },
           {
             "name": "TagPickerProps.selectedLabel",
             "description": "Names the selected-options group; defaults to SharePointUIProvider.strings.selectedOptionsLabel."
@@ -3513,7 +3647,7 @@
           },
           {
             "name": "TagPickerProps.positioning",
-            "description": "Positions the options surface relative to the control; supports placement shorthands, alignment, fallbacks, and offsets."
+            "description": "Positions and sizes the options surface within viewport or clipping-ancestor boundaries; supports placement, alignment, fallbacks, offsets, and custom bounds."
           },
           {
             "name": "TagPickerProps.disableAutoFocus",
@@ -3538,10 +3672,9 @@
         ],
         "reactRefType": "HTMLElement"
       },
-      "summary": "Search, choose, and remove multiple values with keyboard and native form support.",
+      "summary": "Search, choose, and remove multiple values with keyboard, native form support, and popup placement that adapts to SharePoint sections.",
       "highValueAdditions": [
-        "Add composed control, input, selected-tag group, and list primitives while preserving the single state engine.",
-        "Position the options surface against viewport and clipping ancestors, including SharePoint sections."
+        "Add composed control, input, selected-tag group, and list primitives while preserving the single state engine."
       ]
     },
     {
@@ -3551,7 +3684,8 @@
       "reactOnly": true,
       "category": "form-trigger",
       "api": {
-        "reactSignature": "{ children, appearance = \"outline\", size = \"medium\", disabled = false, ...props }: ElementProps & { children?: React.ReactNode; appearance?: \"filled-darker\" | \"filled-lighter\" | \"outline\" | \"underline\"; size?: \"small\" | \"medium\" | \"large\"; disabled?: boolean }",
+        "reactSignature": "{ children, appearance = \"outline\", size = \"medium\", disabled = false, ...props }: TagPickerButtonProps",
+        "reactRefType": "HTMLButtonElement",
         "callbackProps": [],
         "slots": [
           "button"
@@ -3698,7 +3832,13 @@
       "module": "rating",
       "category": "forms",
       "api": {
-        "reactSignature": "{ 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 }: RatingProps",
+        "reactSignature": "{ 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 }: RatingProps",
+        "relatedReactApis": [
+          {
+            "name": "RatingProps.requiredMessage",
+            "description": "Sets the native form validation message; defaults to SharePointUIProvider.strings.required."
+          }
+        ],
         "callbackProps": [
           "itemLabel",
           "onChange"
@@ -4891,7 +5031,7 @@
       "module": "nav",
       "category": "navigation",
       "api": {
-        "reactSignature": "{ 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 }: Omit<ElementProps, \"onSelect\" | \"onClick\" | \"onClickCapture\"> & { onClick?: React.MouseEventHandler<HTMLElement>; onClickCapture?: React.MouseEventHandler<HTMLElement>; children?: React.ReactNode; label?: string; selectedValue?: string | null; defaultSelectedValue?: string | null; selectedCategoryValue?: string | null; defaultSelectedCategoryValue?: string | null; openCategories?: readonly string[]; defaultOpenCategories?: readonly string[]; open?: boolean; defaultOpen?: boolean; collapsed?: boolean; defaultCollapsed?: boolean; collapsible?: boolean; multiple?: boolean; density?: \"small\" | \"medium\" | \"large\"; tabbable?: boolean | \"true\" | \"false\"; openLabel?: string; closeLabel?: string; onItemSelect?: (value: string, href: string | null, label: string) => void; onCategoryToggle?: (value: string, open: boolean, openCategories: string[]) => void; onNavItemSelect?: (event: SharePointUIEvent, data: NavReactItemSelectData) => void; onNavCategoryItemToggle?: (event: SharePointUIEvent, data: NavReactCategoryToggleData) => void; onOpenChange?: (open: boolean) => void; onCollapsedChange?: (collapsed: boolean) => void }",
+        "reactSignature": "{ 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 }: Omit<ElementProps, \"onSelect\" | \"onClick\" | \"onClickCapture\"> & { onClick?: React.MouseEventHandler<HTMLElement>; onClickCapture?: React.MouseEventHandler<HTMLElement>; children?: React.ReactNode; label?: string; selectedValue?: string | null; defaultSelectedValue?: string | null; selectedCategoryValue?: string | null; defaultSelectedCategoryValue?: string | null; openCategories?: readonly string[]; defaultOpenCategories?: readonly string[]; open?: boolean; defaultOpen?: boolean; collapsed?: boolean; defaultCollapsed?: boolean; fullWidth?: boolean; collapsible?: boolean; multiple?: boolean; density?: \"small\" | \"medium\" | \"large\"; tabbable?: boolean | \"true\" | \"false\"; openLabel?: string; closeLabel?: string; onItemSelect?: (value: string, href: string | null, label: string) => void; onCategoryToggle?: (value: string, open: boolean, openCategories: string[]) => void; onNavItemSelect?: (event: SharePointUIEvent, data: NavReactItemSelectData) => void; onNavCategoryItemToggle?: (event: SharePointUIEvent, data: NavReactCategoryToggleData) => void; onOpenChange?: (open: boolean) => void; onCollapsedChange?: (collapsed: boolean) => void }",
         "callbackProps": [
           "onItemSelect",
           "onCategoryToggle",
@@ -5393,7 +5533,7 @@
           "host className/style",
           "named ::part hooks"
         ],
-        "reactSignature": "{ children, label, appearance, slot = \"navigation\", ...props }: ElementProps & { children?: React.ReactNode; label?: string; appearance?: \"brand\"; slot?: string }",
+        "reactSignature": "{ children, label, appearance, slot = \"navigation\", ...props }: ElementProps & { children?: React.ReactNode; label?: string; appearance?: \"brand\" | \"thumbnails\"; slot?: string }",
         "slots": [
           "navigation buttons"
         ],
@@ -5402,11 +5542,11 @@
       "react": "CarouselNav",
       "tag": "spui-carousel-nav",
       "define": "defineCarouselNav",
-      "signature": "{ children, label, appearance, ...props }: ElementProps & { children?: React.ReactNode; label?: string; appearance?: \"brand\" }",
+      "signature": "{ children, label, appearance, ...props }: ElementProps & { children?: React.ReactNode; label?: string; appearance?: \"brand\" | \"thumbnails\" }",
       "slots": [
         "navigation buttons"
       ],
-      "summary": "Group carousel position buttons with RTL-aware roving keyboard focus."
+      "summary": "Group carousel position buttons with RTL-aware roving keyboard focus; use the scrollable thumbnails appearance with image buttons for gallery navigation."
     },
     {
       "module": "carousel",
@@ -5417,7 +5557,8 @@
           "SharePointUIProvider tokens",
           "CSS custom properties",
           "host className/style",
-          "named ::part hooks"
+          "named ::part hooks",
+          "appearance: brand or thumbnails"
         ],
         "reactSignature": "{ children, index, label, selected = false, disabled = false, ...props }: ElementProps & { children?: React.ReactNode; index: number; label?: string; selected?: boolean; disabled?: boolean }",
         "slots": [
@@ -5801,8 +5942,12 @@
     }
   ],
   "agentContract": {
+    "composition": "Import named components from @spfx-fast/sharepoint-ui/react. Put one SharePointUIProvider around the view. Compose with children by default; use only the slots and component props listed for that component.",
     "reactProps": "Each component entry exposes its React parameter signature; callback props describe emitted value/state changes.",
+    "state": "State props, initial default props, callback names, and callback arguments vary by component. Follow that component's signature and callbackProps; update controlled state in its callback.",
     "slots": "Use the listed slots for content. Prefer ViewCard over custom markup for common SharePoint records.",
+    "customElements": "Import the component's define function from @spfx-fast/sharepoint-ui/elements/{module} and register it once. Set objects and callbacks as DOM properties. For event names and statically visible detail keys, use the source module's event inventory at https://vystartasv.github.io/sharepoint-ui/agents/events/{module}.json; it is module-scoped, so check event.target when composed tags emit events.",
+    "styling": "Theme, typography, locale, and direction inherit from SharePointUIProvider. Style the host with tokens, documented CSS variables, or ::part hooks; do not target shadow-DOM internals.",
     "localization": "Set lang and dir from the host language. SPFx uses pageContext.cultureInfo.currentUICultureName and isRightToLeft. Supply SharePointUIProvider strings for built-in control labels.",
     "theme": "Call applySharePointTheme at the SPFx web-part boundary; it forwards SharePoint palette, semantic colors, effects, spacing, font ramps, and default font styles as --spui-* variables. React can use SharePointUIProvider appearance and density (compact, comfortable, touch), theme.brandColor for derived accent/state roles, fluentTokens for raw Fluent variables, theme for typed semantic/design roles, and tokens for direct --spui-* overrides. Nested providers merge semantic groups and inherit density. Explicit theme roles override generated brand roles; direct tokens and element inline styles override these. Hex brand colors derive an AA-aware black-or-white on-accent foreground; set colors.accentForeground for other CSS color formats. CSS custom properties and ::part hooks remain public styling surfaces.",
     "persistence": "Keep SharePoint reads and writes in the web part or its service; controls expose values and do not persist data.",

package/dist/appearance.js

@@ -34,7 +34,7 @@ export function getSharePointUIStyleTokens(appearance = "fluent", overrides, bas
             "--spui-ui-warning-surface": "var(--spui-semantic-warning-background, #fff4ce)",
             "--spui-ui-danger": "var(--spui-semantic-error-text, #b10e1c)",
             "--spui-ui-danger-surface": "var(--spui-semantic-error-background, #fde7e9)",
-            "--spui-focus-ring": "var(--spui-ui-border-focus)"
+            "--spui-focus-ring": "var(--spui-semantic-focus-border, var(--colorStrokeFocus2, var(--spui-ui-accent)))"
         });
     else {
         const presetText = String(tokens["--spui-ui-text"]);
@@ -61,7 +61,7 @@ export function getSharePointUIStyleTokens(appearance = "fluent", overrides, bas
             "--spui-ui-warning-surface": `var(--spui-semantic-warning-background, ${tokens["--spui-ui-warning-surface"]})`,
             "--spui-ui-danger": `var(--spui-semantic-error-text, ${tokens["--spui-ui-danger"]})`,
             "--spui-ui-danger-surface": `var(--spui-semantic-error-background, ${tokens["--spui-ui-danger-surface"]})`,
-            "--spui-focus-ring": "var(--spui-ui-border-focus)"
+            "--spui-focus-ring": "var(--spui-semantic-focus-border, var(--colorStrokeFocus2, var(--spui-ui-accent)))"
         });
     }
     if (selectedBase === "ios") {
@@ -85,7 +85,7 @@ export function getSharePointUIStyleTokens(appearance = "fluent", overrides, bas
             "--spui-ui-warning-surface": "light-dark(var(--spui-semantic-warning-background, #fff3d6), color-mix(in srgb, var(--spui-semantic-warning-background, #342900) 28%, black 72%))",
             "--spui-ui-danger": "light-dark(var(--spui-semantic-error-text, #d70015), color-mix(in srgb, var(--spui-semantic-error-text, #d70015) 30%, white 70%))",
             "--spui-ui-danger-surface": "light-dark(var(--spui-semantic-error-background, #ffe5e8), color-mix(in srgb, var(--spui-semantic-error-background, #3a1114) 28%, black 72%))",
-            "--spui-focus-ring": "var(--spui-ui-border-focus)"
+            "--spui-focus-ring": "var(--spui-semantic-focus-border, var(--colorStrokeFocus2, var(--spui-ui-accent)))"
         });
     }
     // Stable shared roles for applications that style slots or compose their own
@@ -202,7 +202,7 @@ export function getSharePointUIStyleTokens(appearance = "fluent", overrides, bas
             "--spui-control-height": scalePresetLength(tokens["--spui-base-control-height"], 1.04),
             "--spui-card-padding": scalePresetLength(tokens["--spui-base-card-padding"], 1.12),
             "--spui-control-gap": scalePresetLength(tokens["--spui-base-control-gap"], 1.12),
-            "--spui-color-scheme": "light"
+            "--spui-color-scheme": tokens["--spui-color-scheme"] ?? "light"
         });
     if (appearance === "glass") {
         // Directly specified finished values win; base values still flow through

package/dist/elements/alert.js

@@ -1,4 +1,10 @@
 import { base } from "./shared.js";
+const alertIconPaths = {
+    info: "M10 2.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15ZM10 9v5m0-7h.01",
+    success: "M10 2.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15ZM6.5 10l2.3 2.3 4.7-5.1",
+    warning: "m10 2.5 8 14H2l8-14ZM10 7v4m0 3.5h.01",
+    error: "M10 2.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15ZM7 7l6 6m0-6-6 6",
+};
 export function defineAlert() {
     if (customElements.get("spui-alert"))
         return;
@@ -23,6 +29,9 @@ export function defineAlert() {
             const avatar = this.shadowRoot?.querySelector('slot[name="avatar"]');
             if (icon && avatar)
                 icon.hidden = avatar.assignedElements().length > 0;
+            const iconPath = icon?.querySelector(".icon path");
+            if (iconPath)
+                iconPath.setAttribute("d", alertIconPaths[intent ?? "info"] ?? alertIconPaths.info);
         }
         render() {
             const shadow = this.attachShadow({ mode: "open" });
@@ -37,6 +46,13 @@ export function defineAlert() {
             defaultIcon.className = "icon";
             defaultIcon.setAttribute("aria-hidden", "true");
             icon.append(defaultIcon);
+            const iconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            iconSvg.setAttribute("viewBox", "0 0 20 20");
+            iconSvg.setAttribute("focusable", "false");
+            const iconPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            iconPath.setAttribute("d", alertIconPaths.info);
+            iconSvg.append(iconPath);
+            defaultIcon.append(iconSvg);
             const content = document.createElement("div");
             content.className = "content";
             content.part.add("content");
@@ -49,12 +65,20 @@ export function defineAlert() {
             actions.part.add("actions");
             const button = document.createElement("button");
             button.type = "button";
-            button.textContent = "×";
             button.hidden = !this.hasAttribute("dismissible");
             button.part.add("dismiss");
+            const closeSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            closeSvg.classList.add("dismiss-icon");
+            closeSvg.setAttribute("viewBox", "0 0 20 20");
+            closeSvg.setAttribute("aria-hidden", "true");
+            closeSvg.setAttribute("focusable", "false");
+            const closePath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            closePath.setAttribute("d", "m5 5 10 10M15 5 5 15");
+            closeSvg.append(closePath);
+            button.append(closeSvg);
             button.addEventListener("click", () => { this.hidden = true; this.dispatchEvent(new CustomEvent("spui-dismiss", { bubbles: true, composed: true })); });
             const style = document.createElement("style");
-            style.textContent = `${base}:host{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--spui-control-border,var(--spui-ui-stroke,#d1d1d1));border-inline-start:4px solid var(--spui-ui-accent,#0f6cbd);border-radius:var(--spui-control-radius,6px);background:var(--spui-ui-canvas,#f5f5f5);line-height:1.45}:host([hidden]){display:none}.content{flex:1;min-width:0}.icon{font-weight:700;color:var(--spui-ui-accent,#0f6cbd)}.icon:before{content:'ℹ'}slot[name=actions]::slotted(*){display:flex;align-items:center;gap:8px}slot[name=action]::slotted(button){border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;cursor:pointer}slot[name=action]::slotted(button:focus-visible){outline:2px solid var(--spui-focus-ring,#005a9e);outline-offset:2px}:host([intent=success]){border-inline-start-color:var(--spui-ui-success,#107c10);background:var(--spui-success-surface,var(--spui-ui-success-surface,#dff6dd))}:host([intent=success]) .icon{color:var(--spui-ui-success,#107c10)}:host([intent=success]) .icon:before{content:'✓'}:host([intent=warning]){border-inline-start-color:var(--spui-ui-warning,#835b00);background:var(--spui-warning-surface,var(--spui-ui-warning-surface,#fff4ce))}:host([intent=warning]) .icon{color:var(--spui-ui-warning,#835b00)}:host([intent=warning]) .icon:before{content:'⚠'}:host([intent=error]){border-inline-start-color:var(--spui-ui-danger,#b10e1c);background:var(--spui-danger-surface,var(--spui-ui-danger-surface,#fde7e9))}:host([intent=error]) .icon{color:var(--spui-ui-danger,#b10e1c)}:host([intent=error]) .icon:before{content:'!'}:host([appearance=inverted]){color:var(--colorNeutralForegroundInverted2,var(--spui-ui-surface,#fff));background:var(--colorNeutralBackgroundInverted,var(--spui-ui-text,#242424));border-color:var(--spui-alert-inverted-border,transparent)}:host([appearance=inverted]) .icon{color:currentColor}button{border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;font-size:18px;line-height:1;padding:2px 6px;cursor:pointer}button:hover{background:var(--spui-ui-surface-hover,#0001)}button:focus-visible{outline:2px solid var(--spui-focus-ring,#005a9e);outline-offset:2px}button[hidden]{display:none}:host([data-spui-appearance=glass]),:host-context([data-spui-appearance=glass]){backdrop-filter:var(--spui-card-backdrop,none);border-color:var(--spui-card-border,#ffffff80)}@media(forced-colors:active){:host{border-color:CanvasText;color:CanvasText;background:Canvas}.icon{color:CanvasText}}`;
+            style.textContent = `${base}:host{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--spui-control-border,var(--spui-ui-stroke,#d1d1d1));border-inline-start:2px solid var(--spui-ui-accent,#0f6cbd);border-radius:var(--spui-control-radius,6px);background:var(--spui-ui-canvas,#f5f5f5);line-height:1.45}:host([hidden]){display:none}.content{flex:1;min-width:0}.icon{display:inline-flex;flex:none;align-items:center;justify-content:center;color:var(--spui-ui-accent,#0f6cbd)}.icon svg,.dismiss-icon{display:block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.icon svg{width:18px;height:18px}slot[name=actions]::slotted(*){display:flex;align-items:center;gap:8px}slot[name=action]::slotted(button){border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;cursor:pointer}slot[name=action]::slotted(button:focus-visible){outline:2px solid var(--spui-focus-ring,#005a9e);outline-offset:2px}:host([intent=success]){border-inline-start-color:var(--spui-ui-success,#107c10);background:var(--spui-success-surface,var(--spui-ui-success-surface,#dff6dd))}:host([intent=success]) .icon{color:var(--spui-ui-success,#107c10)}:host([intent=warning]){border-inline-start-color:var(--spui-ui-warning,#835b00);background:var(--spui-warning-surface,var(--spui-ui-warning-surface,#fff4ce))}:host([intent=warning]) .icon{color:var(--spui-ui-warning,#835b00)}:host([intent=error]){border-inline-start-color:var(--spui-ui-danger,#b10e1c);background:var(--spui-danger-surface,var(--spui-ui-danger-surface,#fde7e9))}:host([intent=error]) .icon{color:var(--spui-ui-danger,#b10e1c)}:host([appearance=inverted]){color:var(--colorNeutralForegroundInverted2,var(--spui-ui-surface,#fff));background:var(--colorNeutralBackgroundInverted,var(--spui-ui-text,#242424));border-color:var(--spui-alert-inverted-border,transparent)}:host([appearance=inverted]) .icon{color:currentColor}button{border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;line-height:1;padding:2px 6px;cursor:pointer}button:hover{background:var(--spui-ui-surface-hover,#0001)}button:focus-visible{outline:2px solid var(--spui-focus-ring,#005a9e);outline-offset:2px}button[hidden]{display:none}:host([data-spui-appearance=glass]),:host-context([data-spui-appearance=glass]){backdrop-filter:var(--spui-card-backdrop,none);border-color:var(--spui-card-border,#ffffff80)}@media(forced-colors:active){:host{border-color:CanvasText;color:CanvasText;background:Canvas}.icon{color:CanvasText}}`;
             shadow.append(style, avatar, icon, content, action, actions, button);
         }
     }

package/dist/elements/avatar.js

@@ -85,7 +85,7 @@ export function defineAvatar() {
             this.fallback.innerHTML = '<svg viewBox="0 0 24 24" focusable="false"><path d="M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm0 2c-4.4 0-8 2.2-8 5v2h16v-2c0-2.8-3.6-5-8-5Z"/></svg>';
             this.surface.append(this.image, this.initials, this.fallback);
             const style = document.createElement("style");
-            style.textContent = `${base}:host{--spui-avatar-size:32px;display:inline-grid;flex:none;width:var(--spui-avatar-size);height:var(--spui-avatar-size);vertical-align:middle;line-height:1}:host([size]){width:var(--spui-avatar-size);height:var(--spui-avatar-size)}.surface{position:relative;box-sizing:border-box;display:grid;place-items:center;width:100%;height:100%;overflow:hidden;border:1px solid var(--spui-avatar-border,var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1)));border-radius:var(--spui-avatar-radius,50%);background:var(--spui-avatar-background,var(--spui-semantic-body-subtext,var(--colorNeutralBackground3,#f0f0f0)));color:var(--spui-avatar-foreground,var(--spui-semantic-body-text,var(--colorNeutralForeground1,#323130)));font:600 calc(var(--spui-avatar-size) * .36)/1 var(--spui-font-family,inherit);user-select:none}.image{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}.initials{z-index:0;max-width:100%;overflow:hidden;padding:0 2px;text-overflow:clip;white-space:nowrap}.fallback{z-index:0;display:grid;place-items:center;width:62%;height:62%;color:currentColor}.initials:not(:empty)~.fallback{display:none}.fallback svg{display:block;width:100%;height:100%;fill:currentColor}:host([data-image-state=loading]) .image,:host([data-image-state=error]) .image{visibility:hidden}:host([data-image-state=loaded]) .initials,:host([data-image-state=loaded]) .fallback{visibility:hidden}:host([shape=square]) .surface{border-radius:var(--spui-avatar-radius,var(--spui-control-radius,6px))}:host([color=brand]) .surface{background:var(--spui-avatar-brand-background,var(--spui-semantic-primary-button-background,var(--colorBrandBackground,var(--spui-avatar-active-color,var(--spui-ui-accent,#78716c)))));color:var(--spui-avatar-brand-foreground,var(--spui-semantic-primary-button-text,var(--colorNeutralForegroundOnBrand,#fff)))}:host([color=colorful]) .surface,:host([data-named-color]) .surface{background:var(--spui-avatar-colorful-background,var(--spui-semantic-primary-button-background,var(--colorBrandBackground,var(--spui-avatar-active-color,var(--spui-ui-accent,#78716c)))));color:var(--spui-avatar-colorful-foreground,var(--spui-semantic-primary-button-text,#fff))}:host([active=active]:not([active-appearance])) .surface,:host([active=active][active-appearance=ring]) .surface{box-shadow:0 0 0 2px var(--spui-ui-surface,#fff),0 0 0 4px var(--spui-avatar-active-color,var(--spui-ui-accent,#78716c))}:host([active=active][active-appearance=shadow]) .surface{box-shadow:var(--spui-avatar-active-shadow,var(--spui-card-shadow,0 2px 8px rgb(0 0 0 / 24%)))}:host([active=active][active-appearance=ring-shadow]) .surface{box-shadow:0 0 0 2px var(--spui-ui-surface,#fff),0 0 0 4px var(--spui-avatar-active-color,var(--spui-ui-accent,#78716c)),var(--spui-avatar-active-shadow,var(--spui-card-shadow,0 2px 8px rgb(0 0 0 / 24%)))}:host([active=inactive]){opacity:.56}:host([data-custom-icon=true]) .initials,:host([data-custom-icon=true]) .fallback{display:none}:host([data-custom-icon=true]) .icon{z-index:0;display:grid;place-items:center;width:70%;height:70%;color:inherit}:host([data-custom-badge=true]) .badge{position:absolute;z-index:2;inset-block-end:0;inset-inline-end:0;display:grid;place-items:center;min-width:var(--spui-avatar-badge-size,10px);min-height:var(--spui-avatar-badge-size,10px);border:2px solid var(--spui-avatar-badge-border,var(--spui-ui-surface,#fff));border-radius:50%;background:var(--spui-avatar-badge-background,var(--spui-semantic-success-background,#13a10e));color:var(--spui-avatar-badge-foreground,#fff);font:600 9px/1 var(--spui-font-family,inherit)}:host(:not([data-custom-badge=true])) .badge{display:none}@media(forced-colors:active){.surface{border-color:CanvasText;background:Canvas;color:CanvasText;forced-color-adjust:none}:host([data-named-color]) .surface{border-color:CanvasText;background:Canvas;color:CanvasText}.image{forced-color-adjust:auto}:host([active=active]) .surface{outline:2px solid Highlight;outline-offset:2px;box-shadow:none}}`;
+            style.textContent = `${base}:host{--spui-avatar-size:32px;display:inline-grid;flex:none;width:var(--spui-avatar-size);height:var(--spui-avatar-size);vertical-align:middle;line-height:1}:host([size]){width:var(--spui-avatar-size);height:var(--spui-avatar-size)}.surface{position:relative;box-sizing:border-box;display:grid;place-items:center;width:100%;height:100%;overflow:hidden;border:1px solid var(--spui-avatar-border,var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1)));border-radius:var(--spui-avatar-radius,50%);background:var(--spui-avatar-background,var(--spui-semantic-body-subtext,var(--colorNeutralBackground3,#f0f0f0)));color:var(--spui-avatar-foreground,var(--spui-semantic-body-text,var(--colorNeutralForeground1,#323130)));font:600 calc(var(--spui-avatar-size) * .36)/1 var(--spui-font-family,inherit);user-select:none}.image{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}.initials{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;max-width:100%;overflow:hidden;padding:0 2px;text-align:center;line-height:1;white-space:nowrap}.fallback{z-index:0;display:grid;place-items:center;width:62%;height:62%;color:currentColor}.initials:not(:empty)~.fallback{display:none}.fallback svg{display:block;width:100%;height:100%;fill:currentColor}:host([data-image-state=loading]) .image,:host([data-image-state=error]) .image{visibility:hidden}:host([data-image-state=loaded]) .initials,:host([data-image-state=loaded]) .fallback{visibility:hidden}:host([shape=square]) .surface{border-radius:var(--spui-avatar-radius,var(--spui-control-radius,6px))}:host([color=brand]) .surface{background:var(--spui-avatar-brand-background,var(--spui-semantic-primary-button-background,var(--colorBrandBackground,var(--spui-avatar-active-color,var(--spui-ui-accent,#78716c)))));color:var(--spui-avatar-brand-foreground,var(--spui-semantic-primary-button-text,var(--colorNeutralForegroundOnBrand,#fff)))}:host([color=colorful]) .surface,:host([data-named-color]) .surface{background:var(--spui-avatar-colorful-background,var(--spui-semantic-primary-button-background,var(--colorBrandBackground,var(--spui-avatar-active-color,var(--spui-ui-accent,#78716c)))));color:var(--spui-avatar-colorful-foreground,var(--spui-semantic-primary-button-text,#fff))}:host([active=active]:not([active-appearance])) .surface,:host([active=active][active-appearance=ring]) .surface{box-shadow:0 0 0 2px var(--spui-ui-surface,#fff),0 0 0 4px var(--spui-avatar-active-color,var(--spui-ui-accent,#78716c))}:host([active=active][active-appearance=shadow]) .surface{box-shadow:var(--spui-avatar-active-shadow,var(--spui-card-shadow,0 2px 8px rgb(0 0 0 / 24%)))}:host([active=active][active-appearance=ring-shadow]) .surface{box-shadow:0 0 0 2px var(--spui-ui-surface,#fff),0 0 0 4px var(--spui-avatar-active-color,var(--spui-ui-accent,#78716c)),var(--spui-avatar-active-shadow,var(--spui-card-shadow,0 2px 8px rgb(0 0 0 / 24%)))}:host([active=inactive]){opacity:.56}:host([data-custom-icon=true]) .initials,:host([data-custom-icon=true]) .fallback{display:none}:host([data-custom-icon=true]) .icon{z-index:0;display:grid;place-items:center;width:70%;height:70%;color:inherit}:host([data-custom-badge=true]) .badge{position:absolute;z-index:2;inset-block-end:0;inset-inline-end:0;display:grid;place-items:center;min-width:var(--spui-avatar-badge-size,10px);min-height:var(--spui-avatar-badge-size,10px);border:2px solid var(--spui-avatar-badge-border,var(--spui-ui-surface,#fff));border-radius:50%;background:var(--spui-avatar-badge-background,var(--spui-semantic-success-background,#13a10e));color:var(--spui-avatar-badge-foreground,#fff);font:600 9px/1 var(--spui-font-family,inherit)}:host(:not([data-custom-badge=true])) .badge{display:none}@media(forced-colors:active){.surface{border-color:CanvasText;background:Canvas;color:CanvasText;forced-color-adjust:none}:host([data-named-color]) .surface{border-color:CanvasText;background:Canvas;color:CanvasText}.image{forced-color-adjust:auto}:host([active=active]) .surface{outline:2px solid Highlight;outline-offset:2px;box-shadow:none}}`;
             style.textContent += `.surface{background:var(--spui-avatar-background,var(--spui-palette-neutral-light,var(--colorNeutralBackground3,#f0f0f0)));font-size:clamp(10px,calc(var(--spui-avatar-size) * .36),48px)}`;
             style.textContent += `@media(forced-colors:active){.surface{border-color:CanvasText;background:Canvas;color:CanvasText}}`;
             const icon = document.createElement("span");

package/dist/elements/button.js

@@ -1,5 +1,5 @@
 import { base, stopHostAccessibleNameSync, syncHostAccessibleName } from "./shared.js";
-const buttonCss = `${base}button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--spui-control-height,32px);padding-inline:var(--spui-control-padding-inline,14px);border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-button-border,var(--colorNeutralStroke1,#8a8886))));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,var(--spui-semantic-button-background,var(--colorNeutralBackground1,#fff))));box-shadow:var(--spui-control-shadow,none);color:var(--spui-ui-text,var(--spui-semantic-button-text,var(--colorNeutralForeground1,#323130)));font:inherit;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;transition:background-color var(--spui-motion-duration-normal,.15s) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1)),border-color var(--spui-motion-duration-normal,.15s) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1)),transform var(--spui-motion-duration-normal,.15s) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1))}button:hover:not(:disabled):not([aria-disabled=true]){background:var(--spui-button-secondary-hover,color-mix(in srgb,var(--spui-control-background,var(--spui-ui-surface,#fff)) 90%,var(--spui-ui-text,#242424) 10%))}button:active:not(:disabled):not([aria-disabled=true]){transform:scale(.98)}button.primary{border-color:var(--spui-primary-background,var(--spui-ui-accent,var(--spui-semantic-primary-button-background,var(--colorBrandBackground,#0078d4))));background:var(--spui-primary-background,var(--spui-ui-accent,var(--spui-semantic-primary-button-background,var(--colorBrandBackground,#0078d4))));color:var(--spui-ui-accent-text,var(--spui-semantic-primary-button-text,var(--colorNeutralForegroundOnBrand,#fff)))}button.primary:hover:not(:disabled):not([aria-disabled=true]){background:var(--spui-primary-hover,var(--spui-ui-accent-hover,var(--colorBrandBackgroundHover,#106ebe)))}button.primary:active:not(:disabled):not([aria-disabled=true]){background:var(--spui-ui-accent-pressed,var(--colorBrandBackgroundPressed,var(--spui-ui-accent-hover,#106ebe)))}button.outline{background:transparent}button.subtle,button.transparent{border-color:transparent;box-shadow:none}button.subtle{background:var(--spui-button-subtle-background,transparent)}button.transparent{background:transparent}button:disabled,button[aria-disabled=true]{opacity:.55;cursor:not-allowed}:host([size=small]) button{min-height:24px;padding-inline:8px;font-size:12px}:host([size=large]) button{min-height:40px;padding-inline:16px;font-size:16px}:host([shape=circular]) button{border-radius:999px}:host([shape=square]) button{border-radius:0}:host([data-spui-split-primary]) button{border-start-end-radius:0;border-end-end-radius:0}:host([data-spui-split-trigger]) button{border-start-start-radius:0;border-end-start-radius:0}:host([icon-only]) button{min-width:var(--spui-control-height,32px);padding-inline:0}:host([size=small][icon-only]) button{min-width:24px}:host([size=large][icon-only]) button{min-width:40px}:host([vertical]) button{flex-direction:column}.icon{display:inline-flex;align-items:center;justify-content:center;line-height:0}:host([vertical]) .icon{font-size:24px}.content{display:inline-flex;align-items:center;justify-content:center}:host([icon-position=after]) .icon{order:2}:host([icon-position=after]) .content{order:1}@media(prefers-reduced-motion:reduce){button{transition:none}}@media(forced-colors:active){button{border-color:ButtonText}button.primary{border-color:Highlight;background:Highlight;color:HighlightText}}`;
+const buttonCss = `${base}button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--spui-control-height,32px);padding-inline:var(--spui-control-padding-inline,14px);border:1px solid var(--spui-control-border,var(--spui-ui-stroke,var(--spui-semantic-button-border,var(--colorNeutralStroke1,#8a8886))));border-radius:var(--spui-control-radius,4px);background:var(--spui-control-background,var(--spui-ui-surface,var(--spui-semantic-button-background,var(--colorNeutralBackground1,#fff))));box-shadow:var(--spui-control-shadow,none);color:var(--spui-ui-text,var(--spui-semantic-button-text,var(--colorNeutralForeground1,#323130)));font:inherit;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;transition:background-color var(--spui-motion-duration-normal,.15s) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1)),border-color var(--spui-motion-duration-normal,.15s) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1)),transform var(--spui-motion-duration-normal,.15s) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1))}button:hover:not(:disabled):not([aria-disabled=true]){background:var(--spui-button-secondary-hover,color-mix(in srgb,var(--spui-control-background,var(--spui-ui-surface,#fff)) 90%,var(--spui-ui-text,#242424) 10%))}button:active:not(:disabled):not([aria-disabled=true]){transform:scale(.98)}button.primary{border-color:var(--spui-primary-background,var(--spui-ui-accent,var(--spui-semantic-primary-button-background,var(--colorBrandBackground,#0078d4))));background:var(--spui-primary-background,var(--spui-ui-accent,var(--spui-semantic-primary-button-background,var(--colorBrandBackground,#0078d4))));color:var(--spui-ui-accent-text,var(--spui-semantic-primary-button-text,var(--colorNeutralForegroundOnBrand,#fff)))}button.primary:hover:not(:disabled):not([aria-disabled=true]){background:var(--spui-primary-hover,var(--spui-ui-accent-hover,var(--colorBrandBackgroundHover,#106ebe)))}button.primary:active:not(:disabled):not([aria-disabled=true]){background:var(--spui-ui-accent-pressed,var(--colorBrandBackgroundPressed,var(--spui-ui-accent-hover,#106ebe)))}button.outline{background:transparent}button.subtle,button.transparent{border-color:transparent;box-shadow:none}button.subtle{background:var(--spui-button-subtle-background,transparent)}button.transparent{background:transparent}:host([data-spui-appearance=glass]) button:not(.primary),:host-context([data-spui-appearance=glass]) button:not(.primary){backdrop-filter:var(--spui-card-backdrop,blur(16px) saturate(150%))}button:disabled,button[aria-disabled=true]{opacity:.55;cursor:not-allowed}:host([size=small]) button{min-height:24px;padding-inline:8px;font-size:12px}:host([size=large]) button{min-height:40px;padding-inline:16px;font-size:16px}:host([shape=circular]) button{border-radius:999px}:host([shape=square]) button{border-radius:0}:host([data-spui-split-primary]) button{border-start-end-radius:0;border-end-end-radius:0}:host([data-spui-split-trigger]) button{border-start-start-radius:0;border-end-start-radius:0}:host([icon-only]) button{min-width:var(--spui-control-height,32px);padding-inline:0}:host([size=small][icon-only]) button{min-width:24px}:host([size=large][icon-only]) button{min-width:40px}:host([vertical]) button{flex-direction:column}.icon{display:inline-flex;align-items:center;justify-content:center;line-height:0}:host([vertical]) .icon{font-size:24px}.content{display:inline-flex;align-items:center;justify-content:center}:host([icon-position=after]) .icon{order:2}:host([icon-position=after]) .content{order:1}@media(prefers-reduced-motion:reduce){button{transition:none}}@media(forced-colors:active){button{border-color:ButtonText}button.primary{border-color:Highlight;background:Highlight;color:HighlightText}}`;
 export const buttonControlCss = buttonCss.replace(/\bbutton(?=[.#:[\s,{])/g, ":is(button,a)");
 const buttonSheets = new WeakMap();
 const buttonSheetUnsupported = new WeakSet();

package/dist/elements/carousel.js

@@ -30,7 +30,7 @@ export function defineCarouselNav() {
                 return;
             const root = this.attachShadow({ mode: "open" });
             const style = document.createElement("style");
-            style.textContent = `${base}:host{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0}:host([appearance=brand]){--spui-carousel-indicator:var(--spui-ui-accent,#0078d4)}slot{display:contents}`;
+            style.textContent = `${base}:host{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0}:host([appearance=brand]){--spui-carousel-indicator:var(--spui-ui-accent,#0078d4)}:host([appearance=thumbnails]){justify-content:flex-start;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:inline mandatory;scrollbar-width:thin;padding-block:4px}:host([appearance=thumbnails]) div[role=group]{display:flex;align-items:center;gap:8px;width:max-content;min-width:100%}:host([appearance=thumbnails]) ::slotted(spui-carousel-nav-image-button){scroll-snap-align:start}slot{display:contents}`;
             const group = document.createElement("div");
             group.setAttribute("role", "group");
             group.setAttribute("aria-label", this.getAttribute("aria-label") || "Slide navigation");
@@ -63,6 +63,9 @@ function defineCarouselNavControl(tag, image) {
                 this.button.type = "button";
                 if (image) {
                     this.picture = document.createElement("img");
+                    this.picture.loading = "lazy";
+                    this.picture.decoding = "async";
+                    this.picture.draggable = false;
                     const imageSlot = document.createElement("slot");
                     imageSlot.name = "image";
                     imageSlot.append(this.picture);
@@ -460,7 +463,7 @@ export function defineCarousel() {
             this.slides.forEach(slide => { this.restoreSlideState(slide); this.restoreSlideLayout(slide); });
         }
         attributeChangedCallback(name) {
-            if (!this.isConnected)
+            if (!this.isConnected || !this.controls)
                 return;
             if ((name === "selected-index" || name === "active-index") && this.hasAttribute("controlled"))
                 this.setIndex(Number(this.getAttribute(name)), false);