@flamingo-stack/openframe-frontend-core 0.0.489 → 0.0.490-snapshot.20260728181420

package/src/components/ui/.field-wrapper.md

@@ -1,4 +1,4 @@
-<!-- source-hash: bd15d4489bb0eca1b2faabacba129705 -->
+<!-- source-hash: 674794aef9f624e4f74a99dae56b9617 -->
 A layout wrapper component that adds an optional label above and a status message below any form field, handling the visual chrome (label + feedback text) while letting the field itself remain unstyled.
 
 ## Key Components
@@ -11,15 +11,16 @@ A `forwardRef` component that wraps form fields with consistent label and feedba
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `label` | `string` | — | Label text rendered above the field |
-| `error` | `string` | — | Status/feedback message rendered below the field |
+| `error` | `string` | — | Status/feedback message rendered below the field (out of flow) |
 | `errorVariant` | `"error" \| "warning" \| "success" \| "muted"` | `"error"` | Color variant for the feedback message |
 | `className` | `string` | — | Additional class applied to the outer wrapper |
 | `children` | `React.ReactNode` | — | The field element(s) to wrap |
 
 **Behavior:**
 - When neither `label` nor `error` is present, the wrapper renders as `contents` (no layout box introduced).
-- When either exists, it renders as a full-width flex column.
-- The feedback message clamps to 2 lines with ellipsis; the full text is accessible via the native `title` tooltip.
+- When either exists, it renders as a full-width **relative** flex column.
+- The feedback message is a single line, ellipsized on overflow; the full text is accessible via the native `title` tooltip.
+- The message is positioned **absolutely** (`bottom-0` + `translate-y-full`), so showing or hiding it never changes the field's height — no layout shift on validation. The trade-off: it hangs BELOW the wrapper box and overlaps whatever follows, so a form stacking fields must leave at least ~20px of vertical gap (e.g. `gap-[var(--spacing-system-lf)]`) for it to land in clear space. `CheckboxBlock` uses the same treatment.
 
 **Color Variants:**
 

package/src/components/ui/.tab-navigation.md

@@ -1,4 +1,4 @@
-<!-- source-hash: 4f81360202d7fa9875b28cdae48c29a5 -->
+<!-- source-hash: ef59a6aa7c2983608cd2d9c678c34323 -->
 Accessible, scrollable tab navigation bar component with optional URL synchronization, overflow scroll shadows, and support for both controlled and URL-driven active tab state.
 
 ## Key Components
@@ -46,6 +46,19 @@ Configuration object for URL synchronization:
   {(activeTab) => <ContentPanel tab={activeTab} />}
 </TabNavigation>
 
+// Render prop with the pending flag. The tab BODY is deferred
+// (`useDeferredValue`), so the underline moves instantly while the body keeps
+// showing the previous tab until the new one is ready — no Suspense-fallback
+// flash. `isStale` is true during that window; mark the body so stale data
+// doesn't read as fresh data.
+<TabNavigation tabs={tabs} urlSync>
+  {(activeTab, { isStale }) => (
+    <div className={cn(isStale && 'opacity-60 transition-opacity')}>
+      <ContentPanel tab={activeTab} />
+    </div>
+  )}
+</TabNavigation>
+
 // Stretched tabs with forced gradients
 <TabNavigation
   tabs={tabs}

package/src/components/ui/autocomplete.tsx

@@ -124,7 +124,8 @@ const innerInputStyles = cn(
   "flex-1 min-w-[60px] bg-transparent border-none outline-none",
   "text-h4",
   "text-ods-text-primary placeholder:text-ods-text-secondary",
-  "disabled:cursor-not-allowed"
+  // Disabled - match Input exactly (value greys out, placeholder dims further)
+  "disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:placeholder:text-ods-border"
 )
 
 function AutocompleteInner<T = string>(
@@ -421,6 +422,9 @@ function AutocompleteInner<T = string>(
     <PopoverPrimitive.Root open={isOpen} onOpenChange={handleOpenChange} modal={false}>
       <PopoverPrimitive.Anchor asChild>
         <div
+          // Same marker Input/Textarea/Select expose — it is how a form finds
+          // (and scrolls to) the first field that failed validation.
+          data-invalid={isInvalid || undefined}
           className={cn(
             // Layout — single line, no wrapping
             "flex items-center rounded-[6px] border min-h-11 md:min-h-12 cursor-text",
@@ -430,6 +434,14 @@ function AutocompleteInner<T = string>(
             "group",
             !disabled && "hover:bg-ods-bg-hover hover:border-ods-border-hover active:bg-ods-bg-active active:border-ods-border-active",
             disabled && "!cursor-not-allowed bg-ods-bg",
+            // Adornments / chevron carry their own colour — grey them with the
+            // value so a disabled field reads as one flat colour. Scoped to the
+            // DIRECT span child (the start adornment) on purpose: as a descendant
+            // rule it also hit the selected `Tag` chips in the middle zone, whose
+            // label is a span, and they went invisible against their own fill in
+            // the light theme. Anything nested inside the adornment that sets its
+            // own colour keeps it; anything that doesn't inherits the grey.
+            "has-[:disabled]:[&>span]:text-ods-text-disabled has-[:disabled]:[&_svg]:text-ods-text-disabled",
             isOpen && !isInvalid && "border-ods-accent hover:border-ods-accent",
             isInvalid && "border-ods-error hover:border-ods-error"
           )}

package/src/components/ui/button/button.tsx

@@ -30,7 +30,7 @@ const buttonVariants = cva(
         overlay: buttonSurfaceClasses.overlay,
       },
       size: {
-        default: "py-[var(--spacing-system-sf)] px-[var(--spacing-system-m)] text-h3 md:h-12 h-10",
+        default: "py-[var(--spacing-system-sf)] px-[var(--spacing-system-m)] text-h3 md:h-12 h-11",
         small: "p-[var(--spacing-system-xs)] text-h5 h-6 md:h-8",
         "small-legacy": "py-[var(--spacing-system-xs)] px-[var(--spacing-system-m)] h-10 text-[14px] font-bold", // Temporary alias for "small" — deprecated; grep size="small-legacy" (lib + hub) and migrate the remaining consumers before removal
         // 24px pill for slim strips (announcement/promo bars, inline banner

package/src/components/ui/checkbox-block.tsx

@@ -36,6 +36,9 @@ const CheckboxBlock = React.forwardRef<
   <div className={cn("relative flex w-full flex-col", className)}>
     <label
       htmlFor={id}
+      // Same marker every field exposes — it is how a form finds (and scrolls
+      // to) the first control that failed validation.
+      data-invalid={error ? true : undefined}
       className={cn(
         "flex items-center gap-[var(--spacing-system-s)] rounded-md ring-1 ring-inset w-full",
         // Trailing content stacks full-width below the text on mobile.
@@ -45,8 +48,17 @@ const CheckboxBlock = React.forwardRef<
         description && "min-h-[60px] md:min-h-[64px]",
         "bg-ods-card ring-ods-border",
         "cursor-pointer transition-colors duration-200",
-        "hover:ring-ods-accent/30",
-        disabled && "opacity-50 cursor-not-allowed hover:ring-ods-border",
+        // States mirror Input: hover / active move the BACKGROUND, the ring
+        // stays put. Disabled swaps to the flat `ods-bg` fill and greys the
+        // text + the box instead of fading the whole block, so a disabled block
+        // reads the same as a disabled field. The greying itself lives on the
+        // TEXT COLUMN below, not here: as a descendant rule on the label it also
+        // repainted the checked INDICATOR (Radix renders it as a `span`, and the
+        // checkmark svg inherits `currentColor`) and whatever `trailing` renders
+        // — a `Tag`'s label is a span too, and it went invisible against its own
+        // fill in the light theme.
+        !disabled && "hover:bg-ods-bg-hover active:bg-ods-bg-active",
+        disabled && "cursor-not-allowed bg-ods-bg",
         error && "ring-ods-error",
       )}
     >
@@ -63,7 +75,11 @@ const CheckboxBlock = React.forwardRef<
           error ? "border-ods-error" : "border-[var(--color-border-strong)]",
           "bg-ods-card",
           "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 box dims with the text instead of the whole
+          // block fading. A checked box keeps its accent fill — greying it too
+          // would bury the checkmark, and "on but locked" has to stay readable.
           "disabled:cursor-not-allowed",
+          "disabled:data-[state=unchecked]:bg-ods-bg disabled:data-[state=unchecked]:border-ods-border",
           "data-[state=checked]:bg-[var(--color-accent-primary)] data-[state=checked]:border-[var(--color-accent-primary)]"
         )}
       >
@@ -73,7 +89,15 @@ const CheckboxBlock = React.forwardRef<
           <CheckboxCheckmarkIcon className="w-2 h-2 md:w-2.5 md:h-2.5" />
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>
-      <div className="flex flex-1 flex-col justify-center min-w-0">
+      <div
+        className={cn(
+          "flex flex-1 flex-col justify-center min-w-0",
+          // Direct children only — these are the two component-owned wrappers.
+          // `label` and `description` are ReactNode (rich text, inline links),
+          // so a descendant rule would repaint content the caller styled itself.
+          disabled && "[&>span]:text-ods-text-disabled",
+        )}
+      >
         <span className={cn(
           "text-h4 !leading-5 md:!leading-6",
           "text-ods-text-primary select-none",

package/src/components/ui/date-picker.tsx

@@ -451,8 +451,12 @@ const triggerButtonStyles = cn(
   // Hover & active (not disabled)
   "enabled:hover:bg-ods-bg-hover enabled:hover:border-ods-border-hover enabled:active:bg-ods-bg-active enabled:active:border-ods-border-active",
   "focus:outline-none",
-  // Disabled
+  // Disabled - match Input exactly. The value/placeholder span inside sets its
+  // own colour, so the child rule (higher specificity) greys it too. Scoped to
+  // DIRECT children like every other field, so nested content that owns its
+  // colour keeps it.
   "disabled:!cursor-not-allowed disabled:bg-ods-bg",
+  "disabled:text-ods-text-disabled disabled:[&>span]:text-ods-text-disabled disabled:[&_svg]:text-ods-text-disabled",
   // Animation
   "transition-colors duration-200"
 );
@@ -465,6 +469,7 @@ const timeSelectTriggerStyles = cn(
   "enabled:hover:bg-ods-bg-hover enabled:hover:border-ods-border-hover enabled:active:bg-ods-bg-active enabled:active:border-ods-border-active",
   "focus:outline-none",
   "disabled:!cursor-not-allowed disabled:bg-ods-bg",
+  "disabled:text-ods-text-disabled disabled:[&>span]:text-ods-text-disabled disabled:[&_svg]:text-ods-text-disabled",
   "transition-colors duration-200 cursor-pointer",
   "text-ods-text-primary"
 );
@@ -519,6 +524,9 @@ export function DatePicker(props: DatePickerProps) {
         <button
           type="button"
           disabled={disabled}
+          // Same marker Input/Textarea/Select expose — it is how a form finds
+          // (and scrolls to) the first field that failed validation.
+          data-invalid={isInvalid || undefined}
           className={cn(triggerButtonStyles, "group", open && !isInvalid && "border-ods-accent enabled:hover:border-ods-accent enabled:hover:bg-ods-card", isInvalid && "border-ods-error enabled:hover:border-ods-error enabled:hover:bg-ods-card", className)}
         >
           <Calendar className="size-6 text-ods-text-secondary shrink-0" />
@@ -692,6 +700,9 @@ export function DatePickerInput({
           <button
             type="button"
             disabled={disabled}
+            // Same marker Input/Textarea/Select expose — it is how a form finds
+            // (and scrolls to) the first field that failed validation.
+            data-invalid={isInvalid || undefined}
             className={cn(triggerButtonStyles, "group", open && !isInvalid && "border-ods-accent enabled:hover:border-ods-accent enabled:hover:bg-ods-card", isInvalid && "border-ods-error enabled:hover:border-ods-error enabled:hover:bg-ods-card", "flex-1")}
           >
             <Calendar className="size-6 text-ods-text-secondary shrink-0" />
@@ -923,6 +934,9 @@ export function DatePickerInputSimple({
           <button
             type="button"
             disabled={disabled}
+            // Same marker Input/Textarea/Select expose — it is how a form finds
+            // (and scrolls to) the first field that failed validation.
+            data-invalid={isInvalid || undefined}
             className={cn(triggerButtonStyles, "group", open && !isInvalid && "border-ods-accent enabled:hover:border-ods-accent enabled:hover:bg-ods-card", isInvalid && "border-ods-error enabled:hover:border-ods-error enabled:hover:bg-ods-card", "flex-1")}
           >
             <Calendar className="size-6 text-ods-text-secondary shrink-0" />

package/src/components/ui/field-wrapper.tsx

@@ -6,7 +6,16 @@ import { cn } from "../../utils/cn"
 export interface FieldWrapperProps {
   /** Label text displayed above the field */
   label?: string
-  /** Status message displayed below the field. Wraps up to two lines, then ellipsizes. */
+  /**
+   * Status message displayed below the field, on ONE line, ellipsized on
+   * overflow (full text via the native `title`).
+   *
+   * It is positioned OUT OF FLOW (absolute, hanging below the wrapper), so it
+   * never changes the field's height when it appears — the same treatment
+   * `CheckboxBlock` uses. The trade is that it overlaps whatever sits directly
+   * below: a form stacking fields needs at least ~20px of vertical gap (e.g.
+   * `gap-[var(--spacing-system-lf)]`) for the message to land in clear space.
+   */
   error?: string
   /** Color variant for the message: "error" (red), "warning" (yellow), "success" (green) or "muted" (grey) */
   errorVariant?: "error" | "warning" | "success" | "muted"
@@ -27,7 +36,7 @@ const FieldWrapper = React.forwardRef<HTMLDivElement, FieldWrapperProps>(
     const hasChrome = label != null || error != null
 
     return (
-      <div ref={ref} className={cn(hasChrome ? "flex w-full flex-col" : "contents", className)}>
+      <div ref={ref} className={cn(hasChrome ? "relative flex w-full flex-col" : "contents", className)}>
         {label && (
           <label className="text-h4 text-ods-text-primary mb-1">
             {label}
@@ -35,10 +44,7 @@ const FieldWrapper = React.forwardRef<HTMLDivElement, FieldWrapperProps>(
         )}
         {children}
         {error && (
-          <p
-            className={cn("mt-1 text-h6 break-words line-clamp-2", errorVariantClasses[errorVariant])}
-            title={error}
-          >
+          <p className={cn("absolute bottom-0 left-0 right-0 translate-y-full text-h6 truncate", errorVariantClasses[errorVariant])} title={error}>
             {error}
           </p>
         )}

package/src/components/ui/floating-tooltip.tsx

@@ -26,6 +26,13 @@ interface FloatingTooltipProps {
   delayDuration?: number
   /** Disable the tooltip without unmounting the trigger wrapper. */
   disabled?: boolean
+  /**
+   * Classes for the trigger wrapper — the `div` this component puts around
+   * `children` to anchor the tooltip. That div becomes the flex/grid item in the
+   * caller's layout, so anything the child needed there (`min-w-0`, `flex-1`)
+   * must move onto it. Omit it and the wrapper carries no class, exactly as before.
+   */
+  triggerClassName?: string
 }
 
 // Parse colored text markup like [YELLOW]text[/YELLOW] into JSX
@@ -85,6 +92,7 @@ export function FloatingTooltip({
   className,
   delayDuration = 0,
   disabled = false,
+  triggerClassName,
 }: FloatingTooltipProps) {
   const [isOpen, setIsOpen] = React.useState(false)
   const arrowRef = React.useRef<HTMLDivElement>(null)
@@ -151,7 +159,7 @@ export function FloatingTooltip({
 
   return (
     <>
-      <div ref={refs.setReference} {...getReferenceProps()}>
+      <div ref={refs.setReference} className={triggerClassName} {...getReferenceProps()}>
         {children}
       </div>
       <FloatingPortal>

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

@@ -52,7 +52,14 @@ export const InputTrigger = React.forwardRef<HTMLButtonElement, InputTriggerProp
 						"data-[state=open]:border-ods-accent data-[state=open]:hover:border-ods-accent",
 					invalid &&
 						"border-ods-error enabled:hover:border-ods-error data-[state=open]:border-ods-error",
-					"disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-ods-bg",
+					// Disabled - match Input / SelectTrigger: grey the TEXT, don't fade the
+					// whole control (a blanket opacity also washes out the border and the
+					// adornment icons, which no other field does). The child rule catches
+					// the label span, which sets its own placeholder colour. Scoped to
+					// DIRECT children: `selectedLabel` is a ReactNode the caller owns, so
+					// anything inside it that sets its own colour keeps it.
+					"disabled:cursor-not-allowed disabled:bg-ods-bg",
+					"disabled:text-ods-text-disabled disabled:[&>span]:text-ods-text-disabled disabled:[&_svg]:text-ods-text-disabled",
 					"transition-colors duration-200",
 					className,
 				)}

package/src/components/ui/input.tsx

@@ -83,8 +83,15 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           "bg-ods-card border-ods-border has-[:focus]:border-ods-accent",
           // Hover & active (not disabled)
           !props.disabled && "hover:bg-ods-bg-hover hover:border-ods-border-hover active:bg-ods-bg-active active:border-ods-border-active",
-          // Disabled
+          // Disabled. The adornments (and any icon inside them) carry their own
+          // `text-ods-text-secondary`, so grey them from here — a disabled field
+          // must read as one flat colour, not grey text next to a live icon.
+          // Scoped to the DIRECT span children (the two adornment wrappers): a
+          // descendant rule would also repaint whatever the caller renders INSIDE
+          // an adornment, which is passed verbatim precisely so it can own its
+          // colour (a `Tag` there went invisible against its own fill).
           props.disabled && "!cursor-not-allowed bg-ods-bg",
+          "has-[:disabled]:[&>span]:text-ods-text-disabled has-[:disabled]:[&_svg]:text-ods-text-disabled",
           // Invalid
           isInvalid && invalidBorderClasses[variantIsInvalid ? (errorVariant as "error" | "warning") : "error"],
           className

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

@@ -6,6 +6,7 @@ import { Chevron02DownIcon } from '../icons-v2-generated'
 import { ActionsMenuDropdown, type ActionsMenuGroup, type ActionsMenuItem } from './actions-menu'
 import type { ButtonProps, SplitButtonIconAction } from './button'
 import { Button, SplitButton } from './button'
+import { Skeleton } from './skeleton'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip'
 
 export type PageActionButton = {
@@ -206,26 +207,104 @@ export interface PageActionsProps {
    */
   selector?: React.ReactNode
   className?: string
+  /**
+   * Render placeholders instead of the actions — for pages whose action SET
+   * depends on data still in flight. Opt-in: a page whose actions are already
+   * final while its title loads keeps rendering them.
+   */
+  loading?: boolean
 }
 
 const ACTIONS_GAP = 'gap-[var(--spacing-system-xs)]'
 
+/** Matches `Button` size="icon" / size="default" exactly, so a placeholder and the
+ *  button that replaces it occupy the same box at both breakpoints. `rounded-md`
+ *  is the same token `Button` itself uses — a raw `6px` would agree today and
+ *  drift the moment a platform overrides `--radius`. */
+const SKELETON_HEIGHT = 'h-11 md:h-12'
+const SKELETON_ICON_WIDTH = 'w-11 md:w-12'
+const SKELETON_LABEL_WIDTH = 'w-[120px] md:w-[140px]'
+const SKELETON_RADIUS = 'rounded-md'
+
+/**
+ * Placeholders for actions whose SHAPE isn't known yet — the page is still
+ * loading the record that decides which actions exist (e.g. an archived entity
+ * offers "Unarchive" where an active one offers "Edit").
+ *
+ * Why not render the actions anyway: a button is a promise. Painting the
+ * optimistic set means a flash of the wrong header AND a live click target that
+ * can act on the wrong assumption before the data lands. A grey box promises
+ * nothing and can't be clicked.
+ *
+ * The placeholders are derived from the actions the caller passed — one per
+ * action, each sized like the button that action WILL render — so the common
+ * case (the data confirms that set) settles with no layout shift at all. Sizing
+ * per action matters: `renderRawActionButton` collapses a label-less action (or
+ * one flagged `iconOnlyOnDesktop`) to a square `size="icon"` button, and a
+ * 140px-wide placeholder snapping to 48px is exactly the shift this is meant to
+ * avoid.
+ *
+ * An empty list still yields one placeholder: `loading` means the action set is
+ * unknown, not known-empty. Its shape comes from `emptyFallback`, because what
+ * an empty header settles into differs per variant — `icon-buttons` and
+ * `menu-primary` fall back to the square "…" overflow trigger, `primary-buttons`
+ * has no overflow trigger at all and settles into a labelled button.
+ */
+function ActionSkeletons({
+  actions,
+  fullWidth,
+  emptyFallback = 'icon',
+}: {
+  actions: PageActionButton[]
+  fullWidth?: boolean
+  emptyFallback?: 'icon' | 'label'
+}) {
+  const items = actions.length > 0 ? actions : [null]
+  return (
+    <>
+      {items.map((action, idx) => {
+        // Mirrors `renderRawActionButton`'s `isIconOnly`. The mobile bottom bar
+        // stretches only labelled buttons (`fullWidth: !!action.label`), so an
+        // icon action keeps its square box there too.
+        const isIconOnly = action ? !action.label || !!action.iconOnlyOnDesktop : emptyFallback === 'icon'
+        return (
+          <Skeleton
+            // Static placeholder list — index IS the identity here.
+            key={`action-skeleton-${idx}`}
+            className={cn(
+              SKELETON_HEIGHT,
+              SKELETON_RADIUS,
+              isIconOnly ? SKELETON_ICON_WIDTH : fullWidth ? 'flex-1' : SKELETON_LABEL_WIDTH,
+            )}
+          />
+        )
+      })}
+    </>
+  )
+}
+
+/** Mobile placeholder for the variants that collapse to ONE trigger (icon button or "…"). */
+function MobileTriggerSkeleton() {
+  return <Skeleton className={cn(SKELETON_HEIGHT, SKELETON_ICON_WIDTH, SKELETON_RADIUS)} />
+}
+
 export function PageActions({
   variant = 'icon-buttons',
   actions,
   menuActions,
   selector,
   className,
+  loading,
 }: PageActionsProps) {
   if (variant === 'icon-buttons') {
-    return <IconButtonsVariant actions={actions} menuActions={menuActions} selector={selector} className={className} />
+    return <IconButtonsVariant actions={actions} menuActions={menuActions} selector={selector} className={className} loading={loading} />
   }
 
   if (variant === 'menu-primary') {
-    return <MenuPrimaryVariant actions={actions} menuActions={menuActions || []} selector={selector} className={className} />
+    return <MenuPrimaryVariant actions={actions} menuActions={menuActions || []} selector={selector} className={className} loading={loading} />
   }
 
-  return <PrimaryButtonsVariant actions={actions} className={className} />
+  return <PrimaryButtonsVariant actions={actions} className={className} loading={loading} />
 }
 
 function IconButtonsVariant({
@@ -233,11 +312,13 @@ function IconButtonsVariant({
   menuActions,
   selector,
   className,
+  loading,
 }: {
   actions: PageActionButton[]
   menuActions?: ActionsMenuGroup[]
   selector?: React.ReactNode
   className?: string
+  loading?: boolean
 }) {
   const desktopActions = actions.filter(a => !a.showOnlyMobile)
   const hasMenuActions = !!menuActions && menuActions.some(g => g.items.length > 0)
@@ -257,17 +338,25 @@ function IconButtonsVariant({
       {/* Desktop: every action as an icon button + optional overflow menu */}
       <div className={cn('hidden md:flex items-center', ACTIONS_GAP, className)}>
         {selector}
-        {desktopActions.map((action, idx) => (
-          <React.Fragment key={actionKey(action, idx)}>
-            {renderActionButton(action)}
-          </React.Fragment>
-        ))}
-        {hasMenuActions && <ActionsMenuDropdown groups={menuActions} />}
+        {loading ? (
+          <ActionSkeletons actions={desktopActions} />
+        ) : (
+          <>
+            {desktopActions.map((action, idx) => (
+              <React.Fragment key={actionKey(action, idx)}>
+                {renderActionButton(action)}
+              </React.Fragment>
+            ))}
+            {hasMenuActions && <ActionsMenuDropdown groups={menuActions} />}
+          </>
+        )}
       </div>
 
       {/* Mobile: single icon button OR all actions merged into one "..." menu */}
       <div className={cn('flex md:hidden', className)}>
-        {useSingleActionMobile && singleAction ? (
+        {loading ? (
+          <MobileTriggerSkeleton />
+        ) : useSingleActionMobile && singleAction ? (
           renderActionButton(singleAction, { iconOnly: true })
         ) : hasMobileMenuItems ? (
           <ActionsMenuDropdown groups={mobileMenuGroups} />
@@ -284,9 +373,11 @@ function IconButtonsVariant({
 function PrimaryButtonsVariant({
   actions,
   className,
+  loading,
 }: {
   actions: PageActionButton[]
   className?: string
+  loading?: boolean
 }) {
   // Sort: outline first, accent last (rightmost on desktop).
   const sortedActions = [...actions].sort((a, b) => {
@@ -300,14 +391,20 @@ function PrimaryButtonsVariant({
   return (
     <>
       <div className={cn('hidden md:flex items-center', ACTIONS_GAP, className)}>
-        {desktopActions.map((action, idx) => (
-          <React.Fragment key={`desktop-${actionKey(action, idx)}`}>
-            {renderActionButton(action)}
-          </React.Fragment>
-        ))}
+        {loading ? (
+          // No overflow trigger in this variant — an unknown action set settles
+          // into a labelled button, not a square one.
+          <ActionSkeletons actions={desktopActions} emptyFallback="label" />
+        ) : (
+          desktopActions.map((action, idx) => (
+            <React.Fragment key={`desktop-${actionKey(action, idx)}`}>
+              {renderActionButton(action)}
+            </React.Fragment>
+          ))
+        )}
       </div>
 
-      <MobileBottomActions actions={sortedActions} />
+      <MobileBottomActions actions={sortedActions} loading={loading} />
     </>
   )
 }
@@ -321,11 +418,13 @@ function MenuPrimaryVariant({
   menuActions,
   selector,
   className,
+  loading,
 }: {
   actions: PageActionButton[]
   menuActions: ActionsMenuGroup[]
   selector?: React.ReactNode
   className?: string
+  loading?: boolean
 }) {
   const desktopActions = actions.filter(a => !a.showOnlyMobile)
   const hasMenuActions = menuActions.some(g => g.items.length > 0)
@@ -340,34 +439,47 @@ function MenuPrimaryVariant({
     <>
       <div className={cn('hidden md:flex items-center', ACTIONS_GAP, className)}>
         {selector}
-        {hasMenuActions && <ActionsMenuDropdown groups={menuActions} />}
-        {desktopActions.map((action, idx) => (
-          <React.Fragment key={`desktop-${actionKey(action, idx)}`}>
-            {renderActionButton({ ...action, variant: action.variant || 'accent' })}
-          </React.Fragment>
-        ))}
+        {loading ? (
+          <ActionSkeletons actions={desktopActions} />
+        ) : (
+          <>
+            {hasMenuActions && <ActionsMenuDropdown groups={menuActions} />}
+            {desktopActions.map((action, idx) => (
+              <React.Fragment key={`desktop-${actionKey(action, idx)}`}>
+                {renderActionButton({ ...action, variant: action.variant || 'accent' })}
+              </React.Fragment>
+            ))}
+          </>
+        )}
       </div>
 
       <div className={cn('flex md:hidden', className)}>
-        {hasMobileMenuItems ? <ActionsMenuDropdown groups={mobileMenuGroups} /> : null}
+        {loading ? <MobileTriggerSkeleton /> : hasMobileMenuItems ? <ActionsMenuDropdown groups={mobileMenuGroups} /> : null}
       </div>
     </>
   )
 }
 
-function MobileBottomActions({ actions }: { actions: PageActionButton[] }) {
+function MobileBottomActions({ actions, loading }: { actions: PageActionButton[]; loading?: boolean }) {
   return (
     <div className={cn(
       'fixed md:hidden bottom-0 left-0 right-0 z-50',
       'bg-ods-card border-t border-ods-border',
-      'flex items-start pt-6 pb-6 px-6',
+      // `lf` (24px at every breakpoint), NOT `l` — this bar is `md:hidden`, so the
+      // only value it ever uses is the MOBILE one, and `l` is 16px there. The
+      // fixed variant is what keeps the 24px the bar has always had.
+      'flex items-start p-[var(--spacing-system-lf)]',
       ACTIONS_GAP,
     )}>
-      {actions.map((action, idx) => (
-        <React.Fragment key={`mobile-${actionKey(action, idx)}`}>
-          {renderActionButton(action, { fullWidth: !!action.label })}
-        </React.Fragment>
-      ))}
+      {loading ? (
+        <ActionSkeletons actions={actions} fullWidth emptyFallback="label" />
+      ) : (
+        actions.map((action, idx) => (
+          <React.Fragment key={`mobile-${actionKey(action, idx)}`}>
+            {renderActionButton(action, { fullWidth: !!action.label })}
+          </React.Fragment>
+        ))
+      )}
     </div>
   )
 }