@plexui/mcp 0.2.2 → 0.2.3

package/dist/index.js

@@ -44,7 +44,7 @@ var manifest_default = {
     "outline",
     "ghost"
   ],
-  componentCount: 58,
+  componentCount: 62,
   components: [
     {
       slug: "accordion",
@@ -683,6 +683,12 @@ actionsPlacement="bottom"
           default: '"horizontal"',
           description: "Direction of the joined items"
         },
+        {
+          name: "mobileMaterial",
+          type: '"glass" | "flat"',
+          default: "\u2014",
+          description: 'Phone surface with touch.css: "glass" makes the group one glass capsule outside a Toolbar, "flat" keeps the joined buttons in one'
+        },
         {
           name: "className",
           type: "string",
@@ -693,12 +699,13 @@ actionsPlacement="bottom"
       examples: [
         {
           name: "Overview",
-          code: '<ButtonGroup>\n<ButtonGroup>\n  <Button variant="outline" color="secondary" size="sm" uniform aria-label="Go back">\n    <ArrowLeftSm />\n  </Button>\n</ButtonGroup>\n<ButtonGroup>\n  <Button variant="outline" color="secondary" size="sm">Pin</Button>\n  <Button variant="outline" color="secondary" size="sm">Tag</Button>\n</ButtonGroup>\n<ButtonGroup>\n  <Button variant="outline" color="secondary" size="sm">Bookmark</Button>\n  <Button variant="outline" color="secondary" size="sm" uniform aria-label="More options">\n    <DotsHorizontal />\n  </Button>\n</ButtonGroup>\n</ButtonGroup>'
+          code: '// Desktop\n<ButtonGroup>\n<ButtonGroup>\n  <Button variant="outline" color="secondary" size="sm" uniform aria-label="Go back">\n    <ArrowLeftSm />\n  </Button>\n</ButtonGroup>\n<ButtonGroup>\n  <Button variant="outline" color="secondary" size="sm">Pin</Button>\n  <Button variant="outline" color="secondary" size="sm">Tag</Button>\n</ButtonGroup>\n<ButtonGroup>\n  <Button variant="outline" color="secondary" size="sm">Bookmark</Button>\n  <Button variant="outline" color="secondary" size="sm" uniform aria-label="More options">\n    <DotsHorizontal />\n  </Button>\n</ButtonGroup>\n</ButtonGroup>\n\n// Phone: the bars of a note\n<Page>\n<Toolbar>\n  <Toolbar.Leading>\n    <NavigationButton action="back" />\n  </Toolbar.Leading>\n  <Toolbar.Trailing>\n    <ButtonGroup aria-label="Note actions">\n      <Button color="secondary" variant="soft" uniform pill aria-label="Pin"><Pin /></Button>\n      <Button color="secondary" variant="soft" uniform pill aria-label="Tag"><Tag /></Button>\n      <Button color="secondary" variant="soft" uniform pill aria-label="More"><DotsHorizontal /></Button>\n    </ButtonGroup>\n  </Toolbar.Trailing>\n</Toolbar>\n<Page.Content>\u2026</Page.Content>\n<Toolbar placement="bottom">\n  <Toolbar.Leading>\n    <ButtonGroup aria-label="Editing tools">\n      <Button color="secondary" variant="soft" uniform pill aria-label="Checklist"><NotebookCheck /></Button>\n      <Button color="secondary" variant="soft" uniform pill aria-label="Attach"><Clip /></Button>\n      <Button color="secondary" variant="soft" uniform pill aria-label="Markup"><Pens /></Button>\n    </ButtonGroup>\n  </Toolbar.Leading>\n  <Toolbar.Trailing>\n    <Button color="secondary" variant="soft" uniform pill aria-label="New note"><PencilSquare /></Button>\n  </Toolbar.Trailing>\n</Toolbar>\n</Page>',
+          details: "On a phone the example is the bars of a note, as in iOS Notes: Back alone, the note's actions in one glass capsule on top, the editing tools in one at the bottom beside New Note. A ButtonGroup in a Toolbar is that capsule, the Button Group of the iOS 27 kit: 44px buttons 12px apart in a 160px capsule on top, 48px ones 6px apart in a 164px capsule at the bottom, the symbols in the primary label color. Groups side by side stand apart as the bar's items do."
         },
         {
           name: "Orientation",
-          code: '<ButtonGroup orientation="vertical" aria-label="Zoom controls">\n<Button variant="outline" color="secondary" size="sm" uniform aria-label="Zoom in">\n  <PlusSm />\n</Button>\n<Button variant="outline" color="secondary" size="sm" uniform aria-label="Zoom out">\n  <Minus />\n</Button>\n</ButtonGroup>',
-          details: 'Pass orientation="vertical" to stack the buttons, useful for + / \u2212 steppers, zoom controls, or any vertical toolbar. On a phone with touch.css a group of icon-only buttons keeps their 44px at each size shown, so the phone view leaves out the size control.'
+          code: '// Desktop\n<ButtonGroup orientation="vertical" aria-label="Zoom controls">\n<Button variant="outline" color="secondary" size="sm" uniform aria-label="Zoom in">\n  <PlusSm />\n</Button>\n<Button variant="outline" color="secondary" size="sm" uniform aria-label="Zoom out">\n  <Minus />\n</Button>\n</ButtonGroup>\n\n// Phone: zoom controls over a canvas\n<ButtonGroup orientation="vertical" mobileMaterial="glass" aria-label="Zoom controls" className="absolute top-2 right-4">\n<Button color="secondary" variant="soft" uniform pill aria-label="Zoom in"><Plus /></Button>\n<Button color="secondary" variant="soft" uniform pill aria-label="Zoom out"><Minus /></Button>\n</ButtonGroup>',
+          details: 'Pass orientation="vertical" to stack the buttons, useful for + / \u2212 steppers, zoom controls, or any vertical toolbar. On a phone the example is zoom controls floating over a canvas, as map controls do: with mobileMaterial="glass" the group is the vertical Button Group of the iOS 27 kit, a 48px wide capsule of 48px buttons 6px apart. In the content a group of icon-only buttons keeps their 44px at each size, so the phone view leaves out the size control.'
         },
         {
           name: "Size",
@@ -713,7 +720,7 @@ actionsPlacement="bottom"
         {
           name: "Separator",
           code: '<ButtonGroup>\n<Button variant="soft" color="secondary" size="sm"><Undo /> Undo</Button>\n<ButtonGroup.Separator />\n<Button variant="soft" color="secondary" size="sm">Redo <Redo /></Button>\n</ButtonGroup>',
-          details: 'Drop a ButtonGroup.Separator between items to add a visible divider, commonly used for Undo / Redo pairs or any "two related actions" toolbar.'
+          details: 'Drop a ButtonGroup.Separator between items to add a visible divider, commonly used for Undo / Redo pairs or any "two related actions" toolbar. A glass group on a phone draws no line, as the capsule of iOS has none.'
         },
         {
           name: "Split",
@@ -1790,7 +1797,7 @@ const [swatches, setSwatches] = useState(['#000000', '#007aff', '#34c759'])
         {
           name: "Overview",
           code: "<ContextMenu>\n<ContextMenu.Trigger>\n  <div tabIndex={0}>Groceries</div>\n</ContextMenu.Trigger>\n<ContextMenu.Content>\n  <ContextMenu.Item onSelect={copy}><Copy /> Copy</ContextMenu.Item>\n  <ContextMenu.Item onSelect={share}><Share /> Share</ContextMenu.Item>\n  <ContextMenu.Item onSelect={pin}><Pin /> Pin</ContextMenu.Item>\n  <ContextMenu.Separator />\n  <ContextMenu.Item danger onSelect={remove}><RemoveTrash /> Delete</ContextMenu.Item>\n</ContextMenu.Content>\n</ContextMenu>",
-          details: "Wrap the element in ContextMenu.Trigger: it keeps its own role and focus. On a touch screen, hold for half a second: the element stays clear above the dimmed, blurred page and the menu opens 18px below it, at the edge on the side of the touch. The press that opened the menu does not activate the element. On a phone the rows sit on the grouped background of an iOS list."
+          details: "Wrap the element in ContextMenu.Trigger: it keeps its own role and focus. On a touch screen, hold for half a second: the element stays clear above the dimmed, blurred page and the menu opens 16px below it, as in the iOS 27 kit, at the edge on the side of the touch. The press that opened the menu does not activate the element. On a phone the rows sit on the grouped background of an iOS list."
         },
         {
           name: "Rounded elements",
@@ -2715,7 +2722,7 @@ export function DetailsDialogExample() {
         {
           name: "Scrolling body",
           code: 'const heading = useRef<HTMLDivElement>(null)\n\n<Dialog.Content mobileVariant="sheet" onOpenAutoFocus={(event) => { event.preventDefault(); heading.current?.focus({ preventScroll: true }); }}>\n<Dialog.Header>\n  <div ref={heading} tabIndex={-1} className="outline-none"><Dialog.Title>Terms of service</Dialog.Title></div>\n</Dialog.Header>\n<Dialog.Body>\n  <div className="flex flex-col gap-4 text-sm text-secondary max-md:text-[length:var(--dialog-mobile-type-size)] max-md:leading-[var(--dialog-mobile-type-leading)]">\n    {terms.map((term) => <p key={term}>{term}</p>)}\n  </div>\n</Dialog.Body>\n<Dialog.Footer>\n  <Dialog.Close><Button color="secondary" variant="soft">Decline</Button></Dialog.Close>\n  <Button color="primary">Accept</Button>\n</Dialog.Footer>\n</Dialog.Content>',
-          details: "Put long content in Dialog.Body: only the body scrolls, while the header and footer stay in view. Without it the whole panel scrolls. On a phone, background on Dialog.Header and Dialog.Footer sets how the Sheet's bars meet the body scrolled under them, as a Toolbar's do: soft by default, or hard, glass or solid."
+          details: "Put long content in Dialog.Body: only the body scrolls, while the header and footer stay in view. Without it the whole panel scrolls. On a phone, background on Dialog.Header and Dialog.Footer sets how the Sheet's bars meet the body scrolled under them, as a Toolbar's do: by default glass on the header and soft on the footer, or hard or solid."
         },
         {
           name: "Placement",
@@ -2762,6 +2769,72 @@ export default function Example() {
 const [open, setOpen] = useState(false);
 return <SetupChoicesSheet open={open} onOpenChange={setOpen} layout="grouped" onAdd={(method) => console.log(method.id)} />;
 }`
+        },
+        {
+          name: "Steps",
+          code: `const [open, setOpen] = useState(false)
+const [step, setStep] = useState('email')
+const [direction, setDirection] = useState('forward')
+const go = (next, to) => { setDirection(to); setStep(next) }
+
+<Dialog open={open} onOpenChange={setOpen}>
+<Dialog.Trigger>
+  <Button color="secondary" variant="outline">Sign in</Button>
+</Dialog.Trigger>
+<Dialog.Content mobileVariant="sheet" width={420}>
+  <Dialog.Header>
+    <Dialog.Title>Sign in</Dialog.Title>
+  </Dialog.Header>
+  <Dialog.Body>
+    <Dialog.Steps step={step} direction={direction}>
+      {step === 'email' ? (
+        <Field label="Email" description="We send a code to this address.">
+          <Input type="email" placeholder="you@example.com" />
+        </Field>
+      ) : (
+        <Field label="Code" description="Enter the code we sent to your email.">
+          <Input inputMode="numeric" autoComplete="one-time-code" placeholder="6-digit code" />
+        </Field>
+      )}
+    </Dialog.Steps>
+  </Dialog.Body>
+  <Dialog.Footer>
+    {step === 'code' && <Button color="primary" variant="soft" onClick={() => go('email', 'back')}>Back</Button>}
+    {step === 'email'
+      ? <Button color="primary" onClick={() => go('code', 'forward')}>Continue</Button>
+      : <Button color="primary" onClick={() => setOpen(false)}>Verify</Button>}
+  </Dialog.Footer>
+</Dialog.Content>
+</Dialog>`,
+          details: `Put the steps of a flow in Dialog.Steps: a new step comes in from the trailing edge over the one before, which moves a third of the way out under it, as a push on iOS. direction="back" reverses it for a return to a step before. The new step starts at its top, the steps reach the panel's edges, and focus in the step that leaves moves to the one that comes in. With reduced motion the step changes at once.`
+        },
+        {
+          name: "Keep it open",
+          code: `const [open, setOpen] = useState(false)
+const [name, setName] = useState('Mia')
+const dirty = name !== 'Mia'
+const hold = (event) => { if (dirty) event.preventDefault() }
+
+<Dialog open={open} onOpenChange={setOpen}>
+<Dialog.Trigger>
+  <Button color="secondary" variant="outline">Edit profile</Button>
+</Dialog.Trigger>
+<Dialog.Content width={420} onEscapeKeyDown={hold} onInteractOutside={hold}>
+  <Dialog.Header>
+    <Dialog.Title>Edit profile</Dialog.Title>
+  </Dialog.Header>
+  <Field label="Name">
+    <Input value={name} onChange={(event) => setName(event.target.value)} />
+  </Field>
+  <Dialog.Footer>
+    <Dialog.Close>
+      <Button color="primary" variant="soft">Discard</Button>
+    </Dialog.Close>
+    <Button color="primary" onClick={() => setOpen(false)}>Save</Button>
+  </Dialog.Footer>
+</Dialog.Content>
+</Dialog>`,
+          details: "Escape and a press or a focus outside ask onEscapeKeyDown and onInteractOutside first: event.preventDefault() keeps the dialog open, such as for a form with unsaved changes, or for a press on a developer panel over the page. The Close button and Dialog.Close still close it."
         }
       ],
       subComponents: [
@@ -2822,6 +2895,38 @@ return <SetupChoicesSheet open={open} onOpenChange={setOpen} layout="grouped" on
               name: "onCloseAutoFocus",
               type: "(event: Event) => void",
               description: "Called when focus returns on close; call event.preventDefault() to keep it elsewhere"
+            },
+            {
+              name: "onEscapeKeyDown",
+              type: "(event: KeyboardEvent) => void",
+              description: "Called on Escape before the dialog closes; call event.preventDefault() to keep it open"
+            },
+            {
+              name: "onInteractOutside",
+              type: "(event: DialogInteractOutsideEvent) => void",
+              description: "Called on a press or a focus outside the dialog before it closes; call event.preventDefault() to keep it open. event.detail.originalEvent is the browser's event"
+            },
+            {
+              name: "zIndex",
+              type: "number",
+              default: "50",
+              description: "Stack order of the overlay and the dialog, for a page whose own layers sit above 50"
+            },
+            {
+              name: "rootProps",
+              type: "DialogLayerProps",
+              description: "className, style and data attributes for the fixed layer that holds the panel. Data attributes on Dialog.Content land there too"
+            },
+            {
+              name: "overlayProps",
+              type: "DialogLayerProps",
+              description: "className, style and data attributes for the overlay"
+            },
+            {
+              name: "layout",
+              type: '"auto" | "phone"',
+              default: '"auto"',
+              description: "phone lays the dialog out as on a phone at any window width, with the dialogs it opens. Inside a PhoneLayout it always is"
             }
           ]
         },
@@ -2841,6 +2946,28 @@ return <SetupChoicesSheet open={open} onOpenChange={setOpen} layout="grouped" on
               description: "Action layout at 767px and below. Defaults to inline for alert, stacked otherwise. Inline actions wrap when they do not fit"
             }
           ]
+        },
+        {
+          name: "Dialog.Steps",
+          description: "the steps of a flow, such as a sign-in that asks for an email and then a code. Place it in Dialog.Body.",
+          props: [
+            {
+              name: "step",
+              type: "string | number",
+              description: "The step on screen. A new value brings its content in"
+            },
+            {
+              name: "direction",
+              type: '"forward" | "back"',
+              default: '"forward"',
+              description: "forward brings the new step in from the trailing edge over the one before; back returns to a step before it"
+            },
+            {
+              name: "className",
+              type: "string",
+              description: "Additional CSS class on the steps"
+            }
+          ]
         }
       ],
       docsUrl: "https://plexui.com/components/dialog"
@@ -3619,6 +3746,66 @@ required
       ],
       docsUrl: "https://plexui.com/components/floating-label-input"
     },
+    {
+      slug: "index-bar",
+      name: "Index Bar",
+      description: '"The section index of a phone list: a column of letters at the trailing edge that jumps to a section under the finger, as the iOS section index does. Desktop lists have no index, so an index bar never renders from 768px up."',
+      importPath: "@plexui/ui/components/IndexBar",
+      exports: [
+        "IndexBar"
+      ],
+      props: [
+        {
+          name: "items",
+          type: "string[]",
+          description: "The titles of the sections, in order: usually letters, such as A to Z and #"
+        },
+        {
+          name: "onSelect",
+          type: "(item: string, index: number) => void",
+          description: "Called with the title and the index of the section to show: on a press, on each new letter while dragging, and from the keys"
+        },
+        {
+          name: "id",
+          type: "string",
+          description: "The id of the index bar"
+        },
+        {
+          name: "aria-label",
+          type: "string",
+          default: '"Section index"',
+          description: "Name of the index bar"
+        },
+        {
+          name: "aria-controls",
+          type: "string",
+          description: "The id of the list the index scrolls"
+        },
+        {
+          name: "onFocus",
+          type: "(event: FocusEvent) => void",
+          description: "Called when the index bar gains focus"
+        },
+        {
+          name: "onBlur",
+          type: "(event: FocusEvent) => void",
+          description: "Called when the index bar loses focus"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "CSS classes applied to the strip of the index bar"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: 'const content = useRef<HTMLDivElement>(null)\n\n<Page surface="grouped">\n<Toolbar>\n  <Toolbar.Title>Countries</Toolbar.Title>\n</Toolbar>\n<Page.Content ref={content}>\n  {sections.map(({ letter, names }) => (\n    <FieldGroup key={letter} title={letter} data-section={letter}>...</FieldGroup>\n  ))}\n</Page.Content>\n<IndexBar\n  items={sections.map(({ letter }) => letter)}\n  onSelect={(letter) => scrollToSection(content.current, letter)}\n/>\n</Page>',
+          details: "Put the bar in a Page, or in any positioned container that holds the list: it runs down the trailing edge, centred between the bars of a Page (or the safe areas), as iOS centres its index, its letters 14px apart and centred 8px from the edge, in the info color, as native iOS draws its tint (Contacts and the iOS 27 kit). The rows keep the margins of the list, and the letters sit in the trailing one, as in Contacts. A press shows the section of the letter under the finger, and a drag moves through the sections letter by letter; onSelect receives the title and its index, and the list scrolls itself there. Where the letters do not fit, as in a short sheet, every other letter gives way to a dot, as UIKit&apos;s index does, and a drag over a dot still reaches the letters behind it."
+        }
+      ],
+      docsUrl: "https://plexui.com/components/index-bar"
+    },
     {
       slug: "indicators",
       name: "Indicators",
@@ -4531,12 +4718,12 @@ return (
         {
           name: "Overview",
           code: '// Desktop\nconst [icons] = useState(true)\nconst [checkmarks] = useState(true)\nconst [pill] = useState(false)\nconst [view, setView] = useState("list")\nconst [sort, setSort] = useState("date")\nconst [group, setGroup] = useState("date")\n\n<Menu>\n<Menu.Trigger>\n  <Button color="primary" size="lg" variant="ghost">Downloads <ChevronDownMd /></Button>\n</Menu.Trigger>\n<Menu.Content minWidth={220} pill={pill}>\n  <Menu.Item onSelect={() => {}}>{icons && <CheckCircle />} Select</Menu.Item>\n  <Menu.Item onSelect={() => {}}>{icons && <FolderPlus />} New Folder</Menu.Item>\n  <Menu.Item onSelect={() => {}}>{icons && <FileDocument />} Scan Documents</Menu.Item>\n  <Menu.Item onSelect={() => {}}>{icons && <Desktop />} Connect to Server</Menu.Item>\n  <Menu.Separator />\n  {checkmarks && (\n    <>\n      <Menu.RadioGroup value={view} onChange={setView}>\n        <Menu.RadioItem value="icons">{icons && <VideoGrid />} Icons</Menu.RadioItem>\n        <Menu.RadioItem value="list">{icons && <List />} List</Menu.RadioItem>\n      </Menu.RadioGroup>\n      <Menu.Separator />\n      <Menu.RadioGroup value={sort} onChange={setSort}>\n        <Menu.RadioItem value="name">Name</Menu.RadioItem>\n        <Menu.RadioItem value="kind">Kind</Menu.RadioItem>\n        <Menu.RadioItem value="date" description={sort === "date" ? "Newest to Oldest" : undefined}>Date</Menu.RadioItem>\n        <Menu.RadioItem value="size">Size</Menu.RadioItem>\n        <Menu.RadioItem value="tags">Tags</Menu.RadioItem>\n      </Menu.RadioGroup>\n      <Menu.Separator />\n      <Menu.Sub>\n        <Menu.SubTrigger>Group By</Menu.SubTrigger>\n        <Menu.SubContent>\n          <Menu.RadioGroup value={group} onChange={setGroup}>\n            <Menu.RadioItem value="none">None</Menu.RadioItem>\n            <Menu.RadioItem value="kind">Kind</Menu.RadioItem>\n            <Menu.RadioItem value="date">Date</Menu.RadioItem>\n            <Menu.RadioItem value="size">Size</Menu.RadioItem>\n            <Menu.RadioItem value="shared">Shared by</Menu.RadioItem>\n          </Menu.RadioGroup>\n        </Menu.SubContent>\n      </Menu.Sub>\n    </>\n  )}\n  <Menu.Item onSelect={() => {}}>View Options</Menu.Item>\n</Menu.Content>\n</Menu>\n\n// Phone: the More button of the top bar opens the menu\n<Toolbar titleStyle="large">\n  <Toolbar.Title>Overview</Toolbar.Title>\n  <Toolbar.Trailing>\n    <Menu>\n    <Menu.Trigger>\n        <Button color="secondary" variant="soft" uniform pill aria-label="More"><DotsHorizontal /></Button>\n      </Menu.Trigger>\n    <Menu.Content align="end">\n      <Menu.Item onSelect={() => {}}>{icons && <CheckCircle />} Select</Menu.Item>\n      <Menu.Item onSelect={() => {}}>{icons && <FolderPlus />} New Folder</Menu.Item>\n      <Menu.Item onSelect={() => {}}>{icons && <FileDocument />} Scan Documents</Menu.Item>\n      <Menu.Item onSelect={() => {}}>{icons && <Desktop />} Connect to Server</Menu.Item>\n      <Menu.Separator />\n      {checkmarks && (\n        <>\n          <Menu.RadioGroup value={view} onChange={setView}>\n            <Menu.RadioItem value="icons">{icons && <VideoGrid />} Icons</Menu.RadioItem>\n            <Menu.RadioItem value="list">{icons && <List />} List</Menu.RadioItem>\n          </Menu.RadioGroup>\n          <Menu.Separator />\n          <Menu.RadioGroup value={sort} onChange={setSort}>\n            <Menu.RadioItem value="name">Name</Menu.RadioItem>\n            <Menu.RadioItem value="kind">Kind</Menu.RadioItem>\n            <Menu.RadioItem value="date" description={sort === "date" ? "Newest to Oldest" : undefined}>Date</Menu.RadioItem>\n            <Menu.RadioItem value="size">Size</Menu.RadioItem>\n            <Menu.RadioItem value="tags">Tags</Menu.RadioItem>\n          </Menu.RadioGroup>\n          <Menu.Separator />\n          <Menu.Sub>\n            <Menu.SubTrigger>Group By</Menu.SubTrigger>\n            <Menu.SubContent>\n              <Menu.RadioGroup value={group} onChange={setGroup}>\n                <Menu.RadioItem value="none">None</Menu.RadioItem>\n                <Menu.RadioItem value="kind">Kind</Menu.RadioItem>\n                <Menu.RadioItem value="date">Date</Menu.RadioItem>\n                <Menu.RadioItem value="size">Size</Menu.RadioItem>\n                <Menu.RadioItem value="shared">Shared by</Menu.RadioItem>\n              </Menu.RadioGroup>\n            </Menu.SubContent>\n          </Menu.Sub>\n        </>\n      )}\n      <Menu.Item onSelect={() => {}}>View Options</Menu.Item>\n    </Menu.Content>\n    </Menu>\n  </Toolbar.Trailing>\n</Toolbar>',
-          details: "A folder's menu, as Files opens it on iOS: actions with their icons, then the view and the sort order as radio items, Date with its order under it (description) while it is the chosen sort, and Group By in a submenu. Turn off icons for the same menu in plain text, and checkmarks for the folder's actions alone, a shorter menu with no checkmark column. pill on Menu.Content makes a rounder list with fully rounded rows, for menus beside pill controls. On a phone each example is a screen whose menu opens from the More button of its top bar, as iOS opens the menu of an album in Photos. There the panel covers the button, its top and end at the button's top and end, and is the 238px panel of the iOS kit, so the phone code leaves out width, minWidth and size. A pill menu is the same panel there, so the phone view leaves out pill."
+          details: "A folder's menu, as Files opens it on iOS: actions with their icons, then the view and the sort order as radio items, Date with its order under it (description) while it is the chosen sort, and Group By in a submenu. Turn off icons for the same menu in plain text, and checkmarks for the folder's actions alone, a shorter menu with no checkmark column. pill on Menu.Content makes a rounder list with fully rounded rows, for menus beside pill controls. On a phone each example is a screen whose menu opens from the More button of its top bar, as iOS opens the menu of an album in Photos. There the panel covers the button, its top and end at the button's top and end, and is the 250px panel of iOS menus, so the phone code leaves out width, minWidth and size. A pill menu is the same panel there, so the phone view leaves out pill."
         },
         {
           name: "Natural sizing",
           code: '<Menu>\n<Menu.Trigger>\n  <Button color="primary" size="lg" variant="ghost" className="font-semibold gap-1.5"><Tools /> Tools</Button>\n</Menu.Trigger>\n<Menu.Content minWidth="auto">\n  <Menu.Item onSelect={() => {}}><Functions height={18} width={18} /> Function</Menu.Item>\n  <Menu.Item onSelect={() => {}}><Search height={18} width={18} /> File Search</Menu.Item>\n  <Menu.Item onSelect={() => {}}><Globe height={18} width={18} /> Web Search</Menu.Item>\n  <Menu.Item onSelect={() => {}}><Code height={18} width={18} /> Code Interpreter</Menu.Item>\n  <Menu.Item onSelect={() => {}}><ImageSquare height={18} width={18} /> Image Generation</Menu.Item>\n</Menu.Content>\n</Menu>',
-          details: `Menu supports several sizing strategies:Natural sizing: use minWidth="auto" to have the menu fit naturally to the size of the content.Fixed size: use width and minWidth to set the menu to a fixed size, regardless of content size.Flexible sizing: minWidth can be used by itself to describe a menu that must be a given size, but can grow larger depending on its content.Max sizing: apply max-width to the children of Menu.Content. maxWidth isn't exposed as a prop because it's reserved for Radix variables used in collision detection.Desktop only: on a phone a menu is the iOS panel, at least the 238px of the iOS kit, whatever these sizes say.`
+          details: `Menu supports several sizing strategies:Natural sizing: use minWidth="auto" to have the menu fit naturally to the size of the content.Fixed size: use width and minWidth to set the menu to a fixed size, regardless of content size.Flexible sizing: minWidth can be used by itself to describe a menu that must be a given size, but can grow larger depending on its content.Max sizing: apply max-width to the children of Menu.Content. maxWidth isn't exposed as a prop because it's reserved for Radix variables used in collision detection.Desktop only: on a phone a menu is the 250px panel of iOS menus, unless it sets a width or a larger minimum width of its own.`
         },
         {
           name: "Horizontal (icons only)",
@@ -4555,8 +4742,8 @@ return (
         },
         {
           name: "Grouped items",
-          code: '// Desktop\n<Menu>\n<Menu.Trigger>\n  <Button color="primary" size="lg" variant="ghost" className="font-semibold gap-1.5"><FileDocument /> Templates <ChevronDownMd /></Button>\n</Menu.Trigger>\n<Menu.Content minWidth={220}>\n  <Menu.Group>\n    <Menu.Label>Active</Menu.Label>\n    <Menu.Item onSelect={() => {}}>Welcome email</Menu.Item>\n    <Menu.Item onSelect={() => {}}>Order confirmation</Menu.Item>\n    <Menu.Item onSelect={() => {}}>Password reset</Menu.Item>\n  </Menu.Group>\n  <Menu.Separator />\n  <Menu.Group>\n    <Menu.Label>Draft</Menu.Label>\n    <Menu.Item onSelect={() => {}}>New promo campaign</Menu.Item>\n    <Menu.Item onSelect={() => {}}>Account deactivation</Menu.Item>\n  </Menu.Group>\n</Menu.Content>\n</Menu>\n\n// Phone: the More button of the top bar opens the menu\n<Toolbar titleStyle="large">\n  <Toolbar.Title>Grouped items</Toolbar.Title>\n  <Toolbar.Trailing>\n    <Menu>\n    <Menu.Trigger>\n        <Button color="secondary" variant="soft" uniform pill aria-label="More"><DotsHorizontal /></Button>\n      </Menu.Trigger>\n    <Menu.Content align="end">\n      <Menu.Group>\n        <Menu.Label>Active</Menu.Label>\n        <Menu.Item onSelect={() => {}}>Welcome email</Menu.Item>\n        <Menu.Item onSelect={() => {}}>Order confirmation</Menu.Item>\n        <Menu.Item onSelect={() => {}}>Password reset</Menu.Item>\n      </Menu.Group>\n      <Menu.Separator />\n      <Menu.Group>\n        <Menu.Label>Draft</Menu.Label>\n        <Menu.Item onSelect={() => {}}>New promo campaign</Menu.Item>\n        <Menu.Item onSelect={() => {}}>Account deactivation</Menu.Item>\n      </Menu.Group>\n    </Menu.Content>\n    </Menu>\n  </Toolbar.Trailing>\n</Toolbar>',
-          details: "Use Menu.Group and Menu.Label to organize related items into labeled sections."
+          code: '// Desktop\nconst [filter, setFilter] = useState("messages")\n\n<Menu>\n<Menu.Trigger>\n  <Button variant="ghost" color="primary"><Filter /> Filter <ChevronDownMd /></Button>\n</Menu.Trigger>\n<Menu.Content minWidth={220}>\n  <Menu.RadioGroup value={filter} onChange={setFilter}>\n    <Menu.RadioItem value="messages"><Chats /> Messages</Menu.RadioItem>\n    <Menu.RadioItem value="spam"><XSquare /> Spam</Menu.RadioItem>\n    <Menu.RadioItem value="deleted"><Trash /> Recently Deleted</Menu.RadioItem>\n  </Menu.RadioGroup>\n  <Menu.Separator />\n  <Menu.Group>\n    <Menu.Label>Filter By</Menu.Label>\n    <Menu.RadioGroup value={filter} onChange={setFilter}>\n      <Menu.RadioItem value="unread"><Chat /> Unread</Menu.RadioItem>\n      <Menu.RadioItem value="drafts"><ChatTripleDots /> Drafts</Menu.RadioItem>\n    </Menu.RadioGroup>\n  </Menu.Group>\n  <Menu.Separator />\n  <Menu.Item onSelect={() => {}}>Manage Filtering</Menu.Item>\n</Menu.Content>\n</Menu>\n\n// Phone: the More button of the top bar opens the menu\n<Toolbar titleStyle="large">\n  <Toolbar.Title>Grouped items</Toolbar.Title>\n  <Toolbar.Trailing>\n    <Menu>\n    <Menu.Trigger>\n        <Button color="secondary" variant="soft" uniform pill aria-label="More"><DotsHorizontal /></Button>\n      </Menu.Trigger>\n    <Menu.Content align="end">\n      <Menu.RadioGroup value={filter} onChange={setFilter}>\n        <Menu.RadioItem value="messages"><Chats /> Messages</Menu.RadioItem>\n        <Menu.RadioItem value="spam"><XSquare /> Spam</Menu.RadioItem>\n        <Menu.RadioItem value="deleted"><Trash /> Recently Deleted</Menu.RadioItem>\n      </Menu.RadioGroup>\n      <Menu.Separator />\n      <Menu.Group>\n        <Menu.Label>Filter By</Menu.Label>\n        <Menu.RadioGroup value={filter} onChange={setFilter}>\n          <Menu.RadioItem value="unread"><Chat /> Unread</Menu.RadioItem>\n          <Menu.RadioItem value="drafts"><ChatTripleDots /> Drafts</Menu.RadioItem>\n        </Menu.RadioGroup>\n      </Menu.Group>\n      <Menu.Separator />\n      <Menu.Item onSelect={() => {}}>Manage Filtering</Menu.Item>\n    </Menu.Content>\n    </Menu>\n  </Toolbar.Trailing>\n</Toolbar>',
+          details: "Use Menu.Group and Menu.Label to organize related items into labeled sections. The example is the filter of the message list, as Messages opens it on iOS: the mailboxes, a section labeled Filter By, and Manage Filtering under a separator. Both radio groups hold one value, so one checkmark marks the list shown. On a phone a section label and a row without an icon start after the checkmark column, where the icons of the other rows start, as in iOS menus."
         },
         {
           name: "Submenus",
@@ -4565,8 +4752,8 @@ return (
         },
         {
           name: "Checkbox items",
-          code: '// Desktop\nconst [settings, setSettings] = useState({\nshowGrid: true,\nshowLabels: false,\nenableShadows: false,\n})\n\nreturn (\n<Menu>\n  <Menu.Trigger>\n    <Button variant="ghost" color="primary">\n      Checkbox menu <ChevronDownMd />\n    </Button>\n  </Menu.Trigger>\n  <Menu.Content minWidth={200}>\n    <Menu.CheckboxItem\n      checked={settings.showGrid}\n      onCheckedChange={(checked) => setSettings((s) => ({ ...s, showGrid: checked }))}\n      onSelect={(evt) => evt.preventDefault()}\n      indicatorPosition="end"\n      indicatorVariant="solid"\n    >\n      Show grid lines\n    </Menu.CheckboxItem>\n    <Menu.CheckboxItem\n      checked={settings.showLabels}\n      onCheckedChange={(checked) => setSettings((s) => ({ ...s, showLabels: checked }))}\n      onSelect={(evt) => evt.preventDefault()}\n      indicatorPosition="end"\n      indicatorVariant="solid"\n    >\n      Display labels\n    </Menu.CheckboxItem>\n    <Menu.CheckboxItem\n      checked={settings.enableShadows}\n      onCheckedChange={(checked) => setSettings((s) => ({ ...s, enableShadows: checked }))}\n      onSelect={(evt) => evt.preventDefault()}\n      indicatorPosition="end"\n      indicatorVariant="solid"\n    >\n      Enable shadows\n    </Menu.CheckboxItem>\n  </Menu.Content>\n</Menu>\n)\n\n// Phone: the More button of the top bar opens the menu\n<Toolbar titleStyle="large">\n  <Toolbar.Title>Checkbox items</Toolbar.Title>\n  <Toolbar.Trailing>\n    <Menu>\n      <Menu.Trigger>\n        <Button color="secondary" variant="soft" uniform pill aria-label="More"><DotsHorizontal /></Button>\n      </Menu.Trigger>\n      <Menu.Content align="end">\n        <Menu.CheckboxItem\n          checked={settings.showGrid}\n          onCheckedChange={(checked) => setSettings((s) => ({ ...s, showGrid: checked }))}\n          onSelect={(evt) => evt.preventDefault()}\n          indicatorPosition="end"\n          indicatorVariant="solid"\n        >\n          Show grid lines\n        </Menu.CheckboxItem>\n        <Menu.CheckboxItem\n          checked={settings.showLabels}\n          onCheckedChange={(checked) => setSettings((s) => ({ ...s, showLabels: checked }))}\n          onSelect={(evt) => evt.preventDefault()}\n          indicatorPosition="end"\n          indicatorVariant="solid"\n        >\n          Display labels\n        </Menu.CheckboxItem>\n        <Menu.CheckboxItem\n          checked={settings.enableShadows}\n          onCheckedChange={(checked) => setSettings((s) => ({ ...s, enableShadows: checked }))}\n          onSelect={(evt) => evt.preventDefault()}\n          indicatorPosition="end"\n          indicatorVariant="solid"\n        >\n          Enable shadows\n        </Menu.CheckboxItem>\n      </Menu.Content>\n    </Menu>\n  </Toolbar.Trailing>\n</Toolbar>',
-          details: 'Use Menu.CheckboxItem with checked, onCheckedChange, and {"onSelect={(evt) => evt.preventDefault()}"} to keep the menu open. On a phone with touch.css the checkmark leads the row, as in iOS menus, whatever indicatorPosition and indicatorVariant say, so the phone view leaves out those controls.'
+          code: '// Desktop\nconst [view, setView] = useState({\ncategories: true,\npriority: true,\ncontactPhotos: false,\n})\n\nreturn (\n<Menu>\n  <Menu.Trigger>\n    <Button variant="ghost" color="primary">\n      View <ChevronDownMd />\n    </Button>\n  </Menu.Trigger>\n  <Menu.Content minWidth={220}>\n    <Menu.Label>View Options</Menu.Label>\n    <Menu.CheckboxItem\n      checked={view.categories}\n      onCheckedChange={(checked) => setView((v) => ({ ...v, categories: checked }))}\n      onSelect={(evt) => evt.preventDefault()}\n      indicatorPosition="end"\n      indicatorVariant="solid"\n    >\n      <Storyboard /> Show Categories\n    </Menu.CheckboxItem>\n    <Menu.CheckboxItem\n      checked={view.priority}\n      onCheckedChange={(checked) => setView((v) => ({ ...v, priority: checked }))}\n      onSelect={(evt) => evt.preventDefault()}\n      indicatorPosition="end"\n      indicatorVariant="solid"\n    >\n      <Atom /> Show Priority\n    </Menu.CheckboxItem>\n    <Menu.CheckboxItem\n      checked={view.contactPhotos}\n      onCheckedChange={(checked) => setView((v) => ({ ...v, contactPhotos: checked }))}\n      onSelect={(evt) => evt.preventDefault()}\n      indicatorPosition="end"\n      indicatorVariant="solid"\n    >\n      <AvatarProfile /> Show Contact Photos\n    </Menu.CheckboxItem>\n    <Menu.Separator />\n    <Menu.Item onSelect={() => {}}><InfoCircle /> About Categories</Menu.Item>\n  </Menu.Content>\n</Menu>\n)\n\n// Phone: the More button of the top bar opens the menu\n<Toolbar titleStyle="large">\n  <Toolbar.Title>Checkbox items</Toolbar.Title>\n  <Toolbar.Trailing>\n    <Menu>\n      <Menu.Trigger>\n        <Button color="secondary" variant="soft" uniform pill aria-label="More"><DotsHorizontal /></Button>\n      </Menu.Trigger>\n      <Menu.Content align="end">\n        <Menu.Label>View Options</Menu.Label>\n        <Menu.CheckboxItem\n          checked={view.categories}\n          onCheckedChange={(checked) => setView((v) => ({ ...v, categories: checked }))}\n          onSelect={(evt) => evt.preventDefault()}\n          indicatorPosition="end"\n          indicatorVariant="solid"\n        >\n          <Storyboard /> Show Categories\n        </Menu.CheckboxItem>\n        <Menu.CheckboxItem\n          checked={view.priority}\n          onCheckedChange={(checked) => setView((v) => ({ ...v, priority: checked }))}\n          onSelect={(evt) => evt.preventDefault()}\n          indicatorPosition="end"\n          indicatorVariant="solid"\n        >\n          <Atom /> Show Priority\n        </Menu.CheckboxItem>\n        <Menu.CheckboxItem\n          checked={view.contactPhotos}\n          onCheckedChange={(checked) => setView((v) => ({ ...v, contactPhotos: checked }))}\n          onSelect={(evt) => evt.preventDefault()}\n          indicatorPosition="end"\n          indicatorVariant="solid"\n        >\n          <AvatarProfile /> Show Contact Photos\n        </Menu.CheckboxItem>\n        <Menu.Separator />\n        <Menu.Item onSelect={() => {}}><InfoCircle /> About Categories</Menu.Item>\n      </Menu.Content>\n    </Menu>\n  </Toolbar.Trailing>\n</Toolbar>',
+          details: 'Use Menu.CheckboxItem with checked, onCheckedChange, and {"onSelect={(evt) => evt.preventDefault()}"} to keep the menu open. The example is the view options of a mailbox, as Mail opens them on iOS: three options that are each on or off, and About Categories under a separator. On a phone with touch.css the checkmark leads the row, as in iOS menus, whatever indicatorPosition and indicatorVariant say, so the phone view leaves out those controls. A row without a checkmark keeps its column, so every icon and label lines up, and a long label wraps under itself.'
         },
         {
           name: "Radio items",
@@ -4603,8 +4790,8 @@ return (
             {
               name: "width",
               type: 'number | "auto"',
-              default: '"auto"',
-              description: "Panel width in px"
+              default: "fits content, 250 on a phone",
+              description: 'Panel width in px. Without it the panel fits its content, or with touch.css on a phone is 250px, as an iOS menu; "auto" fits the content there too'
             },
             {
               name: "minWidth",
@@ -5043,7 +5230,7 @@ onChange={(index, { scrubbing }) => {
         {
           name: "Background",
           code: '<Page>\n<Page.Header background="hard">...</Page.Header>\n<Page.Content>...</Page.Content>\n<Page.Footer background="hard">\n  <Button color="primary" pill block>New order</Button>\n</Page.Footer>\n</Page>',
-          details: "background sets how the header and the footer meet the content scrolled under them on a phone, as a Toolbar does: soft (the default) fades the canvas color out under the bar, hard is an opaque bar with a line, glass a translucent, blurred bar with a hairline, and solid an opaque bar with no line. Hard and glass show themselves once content is under the bar; divider={false} keeps a header without its line."
+          details: "background sets how the header and the footer meet the content scrolled under them on a phone, as a Toolbar does: glass, the header's default, is a translucent, blurred bar with a hairline, soft, the footer's default, fades the canvas color out under a header and leaves the content clear under the footer's actions, as native iOS 26 does, hard is an opaque bar with a line, and solid an opaque bar with no line. Glass and hard show themselves once content is under the bar; divider={false} keeps a header without its line."
         }
       ],
       subComponents: [
@@ -5053,7 +5240,7 @@ onChange={(index, { scrubbing }) => {
             {
               name: "background",
               type: '"soft" | "hard" | "glass" | "solid"',
-              default: '"soft"',
+              default: '"glass"',
               description: "How the bar meets the content scrolled under it on a phone, see Background"
             },
             {
@@ -5096,6 +5283,62 @@ onChange={(index, { scrubbing }) => {
       ],
       docsUrl: "https://plexui.com/components/page"
     },
+    {
+      slug: "phone-layout",
+      name: "Phone Layout",
+      description: "Lays out the components inside it as on a phone at any window width, such as a phone frame on a desktop page, and keeps their dialogs inside its box.",
+      importPath: "@plexui/ui/components/PhoneLayout",
+      exports: [
+        "PhoneLayout"
+      ],
+      props: [
+        {
+          name: "className",
+          type: "string",
+          description: "Class on the box, such as its size and corners"
+        },
+        {
+          name: "style",
+          type: "CSSProperties",
+          description: "Style on the box"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: `const [open, setOpen] = useState(false)
+
+<PhoneLayout style={{ width: 375, height: 600, borderRadius: 40, border: '1px solid var(--color-border)' }}>
+<Dialog open={open} onOpenChange={setOpen}>
+  <Dialog.Trigger>
+    <Button color="primary">New list</Button>
+  </Dialog.Trigger>
+  <Dialog.Content mobileVariant="sheet">
+    <Dialog.Header>
+      <Dialog.Title>New list</Dialog.Title>
+    </Dialog.Header>
+    <Dialog.Body>
+      <Field label="Name">
+        <Input placeholder="Groceries" />
+      </Field>
+    </Dialog.Body>
+    <Dialog.Footer>
+      <Button color="primary" onClick={() => setOpen(false)}>Create</Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog>
+</PhoneLayout>`,
+          details: "The box is the screen of the phone: a Dialog opened inside it portals into the box and covers it instead of the window. Give the box a size; let a child of it scroll rather than the box, so a dialog stays in place."
+        }
+      ],
+      hooks: [
+        {
+          name: "usePhoneLayout",
+          description: '`usePhoneLayout()` returns whether components where it is called are laid out as on a phone: inside a PhoneLayout or a Dialog with `layout="phone"`, or in a window 767px wide or narrower. On the server it is false outside a PhoneLayout.'
+        }
+      ],
+      docsUrl: "https://plexui.com/components/phone-layout"
+    },
     {
       slug: "popover",
       name: "Popover",
@@ -7552,6 +7795,102 @@ export default function SliderExample() {
       ],
       docsUrl: "https://plexui.com/components/stepper"
     },
+    {
+      slug: "swipe-actions",
+      name: "Swipe Actions",
+      description: '"Actions behind a row of a list, as the swipe actions of an iOS list: a swipe across the row reveals them, a full swipe runs the first one, and each is a button for the keys."',
+      importPath: "@plexui/ui/components/SwipeActions",
+      exports: [
+        "SwipeActions"
+      ],
+      props: [
+        {
+          name: "leading",
+          type: "SwipeAction[]",
+          default: "[]",
+          description: "Actions revealed by a swipe toward the trailing edge, the first one at the leading edge"
+        },
+        {
+          name: "trailing",
+          type: "SwipeAction[]",
+          default: "[]",
+          description: "Actions revealed by a swipe toward the leading edge, the first one at the trailing edge"
+        },
+        {
+          name: "labelPlacement",
+          type: '"hidden" | "inside" | "below"',
+          default: '"hidden"',
+          description: "Where the actions show their labels: symbols only, inside the capsule, or below it (for rows of 68px and taller)"
+        },
+        {
+          name: "fullSwipe",
+          type: "boolean",
+          default: "true",
+          description: "A swipe past the middle between the open actions and the far edge runs the first action of that side"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "CSS classes applied to the row"
+        },
+        {
+          name: "children",
+          type: "ReactNode",
+          description: "The content of the row"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<FieldGroup>\n{lists.map((name) => (\n  <SwipeActions\n    key={name}\n    leading={[{ id: "pin", label: "Pin", Icon: Pin, color: "warning", onSelect: () => pin(name) }]}\n    trailing={[\n      { id: "delete", label: "Delete", Icon: RemoveTrash, color: "danger", onSelect: () => remove(name) },\n      { id: "archive", label: "Archive", Icon: Archive, color: "info", onSelect: () => archive(name) },\n    ]}\n  >\n    <div className="row">{name}</div>\n  </SwipeActions>\n))}\n</FieldGroup>',
+          details: "Wrap the content of a row of a FieldGroup: the swipe row is the data-row of the group, so its separators and corners follow the card. The actions are solid capsules behind the content, 10px apart and 16px from the edge, as in the iOS 27 kit; the first action of a side stands at its edge. Swiped aside, the content becomes a capsule of the row&apos;s color on the background of the list. A swipe past half of the actions opens them, a press on an action runs it and closes the row, and a press on the content or anywhere outside closes it too; one row is open at a time. A swipe past the middle between the open actions and the far edge stretches the first action across the row, and letting go runs it."
+        },
+        {
+          name: "Labels inside",
+          code: '<SwipeActions\nlabelPlacement="inside"\nleading={[{ id: "pin", label: "Pin", Icon: Pin, color: "warning", onSelect: () => pin(name) }]}\ntrailing={[\n  { id: "delete", label: "Delete", Icon: RemoveTrash, color: "danger", onSelect: () => remove(name) },\n  { id: "archive", label: "Archive", Icon: Archive, color: "info", onSelect: () => archive(name) },\n]}\n>\n<div className="row">{name}</div>\n</SwipeActions>',
+          details: "With labelPlacement=&quot;inside&quot; each capsule holds a smaller symbol and its label, as the kit&apos;s Symbol and Label row. An action without an icon always shows its label inside."
+        },
+        {
+          name: "Labels below",
+          code: '<SwipeActions\nlabelPlacement="below"\nleading={[{ id: "flag", label: "Flag", Icon: Flag, color: "warning", onSelect: () => flag(message) }]}\ntrailing={[\n  { id: "delete", label: "Delete", Icon: RemoveTrash, color: "danger", onSelect: () => remove(message) },\n  { id: "archive", label: "Archive", Icon: Archive, color: "info", onSelect: () => archive(message) },\n]}\n>\n<div className="row">\n  <div>{message.from}</div>\n  <div>{message.subject}</div>\n</div>\n</SwipeActions>',
+          details: "With labelPlacement=&quot;below&quot; a lower capsule stands over its label, as the kit&apos;s Symbol and Label Tall row. It takes a row of 68px or taller, such as a row of two lines."
+        }
+      ],
+      subComponents: [
+        {
+          name: "SwipeAction",
+          props: [
+            {
+              name: "id",
+              type: "string",
+              description: "Unique ID of the action within its side"
+            },
+            {
+              name: "label",
+              type: "string",
+              description: "Name of the action: shown inside or below the capsule (and on an action without an icon), and its accessible name always"
+            },
+            {
+              name: "Icon",
+              type: "ComponentType<SVGProps<SVGSVGElement>>",
+              description: "Icon of the action"
+            },
+            {
+              name: "color",
+              type: '"primary" | "secondary" | "danger" | "success" | "info" | "discovery" | "caution" | "warning"',
+              default: '"secondary"',
+              description: "Solid color of the action"
+            },
+            {
+              name: "onSelect",
+              type: "() => void",
+              description: "Called when the action is pressed, or by a full swipe when it is the first action of its side"
+            }
+          ]
+        }
+      ],
+      docsUrl: "https://plexui.com/components/swipe-actions"
+    },
     {
       slug: "switch",
       name: "Switch",
@@ -7668,7 +8007,7 @@ export default function SliderExample() {
     {
       slug: "tab-bar",
       name: "Tab Bar",
-      description: '"The tab bar of a phone screen: two to five sections at the bottom in a floating glass capsule, an optional search tab, minimizing while the content scrolls. Desktop layouts navigate with a Sidebar or Tabs, so a tab bar never renders from 768px up."',
+      description: '"The tab bar of a phone screen: two to five sections at the bottom in a floating glass capsule, an optional search or prominent tab, minimizing while the content scrolls. Desktop layouts navigate with a Sidebar or Tabs, so a tab bar never renders from 768px up."',
       importPath: "@plexui/ui/components/TabBar",
       exports: [
         "TabBar"
@@ -7694,6 +8033,11 @@ export default function SliderExample() {
           type: "{ value: string; label?: string }",
           description: "A search tab in a glass circle of its own at the trailing end; label defaults to Search"
         },
+        {
+          name: "prominent",
+          type: "{ value: string; label: string; icon: ReactNode }",
+          description: "A prominent tab in a glass circle of its own at the trailing end, in place of the search circle; search then joins the capsule"
+        },
         {
           name: "minimizeBehavior",
           type: '"never" | "onScrollDown"',
@@ -7762,17 +8106,30 @@ export default function SliderExample() {
 </TabBar>`,
           details: "With search the search tab takes a glass circle of its own at the trailing end, as the iOS 26 search tab does. The capsule of the other tabs keeps to the leading end at their width, as in the kit and in Photos: with two tabs it ends well before the circle, with three it reaches 8px from it. It is a tab like the others: show the search screen when its value is selected."
         },
+        {
+          name: "Prominent tab",
+          code: `<TabBar
+value={tab}
+onValueChange={setTab}
+prominent={{ value: 'bag', label: 'Bag', icon: <ShoppingBag /> }}
+>
+<TabBar.Item value="home" label="Home" icon={<Home />} />
+<TabBar.Item value="calendar" label="Calendar" icon={<Calendar />} />
+<TabBar.Item value="photos" label="Photos" icon={<Images />} />
+</TabBar>`,
+          details: "With prominent one destination leaves the capsule for a glass circle of its own at the trailing end, as the prominent tab of iOS 27 and its kit: one key destination, such as a cart or a library. It is still a tab, not an action: it shows a screen of its own when selected. A bar has one such circle, so prominent takes the place of the search circle; with both, search becomes the last tab of the capsule. The circle shows the symbol only, and label names the tab."
+        },
         {
           name: "Minimize on scroll",
           code: `<TabBar value={tab} onValueChange={setTab} search={{ value: 'search' }} minimizeBehavior="onScrollDown">
 ...
 </TabBar>`,
-          details: 'With minimizeBehavior="onScrollDown" the bar shrinks to the selected tab while the content scrolls down and comes back when it scrolls up, as in iOS 26. Tap the minimized tab to bring the others back.'
+          details: 'With minimizeBehavior="onScrollDown" the bar shrinks to the selected tab while the content scrolls down and comes back when it scrolls up, as in iOS 26. Minimized, the circles keep 28px from the sides and at least 28px from the bottom, as in the iOS 27 kit. Tap the minimized tab to bring the others back.'
         },
         {
           name: "Background",
           code: '<Page surface="grouped">\n<Toolbar background="hard">...</Toolbar>\n<Page.Content>...</Page.Content>\n<TabBar value={tab} onValueChange={setTab} background="hard">\n  ...\n</TabBar>\n</Page>',
-          details: "background sets how the bar meets the content scrolled under it, as a Toolbar does: soft (the default) fades the canvas color in under the capsule, hard is an opaque band with a line on top, glass a translucent, blurred band with a hairline, and solid an opaque band with no line. Hard and glass show themselves while the content continues under the bar."
+          details: "background sets how the bar meets the content scrolled under it, as a Toolbar does: soft (the default) leaves the content clear under and around the capsule, as native iOS 26 does, glass is a translucent, blurred band with a hairline, hard is an opaque band with a line on top, and solid an opaque band with no line. Glass and hard show themselves while the content continues under the bar."
         }
       ],
       subComponents: [
@@ -8204,7 +8561,7 @@ export default function SliderExample() {
         {
           name: "Overview",
           code: 'const [tab, setTab] = useState("overview")\nconst [disabled, setDisabled] = useState(false)\nconst [reportsDisabled, setReportsDisabled] = useState(false)\n\nreturn (\n<Tabs value={tab} onChange={setTab} disabled={disabled} aria-label="Demo tabs">\n  <Tabs.Tab value="overview">Overview</Tabs.Tab>\n  <Tabs.Tab value="analytics">Analytics</Tabs.Tab>\n  <Tabs.Tab value="reports" disabled={reportsDisabled}>Reports</Tabs.Tab>\n  <Tabs.Tab value="settings">Settings</Tabs.Tab>\n</Tabs>\n)',
-          details: "Tabs provides two visual variants: segmented (default) with a sliding background highlight, and underline with an animated line indicator. Both support horizontal and vertical orientations. disabled affects the whole group; reportsDisabled disables only Reports. Arrow-key navigation skips disabled tabs without resetting the selected value. On a phone horizontal tabs of either variant are the iOS segmented control on glass, as toolbar buttons are: segments of one width in a 44px capsule, the selection a darker pill inside it with the primary label and the other labels secondary, filling the row of a phone screen; vertical tabs are an inset grouped list. So the phone view has no variant, flush, block, size and pill controls."
+          details: "Tabs provides two visual variants: segmented (default) with a sliding background highlight, and underline with an animated line indicator. Both support horizontal and vertical orientations. disabled affects the whole group, which on a phone shows at half opacity when horizontal, as a disabled iOS segmented control does; reportsDisabled disables only Reports. Arrow-key navigation skips disabled tabs without resetting the selected value. On a phone horizontal tabs of either variant are the iOS segmented control on glass, as toolbar buttons are: segments of one width in a 44px capsule, the selection a darker pill inside it with the primary label and the other labels secondary, filling the row of a phone screen; vertical tabs are an inset grouped list. So the phone view has no variant, flush, block, size and pill controls."
         },
         {
           name: "Segmented with icons",
@@ -8698,6 +9055,144 @@ return (
       ],
       docsUrl: "https://plexui.com/components/textarea"
     },
+    {
+      slug: "tip",
+      name: "Tip",
+      description: "A short message that points out a feature people might miss, inside the page or anchored to a control, as TipKit tips do.",
+      importPath: "@plexui/ui/components/Tip",
+      exports: [
+        "Tip"
+      ],
+      props: [
+        {
+          name: "title",
+          type: "ReactNode",
+          description: "The tip's title: what the feature is"
+        },
+        {
+          name: "description",
+          type: "ReactNode",
+          description: "One or two sentences on how to use it"
+        },
+        {
+          name: "icon",
+          type: "ReactNode",
+          description: "A symbol or image that leads the message"
+        },
+        {
+          name: "actions",
+          type: "ReactNode",
+          description: "Buttons for the tip's actions, side by side below the message"
+        },
+        {
+          name: "mobileActions",
+          type: '"rows" | "buttons"',
+          default: '"rows"',
+          description: "How the actions show at 767px and below: rows of text under a separator, or the buttons as given, each a full-width capsule"
+        },
+        {
+          name: "onClose",
+          type: "() => void",
+          description: "Shows the Close button; called when it is clicked"
+        },
+        {
+          name: "arrowEdge",
+          type: '"top" | "bottom" | "left" | "right"',
+          description: "Draws an arrow at this edge, pointing at what the tip explains"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "CSS classes applied to the tip"
+        },
+        {
+          name: "ref",
+          type: "Ref<HTMLDivElement>",
+          description: "Ref applied to the tip"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: 'const [shown, setShown] = useState(true)\n\n{shown && (\n<Tip\n  icon={<Bookmark />}\n  title="Save it for later"\n  description="Bookmarked articles wait in your reading list, ready offline on every device."\n  onClose={() => setShown(false)}\n/>\n)}',
+          details: "An inline tip takes its place in the layout. A symbol leads the message in the secondary color; onClose shows Close in the trailing corner. On a phone the tip is the opaque card of a grouped list, so place it on a grouped background."
+        },
+        {
+          name: "Actions",
+          code: '<Tip\nicon={<Bell />}\ntitle="Turn on notifications"\ndescription="Get a message when someone replies to your post or mentions you."\nactions={\n  <>\n    <Button color="primary" variant="soft" size="sm" pill>Not now</Button>\n    <Button color="primary" size="sm" pill>Turn on</Button>\n  </>\n}\n/>',
+          details: "Actions sit side by side below the message, each as wide as the others. Use small pill buttons, as the kit does. On a phone each action is a row of text in its color under a separator, one under another, starting under the text, as iOS cards show them."
+        },
+        {
+          name: "Buttons on a phone",
+          code: '<Tip\nicon={<Bell />}\ntitle="Get alerts"\ndescription="Hear about severe weather where you are, even when the app is closed."\nmobileActions="buttons"\nactions={<Button color="primary" variant="soft" size="sm" pill>Turn on</Button>}\n/>',
+          details: 'With mobileActions="buttons" the actions keep their buttons on a phone: each is a capsule as wide as the tip under the message, 48px tall with a 17px label, in its own color and variant, as the iOS card in Settings that opens the Support app shows. Use it for a card that asks for a permission, with one soft primary button.'
+        },
+        {
+          name: "Arrow",
+          code: '<Button color="secondary" variant="soft" uniform pill aria-label="Filter">\n<Filter />\n</Button>\n<Tip\narrowEdge="top"\ntitle="Filter the list"\ndescription="Show only the items from the last week, month or year."\n/>',
+          details: "With arrowEdge an inline tip points at what it explains with the kit's arrow, centered on that edge. The tip leaves room for the arrow on that side."
+        },
+        {
+          name: "Popover",
+          code: 'const [open, setOpen] = useState(false)\n\n<Tip.Popover\nopen={open}\nonOpenChange={setOpen}\ntitle="Filter the list"\ndescription="Show only the items from the last week, month or year."\n>\n<Button color="secondary" variant="soft" onClick={() => setOpen(!open)}>\n  <Filter />\n  Filter\n</Button>\n</Tip.Popover>',
+          details: "A popover tip floats next to its control with an arrow that points at it. The control stays usable and keeps the focus. Close, Escape or a press outside the tip and its control closes it, through onOpenChange. Show it when the control appears; here the button shows it."
+        }
+      ],
+      subComponents: [
+        {
+          name: "Tip.Popover",
+          description: "Takes title, description, icon, actions and mobileActions as Tip does, and the control it explains as its only child.",
+          props: [
+            {
+              name: "open",
+              type: "boolean",
+              description: "Shows the tip (controlled)"
+            },
+            {
+              name: "defaultOpen",
+              type: "boolean",
+              default: "false",
+              description: "Shows the tip at first (uncontrolled)"
+            },
+            {
+              name: "onOpenChange",
+              type: "(open: boolean) => void",
+              description: "Called when the tip opens or closes"
+            },
+            {
+              name: "side",
+              type: '"top" | "right" | "bottom" | "left"',
+              default: '"bottom"',
+              description: "The side of the control the tip shows on, turned when it does not fit"
+            },
+            {
+              name: "align",
+              type: '"start" | "center" | "end"',
+              default: '"center"',
+              description: "The alignment against the control"
+            },
+            {
+              name: "sideOffset",
+              type: "number",
+              default: "4",
+              description: "The distance from the control to the arrow's point, in pixels"
+            },
+            {
+              name: "closeButton",
+              type: "boolean",
+              default: "true",
+              description: "Shows the Close button"
+            },
+            {
+              name: "className",
+              type: "string",
+              description: "CSS classes applied to the popover around the tip and its arrow"
+            }
+          ]
+        }
+      ],
+      docsUrl: "https://plexui.com/components/tip"
+    },
     {
       slug: "toast",
       name: "Toast",
@@ -8711,7 +9206,7 @@ return (
         {
           name: "Overview",
           code: 'toast("Inquiry ID copied")',
-          details: "On a phone a toast takes the corners, padding and text of an iOS notification banner, the system's own message at the top of the screen: 24px corners and 15pt text, with its buttons drawn as a medium phone Button, a 34px capsule in a 44px target. It stays a message of the page, with its own width and opaque surface."
+          details: "On a phone a toast takes the corners, padding and text of an iOS notification banner, the system's own message at the top of the screen: 24px corners and 15pt text, with its buttons drawn as a medium phone Button, a 34px capsule in a 44px target. Under 600px it fills the width between 14px gutters past the safe area, as notifications do on an iOS phone; a compact toast keeps its own width. It stays a message of the page, with an opaque surface."
         },
         {
           name: "Variants",
@@ -8738,12 +9233,12 @@ return (
         {
           name: "Compact",
           code: 'import { toast, compact } from "@plexui/ui/components/Toast"\n\ntoast.success("Inquiry ID copied", compact)',
-          details: "Spread compact into any toast(...) options for a centered-text layout. Toast width shrinks to content by default regardless; the compact helper only adds center alignment for short status messages."
+          details: "Spread compact into any toast(...) options for a centered-text layout. On a desktop a toast shrinks to its content anyway; on a phone, where a toast fills the width, a compact one keeps the width of its content. Both center its text."
         },
         {
           name: "Persistent",
           code: 'const id = toast("Backup scheduled for 2:00 AM UTC", {\ndescription: "This stays open until you dismiss it.",\nduration: Infinity,\naction: { label: "Dismiss", onClick: () => toast.dismiss(id) },\n})',
-          details: "Pass duration: Infinity for toasts that stay open until the user acts on them. There are no close (\xD7) affordances, so put a labelled action on the toast so dismissal is intentional and keyboard-accessible."
+          details: "Pass duration: Infinity for toasts that stay open until the user acts on them. There are no close (\xD7) affordances, so put a labelled action on the toast so dismissal is intentional and keyboard-accessible. An error that waits like this is an alert (see Screen readers)."
         }
       ],
       subComponents: [
@@ -8765,13 +9260,14 @@ return (
             {
               name: "offset",
               type: "string | number | { top?; right?; bottom?; left? }",
-              description: "Distance from the viewport edge"
+              default: "32px",
+              description: "Distance from the viewport edge. Without a top or bottom edge here, the page's --toast-offset-top or --toast-offset-bottom sets it."
             },
             {
               name: "mobileOffset",
               type: "string | number | { top?; right?; bottom?; left? }",
-              default: "16px + safe area per edge",
-              description: "Mobile viewport gutter. Explicit edges override their safe defaults; omitted edges keep them."
+              default: "16px top and bottom, 14px at the sides, past the safe area",
+              description: "Gutter under 600px, where a toast fills the width between the side gutters. Explicit edges override their defaults; omitted edges keep them, and the page's --toast-mobile-offset-top or --toast-mobile-offset-bottom sets the top or bottom one."
             },
             {
               name: "gap",
@@ -8813,7 +9309,7 @@ return (
         {
           name: "background",
           type: '"soft" | "hard" | "glass" | "solid"',
-          default: '"soft"',
+          default: '"glass" at the top, "soft" at the bottom',
           description: 'How the bar meets the content scrolled under it, see Background. "edge" is the earlier name of "soft"'
         },
         {
@@ -8837,22 +9333,22 @@ return (
         {
           name: "Group",
           code: '<Toolbar>\n<Toolbar.Leading>\n  <NavigationButton action="close" />\n</Toolbar.Leading>\n<Toolbar.Trailing>\n  <Button color="secondary" variant="soft" uniform pill aria-label="Details"><InfoCircle /></Button>\n  <Toolbar.Group aria-label="Order actions">\n    <Button color="secondary" variant="soft" uniform pill aria-label="Translate"><Translate /></Button>\n    <Button color="secondary" variant="soft" uniform pill aria-label="More"><DotsHorizontal /></Button>\n  </Toolbar.Group>\n</Toolbar.Trailing>\n</Toolbar>',
-          details: "Toolbar.Group puts related actions in one capsule. A single action keeps a capsule of its own. Name each icon button with aria-label."
+          details: "Toolbar.Group puts related actions in one capsule. A single action keeps a capsule of its own. A ButtonGroup in a toolbar is the same capsule. Name each icon button with aria-label."
         },
         {
           name: "Search",
-          code: '<Toolbar>\n<Toolbar.Content fill>\n  <Input variant="soft" pill placeholder="Search" aria-label="Search orders" startAdornment={<Search />} />\n</Toolbar.Content>\n<Toolbar.Trailing>\n  <NavigationButton action="close" aria-label="Close search" />\n</Toolbar.Trailing>\n</Toolbar>',
+          code: '<Toolbar>\n<Toolbar.Content fill>\n  <Input variant="soft" pill placeholder="Search" aria-label="Search orders" startAdornment={<SearchSm />} />\n</Toolbar.Content>\n<Toolbar.Trailing>\n  <NavigationButton action="close" aria-label="Close search" />\n</Toolbar.Trailing>\n</Toolbar>',
           details: "Toolbar.Content fill stretches a search field between the leading and trailing items. The field takes the row height and the material of the bar buttons."
         },
         {
           name: "Bottom",
-          code: '<Page surface="grouped">\n<Toolbar>\n  <Toolbar.Title>Orders</Toolbar.Title>\n</Toolbar>\n<Page.Content>...</Page.Content>\n<Toolbar placement="bottom">\n  <Toolbar.Leading>\n    <Button color="secondary" variant="soft" uniform pill aria-label="Filter"><Filter /></Button>\n  </Toolbar.Leading>\n  <Toolbar.Content>\n    <Button color="primary" pill>New order</Button>\n  </Toolbar.Content>\n  <Toolbar.Trailing>\n    <Button color="secondary" variant="soft" uniform pill aria-label="Search"><Search /></Button>\n  </Toolbar.Trailing>\n</Toolbar>\n</Page>\n\n<Toolbar placement="bottom">\n<Toolbar.Content fill>\n  <Button color="primary" pill block><Plus /> New order</Button>\n</Toolbar.Content>\n</Toolbar>',
-          details: `placement="bottom" sets the bar at the bottom of the page with 48px targets and the device's bottom safe area. Toolbar.Content centers a main action; with fill a search field or a single action takes the whole row. The page content scrolls under both bars.`
+          code: '<Page surface="grouped">\n<Toolbar>\n  <Toolbar.Title>Orders</Toolbar.Title>\n</Toolbar>\n<Page.Content>...</Page.Content>\n<Toolbar placement="bottom">\n  <Toolbar.Leading>\n    <Button color="secondary" variant="soft" uniform pill aria-label="Filter"><Filter /></Button>\n  </Toolbar.Leading>\n  <Toolbar.Content>\n    <Button color="primary" pill>New order</Button>\n  </Toolbar.Content>\n  <Toolbar.Trailing>\n    <Button color="secondary" variant="soft" uniform pill aria-label="Search"><Search /></Button>\n  </Toolbar.Trailing>\n</Toolbar>\n</Page>\n\n<Toolbar placement="bottom">\n<Toolbar.Content fill>\n  <Input variant="soft" pill placeholder="Search" aria-label="Search orders" startAdornment={<SearchSm />} />\n</Toolbar.Content>\n<Toolbar.Trailing>\n  <Button color="secondary" variant="soft" uniform pill iconSize="sm" aria-label="New order"><PlusLg /></Button>\n</Toolbar.Trailing>\n</Toolbar>\n\n<Toolbar placement="bottom">\n<Toolbar.Content fill>\n  <Button color="primary" pill block><Plus /> New order</Button>\n</Toolbar.Content>\n</Toolbar>',
+          details: `placement="bottom" sets the bar at the bottom of the page with 48px targets and the device's bottom safe area. Toolbar.Content centers a main action; with fill a search field or a single action takes the whole row. The 48px items stand 28px from the sides and above the home indicator, 12px apart, and a bottom bar draws no band: the content runs under and around its glass, as in iOS 26 Mail and Contacts. A search field holds SearchSm, set in Regular; a plus next to it takes iconSize="sm", as Contacts draws it smaller than the other symbols. The page content scrolls under both bars.`
         },
         {
           name: "Background",
           code: '<Page surface="grouped">\n<Toolbar background="hard">\n  <Toolbar.Leading>\n    <NavigationButton action="back" />\n  </Toolbar.Leading>\n  <Toolbar.Title>Orders</Toolbar.Title>\n</Toolbar>\n<Page.Content>...</Page.Content>\n<Toolbar placement="bottom" background="hard">\n  <Toolbar.Content>\n    <Button color="primary" pill>New order</Button>\n  </Toolbar.Content>\n</Toolbar>\n</Page>',
-          details: "background sets how a bar meets the content scrolled under it, after the scroll edge effect of iOS 26. soft, the default, covers the content under the controls with the canvas color and fades it out past them over a light blur, with no line. hard is an opaque bar of the canvas color with a line. glass is a translucent, blurred bar with a hairline. solid is an opaque bar with no line. Hard and glass show themselves once content is under the bar: under the top bar after the content has scrolled, over the bottom bar while it continues below. Page.Header, Page.Footer, the bars of a Sheet and TabBar take the same values."
+          details: "background sets how a bar meets the content scrolled under it. glass, the default of a top bar, is a translucent, blurred bar with a hairline. soft, the default of a bottom bar, is the scroll edge effect of iOS 26 and draws no line: a top bar with a title covers the content under its controls with the canvas color and fades it out past them over a light blur, while a top bar of controls alone on a page covers only the status bar, and a bottom bar on a page leaves the content clear under and around its controls, as native iOS 26 does (Contacts, Notes, Mail); each glass control stands out by itself. A Sheet's bottom bar fades its content into the panel. hard is an opaque bar of the canvas color with a line. solid is an opaque bar with no line. Glass and hard show themselves once content is under the bar: under the top bar after the content has scrolled, over the bottom bar while it continues below. Page.Header, Page.Footer, the bars of a Sheet and TabBar take the same values."
         },
         {
           name: "Disabled",
@@ -8999,7 +9495,7 @@ return (
       docsUrl: "https://plexui.com/components/tooltip"
     }
   ],
-  generatedAt: "2026-11-08T18:56:38.218Z"
+  generatedAt: "2026-11-09T09:41:06.946Z"
 };
 
 // src/data/manifest-vue.json
@@ -9041,7 +9537,7 @@ var manifest_vue_default = {
     "outline",
     "ghost"
   ],
-  componentCount: 58,
+  componentCount: 62,
   components: [
     {
       slug: "accordion",
@@ -10127,6 +10623,11 @@ const label = (variant: string) => variant.charAt(0).toUpperCase() + variant.sli
           default: '"horizontal"',
           description: "Direction of the joined items"
         },
+        {
+          name: "mobile-material",
+          type: '"glass" | "flat"',
+          description: 'Phone surface with touch.css: "glass" makes the group one glass capsule outside a Toolbar, "flat" keeps the joined buttons in one'
+        },
         {
           name: "class",
           type: "string",
@@ -10136,12 +10637,13 @@ const label = (variant: string) => variant.charAt(0).toUpperCase() + variant.sli
       examples: [
         {
           name: "Overview",
-          code: '<ButtonGroup>\n  <ButtonGroup>\n    <Button variant="outline" color="secondary" :size="size" uniform aria-label="Go back">\n      <ArrowLeftSm />\n    </Button>\n  </ButtonGroup>\n  <ButtonGroup>\n    <Button variant="outline" color="secondary" :size="size">Pin</Button>\n    <Button variant="outline" color="secondary" :size="size">Tag</Button>\n  </ButtonGroup>\n  <ButtonGroup>\n    <Button variant="outline" color="secondary" :size="size">Bookmark</Button>\n    <Button variant="outline" color="secondary" :size="size" uniform aria-label="More options">\n      <DotsHorizontal />\n    </Button>\n  </ButtonGroup>\n</ButtonGroup>'
+          code: '<!-- Desktop -->\n<ButtonGroup>\n  <ButtonGroup>\n    <Button variant="outline" color="secondary" :size="size" uniform aria-label="Go back">\n      <ArrowLeftSm />\n    </Button>\n  </ButtonGroup>\n  <ButtonGroup>\n    <Button variant="outline" color="secondary" :size="size">Pin</Button>\n    <Button variant="outline" color="secondary" :size="size">Tag</Button>\n  </ButtonGroup>\n  <ButtonGroup>\n    <Button variant="outline" color="secondary" :size="size">Bookmark</Button>\n    <Button variant="outline" color="secondary" :size="size" uniform aria-label="More options">\n      <DotsHorizontal />\n    </Button>\n  </ButtonGroup>\n</ButtonGroup>\n\n<!-- Phone: the bars of a note -->\n<Page>\n  <Toolbar>\n    <ToolbarLeading>\n      <NavigationButton action="back" />\n    </ToolbarLeading>\n    <ToolbarTrailing>\n      <ButtonGroup aria-label="Note actions">\n        <Button color="secondary" variant="soft" uniform pill aria-label="Pin"><Pin /></Button>\n        <Button color="secondary" variant="soft" uniform pill aria-label="Tag"><Tag /></Button>\n        <Button color="secondary" variant="soft" uniform pill aria-label="More"><DotsHorizontal /></Button>\n      </ButtonGroup>\n    </ToolbarTrailing>\n  </Toolbar>\n  <PageContent>\n    <div class="flex flex-col gap-3 text-[17px] leading-[22px]">\n      <p class="text-[28px] leading-[34px] font-semibold">Weekend trip</p>\n      \u2026\n    </div>\n  </PageContent>\n  <Toolbar placement="bottom">\n    <ToolbarLeading>\n      <ButtonGroup aria-label="Editing tools">\n        <Button color="secondary" variant="soft" uniform pill aria-label="Checklist"><NotebookCheck /></Button>\n        <Button color="secondary" variant="soft" uniform pill aria-label="Attach"><Clip /></Button>\n        <Button color="secondary" variant="soft" uniform pill aria-label="Markup"><Pens /></Button>\n      </ButtonGroup>\n    </ToolbarLeading>\n    <ToolbarTrailing>\n      <Button color="secondary" variant="soft" uniform pill aria-label="New note"><PencilSquare /></Button>\n    </ToolbarTrailing>\n  </Toolbar>\n</Page>',
+          details: "On a phone the example is the bars of a note, as in iOS Notes: Back alone, the note's actions in one glass capsule on top, the editing tools in one at the bottom beside New Note. A ButtonGroup in a Toolbar is that capsule, the Button Group of the iOS 27 kit: 44px buttons 12px apart in a 160px capsule on top, 48px ones 6px apart in a 164px capsule at the bottom, the symbols in the primary label color. Groups side by side stand apart as the bar's items do."
         },
         {
           name: "Orientation",
-          code: '<ButtonGroup orientation="vertical" aria-label="Zoom controls">\n  <Button variant="outline" color="secondary" :size="size" uniform aria-label="Zoom in">\n    <PlusSm />\n  </Button>\n  <Button variant="outline" color="secondary" :size="size" uniform aria-label="Zoom out">\n    <Minus />\n  </Button>\n</ButtonGroup>',
-          details: 'Pass orientation="vertical" to stack the buttons, useful for + / \u2212 steppers, zoom controls, or any vertical toolbar. On a phone with touch.css a group of icon-only buttons keeps their 44px at each size shown, so the phone view leaves out the size control.'
+          code: '<!-- Desktop -->\n<ButtonGroup orientation="vertical" aria-label="Zoom controls">\n  <Button variant="outline" color="secondary" :size="size" uniform aria-label="Zoom in">\n    <PlusSm />\n  </Button>\n  <Button variant="outline" color="secondary" :size="size" uniform aria-label="Zoom out">\n    <Minus />\n  </Button>\n</ButtonGroup>\n\n<!-- Phone: zoom controls over a canvas -->\n<ButtonGroup orientation="vertical" mobile-material="glass" aria-label="Zoom controls" class="absolute top-2 right-4">\n  <Button color="secondary" variant="soft" uniform pill aria-label="Zoom in"><Plus /></Button>\n  <Button color="secondary" variant="soft" uniform pill aria-label="Zoom out"><Minus /></Button>\n</ButtonGroup>',
+          details: 'Pass orientation="vertical" to stack the buttons, useful for + / \u2212 steppers, zoom controls, or any vertical toolbar. On a phone the example is zoom controls floating over a canvas, as map controls do: with mobile-material="glass" the group is the vertical Button Group of the iOS 27 kit, a 48px wide capsule of 48px buttons 6px apart. In the content a group of icon-only buttons keeps their 44px at each size, so the phone view leaves out the size control.'
         },
         {
           name: "Size",
@@ -10156,7 +10658,7 @@ const label = (variant: string) => variant.charAt(0).toUpperCase() + variant.sli
         {
           name: "Separator",
           code: '<ButtonGroup>\n  <Button variant="soft" color="secondary" :size="size"><Undo /> Undo</Button>\n  <ButtonGroupSeparator />\n  <Button variant="soft" color="secondary" :size="size">Redo <Redo /></Button>\n</ButtonGroup>',
-          details: 'Drop a ButtonGroupSeparator between items to add a visible divider, commonly used for Undo / Redo pairs or any "two related actions" toolbar.'
+          details: 'Drop a ButtonGroupSeparator between items to add a visible divider, commonly used for Undo / Redo pairs or any "two related actions" toolbar. A glass group on a phone draws no line, as the capsule of iOS has none.'
         },
         {
           name: "Split",
@@ -11170,7 +11672,7 @@ const color = ref('#be38f3')
         {
           name: "Overview",
           code: '<ContextMenu>\n  <ContextMenuTrigger>\n    <div tabindex="0">Groceries</div>\n  </ContextMenuTrigger>\n  <ContextMenuContent>\n    <MenuItem @select="copy"><Copy /> Copy</MenuItem>\n    <MenuItem @select="share"><Share /> Share</MenuItem>\n    <MenuItem @select="pin"><Pin /> Pin</MenuItem>\n    <MenuSeparator />\n    <MenuItem danger @select="remove"><RemoveTrash /> Delete</MenuItem>\n  </ContextMenuContent>\n</ContextMenu>',
-          details: "Wrap the element in ContextMenuTrigger: it keeps its own role and focus. On a touch screen, hold for half a second: the element stays clear above the dimmed, blurred page and the menu opens 18px below it, at the edge on the side of the touch. The press that opened the menu does not activate the element. On a phone the rows sit on the grouped background of an iOS list."
+          details: "Wrap the element in ContextMenuTrigger: it keeps its own role and focus. On a touch screen, hold for half a second: the element stays clear above the dimmed, blurred page and the menu opens 16px below it, as in the iOS 27 kit, at the edge on the side of the touch. The press that opened the menu does not activate the element. On a phone the rows sit on the grouped background of an iOS list."
         },
         {
           name: "Rounded elements",
@@ -12016,7 +12518,7 @@ const disabled = ref(false);
         },
         {
           name: "Text field",
-          code: `<Dialog v-model:open="open" @update:open="(next) => { if (next) name = 'New folder' }">
+          code: `<Dialog v-model:open="open" @update:open="(next) => { if (next) folderName = 'New folder' }">
   <DialogTrigger>
     <Button color="secondary" variant="outline">New folder</Button>
   </DialogTrigger>
@@ -12026,13 +12528,13 @@ const disabled = ref(false);
       <DialogDescription>Enter a name for this folder.</DialogDescription>
     </DialogHeader>
     <DialogBody>
-      <Input ref="field" v-model="name" aria-label="Folder name" variant="soft" size="3xl" pill @clear="name = ''" />
+      <Input ref="field" v-model:value="folderName" aria-label="Folder name" variant="soft" size="3xl" pill @clear="folderName = ''" />
     </DialogBody>
     <DialogFooter>
       <DialogClose>
         <Button color="primary" variant="soft">Cancel</Button>
       </DialogClose>
-      <Button color="primary" :disabled="!name.trim()" @click="open = false">Create</Button>
+      <Button color="primary" :disabled="!folderName.trim()" @click="open = false">Create</Button>
     </DialogFooter>
   </DialogContent>
 </Dialog>`,
@@ -12164,7 +12666,7 @@ const rows = [
         {
           name: "Scrolling body",
           code: '<Dialog v-model:open="open">\n  <DialogTrigger>\n    <Button color="secondary" variant="outline">Review terms</Button>\n  </DialogTrigger>\n  <DialogContent mobile-variant="sheet" @open-auto-focus="$event.preventDefault(); $refs.heading.focus({ preventScroll: true })">\n    <DialogHeader>\n      <div ref="heading" tabindex="-1" class="outline-none"><DialogTitle>Terms of service</DialogTitle></div>\n    </DialogHeader>\n    <DialogBody>\n      <div class="flex flex-col gap-4 text-sm text-secondary max-md:text-[length:var(--dialog-mobile-type-size)] max-md:leading-[var(--dialog-mobile-type-leading)]">\n        <p v-for="(term, index) in [...terms, ...terms]" :key="index">{{ term }}</p>\n      </div>\n    </DialogBody>\n    <DialogFooter>\n      <DialogClose>\n        <Button color="secondary" variant="soft">Decline</Button>\n      </DialogClose>\n      <Button color="primary" @click="open = false">Accept</Button>\n    </DialogFooter>\n  </DialogContent>\n</Dialog>',
-          details: "Put long content in DialogBody: only the body scrolls, while the header and footer stay in view. Without it the whole panel scrolls. On a phone, background on DialogHeader and DialogFooter sets how the Sheet's bars meet the body scrolled under them, as a Toolbar's do: soft by default, or hard, glass or solid."
+          details: "Put long content in DialogBody: only the body scrolls, while the header and footer stay in view. Without it the whole panel scrolls. On a phone, background on DialogHeader and DialogFooter sets how the Sheet's bars meet the body scrolled under them, as a Toolbar's do: by default glass on the header and soft on the footer, or hard or solid."
         },
         {
           name: "Placement",
@@ -12226,6 +12728,59 @@ const open = ref(false);
 <template>
 <SetupChoicesSheet v-model:open="open" layout="grouped" @add="(method) => console.log(method.id)" />
 </template>`
+        },
+        {
+          name: "Steps",
+          code: `<Dialog v-model:open="open" @update:open="(next) => { if (!next) { step = 'email'; direction = 'forward' } }">
+  <DialogTrigger>
+    <Button color="secondary" variant="outline">Sign in</Button>
+  </DialogTrigger>
+  <DialogContent mobile-variant="sheet" :width="420">
+    <DialogHeader>
+      <DialogTitle>Sign in</DialogTitle>
+    </DialogHeader>
+    <DialogBody>
+      <DialogSteps :step="step" :direction="direction">
+        <Field v-if="step === 'email'" label="Email" description="We send a code to this address.">
+          <Input v-model:value="email" type="email" placeholder="you@example.com" />
+        </Field>
+        <Field v-else label="Code" :description="'Enter the code we sent to ' + (email || 'your email') + '.'">
+          <Input inputmode="numeric" autocomplete="one-time-code" placeholder="6-digit code" />
+        </Field>
+      </DialogSteps>
+    </DialogBody>
+    <DialogFooter>
+      <Button v-if="step === 'code'" color="primary" variant="soft" @click="direction = 'back'; step = 'email'">Back</Button>
+      <Button v-if="step === 'email'" color="primary" @click="direction = 'forward'; step = 'code'">Continue</Button>
+      <Button v-else color="primary" @click="open = false">Verify</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>`,
+          details: `Put the steps of a flow in DialogSteps: a new step comes in from the trailing edge over the one before, which moves a third of the way out under it, as a push on iOS. direction="back" reverses it for a return to a step before. The new step starts at its top, the steps reach the panel's edges, and focus in the step that leaves moves to the one that comes in. With reduced motion the step changes at once.`
+        },
+        {
+          name: "Keep it open",
+          code: `<Dialog v-model:open="open" @update:open="(next) => { if (!next) { profileName = 'Mia'; held = false } }">
+  <DialogTrigger>
+    <Button color="secondary" variant="outline">Edit profile</Button>
+  </DialogTrigger>
+  <DialogContent :width="420" @escape-key-down="(event) => { if (profileName !== 'Mia') { event.preventDefault(); held = true } }" @interact-outside="(event) => { if (profileName !== 'Mia') { event.preventDefault(); held = true } }">
+    <DialogHeader>
+      <DialogTitle>Edit profile</DialogTitle>
+      <DialogDescription>{{ held ? 'Save or discard your changes to close.' : 'Escape and a press outside close it until you change the name.' }}</DialogDescription>
+    </DialogHeader>
+    <Field label="Name">
+      <Input v-model:value="profileName" @update:value="held = false" />
+    </Field>
+    <DialogFooter>
+      <DialogClose>
+        <Button color="primary" variant="soft">Discard</Button>
+      </DialogClose>
+      <Button color="primary" @click="open = false">Save</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>`,
+          details: "Escape and a press or a focus outside ask @escape-key-down and @interact-outside first: event.preventDefault() keeps the dialog open, such as for a form with unsaved changes, or for a press on a developer panel over the page. The Close button and DialogClose still close it."
         }
       ],
       subComponents: [
@@ -12280,6 +12835,38 @@ const open = ref(false);
               name: "@close-auto-focus",
               type: "(event: Event) => void",
               description: "Called when focus returns on close; call event.preventDefault() to keep it elsewhere"
+            },
+            {
+              name: "@escape-key-down",
+              type: "(event: KeyboardEvent) => void",
+              description: "Called on Escape before the dialog closes; call event.preventDefault() to keep it open"
+            },
+            {
+              name: "@interact-outside",
+              type: "(event: DialogInteractOutsideEvent) => void",
+              description: "Called on a press or a focus outside the dialog before it closes; call event.preventDefault() to keep it open. event.detail.originalEvent is the browser's event"
+            },
+            {
+              name: "z-index",
+              type: "number",
+              default: "50",
+              description: "Stack order of the overlay and the dialog, for a page whose own layers sit above 50"
+            },
+            {
+              name: "root-props",
+              type: "DialogLayerProps",
+              description: "class, style and data attributes for the fixed layer that holds the panel. Data attributes on DialogContent land there too"
+            },
+            {
+              name: "overlay-props",
+              type: "DialogLayerProps",
+              description: "class, style and data attributes for the overlay"
+            },
+            {
+              name: "layout",
+              type: '"auto" | "phone"',
+              default: '"auto"',
+              description: "phone lays the dialog out as on a phone at any window width, with the dialogs it opens. Inside a PhoneLayout it always is"
             }
           ]
         },
@@ -12299,6 +12886,28 @@ const open = ref(false);
               description: "Action layout at 767px and below. Defaults to inline for alert, stacked otherwise. Inline actions wrap when they do not fit"
             }
           ]
+        },
+        {
+          name: "DialogSteps",
+          description: "the steps of a flow, such as a sign-in that asks for an email and then a code. Place it in DialogBody.",
+          props: [
+            {
+              name: "step",
+              type: "string | number",
+              description: "The step on screen. A new value brings its content in"
+            },
+            {
+              name: "direction",
+              type: '"forward" | "back"',
+              default: '"forward"',
+              description: "forward brings the new step in from the trailing edge over the one before; back returns to a step before it"
+            },
+            {
+              name: "class",
+              type: "string",
+              description: "Additional CSS class on the steps"
+            }
+          ]
         }
       ],
       docsUrl: "https://plexui.com/vue/components/dialog"
@@ -13317,6 +13926,46 @@ const removable = ref(true);
       ],
       docsUrl: "https://plexui.com/vue/components/floating-label-input"
     },
+    {
+      slug: "index-bar",
+      name: "Index Bar",
+      description: '"The section index of a phone list: a column of letters at the trailing edge that jumps to a section under the finger, as the iOS section index does. Desktop lists have no index, so an index bar never renders from 768px up."',
+      importPath: "@plexui/vue/components/IndexBar",
+      exports: [
+        "IndexBar"
+      ],
+      props: [
+        {
+          name: "items",
+          type: "string[]",
+          description: "The titles of the sections, in order: usually letters, such as A to Z and #"
+        },
+        {
+          name: "id",
+          type: "string",
+          description: "The id of the index bar"
+        },
+        {
+          name: "aria-label",
+          type: "string",
+          default: '"Section index"',
+          description: "Name of the index bar"
+        },
+        {
+          name: "aria-controls",
+          type: "string",
+          description: "The id of the list the index scrolls"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<Page surface="grouped">\n  <Toolbar>\n    <ToolbarTitle>Countries</ToolbarTitle>\n  </Toolbar>\n  <PageContent ref="content">\n    <FieldGroup v-for="section in sections" :key="section.letter" :title="section.letter" :data-section="section.letter">\n      ...\n    </FieldGroup>\n  </PageContent>\n  <IndexBar :items="sections.map((section) => section.letter)" @select="(letter) => scrollToSection(content, letter)" />\n</Page>',
+          details: "Put the bar in a Page, or in any positioned container that holds the list: it runs down the trailing edge, centred between the bars of a Page (or the safe areas), as iOS centres its index, its letters 14px apart and centred 8px from the edge, in the info color, as native iOS draws its tint (Contacts and the iOS 27 kit). The rows keep the margins of the list, and the letters sit in the trailing one, as in Contacts. A press shows the section of the letter under the finger, and a drag moves through the sections letter by letter; the select event receives the title and its index, and the list scrolls itself there. Where the letters do not fit, as in a short sheet, every other letter gives way to a dot, as UIKit&apos;s index does, and a drag over a dot still reaches the letters behind it."
+        }
+      ],
+      docsUrl: "https://plexui.com/vue/components/index-bar"
+    },
     {
       slug: "indicators",
       name: "Indicators",
@@ -14911,12 +15560,12 @@ const errorMessage = ref(false);
     </Menu>
   </ToolbarTrailing>
 </Toolbar>`,
-          details: "A folder's menu, as Files opens it on iOS: actions with their icons, then the view and the sort order as radio items, Date with its order under it (description) while it is the chosen sort, and Group By in a submenu. Turn off icons for the same menu in plain text, and checkmarks for the folder's actions alone, a shorter menu with no checkmark column. pill on MenuContent makes a rounder list with fully rounded rows, for menus beside pill controls. On a phone each example is a screen whose menu opens from the More button of its top bar, as iOS opens the menu of an album in Photos. There the panel covers the button, its top and end at the button's top and end, and is the 238px panel of the iOS kit, so the phone code leaves out width, min-width and size. A pill menu is the same panel there, so the phone view leaves out pill."
+          details: "A folder's menu, as Files opens it on iOS: actions with their icons, then the view and the sort order as radio items, Date with its order under it (description) while it is the chosen sort, and Group By in a submenu. Turn off icons for the same menu in plain text, and checkmarks for the folder's actions alone, a shorter menu with no checkmark column. pill on MenuContent makes a rounder list with fully rounded rows, for menus beside pill controls. On a phone each example is a screen whose menu opens from the More button of its top bar, as iOS opens the menu of an album in Photos. There the panel covers the button, its top and end at the button's top and end, and is the 250px panel of iOS menus, so the phone code leaves out width, min-width and size. A pill menu is the same panel there, so the phone view leaves out pill."
         },
         {
           name: "Natural sizing",
           code: '<Menu>\n  <MenuTrigger>\n    <Button color="primary" size="lg" variant="ghost" class="font-semibold gap-1.5"><Tools /> Tools</Button>\n  </MenuTrigger>\n  <MenuContent min-width="auto">\n    <MenuItem @select="() => {}"><Functions :height="18" :width="18" /> Function</MenuItem>\n    <MenuItem @select="() => {}"><Search :height="18" :width="18" /> File Search</MenuItem>\n    <MenuItem @select="() => {}"><Globe :height="18" :width="18" /> Web Search</MenuItem>\n    <MenuItem @select="() => {}"><Code :height="18" :width="18" /> Code Interpreter</MenuItem>\n    <MenuItem @select="() => {}"><ImageSquare :height="18" :width="18" /> Image Generation</MenuItem>\n  </MenuContent>\n</Menu>',
-          details: `Menu supports several sizing strategies:Natural sizing: use min-width="auto" to have the menu fit naturally to the size of the content.Fixed size: use width and min-width to set the menu to a fixed size, regardless of content size.Flexible sizing: min-width can be used by itself to describe a menu that must be a given size, but can grow larger depending on its content.Max sizing: apply max-width to the children of MenuContent. maxWidth isn't exposed as a prop because it's reserved for the custom properties used in collision detection.Desktop only: on a phone a menu is the iOS panel, at least the 238px of the iOS kit, whatever these sizes say.`
+          details: `Menu supports several sizing strategies:Natural sizing: use min-width="auto" to have the menu fit naturally to the size of the content.Fixed size: use width and min-width to set the menu to a fixed size, regardless of content size.Flexible sizing: min-width can be used by itself to describe a menu that must be a given size, but can grow larger depending on its content.Max sizing: apply max-width to the children of MenuContent. maxWidth isn't exposed as a prop because it's reserved for the custom properties used in collision detection.Desktop only: on a phone a menu is the 250px panel of iOS menus, unless it sets a width or a larger minimum width of its own.`
         },
         {
           name: "Horizontal (icons only)",
@@ -14935,8 +15584,8 @@ const errorMessage = ref(false);
         },
         {
           name: "Grouped items",
-          code: '<!-- Desktop -->\n<Menu>\n  <MenuTrigger>\n    <Button color="primary" size="lg" variant="ghost" class="font-semibold gap-1.5"><FileDocument /> Templates <ChevronDownMd /></Button>\n  </MenuTrigger>\n  <MenuContent :min-width="220">\n    <MenuGroup>\n      <MenuLabel>Active</MenuLabel>\n      <MenuItem @select="() => {}">Welcome email</MenuItem>\n      <MenuItem @select="() => {}">Order confirmation</MenuItem>\n      <MenuItem @select="() => {}">Password reset</MenuItem>\n    </MenuGroup>\n    <MenuSeparator />\n    <MenuGroup>\n      <MenuLabel>Draft</MenuLabel>\n      <MenuItem @select="() => {}">New promo campaign</MenuItem>\n      <MenuItem @select="() => {}">Account deactivation</MenuItem>\n    </MenuGroup>\n  </MenuContent>\n</Menu>\n\n<!-- Phone: the More button of the top bar opens the menu -->\n<Toolbar title-style="large">\n  <ToolbarTitle>Grouped items</ToolbarTitle>\n  <ToolbarTrailing>\n    <Menu>\n      <MenuTrigger>\n        <Button color="secondary" variant="soft" uniform pill aria-label="More"><DotsHorizontal /></Button>\n      </MenuTrigger>\n      <MenuContent align="end">\n        <MenuGroup>\n          <MenuLabel>Active</MenuLabel>\n          <MenuItem @select="() => {}">Welcome email</MenuItem>\n          <MenuItem @select="() => {}">Order confirmation</MenuItem>\n          <MenuItem @select="() => {}">Password reset</MenuItem>\n        </MenuGroup>\n        <MenuSeparator />\n        <MenuGroup>\n          <MenuLabel>Draft</MenuLabel>\n          <MenuItem @select="() => {}">New promo campaign</MenuItem>\n          <MenuItem @select="() => {}">Account deactivation</MenuItem>\n        </MenuGroup>\n      </MenuContent>\n    </Menu>\n  </ToolbarTrailing>\n</Toolbar>',
-          details: "Use MenuGroup and MenuLabel to organize related items into labeled sections."
+          code: '<!-- Desktop -->\n<Menu>\n  <MenuTrigger>\n    <Button variant="ghost" color="primary"><Filter /> Filter <ChevronDownMd /></Button>\n  </MenuTrigger>\n  <MenuContent :min-width="220">\n    <MenuRadioGroup v-model:value="filter">\n      <MenuRadioItem value="messages"><Chats /> Messages</MenuRadioItem>\n      <MenuRadioItem value="spam"><XSquare /> Spam</MenuRadioItem>\n      <MenuRadioItem value="deleted"><Trash /> Recently Deleted</MenuRadioItem>\n    </MenuRadioGroup>\n    <MenuSeparator />\n    <MenuGroup>\n      <MenuLabel>Filter By</MenuLabel>\n      <MenuRadioGroup v-model:value="filter">\n        <MenuRadioItem value="unread"><Chat /> Unread</MenuRadioItem>\n        <MenuRadioItem value="drafts"><ChatTripleDots /> Drafts</MenuRadioItem>\n      </MenuRadioGroup>\n    </MenuGroup>\n    <MenuSeparator />\n    <MenuItem @select="() => {}">Manage Filtering</MenuItem>\n  </MenuContent>\n</Menu>\n\n<!-- Phone: the More button of the top bar opens the menu -->\n<Toolbar title-style="large">\n  <ToolbarTitle>Grouped items</ToolbarTitle>\n  <ToolbarTrailing>\n    <Menu>\n      <MenuTrigger>\n        <Button color="secondary" variant="soft" uniform pill aria-label="More"><DotsHorizontal /></Button>\n      </MenuTrigger>\n      <MenuContent align="end">\n        <MenuRadioGroup v-model:value="filter">\n          <MenuRadioItem value="messages"><Chats /> Messages</MenuRadioItem>\n          <MenuRadioItem value="spam"><XSquare /> Spam</MenuRadioItem>\n          <MenuRadioItem value="deleted"><Trash /> Recently Deleted</MenuRadioItem>\n        </MenuRadioGroup>\n        <MenuSeparator />\n        <MenuGroup>\n          <MenuLabel>Filter By</MenuLabel>\n          <MenuRadioGroup v-model:value="filter">\n            <MenuRadioItem value="unread"><Chat /> Unread</MenuRadioItem>\n            <MenuRadioItem value="drafts"><ChatTripleDots /> Drafts</MenuRadioItem>\n          </MenuRadioGroup>\n        </MenuGroup>\n        <MenuSeparator />\n        <MenuItem @select="() => {}">Manage Filtering</MenuItem>\n      </MenuContent>\n    </Menu>\n  </ToolbarTrailing>\n</Toolbar>',
+          details: "Use MenuGroup and MenuLabel to organize related items into labeled sections. The example is the filter of the message list, as Messages opens it on iOS: the mailboxes, a section labeled Filter By, and Manage Filtering under a separator. Both radio groups hold one value, so one checkmark marks the list shown. On a phone a section label and a row without an icon start after the checkmark column, where the icons of the other rows start, as in iOS menus."
         },
         {
           name: "Submenus",
@@ -14945,8 +15594,8 @@ const errorMessage = ref(false);
         },
         {
           name: "Checkbox items",
-          code: '<!-- Desktop -->\n<Menu>\n  <MenuTrigger>\n    <Button variant="ghost" color="primary">Checkbox menu <ChevronDownMd /></Button>\n  </MenuTrigger>\n  <MenuContent :min-width="200">\n    <MenuCheckboxItem\n      v-model:checked="settings.showGrid"\n      :indicator-position="indicatorPosition"\n      :indicator-variant="indicatorVariant"\n      @select="(evt) => evt.preventDefault()"\n    >\n      Show grid lines\n    </MenuCheckboxItem>\n    <MenuCheckboxItem\n      v-model:checked="settings.showLabels"\n      :indicator-position="indicatorPosition"\n      :indicator-variant="indicatorVariant"\n      @select="(evt) => evt.preventDefault()"\n    >\n      Display labels\n    </MenuCheckboxItem>\n    <MenuCheckboxItem\n      v-model:checked="settings.enableShadows"\n      :indicator-position="indicatorPosition"\n      :indicator-variant="indicatorVariant"\n      @select="(evt) => evt.preventDefault()"\n    >\n      Enable shadows\n    </MenuCheckboxItem>\n  </MenuContent>\n</Menu>\n\n<!-- Phone: the More button of the top bar opens the menu -->\n<Toolbar title-style="large">\n  <ToolbarTitle>Checkbox items</ToolbarTitle>\n  <ToolbarTrailing>\n    <Menu>\n      <MenuTrigger>\n        <Button color="secondary" variant="soft" uniform pill aria-label="More"><DotsHorizontal /></Button>\n      </MenuTrigger>\n      <MenuContent align="end">\n        <MenuCheckboxItem\n          v-model:checked="settings.showGrid"\n          :indicator-position="indicatorPosition"\n          :indicator-variant="indicatorVariant"\n          @select="(evt) => evt.preventDefault()"\n        >\n          Show grid lines\n        </MenuCheckboxItem>\n        <MenuCheckboxItem\n          v-model:checked="settings.showLabels"\n          :indicator-position="indicatorPosition"\n          :indicator-variant="indicatorVariant"\n          @select="(evt) => evt.preventDefault()"\n        >\n          Display labels\n        </MenuCheckboxItem>\n        <MenuCheckboxItem\n          v-model:checked="settings.enableShadows"\n          :indicator-position="indicatorPosition"\n          :indicator-variant="indicatorVariant"\n          @select="(evt) => evt.preventDefault()"\n        >\n          Enable shadows\n        </MenuCheckboxItem>\n      </MenuContent>\n    </Menu>\n  </ToolbarTrailing>\n</Toolbar>',
-          details: `Use MenuCheckboxItem with v-model:checked and {'@select="(evt) => evt.preventDefault()"'} to keep the menu open. On a phone with touch.css the checkmark leads the row, as in iOS menus, whatever indicatorPosition and indicatorVariant say, so the phone view leaves out those controls.`
+          code: '<!-- Desktop -->\n<Menu>\n  <MenuTrigger>\n    <Button variant="ghost" color="primary">View <ChevronDownMd /></Button>\n  </MenuTrigger>\n  <MenuContent :min-width="220">\n    <MenuLabel>View Options</MenuLabel>\n    <MenuCheckboxItem\n      v-model:checked="view.categories"\n      :indicator-position="indicatorPosition"\n      :indicator-variant="indicatorVariant"\n      @select="(evt) => evt.preventDefault()"\n    >\n      <Storyboard /> Show Categories\n    </MenuCheckboxItem>\n    <MenuCheckboxItem\n      v-model:checked="view.priority"\n      :indicator-position="indicatorPosition"\n      :indicator-variant="indicatorVariant"\n      @select="(evt) => evt.preventDefault()"\n    >\n      <Atom /> Show Priority\n    </MenuCheckboxItem>\n    <MenuCheckboxItem\n      v-model:checked="view.contactPhotos"\n      :indicator-position="indicatorPosition"\n      :indicator-variant="indicatorVariant"\n      @select="(evt) => evt.preventDefault()"\n    >\n      <AvatarProfile /> Show Contact Photos\n    </MenuCheckboxItem>\n    <MenuSeparator />\n    <MenuItem @select="() => {}"><InfoCircle /> About Categories</MenuItem>\n  </MenuContent>\n</Menu>\n\n<!-- Phone: the More button of the top bar opens the menu -->\n<Toolbar title-style="large">\n  <ToolbarTitle>Checkbox items</ToolbarTitle>\n  <ToolbarTrailing>\n    <Menu>\n      <MenuTrigger>\n        <Button color="secondary" variant="soft" uniform pill aria-label="More"><DotsHorizontal /></Button>\n      </MenuTrigger>\n      <MenuContent align="end">\n        <MenuLabel>View Options</MenuLabel>\n        <MenuCheckboxItem\n          v-model:checked="view.categories"\n          :indicator-position="indicatorPosition"\n          :indicator-variant="indicatorVariant"\n          @select="(evt) => evt.preventDefault()"\n        >\n          <Storyboard /> Show Categories\n        </MenuCheckboxItem>\n        <MenuCheckboxItem\n          v-model:checked="view.priority"\n          :indicator-position="indicatorPosition"\n          :indicator-variant="indicatorVariant"\n          @select="(evt) => evt.preventDefault()"\n        >\n          <Atom /> Show Priority\n        </MenuCheckboxItem>\n        <MenuCheckboxItem\n          v-model:checked="view.contactPhotos"\n          :indicator-position="indicatorPosition"\n          :indicator-variant="indicatorVariant"\n          @select="(evt) => evt.preventDefault()"\n        >\n          <AvatarProfile /> Show Contact Photos\n        </MenuCheckboxItem>\n        <MenuSeparator />\n        <MenuItem @select="() => {}"><InfoCircle /> About Categories</MenuItem>\n      </MenuContent>\n    </Menu>\n  </ToolbarTrailing>\n</Toolbar>',
+          details: `Use MenuCheckboxItem with v-model:checked and {'@select="(evt) => evt.preventDefault()"'} to keep the menu open. The example is the view options of a mailbox, as Mail opens them on iOS: three options that are each on or off, and About Categories under a separator. On a phone with touch.css the checkmark leads the row, as in iOS menus, whatever indicatorPosition and indicatorVariant say, so the phone view leaves out those controls. A row without a checkmark keeps its column, so every icon and label lines up, and a long label wraps under itself.`
         },
         {
           name: "Radio items",
@@ -14983,8 +15632,8 @@ const errorMessage = ref(false);
             {
               name: "width",
               type: 'number | "auto"',
-              default: '"auto"',
-              description: "Panel width (numbers are pixels)"
+              default: "fits content, 250 on a phone",
+              description: 'Panel width (numbers are pixels). Without it the panel fits its content, or with touch.css on a phone is 250px, as an iOS menu; "auto" fits the content there too'
             },
             {
               name: "min-width",
@@ -15311,7 +15960,7 @@ const disabled = ref(false);
         {
           name: "Background",
           code: '<Page>\n  <PageHeader background="hard">...</PageHeader>\n  <PageContent>...</PageContent>\n  <PageFooter background="hard">\n    <Button color="primary" pill block>New order</Button>\n  </PageFooter>\n</Page>',
-          details: 'background sets how the header and the footer meet the content scrolled under them on a phone, as a Toolbar does: soft (the default) fades the canvas color out under the bar, hard is an opaque bar with a line, glass a translucent, blurred bar with a hairline, and solid an opaque bar with no line. Hard and glass show themselves once content is under the bar; :divider="false" keeps a header without its line.'
+          details: `background sets how the header and the footer meet the content scrolled under them on a phone, as a Toolbar does: glass, the header's default, is a translucent, blurred bar with a hairline, soft, the footer's default, fades the canvas color out under a header and leaves the content clear under the footer's actions, as native iOS 26 does, hard is an opaque bar with a line, and solid an opaque bar with no line. Glass and hard show themselves once content is under the bar; :divider="false" keeps a header without its line.`
         }
       ],
       subComponents: [
@@ -15321,7 +15970,7 @@ const disabled = ref(false);
             {
               name: "background",
               type: '"soft" | "hard" | "glass" | "solid"',
-              default: '"soft"',
+              default: '"glass"',
               description: "How the bar meets the content scrolled under it on a phone, see Background"
             },
             {
@@ -15451,6 +16100,41 @@ const disabled = ref(false);
       ],
       docsUrl: "https://plexui.com/vue/components/page-control"
     },
+    {
+      slug: "phone-layout",
+      name: "Phone Layout",
+      description: "Lays out the components inside it as on a phone at any window width, such as a phone frame on a desktop page, and keeps their dialogs inside its box.",
+      importPath: "@plexui/vue/components/PhoneLayout",
+      exports: [
+        "PhoneLayout"
+      ],
+      props: [
+        {
+          name: "class",
+          type: "string",
+          description: "Class on the box, such as its size and corners"
+        },
+        {
+          name: "style",
+          type: "string | CSSProperties",
+          description: "Style on the box"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<PhoneLayout style="width: 375px; height: 600px; border-radius: 40px; border: 1px solid var(--color-border); background: var(--color-background)">\n  <div style="display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; padding: 24px">\n    <Dialog v-model:open="open">\n      <DialogTrigger>\n        <Button color="primary">New list</Button>\n      </DialogTrigger>\n      <DialogContent mobile-variant="sheet">\n        <DialogHeader>\n          <DialogTitle>New list</DialogTitle>\n        </DialogHeader>\n        <DialogBody>\n          <Field label="Name">\n            <Input placeholder="Groceries" />\n          </Field>\n        </DialogBody>\n        <DialogFooter>\n          <Button color="primary" @click="open = false">Create</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  </div>\n</PhoneLayout>',
+          details: "The box is the screen of the phone: a Dialog opened inside it portals into the box and covers it instead of the window. Give the box a size; let a child of it scroll rather than the box, so a dialog stays in place."
+        }
+      ],
+      hooks: [
+        {
+          name: "usePhoneLayout",
+          description: '`usePhoneLayout()` returns a computed ref: whether components where it is called are laid out as on a phone: inside a PhoneLayout or a Dialog with `layout="phone"`, or in a window 767px wide or narrower. On the server, and until the component mounts, it is false outside a PhoneLayout.'
+        }
+      ],
+      docsUrl: "https://plexui.com/vue/components/phone-layout"
+    },
     {
       slug: "popover",
       name: "Popover",
@@ -19382,6 +20066,125 @@ const disabled = ref(false);
       ],
       docsUrl: "https://plexui.com/vue/components/stepper"
     },
+    {
+      slug: "swipe-actions",
+      name: "Swipe Actions",
+      description: '"Actions behind a row of a list, as the swipe actions of an iOS list: a swipe across the row reveals them, a full swipe runs the first one, and each is a button for the keys."',
+      importPath: "@plexui/vue/components/SwipeActions",
+      exports: [
+        "SwipeActions"
+      ],
+      props: [
+        {
+          name: "leading",
+          type: "SwipeAction[]",
+          default: "[]",
+          description: "Actions revealed by a swipe toward the trailing edge, the first one at the leading edge"
+        },
+        {
+          name: "trailing",
+          type: "SwipeAction[]",
+          default: "[]",
+          description: "Actions revealed by a swipe toward the leading edge, the first one at the trailing edge"
+        },
+        {
+          name: "label-placement",
+          type: '"hidden" | "inside" | "below"',
+          default: '"hidden"',
+          description: "Where the actions show their labels: symbols only, inside the capsule, or below it (for rows of 68px and taller)"
+        },
+        {
+          name: "full-swipe",
+          type: "boolean",
+          default: "true",
+          description: "A swipe past the middle between the open actions and the far edge runs the first action of that side"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: `<FieldGroup>
+  <SwipeActions
+    v-for="list in lists"
+    :key="list.name"
+    :leading="[{ id: 'pin', label: 'Pin', Icon: Pin, color: 'warning', onSelect: () => pin(list) }]"
+    :trailing="[
+      { id: 'delete', label: 'Delete', Icon: RemoveTrash, color: 'danger', onSelect: () => remove(list) },
+      { id: 'archive', label: 'Archive', Icon: Archive, color: 'info', onSelect: () => archive(list) },
+    ]"
+  >
+    <div class="row">{{ list.name }}</div>
+  </SwipeActions>
+</FieldGroup>`,
+          details: "Wrap the content of a row of a FieldGroup: the swipe row is the data-row of the group, so its separators and corners follow the card. The actions are solid capsules behind the content, 10px apart and 16px from the edge, as in the iOS 27 kit; the first action of a side stands at its edge. Swiped aside, the content becomes a capsule of the row&apos;s color on the background of the list. A swipe past half of the actions opens them, a press on an action runs it and closes the row, and a press on the content or anywhere outside closes it too; one row is open at a time. A swipe past the middle between the open actions and the far edge stretches the first action across the row, and letting go runs it."
+        },
+        {
+          name: "Labels inside",
+          code: `<SwipeActions
+  label-placement="inside"
+  :leading="[{ id: 'pin', label: 'Pin', Icon: Pin, color: 'warning', onSelect: () => pin(list) }]"
+  :trailing="[
+    { id: 'delete', label: 'Delete', Icon: RemoveTrash, color: 'danger', onSelect: () => remove(list) },
+    { id: 'archive', label: 'Archive', Icon: Archive, color: 'info', onSelect: () => archive(list) },
+  ]"
+>
+  <div class="row">{{ list.name }}</div>
+</SwipeActions>`,
+          details: "With label-placement=&quot;inside&quot; each capsule holds a smaller symbol and its label, as the kit&apos;s Symbol and Label row. An action without an icon always shows its label inside."
+        },
+        {
+          name: "Labels below",
+          code: `<SwipeActions
+  label-placement="below"
+  :leading="[{ id: 'flag', label: 'Flag', Icon: Flag, color: 'warning', onSelect: () => flag(message) }]"
+  :trailing="[
+    { id: 'delete', label: 'Delete', Icon: RemoveTrash, color: 'danger', onSelect: () => remove(message) },
+    { id: 'archive', label: 'Archive', Icon: Archive, color: 'info', onSelect: () => archive(message) },
+  ]"
+>
+  <div class="row">
+    <div>{{ message.from }}</div>
+    <div>{{ message.subject }}</div>
+  </div>
+</SwipeActions>`,
+          details: "With label-placement=&quot;below&quot; a lower capsule stands over its label, as the kit&apos;s Symbol and Label Tall row. It takes a row of 68px or taller, such as a row of two lines."
+        }
+      ],
+      subComponents: [
+        {
+          name: "SwipeAction",
+          props: [
+            {
+              name: "id",
+              type: "string",
+              description: "Unique ID of the action within its side"
+            },
+            {
+              name: "label",
+              type: "string",
+              description: "Name of the action: shown inside or below the capsule (and on an action without an icon), and its accessible name always"
+            },
+            {
+              name: "Icon",
+              type: "Component",
+              description: "Icon of the action, a component (mark it raw in reactive state)"
+            },
+            {
+              name: "color",
+              type: '"primary" | "secondary" | "danger" | "success" | "info" | "discovery" | "caution" | "warning"',
+              default: '"secondary"',
+              description: "Solid color of the action"
+            },
+            {
+              name: "onSelect",
+              type: "() => void",
+              description: "Called when the action is pressed, or by a full swipe when it is the first action of its side"
+            }
+          ]
+        }
+      ],
+      docsUrl: "https://plexui.com/vue/components/swipe-actions"
+    },
     {
       slug: "switch",
       name: "Switch",
@@ -19552,7 +20355,7 @@ const checked = ref(false)
     {
       slug: "tab-bar",
       name: "Tab Bar",
-      description: '"The tab bar of a phone screen: two to five sections at the bottom in a floating glass capsule, an optional search tab, minimizing while the content scrolls. Desktop layouts navigate with a Sidebar or Tabs, so a tab bar never renders from 768px up."',
+      description: '"The tab bar of a phone screen: two to five sections at the bottom in a floating glass capsule, an optional search or prominent tab, minimizing while the content scrolls. Desktop layouts navigate with a Sidebar or Tabs, so a tab bar never renders from 768px up."',
       importPath: "@plexui/vue/components/TabBar",
       exports: [
         "TabBar",
@@ -19574,6 +20377,11 @@ const checked = ref(false)
           type: "{ value: string; label?: string }",
           description: "A search tab in a glass circle of its own at the trailing end; label defaults to Search"
         },
+        {
+          name: "prominent",
+          type: "{ value: string; label: string }",
+          description: "A prominent tab in a glass circle of its own at the trailing end, in place of the search circle; its symbol is the prominent-icon slot, and search then joins the capsule"
+        },
         {
           name: "minimize-behavior",
           type: '"never" | "onScrollDown"',
@@ -19625,17 +20433,33 @@ const checked = ref(false)
 </TabBar>`,
           details: "With search the search tab takes a glass circle of its own at the trailing end, as the iOS 26 search tab does. The capsule of the other tabs keeps to the leading end at their width, as in the kit and in Photos: with two tabs it ends well before the circle, with three it reaches 8px from it. It is a tab like the others: show the search screen when its value is selected."
         },
+        {
+          name: "Prominent tab",
+          code: `<TabBar v-model:value="tab" :prominent="{ value: 'bag', label: 'Bag' }">
+  <TabBarItem value="home" label="Home">
+    <template #icon><Home /></template>
+  </TabBarItem>
+  <TabBarItem value="calendar" label="Calendar">
+    <template #icon><Calendar /></template>
+  </TabBarItem>
+  <TabBarItem value="photos" label="Photos">
+    <template #icon><Images /></template>
+  </TabBarItem>
+  <template #prominent-icon><ShoppingBag /></template>
+</TabBar>`,
+          details: "With prominent one destination leaves the capsule for a glass circle of its own at the trailing end, as the prominent tab of iOS 27 and its kit: one key destination, such as a cart or a library. It is still a tab, not an action: it shows a screen of its own when selected. A bar has one such circle, so prominent takes the place of the search circle; with both, search becomes the last tab of the capsule. The circle shows the symbol from the prominent-icon slot only, and label names the tab."
+        },
         {
           name: "Minimize on scroll",
           code: `<TabBar v-model:value="tab" :search="{ value: 'search' }" minimize-behavior="onScrollDown">
   ...
 </TabBar>`,
-          details: 'With minimize-behavior="onScrollDown" the bar shrinks to the selected tab while the content scrolls down and comes back when it scrolls up, as in iOS 26. Tap the minimized tab to bring the others back.'
+          details: 'With minimize-behavior="onScrollDown" the bar shrinks to the selected tab while the content scrolls down and comes back when it scrolls up, as in iOS 26. Minimized, the circles keep 28px from the sides and at least 28px from the bottom, as in the iOS 27 kit. Tap the minimized tab to bring the others back.'
         },
         {
           name: "Background",
           code: '<Page surface="grouped">\n  <Toolbar background="hard">...</Toolbar>\n  <PageContent>...</PageContent>\n  <TabBar v-model:value="tab" background="hard">\n    ...\n  </TabBar>\n</Page>',
-          details: "background sets how the bar meets the content scrolled under it, as a Toolbar does: soft (the default) fades the canvas color in under the capsule, hard is an opaque band with a line on top, glass a translucent, blurred band with a hairline, and solid an opaque band with no line. Hard and glass show themselves while the content continues under the bar."
+          details: "background sets how the bar meets the content scrolled under it, as a Toolbar does: soft (the default) leaves the content clear under and around the capsule, as native iOS 26 does, glass is a translucent, blurred band with a hairline, hard is an opaque band with a line on top, and solid an opaque band with no line. Glass and hard show themselves while the content continues under the bar."
         }
       ],
       subComponents: [
@@ -20178,7 +21002,7 @@ const columns: ColumnDef<User>[] = [
         {
           name: "Overview",
           code: '<Tabs\n  v-model:value="tab"\n  :variant="variant"\n  :orientation="orientation"\n  :size="size"\n  :pill="pill"\n  :flush="flush"\n  :block="block"\n  :disabled="disabled"\n  aria-label="Demo tabs"\n>\n  <TabsTab value="overview">Overview</TabsTab>\n  <TabsTab value="analytics">Analytics</TabsTab>\n  <TabsTab value="reports" :disabled="reportsDisabled">Reports</TabsTab>\n  <TabsTab value="settings">Settings</TabsTab>\n</Tabs>',
-          details: "Tabs provides two visual variants: segmented (default) with a sliding background highlight, and underline with an animated line indicator. Both support horizontal and vertical orientations. Bind the selected tab with v-model:value; the examples keep it in a tab variable. disabled affects the whole group; reportsDisabled disables only Reports. Arrow-key navigation skips disabled tabs without resetting the selected value. On a phone horizontal tabs of either variant are the iOS segmented control on glass, as toolbar buttons are: segments of one width in a 44px capsule, the selection a darker pill inside it with the primary label and the other labels secondary, filling the row of a phone screen; vertical tabs are an inset grouped list. So the phone view has no variant, flush, block, size and pill controls."
+          details: "Tabs provides two visual variants: segmented (default) with a sliding background highlight, and underline with an animated line indicator. Both support horizontal and vertical orientations. Bind the selected tab with v-model:value; the examples keep it in a tab variable. disabled affects the whole group, which on a phone shows at half opacity when horizontal, as a disabled iOS segmented control does; reportsDisabled disables only Reports. Arrow-key navigation skips disabled tabs without resetting the selected value. On a phone horizontal tabs of either variant are the iOS segmented control on glass, as toolbar buttons are: segments of one width in a 44px capsule, the selection a darker pill inside it with the primary label and the other labels secondary, filling the row of a phone screen; vertical tabs are an inset grouped list. So the phone view has no variant, flush, block, size and pill controls."
         },
         {
           name: "Segmented with icons",
@@ -20810,6 +21634,115 @@ const available = computed(() => {
       ],
       docsUrl: "https://plexui.com/vue/components/textarea"
     },
+    {
+      slug: "tip",
+      name: "Tip",
+      description: "A short message that points out a feature people might miss, inside the page or anchored to a control, as TipKit tips do.",
+      importPath: "@plexui/vue/components/Tip",
+      exports: [
+        "Tip",
+        "TipPopover"
+      ],
+      props: [
+        {
+          name: "title",
+          type: "string",
+          description: "The tip's title: what the feature is (or the title slot)"
+        },
+        {
+          name: "description",
+          type: "string",
+          description: "One or two sentences on how to use it (or the description slot)"
+        },
+        {
+          name: "on-close",
+          type: "() => void",
+          description: "Shows the Close button; called when it is clicked"
+        },
+        {
+          name: "arrow-edge",
+          type: '"top" | "bottom" | "left" | "right"',
+          description: "Draws an arrow at this edge, pointing at what the tip explains"
+        },
+        {
+          name: "mobile-actions",
+          type: '"rows" | "buttons"',
+          default: '"rows"',
+          description: "How the actions show at 767px and below: rows of text under a separator, or the buttons as given, each a full-width capsule"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<div class="flex w-full max-w-[360px] flex-col items-center gap-3">\n  <Tip\n    v-if="shown"\n    title="Save it for later"\n    description="Bookmarked articles wait in your reading list, ready offline on every device."\n    class="w-full"\n    :on-close="() => (shown = false)"\n  >\n    <template #icon><Bookmark /></template>\n  </Tip>\n  <Button v-else color="secondary" variant="soft" @click="shown = true">Show the tip again</Button>\n</div>',
+          details: "An inline tip takes its place in the layout. A symbol in the icon slot leads the message in the secondary color; on-close shows Close in the trailing corner. On a phone the tip is the opaque card of a grouped list, so place it on a grouped background."
+        },
+        {
+          name: "Actions",
+          code: '<div class="w-full max-w-[360px]">\n  <Tip\n    title="Turn on notifications"\n    description="Get a message when someone replies to your post or mentions you."\n  >\n    <template #icon><Bell /></template>\n    <template #actions>\n      <Button color="primary" variant="soft" size="sm" pill>Not now</Button>\n      <Button color="primary" size="sm" pill>Turn on</Button>\n    </template>\n  </Tip>\n</div>',
+          details: "Actions in the actions slot sit side by side below the message, each as wide as the others. Use small pill buttons, as the kit does. On a phone each action is a row of text in its color under a separator, one under another, starting under the text, as iOS cards show them."
+        },
+        {
+          name: "Buttons on a phone",
+          code: '<div class="w-full max-w-[360px]">\n  <Tip\n    title="Get alerts"\n    description="Hear about severe weather where you are, even when the app is closed."\n    mobile-actions="buttons"\n  >\n    <template #icon><Bell /></template>\n    <template #actions>\n      <Button color="primary" variant="soft" size="sm" pill>Turn on</Button>\n    </template>\n  </Tip>\n</div>',
+          details: 'With mobile-actions="buttons" the actions keep their buttons on a phone: each is a capsule as wide as the tip under the message, 48px tall with a 17px label, in its own color and variant, as the iOS card in Settings that opens the Support app shows. Use it for a card that asks for a permission, with one soft primary button.'
+        },
+        {
+          name: "Arrow",
+          code: '<div class="flex w-full max-w-[360px] flex-col items-center gap-1">\n  <Button color="secondary" variant="soft" uniform pill aria-label="Filter">\n    <Filter />\n  </Button>\n  <Tip\n    arrow-edge="top"\n    title="Filter the list"\n    description="Show only the items from the last week, month or year."\n    class="w-full"\n  />\n</div>',
+          details: "With arrow-edge an inline tip points at what it explains with the kit's arrow, centered on that edge. The tip leaves room for the arrow on that side."
+        },
+        {
+          name: "Popover",
+          code: '<TipPopover\n  v-model:open="open"\n  title="Filter the list"\n  description="Show only the items from the last week, month or year."\n>\n  <Button color="secondary" variant="soft" @click="open = !open">\n    <Filter />\n    Filter\n  </Button>\n</TipPopover>',
+          details: "A popover tip floats next to its control, the default slot, with an arrow that points at it. The control stays usable and keeps the focus. Close, Escape or a press outside the tip and its control closes it, through v-model:open. Show it when the control appears; here the button shows it."
+        }
+      ],
+      subComponents: [
+        {
+          name: "TipPopover",
+          description: "Takes title, description and the slots as Tip does; the default slot is the control it explains. Tip.Popover is the same component.",
+          props: [
+            {
+              name: "open",
+              type: "boolean",
+              description: "Shows the tip (controlled); bind with v-model:open"
+            },
+            {
+              name: "default-open",
+              type: "boolean",
+              default: "false",
+              description: "Shows the tip at first (uncontrolled)"
+            },
+            {
+              name: "side",
+              type: '"top" | "right" | "bottom" | "left"',
+              default: '"bottom"',
+              description: "The side of the control the tip shows on, turned when it does not fit"
+            },
+            {
+              name: "align",
+              type: '"start" | "center" | "end"',
+              default: '"center"',
+              description: "The alignment against the control"
+            },
+            {
+              name: "side-offset",
+              type: "number",
+              default: "4",
+              description: "The distance from the control to the arrow's point, in pixels"
+            },
+            {
+              name: "close-button",
+              type: "boolean",
+              default: "true",
+              description: "Shows the Close button"
+            }
+          ]
+        }
+      ],
+      docsUrl: "https://plexui.com/vue/components/tip"
+    },
     {
       slug: "toast",
       name: "Toast",
@@ -20825,7 +21758,7 @@ const available = computed(() => {
           code: `<Button color="secondary" variant="outline" @click="toast('Inquiry ID copied')">
   Show toast
 </Button>`,
-          details: "On a phone a toast takes the corners, padding and text of an iOS notification banner, the system's own message at the top of the screen: 24px corners and 15pt text, with its buttons drawn as a medium phone Button, a 34px capsule in a 44px target. It stays a message of the page, with its own width and opaque surface."
+          details: "On a phone a toast takes the corners, padding and text of an iOS notification banner, the system's own message at the top of the screen: 24px corners and 15pt text, with its buttons drawn as a medium phone Button, a 34px capsule in a 44px target. Under 600px it fills the width between 14px gutters past the safe area, as notifications do on an iOS phone; a compact toast keeps its own width. It stays a message of the page, with an opaque surface."
         },
         {
           name: "Variants",
@@ -20893,7 +21826,7 @@ const available = computed(() => {
           code: `<Button color="secondary" variant="outline" @click="toast.success('Inquiry ID copied', compact)">
   Compact toast
 </Button>`,
-          details: 'Spread compact ({`import { toast, compact } from "@plexui/vue/components/Toast"`}) into any toast(...) options for a centered-text layout. Toast width shrinks to content by default regardless; the compact helper only adds center alignment for short status messages.'
+          details: 'Spread compact ({`import { toast, compact } from "@plexui/vue/components/Toast"`}) into any toast(...) options for a centered-text layout. On a desktop a toast shrinks to its content anyway; on a phone, where a toast fills the width, a compact one keeps the width of its content. Both center its text.'
         },
         {
           name: "Persistent",
@@ -20910,7 +21843,7 @@ const available = computed(() => {
 >
   Persistent toast
 </Button>`,
-          details: "Pass duration: Infinity for toasts that stay open until the user acts on them. There are no close (\xD7) affordances: put a labelled action on the toast so dismissal is intentional and keyboard-accessible."
+          details: "Pass duration: Infinity for toasts that stay open until the user acts on them. There are no close (\xD7) affordances: put a labelled action on the toast so dismissal is intentional and keyboard-accessible. An error that waits like this is an alert (see Screen readers)."
         }
       ],
       subComponents: [
@@ -20932,13 +21865,14 @@ const available = computed(() => {
             {
               name: "offset",
               type: "string | number | { top?; right?; bottom?; left? }",
-              description: "Distance from the viewport edge"
+              default: "32px",
+              description: "Distance from the viewport edge. Without a top or bottom edge here, the page's --toast-offset-top or --toast-offset-bottom sets it."
             },
             {
               name: "mobile-offset",
               type: "string | number | { top?; right?; bottom?; left? }",
-              default: "16px + safe area per edge",
-              description: "Mobile viewport gutter. Explicit edges override their safe defaults; omitted edges keep them."
+              default: "16px top and bottom, 14px at the sides, past the safe area",
+              description: "Gutter under 600px, where a toast fills the width between the side gutters. Explicit edges override their defaults; omitted edges keep them, and the page's --toast-mobile-offset-top or --toast-mobile-offset-bottom sets the top or bottom one."
             },
             {
               name: "gap",
@@ -20983,7 +21917,7 @@ const available = computed(() => {
         {
           name: "background",
           type: '"soft" | "hard" | "glass" | "solid"',
-          default: '"soft"',
+          default: '"glass" at the top, "soft" at the bottom',
           description: "How the bar meets the content scrolled under it, see Background. edge is the earlier name of soft"
         },
         {
@@ -21006,22 +21940,22 @@ const available = computed(() => {
         {
           name: "Group",
           code: '<Toolbar>\n  <ToolbarLeading>\n    <NavigationButton action="close" />\n  </ToolbarLeading>\n  <ToolbarTrailing>\n    <Button color="secondary" variant="soft" uniform pill aria-label="Details"><InfoCircle /></Button>\n    <ToolbarGroup aria-label="Order actions">\n      <Button color="secondary" variant="soft" uniform pill aria-label="Translate"><Translate /></Button>\n      <Button color="secondary" variant="soft" uniform pill aria-label="More"><DotsHorizontal /></Button>\n    </ToolbarGroup>\n  </ToolbarTrailing>\n</Toolbar>',
-          details: "ToolbarGroup puts related actions in one capsule. A single action keeps a capsule of its own. Name each icon button with aria-label."
+          details: "ToolbarGroup puts related actions in one capsule. A single action keeps a capsule of its own. A ButtonGroup in a toolbar is the same capsule. Name each icon button with aria-label."
         },
         {
           name: "Search",
-          code: '<Toolbar>\n  <ToolbarContent fill>\n    <Input variant="soft" pill placeholder="Search" aria-label="Search orders">\n      <template #startAdornment>\n        <Search />\n      </template>\n    </Input>\n  </ToolbarContent>\n  <ToolbarTrailing>\n    <NavigationButton action="close" aria-label="Close search" />\n  </ToolbarTrailing>\n</Toolbar>',
+          code: '<Toolbar>\n  <ToolbarContent fill>\n    <Input variant="soft" pill placeholder="Search" aria-label="Search orders">\n      <template #startAdornment>\n        <SearchSm />\n      </template>\n    </Input>\n  </ToolbarContent>\n  <ToolbarTrailing>\n    <NavigationButton action="close" aria-label="Close search" />\n  </ToolbarTrailing>\n</Toolbar>',
           details: "ToolbarContent fill stretches a search field between the leading and trailing items. The field takes the row height and the material of the bar buttons."
         },
         {
           name: "Bottom",
-          code: '<Page surface="grouped">\n  <Toolbar>\n    <ToolbarTitle>Orders</ToolbarTitle>\n  </Toolbar>\n  <PageContent>...</PageContent>\n  <Toolbar placement="bottom">\n    <ToolbarLeading>\n      <Button color="secondary" variant="soft" uniform pill aria-label="Filter"><Filter /></Button>\n    </ToolbarLeading>\n    <ToolbarContent>\n      <Button color="primary" pill>New order</Button>\n    </ToolbarContent>\n    <ToolbarTrailing>\n      <Button color="secondary" variant="soft" uniform pill aria-label="Search"><Search /></Button>\n    </ToolbarTrailing>\n  </Toolbar>\n</Page>\n\n<Toolbar placement="bottom">\n  <ToolbarContent fill>\n    <Button color="primary" pill block><Plus /> New order</Button>\n  </ToolbarContent>\n</Toolbar>',
-          details: `placement="bottom" sets the bar at the bottom of the page with 48px targets and the device's bottom safe area. ToolbarContent centers a main action; with fill a search field or a single action takes the whole row. The page content scrolls under both bars.`
+          code: '<Page surface="grouped">\n  <Toolbar>\n    <ToolbarTitle>Orders</ToolbarTitle>\n  </Toolbar>\n  <PageContent>...</PageContent>\n  <Toolbar placement="bottom">\n    <ToolbarLeading>\n      <Button color="secondary" variant="soft" uniform pill aria-label="Filter"><Filter /></Button>\n    </ToolbarLeading>\n    <ToolbarContent>\n      <Button color="primary" pill>New order</Button>\n    </ToolbarContent>\n    <ToolbarTrailing>\n      <Button color="secondary" variant="soft" uniform pill aria-label="Search"><Search /></Button>\n    </ToolbarTrailing>\n  </Toolbar>\n</Page>\n\n<Toolbar placement="bottom">\n  <ToolbarContent fill>\n    <Input variant="soft" pill placeholder="Search" aria-label="Search orders">\n      <template #startAdornment>\n        <SearchSm />\n      </template>\n    </Input>\n  </ToolbarContent>\n  <ToolbarTrailing>\n    <Button color="secondary" variant="soft" uniform pill icon-size="sm" aria-label="New order"><PlusLg /></Button>\n  </ToolbarTrailing>\n</Toolbar>\n\n<Toolbar placement="bottom">\n  <ToolbarContent fill>\n    <Button color="primary" pill block><Plus /> New order</Button>\n  </ToolbarContent>\n</Toolbar>',
+          details: `placement="bottom" sets the bar at the bottom of the page with 48px targets and the device's bottom safe area. ToolbarContent centers a main action; with fill a search field or a single action takes the whole row. The 48px items stand 28px from the sides and above the home indicator, 12px apart, and a bottom bar draws no band: the content runs under and around its glass, as in iOS 26 Mail and Contacts. A search field holds SearchSm, set in Regular; a plus next to it takes iconSize="sm", as Contacts draws it smaller than the other symbols. The page content scrolls under both bars.`
         },
         {
           name: "Background",
           code: '<Page surface="grouped">\n  <Toolbar background="hard">\n    <ToolbarLeading>\n      <NavigationButton action="back" />\n    </ToolbarLeading>\n    <ToolbarTitle>Orders</ToolbarTitle>\n  </Toolbar>\n  <PageContent>...</PageContent>\n  <Toolbar placement="bottom" background="hard">\n    <ToolbarContent>\n      <Button color="primary" pill>New order</Button>\n    </ToolbarContent>\n  </Toolbar>\n</Page>',
-          details: "background sets how a bar meets the content scrolled under it, after the scroll edge effect of iOS 26. soft, the default, covers the content under the controls with the canvas color and fades it out past them over a light blur, with no line. hard is an opaque bar of the canvas color with a line. glass is a translucent, blurred bar with a hairline. solid is an opaque bar with no line. Hard and glass show themselves once content is under the bar: under the top bar after the content has scrolled, over the bottom bar while it continues below. PageHeader, PageFooter, the bars of a Sheet and TabBar take the same values."
+          details: "background sets how a bar meets the content scrolled under it. glass, the default of a top bar, is a translucent, blurred bar with a hairline. soft, the default of a bottom bar, is the scroll edge effect of iOS 26 and draws no line: a top bar with a title covers the content under its controls with the canvas color and fades it out past them over a light blur, while a top bar of controls alone on a page covers only the status bar, and a bottom bar on a page leaves the content clear under and around its controls, as native iOS 26 does (Contacts, Notes, Mail); each glass control stands out by itself. A Sheet's bottom bar fades its content into the panel. hard is an opaque bar of the canvas color with a line. solid is an opaque bar with no line. Glass and hard show themselves once content is under the bar: under the top bar after the content has scrolled, over the bottom bar while it continues below. PageHeader, PageFooter, the bars of a Sheet and TabBar take the same values."
         },
         {
           name: "Disabled",
@@ -21178,7 +22112,7 @@ const available = computed(() => {
       docsUrl: "https://plexui.com/vue/components/tooltip"
     }
   ],
-  generatedAt: "2026-11-08T18:56:39.760Z"
+  generatedAt: "2026-11-09T09:41:08.373Z"
 };
 
 // src/index.ts
@@ -21271,7 +22205,7 @@ function fuzzyMatch(query, text) {
 }
 var server = new McpServer({
   name: "plexui",
-  version: "0.2.2"
+  version: "0.2.3"
 });
 server.tool(
   "list_components",