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

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

@@ -26,13 +26,6 @@ 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
@@ -92,7 +85,6 @@ export function FloatingTooltip({
   className,
   delayDuration = 0,
   disabled = false,
-  triggerClassName,
 }: FloatingTooltipProps) {
   const [isOpen, setIsOpen] = React.useState(false)
   const arrowRef = React.useRef<HTMLDivElement>(null)
@@ -159,7 +151,7 @@ export function FloatingTooltip({
 
   return (
     <>
-      <div ref={refs.setReference} className={triggerClassName} {...getReferenceProps()}>
+      <div ref={refs.setReference} {...getReferenceProps()}>
         {children}
       </div>
       <FloatingPortal>

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

@@ -52,14 +52,7 @@ 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 - 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",
+					"disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-ods-bg",
 					"transition-colors duration-200",
 					className,
 				)}

package/src/components/ui/input.tsx

@@ -83,15 +83,8 @@ 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. 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).
+          // Disabled
           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,7 +6,6 @@ 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 = {
@@ -207,104 +206,26 @@ 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} loading={loading} />
+    return <IconButtonsVariant actions={actions} menuActions={menuActions} selector={selector} className={className} />
   }
 
   if (variant === 'menu-primary') {
-    return <MenuPrimaryVariant actions={actions} menuActions={menuActions || []} selector={selector} className={className} loading={loading} />
+    return <MenuPrimaryVariant actions={actions} menuActions={menuActions || []} selector={selector} className={className} />
   }
 
-  return <PrimaryButtonsVariant actions={actions} className={className} loading={loading} />
+  return <PrimaryButtonsVariant actions={actions} className={className} />
 }
 
 function IconButtonsVariant({
@@ -312,13 +233,11 @@ 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)
@@ -338,25 +257,17 @@ function IconButtonsVariant({
       {/* Desktop: every action as an icon button + optional overflow menu */}
       <div className={cn('hidden md:flex items-center', ACTIONS_GAP, className)}>
         {selector}
-        {loading ? (
-          <ActionSkeletons actions={desktopActions} />
-        ) : (
-          <>
-            {desktopActions.map((action, idx) => (
-              <React.Fragment key={actionKey(action, idx)}>
-                {renderActionButton(action)}
-              </React.Fragment>
-            ))}
-            {hasMenuActions && <ActionsMenuDropdown groups={menuActions} />}
-          </>
-        )}
+        {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)}>
-        {loading ? (
-          <MobileTriggerSkeleton />
-        ) : useSingleActionMobile && singleAction ? (
+        {useSingleActionMobile && singleAction ? (
           renderActionButton(singleAction, { iconOnly: true })
         ) : hasMobileMenuItems ? (
           <ActionsMenuDropdown groups={mobileMenuGroups} />
@@ -373,11 +284,9 @@ 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) => {
@@ -391,20 +300,14 @@ function PrimaryButtonsVariant({
   return (
     <>
       <div className={cn('hidden md:flex items-center', ACTIONS_GAP, className)}>
-        {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>
-          ))
-        )}
+        {desktopActions.map((action, idx) => (
+          <React.Fragment key={`desktop-${actionKey(action, idx)}`}>
+            {renderActionButton(action)}
+          </React.Fragment>
+        ))}
       </div>
 
-      <MobileBottomActions actions={sortedActions} loading={loading} />
+      <MobileBottomActions actions={sortedActions} />
     </>
   )
 }
@@ -418,13 +321,11 @@ 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)
@@ -439,47 +340,34 @@ function MenuPrimaryVariant({
     <>
       <div className={cn('hidden md:flex items-center', ACTIONS_GAP, className)}>
         {selector}
-        {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>
-            ))}
-          </>
-        )}
+        {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)}>
-        {loading ? <MobileTriggerSkeleton /> : hasMobileMenuItems ? <ActionsMenuDropdown groups={mobileMenuGroups} /> : null}
+        {hasMobileMenuItems ? <ActionsMenuDropdown groups={mobileMenuGroups} /> : null}
       </div>
     </>
   )
 }
 
-function MobileBottomActions({ actions, loading }: { actions: PageActionButton[]; loading?: boolean }) {
+function MobileBottomActions({ actions }: { actions: PageActionButton[] }) {
   return (
     <div className={cn(
       'fixed md:hidden bottom-0 left-0 right-0 z-50',
       'bg-ods-card border-t border-ods-border',
-      // `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)]',
+      'flex items-start pt-6 pb-6 px-6',
       ACTIONS_GAP,
     )}>
-      {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>
-        ))
-      )}
+      {actions.map((action, idx) => (
+        <React.Fragment key={`mobile-${actionKey(action, idx)}`}>
+          {renderActionButton(action, { fullWidth: !!action.label })}
+        </React.Fragment>
+      ))}
     </div>
   )
 }

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

@@ -81,10 +81,6 @@ const RadioGroupBlock = React.forwardRef<
       <div className={cn("relative flex w-full flex-col", className)}>
         <RadioGroupPrimitive.Root
           ref={ref}
-          // Same marker every field exposes — it is how a form finds (and
-          // scrolls to) the first control that failed validation. The GROUP is
-          // the field here; the individual options are not separately invalid.
-          data-invalid={error ? true : undefined}
           className={cn(
             "w-full",
             isGrouped
@@ -110,10 +106,6 @@ const RadioGroupBlock = React.forwardRef<
                   "flex w-full items-center gap-3",
                   "transition-colors duration-200",
                   isDisabled ? "cursor-not-allowed" : "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",
                   isGrouped
                     ? cn(
                         "bg-ods-card px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs,8px)]",
@@ -122,17 +114,12 @@ const RadioGroupBlock = React.forwardRef<
                       )
                     : cn(
                         "rounded-[6px] border bg-ods-card p-[var(--spacing-system-sf)]",
+                        !isDisabled && "hover:border-ods-accent/30",
                         !isDisabled &&
                           "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"
                       ),
-                  // Disabled matches a disabled field: flat `ods-bg` fill and
-                  // greyed text, not a fade of the whole row. The greying lives
-                  // on the TEXT COLUMN below, not here: as a descendant rule on
-                  // the row it also repainted whatever `trailing` renders — a
-                  // `Tag`'s label is a span too, and it went invisible against
-                  // its own fill.
-                  isDisabled && "bg-ods-bg",
+                  isDisabled && "opacity-50",
                   itemClassName
                 )}
               >
@@ -145,10 +132,7 @@ const RadioGroupBlock = React.forwardRef<
                     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]:bg-ods-bg disabled:data-[state=unchecked]:border-ods-border",
                     "data-[state=checked]:border-ods-accent"
                   )}
                 >
@@ -156,16 +140,7 @@ const RadioGroupBlock = React.forwardRef<
                     <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",
-                    // Direct children only — these are the two component-owned
-                    // wrappers. `option.label` / `option.description` are
-                    // ReactNode, so a descendant rule would repaint content the
-                    // caller styled itself.
-                    isDisabled && "[&>span]:text-ods-text-disabled",
-                  )}
-                >
+                <div className="flex min-w-0 flex-1 flex-col justify-center">
                   <span
                     className={cn(
                       "font-[family-name:var(--font-h4-family)] font-[number:var(--font-h4-weight)] text-[length:var(--font-size-h4-body)] leading-[24px]",

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

@@ -106,8 +106,7 @@ 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 - match Input exactly (value greys out, placeholder dims further)
-  "disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:placeholder:text-ods-border",
+  "disabled:cursor-not-allowed",
   "touch-manipulation"
 )
 

package/src/components/ui/select.tsx

@@ -42,14 +42,7 @@ const SelectTrigger = React.forwardRef<
         "enabled:hover:bg-ods-bg-hover enabled:hover:border-ods-border-hover enabled:active:bg-ods-bg-active enabled:active:border-ods-border-active",
         !isInvalid && "data-[state=open]:border-ods-accent data-[state=open]:hover:border-ods-accent",
         "group",
-        // Disabled - match Input exactly: value greys out, placeholder dims
-        // further. The `data-[placeholder]` rule above is a class+attribute
-        // selector, so the disabled placeholder rule stacks `:disabled` on top
-        // of it to win on specificity rather than on source order.
         "disabled:!cursor-not-allowed disabled:bg-ods-bg",
-        "disabled:text-ods-text-disabled disabled:data-[placeholder]:text-ods-border",
-        // The chevron sets its own colour — grey it with the value.
-        "disabled:[&_svg]:text-ods-text-disabled",
         "transition-colors duration-200 cursor-pointer",
         "[&>span]:line-clamp-1",
         isInvalid && "border-ods-error enabled:hover:border-ods-error enabled:active:border-ods-error data-[state=open]:border-ods-error",

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

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState, useEffect, useDeferredValue, useMemo, useRef, useCallback } from 'react'
+import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react'
 import { useSearchParams, useRouter, usePathname } from '../../embed-shims/next-navigation'
 import { cn } from '../../utils/cn'
 
@@ -38,14 +38,8 @@ interface TabNavigationProps {
   urlSync?: boolean | TabNavigationUrlSyncOptions
   defaultTab?: string  // Fallback when no valid tab in URL or initial value
 
-  /**
-   * Render prop for the tab BODY. Receives the tab to render and, additively,
-   * a `isStale` flag — true while the bar has already moved to a newly clicked
-   * tab but the body is still showing the PREVIOUS one (see `deferredActiveTab`
-   * below). Use it to dim the body or show a pending hint; without it a slow
-   * tab looks like a tab that simply did nothing.
-   */
-  children?: (activeTab: string, state: { isStale: boolean }) => React.ReactNode
+  // Render prop to provide active tab to children
+  children?: (activeTab: string) => React.ReactNode
 }
 
 export function TabNavigation({
@@ -125,22 +119,6 @@ export function TabNavigation({
     }
   }
 
-  // The tab BAR follows the click immediately; the tab BODY is deferred, which
-  // makes React treat swapping it as a transition. That is the whole fix for the
-  // flash: a tab whose data is not in the client cache yet SUSPENDS the moment it
-  // mounts, and outside a transition React has to show that Suspense fallback —
-  // so the skeleton appears for a frame before the real content lands. Inside a
-  // transition React keeps the previous tab on screen and swaps only once the new
-  // one is ready. Deferring the body rather than the whole state keeps the
-  // underline responsive, so the click still feels instant.
-  //
-  // The cost of that trade is that a SLOW tab leaves the previous tab's content
-  // under the new tab's underline with nothing saying so — worse than a skeleton,
-  // because stale data reads as fresh data. `isStale` is handed to the render prop
-  // so the body can mark itself while it waits.
-  const deferredActiveTab = useDeferredValue(activeTab)
-  const isStale = activeTab !== deferredActiveTab
-
   const scrollRef = useRef<HTMLDivElement>(null)
   const activeTabRef = useRef<HTMLButtonElement>(null)
   const isFirstActiveScrollRef = useRef(true)
@@ -313,7 +291,7 @@ export function TabNavigation({
       </div>
 
       {/* Render children with active tab if provided */}
-      {children && children(deferredActiveTab, { isStale })}
+      {children && children(activeTab)}
     </>
   )
 }

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

@@ -140,13 +140,7 @@ export function TagSearchInput<T = string>({
           "has-[:focus]:border-ods-accent",
           !disabled && "hover:bg-ods-bg-hover hover:border-ods-border-hover",
           disabled && "bg-ods-bg",
-          disabled && "cursor-not-allowed",
-          // Match Input: grey the text and the icons, don't fade the whole
-          // control (a blanket opacity also washes out the border). Icons only —
-          // this container has no adornment spans of its own, so a `[&_span]`
-          // rule would ONLY have reached the selected `Tag` chips, whose label is
-          // a span, and greyed them into their own fill in the light theme.
-          "has-[:disabled]:[&_svg]:text-ods-text-disabled",
+          disabled && "cursor-not-allowed opacity-50",
           className,
         )}
         onClick={() => {
@@ -205,8 +199,7 @@ export function TagSearchInput<T = string>({
               "flex-1 min-w-[60px] bg-transparent border-none outline-none",
               "text-h4",
               "text-ods-text-primary placeholder:text-ods-text-secondary",
-              // Disabled - match Input exactly (value greys out, placeholder dims further)
-              "disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:placeholder:text-ods-border",
+              "disabled:cursor-not-allowed",
             )}
           />
         </div>

package/src/components/ui/textarea.tsx

@@ -119,12 +119,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
           !hideBorder && cn("rounded-[6px] border bg-ods-card border-ods-border", accentBorder),
           !hideBorder && !props.disabled && "hover:bg-ods-bg-hover hover:border-ods-border-hover active:bg-ods-bg-active active:border-ods-border-active",
           !hideBorder && props.disabled && "!cursor-not-allowed bg-ods-bg",
-          // Start / end icons carry their own colour — grey them with the value
-          // so a disabled field reads as one flat colour. Scoped to the DIRECT
-          // span children (the two icon wrappers): the nodes inside them are
-          // rendered verbatim so callers can pass an interactive trigger and own
-          // its styling, and a descendant rule would overwrite exactly that.
-          "has-[:disabled]:[&>span]:text-ods-text-disabled has-[:disabled]:[&_svg]:text-ods-text-disabled",
           !hideBorder && isInvalid && cn("border-ods-error hover:border-ods-error", accentBorderError),
           hideBorder && "bg-transparent",
         )}
@@ -156,8 +150,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             // internally instead of pushing the icon out of frame.
             "max-h-[160px] overflow-y-auto",
             "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-ods-border/30 hover:scrollbar-thumb-ods-text-secondary/30",
-            // Disabled - match Input exactly (value greys out, placeholder dims further)
-            "disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:placeholder:text-ods-border",
+            "disabled:cursor-not-allowed disabled:placeholder:text-ods-border",
             className,
           )}
           {...props}

package/src/components/ui/truncate-text.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import { type ReactNode } from 'react'
-import { useIsTruncated } from '../../hooks/ui/use-is-truncated'
+import React, { type ReactNode, useEffect, useRef, useState } from 'react'
 import { cn } from '../../utils/cn'
 import { FloatingTooltip } from './floating-tooltip'
 
@@ -70,8 +69,24 @@ export function TruncateText({
   tone = 'primary',
   mono = false,
 }: TruncateTextProps) {
+  const ref = useRef<HTMLSpanElement>(null)
+  const [isTruncated, setIsTruncated] = useState(false)
   const isMultiLine = lines > 1
-  const { ref, isTruncated } = useIsTruncated<HTMLSpanElement>(children, { multiline: isMultiLine })
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    const check = () => {
+      const overflows = isMultiLine
+        ? el.scrollHeight > el.clientHeight + 1
+        : el.scrollWidth > el.clientWidth + 1
+      setIsTruncated(overflows)
+    }
+    check()
+    const ro = new ResizeObserver(check)
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [children, isMultiLine])
 
   const clampClass = isMultiLine
     ? LINE_CLAMP_CLASS[lines as Exclude<typeof lines, 1>]

package/src/hooks/ui/index.ts

@@ -6,7 +6,6 @@ export * from './use-focus-trap'
 export * from './use-header-height'
 export * from './use-horizontal-scrollbar'
 export * from './use-image-edge-color'
-export * from './use-is-truncated'
 export * from './use-local-storage'
 export * from './use-marquee-engine'
 export * from './use-media-query'