@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

package/src/components/tickets/ticket-center.tsx

@@ -25,15 +25,14 @@ import { type ReactNode, useCallback, useState } from 'react';
 import { toast as defaultToast } from '../../hooks/use-toast';
 import type { DataSync } from '../../types/data-sync';
 import { devSectionAnchorId } from '../../utils/dev-sections/dev-section-param-keys';
-import { ChatTicketItemSkeleton } from '../chat/entity-cards/chat-ticket-item';
 import { useChatIdentity } from '../chat/hooks/use-chat-identity';
 import { EmptyState } from '../empty-state';
 import { usePageDataSync } from '../layout/page-data-sync';
-import { LoadingRegion } from '../loading/loading-region';
+import { LoadingFallback } from '../loading/loading-fallback';
 import { Button } from '../ui/button';
 import { Card } from '../ui/card';
 import { DataSyncLine } from '../ui/data-attribution';
-import { LoadingScope, useLoadingScope } from '../ui/loading-scope';
+import { LoadingItems, useLoadingScope } from '../ui/loading-scope';
 import { useTicketActions } from './hooks/use-ticket-actions';
 import { TICKETS_PAGE_SIZE, useTicketsList } from './hooks/use-tickets-list';
 import { TicketOpenForm, type TicketOpenFormProps } from './ticket-open-form';
@@ -44,7 +43,6 @@ import { isOptimistic } from './types';
 /** The center's layout. */
 const TICKET_CENTER_CLASS = 'flex flex-col gap-6';
 const TICKET_LIST_BLOCK_CLASS = 'flex flex-col gap-2';
-const TICKET_ROW_FRAME_CLASS = 'border-b border-ods-border last:border-b-0';
 
 export interface TicketCenterProps {
   /** Optional toast override (test-friendly). Defaults to the lib's
@@ -153,6 +151,7 @@ function TicketCenterAuthed({
       renderRow={ticket => (
         <TicketRow
           key={ticket.id}
+          data-loading-item
           id={devSectionAnchorId('ticket', ticket.external_id)}
           ticket={ticket}
           expanded={expandedTicketId === ticket.id}
@@ -182,20 +181,18 @@ function TicketCenterPending({
   // The page states the sync under its title: the list's header then draws no line, loading or loaded.
   const syncInPage = usePageDataSync(null, true);
   return (
-    <LoadingRegion label="Loading tickets" announce={region}>
-      <LoadingScope>
-        <TicketCenterView
-          tickets={[]}
-          loading
-          formInert
-          sync={syncInPage ? undefined : null}
-          onSubmit={() => Promise.resolve(false)}
-          isSubmitting={false}
-          supportSystemDown={false}
-          renderRow={() => null}
-        />
-      </LoadingScope>
-    </LoadingRegion>
+    <LoadingFallback label="Loading tickets" status={region}>
+      <TicketCenterView
+        tickets={[]}
+        loading
+        formInert
+        sync={syncInPage ? undefined : null}
+        onSubmit={() => Promise.resolve(false)}
+        isSubmitting={false}
+        supportSystemDown={false}
+        renderRow={() => null}
+      />
+    </LoadingFallback>
   );
 }
 
@@ -310,15 +307,7 @@ function TicketListHeader({
 function TicketListSkeleton() {
   return (
     <Card className="overflow-hidden">
-      {Array.from({ length: TICKETS_PAGE_SIZE }, (_, i) => (
-        <div
-          // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
-          key={i}
-          className={TICKET_ROW_FRAME_CLASS}
-        >
-          <ChatTicketItemSkeleton />
-        </div>
-      ))}
+      <LoadingItems count={TICKETS_PAGE_SIZE}>{() => <TicketRow loading data-loading-item />}</LoadingItems>
     </Card>
   );
 }

package/src/components/tickets/ticket-detail-drawer.tsx

@@ -25,11 +25,12 @@ import { useEffect, useRef } from 'react';
 import { useStickToBottom } from 'use-stick-to-bottom';
 import { LoadingRegion } from '../loading/loading-region';
 import { formatRelativeTime } from './../../utils/date-utils';
-import { ChatMessageRow, ChatMessageRowSkeleton } from './../chat/chat-message-row';
+import { ChatMessageRow } from './../chat/chat-message-row';
 import { useChatIdentity } from './../chat/hooks/use-chat-identity';
 import type { ChatAttachment } from './../chat/utils/chat-attachment-markdown';
 import { EmptyState } from './../empty-state';
 import { Button } from './../ui/button';
+import { LoadingItems } from './../ui/loading-scope';
 import { SquareAvatar } from './../ui/square-avatar';
 import { TicketAttachmentsList, type TicketAttachment } from './../ui/ticket-attachments-list';
 import { useTicketEngagements } from './hooks/use-ticket-engagements';
@@ -160,7 +161,7 @@ const TURN_SEPARATOR_RE = /[\s]{1,16}---[\s]{1,16}/g;
 // Slack-channel feed framing — ported from the hub's live community feed
 // (`components/slack/chat-interface.tsx`: `:62` bounded card, `:83` padding +
 // `overflow-y-auto`, `:85` `gap-4 md:gap-6` message column). Single source
-// within the ticket feed; the delivery `DevCardRowSkeletonList` keeps its own
+// within the ticket feed; the Help Center rows keep their own
 // (separate, untouched) frame literal. `max-h` is responsive (vs Slack's fixed
 // height).
 const TICKET_FEED_FRAME = 'bg-ods-card border border-ods-border rounded-[6px] overflow-y-auto w-full';
@@ -299,9 +300,9 @@ function TicketTimelinePanel({ ticket }: { ticket: AnyTicket }) {
     return (
       <div className={`${TICKET_FEED_FRAME} ${TICKET_FEED_HEIGHT}`}>
         <LoadingRegion label="Loading messages" className={TICKET_FEED_INNER}>
-          {Array.from({ length: TICKET_FEED_SKELETON_ROWS }, (_, i) => (
-            <ChatMessageRowSkeleton key={i} />
-          ))}
+          <LoadingItems count={TICKET_FEED_SKELETON_ROWS}>
+            {() => <ChatMessageRow loading displayName="" body="" data-loading-item />}
+          </LoadingItems>
         </LoadingRegion>
       </div>
     );
@@ -346,6 +347,7 @@ function TicketTimelinePanel({ ticket }: { ticket: AnyTicket }) {
           return (
             <ChatMessageRow
               key={`body-${i}-${turn.slice(0, 24)}`}
+              data-loading-item
               displayName={customerName}
               avatarUrl={customerAvatar}
               body={text}
@@ -443,6 +445,7 @@ function TicketTimelinePanel({ ticket }: { ticket: AnyTicket }) {
           return (
             <ChatMessageRow
               key={eng.id}
+              data-loading-item
               displayName={author}
               avatarUrl={avatarSrc}
               timeLabel={eng.createdAt ? formatRelativeTime(eng.createdAt) : null}

package/src/components/tickets/ticket-open-form.tsx

@@ -25,6 +25,7 @@ import type { ChatAttachment } from '../chat/utils/chat-attachment-markdown';
 import { Button } from '../ui/button';
 import { Card } from '../ui/card';
 import { Input } from '../ui/input';
+import { Label } from '../ui/label';
 import { Textarea } from '../ui/textarea';
 import { TICKET_TEXT_MAX_CHARS } from './types';
 
@@ -92,9 +93,9 @@ export function TicketOpenForm({ onSubmit, isSubmitting, supportSystemDown }: Ti
 
         <div className="flex min-w-0 flex-1 flex-col gap-4">
           <div>
-            <label htmlFor="ticket-subject" className="mb-1 block text-ods-text-primary text-h6">
+            <Label htmlFor="ticket-subject" className="mb-1">
               Ticket Subject
-            </label>
+            </Label>
             <Input
               id="ticket-subject"
               type="text"
@@ -107,9 +108,9 @@ export function TicketOpenForm({ onSubmit, isSubmitting, supportSystemDown }: Ti
           </div>
 
           <div>
-            <label htmlFor="ticket-content" className="mb-1 block text-ods-text-primary text-h6">
+            <Label htmlFor="ticket-content" className="mb-1">
               Your Message
-            </label>
+            </Label>
             <Textarea
               id="ticket-content"
               placeholder="Describe your issue or question in detail..."

package/src/components/tickets/ticket-row.tsx

@@ -23,11 +23,18 @@ import { formatRelativeTime } from '../../utils/date-utils';
 import { scrollElementIntoView } from '../../utils/scroll-into-view';
 import { ChatTicketItem, type ChatTicketItemData } from '../chat/entity-cards/chat-ticket-item';
 import { Collapsible, CollapsibleContent } from '../collapsible';
+import { loadingItemProps, useLoadingScope } from '../ui/loading-scope';
 import { TicketDetailDrawer, type TicketDetailDrawerProps } from './ticket-detail-drawer';
 import type { AnyTicket } from './types';
 import { isOptimistic } from './types';
 
-export interface TicketRowProps {
+/** The row's frame (its bottom rule), read by the loaded row and its loading form. */
+const TICKET_ROW_FRAME_CLASS = 'border-b border-ods-border last:border-b-0';
+/** The row's outer element: the deep-link target, offset under a sticky header. */
+const TICKET_ROW_OUTER_CLASS = 'scroll-mt-24';
+
+/** A read ticket's row. */
+export interface TicketRowLoadedProps {
   ticket: AnyTicket;
   expanded: boolean;
   onToggle: (ticketId: string) => void;
@@ -44,9 +51,38 @@ export interface TicketRowProps {
    *  resolves it. `scroll-mt-24` is already baked into the outer
    *  element regardless. */
   id?: string;
+  loading?: false;
+}
+
+/** A row while its ticket is read: the same frame with the summary tile's loading form, and no drawer. */
+export interface TicketRowLoadingProps {
+  loading: true;
+  id?: string;
+}
+
+/** A ticket row, or (`loading`) its loading form. List markers (`data-loading-item`) are forwarded in both forms. */
+export type TicketRowProps = (TicketRowLoadedProps | TicketRowLoadingProps) & {
+  [key: `data-${string}`]: unknown;
+};
+
+/**
+ * A ticket row. ONE switch (`useLoadingScope() || loading`): while the ticket is read the row draws the same frame
+ * with `ChatTicketItem loading` (its own loading form), else the summary tile and its drawer.
+ */
+export function TicketRow(props: TicketRowProps) {
+  if (useLoadingScope() || props.loading) {
+    return (
+      <div id={props.id} className={TICKET_ROW_OUTER_CLASS} {...loadingItemProps(props)}>
+        <div className={TICKET_ROW_FRAME_CLASS}>
+          <ChatTicketItem loading />
+        </div>
+      </div>
+    );
+  }
+  return <TicketRowLoaded {...props} />;
 }
 
-export function TicketRow({
+function TicketRowLoaded({
   ticket,
   expanded,
   onToggle,
@@ -57,7 +93,8 @@ export function TicketRow({
   onReopen,
   onActionCollapsed,
   id,
-}: TicketRowProps) {
+  ...markers
+}: TicketRowLoadedProps & { [key: `data-${string}`]: unknown }) {
   // Optimistic placeholders have no drawer — the real id hasn't
   // arrived yet, so action targets would be undefined.
   const optimistic = isOptimistic(ticket);
@@ -116,8 +153,8 @@ export function TicketRow({
   };
 
   return (
-    <div ref={rowRef} id={id} className="scroll-mt-24">
-      <Collapsible open={expanded && !optimistic} className="border-b border-ods-border last:border-b-0">
+    <div ref={rowRef} id={id} className={TICKET_ROW_OUTER_CLASS} {...loadingItemProps(markers)}>
+      <Collapsible open={expanded && !optimistic} className={TICKET_ROW_FRAME_CLASS}>
         <ChatTicketItem
           ticket={tileData}
           onClick={optimistic ? undefined : handleClick}

package/src/components/ui/actions-menu.tsx

@@ -10,6 +10,7 @@ import { Chevron02RightIcon, Ellipsis01Icon } from '../icons-v2-generated';
 import { ActionsMenuHeaderContext } from './actions-menu-header-context';
 import { Button } from './button';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from './dropdown-menu';
+import { InertWhileLoading, useLoadingScope } from './loading-scope';
 import { useReportOverlayOpen } from './overlay-open-registry';
 import { COLLISION_PADDING_PX, useCollisionBoundary, usePortalContainer } from './portal-container';
 
@@ -84,9 +85,8 @@ const ROW_CLASSES =
   'flex flex-1 min-w-0 items-center gap-[var(--spacing-system-xsf)] p-[var(--spacing-system-s)] cursor-pointer transition-colors bg-ods-bg outline-none';
 const WRAPPER_CLASSES = 'relative flex items-stretch border-b border-ods-border last:border-b-0';
 
-const SECONDARY_ACTION_CLASSES =
-  'flex p-[var(--spacing-system-s)] shrink-0 items-center justify-center self-stretch border-l border-ods-border transition-colors hover:bg-ods-bg-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus [&_svg]:w-4 [&_svg]:h-4 md:[&_svg]:w-6 md:[&_svg]:h-6';
-
+// The row's trailing icon action: a cell of the row (its full height, an icon, secondary until hovered), after a
+// hairline divider. One Button for both forms, a link and an action.
 const SecondaryAction: React.FC<{ action: ActionsMenuItemIconAction }> = ({ action }) => {
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
@@ -100,40 +100,26 @@ const SecondaryAction: React.FC<{ action: ActionsMenuItemIconAction }> = ({ acti
     [action],
   );
 
-  const classes = cn(
-    SECONDARY_ACTION_CLASSES,
-    action.openInNewTab && 'max-md:hidden',
-    action.disabled && 'pointer-events-none cursor-not-allowed opacity-60',
-  );
-
-  if (action.href) {
-    return (
-      <Link
+  return (
+    <>
+      <span
+        aria-hidden="true"
+        className={cn('w-px shrink-0 self-stretch bg-ods-border', action.openInNewTab && 'max-md:hidden')}
+      />
+      <Button
+        variant="cell"
+        type="button"
         href={action.href}
-        prefetch={false}
-        target={action.openInNewTab ? '_blank' : undefined}
-        rel={action.openInNewTab ? 'noopener noreferrer' : undefined}
+        prefetch={action.href ? false : undefined}
+        openInNewTab={action.openInNewTab}
         aria-label={action['aria-label']}
-        aria-disabled={action.disabled || undefined}
-        tabIndex={action.disabled ? -1 : undefined}
-        className={classes}
+        disabled={action.disabled}
+        className={cn('h-auto self-stretch', action.openInNewTab && 'max-md:hidden')}
         onClick={handleClick}
       >
         {action.icon}
-      </Link>
-    );
-  }
-
-  return (
-    <button
-      type="button"
-      aria-label={action['aria-label']}
-      disabled={action.disabled}
-      className={classes}
-      onClick={handleClick}
-    >
-      {action.icon}
-    </button>
+      </Button>
+    </>
   );
 };
 
@@ -351,6 +337,9 @@ export interface ActionsMenuDropdownProps extends ActionsMenuProps {
   /** Forwarded to the dropdown content — e.g. `e.preventDefault()` to stop
    *  Radix returning focus (and its focus ring) to the trigger on close. */
   onCloseAutoFocus?: (event: Event) => void;
+  /** The menu's subject is still being read: the trigger (default or custom) is drawn for real and inert, and the menu
+   *  cannot open. A loading scope does the same. */
+  loading?: boolean;
 }
 
 export const ActionsMenuDropdown: React.FC<ActionsMenuDropdownProps> = ({
@@ -369,7 +358,10 @@ export const ActionsMenuDropdown: React.FC<ActionsMenuDropdownProps> = ({
   open: openProp,
   onOpenChange,
   onCloseAutoFocus,
+  loading: loadingProp = false,
 }) => {
+  // ONE switch: in a page's loading state (or while the host reads the menu's subject) the menu is its trigger's box.
+  const loading = useLoadingScope() || loadingProp;
   const [open = false, setOpen] = useControllableState({
     prop: openProp,
     defaultProp: false,
@@ -427,21 +419,30 @@ export const ActionsMenuDropdown: React.FC<ActionsMenuDropdownProps> = ({
     [onItemClick, setOpen],
   );
 
+  // The trigger is a static control: drawn for real in both forms, inert while the menu's subject loads.
+  const triggerNode = customTrigger ?? (
+    <Button
+      variant="outline"
+      size="icon"
+      aria-label={triggerAriaLabel}
+      className={
+        triggerClassName ||
+        'flex items-center justify-center border-ods-border bg-ods-card hover:bg-ods-bg-hover focus-visible:ring-0'
+      }
+      leftIcon={trigger ?? <Ellipsis01Icon size={24} className="text-ods-text-primary" />}
+    />
+  );
+
+  if (loading) {
+    // A custom trigger is the host's control (it switches itself in the scope, e.g. a field trigger). Either trigger is
+    // drawn as it is, inert: it cannot open while the subject is read.
+    return <InertWhileLoading>{triggerNode}</InertWhileLoading>;
+  }
+
   return (
     <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
       <DropdownMenuTrigger asChild ref={triggerRef}>
-        {customTrigger ?? (
-          <Button
-            variant="outline"
-            size="icon"
-            aria-label={triggerAriaLabel}
-            className={
-              triggerClassName ||
-              'flex items-center justify-center border-ods-border bg-ods-card hover:bg-ods-bg-hover focus-visible:ring-0'
-            }
-            leftIcon={trigger ?? <Ellipsis01Icon size={24} className="text-ods-text-primary" />}
-          />
-        )}
+        {triggerNode}
       </DropdownMenuTrigger>
       <DropdownMenuContent
         align={align}

package/src/components/ui/allowed-domains-input.tsx

@@ -115,18 +115,17 @@ const AllowedDomainsInput = forwardRef<HTMLDivElement, AllowedDomainsInputProps>
         </div>
 
         {/* Add Domain button */}
-        <button
+        <Button
+          variant="link"
+          size="compact"
+          noPaddingX
           type="button"
-          className={cn(
-            'flex items-center gap-2 py-2 text-ods-text-primary transition-colors hover:text-ods-accent',
-            disabled && 'cursor-not-allowed opacity-50',
-          )}
           onClick={addDomain}
           disabled={disabled}
+          leftIcon={<PlusCircle />}
         >
-          <PlusCircle className="h-5 w-5 text-ods-text-secondary" />
-          <span className="font-bold text-h6">Add Domain</span>
-        </button>
+          Add Domain
+        </Button>
 
         {/* Error message */}
         {displayError && <p className="text-ods-error text-h6">{displayError}</p>}

package/src/components/ui/assignee-dropdown.tsx

@@ -4,6 +4,7 @@ import { type MouseEvent, useCallback, useMemo, useState } from 'react';
 import { cn } from '../../utils/cn';
 import { PenEditIcon, UserIcon, UserPlusIcon } from '../icons-v2-generated';
 import { Autocomplete, type AutocompleteOption } from './autocomplete';
+import { Button } from './button';
 import { DeletedUserAvatar } from './deleted-user-avatar';
 import { SearchableSelect, type SearchableSelectOption } from './searchable-select';
 import { SquareAvatar } from './square-avatar';
@@ -90,14 +91,12 @@ function CompactAssigneeDropdown({
     : undefined;
 
   const trigger = hasAssignee ? (
-    <button
+    <Button
+      variant="card"
       type="button"
       onClick={handleTriggerClick}
       aria-label="Change assignee"
-      className={cn(
-        'shrink-0 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus',
-        className,
-      )}
+      className={cn('w-auto shrink-0', className)}
     >
       {currentAssignee.deleted ? (
         <DeletedUserAvatar size="sm" accessibleLabel={`Deleted user: ${currentAssignee.name || currentAssignee.id}`} />
@@ -110,21 +109,18 @@ function CompactAssigneeDropdown({
           variant="round"
         />
       )}
-    </button>
+    </Button>
   ) : (
-    <button
+    <Button
+      variant="transparent"
+      size="icon-sm"
       type="button"
       onClick={handleTriggerClick}
       aria-label="Assign user"
-      className={cn(
-        'flex size-8 shrink-0 items-center justify-center rounded-full border border-ods-border',
-        'text-ods-text-secondary transition-colors hover:border-ods-accent hover:text-ods-accent',
-        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus',
-        className,
-      )}
+      className={cn('shrink-0', className)}
     >
-      <UserPlusIcon className="size-4" />
-    </button>
+      <UserPlusIcon />
+    </Button>
   );
 
   // Intercepted trigger: render the plain button — no dropdown to open.
@@ -231,12 +227,15 @@ function DefaultAssigneeDropdown({ currentAssignee, options, isLoading, onAssign
         <div className="min-w-0 flex-1 overflow-hidden">
           <div className="flex flex-col justify-center">
             <div className="flex w-full min-w-0 items-center gap-[var(--spacing-system-xxs)]">
-              <button
+              <Button
+                variant="link"
+                size="compact"
+                noPaddingX
                 type="button"
                 onClick={() => setIsEditing(true)}
-                className="group flex cursor-pointer items-center gap-[var(--spacing-system-xxs)] text-left"
+                className="min-w-0"
               >
-                <PenEditIcon className="size-4 shrink-0 text-ods-text-secondary transition-colors group-hover:text-ods-accent" />
+                <PenEditIcon />
                 <span
                   className={cn(
                     'truncate text-h4',
@@ -246,7 +245,7 @@ function DefaultAssigneeDropdown({ currentAssignee, options, isLoading, onAssign
                 >
                   {currentAssignee.name}
                 </span>
-              </button>
+              </Button>
             </div>
             <span className="truncate text-ods-text-secondary text-h6">Assigned</span>
           </div>
@@ -257,14 +256,17 @@ function DefaultAssigneeDropdown({ currentAssignee, options, isLoading, onAssign
 
   return (
     <div className={cn('min-w-0', className)}>
-      <button
+      <Button
+        variant="link"
+        size="compact"
+        noPaddingX
         type="button"
         onClick={() => setIsEditing(true)}
-        className="flex cursor-pointer items-center gap-[var(--spacing-system-xxs)] truncate text-left text-ods-accent underline transition-opacity text-h4 hover:opacity-80"
+        className="max-w-full"
+        leftIcon={<UserIcon />}
       >
-        <UserIcon className="size-4 shrink-0" />
-        <span>Assign User</span>
-      </button>
+        Assign User
+      </Button>
       <span className="block truncate text-ods-text-secondary text-h6">Assigned</span>
     </div>
   );

package/src/components/ui/autocomplete.tsx

@@ -26,9 +26,10 @@ import { CheckIcon } from '../icons-v2-generated/signs-and-symbols/check-icon';
 import { XmarkCircleIcon } from '../icons-v2-generated/signs-and-symbols/xmark-circle-icon';
 import { LoadingRegion } from '../loading/loading-region';
 import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
+import { Button } from './button';
 import { FieldWrapper } from './field-wrapper';
 import { HiddenTagsPopup } from './hidden-tags-popup';
-import { useLoadingScope } from './loading-scope';
+import { LoadingItems, useLoadingScope } from './loading-scope';
 import { Tag } from './tag';
 import { TruncateText } from './truncate-text';
 
@@ -184,7 +185,7 @@ const AUTOCOMPLETE_OPTION_ROW_CLASS =
 const AUTOCOMPLETE_LOADING_ROWS = 5;
 const AUTOCOMPLETE_ANCHOR_SHAPE_CLASS = 'rounded-[6px]';
 
-export interface AutocompleteSkeletonProps {
+interface AutocompleteSkeletonProps {
   /** The field's label: the page's own words, drawn as they are. */
   label?: string;
   labelVariant?: 'default' | 'large';
@@ -192,7 +193,7 @@ export interface AutocompleteSkeletonProps {
 }
 
 /** A field while its options are read: its label for real, its control a box of the control's height. */
-export function AutocompleteSkeleton({ label, labelVariant, className }: AutocompleteSkeletonProps) {
+function AutocompleteSkeleton({ label, labelVariant, className }: AutocompleteSkeletonProps) {
   return (
     <FieldWrapper label={label} labelVariant={labelVariant} className={className}>
       <UnifiedSkeleton className={cn('w-full', AUTOCOMPLETE_ANCHOR_SHAPE_CLASS, AUTOCOMPLETE_ANCHOR_HEIGHT_CLASS)} />
@@ -590,9 +591,11 @@ function AutocompleteInner<T = string>(props: AutocompleteProps<T>, ref: Forward
             {/* Overflow indicator button (multiple mode only) */}
             {multiple && hiddenTagsCount > 0 && (
               <div ref={hiddenTagsRef} className="shrink-0">
-                <button
+                <Button
+                  variant="chip"
                   ref={badgeRef}
                   type="button"
+                  aria-expanded={showHiddenTags}
                   onClick={e => {
                     e.stopPropagation();
                     setShowHiddenTags(prev => {
@@ -600,15 +603,9 @@ function AutocompleteInner<T = string>(props: AutocompleteProps<T>, ref: Forward
                       return !prev;
                     });
                   }}
-                  className={cn(
-                    'flex h-8 items-center px-2',
-                    'rounded-[6px] border border-ods-border bg-ods-card',
-                    'text-ods-text-secondary text-h5',
-                    'cursor-pointer transition-colors hover:bg-ods-bg-hover',
-                  )}
                 >
                   {getLimitTagsText(hiddenTagsCount)}
-                </button>
+                </Button>
               </div>
             )}
 
@@ -631,14 +628,15 @@ function AutocompleteInner<T = string>(props: AutocompleteProps<T>, ref: Forward
           {/* Clear / Chevron — pinned right */}
           <div className="flex shrink-0 items-center gap-1 pr-3">
             {showClearAll && (hasValue || inputValue.length > 0) && !disabled && isOpen && (
-              <button
+              <Button
+                variant="transparent"
+                size="icon-sm"
                 type="button"
                 onClick={handleClearAll}
-                className="flex items-center justify-center transition-opacity hover:opacity-70"
                 aria-label="Clear all"
               >
-                <XmarkCircleIcon className="size-4 text-ods-text-secondary md:size-6" />
-              </button>
+                <XmarkCircleIcon className="text-ods-text-secondary" />
+              </Button>
             )}
             {loading ? (
               <Loader2
@@ -699,12 +697,13 @@ function AutocompleteInner<T = string>(props: AutocompleteProps<T>, ref: Forward
                 // The options while they are read: the list's own rows, a label bar each (`loadingText` is what a
                 // screen reader hears).
                 <LoadingRegion label={loadingText}>
-                  {Array.from({ length: loadingRows }, (_, i) => (
-                    // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
-                    <div key={i} className={AUTOCOMPLETE_OPTION_ROW_CLASS} aria-hidden>
-                      <TextLineSkeleton type="inherit" className="w-2/3" />
-                    </div>
-                  ))}
+                  <LoadingItems count={loadingRows}>
+                    {() => (
+                      <div className={AUTOCOMPLETE_OPTION_ROW_CLASS} aria-hidden data-loading-item>
+                        <TextLineSkeleton type="inherit" className="w-2/3" />
+                      </div>
+                    )}
+                  </LoadingItems>
                 </LoadingRegion>
               ) : filteredOptions.length === 0 ? (
                 showCreateOption ? (
@@ -744,6 +743,7 @@ function AutocompleteInner<T = string>(props: AutocompleteProps<T>, ref: Forward
                   return (
                     <div
                       key={String(option.value)}
+                      data-loading-item
                       role="option"
                       aria-selected={isSelected}
                       className={cn(
@@ -783,7 +783,9 @@ function AutocompleteInner<T = string>(props: AutocompleteProps<T>, ref: Forward
                           <div className="flex shrink-0 items-center gap-[var(--spacing-system-xsf)]">
                             {isSelected && <CheckIcon className="text-ods-accent" size={20} />}
                             {onDeleteOption && !isSelected && (
-                              <button
+                              <Button
+                                variant="transparent"
+                                size="icon-sm"
                                 type="button"
                                 aria-label={`Delete ${option.label}`}
                                 onClick={e => {
@@ -791,10 +793,9 @@ function AutocompleteInner<T = string>(props: AutocompleteProps<T>, ref: Forward
                                   onDeleteOption(option.value);
                                 }}
                                 disabled={isDeletingOption}
-                                className="opacity-0 transition-opacity focus-visible:opacity-100 disabled:pointer-events-none disabled:opacity-50 group-hover/item:opacity-100"
                               >
-                                <TrashIcon className="size-4 text-ods-error" />
-                              </button>
+                                <TrashIcon className="text-ods-error" />
+                              </Button>
                             )}
                           </div>
                         </div>