@usefragments/ui 1.6.0 → 2.0.0

package/src/components/Command/Command.module.scss

@@ -1,4 +1,6 @@
 @use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/action" as action;
 @use "../../recipes/field" as field;
 @use "../../recipes/popup" as popup;
@@ -10,6 +12,16 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  @include high-contrast-outline;
+}
+
+// Hosted: the surrounding surface is the frame; the pick list keeps only its
+// own inset.
+.hosted {
+  background: transparent;
+  border: 0;
+  border-radius: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  box-shadow: none;
 }
 
 .inputWrapper {
@@ -18,8 +30,8 @@
 
   display: flex;
   align-items: center;
-  gap: var(--fui-popup-row-content-gap);
-  margin-block-end: var(--fui-popup-container-inset);
+  gap: var(--fui-popup-row-content-gap, var(--fui-raw-space-8, #{measurements.raw-space(8)}));
+  margin-block-end: var(--fui-popup-container-inset, var(--fui-raw-space-4, #{measurements.raw-space(4)}));
 
   &:focus-within {
     @include field.focus-state;
@@ -36,7 +48,7 @@
 .input {
   flex: 1;
   min-inline-size: 0;
-  padding: 0;
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   border: none;
   outline: none;
   color: var(--fui-text-primary, $fui-text-primary);
@@ -69,8 +81,8 @@
   }
 
   > svg {
-    inline-size: var(--fui-popup-indicator-box);
-    block-size: var(--fui-popup-indicator-box);
+    inline-size: var(--fui-popup-indicator-box, var(--fui-raw-space-16, #{measurements.raw-space(16)}));
+    block-size: var(--fui-popup-indicator-box, var(--fui-raw-space-16, #{measurements.raw-space(16)}));
     flex: 0 0 auto;
   }
 }
@@ -97,8 +109,8 @@
 .empty {
   @include typography.role("body-compact");
 
-  padding-block: var(--fui-popup-row-block-inset);
-  padding-inline: var(--fui-popup-row-inline-inset);
+  padding-block: var(--fui-popup-row-block-inset, var(--fui-raw-space-8, #{measurements.raw-space(8)}));
+  padding-inline: var(--fui-popup-row-inline-inset, var(--fui-raw-space-8, #{measurements.raw-space(8)}));
   color: var(--fui-text-secondary, $fui-text-secondary);
   text-align: center;
 }
@@ -106,17 +118,3 @@
 .separator {
   @include popup.group-separator;
 }
-
-@media (prefers-contrast: more) {
-  .command {
-    border-color: var(--fui-text-primary, $fui-text-primary);
-    outline: var(--fui-stroke-hairline, 1px) solid var(--fui-text-primary, $fui-text-primary);
-    outline-offset: calc(-1 * var(--fui-stroke-default, 2px));
-  }
-
-  .itemActive {
-    outline: var(--fui-focus-ring-width, $fui-focus-ring-width) solid
-      var(--fui-color-accent, $fui-color-accent);
-    outline-offset: calc(-1 * var(--fui-focus-ring-width, $fui-focus-ring-width));
-  }
-}

package/src/components/Command/index.tsx

@@ -1,7 +1,7 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import styles from './Command.module.scss';
+import * as React from "react";
+import styles from "./Command.module.scss";
 
 // ============================================
 // Types
@@ -20,6 +20,11 @@ export interface CommandProps extends React.HTMLAttributes<HTMLDivElement> {
   filter?: (value: string, search: string, keywords?: string[]) => number;
   /** Whether to loop keyboard navigation. Default: true */
   loop?: boolean;
+  /**
+   * The Command sits inside another surface (a Popover, a Dialog) that draws
+   * the frame, so it draws none of its own.
+   */
+  hosted?: boolean;
 }
 
 export interface CommandInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -30,7 +35,7 @@ export interface CommandListProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 
-export interface CommandItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+export interface CommandItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
   children: React.ReactNode;
   /** Value used for filtering (falls back to text content) */
   value?: string;
@@ -78,13 +83,13 @@ function defaultFilter(value: string, search: string, keywords?: string[]): numb
 }
 
 function getTextContent(node: React.ReactNode): string {
-  if (typeof node === 'string' || typeof node === 'number') return String(node);
-  if (Array.isArray(node)) return node.map(getTextContent).join(' ');
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(getTextContent).join(" ");
   if (React.isValidElement(node)) {
     const childProps = node.props as { children?: React.ReactNode };
     return getTextContent(childProps.children);
   }
-  return '';
+  return "";
 }
 
 // ============================================
@@ -115,7 +120,7 @@ const CommandContext = React.createContext<CommandContextValue | null>(null);
 
 function useCommandContext() {
   const ctx = React.useContext(CommandContext);
-  if (!ctx) throw new Error('Command sub-components must be used within <Command>');
+  if (!ctx) throw new Error("Command sub-components must be used within <Command>");
   return ctx;
 }
 
@@ -150,10 +155,11 @@ function SearchIcon() {
 function CommandRoot({
   children,
   search: controlledSearch,
-  defaultSearch = '',
+  defaultSearch = "",
   onSearchChange,
   filter = defaultFilter,
   loop = true,
+  hosted = false,
   className,
   ...htmlProps
 }: CommandProps) {
@@ -231,14 +237,25 @@ function CommandRoot({
       visibleCount,
       listId,
     }),
-    [search, setSearch, filter, scores, registerItem, unregisterItem, activeId, loop, visibleCount, listId]
+    [
+      search,
+      setSearch,
+      filter,
+      scores,
+      registerItem,
+      unregisterItem,
+      activeId,
+      loop,
+      visibleCount,
+      listId,
+    ]
   );
 
   return (
     <CommandContext.Provider value={contextValue}>
       <div
         {...htmlProps}
-        className={[styles.command, className].filter(Boolean).join(' ')}
+        className={[styles.command, hosted && styles.hosted, className].filter(Boolean).join(" ")}
         role="search"
       >
         {children}
@@ -247,12 +264,7 @@ function CommandRoot({
   );
 }
 
-function CommandInput({
-  className,
-  onChange,
-  onKeyDown,
-  ...htmlProps
-}: CommandInputProps) {
+function CommandInput({ className, onChange, onKeyDown, ...htmlProps }: CommandInputProps) {
   const { search, setSearch, listRef, setActiveId, activeId, loop, listId } = useCommandContext();
   const inputRef = React.useRef<HTMLInputElement>(null);
 
@@ -261,7 +273,7 @@ function CommandInput({
     if (!list) return [];
     return Array.from(
       list.querySelectorAll<HTMLElement>('[data-command-item]:not([data-disabled="true"])')
-    ).filter((el) => el.style.display !== 'none');
+    ).filter((el) => el.style.display !== "none");
   }, [listRef]);
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
@@ -270,45 +282,48 @@ function CommandInput({
 
     const items = getEnabledItems();
     if (items.length === 0) return;
+    const firstItem = items[0];
+    const lastItem = items.at(-1);
+    if (!firstItem || !lastItem) return;
 
-    const currentIndex = activeId
-      ? items.findIndex((item) => item.id === activeId)
-      : -1;
+    const currentIndex = activeId ? items.findIndex((item) => item.id === activeId) : -1;
 
     switch (event.key) {
-      case 'ArrowDown': {
+      case "ArrowDown": {
         event.preventDefault();
         if (currentIndex < 0) {
-          setActiveId(items[0].id);
+          setActiveId(firstItem.id);
         } else if (currentIndex < items.length - 1) {
-          setActiveId(items[currentIndex + 1].id);
+          const nextItem = items[currentIndex + 1];
+          if (nextItem) setActiveId(nextItem.id);
         } else if (loop) {
-          setActiveId(items[0].id);
+          setActiveId(firstItem.id);
         }
         break;
       }
-      case 'ArrowUp': {
+      case "ArrowUp": {
         event.preventDefault();
         if (currentIndex < 0) {
-          setActiveId(items[items.length - 1].id);
+          setActiveId(lastItem.id);
         } else if (currentIndex > 0) {
-          setActiveId(items[currentIndex - 1].id);
+          const previousItem = items[currentIndex - 1];
+          if (previousItem) setActiveId(previousItem.id);
         } else if (loop) {
-          setActiveId(items[items.length - 1].id);
+          setActiveId(lastItem.id);
         }
         break;
       }
-      case 'Home': {
+      case "Home": {
         event.preventDefault();
-        setActiveId(items[0].id);
+        setActiveId(firstItem.id);
         break;
       }
-      case 'End': {
+      case "End": {
         event.preventDefault();
-        setActiveId(items[items.length - 1].id);
+        setActiveId(lastItem.id);
         break;
       }
-      case 'Enter': {
+      case "Enter": {
         event.preventDefault();
         if (activeId) {
           const activeItem = items.find((item) => item.id === activeId);
@@ -343,7 +358,7 @@ function CommandInput({
           setSearch(e.target.value);
         }}
         onKeyDown={handleKeyDown}
-        className={[styles.input, className].filter(Boolean).join(' ')}
+        className={[styles.input, className].filter(Boolean).join(" ")}
       />
     </div>
   );
@@ -358,7 +373,7 @@ function CommandList({ children, className, ...htmlProps }: CommandListProps) {
       {...htmlProps}
       id={listId}
       role="listbox"
-      className={[styles.list, className].filter(Boolean).join(' ')}
+      className={[styles.list, className].filter(Boolean).join(" ")}
     >
       {children}
     </div>
@@ -402,11 +417,13 @@ function CommandItem({
   // Scroll active item into view
   React.useEffect(() => {
     if (isActive && itemRef.current) {
-      itemRef.current.scrollIntoView({ block: 'nearest' });
+      itemRef.current.scrollIntoView({ block: "nearest" });
     }
   }, [isActive]);
 
-  const activateItem = (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {
+  const activateItem = (
+    event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>
+  ) => {
     if (disabled) return;
     onItemSelect?.(textValue, event);
   };
@@ -440,7 +457,7 @@ function CommandItem({
       onKeyDown={(e) => {
         onKeyDown?.(e);
         if (e.defaultPrevented) return;
-        if (e.key === 'Enter' || e.key === ' ') {
+        if (e.key === "Enter" || e.key === " ") {
           e.preventDefault();
           activateItem(e);
         }
@@ -453,8 +470,8 @@ function CommandItem({
         className,
       ]
         .filter(Boolean)
-        .join(' ')}
-      style={{ ...style, display: isVisible ? undefined : 'none' }}
+        .join(" ")}
+      style={{ ...style, display: isVisible ? undefined : "none" }}
     >
       {children}
     </div>
@@ -470,8 +487,8 @@ function CommandGroup({ children, heading, className, ...htmlProps }: CommandGro
   // Check if any children are visible after each score update
   React.useEffect(() => {
     if (!groupRef.current) return;
-    const items = groupRef.current.querySelectorAll<HTMLElement>('[data-command-item]');
-    const anyVisible = Array.from(items).some((item) => item.style.display !== 'none');
+    const items = groupRef.current.querySelectorAll<HTMLElement>("[data-command-item]");
+    const anyVisible = Array.from(items).some((item) => item.style.display !== "none");
     setHasVisibleChildren(anyVisible);
   }, [scores]);
 
@@ -483,8 +500,8 @@ function CommandGroup({ children, heading, className, ...htmlProps }: CommandGro
       {...restHtmlProps}
       role="group"
       aria-labelledby={heading ? labelId : undefined}
-      className={[styles.group, className].filter(Boolean).join(' ')}
-      style={{ ...style, display: hasVisibleChildren ? undefined : 'none' }}
+      className={[styles.group, className].filter(Boolean).join(" ")}
+      style={{ ...style, display: hasVisibleChildren ? undefined : "none" }}
     >
       {heading && (
         <div id={labelId} className={styles.groupHeading}>
@@ -507,7 +524,7 @@ function CommandEmpty({ children, className, ...htmlProps }: CommandEmptyProps)
       role="option"
       aria-disabled="true"
       aria-selected="false"
-      className={[styles.empty, className].filter(Boolean).join(' ')}
+      className={[styles.empty, className].filter(Boolean).join(" ")}
     >
       {children}
     </div>
@@ -519,7 +536,7 @@ function CommandSeparator({ className, ...htmlProps }: CommandSeparatorProps) {
     <div
       {...htmlProps}
       role="separator"
-      className={[styles.separator, className].filter(Boolean).join(' ')}
+      className={[styles.separator, className].filter(Boolean).join(" ")}
     />
   );
 }

package/src/components/ComponentDefaults/ComponentDefaults.contract.json

@@ -0,0 +1,91 @@
+{
+  "$schema": "https://usefragments.com/schemas/contract.v1.json",
+  "name": "ComponentDefaults",
+  "description": "Utility provider that sets the default control size for every control below it.",
+  "category": "utilities",
+  "tags": ["provider", "defaults", "size", "utility"],
+  "status": "stable",
+  "sourcePath": "src/components/ComponentDefaults/index.tsx",
+  "exportName": "ComponentDefaultsProvider",
+  "propsSummary": [
+    "children: node (required)",
+    "controlSize: sm|md|lg",
+    "value: { controlSize?: sm|md|lg }"
+  ],
+  "props": {
+    "children": {
+      "type": "node",
+      "description": "Subtree that inherits the defaults",
+      "required": true
+    },
+    "controlSize": {
+      "type": "enum",
+      "description": "Default size for controls that do not pass their own size prop",
+      "required": false,
+      "values": ["sm", "md", "lg"]
+    },
+    "value": {
+      "type": "object",
+      "description": "Full defaults object; explicit controlSize wins over value.controlSize",
+      "required": false
+    }
+  },
+  "usage": {
+    "when": [
+      "A region needs every control at one size (dense table toolbars, compact sidebars)",
+      "A ThemeProvider subtree should default to sm or lg controls"
+    ],
+    "whenNot": [
+      "Sizing a single control (pass its size prop)",
+      "Changing spacing or typography (use tokens, not control size)"
+    ],
+    "guidelines": [
+      "Renders no chrome: it only supplies context read through useResolvedControlSize",
+      "Nest providers to override the size for a smaller region",
+      "An explicit size prop on a control always wins over the provider default",
+      "ThemeProvider componentDefaults wires this provider for you at the root"
+    ],
+    "accessibility": [
+      "sm controls still meet the kit's minimum target size through the action recipe"
+    ]
+  },
+  "examples": [
+    {
+      "name": "Dense Toolbar",
+      "description": "Every control in the toolbar defaults to sm without repeating the prop.",
+      "code": "<ComponentDefaultsProvider controlSize=\"sm\">\n  <div style={{ display: 'flex', gap: '8px' }}>\n    <Button variant=\"soft\">Filter</Button>\n    <Button variant=\"ghost\">Export</Button>\n  </div>\n</ComponentDefaultsProvider>"
+    },
+    {
+      "name": "Nested Override",
+      "description": "A nested provider narrows the default for one region.",
+      "code": "<ComponentDefaultsProvider controlSize=\"lg\">\n  <Button>Large by default</Button>\n  <ComponentDefaultsProvider controlSize=\"sm\">\n    <Button>Small in this region</Button>\n  </ComponentDefaultsProvider>\n</ComponentDefaultsProvider>"
+    }
+  ],
+  "relations": [
+    {
+      "component": "Theme",
+      "relationship": "parent",
+      "note": "ThemeProvider accepts componentDefaults and mounts this provider"
+    },
+    {
+      "component": "Button",
+      "relationship": "child",
+      "note": "Controls resolve their size through useResolvedControlSize"
+    }
+  ],
+  "contract": {
+    "propsSummary": [
+      "controlSize: sm|md|lg - default size for controls below the provider",
+      "value: { controlSize } - defaults object, explicit controlSize wins",
+      "useComponentDefaults() - read the merged defaults",
+      "useResolvedControlSize(explicit, fallback) - explicit > provider > fallback (md)"
+    ],
+    "a11yRules": []
+  },
+  "provenance": {
+    "source": "manual",
+    "verified": false,
+    "frameworkSupport": "native",
+    "extractedAt": "2026-09-03T00:00:00.000Z"
+  }
+}

package/src/components/ConversationList/ConversationList.contract.json

@@ -1,16 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "ConversationList",
-  "description": "Scrollable message container with auto-scroll and history loading",
+  "description": "Stacks chat messages in a scroller that follows new arrivals.",
   "category": "ai",
-  "tags": [
-    "conversation",
-    "chat",
-    "messages",
-    "scroll",
-    "ai",
-    "list"
-  ],
+  "tags": ["conversation", "chat", "messages", "scroll", "ai", "list"],
   "status": "stable",
   "sourcePath": "src/components/ConversationList/index.tsx",
   "exportName": "ConversationList",
@@ -73,24 +66,24 @@
   },
   "usage": {
     "when": [
-      "Building a chat interface with multiple messages",
-      "Need auto-scroll behavior when new messages arrive",
-      "Require infinite scroll for loading message history",
-      "Want date separators between message groups"
+      "Chat interfaces holding many messages",
+      "Transcripts that should follow new arrivals",
+      "Paging back through older message history",
+      "Runs of messages grouped day by day"
     ],
     "whenNot": [
-      "Simple list of items without chat context (use List)",
-      "Single message display (use Message directly)",
-      "Non-scrolling message layout"
+      "Plain item lists with no chat context (use List)",
+      "A single message (use Message directly)",
+      "Layouts that never scroll"
     ],
     "guidelines": [
-      "Use autoScroll=\"smart\" for best UX (only auto-scrolls when near bottom)",
-      "Set showAvatars={false} for avatarless transcripts; messages remove their outer inline inset automatically",
-      "Conversation chrome uses neutral surfaces and the body foreground; reserve brand accent for actions or semantic state",
-      "Implement onScrollTop for loading older messages",
-      "ConversationList composes your onScroll handler with internal auto-scroll/history logic",
-      "Provide an emptyState for new conversations",
-      "Use DateSeparator between messages from different days"
+      "autoScroll=\"smart\" follows only when the reader is already near the bottom",
+      "showAvatars={false} drops the avatar gutter and the inset that goes with it",
+      "Chrome stays on neutral surfaces; reserve accent for actions and semantic state",
+      "Implement onScrollTop to page in older messages",
+      "Your onScroll handler composes with the internal auto-scroll and history logic",
+      "Give new conversations an emptyState",
+      "Put a DateSeparator between messages from different days"
     ],
     "accessibility": [
       "Uses proper ARIA roles for separators",
@@ -102,28 +95,33 @@
   "examples": [
     {
       "name": "Basic",
-      "description": "Simple conversation with messages",
+      "description": "Three turns stacked in reading order.",
       "code": "<ConversationList>\n  <Message role=\"user\">\n    <Message.Content>Hello!</Message.Content>\n  </Message>\n  <Message role=\"assistant\">\n    <Message.Content>Hi there! How can I help you today?</Message.Content>\n  </Message>\n  <Message role=\"user\">\n    <Message.Content>Can you explain React hooks?</Message.Content>\n  </Message>\n</ConversationList>"
     },
     {
       "name": "With Date Separators",
-      "description": "Messages grouped by date",
+      "description": "A labelled rule marks where one day ends.",
       "code": "<ConversationList>\n  <ConversationList.DateSeparator date={new Date(Date.now() - 86400000)} />\n  <Message role=\"user\">\n    <Message.Content>A message from yesterday</Message.Content>\n  </Message>\n  <ConversationList.DateSeparator date={new Date()} />\n  <Message role=\"assistant\">\n    <Message.Content>And a message from today!</Message.Content>\n  </Message>\n</ConversationList>"
     },
     {
       "name": "Without Avatars",
-      "description": "Compact transcript without message or typing-indicator avatars",
+      "description": "Turns sit flush when nothing needs an avatar gutter.",
       "code": "<ConversationList showAvatars={false}>\n  <Message role=\"user\">\n    <Message.Content>Hello!</Message.Content>\n  </Message>\n  <Message role=\"assistant\">\n    <Message.Content>How can I help?</Message.Content>\n  </Message>\n</ConversationList>"
     },
     {
       "name": "With Typing Indicator",
-      "description": "Shows assistant is typing",
+      "description": "Animated dots hold the reply's place before it lands.",
       "code": "<ConversationList>\n  <Message role=\"user\">\n    <Message.Content>What is TypeScript?</Message.Content>\n  </Message>\n  <ConversationList.TypingIndicator name=\"Assistant\" />\n</ConversationList>"
     },
     {
       "name": "Loading History",
-      "description": "Loading older messages",
+      "description": "A spinner pins to the top while older turns load.",
       "code": "<ConversationList loadingHistory>\n  <Message role=\"user\">\n    <Message.Content>This is the latest message</Message.Content>\n  </Message>\n</ConversationList>"
+    },
+    {
+      "name": "Empty",
+      "description": "A fresh conversation shows its placeholder instead of blank space.",
+      "code": "<ConversationList\n  emptyState={\n    <EmptyState>\n      <EmptyState.Title>No messages yet</EmptyState.Title>\n      <EmptyState.Description>\n        Ask a question to get started.\n      </EmptyState.Description>\n    </EmptyState>\n  }\n/>"
     }
   ],
   "relations": [
@@ -152,10 +150,7 @@
       "loadingHistory: boolean - show history loading spinner",
       "emptyState: ReactNode - empty conversation content"
     ],
-    "a11yRules": [
-      "A11Y_ARIA_ROLES",
-      "A11Y_MOTION_PREFERENCE"
-    ]
+    "a11yRules": ["A11Y_ARIA_ROLES", "A11Y_MOTION_PREFERENCE"]
   },
   "provenance": {
     "source": "migrated",

package/src/components/ConversationList/ConversationList.module.scss

@@ -1,4 +1,5 @@
 @use "../../tokens/variables" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/layout" as layout;
 @use "../../recipes/representation" as representation;
 @use "../../recipes/typography" as typography;
@@ -64,7 +65,7 @@
 
 .dateSeparatorLine {
   flex: 1;
-  height: var(--fui-stroke-hairline, 1px);
+  height: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
   background-color: var(--fui-border, $fui-border);
 }
 
@@ -73,8 +74,6 @@
 
   color: var(--fui-text-secondary, $fui-text-secondary);
   white-space: nowrap;
-  text-transform: uppercase;
-  letter-spacing: var(--fui-letter-spacing-wide, $fui-letter-spacing-wide);
 }
 
 // ============================================

package/src/components/ConversationList/index.tsx

@@ -130,7 +130,7 @@ function TypingIndicator({
       <div className={styles.typingContent}>
         <Loading
           size="sm"
-          variant="dots"
+          kind="dots"
           color="muted"
           label=""
           role="presentation"
@@ -242,7 +242,7 @@ function ConversationListRoot({
       <div {...htmlProps} ref={containerRef} className={classes} onScroll={handleScroll}>
         {loadingHistory && (
           <div className={styles.loadingHistory}>
-            <Loading size="md" variant="spinner" color="muted" label="Loading history" />
+            <Loading size="md" kind="spinner" color="muted" label="Loading history" />
             <span>Loading history...</span>
           </div>
         )}

package/src/components/DataTable/DataTable.icons.tsx

@@ -5,9 +5,7 @@ import styles from "./DataTable.module.scss";
 export function ExpandIcon({ expanded }: { expanded: boolean }) {
   return (
     <svg
-      className={[styles.expandIcon, expanded && styles.expandIconOpen]
-        .filter(Boolean)
-        .join(" ")}
+      className={[styles.expandIcon, expanded && styles.expandIconOpen].filter(Boolean).join(" ")}
       viewBox="0 0 12 12"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -28,12 +26,7 @@ export function ExpandIcon({ expanded }: { expanded: boolean }) {
 // (--fui-icon-xs) in CSS so all sort glyphs share the icon ladder.
 export function SortIcon() {
   return (
-    <svg
-      viewBox="0 0 12 12"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-    >
+    <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
       <path d="M6 2L8.5 5H3.5L6 2Z" fill="currentColor" opacity="0.3" />
       <path d="M6 10L3.5 7H8.5L6 10Z" fill="currentColor" opacity="0.3" />
     </svg>
@@ -42,12 +35,7 @@ export function SortIcon() {
 
 export function SortAscIcon() {
   return (
-    <svg
-      viewBox="0 0 12 12"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-    >
+    <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
       <path d="M6 2L8.5 5H3.5L6 2Z" fill="currentColor" />
     </svg>
   );
@@ -55,12 +43,7 @@ export function SortAscIcon() {
 
 export function SortDescIcon() {
   return (
-    <svg
-      viewBox="0 0 12 12"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-    >
+    <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
       <path d="M6 10L3.5 7H8.5L6 10Z" fill="currentColor" />
     </svg>
   );