@flamingo-stack/openframe-frontend-core 0.0.502 → 0.0.503-snapshot.20260731162644

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

@@ -1,22 +1,27 @@
-"use client"
+'use client';
 
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-import Link from "../../../embed-shims/next-link"
-import React from "react"
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import React from 'react';
+import Link from '../../../embed-shims/next-link';
 
-import { cn } from "../../../utils/cn"
-import { buttonSurfaceClasses, outlineBorderClasses, splitDividerColorClasses, splitGlyphSizeClasses } from "./button-styles"
+import { cn } from '../../../utils/cn';
+import {
+  buttonSurfaceClasses,
+  outlineBorderClasses,
+  splitDividerColorClasses,
+  splitGlyphSizeClasses,
+} from './button-styles';
 
 // Default layout: centered single content area, padding/gap on the button itself.
 const buttonVariants = cva(
   [
-    "relative inline-flex items-center justify-center gap-[var(--spacing-system-xsf)]",
-    "rounded-md whitespace-nowrap",
-    "transition-colors duration-200",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus",
-    "disabled:pointer-events-none",
-    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:h-5 [&_svg]:w-5",
+    'relative inline-flex items-center justify-center gap-[var(--spacing-system-xsf)]',
+    'rounded-md whitespace-nowrap',
+    'transition-colors duration-200',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus',
+    'disabled:pointer-events-none',
+    '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:h-5 [&_svg]:w-5',
   ],
   {
     variants: {
@@ -30,9 +35,9 @@ const buttonVariants = cva(
         overlay: buttonSurfaceClasses.overlay,
       },
       size: {
-        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
+        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
         // actions — Primer banner / Polaris banner / Vercel-bar convention).
         // The label matches the strip's MESSAGE type ramp exactly (DM Sans
@@ -42,47 +47,59 @@ const buttonVariants = cva(
         // mono-uppercase control style of "small" nor a heavier weight.
         // Pinned h-6 across breakpoints (24px = the WCAG 2.5.8 target-size
         // floor) with horizontal-dominant padding and a 14px glyph.
-        compact: "py-0 px-[var(--spacing-system-sf)] text-h6 font-normal h-6 [&_svg]:h-3.5 [&_svg]:w-3.5",
-        icon: "p-[var(--spacing-system-sf)] h-11 w-11 md:h-12 md:w-12 [&_svg]:h-4 [&_svg]:w-4 md:[&_svg]:h-6 md:[&_svg]:w-6",
+        compact: 'py-0 px-[var(--spacing-system-sf)] text-h6 font-normal h-6 [&_svg]:h-3.5 [&_svg]:w-3.5',
+        icon: 'p-[var(--spacing-system-sf)] h-11 w-11 md:h-12 md:w-12 [&_svg]:h-4 [&_svg]:w-4 md:[&_svg]:h-6 md:[&_svg]:w-6',
         // Quiet 32px icon target with a 16px glyph, fixed across breakpoints
         // (Carbon ghost sm / Primer medium / shadcn icon-sm all pin 32px;
         // ≥ the 24px WCAG 2.5.8 target floor). For icon actions that read as
         // metadata rather than CTAs — author-page social rows, share rows.
         // Pair with variant="transparent" for the ghost treatment.
-        "icon-sm": "p-[var(--spacing-system-xxs)] h-8 w-8 [&_svg]:h-4 [&_svg]:w-4",
+        'icon-sm': 'p-[var(--spacing-system-xxs)] h-8 w-8 [&_svg]:h-4 [&_svg]:w-4',
         // Bare 56px media glyph (play / unmute over video). A size variant so
         // hosts stop re-implementing a <button> to escape the 20px svg cap.
-        "icon-glyph": "p-0 h-14 w-14 [&_svg]:h-14 [&_svg]:w-14",
+        'icon-glyph': 'p-0 h-14 w-14 [&_svg]:h-14 [&_svg]:w-14',
+      },
+      // Label typography axis (Figma 133-740). `bold` is the classic h3-bold
+      // label; `regular` swaps the DEFAULT size's label to the h4 step
+      // (DM Sans 500, neutral tracking) — added for navigation buttons.
+      // `small` keeps its mono-uppercase h5 label on both fonts per the spec.
+      font: {
+        bold: '',
+        regular: '',
       },
       fullWidth: {
-        true: "w-full",
-        false: "",
+        true: 'w-full',
+        false: '',
       },
       noPaddingX: {
-        true: "px-0",
-        false: "",
+        true: 'px-0',
+        false: '',
       },
     },
     compoundVariants: [
-      { size: "small", class: "[&_svg]:h-4 [&_svg]:w-4" },
+      { size: 'small', class: '[&_svg]:h-4 [&_svg]:w-4' },
+      // Comes after the size classes, so cn()'s tailwind-merge resolves the
+      // ods-typography group in favour of text-h4.
+      { size: 'default', font: 'regular', class: 'text-h4' },
     ],
     defaultVariants: {
-      variant: "accent",
-      size: "default",
+      variant: 'accent',
+      size: 'default',
+      font: 'bold',
       fullWidth: false,
       noPaddingX: false,
     },
-  }
-)
+  },
+);
 
 // Split layout (used when `splitIcon` is provided): outer button has no padding;
 // inner slots own padding/gap so the divider can span full button height.
 const splitShellVariants = cva(
   [
-    "group relative inline-flex items-stretch overflow-hidden rounded-md whitespace-nowrap",
-    "transition-colors duration-200",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus",
-    "disabled:pointer-events-none",
+    'group relative inline-flex items-stretch overflow-hidden rounded-md whitespace-nowrap',
+    'transition-colors duration-200',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus',
+    'disabled:pointer-events-none',
   ],
   {
     variants: {
@@ -94,65 +111,86 @@ const splitShellVariants = cva(
         warning: buttonSurfaceClasses.warning,
       },
       size: {
-        default: "h-12 text-h3",
-        small: "h-6 md:h-8 text-h5",
+        default: 'h-12',
+        small: 'h-6 md:h-8 text-h5',
       },
-      fullWidth: { true: "w-full", false: "" },
+      // Same label-typography axis as the normal layout — `regular` swaps the
+      // default size's h3-bold label for the h4 (DM Sans 500) step.
+      font: { bold: '', regular: '' },
+      fullWidth: { true: 'w-full', false: '' },
     },
-    defaultVariants: { variant: "accent", size: "default", fullWidth: false },
-  }
-)
+    compoundVariants: [
+      { size: 'default', font: 'bold', class: 'text-h3' },
+      { size: 'default', font: 'regular', class: 'text-h4' },
+    ],
+    defaultVariants: { variant: 'accent', size: 'default', font: 'bold', fullWidth: false },
+  },
+);
 
 const splitSlotVariants = cva(
   // Glyph size lives per-size, not in the base: cva concatenates base + variant
   // without tailwind-merge, so a base `[&_svg]:h-5` and a variant `[&_svg]:h-4`
   // would both ship and the winner would come down to stylesheet order.
-  ["inline-flex items-center justify-center", "[&_svg]:shrink-0"],
+  ['inline-flex items-center justify-center', '[&_svg]:shrink-0'],
   {
     variants: {
       slot: {
-        main: "gap-[var(--spacing-system-xsf)]",
-        icon: "border-l",
+        main: 'gap-[var(--spacing-system-xsf)]',
+        icon: 'border-l',
       },
-      size: { default: splitGlyphSizeClasses, small: "[&_svg]:h-4 [&_svg]:w-4" },
-      variant: { accent: "", outline: "", transparent: "", destructive: "", warning: "" },
+      size: { default: splitGlyphSizeClasses, small: '[&_svg]:h-4 [&_svg]:w-4' },
+      variant: { accent: '', outline: '', transparent: '', destructive: '', warning: '' },
     },
     compoundVariants: [
-      { slot: "main", size: "default", class: "px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)]" },
-      { slot: "main", size: "small", class: "px-[var(--spacing-system-xs)]" },
-      { slot: "icon", size: "default", class: "w-10" },
-      { slot: "icon", size: "small", class: "w-6 md:w-8" },
-      { slot: "icon", variant: "accent", class: cn(
-        splitDividerColorClasses.accent,
-        "group-disabled:border-ods-disabled group-aria-disabled:border-ods-disabled",
-      ) },
-      { slot: "icon", variant: "outline", class: splitDividerColorClasses.outline },
-      { slot: "icon", variant: "transparent", class: splitDividerColorClasses.transparent },
-      { slot: "icon", variant: "destructive", class: cn(
-        splitDividerColorClasses.destructive,
-        "group-disabled:border-ods-disabled group-aria-disabled:border-ods-disabled",
-      ) },
-      { slot: "icon", variant: "warning", class: cn(
-        splitDividerColorClasses.warning,
-        "group-disabled:border-ods-disabled group-aria-disabled:border-ods-disabled",
-      ) },
+      { slot: 'main', size: 'default', class: 'px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)]' },
+      { slot: 'main', size: 'small', class: 'px-[var(--spacing-system-xs)]' },
+      { slot: 'icon', size: 'default', class: 'w-10' },
+      { slot: 'icon', size: 'small', class: 'w-6 md:w-8' },
+      {
+        slot: 'icon',
+        variant: 'accent',
+        class: cn(
+          splitDividerColorClasses.accent,
+          'group-disabled:border-ods-disabled group-aria-disabled:border-ods-disabled',
+        ),
+      },
+      { slot: 'icon', variant: 'outline', class: splitDividerColorClasses.outline },
+      { slot: 'icon', variant: 'transparent', class: splitDividerColorClasses.transparent },
+      {
+        slot: 'icon',
+        variant: 'destructive',
+        class: cn(
+          splitDividerColorClasses.destructive,
+          'group-disabled:border-ods-disabled group-aria-disabled:border-ods-disabled',
+        ),
+      },
+      {
+        slot: 'icon',
+        variant: 'warning',
+        class: cn(
+          splitDividerColorClasses.warning,
+          'group-disabled:border-ods-disabled group-aria-disabled:border-ods-disabled',
+        ),
+      },
     ],
-    defaultVariants: { slot: "main", size: "default", variant: "accent" },
-  }
-)
+    defaultVariants: { slot: 'main', size: 'default', variant: 'accent' },
+  },
+);
 
 /** @deprecated Use `size="small"` instead. Temporary alias kept for backward compatibility; will be removed in the future. */
-type DeprecatedButtonSize = "small-legacy"
+type DeprecatedButtonSize = 'small-legacy';
 
-type ButtonSize = Exclude<VariantProps<typeof buttonVariants>["size"], "small-legacy" | null | undefined> | DeprecatedButtonSize
+type ButtonSize =
+  | Exclude<VariantProps<typeof buttonVariants>['size'], 'small-legacy' | null | undefined>
+  | DeprecatedButtonSize;
 
 interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    Omit<VariantProps<typeof buttonVariants>, "size"> {
-  asChild?: boolean
-  href?: string
-  openInNewTab?: boolean
-  prefetch?: boolean
+    Omit<VariantProps<typeof buttonVariants>, 'size'> {
+  asChild?: boolean;
+  href?: string;
+  openInNewTab?: boolean;
+  prefetch?: boolean;
   /**
    * Pre-resolved anchor bundle (from `useNavLink({ href, targetPlatform })`).
    * When set, renders the Button as `<Link>` with `href` / `target` / `rel`
@@ -161,22 +199,22 @@ interface ButtonProps
    * gymnastics. Wins over the separate `href` / `openInNewTab` props.
    */
   linkProps?: {
-    href: string
-    target?: '_blank'
-    rel?: 'noopener noreferrer'
-    onClick?: React.MouseEventHandler<HTMLAnchorElement>
-  } | null
-  leftIcon?: React.ReactNode
-  rightIcon?: React.ReactNode
+    href: string;
+    target?: '_blank';
+    rel?: 'noopener noreferrer';
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+  } | null;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
   /**
    * Renders a vertical divider and trailing icon area inside the button.
    * The whole button stays a single click target — the icon is decorative
    * (`aria-hidden`). For two independent click targets, use `<SplitButton>`.
    * Only honored when `size` is `"default"` or `"small"`.
    */
-  splitIcon?: React.ReactNode
-  loading?: boolean
-  size?: ButtonSize
+  splitIcon?: React.ReactNode;
+  loading?: boolean;
+  size?: ButtonSize;
 }
 
 const Spinner = () => (
@@ -188,13 +226,14 @@ const Spinner = () => (
       d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
     />
   </svg>
-)
+);
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
   {
     className,
     variant,
     size,
+    font,
     fullWidth,
     noPaddingX,
     asChild,
@@ -213,25 +252,22 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
   },
   ref,
 ) {
-  const isDisabled = disabled || loading
+  const isDisabled = disabled || loading;
 
   // splitIcon is only supported for default/small sizes. With other sizes
   // (icon, small-legacy) we silently fall back to the normal layout.
-  const useSplitLayout = !!splitIcon && (size === "default" || size === "small" || size === undefined)
+  const useSplitLayout = !!splitIcon && (size === 'default' || size === 'small' || size === undefined);
 
   if (useSplitLayout) {
-    const safeSize = (size ?? "default") as "default" | "small"
-    const safeVariant = (variant ?? "accent") as "accent" | "outline" | "transparent" | "destructive" | "warning"
-    const shellClasses = cn(
-      splitShellVariants({ variant: safeVariant, size: safeSize, fullWidth }),
-      className,
-    )
-    const mainSlotClass = splitSlotVariants({ slot: "main", size: safeSize, variant: safeVariant })
-    const iconSlotClass = splitSlotVariants({ slot: "icon", size: safeSize, variant: safeVariant })
+    const safeSize = (size ?? 'default') as 'default' | 'small';
+    const safeVariant = (variant ?? 'accent') as 'accent' | 'outline' | 'transparent' | 'destructive' | 'warning';
+    const shellClasses = cn(splitShellVariants({ variant: safeVariant, size: safeSize, font, fullWidth }), className);
+    const mainSlotClass = splitSlotVariants({ slot: 'main', size: safeSize, variant: safeVariant });
+    const iconSlotClass = splitSlotVariants({ slot: 'icon', size: safeSize, variant: safeVariant });
 
     const splitContent = (
       <>
-        <span className={cn("contents", loading && "invisible")}>
+        <span className={cn('contents', loading && 'invisible')}>
           <span className={mainSlotClass}>
             {leftIcon && <span className="inline-flex items-center">{leftIcon}</span>}
             {children}
@@ -247,17 +283,21 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
           </span>
         )}
       </>
-    )
+    );
 
     // `linkProps` (the pre-resolved bundle from `useNavLink({ href, targetPlatform })`)
     // wins over the legacy `href` + `openInNewTab` props so callers can thread
     // the unified nav decision directly. Either path produces the same `<Link>`.
-    const splitAnchor = linkProps ?? (href ? {
-      href,
-      target: openInNewTab ? '_blank' as const : undefined,
-      rel: openInNewTab ? 'noopener noreferrer' as const : undefined,
-      onClick: onClick as unknown as React.MouseEventHandler<HTMLAnchorElement> | undefined,
-    } : null)
+    const splitAnchor =
+      linkProps ??
+      (href
+        ? {
+            href,
+            target: openInNewTab ? ('_blank' as const) : undefined,
+            rel: openInNewTab ? ('noopener noreferrer' as const) : undefined,
+            onClick: onClick as unknown as React.MouseEventHandler<HTMLAnchorElement> | undefined,
+          }
+        : null);
     if (splitAnchor) {
       return (
         <Link
@@ -271,28 +311,22 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
           aria-label={props['aria-label']}
           aria-disabled={isDisabled || undefined}
           tabIndex={isDisabled ? -1 : undefined}
-          className={cn(shellClasses, isDisabled && "pointer-events-none")}
+          className={cn(shellClasses, isDisabled && 'pointer-events-none')}
           onClick={splitAnchor.onClick}
         >
           {splitContent}
         </Link>
-      )
+      );
     }
 
     return (
-      <button
-        ref={ref}
-        className={shellClasses}
-        disabled={isDisabled}
-        onClick={onClick}
-        {...props}
-      >
+      <button ref={ref} className={shellClasses} disabled={isDisabled} onClick={onClick} {...props}>
         {splitContent}
       </button>
-    )
+    );
   }
 
-  const classes = cn(buttonVariants({ variant, size, fullWidth, noPaddingX }), className)
+  const classes = cn(buttonVariants({ variant, size, font, fullWidth, noPaddingX }), className);
 
   // asChild: consumer fully controls the rendered element; we just stamp our classes.
   if (asChild) {
@@ -300,14 +334,14 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
       <Slot ref={ref} className={classes} {...props}>
         {children}
       </Slot>
-    )
+    );
   }
 
   // Real content stays in layout (preserving width) but goes invisible while loading.
   // The spinner is absolutely positioned so it never shifts the button's size.
   const content = (
     <>
-      <span className={cn("contents", loading && "invisible")}>
+      <span className={cn('contents', loading && 'invisible')}>
         {leftIcon && <span className="inline-flex items-center">{leftIcon}</span>}
         {children}
         {rightIcon && <span className="inline-flex items-center">{rightIcon}</span>}
@@ -318,15 +352,19 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
         </span>
       )}
     </>
-  )
+  );
 
   // Same `linkProps`-wins-over-href resolution as the splitIcon branch.
-  const anchor = linkProps ?? (href ? {
-    href,
-    target: openInNewTab ? '_blank' as const : undefined,
-    rel: openInNewTab ? 'noopener noreferrer' as const : undefined,
-    onClick: onClick as unknown as React.MouseEventHandler<HTMLAnchorElement> | undefined,
-  } : null)
+  const anchor =
+    linkProps ??
+    (href
+      ? {
+          href,
+          target: openInNewTab ? ('_blank' as const) : undefined,
+          rel: openInNewTab ? ('noopener noreferrer' as const) : undefined,
+          onClick: onClick as unknown as React.MouseEventHandler<HTMLAnchorElement> | undefined,
+        }
+      : null);
   if (anchor) {
     return (
       <Link
@@ -339,25 +377,19 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
         aria-label={props['aria-label']}
         aria-disabled={isDisabled || undefined}
         tabIndex={isDisabled ? -1 : undefined}
-        className={cn(classes, isDisabled && "pointer-events-none")}
+        className={cn(classes, isDisabled && 'pointer-events-none')}
         onClick={anchor.onClick}
       >
         {content}
       </Link>
-    )
+    );
   }
 
   return (
-    <button
-      ref={ref}
-      className={classes}
-      disabled={isDisabled}
-      onClick={onClick}
-      {...props}
-    >
+    <button ref={ref} className={classes} disabled={isDisabled} onClick={onClick} {...props}>
       {content}
     </button>
-  )
-})
+  );
+});
 
-export { Button, buttonVariants, type ButtonProps }
+export { Button, buttonVariants, type ButtonProps };

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

@@ -27,12 +27,17 @@ interface FloatingTooltipProps {
   /** 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`)
+   * Classes for the trigger wrapper — the element this component puts around
+   * `children` to anchor the tooltip. That element 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
+  /**
+   * Trigger wrapper element. Default `'div'`. Use `'span'` where a block element
+   * is invalid HTML — inside a `<p>`, a heading, or another `<span>`.
+   */
+  as?: 'div' | 'span'
 }
 
 // Parse colored text markup like [YELLOW]text[/YELLOW] into JSX
@@ -93,6 +98,7 @@ export function FloatingTooltip({
   delayDuration = 0,
   disabled = false,
   triggerClassName,
+  as: TriggerTag = 'div',
 }: FloatingTooltipProps) {
   const [isOpen, setIsOpen] = React.useState(false)
   const arrowRef = React.useRef<HTMLDivElement>(null)
@@ -159,9 +165,9 @@ export function FloatingTooltip({
 
   return (
     <>
-      <div ref={refs.setReference} className={triggerClassName} {...getReferenceProps()}>
+      <TriggerTag ref={refs.setReference} className={triggerClassName} {...getReferenceProps()}>
         {children}
-      </div>
+      </TriggerTag>
       <FloatingPortal>
         {isOpen && (
           <div

package/src/components/ui/service-card.tsx

@@ -8,6 +8,9 @@ import { CheckIcon } from '../icons-v2-generated/signs-and-symbols'
 import { ExternalLink } from 'lucide-react'
 import { OpenFrameLogo } from '../..'
 import { useCopyToClipboard } from '../../hooks/use-copy-to-clipboard'
+import { useIsTruncated } from '../../hooks/ui/use-is-truncated'
+import { FloatingTooltip } from './floating-tooltip'
+import { TruncateText } from './truncate-text'
 
 export type ServiceCardRowAction = {
   copy?: boolean
@@ -61,9 +64,11 @@ export function ServiceCard({ title, subtitle, icon, tag, rows, className }: Ser
             {resolvedIcon}
           </div>
           <div className="min-w-0">
-            <div className="text-h3 text-ods-text-primary truncate" title={title}>{title}</div>
+            <TruncateText variant="h3">{title}</TruncateText>
             {subtitle && (
-              <div className="text-h6 text-ods-text-secondary truncate" title={subtitle}>{subtitle}</div>
+              <TruncateText variant="h6" tone="secondary">
+                {subtitle}
+              </TruncateText>
             )}
           </div>
         </div>
@@ -87,6 +92,7 @@ export function ServiceCard({ title, subtitle, icon, tag, rows, className }: Ser
 function ServiceCardRowItem({ row }: { row: ServiceCardRow }) {
   const [revealed, setRevealed] = useState(false)
   const { copy, copied } = useCopyToClipboard()
+  const { ref: valueRef, isTruncated: valueTruncated } = useIsTruncated<HTMLDivElement>(row.value)
   const actions = useMemo<ServiceCardRowAction>(() => ({ copy: true, open: !!row.href, reveal: !!row.isSecret, ...row.actions }), [row])
 
   const displayValue = row.isSecret ? <MaskedValue value={row.value} isRevealed={revealed} /> : <span>{row.value}</span>
@@ -104,7 +110,16 @@ function ServiceCardRowItem({ row }: { row: ServiceCardRow }) {
         <div className="w-20 md:w-24 shrink-0 text-h6 text-ods-text-primary">{row.label}</div>
       )}
       <div className={cn('flex-1 h-12 rounded-md border border-ods-border bg-ods-bg px-3 md:px-4 flex items-center justify-between min-w-0', row.monospace ? 'font-mono' : '')}>
-        <div className="truncate text-ods-text-primary min-w-0" title={typeof row.value === 'string' ? row.value : undefined}>{displayValue}</div>
+        {/* No tooltip while a secret is masked — the old native `title` leaked the raw value on hover. */}
+        <FloatingTooltip
+          content={row.value}
+          side="top"
+          disabled={!valueTruncated || (row.isSecret && !revealed)}
+          triggerClassName="min-w-0"
+          className="max-w-xs [overflow-wrap:anywhere]"
+        >
+          <div ref={valueRef} className="truncate text-ods-text-primary">{displayValue}</div>
+        </FloatingTooltip>
         <div className="flex items-center gap-2 pl-3 flex-shrink-0">
           {actions.reveal && (
             <button

package/src/components/ui/tag.tsx

@@ -4,6 +4,8 @@ import React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { XmarkCircleIcon } from "../icons-v2-generated/signs-and-symbols/xmark-circle-icon"
 import { cn } from "../../utils/cn"
+import { useIsTruncated } from "../../hooks/ui/use-is-truncated"
+import { FloatingTooltip } from "./floating-tooltip"
 
 const tagVariants = cva(
   [
@@ -107,6 +109,37 @@ export interface TagProps
   as?: 'div' | 'span'
 }
 
+/**
+ * The tag's label slot. String labels get a `FloatingTooltip` with the full
+ * value when (and only when) the text is actually clipped — replacing the old
+ * native `title`, which showed with the OS delay, unstyled, and even when
+ * nothing was truncated. Node labels render exactly as before: the caller owns
+ * their content (and any tooltip), so none is added here.
+ * The trigger is a `span` so the tag stays valid phrasing content (`as="span"`
+ * exists precisely for tags inside a `<p>`).
+ */
+function TagLabel({ label, labelClassName }: { label: React.ReactNode; labelClassName?: string }) {
+  const isString = typeof label === 'string'
+  const { ref, isTruncated } = useIsTruncated<HTMLSpanElement>(isString ? label : null)
+
+  if (!isString) {
+    return <span className={cn("truncate", labelClassName)}>{label}</span>
+  }
+
+  return (
+    <FloatingTooltip
+      content={label}
+      side="top"
+      disabled={!isTruncated}
+      as="span"
+      triggerClassName="min-w-0 max-w-full"
+      className="max-w-xs whitespace-pre-line [overflow-wrap:anywhere]"
+    >
+      <span ref={ref} className={cn("truncate block", labelClassName)}>{label}</span>
+    </FloatingTooltip>
+  )
+}
+
 function Tag({
   label,
   variant,
@@ -134,7 +167,7 @@ function Tag({
           {icon}
         </span>
       )}
-      <span className={cn("truncate", labelClassName)} title={typeof label === 'string' ? label : undefined}>{label}</span>
+      <TagLabel label={label} labelClassName={labelClassName} />
       {onClose && (
         <button
           type="button"