@estiva-app/ui 0.12.3 → 0.12.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.12.3",
+  "version": "0.12.5",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/src/Button.stories.tsx

@@ -30,6 +30,35 @@ export const Disabled: Story = { args: { variant: 'primary', disabled: true } }
 export const WithAReason: Story = { args: { variant: 'primary', disabledReason: 'Sign in to add items' } }
 
 /** Every variant × size × icon × disabled combination on one canvas. */
+/* The box it is dropped into cannot change its height: a Button states `h-8`
+   (or `h-6` when small), and a stretching parent only stretches a child whose
+   height is `auto`. The row below says no `items-*` at all, which is the box
+   that drew an IconButton 228px tall — this stays 32. */
+export const InATallRow: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex h-[260px] w-[240px] justify-center rounded-lg border border-border-subtle p-4">
+      <Button variant="outlined">Button</Button>
+    </div>
+  ),
+}
+
+/* And the caller says where it sits. This column asks for the left; a Button
+   carries no `align-self` of its own, so the left is what it gets. */
+export const InAColumnThatAsksForTheLeft: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex w-[240px] flex-col items-start gap-2 rounded-lg border border-border-subtle p-4">
+      <Button variant="outlined" size="small">
+        Copy link
+      </Button>
+      <Button variant="outlined" size="small">
+        Pair with another Folder…
+      </Button>
+    </div>
+  ),
+}
+
 export const AllVariants: Story = {
   parameters: { controls: { disable: true } },
   render: () => (

package/src/Button.test.tsx

@@ -105,6 +105,24 @@ describe('Button', () => {
     expect(held).not.toHaveBeenCalled()
   })
 
+  /* jsdom computes no layout, so the class list is what a test can hold on to.
+     Both halves matter: the height is why a stretching parent cannot change
+     this button, and the absence of `align-self` is why its caller keeps the
+     say on where it sits. The pixels behind both were measured in Chrome on
+     2026-09-12 — 32px in a 260px row either way, and left in a column that
+     asks for the left. */
+  it('states its own height and no alignment of its own', () => {
+    const { rerender } = render(<Button>Default</Button>)
+    const defaultButton = screen.getByRole('button', { name: 'Default' })
+    expect(defaultButton.className).toContain('h-8')
+    expect(defaultButton.className).not.toContain('self-')
+
+    rerender(<Button size="small">Small</Button>)
+    const smallButton = screen.getByRole('button', { name: 'Small' })
+    expect(smallButton.className).toContain('h-6')
+    expect(smallButton.className).not.toContain('self-')
+  })
+
   it('passes native props through', () => {
     render(
       <Button form="f1" aria-pressed="true" data-x="y" className="mt-2">

package/src/Button.tsx

@@ -66,13 +66,18 @@ export function Button({
       focusableWhenDisabled={!!disabledReason}
       className={(state) =>
         cn(
-          // `self-center` for the same reason as IconButton's: a flex parent
-          // with no `items-*` stretches its children, and a button stretched to
-          // a column's height is not a button. `h-8` and `h-6` below set the
-          // height, and stretching overrode them. No caller in the suite wants
-          // a stretched one — checked across both apps and this package on
-          // 2026-09-11, and none passes `w-full` either.
-          'inline-flex items-center justify-center gap-1 rounded-md transition-colors font-sans font-medium self-center',
+          // No `self-center` here, deliberately — `IconButton` needs it and this
+          // does not, and the difference is the `h-8` / `h-6` on the next two
+          // lines. `align-items: stretch` only stretches a child whose cross
+          // size is `auto`; a Button always states its height, so a stretching
+          // parent cannot change it. Measured in Chrome on 2026-09-12, in the
+          // 260px row of Finding 49: 32px with `self-center` and 32px without.
+          // What the class DID do was override the caller on the other axis —
+          // in a column it beats the parent's `items-start`, which centred the
+          // four actions in Ship's `ProjectRail` and the trigger in five of
+          // this package's own story frames, each of which asks for the top.
+          // A control does not get to decide where its caller puts it.
+          'inline-flex items-center justify-center gap-1 rounded-md transition-colors font-sans font-medium',
           size === 'default' && 'h-8 text-btn-default',
           size === 'small' && 'h-6 text-btn-small',
           // Extra right padding beside a leading icon, for optical balance.

package/src/IconButton.tsx

@@ -54,6 +54,12 @@ export function IconButton({
           // happened here: a row with no `items-*` drew this 24 wide and 228
           // tall in Peek's TopicMoreMenu story (Katerina, 2026-09-11). A button
           // is the size of its icon and its padding, whatever box it lands in.
+          //
+          // This is the one of the two that needs it: an IconButton states no
+          // height, so its cross size is `auto` and a stretching parent takes
+          // it. Measured in the same 260px row on 2026-09-12: 24px with this
+          // class, 226px without. `Button` states `h-8`/`h-6`, so it cannot be
+          // stretched and carries no `self-center` — see the note there.
           'flex items-center justify-center p-1 rounded-lg transition-colors shrink-0 self-center cursor-pointer',
           !state.disabled && variant === 'primary' && 'bg-accent-primary hover:bg-accent-hover text-text-inverse',
           !state.disabled && variant === 'muted' && 'text-text-secondary hover:bg-bg-hover hover:text-text-primary',

package/src/Popover.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { IconBold, IconItalic, IconLink } from '@tabler/icons-react'
-import { useRef, useState, type KeyboardEvent } from 'react'
+import { useRef, useState, type KeyboardEvent, useCallback } from 'react'
 import { Button } from './Button'
 import { MenuPanel } from './Menu'
 import { Popover } from './Popover'
@@ -221,6 +221,41 @@ export const FlippedForRoom: Story = {
   ),
 }
 
+/**
+ * `maxHeight` caps the scrolling box. Without one a panel grows to the room
+ * the positioner has — right for a panel as tall as its content, wrong for a
+ * long list, because a panel that fits neither above nor below its anchor is
+ * moved to the **side** of it. A cap keeps the choice between above and below.
+ *
+ * The cap goes here and not on `className`: `className` is the panel, and the
+ * panel's children scroll in a viewport of their own.
+ */
+export const Capped: Story = {
+  parameters: { controls: { disable: true }, layout: 'fullscreen' },
+  render: function Capped() {
+    /* Anchored and open, so the cap is the thing you see rather than a button
+       you have to press first. A rect is all an anchor needs. */
+    const [rect, setRect] = useState<DOMRect | null>(null)
+    const mark = useCallback((el: HTMLDivElement | null) => {
+      setRect(el ? el.getBoundingClientRect() : null)
+    }, [])
+    return (
+      <div className="flex h-[420px] w-full items-center justify-center">
+        <div ref={mark} className="text-body-2 text-text-secondary">
+          twenty rows, capped at 160px
+        </div>
+        <Popover anchor={rect} open ariaLabel="A long panel" className="w-[240px]" maxHeight="max-h-[160px]">
+          {Array.from({ length: 20 }, (_, i) => (
+            <span key={i} className="text-body-2 text-text-primary py-1">
+              Row {i + 1}
+            </span>
+          ))}
+        </Popover>
+      </div>
+    )
+  },
+}
+
 /**
  * `align="center"` puts the panel's middle over the anchor's, wherever in the
  * line that is — what a toolbar over a selection wants.

package/src/Popover.test.tsx

@@ -193,6 +193,23 @@ describe('Popover', () => {
  * the two edges were mapped.
  */
 describe('Popover, centred on its anchor', () => {
+  it('caps the scrolling box, not the panel', async () => {
+    /* The cap has to land on the viewport: a `max-h` on the panel is overrun
+       by the viewport's own cap and the content draws through the panel's
+       border. jsdom computes no layout, so the class is what this can hold. */
+    render(
+      <Popover trigger={<Button>Open</Button>} ariaLabel="A panel" maxHeight="max-h-[160px]">
+        <span>Inside</span>
+      </Popover>,
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'Open' }))
+    const panel = await screen.findByRole('dialog')
+    expect(panel.className).not.toContain('max-h-[160px]')
+    const viewport = panel.querySelector('[class*="max-h-"]')
+    expect(viewport?.className).toContain('max-h-[160px]')
+    expect(viewport?.className).not.toContain('available-height')
+  })
+
   it('asks Base UI for the middle', async () => {
     render(
       <Popover trigger={<Button>Open</Button>} align="center" ariaLabel="A panel">

package/src/Popover.tsx

@@ -93,6 +93,27 @@ export interface PopoverProps {
   children: ReactNode
   /** On the panel's surface — its width, its internal rhythm. */
   className?: string
+  /**
+   * A cap on the scrolling box, as a class — `max-h-[360px]`. Without one the
+   * panel grows to the room the positioner has, which is the right default for
+   * a panel that is as tall as its content.
+   *
+   * **It cannot go on `className`.** That lands on the panel, and the panel's
+   * children sit inside a `ScrollArea` whose viewport carries its own cap — so
+   * a `max-h` on the panel is overrun by the viewport and the content draws
+   * straight through the panel's border (measured with Peek's `/` menu,
+   * 2026-09-12: a 400px panel with 559px of rows hanging out of it). The cap
+   * belongs on the viewport, as `DialogShell` takes `bodyMaxHeight`.
+   *
+   * **When a panel needs one.** A panel taller than the room above *and* below
+   * its anchor is not flipped by the positioner — it is moved to the side of
+   * the anchor, which for a type-ahead over a caret is not where it belongs.
+   * A cap keeps the choice between above and below.
+   *
+   * It replaces the available-height cap rather than adding to it, so a caller
+   * that sets one owns it.
+   */
+  maxHeight?: string
 }
 
 /** The 4px between the panel and what it hangs from, and the 8px it keeps
@@ -100,7 +121,7 @@ export interface PopoverProps {
 const GAP = 4
 const VIEWPORT_PAD = 8
 
-export function Popover({ trigger, anchor, align = 'left', side = 'bottom', open, onOpenChange, finalFocus, actionsRef, ariaLabel, children, className }: PopoverProps) {
+export function Popover({ trigger, anchor, align = 'left', side = 'bottom', open, onOpenChange, finalFocus, actionsRef, ariaLabel, children, className, maxHeight }: PopoverProps) {
   /* A rect is not an element, so it becomes a virtual anchor — the one shape
      Floating UI takes besides an element. */
   const anchorTarget = useMemo(() => {
@@ -157,8 +178,12 @@ export function Popover({ trigger, anchor, align = 'left', side = 'bottom', open
             className={cn('min-w-[180px] outline-none', className)}
             render={<MenuPanel />}
           >
-            {/* As in Menu: the cap on the scrolling box, less the panel's padding; the padding stays on the panel. */}
-            <ScrollArea viewportClassName="max-h-[calc(var(--available-height)_-_1rem)]" contentClassName="flex flex-col [&>[role=separator]]:mx-0">
+            {/* As in Menu: the cap on the scrolling box, less the panel's padding; the padding stays on the panel.
+                A caller's `maxHeight` replaces it — see the prop. */}
+            <ScrollArea
+              viewportClassName={maxHeight ?? 'max-h-[calc(var(--available-height)_-_1rem)]'}
+              contentClassName="flex flex-col [&>[role=separator]]:mx-0"
+            >
               {children}
             </ScrollArea>
           </BasePopover.Popup>