@estiva-app/ui 0.19.0 → 0.21.0

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,15 @@ 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: () => (
-    <ScrollArea className="h-[240px] w-[280px] rounded-lg border border-border-default bg-bg-surface">
+    <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>
@@ -44,13 +47,15 @@ export const StickyHeadings: Story = {
         </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">
@@ -59,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">
@@ -74,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">
@@ -89,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">
@@ -111,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}
@@ -118,5 +131,6 @@ export const SidewaysInsideAPage: Story = {
         ))}
       </div>
     </ScrollArea>
+    </div>
   ),
 }

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

@@ -36,6 +36,7 @@ describe('the plugin object', () => {
     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',
@@ -55,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', 'estiva/no-rebuilt-behaviour': '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', 'estiva/no-rebuilt-behaviour'])
+    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()
     }
@@ -110,6 +117,22 @@ describe('an app lint with configs.recommended', () => {
     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([])
@@ -120,8 +143,8 @@ 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>')
     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 })
-    expect(countGates(await lint(code, [countMode])).rules).toEqual({ 'estiva/no-raw-element': { errors: 1, warnings: 0, escapes: 1 }, 'estiva/no-rebuilt-behaviour': none })
+    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 () => {
@@ -140,7 +163,9 @@ 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 }, 'estiva/no-rebuilt-behaviour': { errors: 0, warnings: 0, escapes: 0 } },
+      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: [],
     })
   })

package/src/eslint/index.ts

@@ -22,10 +22,12 @@ import { componentHasAPage, componentHasAStory } from './has-a-page-and-a-story'
 import { noHandRolledBehaviour } from './no-hand-rolled-behaviour'
 import { noRawElement } from './no-raw-element'
 import { noRebuiltBehaviour } from './no-rebuilt-behaviour'
+import { noRestyledPart } from './no-restyled-part'
 import { rawElementOutsideAWrapper } from './raw-element-outside-a-wrapper'
 
 export { ESCAPE_MARKER, MIN_REASON, SETTINGS_KEY, isEscaped, type EstivaSettings } from './escape'
 export { OWNED_BEHAVIOURS, type OwnedBehaviour } from './no-rebuilt-behaviour'
+export { PART_LOOK_PROPS, PLACEMENT } from './no-restyled-part'
 
 const { version } = createRequire(import.meta.url)('../../package.json') as { version: string }
 
@@ -35,11 +37,13 @@ export const PLUGIN_KEY = 'estiva'
 /**
  * The rules an **app** runs: they say an app must not build what the package
  * already has — a raw control (UIG-7), or a behaviour one of its parts owns
- * (UIG-8). `recommended` and `strict` carry these and only these.
+ * (UIG-8) — nor restyle a part it uses (UIG-9). `recommended` and `strict`
+ * carry these and only these.
  */
 const appRules = {
   'no-raw-element': noRawElement,
   'no-rebuilt-behaviour': noRebuiltBehaviour,
+  'no-restyled-part': noRestyledPart,
 }
 
 /**
@@ -53,12 +57,16 @@ const appRules = {
  * "buried inside a component" means nothing there (`no-raw-element` is the
  * app's version, UIG-7), and an app has no `.mdx` pages at all. `index.test.ts` holds the
  * apps' list to exactly the app rules.
+ *
+ * One rule is in both sets: `no-restyled-part` (UIG-9). The package restyles
+ * none of its own parts either (Katerina, 17 September).
  */
 const packageRules = {
   'raw-element-outside-a-wrapper': rawElementOutsideAWrapper,
   'no-hand-rolled-behaviour': noHandRolledBehaviour,
   'component-has-a-page': componentHasAPage,
   'component-has-a-story': componentHasAStory,
+  'no-restyled-part': noRestyledPart,
 }
 
 const rules = { ...appRules, ...packageRules }
@@ -88,6 +96,7 @@ plugin.configs.recommended = {
   rules: {
     [`${PLUGIN_KEY}/no-raw-element`]: 'error',
     [`${PLUGIN_KEY}/no-rebuilt-behaviour`]: 'error',
+    [`${PLUGIN_KEY}/no-restyled-part`]: 'error',
   },
 }
 plugin.configs.strict = {