@flamingo-stack/openframe-frontend-core 0.0.490 → 0.0.491

package/src/components/layout/title-block.tsx

@@ -40,6 +40,14 @@
  * byte-identical. Do NOT change defaults or touch anything else here.
  *
  * SANCTIONED EXCEPTION (2026-07, explicit human sign-off): the OPTIONAL
+ * `subtitleRow` prop. Defaults to `'when-set'` — the subtitle row keeps
+ * rendering only when `subtitle` is truthy, so every existing caller is
+ * byte-identical. The other two values decide how a page trades a header that
+ * never moves against a header that never shows an empty line; see the prop's
+ * own doc for which to pick. Additive + default-preserving; do NOT change the
+ * default.
+ *
+ * SANCTIONED EXCEPTION (2026-07, explicit human sign-off): the OPTIONAL
  * `titleWrap` prop. Defaults to `false` — the frozen single-line `truncate`
  * baseline is unchanged for every existing caller. Content DETAIL pages (whose
  * h1 is CMS data of arbitrary length — releases, legal docs, FAQ docs, dev
@@ -58,12 +66,27 @@
  * so its natural width drives the wrap while `truncate` still clamps a title
  * that alone exceeds the container. The mobile (base) layout is untouched.
  * This is the new frozen baseline; do NOT re-introduce breakpoint stacking.
+ *
+ * SANCTIONED EXCEPTION (2026-07, explicit human sign-off): overflow tooltips on
+ * the title and subtitle. This one CHANGES the baseline for every caller: the
+ * native `title=""` attribute on both is replaced by the ODS `FloatingTooltip`,
+ * armed only when the text is genuinely clipped (`useIsTruncated`). Both stay
+ * single-line — that is the design, and the tooltip is what makes a clipped
+ * title readable instead of merely pretty. Nothing is lost for assistive tech:
+ * `text-overflow: ellipsis` never hid the text from the accessibility tree, so
+ * the full string was always exposed; the attribute only ever served a mouse.
+ * The wrapper `div` the tooltip needs goes OUTSIDE the `h1`/`p` — never inside:
+ * a `div` inside a `p` is auto-closed by the HTML parser, which would split the
+ * subtitle paragraph and desync hydration. The `titleWrap` branch is untouched
+ * (wrapped text never clips, so it never needs a tooltip).
  * ========================================================================== */
 
 import React from 'react'
+import { useIsTruncated } from '../../hooks/ui/use-is-truncated'
 import { cn } from '../../utils/cn'
 import type { ActionsMenuGroup } from '../ui/actions-menu'
 import { EntityImage } from '../ui/entity-image'
+import { FloatingTooltip } from '../ui/floating-tooltip'
 import { PageActions, type PageActionButton } from '../ui/page-actions'
 import { BackButton } from './back-button'
 
@@ -106,6 +129,28 @@ export interface TitleBlockProps {
    *  (typography + surrounding markup unchanged, so header height is identical to loaded).
    *  Additive + default-preserving: omit it and every existing caller is byte-identical. */
   loading?: boolean
+  /**
+   * Render the ACTIONS as placeholders too. Separate from `loading` on purpose:
+   * a page whose action set is already final (it depends on the route, not on
+   * the record) keeps showing its real buttons while the title loads.
+   */
+  loadingActions?: boolean
+  /**
+   * When the subtitle row occupies the layout. The subtitle is often optional
+   * RECORD data — unknown while loading, sometimes absent afterwards — and there
+   * is no setting that both fills the loading header and never leaves a blank
+   * line, so the caller picks which one matters.
+   *
+   * - `'when-set'` (default) — only when `subtitle` has text.
+   * - `'while-loading'` — also during `loading`, as a skeleton bar. The header
+   *   looks complete while it loads, and the row collapses if the record turns
+   *   out to have no subtitle (so that case settles one line shorter).
+   * - `'always'` — the row never collapses; an empty subtitle holds its line
+   *   with an invisible spacer. The header cannot change height. Use it when the
+   *   loaded page ALWAYS has a subtitle — typically a standalone skeleton
+   *   component matching a page whose subtitle is guaranteed.
+   */
+  subtitleRow?: 'when-set' | 'while-loading' | 'always'
   /** When true, a long title WRAPS onto multiple lines instead of the frozen single-line
    *  ellipsis clamp. For content detail pages whose h1 is CMS data of arbitrary length.
    *  Additive + default-preserving: omit it and every existing caller is byte-identical. */
@@ -129,6 +174,22 @@ function TitleTextSkeleton({ widthClass, heightClass }: { widthClass: string; he
   )
 }
 
+/**
+ * Bar geometry per title size, following the ODS type scale across breakpoints
+ * (`md` = 800px, `lg` = 1280px here — the SAME widths the typography tokens
+ * switch at, so bar and text step together).
+ *
+ * `h2` needs no `lg` step because `text-h2` has none: it is 24/32 on mobile and
+ * 32/40 from tablet up. `text-h1` scales at both breakpoints (40 → 48 → 56), so
+ * its bar does too — reusing the h2 bar there would leave a stamp-sized smudge
+ * inside a 64px line. Heights stay well under the line box's ascent on purpose;
+ * see `TitleTextSkeleton` for why that is what keeps the header height honest.
+ */
+const TITLE_SKELETON_SIZE = {
+  h1: { width: 'w-56 md:w-80 lg:w-96', height: 'h-7 md:h-8 lg:h-9' },
+  h2: { width: 'w-48 md:w-72', height: 'h-4 md:h-6' },
+} as const
+
 export function TitleBlock({
   title,
   subtitle,
@@ -143,14 +204,28 @@ export function TitleBlock({
   titleSize = 'h2',
   titleAdornment,
   loading,
+  loadingActions,
+  subtitleRow = 'when-set',
   titleWrap = false,
 }: TitleBlockProps) {
+  const hasSubtitleRow =
+    !!subtitle || subtitleRow === 'always' || (subtitleRow === 'while-loading' && !!loading)
   const hasActions = actions && actions.length > 0
   const hasMenuActions = !!menuActions && menuActions.some(g => g.items.length > 0)
   const titleClass = titleSize === 'h1' ? 'text-h1' : 'text-h2'
   // Frozen baseline is the single-line `truncate`; `titleWrap` swaps it for
   // multi-line wrapping (break-words guards pathological unbroken tokens).
   const titleOverflowClass = titleWrap ? 'break-words' : 'truncate'
+  const skeletonSize = TITLE_SKELETON_SIZE[titleSize]
+
+  // Exactly one title element renders per pass, so one ref covers every branch.
+  // The tooltip arms itself only on real clipping — repeating a fully visible
+  // title back to the user is noise, and `titleWrap`/loading never clip at all.
+  const { ref: titleRef, isTruncated: titleTruncated } = useIsTruncated<HTMLHeadingElement>(loading ? null : title)
+  const { ref: subtitleRef, isTruncated: subtitleTruncated } = useIsTruncated<HTMLParagraphElement>(
+    loading ? null : subtitle,
+  )
+  const titleNode = loading ? <TitleTextSkeleton widthClass={skeletonSize.width} heightClass={skeletonSize.height} /> : title
 
   return (
     <div
@@ -183,7 +258,7 @@ export function TitleBlock({
             className="hidden md:inline-flex"
           />
         )}
-        {(image || subtitle || loading) ? (
+        {(image || hasSubtitleRow || loading) ? (
           <div className="flex items-center gap-[var(--spacing-system-m)] min-w-0 w-full">
             {image && (
               <EntityImage
@@ -196,15 +271,32 @@ export function TitleBlock({
               {(loading || title) && (
                 titleAdornment ? (
                   <div className="flex items-center gap-[var(--spacing-system-m)] min-w-0 w-full">
-                    <h1 className={cn(titleClass, 'text-ods-text-primary min-w-0', titleOverflowClass)} title={title}>{loading ? <TitleTextSkeleton widthClass="w-48 md:w-72" heightClass="h-4 md:h-6" /> : title}</h1>
+                    {/* `min-w-0` moves onto the tooltip's wrapper: the wrapper is
+                        now the flex item, and without it the row refuses to
+                        shrink and pushes the adornment out. */}
+                    <FloatingTooltip content={title} side="bottom" disabled={!titleTruncated} triggerClassName="min-w-0">
+                      <h1 ref={titleRef} className={cn(titleClass, 'text-ods-text-primary min-w-0', titleOverflowClass)}>{titleNode}</h1>
+                    </FloatingTooltip>
                     <span className="shrink-0">{titleAdornment}</span>
                   </div>
                 ) : (
-                  <h1 className={cn(titleClass, 'text-ods-text-primary', titleOverflowClass)} title={title}>{loading ? <TitleTextSkeleton widthClass="w-48 md:w-72" heightClass="h-4 md:h-6" /> : title}</h1>
+                  <FloatingTooltip content={title} side="bottom" disabled={!titleTruncated}>
+                    <h1 ref={titleRef} className={cn(titleClass, 'text-ods-text-primary', titleOverflowClass)}>{titleNode}</h1>
+                  </FloatingTooltip>
                 )
               )}
-              {subtitle && (
-                <p className="text-h6 text-ods-text-secondary truncate" title={subtitle}>{loading ? <TitleTextSkeleton widthClass="w-28 md:w-36" heightClass="h-2.5 md:h-3" /> : subtitle}</p>
+              {hasSubtitleRow && (
+                /* The NBSP is a pure spacer, reached only in `'always'` mode: an
+                   empty `p` collapses to zero height (its only content would be
+                   collapsible whitespace), which is exactly the shift that mode
+                   exists to prevent. Hidden from AT — it carries no meaning. */
+                <FloatingTooltip content={subtitle} side="bottom" disabled={!subtitleTruncated}>
+                  <p
+                    ref={subtitleRef}
+                    className="text-h6 text-ods-text-secondary truncate"
+                    aria-hidden={!loading && !subtitle ? true : undefined}
+                  >{loading ? <TitleTextSkeleton widthClass="w-28 md:w-36" heightClass="h-2.5 md:h-3" /> : (subtitle || '\u00A0')}</p>
+                </FloatingTooltip>
               )}
             </div>
           </div>
@@ -212,7 +304,9 @@ export function TitleBlock({
           title && (
             titleAdornment ? (
               <div className="flex items-center gap-[var(--spacing-system-m)] min-w-0 w-full">
-                <h1 className={cn(titleClass, 'text-ods-text-primary min-w-0', titleOverflowClass)} title={title}>{title}</h1>
+                <FloatingTooltip content={title} side="bottom" disabled={!titleTruncated} triggerClassName="min-w-0">
+                  <h1 ref={titleRef} className={cn(titleClass, 'text-ods-text-primary min-w-0', titleOverflowClass)}>{title}</h1>
+                </FloatingTooltip>
                 <span className="shrink-0">{titleAdornment}</span>
               </div>
             ) : (
@@ -226,13 +320,18 @@ export function TitleBlock({
         )}
       </div>
 
-      {(hasActions || hasMenuActions || selector) && (
+      {/* `loadingActions` opens this gate on its own: the case the flag exists for
+          is a page that does not YET know its action set, which is exactly the
+          page that passes `actions={[]}` — gating on `hasActions` alone would
+          render nothing and then pop the real buttons in. */}
+      {(hasActions || hasMenuActions || selector || loadingActions) && (
         <div className="flex gap-2 items-center shrink-0">
           <PageActions
             variant={actionsVariant}
             actions={actions ?? []}
             menuActions={menuActions}
             selector={selector}
+            loading={loadingActions}
           />
         </div>
       )}

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