banhaten 0.4.0 → 0.6.0

package/registry/components/skeleton.tsx

@@ -252,7 +252,7 @@ function SkeletonCard({
       aria-hidden="true"
       data-slot="skeleton-card"
       className={cn(
-        "grid gap-[var(--bh-space-4xl-20)] rounded-[var(--bh-radius-xl-10)] border border-[var(--bh-border-default)] bg-[var(--bh-bg-raised)] p-[var(--bh-card-desktop-content-padding)] shadow-[var(--shadow-component-default)]",
+        "grid gap-[var(--bh-space-4xl-20)] rounded-[var(--bh-radius-xl-10)] border border-[var(--bh-border-default)] bg-[var(--bh-bg-raised)] p-[var(--bh-card-desktop-content-padding)] shadow-[var(--elevation-component-default)]",
         className
       )}
       {...props}

package/registry/components/slider.tsx

@@ -244,7 +244,7 @@ function Slider({
             data-has-label={showInlineLabel ? "true" : undefined}
             data-slot="slider-thumb"
             key={index}
-            className="relative z-[var(--bh-z-popover)] flex size-[var(--bh-slider-thumb-size-current)] shrink-0 items-center justify-center rounded-[var(--bh-slider-thumb-radius)] border-[var(--bh-slider-thumb-ring-width-current)] border-[var(--bh-slider-thumb-ring-bg)] bg-[var(--bh-slider-thumb-bg)] text-[var(--bh-content-default)] shadow-[var(--shadow-slider-thumb)] outline-none transition-[background-color,border-color,box-shadow] focus-visible:shadow-[var(--shadow-slider-thumb-focus)] group-data-[variant=pill]/slider:h-[var(--bh-slider-pill-height)] group-data-[variant=pill]/slider:w-[var(--bh-slider-pill-thumb-width)] group-data-[variant=pill]/slider:justify-end group-data-[variant=pill]/slider:rounded-[var(--bh-slider-pill-radius)] group-data-[variant=pill]/slider:border-[length:var(--bh-slider-pill-thumb-border-width)] group-data-[variant=pill]/slider:border-[var(--bh-slider-thumb-pill-border)] group-data-[variant=pill]/slider:bg-[var(--bh-slider-thumb-pill-bg)] group-data-[variant=pill]/slider:px-[var(--bh-space-lg-10)] group-data-[disabled]/slider:border-[var(--bh-bg-default)] group-data-[disabled]/slider:bg-[var(--bh-content-disabled)] group-data-[disabled]/slider:text-[var(--bh-content-disabled)] group-data-[variant=pill]/slider:group-data-[disabled]/slider:border-[var(--bh-border-disabled)] group-data-[variant=pill]/slider:group-data-[disabled]/slider:bg-[var(--bh-bg-disabled)]"
+            className="relative z-[var(--bh-z-popover)] flex size-[var(--bh-slider-thumb-size-current)] shrink-0 items-center justify-center rounded-[var(--bh-slider-thumb-radius)] border-[var(--bh-slider-thumb-ring-width-current)] border-[var(--bh-slider-thumb-ring-bg)] bg-[var(--bh-slider-thumb-bg)] text-[var(--bh-content-default)] shadow-[var(--elevation-slider-thumb)] outline-none transition-[background-color,border-color,box-shadow] focus-visible:shadow-[var(--elevation-slider-thumb-focus)] group-data-[variant=pill]/slider:h-[var(--bh-slider-pill-height)] group-data-[variant=pill]/slider:w-[var(--bh-slider-pill-thumb-width)] group-data-[variant=pill]/slider:justify-end group-data-[variant=pill]/slider:rounded-[var(--bh-slider-pill-radius)] group-data-[variant=pill]/slider:border-[length:var(--bh-slider-pill-thumb-border-width)] group-data-[variant=pill]/slider:border-[var(--bh-slider-thumb-pill-border)] group-data-[variant=pill]/slider:bg-[var(--bh-slider-thumb-pill-bg)] group-data-[variant=pill]/slider:px-[var(--bh-space-lg-10)] group-data-[disabled]/slider:border-[var(--bh-bg-default)] group-data-[disabled]/slider:bg-[var(--bh-content-disabled)] group-data-[disabled]/slider:text-[var(--bh-content-disabled)] group-data-[variant=pill]/slider:group-data-[disabled]/slider:border-[var(--bh-border-disabled)] group-data-[variant=pill]/slider:group-data-[disabled]/slider:bg-[var(--bh-bg-disabled)]"
           >
             {showIndicator ? (
               <SliderThumbIndicator
@@ -296,7 +296,7 @@ function SliderThumbIndicator({
           ? "bottom-[calc(100%+var(--bh-slider-indicator-gap))]"
           : "top-[calc(100%+var(--bh-slider-indicator-gap))]",
         isTooltip
-          ? "rounded-[var(--bh-radius-md-6)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)] px-[var(--bh-space-md-8)] py-[var(--bh-space-sm-6)] text-[length:var(--bh-text-body-2xs-medium-font-size)] leading-[var(--bh-text-body-2xs-medium-line-height)] font-[var(--bh-text-body-2xs-medium-font-weight)] tracking-[var(--bh-text-body-2xs-medium-letter-spacing)] text-[var(--bh-content-default)] shadow-[var(--shadow-slider-tooltip)]"
+          ? "rounded-[var(--bh-radius-md-6)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)] px-[var(--bh-space-md-8)] py-[var(--bh-space-sm-6)] text-[length:var(--bh-text-body-2xs-medium-font-size)] leading-[var(--bh-text-body-2xs-medium-line-height)] font-[var(--bh-text-body-2xs-medium-font-weight)] tracking-[var(--bh-text-body-2xs-medium-letter-spacing)] text-[var(--bh-content-default)] shadow-[var(--elevation-slider-tooltip)]"
           : "text-[length:var(--bh-text-body-2xs-regular-font-size)] leading-[var(--bh-text-body-2xs-regular-line-height)] font-[var(--bh-text-body-2xs-regular-font-weight)] tracking-[var(--bh-text-body-2xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
       )}
     >

package/registry/components/social-button.tsx

@@ -116,7 +116,7 @@ const arabicSocialButtonMessages: SocialButtonMessages = {
 }
 
 const socialButtonVariants = cva(
-  "group/social-button relative inline-flex max-w-full min-w-0 items-center justify-center whitespace-nowrap rounded-[var(--bh-social-button-radius)] bg-[var(--bh-social-button-bg)] text-[var(--bh-social-button-fg)] shadow-[var(--shadow-social-button)] outline-none transition-[background-color,box-shadow,color] [--bh-social-button-current-border:var(--bh-social-button-border)] [--shadow-social-button:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-social-button-current-border,var(--bh-social-button-border,transparent)),var(--shadow-component-default)] hover:bg-[var(--bh-social-button-bg-hover)] focus-visible:[--bh-social-button-current-border:var(--bh-social-button-focus-border)] focus-visible:shadow-[var(--shadow-social-button-focus)] disabled:pointer-events-none disabled:opacity-[var(--bh-opacity-50)] [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "group/social-button relative inline-flex max-w-full min-w-0 items-center justify-center whitespace-nowrap rounded-[var(--bh-social-button-radius)] bg-[var(--bh-social-button-bg)] text-[var(--bh-social-button-fg)] shadow-[var(--elevation-social-button)] outline-none transition-[background-color,box-shadow,color] [--bh-social-button-current-border:var(--bh-social-button-border)] [--elevation-social-button:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-social-button-current-border,var(--bh-social-button-border,transparent)),var(--elevation-component-default)] hover:bg-[var(--bh-social-button-bg-hover)] focus-visible:[--bh-social-button-current-border:var(--bh-social-button-focus-border)] focus-visible:shadow-[var(--elevation-social-button-focus)] disabled:pointer-events-none disabled:opacity-[var(--bh-opacity-50)] [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {

package/registry/components/streaming-text.css

@@ -0,0 +1,45 @@
+[data-slot="streaming-text"] {
+  color: var(--bh-content-default);
+  font-family: var(--bh-font-family);
+  font-size: var(--bh-text-body-sm-regular-font-size);
+  font-weight: var(--bh-text-body-sm-regular-font-weight);
+  letter-spacing: var(--bh-text-body-sm-regular-letter-spacing);
+  line-height: var(--bh-text-body-sm-regular-line-height);
+  overflow-wrap: anywhere;
+}
+
+/* A slim text caret, not a block cursor: caret width comes from the scale. */
+[data-slot="streaming-text-caret"] {
+  animation: bh-streaming-text-caret var(--bh-streaming-text-caret-duration)
+    step-end infinite;
+  background-color: currentColor;
+  block-size: 1em;
+  border-radius: var(--bh-radius-full);
+  display: inline-block;
+  inline-size: var(--bh-streaming-text-caret-width);
+  margin-inline-start: var(--bh-space-xxs-2);
+  vertical-align: text-bottom;
+}
+
+/* Solid while tokens arrive; the blink only starts once the text is complete. */
+[data-slot="streaming-text"][data-state="streaming"]
+  [data-slot="streaming-text-caret"] {
+  animation: none;
+}
+
+@keyframes bh-streaming-text-caret {
+  0%,
+  100% {
+    opacity: var(--bh-opacity-100);
+  }
+
+  50% {
+    opacity: var(--bh-opacity-0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="streaming-text-caret"] {
+    animation: none;
+  }
+}

package/registry/components/streaming-text.tsx

@@ -0,0 +1,165 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { useReducedMotion } from "@/hooks/use-reduced-motion"
+
+import "./streaming-text.css"
+
+type StreamingTextElement = "p" | "div" | "span"
+
+type StreamingTextProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
+  /** Render element. Defaults to a paragraph. */
+  as?: StreamingTextElement
+  /** Hides the caret entirely. */
+  caret?: boolean
+  /**
+   * True while more text is on its way: the caret stays solid and the element
+   * reports itself busy.
+   */
+  streaming?: boolean
+  /** The text that has arrived so far. */
+  text: string
+}
+
+type UseTypewriterOptions = {
+  /** Called once each time the reveal reaches the end of a text. */
+  onComplete?: () => void
+  /** Characters revealed per second. */
+  speed?: number
+}
+
+type TypewriterState = {
+  /** The part of the text revealed so far. */
+  text: string
+  /** True until the whole text is revealed. */
+  typing: boolean
+}
+
+const DEFAULT_SPEED = 220
+
+/**
+ * Reveals a finished text locally, a few characters per frame. Text that grows
+ * continues from what is already shown and different text starts over. Under
+ * reduced motion the whole text shows at once.
+ */
+function useTypewriter(
+  text: string,
+  { onComplete, speed = DEFAULT_SPEED }: UseTypewriterOptions = {}
+): TypewriterState {
+  const reducedMotion = useReducedMotion()
+  const [shown, setShown] = React.useState(() => (reducedMotion ? text : ""))
+  const shownRef = React.useRef(shown)
+  const onCompleteRef = React.useRef(onComplete)
+  // The text each completion was reported for, so a speed change after the
+  // reveal (or a reduced-motion rerender) does not report it twice.
+  const completedFor = React.useRef<string | null>(null)
+
+  React.useEffect(() => {
+    onCompleteRef.current = onComplete
+  })
+
+  const reveal = React.useCallback((value: string) => {
+    shownRef.current = value
+    setShown(value)
+  }, [])
+
+  const complete = React.useCallback((value: string) => {
+    if (completedFor.current === value) return
+    completedFor.current = value
+    onCompleteRef.current?.()
+  }, [])
+
+  React.useEffect(() => {
+    if (reducedMotion) {
+      reveal(text)
+      complete(text)
+      return
+    }
+
+    // Continue from the current prefix when more text is appended, restart
+    // when the text changes to something unrelated.
+    const start = text.startsWith(shownRef.current) ? shownRef.current.length : 0
+    // Nothing left to type, including an empty response: report it once so a
+    // host waiting on onComplete never hangs.
+    if (start >= text.length) {
+      reveal(text)
+      complete(text)
+      return
+    }
+
+    const charsPerMs = Math.max(1, speed) / 1000
+    let frame = 0
+    let origin: number | null = null
+
+    const tick = (now: number) => {
+      if (origin === null) origin = now
+      const count = Math.min(
+        text.length,
+        start + Math.floor((now - origin) * charsPerMs)
+      )
+      const next = text.slice(0, count)
+      if (next !== shownRef.current) reveal(next)
+      if (count < text.length) {
+        frame = window.requestAnimationFrame(tick)
+      } else {
+        complete(text)
+      }
+    }
+
+    frame = window.requestAnimationFrame(tick)
+    return () => window.cancelAnimationFrame(frame)
+  }, [complete, reducedMotion, reveal, speed, text])
+
+  // Always a prefix of the current text, even in the render before the reveal
+  // catches up with a new one.
+  const visible = text.startsWith(shown) ? shown : ""
+  return { text: visible, typing: visible.length < text.length }
+}
+
+/**
+ * Text that arrives token by token. While `streaming` the caret stays solid;
+ * once the text is complete it settles into a slow blink. Pair it with
+ * `useTypewriter` to reveal a finished text locally.
+ */
+const StreamingText = React.forwardRef<HTMLElement, StreamingTextProps>(
+  function StreamingText(
+    {
+      as: Comp = "p",
+      caret = true,
+      className,
+      streaming = false,
+      text,
+      ...props
+    },
+    ref
+  ) {
+    return (
+      <Comp
+        aria-busy={streaming || undefined}
+        data-caret={caret ? "true" : "false"}
+        data-slot="streaming-text"
+        data-state={streaming ? "streaming" : "complete"}
+        // JSX checks a union tag against one member's ref type; every allowed
+        // element is an HTMLElement, which is what the public ref promises.
+        ref={ref as React.Ref<HTMLDivElement>}
+        className={cn("m-0 min-w-0 max-w-full", className)}
+        {...props}
+      >
+        {text}
+        {caret ? (
+          <span aria-hidden="true" data-slot="streaming-text-caret" />
+        ) : null}
+      </Comp>
+    )
+  }
+)
+
+export { StreamingText, useTypewriter }
+export type {
+  StreamingTextElement,
+  StreamingTextProps,
+  TypewriterState,
+  UseTypewriterOptions,
+}

package/registry/components/table-elements.tsx

@@ -1,15 +1,33 @@
 "use client"
 
 import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
 
 import { cn } from "@/lib/utils"
 
-type TableRootProps = React.ComponentPropsWithoutRef<"table">
+type TableElementsSize = "comfortable"
+type TableRootProps = React.ComponentPropsWithoutRef<"table"> & {
+  /** Applies the Table item 1.2 spec. Without a size the elements stay unstyled. */
+  size?: TableElementsSize
+}
+type TableContainerProps = React.ComponentPropsWithoutRef<"div">
 type TableSectionProps = React.ComponentPropsWithoutRef<"thead">
 type TableBodyProps = React.ComponentPropsWithoutRef<"tbody">
 type TableRowElementProps = React.ComponentPropsWithoutRef<"tr">
 type TableHeadProps = React.ComponentPropsWithoutRef<"th">
 type TableCellProps = React.ComponentPropsWithoutRef<"td">
+type TableCellTextProps = React.ComponentPropsWithoutRef<"span"> & {
+  /** Second line under the label, in body-2xs and content/subtle. */
+  caption?: React.ReactNode
+  /** Icon, avatar or logo before the text, 6px from it. */
+  leading?: React.ReactNode
+  tone?: "default" | "subtle"
+  weight?: "regular" | "medium"
+}
+type TableCellLinkProps = React.ComponentPropsWithoutRef<"button"> & {
+  /** Renders the child element, such as an anchor, with the link styling. */
+  asChild?: boolean
+}
 type DataTableSurfaceProps = React.ComponentPropsWithoutRef<"div">
 
 const DataTableSurface = React.forwardRef<
@@ -27,13 +45,44 @@ const DataTableSurface = React.forwardRef<
   )
 })
 
+/**
+ * Rounded table frame. Its border is drawn over the content, like a Figma
+ * inside stroke, so header fills reach the edge; the table scrolls inside it.
+ */
+const TableContainer = React.forwardRef<HTMLDivElement, TableContainerProps>(
+  function TableContainer({ children, className, ...props }, ref) {
+    return (
+      <div
+        data-slot="table-container"
+        ref={ref}
+        className={cn(
+          "relative min-w-0 max-w-full overflow-hidden rounded-[var(--bh-table-container-radius)] bg-[var(--bh-table-container-bg)]",
+          "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:shadow-[inset_0_0_0_var(--bh-border-width-default)_var(--bh-table-container-border)] after:content-['']",
+          className
+        )}
+        {...props}
+      >
+        <div data-slot="table-scroll" className="max-w-full overflow-x-auto">
+          {children}
+        </div>
+      </div>
+    )
+  }
+)
+
 const TableRoot = React.forwardRef<HTMLTableElement, TableRootProps>(
-  function TableRoot({ className, ...props }, ref) {
+  function TableRoot({ className, size, ...props }, ref) {
     return (
       <table
+        data-size={size}
         data-slot="table-root"
         ref={ref}
-        className={cn("w-full border-collapse text-start", className)}
+        className={cn(
+          "group/table w-full border-collapse text-start",
+          size === "comfortable" &&
+            "min-w-[var(--bh-table-comfortable-min-width)] text-[var(--bh-table-comfortable-cell-content)]",
+          className
+        )}
         {...props}
       />
     )
@@ -87,7 +136,12 @@ const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
       <th
         data-slot="table-head"
         ref={ref}
-        className={cn("text-start", className)}
+        className={cn(
+          "text-start",
+          "group-data-[size=comfortable]/table:h-[var(--bh-table-comfortable-header-height)] group-data-[size=comfortable]/table:bg-[var(--bh-table-comfortable-header-bg)] group-data-[size=comfortable]/table:px-[var(--bh-table-comfortable-cell-padding-x)] group-data-[size=comfortable]/table:py-[var(--bh-space-none)] group-data-[size=comfortable]/table:align-middle",
+          "group-data-[size=comfortable]/table:text-[length:var(--bh-text-body-sm-medium-font-size)] group-data-[size=comfortable]/table:font-[var(--bh-text-body-sm-medium-font-weight)] group-data-[size=comfortable]/table:leading-[var(--bh-text-body-sm-medium-line-height)] group-data-[size=comfortable]/table:tracking-[var(--bh-text-body-sm-medium-letter-spacing)] group-data-[size=comfortable]/table:text-[var(--bh-table-comfortable-header-content)]",
+          className
+        )}
         scope={scope}
         {...props}
       />
@@ -101,7 +155,105 @@ const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
       <td
         data-slot="table-cell"
         ref={ref}
-        className={className}
+        className={cn(
+          "group-data-[size=comfortable]/table:h-[var(--bh-table-comfortable-row-height)] group-data-[size=comfortable]/table:px-[var(--bh-table-comfortable-cell-padding-x)] group-data-[size=comfortable]/table:py-[var(--bh-space-none)] group-data-[size=comfortable]/table:text-start group-data-[size=comfortable]/table:align-middle",
+          "group-data-[size=comfortable]/table:text-[length:var(--bh-text-body-md-regular-font-size)] group-data-[size=comfortable]/table:font-[var(--bh-text-body-md-regular-font-weight)] group-data-[size=comfortable]/table:leading-[var(--bh-text-body-md-regular-line-height)] group-data-[size=comfortable]/table:tracking-[var(--bh-text-body-md-regular-letter-spacing)]",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+/**
+ * Table item 1.2 text content: a label with an optional caption under it
+ * (line + subline) and an optional leading icon or avatar. The label keeps
+ * the cell's text size, so a captioned cell is 40px of text in a 56px or
+ * taller row. When the label opens a record, pass a TableCellLink so the
+ * label and caption keep one start edge.
+ */
+const TableCellText = React.forwardRef<HTMLSpanElement, TableCellTextProps>(
+  function TableCellText(
+    {
+      caption,
+      children,
+      className,
+      leading,
+      tone = "default",
+      weight = "regular",
+      ...props
+    },
+    ref
+  ) {
+    return (
+      <span
+        data-slot="table-cell-text"
+        data-tone={tone}
+        data-weight={weight}
+        ref={ref}
+        className={cn(
+          "inline-flex min-w-0 max-w-full items-center gap-[var(--bh-table-cell-text-gap)] align-middle",
+          className
+        )}
+        {...props}
+      >
+        {leading && (
+          <span
+            data-slot="table-cell-text-leading"
+            className="inline-flex shrink-0 items-center justify-center"
+          >
+            {leading}
+          </span>
+        )}
+        <span className="grid min-w-0 grid-cols-[minmax(0,1fr)]">
+          {/* Label and caption clip long text with an ellipsis; the clip margin leaves room for a link's focus ring and offset. */}
+          <span
+            data-slot="table-cell-text-label"
+            dir="auto"
+            className={cn(
+              "overflow-clip text-ellipsis whitespace-nowrap [overflow-clip-margin:var(--bh-space-md-8)]",
+              weight === "medium"
+                ? "font-[var(--bh-font-weight-medium)]"
+                : "font-[var(--bh-font-weight-regular)]",
+              tone === "subtle" && "text-[var(--bh-content-subtle)]"
+            )}
+          >
+            {children}
+          </span>
+          {caption && (
+            <span
+              data-slot="table-cell-text-caption"
+              dir="auto"
+              className="overflow-clip text-ellipsis whitespace-nowrap [overflow-clip-margin:var(--bh-space-md-8)] text-[length:var(--bh-text-body-2xs-regular-font-size)] font-[var(--bh-text-body-2xs-regular-font-weight)] leading-[var(--bh-text-body-2xs-regular-line-height)] tracking-[var(--bh-text-body-2xs-regular-letter-spacing)] text-[var(--bh-table-caption-content)]"
+            >
+              {caption}
+            </span>
+          )}
+        </span>
+      </span>
+    )
+  }
+)
+
+/**
+ * A cell label that opens a record. It reads as the cell's own text, flush
+ * with the cell padding, and underlines on hover; Table item 1.2 has no
+ * padded control in text cells. Renders a button, or its child with asChild.
+ */
+const TableCellLink = React.forwardRef<HTMLButtonElement, TableCellLinkProps>(
+  function TableCellLink({ asChild = false, className, type, ...props }, ref) {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        data-slot="table-cell-link"
+        ref={ref}
+        type={asChild ? undefined : (type ?? "button")}
+        className={cn(
+          "inline-block max-w-full cursor-pointer truncate rounded-[var(--bh-radius-sm-4)] border-0 bg-transparent p-[var(--bh-space-none)] text-start align-top [color:inherit] [font:inherit] tracking-[inherit] no-underline outline-none hover:underline",
+          "focus-visible:underline focus-visible:outline-solid focus-visible:outline-[length:var(--bh-focus-ring-width)] focus-visible:outline-offset-[var(--bh-space-xxs-2)] focus-visible:outline-[var(--bh-border-focus)]",
+          className
+        )}
         {...props}
       />
     )
@@ -112,6 +264,9 @@ export {
   DataTableSurface,
   TableBody,
   TableCell,
+  TableCellLink,
+  TableCellText,
+  TableContainer,
   TableHead,
   TableHeader,
   TableRoot,
@@ -120,7 +275,11 @@ export {
 export type {
   DataTableSurfaceProps,
   TableBodyProps,
+  TableCellLinkProps,
   TableCellProps,
+  TableCellTextProps,
+  TableContainerProps,
+  TableElementsSize,
   TableHeadProps,
   TableRootProps,
   TableRowElementProps,

package/registry/components/tabs.css

@@ -22,7 +22,7 @@
   --tabs-height-underline-md: calc(var(--bh-space-8xl-48) + var(--bh-space-md-8));
   --tabs-height-underline-sm: var(--bh-space-8xl-48);
   --tabs-height-underline-content: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
-  --tabs-shadow-selected: var(--shadow-button-soft);
+  --tabs-elevation-selected: var(--elevation-button-soft);
 
   box-sizing: border-box;
   display: flex;
@@ -81,7 +81,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 0;
+  min-inline-size: max-content;
   color: var(--tabs-content-subtle);
   background: transparent;
   font: inherit;
@@ -90,6 +90,10 @@
   cursor: pointer;
 }
 
+.ds-tabs--hug .ds-tabs__tab {
+  flex: 0 0 auto;
+}
+
 .ds-tabs__tab:disabled,
 .ds-tabs__tab[data-disabled] {
   cursor: not-allowed;
@@ -143,11 +147,13 @@
 .ds-tabs--rounded .ds-tabs__tab[aria-selected="true"],
 .ds-tabs--rounded .ds-tabs__tab[data-state="active"] {
   background: var(--tabs-bg-default);
-  box-shadow: var(--tabs-shadow-selected);
+  box-shadow: var(--tabs-elevation-selected);
 }
 
 .ds-tabs--segment.ds-tabs--md .ds-tabs__tab,
-.ds-tabs--rounded.ds-tabs--md .ds-tabs__tab {
+.ds-tabs--rounded.ds-tabs--md .ds-tabs__tab,
+.ds-tabs--segment.ds-tabs--comfortable .ds-tabs__tab,
+.ds-tabs--rounded.ds-tabs--comfortable .ds-tabs__tab {
   min-height: var(--tabs-height-segment-md);
   padding: var(--tabs-space-md) var(--tabs-space-xl);
 }
@@ -197,6 +203,28 @@
   flex: 1 0 0;
 }
 
+/* Comfortable: view navigation in an app page. Tabs sit md apart with no divider under the row, and the active
+   indicator is an inset shadow so the label stays centred in the full tab height. */
+.ds-tabs--underline.ds-tabs--comfortable {
+  gap: var(--tabs-space-md);
+  border-bottom: 0;
+}
+
+.ds-tabs--underline.ds-tabs--comfortable .ds-tabs__tab {
+  min-height: var(--tabs-height-underline-sm);
+  border-bottom: 0;
+  box-shadow: inset 0 calc(var(--tabs-space-xxs) * -1) 0 0 transparent;
+}
+
+.ds-tabs--underline.ds-tabs--comfortable .ds-tabs__content {
+  height: var(--tabs-height-underline-content);
+}
+
+.ds-tabs--underline.ds-tabs--comfortable .ds-tabs__tab[aria-selected="true"],
+.ds-tabs--underline.ds-tabs--comfortable .ds-tabs__tab[data-state="active"] {
+  box-shadow: inset 0 calc(var(--tabs-space-xxs) * -1) 0 0 var(--tabs-content-brand);
+}
+
 .ds-tabs--rtl .ds-tabs__tab {
   text-align: start;
 }

package/registry/components/tabs.tsx

@@ -9,7 +9,11 @@ import { useResolvedDirection } from "@/hooks/use-direction"
 import "./tabs.css"
 
 export type TabsVariant = "underline" | "segment" | "rounded"
-export type TabsSize = "md" | "sm" | "xs"
+/**
+ * `comfortable` is the view navigation in an app page (ATS360 frames): underline tabs 48px tall, 8px apart, with the
+ * active indicator drawn inside the tab and no divider under the row. Segment and rounded tabs render it like `md`.
+ */
+export type TabsSize = "md" | "sm" | "xs" | "comfortable"
 
 export type TabsItem = {
   content?: React.ReactNode

package/registry/components/tag.tsx

@@ -396,7 +396,7 @@ function TagCloseButton({
       type={type || "button"}
       className={cn(
         "relative z-[var(--bh-z-raised)] inline-flex size-[var(--bh-space-3xl-16)] shrink-0 items-center justify-center rounded-[var(--bh-radius-full)] text-current outline-none transition-[background-color,box-shadow]",
-        "hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:shadow-[var(--shadow-button-focus)] disabled:pointer-events-none",
+        "hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:shadow-[var(--elevation-button-focus)] disabled:pointer-events-none",
         offset && "ms-[var(--bh-space-xs-4)]",
         className
       )}