@estiva-app/ui 0.18.0 → 0.20.0

package/src/IconButton.tsx

@@ -14,11 +14,21 @@ import { TooltipTrigger } from './Tooltip'
  * `disabledReason` disables it, keeps it reachable by keyboard, and shows
  * the reason in place of the tooltip — see Button.
  */
-export type IconButtonVariant = 'muted' | 'outlined' | 'primary'
+export type IconButtonVariant = 'muted' | 'outlined' | 'primary' | 'current' | 'resolve'
 
 /** `ComponentPropsWithRef` so a `ref` reaches the element — see Button. */
 export interface IconButtonProps extends ComponentPropsWithRef<'button'> {
+  /**
+   * `current` takes the colour of what it sits in — the ✕ on a `Banner` wears
+   * the banner's tone. `resolve` is `muted` that turns green when pointed at in
+   * Signal, Peek's Resolve (UIG-9, 17 September; before, each app passed these
+   * as classes).
+   */
   variant?: IconButtonVariant
+  /** On, like a Bold button while the selection is bold: the active fill, and `aria-pressed`. */
+  pressed?: boolean
+  /** A glow in Signal — the send arrow while there is something to send. */
+  glow?: boolean
   tooltip?: string
   /** A key hint drawn as the `Kbd` chip inside the tooltip — for a button
    *  whose only other affordance is a keyboard shortcut. */
@@ -33,6 +43,8 @@ export interface IconButtonProps extends ComponentPropsWithRef<'button'> {
 
 export function IconButton({
   variant = 'muted',
+  pressed,
+  glow = false,
   className,
   children,
   disabled,
@@ -65,11 +77,17 @@ export function IconButton({
           // 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',
+          !state.disabled && (variant === 'muted' || variant === 'resolve') && 'text-text-secondary hover:bg-bg-hover hover:text-text-primary',
           !state.disabled && variant === 'outlined' && 'border border-border-default hover:bg-bg-hover text-text-secondary',
+          !state.disabled && variant === 'current' && 'hover:bg-bg-hover',
           state.disabled && variant === 'primary' && 'bg-bg-disabled text-text-disabled',
-          state.disabled && variant === 'muted' && 'text-text-disabled',
+          state.disabled && (variant === 'muted' || variant === 'resolve') && 'text-text-disabled',
           state.disabled && variant === 'outlined' && 'border border-border-default text-text-disabled',
+          // Always, disabled too: the colour of where it sits, and Resolve's green.
+          variant === 'current' && 'text-current',
+          variant === 'resolve' && 'signal:hover:bg-success-muted signal:hover:text-success-default',
+          pressed && 'bg-bg-active text-text-primary',
+          glow && 'signal:shadow-glow-accent',
           // `pointer-events-none` only where the button is truly out of reach:
           // with a `disabledReason` the button IS the tooltip's trigger, and a
           // trigger the pointer cannot land on never opens one. Base UI already
@@ -79,6 +97,7 @@ export function IconButton({
           className,
         )
       }
+      aria-pressed={pressed}
       {...props}
     >
       {children}

package/src/IdentityMenu.tsx

@@ -95,7 +95,10 @@ export function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSign
     <>
       <MenuSection label={signedIn ? 'Signed in as' : 'Acting as'}>
         <MenuRow>
-          <Person name={me.name} picture={me.picture} fallback="Anonymous" size={28} className="text-body-2-strong" />
+          {/* A name takes the size of where it sits (UIG-9). */}
+          <div className="flex min-w-0 text-body-2-strong">
+            <Person name={me.name} picture={me.picture} fallback="Anonymous" size={28} />
+          </div>
         </MenuRow>
         <Note>
           {signedIn

package/src/Link.mdx

@@ -54,6 +54,12 @@ import { Link } from '@estiva-app/ui'
   draw the border, the fill and the hover.
 - If your router also exports a `Link`, rename one of them on import.
 
+- `truncate` keeps a title that is a link on one line, cut with an ellipsis.
+  Its size and colour still come from the text around it.
+- `quiet`, `underlined` and `plain` take their size and colour from where they
+  sit, so put those on your own element around the link, not on the link —
+  the lint refuses a look passed in `className` (UIG-9).
+
 ## Props
 
 <Controls of={LinkStories.Text} />

package/src/Link.stories.tsx

@@ -100,3 +100,15 @@ export const AllVariants: Story = {
     </div>
   ),
 }
+
+/** `truncate`: a title that is a link, on one line. Its size and colour come from the box around it. */
+export const Truncate: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="w-[200px] text-body-2 text-text-primary">
+      <Link href="#" variant="quiet" truncate className="block">
+        Assignee avatar and full name is missing in the files panel
+      </Link>
+    </div>
+  ),
+}

package/src/Link.tsx

@@ -41,15 +41,20 @@ export interface LinkProps extends ComponentPropsWithRef<'a'> {
    * noreferrer` so the page it opens cannot reach back into this one.
    */
   external?: boolean
+  /**
+   * One line, cut with an ellipsis when it does not fit — a title that is a link.
+   * Its size and colour still come from the text around it (UIG-9, 17 September).
+   */
+  truncate?: boolean
   children: ReactNode
 }
 
-export function Link({ href, variant = 'text', external = false, className, children, ...props }: LinkProps) {
+export function Link({ href, variant = 'text', external = false, truncate = false, className, children, ...props }: LinkProps) {
   return (
     <a
       href={href}
       {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
-      className={cn(VARIANT_CLASSES[variant], className)}
+      className={cn(VARIANT_CLASSES[variant], truncate && 'truncate', className)}
       {...props}
     >
       {children}

package/src/Menu.stories.tsx

@@ -73,7 +73,7 @@ export const WithARow: Story = {
     <MenuPanel className="w-64">
       <MenuRow>
         <span className="min-w-0 flex-1 truncate text-body-2 text-text-primary">Item one</span>
-        <SectionLabel className="text-text-secondary">Label</SectionLabel>
+        <SectionLabel tone="secondary">Label</SectionLabel>
       </MenuRow>
       <Divider className="my-1" />
       <MenuItem label="An action" onClick={() => {}} />

package/src/Menu.test.tsx

@@ -339,8 +339,8 @@ describe('Menu, padding', () => {
     )
     await userEvent.click(screen.getByRole('button', { name: 'Open' }))
     const row = await screen.findByRole('menuitem', { name: 'Item one' })
-    // The scrolling content is the box that carries the separator rule.
-    const content = row.closest('[class*="role=separator"]') as HTMLElement
+    // The scrolling content is the box the rows sit in directly.
+    const content = row.parentElement as HTMLElement
     const classes = content.className.split(/\s+/)
     expect(classes).toContain('p-1')
     expect(classes).not.toContain('p-2')

package/src/Menu.tsx

@@ -2,6 +2,7 @@ import { createContext, useContext, type ComponentPropsWithRef, type ReactElemen
 import { IconChevronRight } from '@tabler/icons-react'
 import { Menu as BaseMenu } from '@base-ui/react/menu'
 import { cn } from './cn'
+import { DividerInPanel } from './Divider'
 import { triggerDisabled } from './triggerDisabled'
 import { ScrollArea } from './ScrollArea'
 import { Kbd } from './Kbd'
@@ -241,8 +242,10 @@ export function Menu({ trigger, align = 'left', openOnHover = false, open, onOpe
              * sentence was written at 0.12.6 and the prop was not: a `p-1` on
              * `className` added 4px to these 8px instead of replacing them
              * (PLAN Finding 60). The prop exists now. */}
-            <ScrollArea viewportClassName="max-h-[var(--available-height)]" contentClassName={cn('flex flex-col p-2 [&>[role=separator]]:mx-0', contentClassName)}>
-              <MenuContext.Provider value={{ openOnHover }}>{children}</MenuContext.Provider>
+            <ScrollArea viewportClassName="max-h-[var(--available-height)]" contentClassName={cn('flex flex-col p-2', contentClassName)}>
+              <MenuContext.Provider value={{ openOnHover }}>
+                <DividerInPanel.Provider value={true}>{children}</DividerInPanel.Provider>
+              </MenuContext.Provider>
             </ScrollArea>
           </BaseMenu.Popup>
         </BaseMenu.Positioner>
@@ -561,7 +564,7 @@ export function MenuSection({ label, children, className }: { label: string; chi
   const inMenu = useContext(MenuContext) !== null
   const heading = (
     <div className={cn('flex h-8 items-center px-2', className)}>
-      <SectionLabel className="text-text-secondary">{label}</SectionLabel>
+      <SectionLabel tone="secondary">{label}</SectionLabel>
     </div>
   )
   if (!inMenu) {

package/src/Person.stories.tsx

@@ -26,15 +26,15 @@ export const OwnFallback: Story = {
   parameters: { a11y: { config: { rules: [{ id: 'color-contrast', enabled: false }] } } },
 }
 
-/** The text size is the caller's, so face and words are set together. */
+/** The text size is where it sits: the box around it sets the words, `size` sets the face. */
 export const Sizes: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
     <div className="flex flex-col items-start gap-3">
-      <Person name="Ana Duarte" size={16} className="text-caption" />
-      <Person name="Ana Duarte" size={20} className="text-body-2" />
-      <Person name="Ravi Mehta" size={22} className="text-body-2" />
-      <Person name="Ravi Mehta" size={28} className="text-body-1" />
+      <div className="flex text-caption"><Person name="Ana Duarte" size={16} /></div>
+      <div className="flex text-body-2"><Person name="Ana Duarte" size={20} /></div>
+      <div className="flex text-body-2"><Person name="Ravi Mehta" size={22} /></div>
+      <div className="flex text-body-1"><Person name="Ravi Mehta" size={28} /></div>
     </div>
   ),
 }

package/src/Popover.test.tsx

@@ -233,8 +233,8 @@ describe('Popover, centred on its anchor', () => {
  * as on 0.12.5.
  */
 describe('Popover, padding', () => {
-  // The scrolling content is the box that carries the separator rule.
-  const contentOf = (child: HTMLElement) => child.closest('[class*="role=separator"]') as HTMLElement
+  // The scrolling content is the box the children sit in directly.
+  const contentOf = (child: HTMLElement) => child.parentElement as HTMLElement
 
   it('pads its content 8px by default', async () => {
     render(

package/src/Popover.tsx

@@ -1,6 +1,7 @@
 import { useMemo, type ReactElement, type ReactNode, type RefObject } from 'react'
 import { Popover as BasePopover } from '@base-ui/react/popover'
 import { cn } from './cn'
+import { DividerInPanel } from './Divider'
 import { triggerDisabled } from './triggerDisabled'
 import { ScrollArea } from './ScrollArea'
 import { MenuPanel } from './Menu'
@@ -200,9 +201,9 @@ export function Popover({ trigger, anchor, align = 'left', side = 'bottom', open
                 — see the props. */}
             <ScrollArea
               viewportClassName={maxHeight ?? 'max-h-[var(--available-height)]'}
-              contentClassName={cn('flex flex-col p-2 [&>[role=separator]]:mx-0', contentClassName)}
+              contentClassName={cn('flex flex-col p-2', contentClassName)}
             >
-              {children}
+              <DividerInPanel.Provider value={true}>{children}</DividerInPanel.Provider>
             </ScrollArea>
           </BasePopover.Popup>
         </BasePopover.Positioner>

package/src/PreviewCard.tsx

@@ -83,7 +83,7 @@ export function PreviewCard({ content, children, side = 'right', delay = OPEN_DE
             className={cn('w-[360px] p-3 outline-none', className)}
             render={<MenuPanel />}
           >
-            <ScrollArea viewportClassName="max-h-[calc(min(300px,var(--available-height))_-_1.5rem)]" contentClassName="flex flex-col gap-3 [&>*]:shrink-0">
+            <ScrollArea viewportClassName="max-h-[calc(min(300px,var(--available-height))_-_1.5rem)]" contentClassName="flex flex-col gap-3">
               {content}
             </ScrollArea>
           </BasePreviewCard.Popup>

package/src/Property.stories.tsx

@@ -28,7 +28,7 @@ export const APanel: Story = {
         <Chip type="success" label="Done" />
       </Property>
       <Property label="Lead">
-        <Person name="Ana Duarte" size={16} className="text-caption text-text-primary" />
+        <div className="flex text-caption text-text-primary"><Person name="Ana Duarte" size={16} /></div>
       </Property>
       <Property label="Updated">
         <span className="text-caption text-text-secondary">2d ago</span>
@@ -42,7 +42,7 @@ export const Stacked: Story = {
   args: {
     label: 'Assignee',
     layout: 'stacked',
-    children: <Person name="Ravi Mehta" size={20} className="text-body-2 text-text-primary" />,
+    children: <div className="flex text-body-2 text-text-primary"><Person name="Ravi Mehta" size={20} /></div>,
   },
 }
 

package/src/ReactionPicker.tsx

@@ -77,10 +77,13 @@ export function ReactionPicker({ options, onSelect, 'aria-label': ariaLabel = 'R
           /* Peek's geometry, verbatim: a 28px square rather than the
              IconButton's 24, and the emoji at 18px — larger than a `Reaction`
              pill's 16, because here the emoji is the whole control. */
-          className="size-7 text-h3 leading-none"
+          className="size-7"
         >
-          {/* Decorative, as on `Reaction`: the control is named above. */}
-          <span aria-hidden="true">{option.emoji}</span>
+          {/* Decorative, as on `Reaction`: the control is named above. Its size is
+              on the emoji itself, not pushed into the button (UIG-9). */}
+          <span aria-hidden="true" className="text-h3 leading-none">
+            {option.emoji}
+          </span>
         </ToolbarButton>
       ))}
     </Toolbar>

package/src/ScrollArea.stories.tsx

@@ -17,7 +17,8 @@ const rows = Array.from({ length: 40 }, (_, i) => `Row ${i + 1}`)
 /** A list taller than its box. The bar shows while the pointer is over it or the list is moving. */
 export const Default: Story = {
   render: () => (
-    <ScrollArea className="h-[240px] w-[280px] rounded-lg border border-border-default bg-bg-surface" viewportClassName="p-2">
+    <div className="h-[240px] w-[280px] rounded-lg border border-border-default bg-bg-surface">
+    <ScrollArea className="h-full" viewportClassName="p-2">
       <ul className="flex flex-col gap-px">
         {rows.map((row) => (
           <li key={row} className="rounded-md px-2 py-1.5 text-body-2 text-text-primary">
@@ -26,13 +27,35 @@ export const Default: Story = {
         ))}
       </ul>
     </ScrollArea>
+    </div>
+  ),
+}
+
+/** Rows that stick to the top as the list moves under them. The bar stays above them. */
+export const StickyHeadings: Story = {
+  render: () => (
+    <div className="h-[240px] w-[280px] rounded-lg border border-border-default bg-bg-surface">
+    <ScrollArea className="h-full">
+      {['Group one', 'Group two'].map((group) => (
+        <div key={group} className="flex flex-col">
+          <p className="sticky top-0 z-10 bg-bg-surface px-4 py-2 text-caption text-text-secondary">{group}</p>
+          {rows.slice(0, 8).map((row) => (
+            <p key={row} className="px-4 py-1.5 text-body-2 text-text-primary">
+              {row}
+            </p>
+          ))}
+        </div>
+      ))}
+    </ScrollArea>
+    </div>
   ),
 }
 
 /** Nothing to scroll: the region draws exactly as a plain box would, and no bar. */
 export const Fits: Story = {
   render: () => (
-    <ScrollArea className="h-[240px] w-[280px] rounded-lg border border-border-default bg-bg-surface" viewportClassName="p-2">
+    <div className="h-[240px] w-[280px] rounded-lg border border-border-default bg-bg-surface">
+    <ScrollArea className="h-full" viewportClassName="p-2">
       <ul className="flex flex-col gap-px">
         {rows.slice(0, 4).map((row) => (
           <li key={row} className="rounded-md px-2 py-1.5 text-body-2 text-text-primary">
@@ -41,13 +64,15 @@ export const Fits: Story = {
         ))}
       </ul>
     </ScrollArea>
+    </div>
   ),
 }
 
 /** A row wider than its box — a table, a board. */
 export const Horizontal: Story = {
   render: () => (
-    <ScrollArea orientation="horizontal" className="w-[280px] rounded-lg border border-border-default bg-bg-surface" viewportClassName="p-2">
+    <div className="w-[280px] rounded-lg border border-border-default bg-bg-surface">
+    <ScrollArea orientation="horizontal" viewportClassName="p-2">
       <div className="flex w-max gap-2">
         {rows.slice(0, 12).map((row) => (
           <div key={row} className="w-[120px] shrink-0 rounded-md bg-bg-inset px-2 py-1.5 text-body-2 text-text-primary">
@@ -56,13 +81,15 @@ export const Horizontal: Story = {
         ))}
       </div>
     </ScrollArea>
+    </div>
   ),
 }
 
 /** Both ways, with the corner where the two bars would meet. */
 export const Both: Story = {
   render: () => (
-    <ScrollArea orientation="both" className="h-[240px] w-[280px] rounded-lg border border-border-default bg-bg-surface" viewportClassName="p-2">
+    <div className="h-[240px] w-[280px] rounded-lg border border-border-default bg-bg-surface">
+    <ScrollArea orientation="both" className="h-full" viewportClassName="p-2">
       <div className="flex w-max flex-col gap-px">
         {rows.map((row) => (
           <div key={row} className="w-[480px] rounded-md px-2 py-1.5 text-body-2 text-text-primary">
@@ -71,20 +98,23 @@ export const Both: Story = {
         ))}
       </div>
     </ScrollArea>
+    </div>
   ),
 }
 
 /** A sideways region inside a scrolling page — a table in a content column. A wheel down over it moves the page; a swipe sideways moves the region. */
 export const SidewaysInsideAPage: Story = {
   render: () => (
-    <ScrollArea className="h-[240px] w-[280px] rounded-lg border border-border-default bg-bg-surface" viewportClassName="p-2">
+    <div className="h-[240px] w-[280px] rounded-lg border border-border-default bg-bg-surface">
+    <ScrollArea className="h-full" viewportClassName="p-2">
       <div className="flex flex-col gap-px">
         {rows.slice(0, 3).map((row) => (
           <p key={row} className="rounded-md px-2 py-1.5 text-body-2 text-text-primary">
             {row}
           </p>
         ))}
-        <ScrollArea orientation="horizontal" className="my-1 rounded-md border border-border-default" viewportClassName="p-2">
+        <div className="my-1 rounded-md border border-border-default">
+        <ScrollArea orientation="horizontal" viewportClassName="p-2">
           <div className="flex w-max gap-2">
             {rows.slice(0, 12).map((row) => (
               <div key={row} className="w-[120px] shrink-0 rounded-md bg-bg-inset px-2 py-1.5 text-body-2 text-text-primary">
@@ -93,6 +123,7 @@ export const SidewaysInsideAPage: Story = {
             ))}
           </div>
         </ScrollArea>
+        </div>
         {rows.slice(3).map((row) => (
           <p key={row} className="rounded-md px-2 py-1.5 text-body-2 text-text-primary">
             {row}
@@ -100,5 +131,6 @@ export const SidewaysInsideAPage: Story = {
         ))}
       </div>
     </ScrollArea>
+    </div>
   ),
 }

package/src/ScrollArea.tsx

@@ -30,6 +30,12 @@ import { cn } from './cn'
  * the thin scrollbar both apps had styled by hand in their `index.css`, drawn
  * once here instead.
  *
+ * The bar sits above the content (`z-10`). A sticky row inside — a date line
+ * in a conversation, `sticky top-0 z-10` — is at the same level, and the bar
+ * comes after the content in the page, so it paints on top. Without it the
+ * row hid the bar wherever it crossed it: a gap in the thumb, in Peek's topic
+ * and direct-message lists (UIG-8, 16 September).
+ *
  * `orientation` says which way the region scrolls; a table that is wider
  * than its box scrolls `horizontal`, a list `vertical` (the default), a board
  * `both`. A vertical region keeps its content no wider than itself, so a
@@ -58,7 +64,7 @@ export interface ScrollAreaProps {
   children: ReactNode
 }
 
-const BAR = 'flex touch-none select-none rounded-full opacity-0 transition-opacity delay-300 data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:opacity-100 data-[scrolling]:delay-0'
+const BAR = 'z-10 flex touch-none select-none rounded-full opacity-0 transition-opacity delay-300 data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:opacity-100 data-[scrolling]:delay-0'
 const THUMB = 'rounded-full bg-border-strong'
 
 export function ScrollArea({ orientation = 'vertical', className, viewportClassName, contentClassName, viewportRef, onScroll, children }: ScrollAreaProps) {

package/src/SectionLabel.mdx

@@ -34,8 +34,9 @@ import { SectionLabel } from '@estiva-app/ui'
 ```
 
 It is a bare span: the caller owns the row it sits in and the spacing
-around it. Read it `secondary` (via `className`) where it labels rather
-than leads — menu headings do.
+around it. Read it `tone="secondary"` where it labels rather than leads — menu
+headings and the command palette's groups do (Katerina, 2026-09-01). A colour
+passed in `className` is refused by the lint (UIG-9).
 
 ## Props
 

package/src/SectionLabel.stories.tsx

@@ -29,3 +29,6 @@ export const HeadingAList: Story = {
     </div>
   ),
 }
+
+/** `tone="secondary"`: a heading inside a menu or a list of results labels the rows, it is not one of them. */
+export const Secondary: Story = { args: { tone: 'secondary', children: 'Section' } }

package/src/SectionLabel.tsx

@@ -9,16 +9,21 @@ import { cn } from './cn'
  * micro-label under Signal. Metrics as arbitrary values for the tw-merge
  * reason the README records.
  *
+ * `tone="secondary"` is a heading inside a menu or a list of results: it labels
+ * the rows, it is not one of them (Katerina, 2026-09-01). `MenuSection` and
+ * `CommandPalette` passed it as a class before UIG-9 (17 September).
+ *
  * Deliberately NOT the same thing as Property's stacked field label (the
  * 9px `menu`-token one): they were merged for a day and unmerged by
  * Katerina's ruling (2026-09-01) — a section title and a field label are
  * different voices, at different sizes, on purpose.
  */
-export function SectionLabel({ children, className }: { children: ReactNode; className?: string }) {
+export function SectionLabel({ children, tone = 'primary', className }: { children: ReactNode; tone?: 'primary' | 'secondary'; className?: string }) {
   return (
     <span
       className={cn(
-        'text-h5 leading-3 text-text-primary signal:font-mono signal:text-small signal:uppercase signal:tracking-widest',
+        'text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest',
+        tone === 'secondary' ? 'text-text-secondary' : 'text-text-primary',
         className,
       )}
     >

package/src/Tooltip.tsx

@@ -111,11 +111,8 @@ function TooltipSurface({ label, shortcut, placement }: { label: string; shortcu
         className="pointer-events-none z-[9999]"
       >
         <BaseTooltip.Popup
-          render={
-            <Tooltip
-              label={label}
-              shortcut={shortcut}
-              /*
+          render={<Tooltip label={label} shortcut={shortcut} />}
+          /*
                * The motion (Katerina, D26, 2026-09-07). It had none — it was
                * mounted and instantly there — and Base UI is what makes one
                * possible: `data-starting-style` on the opening frame,
@@ -132,16 +129,17 @@ function TooltipSurface({ label, shortcut, placement }: { label: string; shortcu
                * tooltip was dismissed. Sweeping a toolbar therefore moves the
                * pill without re-animating it, which is the whole point of the
                * shared delay (D23).
+               *
+               * On Base UI's popup, which hands its class to the pill it renders,
+               * rather than pushed into the pill from outside (UIG-9).
                */
-              className={cn(
-                'transition-[opacity,transform] duration-[120ms] ease-out motion-reduce:transition-none',
-                'data-[ending-style]:duration-[80ms] data-[instant]:duration-0',
-                'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0',
-                'data-[side=top]:data-[starting-style]:translate-y-[4px] data-[side=top]:data-[ending-style]:translate-y-[4px]',
-                'data-[side=bottom]:data-[starting-style]:-translate-y-[4px] data-[side=bottom]:data-[ending-style]:-translate-y-[4px]',
-              )}
-            />
-          }
+          className={cn(
+            'transition-[opacity,transform] duration-[120ms] ease-out motion-reduce:transition-none',
+            'data-[ending-style]:duration-[80ms] data-[instant]:duration-0',
+            'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0',
+            'data-[side=top]:data-[starting-style]:translate-y-[4px] data-[side=top]:data-[ending-style]:translate-y-[4px]',
+            'data-[side=bottom]:data-[starting-style]:-translate-y-[4px] data-[side=bottom]:data-[ending-style]:-translate-y-[4px]',
+          )}
         />
       </BaseTooltip.Positioner>
     </BaseTooltip.Portal>

package/src/eslint/index.test.ts

@@ -6,8 +6,8 @@ import estiva, { APP_RULE_IDS, countGates, PACKAGE_RULE_IDS, PLUGIN_KEY } from '
 
 /**
  * The plugin as an app uses it: a flat config with `configs.recommended`,
- * linting text the way Peek's editor hook does (`lintText`). The rule's own
- * cases are in no-raw-element.test.ts.
+ * linting text the way Peek's editor hook does (`lintText`). The rules' own
+ * cases are in no-raw-element.test.ts and no-rebuilt-behaviour.test.ts.
  */
 const tsx: Linter.Config = {
   files: ['**/*.tsx'],
@@ -35,6 +35,8 @@ describe('the plugin object', () => {
   it('carries every rule, the app ones and the inward ones', () => {
     expect(Object.keys(estiva.rules)).toEqual([
       'no-raw-element',
+      'no-rebuilt-behaviour',
+      'no-restyled-part',
       'raw-element-outside-a-wrapper',
       'no-hand-rolled-behaviour',
       'component-has-a-page',
@@ -54,21 +56,27 @@ describe('the plugin object', () => {
   it('gives an app only the app rules, as errors, under estiva/', () => {
     for (const config of [estiva.configs.recommended, estiva.configs.strict]) {
       expect(config.plugins?.[PLUGIN_KEY]).toBe(estiva)
-      expect(config.rules).toEqual({ 'estiva/no-raw-element': 'error' })
+      expect(config.rules).toEqual({ 'estiva/no-raw-element': 'error', 'estiva/no-rebuilt-behaviour': 'error', 'estiva/no-restyled-part': 'error' })
     }
-    expect(APP_RULE_IDS).toEqual(['estiva/no-raw-element'])
+    expect(APP_RULE_IDS).toEqual(['estiva/no-raw-element', 'estiva/no-rebuilt-behaviour', 'estiva/no-restyled-part'])
   })
 
-  it('gives this package its own set, as errors, and it reaches no app config', () => {
+  /**
+   * `no-restyled-part` is the one rule in both sets (UIG-9): the package restyles
+   * none of its own parts either (Katerina, 17 September). Every other inward
+   * rule still reaches no app.
+   */
+  it('gives this package its own set, as errors, and only the shared rule reaches an app config', () => {
     expect(estiva.configs.package.plugins?.[PLUGIN_KEY]).toBe(estiva)
     expect(estiva.configs.package.rules).toEqual({
       'estiva/raw-element-outside-a-wrapper': 'error',
       'estiva/no-hand-rolled-behaviour': 'error',
       'estiva/component-has-a-page': 'error',
       'estiva/component-has-a-story': 'error',
+      'estiva/no-restyled-part': 'error',
     })
     expect(PACKAGE_RULE_IDS).toEqual(Object.keys(estiva.configs.package.rules ?? {}))
-    for (const id of PACKAGE_RULE_IDS) {
+    for (const id of PACKAGE_RULE_IDS.filter((id) => id !== 'estiva/no-restyled-part')) {
       expect(estiva.configs.recommended.rules?.[id]).toBeUndefined()
       expect(estiva.configs.strict.rules?.[id]).toBeUndefined()
     }
@@ -90,6 +98,41 @@ describe('an app lint with configs.recommended', () => {
     ])
   })
 
+  it('reports behaviour rebuilt by hand, naming the part', async () => {
+    const [result] = await lint(component('    <div className="h-64 overflow-y-auto" />'))
+    expect(result.messages.map((m) => [m.ruleId, m.severity, m.message])).toEqual([
+      ['estiva/no-rebuilt-behaviour', 2, "`overflow-y-auto` scrolls with the browser's scrollbar. Use `ScrollArea` from @estiva-app/ui, which draws ours."],
+    ])
+  })
+
+  /**
+   * UIG-8's acceptance: a separator inside Divider is not a hand-written role.
+   * The package is exempt from the apps' rules; this runs them on Divider anyway,
+   * to show the role branch has nothing to say there (its Base UI import is the
+   * package's job, and reported only because the apps' config is not meant for it).
+   */
+  it("finds no hand-written role in Divider's own source", async () => {
+    const source = readFileSync(new URL('../Divider.tsx', import.meta.url), 'utf8')
+    const [result] = await lint(source)
+    expect(result.messages.filter((m) => m.messageId === 'role' || m.messageId === 'roleNoPart')).toEqual([])
+  })
+
+  /**
+   * The probe is linted inside this package's folder, so its part is a sibling
+   * (`./Link`), the way the package's own files import one; in an app the same
+   * rule reads an import from `@estiva-app/ui` (no-restyled-part.test.ts).
+   */
+  it('reports a part restyled, naming its look props', async () => {
+    const [result] = await lint(`import { Link } from './Link'\n${component('    <Link href="/x" className="mt-2 text-h2">x</Link>')}`)
+    expect(result.messages.map((m) => [m.ruleId, m.severity, m.message])).toEqual([
+      [
+        'estiva/no-restyled-part',
+        2,
+        '`text-h2` on `Link` changes how it looks. A part of @estiva-app/ui is placed from outside, never restyled: only space, size, flex and grid, and position pass in. Use its `variant` or `truncate`. A look for what is around it goes on your own element around it.',
+      ],
+    ])
+  })
+
   it('passes the same element under an escape', async () => {
     const [result] = await lint(component('    // @estiva-escape: a preview drawn from its own palette\n    <button type="button">x</button>'))
     expect(result.messages).toEqual([])
@@ -99,8 +142,9 @@ describe('an app lint with configs.recommended', () => {
 describe('countGates', () => {
   it('counts an error, and an escape only when the lint reports escapes', async () => {
     const code = component('    <div>\n      <button>x</button>\n      {/* @estiva-escape: a preview drawn from its own palette */}\n      <button>y</button>\n    </div>')
-    expect(countGates(await lint(code)).rules).toEqual({ 'estiva/no-raw-element': { errors: 1, warnings: 0, escapes: 0 } })
-    expect(countGates(await lint(code, [countMode])).rules).toEqual({ 'estiva/no-raw-element': { errors: 1, warnings: 0, escapes: 1 } })
+    const none = { errors: 0, warnings: 0, escapes: 0 }
+    expect(countGates(await lint(code)).rules).toEqual({ 'estiva/no-raw-element': { errors: 1, warnings: 0, escapes: 0 }, 'estiva/no-rebuilt-behaviour': none, 'estiva/no-restyled-part': none })
+    expect(countGates(await lint(code, [countMode])).rules).toEqual({ 'estiva/no-raw-element': { errors: 1, warnings: 0, escapes: 1 }, 'estiva/no-rebuilt-behaviour': none, 'estiva/no-restyled-part': none })
   })
 
   it('lists a report an eslint-disable silenced, and counts it as neither an error nor an escape', async () => {
@@ -118,6 +162,11 @@ describe('countGates', () => {
   })
 
   it('lists every rule of the plugin, even with nothing found', () => {
-    expect(countGates([])).toEqual({ rules: { 'estiva/no-raw-element': { errors: 0, warnings: 0, escapes: 0 } }, disabled: [] })
+    expect(countGates([])).toEqual({
+      rules: { 'estiva/no-raw-element': { errors: 0, warnings: 0, escapes: 0 }, 'estiva/no-rebuilt-behaviour': { errors: 0, warnings: 0, escapes: 0 },
+        'estiva/no-restyled-part': { errors: 0, warnings: 0, escapes: 0 },
+      },
+      disabled: [],
+    })
   })
 })