prime-ui-kit 0.5.1 → 0.7.1

package/src/components/modal/examples/pattern-portal-and-scroll.tsx

@@ -36,7 +36,7 @@ export default function ModalPatternPortalAndScrollExample() {
         {portalHost ? (
           <Modal.Root>
             <Modal.Trigger>
-              <Button.Root size="m" variant="neutral" mode="stroke">
+              <Button.Root variant="neutral" mode="stroke">
                 Portal into host
               </Button.Root>
             </Modal.Trigger>
@@ -54,7 +54,7 @@ export default function ModalPatternPortalAndScrollExample() {
 
       <Modal.Root>
         <Modal.Trigger>
-          <Button.Root size="m" variant="neutral" mode="stroke">
+          <Button.Root variant="neutral" mode="stroke">
             Long body (scroll)
           </Button.Root>
         </Modal.Trigger>
@@ -64,9 +64,7 @@ export default function ModalPatternPortalAndScrollExample() {
           description="Cap the body height with `bodyStyle` (or `bodyClassName`) so only the panel scrolls."
           footer={
             <Modal.Close>
-              <Button.Root size="m" variant="primary">
-                Close
-              </Button.Root>
+              <Button.Root variant="primary">Close</Button.Root>
             </Modal.Close>
           }
           icon={<Icon name="nav.itemDot" />}

package/src/components/modal/examples/scenario-confirm-delete.tsx

@@ -8,7 +8,7 @@ export default function ModalConfirmDeleteExample() {
   return (
     <Modal.Root>
       <Modal.Trigger>
-        <Button.Root size="m" variant="error" mode="stroke">
+        <Button.Root variant="error" mode="stroke">
           Delete project
         </Button.Root>
       </Modal.Trigger>
@@ -17,11 +17,11 @@ export default function ModalConfirmDeleteExample() {
         footer={
           <>
             <Modal.Close>
-              <Button.Root size="m" variant="neutral" mode="stroke">
+              <Button.Root variant="neutral" mode="stroke">
                 Cancel
               </Button.Root>
             </Modal.Close>
-            <Button.Root size="m" variant="error" type="button">
+            <Button.Root variant="error" type="button">
               Delete permanently
             </Button.Root>
           </>

package/src/components/modal/examples/scenario-edit-entity.tsx

@@ -12,7 +12,7 @@ export default function ModalEditEntityExample() {
   return (
     <Modal.Root>
       <Modal.Trigger>
-        <Button.Root size="m" variant="neutral" mode="stroke">
+        <Button.Root variant="neutral" mode="stroke">
           Rename account
         </Button.Root>
       </Modal.Trigger>
@@ -21,12 +21,12 @@ export default function ModalEditEntityExample() {
         footer={
           <>
             <Modal.Close>
-              <Button.Root size="m" variant="neutral" mode="stroke">
+              <Button.Root variant="neutral" mode="stroke">
                 Cancel
               </Button.Root>
             </Modal.Close>
             <Modal.Close>
-              <Button.Root size="m" variant="primary" type="button">
+              <Button.Root variant="primary" type="button">
                 Save changes
               </Button.Root>
             </Modal.Close>
@@ -35,7 +35,7 @@ export default function ModalEditEntityExample() {
         icon={<Icon name="nav.layoutGrid" tone="subtle" />}
         title="Edit account name"
       >
-        <Input.Root label="Account name" size="m">
+        <Input.Root label="Account name">
           <Input.Wrapper>
             <Input.Field
               onChange={(e) => setName(e.target.value)}

package/src/components/modal/examples/scenario-legal-consent.tsx

@@ -8,7 +8,7 @@ export default function ModalLegalConsentExample() {
   return (
     <Modal.Root closeOnOverlayClick={false}>
       <Modal.Trigger>
-        <Button.Root size="m" variant="neutral" mode="stroke">
+        <Button.Root variant="neutral" mode="stroke">
           Review terms
         </Button.Root>
       </Modal.Trigger>
@@ -16,7 +16,7 @@ export default function ModalLegalConsentExample() {
         description="Please read the following before continuing to use the service."
         footer={
           <Modal.Close>
-            <Button.Root size="m" variant="primary" type="button">
+            <Button.Root variant="primary" type="button">
               I agree
             </Button.Root>
           </Modal.Close>

package/src/components/modal/examples/scenario-multi-field-form.tsx

@@ -17,7 +17,7 @@ export default function ModalMultiFieldFormExample() {
   return (
     <Modal.Root>
       <Modal.Trigger>
-        <Button.Root size="m" variant="neutral" mode="stroke">
+        <Button.Root variant="neutral" mode="stroke">
           New support ticket
         </Button.Root>
       </Modal.Trigger>
@@ -26,11 +26,11 @@ export default function ModalMultiFieldFormExample() {
         footer={
           <>
             <Modal.Close>
-              <Button.Root size="m" variant="neutral" mode="stroke">
+              <Button.Root variant="neutral" mode="stroke">
                 Cancel
               </Button.Root>
             </Modal.Close>
-            <Button.Root size="m" variant="primary" type="submit" form="modal-ticket-form">
+            <Button.Root variant="primary" type="submit" form="modal-ticket-form">
               Submit ticket
             </Button.Root>
           </>
@@ -43,12 +43,12 @@ export default function ModalMultiFieldFormExample() {
           id="modal-ticket-form"
           onSubmit={(e) => e.preventDefault()}
         >
-          <Input.Root label="Subject" size="m">
+          <Input.Root label="Subject">
             <Input.Wrapper>
               <Input.Field name="subject" placeholder="Short summary" />
             </Input.Wrapper>
           </Input.Root>
-          <Select.Root placeholder="Area" size="m">
+          <Select.Root placeholder="Area">
             <Select.Trigger>
               <Select.Value />
             </Select.Trigger>
@@ -59,14 +59,8 @@ export default function ModalMultiFieldFormExample() {
             </Select.Content>
           </Select.Root>
           <div className={styles.labeledControl}>
-            <Label.Root htmlFor={messageId} size="m">
-              Message
-            </Label.Root>
-            <Textarea.Root
-              id={messageId}
-              placeholder="Steps, expected result, actual result"
-              size="m"
-            />
+            <Label.Root htmlFor={messageId}>Message</Label.Root>
+            <Textarea.Root id={messageId} placeholder="Steps, expected result, actual result" />
           </div>
         </form>
       </Modal.Panel>

package/src/components/notification/examples/action-toast.tsx

@@ -36,7 +36,6 @@ function ActionToastDemo() {
           type="button"
           variant="primary"
           mode="filled"
-          size="m"
           onClick={() =>
             notify({
               type: "info",
@@ -58,7 +57,6 @@ function ActionToastDemo() {
         </Button.Root>
         <LinkButton.Root
           href="#"
-          size="m"
           onClick={(event) => {
             event.preventDefault();
             notify({

package/src/components/notification/examples/error-success.tsx

@@ -30,7 +30,6 @@ function ErrorSuccessDemo() {
           type="button"
           variant="error"
           mode="lighter"
-          size="m"
           onClick={() =>
             notify({
               type: "error",
@@ -45,7 +44,6 @@ function ErrorSuccessDemo() {
           type="button"
           variant="primary"
           mode="filled"
-          size="m"
           onClick={() =>
             notify({
               type: "success",

package/src/components/page-content/COMPONENT.md

@@ -4,13 +4,17 @@
 
 Семантические примитивы **контентной колонки**: **`PageContent.Section`** (регион страницы **`<section>`** без собственных внешних полей), **`PageContent.Root`** (обёртка страницы с опциональным **`maxWidth`**, **без** дублирующих полей к краю колонки), **`PageContent.Title`** → **`<h1>`**, **`PageContent.Description`** с **`measure`**, **`PageContent.Body`**. Типографика — токены кита.
 
-- **В приложении с `AppShell.Template`** внешние поля колонки задаёт **`AppShell.MainInset`** (встроен в шаблон). Тогда для маршрута чаще берут **`PageContent.Section`** + **`Header`** / **`Body`**, либо **`PageContent.Root`** только ради **`maxWidth`**, без ожидания «второго» слоя полей.
-- **`PageContent.Root`** — когда нужен **`maxWidth`** (`full` | `readable` | `wide`; по умолчанию **`full`**) и структура шапки/тела; краевые поля **не** входят в корень — их даёт **`MainInset`**.
+- **С `AppShell.Template`** краевые поля колонки задаёт **`AppShell.Main`**. Для маршрута чаще берут **`PageContent.Section`** + **`Header`** / **`Body`**, либо **`PageContent.Root`** только ради **`maxWidth`**, без второго слоя полей.
+- **`PageContent.Root`** — когда нужен **`maxWidth`** (`full` | `readable` | `wide`; по умолчанию **`full`**) и структура шапки/тела; краевые поля **не** входят в корень — их даёт **`AppShell.Main`**.
 - **`Description`** с **`measure="full"`**, если ширину уже ограничивает родитель; по умолчанию **`measure="readable"`** — узкая мера лида ~65ch.
 
+### Краевые поля колонки
+
+Они **не** задаются **`PageContent`**: их даёт **`AppShell.Main`**. Если контент «прилип» к краю экрана, проверьте шелл и стили — см. [AppShell](../../layout/app-shell/COMPONENT.md).
+
 ## Composition
 
-- **`PageContent.Root`** — внешняя обёртка: **`maxWidth`** через `data-max-width` (кроме `full`), **padding по краям колонки — 0** (поля у **`AppShell.MainInset`**).
+- **`PageContent.Root`** — внешняя обёртка: **`maxWidth`** через `data-max-width` (кроме `full`), **padding по краям колонки — 0** (поля у **`AppShell.Main`**).
 - **`PageContent.Section`** — **`<section>`**; сочетайте с **`aria-labelledby`** на заголовок **`PageContent.Title`**.
 - **`PageContent.Header`** — заголовок + описание с отступами.
 - **`PageContent.Title`** — **`<h1>`** (один на вью).
@@ -62,7 +66,7 @@ export function AccountPage() {
 ## Rules
 
 - На вью — **один** `h1` через **`PageContent.Title`**.
-- **Не** вкладывайте **`PageContent.Root`** в область, где уже есть тот же слой полей, что у **`AppShell.MainInset`** — у корня **нет** своих краевых полей; при необходимости используйте **`Section`**.
+- **Не** вкладывайте **`PageContent.Root`** так, чтобы дублировать краевые поля, которые уже даёт **`AppShell.Main`**.
 - **`Description`**: по умолчанию узкая мера; **`measure="full"`**, когда колонка уже ограничена снаружи.
 
 ## API
@@ -120,4 +124,5 @@ export function AccountPage() {
 ## Related
 
 - [Typography](../typography/COMPONENT.md) — роли текста на странице.
-- [AppShell](../../layout/app-shell/COMPONENT.md) — сетка и **`MainInset`**.
+- [EmptyPage](../empty-page/COMPONENT.md) — пустое состояние списка или области данных (**`h2`**, не дублирует **`PageContent.Title`**).
+- [AppShell](../../layout/app-shell/COMPONENT.md) — сетка и **`Main`**.

package/src/components/popover/COMPONENT.md

@@ -30,7 +30,7 @@ export function Example() {
       <Popover.Trigger asChild>
         <Button.Root type="button">Open</Button.Root>
       </Popover.Trigger>
-      <Popover.Content insetPadding="x2" insetGap="x3">
+      <Popover.Content>
         Panel
       </Popover.Content>
     </Popover.Root>

package/src/components/popover/examples/as-child.tsx

@@ -13,7 +13,7 @@ export default function PopoverAsChildExample() {
           Text button trigger
         </button>
       </Popover.Trigger>
-      <Popover.Content align="start" insetGap="x3" insetPadding="x2" side="bottom" size="m">
+      <Popover.Content align="start" side="bottom">
         <p className={styles.panelTextMuted}>
           One arbitrary element as the anchor; the kit merges <code>ref</code>,{" "}
           <code>aria-expanded</code>, <code>aria-controls</code>, and the click toggle handler.

package/src/components/popover/examples/canonical-panel.tsx

@@ -7,11 +7,11 @@ export default function CanonicalPanelExample() {
   return (
     <Popover.Root>
       <Popover.Trigger asChild>
-        <Button.Root mode="stroke" size="m" variant="neutral">
+        <Button.Root mode="stroke" variant="neutral">
           View details
         </Button.Root>
       </Popover.Trigger>
-      <Popover.Content align="start" insetGap="x3" insetPadding="x2" side="bottom" size="m">
+      <Popover.Content align="start" side="bottom">
         <Typography.Root as="p" variant="body-small" weight="semibold">
           Shipping estimate
         </Typography.Root>

package/src/components/popover/examples/composition.tsx

@@ -4,20 +4,20 @@ import { Button, Checkbox, Popover, Typography } from "prime-ui-kit";
 import styles from "./popover-examples.module.css";
 
 /**
- * Trigger with `Button.Icon`, header row, body copy, and native checkboxes with inset spacing.
+ * Trigger with `Button.Icon`, header row, body copy, and native checkboxes with panel padding from `Content` `size`.
  */
 export default function PopoverCompositionExample() {
   return (
     <Popover.Root>
       <Popover.Trigger asChild>
-        <Button.Root mode="stroke" size="m" variant="neutral">
+        <Button.Root mode="stroke" variant="neutral">
           <Button.Icon>
             <SlidersHorizontal aria-hidden strokeWidth={1.75} />
           </Button.Icon>
           Report filters
         </Button.Root>
       </Popover.Trigger>
-      <Popover.Content align="start" insetGap="x3" insetPadding="x2" side="bottom" size="m">
+      <Popover.Content align="start" side="bottom">
         <div className={styles.compositionHeader}>
           <Filter aria-hidden className={styles.headerIcon} strokeWidth={1.75} />
           <Typography.Root as="span" variant="body-small" weight="semibold">
@@ -25,14 +25,14 @@ export default function PopoverCompositionExample() {
           </Typography.Root>
         </div>
         <Typography.Root as="p" className={styles.panelTextMuted} variant="body-small">
-          Icon on the trigger, header and copy inside the panel with <code>insetPadding</code> /{" "}
-          <code>insetGap</code>.
+          Icon on the trigger, header and copy; panel padding comes from <code>Content</code>{" "}
+          <code>size</code>.
         </Typography.Root>
         <div className={styles.checkboxStack}>
-          <Checkbox.Root size="m" defaultChecked>
+          <Checkbox.Root defaultChecked>
             <Checkbox.Label>Active only</Checkbox.Label>
           </Checkbox.Root>
-          <Checkbox.Root size="m">
+          <Checkbox.Root>
             <Checkbox.Label>Hide zero values</Checkbox.Label>
           </Checkbox.Root>
         </div>

package/src/components/popover/examples/controlled.tsx

@@ -15,21 +15,21 @@ export default function PopoverControlledExample() {
         Panel is {open ? "open" : "closed"}
       </Typography.Root>
       <div className={styles.sizesRow}>
-        <Button.Root mode="stroke" size="m" variant="neutral" onClick={() => setOpen(true)}>
+        <Button.Root mode="stroke" variant="neutral" onClick={() => setOpen(true)}>
           Open from outside
         </Button.Root>
         <Popover.Root open={open} onOpenChange={setOpen}>
           <Popover.Trigger asChild>
-            <Button.Root mode="filled" size="m" variant="primary">
+            <Button.Root mode="filled" variant="primary">
               Toggle with trigger
             </Button.Root>
           </Popover.Trigger>
-          <Popover.Content align="start" insetGap="x3" insetPadding="x2" side="bottom" size="m">
+          <Popover.Content align="start" side="bottom">
             <p className={styles.panelTextMuted}>
               State is driven by <code>open</code> and <code>onOpenChange</code> on{" "}
               <code>Popover.Root</code>.
             </p>
-            <Button.Root mode="ghost" size="m" variant="neutral" onClick={() => setOpen(false)}>
+            <Button.Root mode="ghost" variant="neutral" onClick={() => setOpen(false)}>
               Close
             </Button.Root>
           </Popover.Content>

package/src/components/popover/examples/date-trigger.tsx

@@ -7,22 +7,15 @@ export default function DateTriggerExample() {
   return (
     <Popover.Root>
       <Popover.Trigger asChild>
-        <Button.Root aria-label="Choose due date" mode="stroke" size="m" variant="neutral">
+        <Button.Root aria-label="Choose due date" mode="stroke" variant="neutral">
           Due · Mar 27, 2025
         </Button.Root>
       </Popover.Trigger>
-      <Popover.Content
-        align="start"
-        insetGap="x3"
-        insetPadding="x2"
-        side="bottom"
-        size="m"
-        trapFocus
-      >
+      <Popover.Content align="start" side="bottom" trapFocus>
         <Typography.Root as="p" variant="body-small" weight="semibold">
           Adjust due date
         </Typography.Root>
-        <Input.Root hint="Uses the control size from Popover.Content." label="Due date" size="m">
+        <Input.Root hint="Uses the control size from Popover.Content." label="Due date">
           <Input.Wrapper>
             <Input.Field defaultValue="2025-03-27" name="dueDate" type="date" />
           </Input.Wrapper>

package/src/components/popover/examples/features.tsx

@@ -13,18 +13,11 @@ export default function PopoverFeaturesExample() {
   return (
     <Popover.Root open={open} onOpenChange={setOpen}>
       <Popover.Trigger asChild>
-        <Button.Root className={styles.triggerWide} mode="stroke" size="m" variant="neutral">
+        <Button.Root className={styles.triggerWide} mode="stroke" variant="neutral">
           Access request
         </Button.Root>
       </Popover.Trigger>
-      <Popover.Content
-        align="start"
-        className={styles.formPanel}
-        insetGap="x3"
-        insetPadding="x2"
-        sameMinWidthAsTrigger
-        trapFocus
-      >
+      <Popover.Content align="start" className={styles.formPanel} sameMinWidthAsTrigger trapFocus>
         <Typography.Root as="p" variant="body-small" weight="medium">
           Short form
         </Typography.Root>
@@ -32,7 +25,7 @@ export default function PopoverFeaturesExample() {
           <code>trapFocus</code> keeps Tab inside the panel; opening the Select listbox does not
           count as an outside click, so the popover stays open.
         </Typography.Root>
-        <Input.Root label="Comment" size="m">
+        <Input.Root label="Comment">
           <Input.Wrapper>
             <Input.Field
               placeholder="Why access is needed"
@@ -41,7 +34,7 @@ export default function PopoverFeaturesExample() {
             />
           </Input.Wrapper>
         </Input.Root>
-        <Select.Root placeholder="Role" size="m">
+        <Select.Root placeholder="Role">
           <Select.Trigger>
             <Select.Value />
           </Select.Trigger>
@@ -52,10 +45,10 @@ export default function PopoverFeaturesExample() {
           </Select.Content>
         </Select.Root>
         <div className={styles.actionsRow}>
-          <Button.Root mode="ghost" size="m" variant="neutral" onClick={() => setOpen(false)}>
+          <Button.Root mode="ghost" variant="neutral" onClick={() => setOpen(false)}>
             Cancel
           </Button.Root>
-          <Button.Root mode="filled" size="m" variant="primary" onClick={() => setOpen(false)}>
+          <Button.Root mode="filled" variant="primary" onClick={() => setOpen(false)}>
             Submit
           </Button.Root>
         </div>

package/src/components/popover/examples/form-in-popover.tsx

@@ -10,18 +10,11 @@ export default function FormInPopoverExample() {
   return (
     <Popover.Root open={open} onOpenChange={setOpen}>
       <Popover.Trigger asChild>
-        <Button.Root mode="stroke" size="m" variant="neutral">
+        <Button.Root mode="stroke" variant="neutral">
           Quick edit
         </Button.Root>
       </Popover.Trigger>
-      <Popover.Content
-        align="start"
-        insetGap="x3"
-        insetPadding="x2"
-        side="bottom"
-        size="m"
-        trapFocus
-      >
+      <Popover.Content align="start" side="bottom" trapFocus>
         <form
           style={{ width: "min(22rem, 100vw)" }}
           onSubmit={(e) => {
@@ -40,12 +33,12 @@ export default function FormInPopoverExample() {
               marginTop: "var(--prime-sys-spacing-x2)",
             }}
           >
-            <Input.Root label="Display name" size="m">
+            <Input.Root label="Display name">
               <Input.Wrapper>
                 <Input.Field autoComplete="organization" name="displayName" type="text" />
               </Input.Wrapper>
             </Input.Root>
-            <Input.Root label="Slug" hint="Lowercase, no spaces." size="m">
+            <Input.Root label="Slug" hint="Lowercase, no spaces.">
               <Input.Wrapper>
                 <Input.Field name="slug" type="text" />
               </Input.Wrapper>
@@ -61,14 +54,13 @@ export default function FormInPopoverExample() {
           >
             <Button.Root
               mode="stroke"
-              size="m"
               type="button"
               variant="neutral"
               onClick={() => setOpen(false)}
             >
               Cancel
             </Button.Root>
-            <Button.Root size="m" type="submit" variant="primary">
+            <Button.Root type="submit" variant="primary">
               Save
             </Button.Root>
           </div>

package/src/components/popover/examples/full-width.tsx

@@ -10,18 +10,11 @@ export default function PopoverFullWidthExample() {
     <div className={styles.narrowColumn}>
       <Popover.Root>
         <Popover.Trigger asChild>
-          <Button.Root className={styles.fullWidthTrigger} mode="stroke" size="m" variant="neutral">
+          <Button.Root className={styles.fullWidthTrigger} mode="stroke" variant="neutral">
             Match trigger width
           </Button.Root>
         </Popover.Trigger>
-        <Popover.Content
-          align="start"
-          insetGap="x3"
-          insetPadding="x2"
-          sameMinWidthAsTrigger
-          side="bottom"
-          size="m"
-        >
+        <Popover.Content align="start" sameMinWidthAsTrigger side="bottom">
           <p className={styles.panelTextMuted}>
             <code>sameMinWidthAsTrigger</code> sets panel <code>width</code> and{" "}
             <code>minWidth</code> to the anchor — text wraps, still capped by panel max width and

package/src/components/popover/examples/inset-variants.tsx

@@ -10,33 +10,33 @@ export default function PopoverInsetVariantsExample() {
     <div className={styles.sizesRow}>
       <Popover.Root>
         <Popover.Trigger asChild>
-          <Button.Root mode="stroke" size="m" variant="neutral">
+          <Button.Root mode="stroke" variant="neutral">
             padding: none
           </Button.Root>
         </Popover.Trigger>
-        <Popover.Content insetGap="none" insetPadding="none" size="m">
+        <Popover.Content insetGap="none" insetPadding="none">
           <p className={styles.flushText}>Content flush to the panel radius.</p>
         </Popover.Content>
       </Popover.Root>
 
       <Popover.Root>
         <Popover.Trigger asChild>
-          <Button.Root mode="stroke" size="m" variant="neutral">
+          <Button.Root mode="stroke" variant="neutral">
             padding: x2
           </Button.Root>
         </Popover.Trigger>
-        <Popover.Content insetGap="x2" insetPadding="x2" size="m">
+        <Popover.Content insetGap="x2" insetPadding="x2">
           <p className={styles.panelTextMuted}>Typical inset defaults for inner spacing.</p>
         </Popover.Content>
       </Popover.Root>
 
       <Popover.Root>
         <Popover.Trigger asChild>
-          <Button.Root mode="stroke" size="m" variant="neutral">
+          <Button.Root mode="stroke" variant="neutral">
             padding: x3
           </Button.Root>
         </Popover.Trigger>
-        <Popover.Content insetGap="x4" insetPadding="x3" size="m">
+        <Popover.Content insetGap="x4" insetPadding="x3">
           <p className={styles.panelTextMuted}>More air between blocks (gap x4).</p>
           <p className={styles.panelTextMuted}>Second paragraph shows vertical rhythm.</p>
         </Popover.Content>

package/src/components/popover/examples/placement.tsx

@@ -20,16 +20,11 @@ export default function PlacementExample() {
       {demos.map(({ label, side, align }) => (
         <Popover.Root key={label}>
           <Popover.Trigger asChild>
-            <Button.Root
-              className={styles.placementTrigger}
-              mode="stroke"
-              size="m"
-              variant="neutral"
-            >
+            <Button.Root className={styles.placementTrigger} mode="stroke" variant="neutral">
               {label}
             </Button.Root>
           </Popover.Trigger>
-          <Popover.Content align={align} insetGap="x2" insetPadding="x2" side={side} size="m">
+          <Popover.Content align={align} side={side}>
             <Typography.Root as="p" variant="body-small">
               <code>side=&quot;{side}&quot;</code>, <code>align=&quot;{align}&quot;</code>. Near the
               viewport edge the panel may flip to stay on screen.

package/src/components/popover/examples/rich-content.tsx

@@ -7,16 +7,16 @@ export default function RichContentExample() {
   return (
     <Popover.Root>
       <Popover.Trigger asChild>
-        <Button.Root mode="ghost" size="m" variant="neutral">
+        <Button.Root mode="ghost" variant="neutral">
           Release notes
         </Button.Root>
       </Popover.Trigger>
-      <Popover.Content align="start" insetGap="x3" insetPadding="x2" side="bottom" size="m">
+      <Popover.Content align="start" side="bottom">
         <div style={{ display: "flex", flexWrap: "wrap", gap: "var(--prime-sys-spacing-x2)" }}>
-          <Badge.Root color="green" size="m" variant="light">
+          <Badge.Root color="green" variant="light">
             Stable
           </Badge.Root>
-          <Badge.Root color="blue" size="m" variant="stroke">
+          <Badge.Root color="blue" variant="stroke">
             v2.4
           </Badge.Root>
         </div>
@@ -27,10 +27,8 @@ export default function RichContentExample() {
           Command menu now respects nested Select listboxes without closing the panel on outside
           detection.
         </Typography.Root>
-        <Divider.Root size="m" variant="text">
-          Heads-up
-        </Divider.Root>
-        <Hint.Root size="m" variant="default">
+        <Divider.Root variant="text">Heads-up</Divider.Root>
+        <Hint.Root variant="default">
           Prefer Modal when the flow must block the page or trap focus by default.
         </Hint.Root>
       </Popover.Content>

package/src/components/popover/examples/sizes.tsx

@@ -5,7 +5,7 @@ import styles from "./popover-examples.module.css";
 const sizes = ["s", "m", "l", "xl"] as const;
 
 /**
- * Content `size` tier: padding, min width, and helper text scale (`ControlSizeProvider`).
+ * Content `size` tier: panel padding, type scale, and `ControlSizeProvider` for nested controls.
  */
 export default function PopoverSizesExample() {
   return (
@@ -13,14 +13,14 @@ export default function PopoverSizesExample() {
       {sizes.map((size) => (
         <Popover.Root key={size}>
           <Popover.Trigger asChild>
-            <Button.Root mode="stroke" size="m" variant="neutral">
+            <Button.Root mode="stroke" variant="neutral">
               Size {size}
             </Button.Root>
           </Popover.Trigger>
-          <Popover.Content align="start" insetGap="x2" insetPadding="x2" side="bottom" size={size}>
+          <Popover.Content align="start" side="bottom" size={size}>
             <p className={styles.panelTextMuted}>
-              Panel with <code>size=&quot;{size}&quot;</code>: padding, min width, and type scale
-              from the control tier.
+              Panel with <code>size=&quot;{size}&quot;</code>: padding and type scale from the
+              control tier; nested controls use <code>ControlSizeProvider</code>.
             </p>
           </Popover.Content>
         </Popover.Root>