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

package/src/components/ui/radio-group.tsx

@@ -3,7 +3,11 @@
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { type ComponentPropsWithoutRef, type ComponentRef, type ReactNode, forwardRef } from 'react';
 
+import { CONTROL_SIZE } from '../../styles/component-sizes';
 import { cn } from '../../utils/cn';
+import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
+import { Label } from './label';
+import { useLoadingScope } from './loading-scope';
 
 const RadioGroup = forwardRef<
   ComponentRef<typeof RadioGroupPrimitive.Root>,
@@ -40,9 +44,27 @@ const RadioGroupItem = forwardRef<
 });
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
+/** A radio dot's box: read by the dot of every option and by its skeleton. */
+const RADIO_DOT_SIZE_CLASS = `${CONTROL_SIZE.selection} shrink-0 rounded-full`;
+/** An option's label line and description line (the type each is set in). */
+const RADIO_OPTION_LABEL_CLASS =
+  'font-[family-name:var(--font-h4-family)] text-[length:var(--font-size-h4-body)] font-[number:var(--font-h4-weight)] leading-[24px]';
+const RADIO_OPTION_DESCRIPTION_CLASS =
+  'font-[family-name:var(--font-h6-family)] text-[length:var(--font-size-h6-caption)] font-[number:var(--font-h6-weight)] leading-[20px]';
+
+/** An option's label and caption bars while they are read (a `null` label or caption, or an option not here yet). */
+const RADIO_OPTION_LABEL_BAR_CLASS = 'w-32 max-w-full';
+const RADIO_OPTION_DESCRIPTION_BAR_CLASS = 'w-48 max-w-full';
+
+/** How many option rows the block draws while loading when the host passes no options. */
+export const RADIO_GROUP_BLOCK_SKELETON_OPTIONS = 3;
+
 interface RadioGroupBlockOption {
   value: string;
+  /** The option's label. `null` is a label still read: in a scope or while `loading` it is an `h4` bar. */
   label: ReactNode;
+  /** The option's caption. `null` is a caption still read: in a scope or while `loading` it is an `h6` bar
+   *  (`undefined`: the option has no caption). */
   description?: ReactNode;
   disabled?: boolean;
   /** Optional trailing slot rendered at the end of the row (e.g. a discount tag) */
@@ -70,13 +92,38 @@ interface RadioGroupBlockProps extends Omit<ComponentPropsWithoutRef<typeof Radi
   /** Error message displayed below the group (also triggers red borders) */
   error?: string;
   itemClassName?: string;
+  /**
+   * Which option is chosen is still being read: the options the host passes are drawn for real and inert, each dot
+   * a skeleton of the dot's own size. With no options, `skeletonCount` rows with a bar for each label. A loading
+   * scope does the same.
+   */
+  loading?: boolean;
+  /** How many option rows to draw while loading when there are no options (defaults to
+   *  `RADIO_GROUP_BLOCK_SKELETON_OPTIONS`). */
+  skeletonCount?: number;
 }
 
 const RadioGroupBlock = forwardRef<ComponentRef<typeof RadioGroupPrimitive.Root>, RadioGroupBlockProps>(
   (
-    { className, options, variant = 'separated', orientation = 'vertical', error, itemClassName, disabled, ...props },
+    {
+      className,
+      options,
+      variant = 'separated',
+      orientation = 'vertical',
+      error,
+      itemClassName,
+      disabled,
+      loading: loadingProp,
+      skeletonCount = RADIO_GROUP_BLOCK_SKELETON_OPTIONS,
+      ...props
+    },
     ref,
   ) => {
+    // ONE switch: in a page's loading state (or while the host reads the choice) every dot is its skeleton.
+    const loading = useLoadingScope() || !!loadingProp;
+    // While loading with no options, rows of label bars stand for the options (`null`: a row with no option yet).
+    const rows: Array<RadioGroupBlockOption | null> =
+      loading && options.length === 0 ? Array.from({ length: skeletonCount }, () => null) : options;
     const isGrouped = variant === 'grouped';
     const isHorizontal = orientation === 'horizontal';
     return (
@@ -98,36 +145,44 @@ const RadioGroupBlock = forwardRef<ComponentRef<typeof RadioGroupPrimitive.Root>
                 )
               : cn('grid gap-2', isHorizontal && 'auto-cols-fr grid-flow-col'),
           )}
-          disabled={disabled}
+          disabled={disabled || loading}
           {...props}
         >
-          {options.map((option, index) => {
-            const itemId = `${props.name ?? 'radio-block'}-${option.value}`;
-            const isDisabled = disabled || option.disabled;
-            const isLast = index === options.length - 1;
-            const hasFooter = option.footer != null;
+          {rows.map((option, index) => {
+            const optionKey = option ? option.value : `skeleton-${index}`;
+            const itemId = `${props.name ?? 'radio-block'}-${optionKey}`;
+            // Loading draws the options as they are, inert: not greyed as disabled, never hovered or chosen.
+            const isDisabled = !loading && (disabled || option?.disabled);
+            const interactive = !loading && !isDisabled;
+            const isLast = index === rows.length - 1;
+            const hasFooter = option?.footer != null;
             const row = (
               <>
-                <RadioGroupPrimitive.Item
-                  id={itemId}
-                  value={option.value}
-                  disabled={isDisabled}
-                  className={cn(
-                    'h-6 w-6 shrink-0 rounded-full border-2 bg-ods-card',
-                    error ? 'border-ods-error' : 'border-[var(--color-border-strong)]',
-                    'transition-colors duration-150',
-                    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-offset-2 focus-visible:ring-offset-ods-card',
-                    // Disabled: the EMPTY dot dims with the text; a selected one
-                    // keeps its accent so "on but locked" stays readable.
-                    'disabled:cursor-not-allowed',
-                    'disabled:data-[state=unchecked]:border-ods-border disabled:data-[state=unchecked]:bg-ods-bg',
-                    'data-[state=checked]:border-ods-accent',
-                  )}
-                >
-                  <RadioGroupPrimitive.Indicator className="flex h-full w-full items-center justify-center">
-                    <span className="block h-1/2 w-1/2 rounded-full bg-ods-accent" />
-                  </RadioGroupPrimitive.Indicator>
-                </RadioGroupPrimitive.Item>
+                {loading || !option ? (
+                  <UnifiedSkeleton variant="circular" className={RADIO_DOT_SIZE_CLASS} />
+                ) : (
+                  <RadioGroupPrimitive.Item
+                    id={itemId}
+                    value={option.value}
+                    disabled={isDisabled}
+                    className={cn(
+                      RADIO_DOT_SIZE_CLASS,
+                      'border-2 bg-ods-card',
+                      error ? 'border-ods-error' : 'border-[var(--color-border-strong)]',
+                      'transition-colors duration-150',
+                      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-offset-2 focus-visible:ring-offset-ods-card',
+                      // Disabled: the EMPTY dot dims with the text; a selected one
+                      // keeps its accent so "on but locked" stays readable.
+                      'disabled:cursor-not-allowed',
+                      'disabled:data-[state=unchecked]:border-ods-border disabled:data-[state=unchecked]:bg-ods-bg',
+                      'data-[state=checked]:border-ods-accent',
+                    )}
+                  >
+                    <RadioGroupPrimitive.Indicator className="flex h-full w-full items-center justify-center">
+                      <span className="block h-1/2 w-1/2 rounded-full bg-ods-accent" />
+                    </RadioGroupPrimitive.Indicator>
+                  </RadioGroupPrimitive.Item>
+                )}
                 <div
                   className={cn(
                     'flex min-w-0 flex-1 flex-col justify-center',
@@ -139,42 +194,48 @@ const RadioGroupBlock = forwardRef<ComponentRef<typeof RadioGroupPrimitive.Root>
                   )}
                 >
                   <span
-                    className={cn(
-                      'font-[family-name:var(--font-h4-family)] text-[length:var(--font-size-h4-body)] font-[number:var(--font-h4-weight)] leading-[24px]',
-                      'select-none truncate text-ods-text-primary',
-                    )}
-                    title={typeof option.label === 'string' ? option.label : undefined}
+                    className={cn(RADIO_OPTION_LABEL_CLASS, 'select-none truncate text-ods-text-primary')}
+                    title={typeof option?.label === 'string' ? option.label : undefined}
                   >
-                    {option.label}
+                    {option && !(loading && option.label === null) ? (
+                      option.label
+                    ) : (
+                      <TextLineSkeleton as="span" type="inherit" className={RADIO_OPTION_LABEL_BAR_CLASS} />
+                    )}
                   </span>
-                  {option.description && (
-                    <span
-                      className={cn(
-                        'font-[family-name:var(--font-h6-family)] text-[length:var(--font-size-h6-caption)] font-[number:var(--font-h6-weight)] leading-[20px]',
-                        'select-none text-ods-text-secondary',
-                      )}
-                    >
-                      {option.description}
+                  {loading && option?.description === null ? (
+                    <span className={RADIO_OPTION_DESCRIPTION_CLASS}>
+                      <TextLineSkeleton as="span" type="inherit" className={RADIO_OPTION_DESCRIPTION_BAR_CLASS} />
                     </span>
+                  ) : (
+                    option?.description && (
+                      <span className={cn(RADIO_OPTION_DESCRIPTION_CLASS, 'select-none text-ods-text-secondary')}>
+                        {option.description}
+                      </span>
+                    )
                   )}
                 </div>
-                {option.trailing && <div className="ml-auto flex shrink-0 items-center">{option.trailing}</div>}
+                {option?.trailing && <div className="ml-auto flex shrink-0 items-center">{option.trailing}</div>}
               </>
             );
             return (
-              <label
-                key={option.value}
-                htmlFor={itemId}
+              <Label
+                variant="surface"
+                key={optionKey}
+                htmlFor={loading ? undefined : itemId}
+                // One option of the list, in the loaded and the loading form alike (the gate compares the two).
+                data-loading-item=""
                 aria-disabled={isDisabled || undefined}
                 className={cn(
                   'flex w-full items-center gap-3',
                   isHorizontal && 'min-w-0 flex-1',
                   'transition-colors duration-200',
-                  isDisabled ? 'cursor-not-allowed' : 'cursor-pointer',
+                  isDisabled && 'cursor-not-allowed',
+                  interactive && 'cursor-pointer',
                   // Hover / active move the BACKGROUND only, like Input and
                   // CheckboxBlock — the border stays put so an unselected row
                   // never flashes "selected" under the cursor.
-                  !isDisabled && 'hover:bg-ods-bg-hover active:bg-ods-bg-active',
+                  interactive && 'hover:bg-ods-bg-hover active:bg-ods-bg-active',
                   isGrouped
                     ? cn(
                         'bg-ods-card px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs,8px)]',
@@ -183,7 +244,7 @@ const RadioGroupBlock = forwardRef<ComponentRef<typeof RadioGroupPrimitive.Root>
                       )
                     : cn(
                         'rounded-[6px] border bg-ods-card p-[var(--spacing-system-sf)]',
-                        !isDisabled &&
+                        interactive &&
                           'has-[[data-state=checked]]:bg-[var(--ods-system-greys-soft-grey)]/30 has-[[data-state=checked]]:border-ods-accent/40',
                         error ? 'border-ods-error' : 'border-ods-border',
                       ),
@@ -200,8 +261,8 @@ const RadioGroupBlock = forwardRef<ComponentRef<typeof RadioGroupPrimitive.Root>
                 )}
               >
                 {hasFooter ? <div className="flex w-full items-center gap-[var(--spacing-system-sf)]">{row}</div> : row}
-                {option.footer}
-              </label>
+                {option?.footer}
+              </Label>
             );
           })}
         </RadioGroupPrimitive.Root>

package/src/components/ui/release-changelog-section.tsx

@@ -6,10 +6,10 @@ import { useState } from 'react';
 import type { ChangelogEntry } from '../../types/product-release';
 import { cn } from '../../utils/cn';
 import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
-import { Badge, BadgeSkeleton } from './badge';
+import { Badge } from './badge';
 import { Button } from './button';
 import { FadePreview } from './fade-preview';
-import { useLoadingScope } from './loading-scope';
+import { LoadingItems, useLoadingScope } from './loading-scope';
 import { RichMarkdownRenderer } from './markdown';
 
 interface ReleaseChangelogSectionProps {
@@ -77,7 +77,8 @@ const ENTRY_DESCRIPTION_CLASS =
 /** FadePreview's toggle row: a `size="compact"` link Button (h-6, at every width) under a `mf` gap. */
 const COMPACT_BUTTON_HEIGHT_CLASS = 'h-6';
 const PREVIEW_TOGGLE_SKELETON_CLASS = cn('mt-[var(--spacing-system-mf)] w-28', COMPACT_BUTTON_HEIGHT_CLASS);
-/** Entries a skeleton draws when it is not told how many (the first fold of a section). */
+/** Entries a skeleton draws: a section's entries are the data's (no page size), so a typical one, which is also all
+ *  the preview-first mode shows before its fade (the preview is the section's first entry). */
 const CHANGELOG_SKELETON_ENTRIES = 1;
 
 export function ReleaseChangelogSection({
@@ -178,7 +179,7 @@ function ChangelogEntryList({
   return (
     <ul className={ENTRY_LIST_CLASS}>
       {entries.map((entry, index) => (
-        <li key={index} className={ENTRY_CLASS}>
+        <li key={index} className={ENTRY_CLASS} data-loading-item>
           {/* Entry title — run through the SAME markdown renderer as the
               description so inline markdown (links like `[label](url)`,
               emphasis) renders instead of showing as raw text, then pinned
@@ -208,11 +209,9 @@ function ChangelogEntryList({
   );
 }
 
-export interface ReleaseChangelogSectionSkeletonProps {
+interface ReleaseChangelogSectionSkeletonProps {
   /** The section's heading (static copy: drawn for real). */
   title: string;
-  /** Entries drawn when not `previewFirst` (the first fold). Default 1. */
-  count?: number;
   isBreaking?: boolean;
   hideTitle?: boolean;
   collapsible?: boolean;
@@ -227,9 +226,8 @@ export interface ReleaseChangelogSectionSkeletonProps {
  * A changelog section while it is read: the real icon and heading, the count badge as a chip, the first entry (title
  * line and description lines) as bars, clamped to the preview height with FadePreview's toggle row in preview mode.
  */
-export function ReleaseChangelogSectionSkeleton({
+function ReleaseChangelogSectionSkeleton({
   title,
-  count = CHANGELOG_SKELETON_ENTRIES,
   isBreaking = false,
   hideTitle = false,
   collapsible = false,
@@ -243,12 +241,12 @@ export function ReleaseChangelogSectionSkeleton({
       {icon}
       {title}
       {/* The count badge's own frame; its text is one or two digits. */}
-      <BadgeSkeleton className={cn(COUNT_BADGE_CLASS, 'w-[2ch]')} />
+      <Badge loading className={cn(COUNT_BADGE_CLASS, 'w-[2ch]')} />
     </h2>
   );
   const inPreviewMode = previewFirst && !collapsible;
   const showEntries = !collapsible || !defaultCollapsed;
-  const list = <ChangelogEntryListSkeleton count={inPreviewMode ? 1 : count} />;
+  const list = <ChangelogEntryListSkeleton />;
   return (
     <div className={cn(SECTION_CLASS, className)} aria-hidden>
       {!hideTitle &&
@@ -275,21 +273,22 @@ export function ReleaseChangelogSectionSkeleton({
   );
 }
 
-function ChangelogEntryListSkeleton({ count }: { count: number }) {
+function ChangelogEntryListSkeleton() {
   return (
     <ul className={ENTRY_LIST_CLASS}>
-      {Array.from({ length: count }, (_, index) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: skeleton entries never reorder
-        <li key={index} className={ENTRY_CLASS}>
-          <div className={ENTRY_TITLE_CLASS}>
-            <TextLineSkeleton type="h3" className="w-2/3" />
-          </div>
-          <div className={ENTRY_DESCRIPTION_CLASS}>
-            {/* Five lines: in preview mode the entry runs past the 120px clamp, as a real first entry does. */}
-            <TextLineSkeleton type="inherit" lines={5} className="w-full" />
-          </div>
-        </li>
-      ))}
+      <LoadingItems count={CHANGELOG_SKELETON_ENTRIES}>
+        {() => (
+          <li className={ENTRY_CLASS} data-loading-item>
+            <div className={ENTRY_TITLE_CLASS}>
+              <TextLineSkeleton type="h3" className="w-2/3" />
+            </div>
+            <div className={ENTRY_DESCRIPTION_CLASS}>
+              {/* Five lines: in preview mode the entry runs past the 120px clamp, as a real first entry does. */}
+              <TextLineSkeleton type="inherit" lines={5} className="w-full" />
+            </div>
+          </li>
+        )}
+      </LoadingItems>
     </ul>
   );
 }

package/src/components/ui/search-input.tsx

@@ -21,7 +21,9 @@ import { SearchIcon } from '../icons-v2-generated';
 import { XmarkCircleIcon } from '../icons-v2-generated/signs-and-symbols/xmark-circle-icon';
 import { LoadingRegion } from '../loading/loading-region';
 import { TextLineSkeleton } from '../loading/unified-skeleton';
+import { Button } from './button';
 import { HiddenTagsPopup } from './hidden-tags-popup';
+import { LoadingItems } from './loading-scope';
 import { Tag } from './tag';
 
 /** A result row's frame, read by the rows and by their loading state. */
@@ -404,6 +406,7 @@ export function SearchInput({
     return (
       <div
         key={result.id}
+        data-loading-item
         role="option"
         aria-selected={isHighlighted}
         className={cn(
@@ -426,12 +429,13 @@ export function SearchInput({
       // The results while they are read: the dropdown's own rows, a title bar each.
       return (
         <LoadingRegion label="Loading results">
-          {Array.from({ length: loadingRows }, (_, i) => (
-            // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
-            <div key={i} className={SEARCH_RESULT_ROW_CLASS} aria-hidden>
-              <TextLineSkeleton type="h6" className="w-2/3" />
-            </div>
-          ))}
+          <LoadingItems count={loadingRows}>
+            {() => (
+              <div className={SEARCH_RESULT_ROW_CLASS} aria-hidden data-loading-item>
+                <TextLineSkeleton type="h6" className="w-2/3" />
+              </div>
+            )}
+          </LoadingItems>
         </LoadingRegion>
       );
     }
@@ -500,23 +504,19 @@ export function SearchInput({
               {/* "+N" overflow badge */}
               {hiddenCount > 0 && (
                 <div ref={hiddenTagsRef} className="shrink-0">
-                  <button
+                  <Button
+                    variant="chip"
                     ref={badgeRef}
                     type="button"
+                    aria-expanded={showHiddenTags}
                     onClick={e => {
                       e.stopPropagation();
                       setShowHiddenTags(prev => !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',
-                    )}
                     aria-label={`${hiddenCount} more selected filters`}
                   >
                     {getLimitTagsText(hiddenCount)}
-                  </button>
+                  </Button>
                 </div>
               )}
 
@@ -541,14 +541,15 @@ export function SearchInput({
             {/* End adornment / Clear — pinned right, shrink-0 */}
             <div className="ml-auto flex shrink-0 items-center gap-1">
               {hasValue && !disabled && (
-                <button
+                <Button
+                  variant="transparent"
+                  size="icon-sm"
                   type="button"
                   onClick={handleClear}
-                  className="flex items-center justify-center transition-opacity hover:opacity-70"
                   aria-label="Clear search"
                 >
-                  <XmarkCircleIcon className="text-ods-text-secondary" size={24} />
-                </button>
+                  <XmarkCircleIcon className="text-ods-text-secondary" />
+                </Button>
               )}
               {endAdornment}
             </div>

package/src/components/ui/searchable-select.tsx

@@ -8,21 +8,23 @@ import { CheckIcon, SearchIcon } from '../icons-v2-generated';
 import { Chevron02DownIcon } from '../icons-v2-generated/arrows/chevron-02-down-icon';
 import { LoadingRegion } from '../loading/loading-region';
 import { TextLineSkeleton } from '../loading/unified-skeleton';
+import { BUTTON_KIND_CLASS, Button } from './button';
 import { FieldWrapper } from './field-wrapper';
 import { Input } from './input';
+import { LoadingItems } from './loading-scope';
 import { usePortalContainer } from './portal-container';
 
-/** An option's frame (a list row, or a tile in the grid), read by the options and by their loading state. */
-const SELECT_ROW_CLASS =
-  'flex w-full items-center gap-[var(--spacing-system-xs)] px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs)] text-left';
-const SELECT_TILE_CLASS =
-  'flex min-w-0 flex-col items-center justify-center gap-[var(--spacing-system-xxs)] border-b border-r border-ods-border p-[var(--spacing-system-xs)]';
+/** An option's frame (a list row, or a tile in the grid): the `row` button kind, read by the options and by their
+ *  loading state so both draw one box. A tile is the row laid out as a column. */
+const SELECT_TILE_LAYOUT = 'min-w-0 flex-col justify-center';
+const SELECT_ROW_CLASS = BUTTON_KIND_CLASS.row;
+const SELECT_TILE_CLASS = cn(BUTTON_KIND_CLASS.row, SELECT_TILE_LAYOUT);
 /**
  * Options the loading state draws (rows, or tiles in the grid layout) when its host states no `loadingRows`: a
  * typical count. A host that reads its options with a limit passes that limit.
  */
-const SELECT_LOADING_ROWS = 8;
-const SELECT_LOADING_TILES = 12;
+const SELECT_SKELETON_ROWS = 8;
+const SELECT_SKELETON_TILES = 12;
 
 export interface SearchableSelectOption {
   value: string;
@@ -157,37 +159,34 @@ export function SearchableSelect(allProps: SearchableSelectProps) {
   };
 
   const defaultTrigger = (
-    <button
+    <Button
+      variant="field"
       id={triggerId}
       type="button"
       disabled={disabled}
       data-invalid={isInvalid || undefined}
-      className={cn(
-        // Mirrors SelectTrigger so the closed state is indistinguishable from
-        // the regular Select.
-        'flex h-11 w-full items-center justify-between gap-2 rounded-md border px-3 text-left outline-none md:h-12',
-        'border-ods-border bg-ods-card text-h4',
-        selectedOption ? 'text-ods-text-primary' : 'text-ods-text-secondary',
-        'enabled:hover:border-ods-border-hover enabled:hover:bg-ods-bg-hover enabled:active:border-ods-border-active enabled:active:bg-ods-bg-active',
-        !isInvalid && 'data-[state=open]:border-ods-accent data-[state=open]:hover:border-ods-accent',
-        'group cursor-pointer transition-colors duration-200 disabled:!cursor-not-allowed disabled:bg-ods-bg',
-        isInvalid &&
-          'border-ods-error enabled:hover:border-ods-error enabled:active:border-ods-error data-[state=open]:border-ods-error',
-        className,
-      )}
+      className={className}
     >
       <span className="flex min-w-0 flex-1 items-center gap-2">
         {selectedOption?.icon}
-        <span className="truncate">{selectedOption ? selectedOption.label : placeholder}</span>
+        <span
+          className={cn(
+            'truncate',
+            disabled ? 'text-ods-text-disabled' : selectedOption ? 'text-ods-text-primary' : 'text-ods-text-secondary',
+          )}
+        >
+          {selectedOption ? selectedOption.label : placeholder}
+        </span>
       </span>
       <Chevron02DownIcon
         className={cn(
-          'shrink-0 text-ods-text-secondary transition-all duration-200 group-data-[state=open]:rotate-180',
-          isInvalid ? 'text-ods-error' : 'group-data-[state=open]:text-ods-accent',
+          'shrink-0 transition-all duration-200',
+          isOpen && 'rotate-180',
+          isInvalid ? 'text-ods-error' : isOpen ? 'text-ods-accent' : 'text-ods-text-secondary',
         )}
         size={24}
       />
-    </button>
+    </Button>
   );
 
   const triggerElement = <PopoverPrimitive.Trigger asChild>{trigger ?? defaultTrigger}</PopoverPrimitive.Trigger>;
@@ -228,6 +227,7 @@ export function SearchableSelect(allProps: SearchableSelectProps) {
         >
           <div className="shrink-0 border-b border-ods-border">
             <Input
+              userValue
               autoFocus
               value={search}
               onChange={e => setSearch(e.target.value)}
@@ -254,15 +254,13 @@ export function SearchableSelect(allProps: SearchableSelectProps) {
               // The options while they are read: the list's own rows (or tiles), a label bar each; `loadingText` is
               // what a screen reader hears.
               <LoadingRegion label={loadingText} className="contents">
-                {Array.from(
-                  { length: loadingRows ?? (isGrid ? SELECT_LOADING_TILES : SELECT_LOADING_ROWS) },
-                  (_, i) => (
-                    // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
-                    <div key={i} className={isGrid ? SELECT_TILE_CLASS : SELECT_ROW_CLASS} aria-hidden>
+                <LoadingItems count={loadingRows ?? (isGrid ? SELECT_SKELETON_TILES : SELECT_SKELETON_ROWS)}>
+                  {() => (
+                    <div data-loading-item className={isGrid ? SELECT_TILE_CLASS : SELECT_ROW_CLASS} aria-hidden>
                       <TextLineSkeleton type={isGrid ? 'h6' : 'h4'} className={isGrid ? 'w-full' : 'w-2/3'} />
                     </div>
-                  ),
-                )}
+                  )}
+                </LoadingItems>
               </LoadingRegion>
             ) : filtered.length === 0 ? (
               <div className={statusClass}>{emptyText}</div>
@@ -270,17 +268,16 @@ export function SearchableSelect(allProps: SearchableSelectProps) {
               filtered.map(opt => {
                 const isSelected = value === opt.value;
                 return (
-                  <button
+                  <Button
+                    variant="row"
                     key={opt.value}
+                    data-loading-item
                     type="button"
                     role="option"
                     aria-selected={isSelected}
+                    data-state={isSelected ? 'active' : undefined}
                     onClick={() => handleSelect(opt.value)}
-                    className={cn(
-                      'transition-colors hover:bg-ods-bg-hover',
-                      isGrid ? SELECT_TILE_CLASS : SELECT_ROW_CLASS,
-                      isSelected && 'bg-ods-bg-hover',
-                    )}
+                    className={isGrid ? SELECT_TILE_LAYOUT : undefined}
                   >
                     {renderOption ? (
                       renderOption(opt, isSelected)
@@ -306,7 +303,7 @@ export function SearchableSelect(allProps: SearchableSelectProps) {
                         {isSelected && <CheckIcon className="size-4 shrink-0 text-ods-accent" />}
                       </>
                     )}
-                  </button>
+                  </Button>
                 );
               })
             )}

package/src/components/ui/select.tsx

@@ -6,7 +6,9 @@ import { type ComponentPropsWithoutRef, type ComponentRef, type ElementRef, forw
 import { cn } from '../../utils/cn';
 import { Chevron02DownIcon } from '../icons-v2-generated/arrows/chevron-02-down-icon';
 import { CheckIcon } from '../icons-v2-generated/signs-and-symbols/check-icon';
+import { FieldValueSkeleton } from './field-value-skeleton';
 import { FieldWrapper } from './field-wrapper';
+import { useLoadingScope } from './loading-scope';
 import { usePortalContainer } from './portal-container';
 
 const Select = SelectPrimitive.Root;
@@ -29,6 +31,9 @@ const SelectTrigger = forwardRef<
   // Wired for a message even while `error` is undefined — see `FieldWrapper.errorSlot`.
   const errorSlot = 'error' in allProps;
   const isInvalid = invalid || !!error;
+  // ONE switch: in a page's loading state the trigger draws its box, its label and chevron for real, and its value
+  // (or placeholder) as a bar.
+  const inScope = useLoadingScope();
 
   const trigger = (
     <SelectPrimitive.Trigger
@@ -63,7 +68,7 @@ const SelectTrigger = forwardRef<
       )}
       {...props}
     >
-      {children}
+      {inScope ? <FieldValueSkeleton /> : children}
       <SelectPrimitive.Icon asChild>
         <Chevron02DownIcon
           className={cn(