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

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

@@ -0,0 +1,159 @@
+import { describe, it, expect, beforeAll } from 'vitest'
+import { render, fireEvent, screen } from '@testing-library/react'
+import { mockReplace, setMockSearchParams } from '../../../../vitest.setup'
+import { TabNavigation, type TabItem } from '../tab-navigation'
+
+beforeAll(() => {
+  // jsdom ships no ResizeObserver; the tab strip observes itself on mount to
+  // keep the edge fades and the underline in sync with its own width.
+  globalThis.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  } as unknown as typeof ResizeObserver
+})
+
+const TABS: TabItem[] = [
+  { id: 'general', label: 'General' },
+  { id: 'software', label: 'Software' },
+]
+
+/**
+ * Renders with `urlSync` and reports the tab id the BODY was last rendered with
+ * — the one thing a consumer actually observes, and the value the deferred
+ * render settles on once React has flushed.
+ */
+function renderNav(tabs: TabItem[]) {
+  let seen = '__never-rendered__'
+  const element = (next: TabItem[]) => (
+    <TabNavigation tabs={next} urlSync>
+      {(active) => {
+        seen = active
+        return null
+      }}
+    </TabNavigation>
+  )
+  const utils = render(element(tabs))
+  return {
+    get active() {
+      return seen
+    },
+    rerenderWith(next: TabItem[]) {
+      utils.rerender(element(next))
+    },
+  }
+}
+
+describe('TabNavigation with urlSync', () => {
+  describe('a tab list that arrives late', () => {
+    // The sync effect is guarded on the URL value changing, so that our own
+    // `router.replace` doesn't come back looking like someone else's edit. The
+    // guard must not also swallow the tabs themselves arriving — an empty list
+    // resolves to no active tab, and the URL never moves again to correct it.
+    it('applies the deep-linked tab once the tabs arrive', () => {
+      setMockSearchParams(new URLSearchParams('tab=software'))
+      const nav = renderNav([])
+      expect(nav.active).toBe('')
+
+      nav.rerenderWith(TABS)
+      expect(nav.active).toBe('software')
+    })
+
+    it('falls back to the first tab once the tabs arrive', () => {
+      const nav = renderNav([])
+      expect(nav.active).toBe('')
+
+      nav.rerenderWith(TABS)
+      expect(nav.active).toBe('general')
+    })
+
+    it('leaves a tab the user picked alone when the tabs array is merely re-created', () => {
+      const nav = renderNav(TABS)
+      fireEvent.click(screen.getByText('Software'))
+      expect(nav.active).toBe('software')
+
+      // Same ids, new array + new Set identity — what a consumer passing an
+      // inline literal produces on every one of its renders.
+      nav.rerenderWith([...TABS])
+      expect(nav.active).toBe('software')
+    })
+  })
+
+  describe('clicking a tab', () => {
+    // The regression this component was rewritten for: state moves on click,
+    // `router.replace` lands a tick or more later, and an effect comparing the
+    // state against the URL in between would read the tab just LEFT and push
+    // the tab back to it.
+    it('does not revert before the navigation lands', () => {
+      const nav = renderNav(TABS)
+      fireEvent.click(screen.getByText('Software'))
+
+      // The URL has deliberately NOT been updated here — this is the window in
+      // which the old effect fought its own click.
+      expect(nav.active).toBe('software')
+    })
+
+    it('writes the tab to the URL without scrolling to the top', () => {
+      renderNav(TABS)
+      fireEvent.click(screen.getByText('Software'))
+
+      expect(mockReplace).toHaveBeenCalledWith('/?tab=software', { scroll: false })
+    })
+
+    it('stays put when its own write finally lands', () => {
+      const nav = renderNav(TABS)
+      fireEvent.click(screen.getByText('Software'))
+
+      setMockSearchParams(new URLSearchParams('tab=software'))
+      nav.rerenderWith(TABS)
+      expect(nav.active).toBe('software')
+    })
+
+    // Two clicks inside one navigation: the FIRST write lands while the second
+    // is still in flight. Arriving out of step like that, it is indistinguishable
+    // from an external change unless the component remembers what it wrote.
+    it('ignores an earlier write landing after a second click', () => {
+      const nav = renderNav(TABS)
+      fireEvent.click(screen.getByText('Software'))
+      fireEvent.click(screen.getByText('General'))
+      expect(nav.active).toBe('general')
+
+      setMockSearchParams(new URLSearchParams('tab=software'))
+      nav.rerenderWith(TABS)
+      expect(nav.active).toBe('general')
+
+      setMockSearchParams(new URLSearchParams('tab=general'))
+      nav.rerenderWith(TABS)
+      expect(nav.active).toBe('general')
+    })
+
+    it('keeps unrelated query params', () => {
+      setMockSearchParams(new URLSearchParams('page=2&tab=general'))
+      renderNav(TABS)
+      fireEvent.click(screen.getByText('Software'))
+
+      expect(mockReplace).toHaveBeenCalledWith('/?page=2&tab=software', { scroll: false })
+    })
+  })
+
+  describe('an external URL change', () => {
+    it('moves the tab (back/forward, or a link into a tab)', () => {
+      setMockSearchParams(new URLSearchParams('tab=general'))
+      const nav = renderNav(TABS)
+      expect(nav.active).toBe('general')
+
+      setMockSearchParams(new URLSearchParams('tab=software'))
+      nav.rerenderWith(TABS)
+      expect(nav.active).toBe('software')
+    })
+
+    it('falls back when the URL names a tab that does not exist', () => {
+      setMockSearchParams(new URLSearchParams('tab=general'))
+      const nav = renderNav(TABS)
+
+      setMockSearchParams(new URLSearchParams('tab=nonsense'))
+      nav.rerenderWith(TABS)
+      expect(nav.active).toBe('general')
+    })
+  })
+})

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/data-table/data-table-column-filter.tsx

@@ -68,7 +68,13 @@ export function DataTableColumnFilter({
       triggerElement={
         <div
           className={cn(
-            'group flex w-full items-center gap-[var(--spacing-system-xsf)] py-[var(--spacing-system-sf)] rounded-sm cursor-pointer transition-colors duration-200 select-none',
+            // Fixed 48px per design, same as the plain header cell next to it —
+            // NOT padding around the label. The two were drifting: 12px+20px+12px
+            // came out 44px here while the sibling was pinned to 48, so in a
+            // header mixing filterable and plain columns the labels sat on
+            // different centre lines and the filter's hit area was 4px short of
+            // the row it belongs to.
+            'group flex w-full items-center gap-[var(--spacing-system-xsf)] h-12 rounded-sm cursor-pointer transition-colors duration-200 select-none',
             alignJustify(align),
           )}
           aria-label={`Filter by ${label}`}

package/src/components/ui/data-table/data-table-header.tsx

@@ -97,7 +97,10 @@ export function DataTableHeader({
               {rightSlot}
             </div>
           ) : (
-            <div className="ml-auto flex items-center py-[var(--spacing-system-sf)]">
+            // In-flow fallback: with no visible header cell this slot is the
+            // only thing giving the row height, so it carries the same fixed 48
+            // rather than padding out to 44.
+            <div className="ml-auto flex items-center h-12">
               {rightSlot}
             </div>
           ))}

package/src/components/ui/data-table/data-table-skeleton.tsx

@@ -2,6 +2,7 @@
 
 import { cn } from '../../../utils/cn'
 import { useDataTableContext } from './data-table'
+import { getHideClasses } from './utils'
 
 /**
  * Consistent INNER row heights. The row card wraps these in a 1px border on
@@ -51,6 +52,12 @@ export function DataTableSkeleton({
                   className={cn(
                     'flex flex-col justify-center shrink-0',
                     meta?.width || 'flex-1',
+                    // Same responsive hiding the real header and row apply.
+                    // Without it a `hideAt` column was drawn in the skeleton and
+                    // absent from the loaded table, so below that breakpoint the
+                    // remaining columns were sized against a different total and
+                    // the whole row re-laid-out the moment data arrived.
+                    getHideClasses(meta?.hideAt),
                   )}
                 >
                   <div className="h-5 bg-ods-bg-surface rounded-sm w-3/4 mb-[var(--spacing-system-xxs)]" />

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