@flamingo-stack/openframe-frontend-core 0.0.780 → 0.0.782

package/src/components/ui/textarea.tsx

@@ -5,7 +5,10 @@ import { type ButtonHTMLAttributes, type ReactNode, type TextareaHTMLAttributes,
 import { CONTROL_SIZE } from '../../styles/component-sizes';
 import { cn } from '../../utils/cn';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { Button } from './button';
 import { FieldWrapper } from './field-wrapper';
+import { Label } from './label';
+import { useLoadingScope } from './loading-scope';
 
 /**
  * The plain textarea's box: its type step (which sets the line height its rows are counted in), padding, 1px border,
@@ -73,7 +76,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((allProps, ref)
   const isInvalid = invalid || !!error;
   const hasAdornment = !!endIcon || !!startIcon;
 
-  // The adorned layout wraps the field in a `<label>`. Without an explicit
+  // The adorned layout wraps the field in a `<Label variant="surface">`. Without an explicit
   // `htmlFor`, the label's control defaults to its FIRST labelable descendant
   // — which is `startIcon` (e.g. the composer `+` button) when present, so a
   // click anywhere on the field synthesises a click on that button. Bind the
@@ -81,12 +84,19 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((allProps, ref)
   const reactId = useId();
   const fieldId = props.id ?? reactId;
 
+  // ONE switch: in a page's loading state the plain field draws its label for real and its box as `TextareaSkeleton`
+  // (sized by the caller's classes or its `rows`). The textarea stays mounted, hidden, so nothing re-registers when the
+  // scope ends.
+  const inScope = useLoadingScope();
+
   // Without any adornment we keep the historical layout: bare textarea, the
   // border/bg/hover all live on the textarea itself.
   if (!hasAdornment) {
     return (
       <FieldWrapper label={label} labelVariant={labelVariant} error={error} errorSlot={errorSlot}>
+        {inScope && <TextareaSkeleton rows={props.rows} className={className} />}
         <textarea
+          hidden={inScope || props.hidden}
           className={cn(
             TEXTAREA_BOX_CLASS,
             'focus:border-ods-accent focus-visible:outline-none',
@@ -107,7 +117,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((allProps, ref)
     );
   }
 
-  // With an end icon we lift border/bg onto a `<label>` wrapper so the icon
+  // With an end icon we lift border/bg onto a `<Label variant="surface">` wrapper so the icon
   // sits visually inside the same field. The textarea becomes a transparent
   // child. Wrapper classes mirror `Input` 1:1 (same items-center, same
   // `has-[:focus]` selectors, same active state, same outline reset) so
@@ -126,7 +136,8 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((allProps, ref)
     ? 'group-has-[textarea:focus]:text-ods-accent'
     : 'group-has-[:focus]:text-ods-accent';
   const content = (
-    <label
+    <Label
+      variant="surface"
       htmlFor={fieldId}
       data-invalid={isInvalid || undefined}
       className={cn(
@@ -195,27 +206,23 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((allProps, ref)
       />
 
       {endIconAsButton ? (
-        <button
+        <Button
+          // A field adornment: lit in the accent while the field has focus, the error colour while it is invalid.
+          variant="bare"
+          data-tone="field"
+          size="icon-sm"
           type="button"
           aria-label={endIconButtonProps?.['aria-label'] ?? 'Submit'}
           {...endIconButtonProps}
           className={cn(
-            // `h-6` matches the textarea's `leading-6` line box so the icon's
-            // visual center lines up with the text on the first line. Without
-            // it, `items-end` bottom-aligns the smaller mobile icon (size-4)
-            // against the 24px text line and drops it below the text center.
-            'flex h-6 shrink-0 items-center text-ods-text-secondary transition-colors duration-200',
-            adornmentAccent,
-            'group-data-[invalid]:text-ods-error',
-            '[&_svg]:size-4 md:[&_svg]:size-6',
-            'cursor-pointer hover:text-ods-text-primary',
-            'focus-visible:text-ods-accent focus-visible:outline-none',
-            'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-ods-text-secondary',
+            // The 32px target overhangs the textarea's 24px `leading-6` line box by 4px on each side (`-my-1`), so the
+            // icon's centre stays on the first line's centre.
+            '-my-1 shrink-0',
             endIconButtonProps?.className,
           )}
         >
           {endIcon}
-        </button>
+        </Button>
       ) : (
         <span
           className={cn(
@@ -228,7 +235,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((allProps, ref)
           {endIcon}
         </span>
       )}
-    </label>
+    </Label>
   );
 
   return (
@@ -244,13 +251,15 @@ Textarea.displayName = 'Textarea';
  * take, never under its minimum. The border is transparent so the one skeleton surface fills the whole box. The label
  * is the host's: it is static copy and renders for real.
  */
-function TextareaSkeleton({ rows = TEXTAREA_DEFAULT_ROWS, className }: { rows?: number; className?: string }) {
+function TextareaSkeleton({ rows, className }: { rows?: number; className?: string }) {
+  // A field sized by its caller's classes (a growing message box) takes their height; else the height its rows take.
+  const sizedByClasses = rows === undefined && !!className;
   return (
     <UnifiedSkeleton
       className={cn(TEXTAREA_BOX_CLASS, 'border-transparent', className)}
-      style={{ height: textareaBoxHeight(rows) }}
+      style={sizedByClasses ? undefined : { height: textareaBoxHeight(rows ?? TEXTAREA_DEFAULT_ROWS) }}
     />
   );
 }
 
-export { Textarea, TextareaSkeleton };
+export { Textarea };

package/src/components/ui/ticket-attachments-list.tsx

@@ -2,6 +2,7 @@
 
 import { cn } from '../../utils/cn';
 import { Download02Icon, FileIcon, TrashIcon } from '../icons-v2-generated';
+import { Button } from './button';
 import { SquareAvatar } from './square-avatar';
 
 export interface TicketAttachment {
@@ -65,24 +66,29 @@ export function TicketAttachmentsList({ attachments, className, size = 'default'
             {attachment.fileSize && <p className="text-ods-text-secondary text-h6">{attachment.fileSize}</p>}
           </div>
           {attachment.onDelete && (
-            <button
+            <Button
+              variant="bare"
+              data-tone="danger"
+              size="icon-sm"
               type="button"
               onClick={attachment.onDelete}
-              className="shrink-0 text-ods-text-secondary transition-colors hover:text-ods-error"
+              className="shrink-0"
               aria-label={`Delete ${attachment.fileName}`}
             >
-              <TrashIcon className={compact ? 'size-4' : 'size-5'} />
-            </button>
+              <TrashIcon />
+            </Button>
           )}
           {attachment.onDownload && (
-            <button
+            <Button
+              variant="bare"
+              size="icon-sm"
               type="button"
               onClick={attachment.onDownload}
-              className="shrink-0 text-ods-text-secondary transition-colors hover:text-ods-text-primary"
+              className="shrink-0"
               aria-label={`Download ${attachment.fileName}`}
             >
-              <Download02Icon className={compact ? 'size-4' : 'size-6'} />
-            </button>
+              <Download02Icon />
+            </Button>
           )}
         </div>
       ))}

package/src/components/ui/ticket-info-section.tsx

@@ -5,6 +5,7 @@ import { cn } from '../../utils/cn';
 import { Chevron02DownIcon } from '../icons-v2-generated/arrows/chevron-02-down-icon';
 import { UserIcon } from '../icons-v2-generated/users/user-icon';
 import { AssigneeDropdown, type TicketAssigneeOption } from './assignee-dropdown';
+import { Button } from './button';
 import { SimpleMarkdownRenderer } from './markdown/simple-markdown-renderer';
 import { SquareAvatar } from './square-avatar';
 import { Tag } from './tag';
@@ -103,14 +104,18 @@ function InfoCell({
             <span className="flex size-4 shrink-0 items-center justify-center text-ods-text-secondary">{icon}</span>
           )}
           {onClick ? (
-            <button
+            <Button
+              variant="link"
+              size="compact"
+              noPaddingX
               type="button"
+              data-tone="primary"
               onClick={onClick}
-              className="cursor-pointer truncate text-left text-ods-text-primary transition-colors text-h4 hover:text-ods-accent"
+              className="min-w-0 max-w-full justify-start"
               title={value}
             >
-              {value}
-            </button>
+              <span className="truncate">{value}</span>
+            </Button>
           ) : (
             <span className="truncate text-ods-text-primary text-h4" title={value}>
               {value}
@@ -205,23 +210,17 @@ export function TicketInfoSection({
             </div>
           )}
           {onExpand && (
-            <button
+            <Button
+              variant="outline"
+              size="icon"
               type="button"
               onClick={onExpand}
-              className={cn(
-                'flex shrink-0 items-center justify-center rounded-[6px] p-3',
-                'border border-ods-border bg-ods-card',
-                'transition-colors duration-150 hover:bg-ods-bg-hover',
-              )}
+              className="shrink-0"
               aria-label={expanded ? 'Collapse' : 'Expand'}
+              aria-expanded={expanded}
             >
-              <Chevron02DownIcon
-                className={cn(
-                  'size-6 text-ods-text-primary transition-transform duration-200',
-                  expanded && 'rotate-180',
-                )}
-              />
-            </button>
+              <Chevron02DownIcon className={cn('transition-transform duration-200', expanded && 'rotate-180')} />
+            </Button>
           )}
         </div>
       </div>

package/src/components/ui/ticket-note-card.tsx

@@ -3,6 +3,7 @@
 import { type KeyboardEvent, useState } from 'react';
 import { cn } from '../../utils/cn';
 import { CheckIcon, PenEditIcon, TrashIcon, XmarkIcon } from '../icons-v2-generated';
+import { Button } from './button';
 import { Input } from './input';
 import { SquareAvatar } from './square-avatar';
 
@@ -64,23 +65,28 @@ export function TicketNoteCard({ note, onEdit, onDelete, className }: TicketNote
             <div className="flex-1">
               <Input value={editText} onChange={e => setEditText(e.target.value)} onKeyDown={handleKeyDown} autoFocus />
             </div>
-            <button
+            <Button
+              variant="bare"
+              data-tone="success"
+              size="icon-sm"
               type="button"
               onClick={handleSave}
               disabled={!editText.trim()}
-              className="shrink-0 text-ods-success transition-colors hover:text-ods-success/80 disabled:opacity-50"
+              className="shrink-0"
               aria-label="Save note"
             >
-              <CheckIcon className="size-5" />
-            </button>
-            <button
+              <CheckIcon className="text-ods-success" />
+            </Button>
+            <Button
+              variant="bare"
+              size="icon-sm"
               type="button"
               onClick={handleCancel}
-              className="shrink-0 text-ods-text-secondary transition-colors hover:text-ods-text-primary"
+              className="shrink-0"
               aria-label="Cancel editing"
             >
-              <XmarkIcon className="size-5" />
-            </button>
+              <XmarkIcon />
+            </Button>
           </div>
         ) : (
           <>
@@ -94,24 +100,27 @@ export function TicketNoteCard({ note, onEdit, onDelete, className }: TicketNote
       {note.isOwn && !isEditing && (
         <div className="flex shrink-0 items-center gap-4">
           {onDelete && (
-            <button
+            <Button
+              variant="bare"
+              data-tone="danger"
+              size="icon-sm"
               type="button"
               onClick={() => onDelete(note.id)}
-              className="text-ods-text-secondary transition-colors hover:text-ods-error"
               aria-label="Delete note"
             >
-              <TrashIcon className="size-6" />
-            </button>
+              <TrashIcon />
+            </Button>
           )}
           {onEdit && (
-            <button
+            <Button
+              variant="bare"
+              size="icon-sm"
               type="button"
               onClick={() => setIsEditing(true)}
-              className="text-ods-text-secondary transition-colors hover:text-ods-text-primary"
               aria-label="Edit note"
             >
-              <PenEditIcon className="size-6" />
-            </button>
+              <PenEditIcon />
+            </Button>
           )}
         </div>
       )}

package/src/components/ui/ticket-notes-section.tsx

@@ -3,6 +3,7 @@
 import { type KeyboardEvent, useState } from 'react';
 import { cn } from '../../utils/cn';
 import { Send03Icon } from '../icons-v2-generated';
+import { Button } from './button';
 import { Input } from './input';
 import { type TicketNote, TicketNoteCard } from './ticket-note-card';
 
@@ -57,20 +58,17 @@ export function TicketNotesSection({
               disabled={isAddingNote}
             />
           </div>
-          <button
+          <Button
+            variant="outline"
+            size="icon"
             type="button"
             onClick={handleSend}
             disabled={!noteText.trim() || isAddingNote}
-            className={cn(
-              'flex h-11 w-11 shrink-0 items-center justify-center rounded-[6px] content-md:h-12 content-md:w-12',
-              'border border-ods-border bg-ods-card',
-              'transition-colors hover:bg-ods-bg-hover',
-              'disabled:cursor-not-allowed disabled:opacity-50',
-            )}
+            className="shrink-0"
             aria-label="Send note"
           >
-            <Send03Icon className="size-6 text-ods-text-secondary" />
-          </button>
+            <Send03Icon />
+          </Button>
         </div>
       )}
     </div>

package/src/components/ui/ticket-status-config-row.tsx

@@ -11,6 +11,7 @@ import { Button } from './button';
 import { ColorPresetSelect, ColorPickerInput } from './color-preset-select';
 import { Input } from './input';
 import { Label } from './label';
+import { InertWhileLoading, LOADING_NOOP, LoadingWhen, useLoadingScope } from './loading-scope';
 import type { TagProps } from './tag';
 import { TicketStatusTag } from './ticket-status-tag';
 import { TouchFriendlyTooltip } from './touch-friendly-tooltip';
@@ -42,8 +43,16 @@ export interface TicketStatusConfigRowProps {
    * Rendered beside the delete button; the drag rail is hidden on touch anyway.
    */
   moveButtons?: ReactNode;
+  /**
+   * The status is still being read: the row keeps its layout, its labels and its delete button (real, inert), and
+   * every read part (the name, the color, the chip) draws its own loading form. A loading scope does the same.
+   */
+  loading?: boolean;
 }
 
+/** The delete button's box, read by the button and its skeleton. */
+const DELETE_BUTTON_SIZE_CLASS = 'size-11 content-md:size-12';
+
 export function TicketStatusConfigRow({
   variant,
   statusKey,
@@ -60,7 +69,10 @@ export function TicketStatusConfigRow({
   dragHandleProps,
   isDragging,
   moveButtons,
+  loading: loadingProp,
 }: TicketStatusConfigRowProps) {
+  // ONE switch: in a page's loading state (or while the host reads the status) the read parts are skeletons.
+  const loading = useLoadingScope() || !!loadingProp;
   // Standalone system rows render outside any SortableList, so the row answers
   // "is there a drag rail at all?" itself — same media gate the list uses.
   const dragAndDropEnabled = useDragAndDropEnabled();
@@ -68,7 +80,8 @@ export function TicketStatusConfigRow({
   const isSystem = variant === 'system';
   const isCustomColor = !isSystem && presetKey === undefined;
   const previewColor = isSystem ? undefined : color;
-  const showColorPicker = !isSystem && onColorChange && color !== undefined;
+  // A row the host lets recolor has the Color column; while its color is read the column is a field skeleton.
+  const showColorPicker = !isSystem && !!onColorChange && (color !== undefined || loading);
   // Custom rows render as filled pills (no border); system rows take the
   // page-configured variant (outline/primary). text-h5 already uppercases.
   const previewVariant: SystemTagVariant | undefined = systemTagVariant ?? (isSystem ? undefined : 'primary');
@@ -78,8 +91,11 @@ export function TicketStatusConfigRow({
   // exactly its height: the h4 line + the label's mb-1.
   const fieldRowOffset = 'mt-[calc(var(--font-line-space-h4-body)+0.25rem)]';
 
+  // The chip, the name field and the color select draw their own loading forms (the chip its tag skeleton, each
+  // field its box with a bar for the value).
   const chip = (
     <TicketStatusTag
+      loading={loading}
       status={statusKey}
       label={name || ' '}
       color={previewColor}
@@ -109,14 +125,16 @@ export function TicketStatusConfigRow({
           {isSystem ? (
             <DraggerIcon size={24} aria-hidden className="opacity-40" />
           ) : (
-            <button
+            <Button
+              variant="transparent"
+              size="icon-sm"
               type="button"
               aria-label="Drag to reorder"
-              className="flex size-6 cursor-grab items-center justify-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ods-focus active:cursor-grabbing"
+              className="shrink-0 cursor-grab"
               {...dragHandleProps}
             >
               <DraggerIcon size={24} />
-            </button>
+            </Button>
           )}
         </div>
       )}
@@ -147,25 +165,34 @@ export function TicketStatusConfigRow({
           <Label variant="large" htmlFor={nameInputId}>
             Status Name
           </Label>
-          <Input
-            id={nameInputId}
-            value={name}
-            onChange={e => onNameChange?.(e.target.value)}
-            disabled={isSystem}
-            readOnly={isSystem}
-            maxLength={50}
-          />
+          <LoadingWhen loading={loading}>
+            <Input
+              id={nameInputId}
+              value={name}
+              onChange={e => onNameChange?.(e.target.value)}
+              disabled={isSystem}
+              readOnly={isSystem}
+              maxLength={50}
+            />
+          </LoadingWhen>
         </div>
 
         {showColorPicker ? (
           <div className="order-3 flex min-w-0 grow basis-full flex-col gap-[var(--spacing-system-xxs)] content-md:order-2 content-md:basis-0">
             <Label variant="large">Color</Label>
-            <ColorPresetSelect value={color} presetKey={presetKey} onChange={onColorChange} />
+            <LoadingWhen loading={loading || !onColorChange || color === undefined}>
+              <ColorPresetSelect value={color ?? ''} presetKey={presetKey} onChange={onColorChange ?? LOADING_NOOP} />
+            </LoadingWhen>
             {/* Custom hex: a second field row inside the Color column, directly
-                under the select (per design). */}
-            {isCustomColor && (
+                under the select (per design). Drawn for a row whose color is known to be custom; the field draws its
+                own loading form. */}
+            {onColorChange && color !== undefined && isCustomColor && (
               <div className="mt-[var(--spacing-system-xxs)] flex min-w-0">
-                <ColorPickerInput value={color} onChange={next => onColorChange({ color: next, preset: undefined })} />
+                <ColorPickerInput
+                  value={color}
+                  onChange={next => onColorChange({ color: next, preset: undefined })}
+                  loading={loading}
+                />
               </div>
             )}
           </div>
@@ -219,31 +246,30 @@ export function TicketStatusConfigRow({
           {isSystem ? (
             <div className="flex w-11 justify-center content-md:w-12">
               <TouchFriendlyTooltip content={systemTooltip}>
-                <button
-                  type="button"
-                  aria-label={systemTooltip ?? 'System status'}
-                  className="flex size-6 items-center justify-center text-ods-text-secondary outline-none focus-visible:ring-2 focus-visible:ring-ods-focus"
-                >
+                <Button variant="bare" size="icon-sm" type="button" aria-label={systemTooltip ?? 'System status'}>
                   <InfoCircleIcon size={24} />
-                </button>
+                </Button>
               </TouchFriendlyTooltip>
             </div>
           ) : (
-            <TouchFriendlyTooltip content={deleteDisabled ? deleteDisabledReason : undefined}>
-              <span className="inline-flex">
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="icon"
-                  aria-label="Delete status"
-                  disabled={deleteDisabled}
-                  onClick={deleteDisabled ? undefined : onDelete}
-                  className={cn('size-11 content-md:size-12', deleteDisabled && 'pointer-events-none')}
-                >
-                  <TrashIcon className="text-ods-error" />
-                </Button>
-              </span>
-            </TouchFriendlyTooltip>
+            // The delete button is a static control: drawn for real in both forms, inert while the status is read.
+            <InertWhileLoading loading={loading} className="inline-flex">
+              <TouchFriendlyTooltip content={deleteDisabled && !loading ? deleteDisabledReason : undefined}>
+                <span className="inline-flex">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="icon"
+                    aria-label="Delete status"
+                    disabled={deleteDisabled}
+                    onClick={deleteDisabled ? undefined : onDelete}
+                    className={cn(DELETE_BUTTON_SIZE_CLASS, deleteDisabled && 'pointer-events-none')}
+                  >
+                    <TrashIcon className="text-ods-error" />
+                  </Button>
+                </span>
+              </TouchFriendlyTooltip>
+            </InertWhileLoading>
           )}
         </div>
       </div>

package/src/components/ui/ticket-status-tag.tsx

@@ -5,7 +5,9 @@ import { cn } from '../../utils/cn';
 import { deriveActiveColor, deriveHoverColor, getReadableTextColor } from '../../utils/ods-color-utils';
 import { CheckCircleIcon, Chevron02DownIcon } from '../icons-v2-generated';
 import { ActionsMenuDropdown } from './actions-menu';
+import { Button } from './button';
 import { ColorSwatch } from './color-swatch';
+import { useLoadingScope } from './loading-scope';
 import { Tag, type TagProps, tagVariants } from './tag';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
 
@@ -182,6 +184,8 @@ export interface TicketStatusTagOption {
 export interface TicketStatusTagProps {
   /** Ticket status in any known format (ACTIVE, active, ACTION_REQUIRED, etc.) */
   status: string;
+  /** The status is still being read: the tag draws its skeleton (no dropdown). A loading scope does the same. */
+  loading?: boolean;
   /** Override the default label */
   label?: string;
   /**
@@ -230,7 +234,10 @@ export function TicketStatusTag({
   isPending = false,
   disabled = false,
   disabledReason,
+  loading: loadingProp = false,
 }: TicketStatusTagProps) {
+  // ONE switch: in a page's loading state, or while the status is read, the tag is its skeleton and opens no menu.
+  const loading = useLoadingScope() || loadingProp;
   const config = getTicketStatusConfig(status);
   // Custom color: drive bg via CSS vars so the derived hover/active fills can win
   // on :hover/:active (an inline backgroundColor would block class-based hover).
@@ -248,6 +255,7 @@ export function TicketStatusTag({
 
   const tag = (
     <Tag
+      loading={loading}
       label={label ?? config.label}
       variant={variant ?? config.variant}
       icon={showIcon ? config.icon : undefined}
@@ -256,8 +264,8 @@ export function TicketStatusTag({
     />
   );
 
-  if (disabled || !options || options.length === 0 || !onSelect) {
-    if (disabled && disabledReason) {
+  if (loading || disabled || !options || options.length === 0 || !onSelect) {
+    if (!loading && disabled && disabledReason) {
       return (
         <TooltipProvider delayDuration={0}>
           <Tooltip>
@@ -287,32 +295,37 @@ export function TicketStatusTag({
         },
       ]}
       customTrigger={
-        <button
+        // The tag IS the control's look (its status colour), so the button contributes the click, the focus ring and
+        // the menu semantics and no surface of its own (`glyph` + `wrap`).
+        <Button
+          variant="glyph"
+          size="wrap"
           type="button"
           disabled={isPending}
           aria-label="Change status"
-          style={customStyle}
-          className={cn(
-            // Reuse the tag's variant styling, but split into a label section and a
-            // separated chevron section (the common dropdown-button seam).
-            tagVariants({ variant: variant ?? config.variant }),
-            'w-fit shrink-0 items-stretch justify-start gap-0 overflow-hidden p-0',
-            'disabled:cursor-not-allowed disabled:opacity-60',
-            // Custom color: bg/hover/active from the CSS vars set above.
-            customColorClasses,
-            className,
-          )}
+          className={cn('w-fit shrink-0', className)}
         >
-          <span className="flex items-center gap-[var(--spacing-system-xxs)] px-[var(--spacing-system-xsf)]">
-            {showIcon && config.icon && (
-              <span className="flex size-5 shrink-0 items-center justify-center">{config.icon}</span>
+          <span
+            style={customStyle}
+            className={cn(
+              // The tag's variant styling, split into a label section and a separated chevron section (the common
+              // dropdown-button seam). Custom color: bg/hover/active from the CSS vars set above.
+              tagVariants({ variant: variant ?? config.variant }),
+              'items-stretch justify-start gap-0 overflow-hidden p-0',
+              customColorClasses,
             )}
-            <span className="truncate">{label ?? config.label}</span>
+          >
+            <span className="flex items-center gap-[var(--spacing-system-xxs)] px-[var(--spacing-system-xsf)]">
+              {showIcon && config.icon && (
+                <span className="flex size-5 shrink-0 items-center justify-center">{config.icon}</span>
+              )}
+              <span className="truncate">{label ?? config.label}</span>
+            </span>
+            <span className="flex items-center justify-center self-stretch border-l border-ods-border px-[var(--spacing-system-xsf)]">
+              <Chevron02DownIcon className="size-4 shrink-0" />
+            </span>
           </span>
-          <span className="flex items-center justify-center self-stretch border-l border-ods-border px-[var(--spacing-system-xsf)]">
-            <Chevron02DownIcon className="size-4 shrink-0" />
-          </span>
-        </button>
+        </Button>
       }
     />
   );

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

@@ -2,6 +2,7 @@
 
 import { useMemo } from 'react';
 import { Autocomplete } from './autocomplete';
+import { useLoadingScope } from './loading-scope';
 
 /** An IANA zone as people read it: "Europe/Rome (GMT+2)". */
 export function timezoneLabel(tz: string): string {
@@ -42,7 +43,8 @@ export interface TimezoneSelectProps {
   clearable?: boolean;
   placeholder?: string;
   className?: string;
-  /** The zone is still being resolved or read: the field draws its skeleton (`Autocomplete`'s `fieldLoading`). */
+  /** The zone is still being resolved or read: the field draws its skeleton (`Autocomplete`'s `fieldLoading`), the
+   *  picker's own box. In a loading scope it does the same. */
   loading?: boolean;
 }
 
@@ -58,8 +60,10 @@ export function TimezoneSelect({
   clearable = false,
   placeholder = 'Search timezone…',
   className,
-  loading = false,
+  loading: loadingProp = false,
 }: TimezoneSelectProps) {
+  // ONE switch: in a page's loading state, or while the zone is resolved, the picker draws its own skeleton.
+  const loading = useLoadingScope() || loadingProp;
   const options = useMemo(() => timezoneOptions(value), [value]);
   return (
     <Autocomplete