PageTitle

Source: client/lib/theme/vueda-tailwind/shell/index.js

Outer header bar. Carries the bottom hairline that closes the header and, when sticky is set, pins the bar to the top of the scroll viewport at z-30. Merge extra classes via themeOverride (or setTheme) on this slot without overriding the chrome.

Vue component: PageTitle

Slot	Default classes	Description
root	callback	Outer header bar. Carries the bottom hairline that closes the header and, when sticky is set, pins the bar to the top of the scroll viewport at z-30. Merge extra classes via themeOverride (or setTheme) on this slot without overriding the chrome.
container	flex flex-col	Vertical stack that holds the title row. Layout-only; visible chrome lives on PageTitle.root.
titleContainer	5 classes	Title-row band: title cluster on the left, action zone on the right. px-5 py-3 sets the page-chrome horizontal rhythm shared with the ViewList strips so the header reads continuous with the list chrome beneath it.
titleWrapper	2 classes	Inner column that holds the title row. min-w-min keeps long titles from collapsing the column below their longest unbreakable word.
titleRow	flex items-baseline flex-wrap gap-2	Baseline-aligned row that holds the title. Wraps on narrow viewports.
title	text-[22px] font-semibold leading-[1.2] tracking-[-0.005em]	The page <h1>. Display-role type: 22 px / 600 / 1.2 with a small negative tracking so the title reads as the highest-rank text on the page.
buttons	3 classes	Page-action zone on the right of the title row. PageActions in the active view teleports its buttons here. Wraps so a long action list folds onto a second line instead of crowding the title.

root

Outer header bar. Carries the bottom hairline that closes the header and, when sticky is set, pins the bar to the top of the scroll viewport at z-30. Merge extra classes via themeOverride (or setTheme) on this slot without overriding the chrome.

Callback:

({ sticky }) => ({
            class: [
                "border-b-hairline",
                {
                    "sticky top-0 z-30": sticky,
                },
            ],
        })

Source: client/lib/theme/vueda-tailwind/shell/PageTitle.theme.js:17

container

Vertical stack that holds the title row. Layout-only; visible chrome lives on PageTitle.root.

Default classes:

flex flex-col

Source: client/lib/theme/vueda-tailwind/shell/PageTitle.theme.js:26

titleContainer

Title-row band: title cluster on the left, action zone on the right. px-5 py-3 sets the page-chrome horizontal rhythm shared with the ViewList strips so the header reads continuous with the list chrome beneath it.

Default classes:

w-full flex
sm:flex-row sm:justify-between
items-baseline justify-between
gap-2 md:gap-4
px-5 py-3

Source: client/lib/theme/vueda-tailwind/shell/PageTitle.theme.js:30

titleWrapper

Inner column that holds the title row. min-w-min keeps long titles from collapsing the column below their longest unbreakable word.

Default classes:

flex flex-col gap-1
min-w-min

Source: client/lib/theme/vueda-tailwind/shell/PageTitle.theme.js:40

titleRow

Baseline-aligned row that holds the title. Wraps on narrow viewports.

Default classes:

flex items-baseline flex-wrap gap-2

Source: client/lib/theme/vueda-tailwind/shell/PageTitle.theme.js:44

title

The page <h1>. Display-role type: 22 px / 600 / 1.2 with a small negative tracking so the title reads as the highest-rank text on the page.

Default classes:

text-[22px] font-semibold leading-[1.2] tracking-[-0.005em]

Source: client/lib/theme/vueda-tailwind/shell/PageTitle.theme.js:48

buttons

Page-action zone on the right of the title row. PageActions in the active view teleports its buttons here. Wraps so a long action list folds onto a second line instead of crowding the title.

Default classes:

flex gap-1 flex-wrap
justify-end
self-center

Source: client/lib/theme/vueda-tailwind/shell/PageTitle.theme.js:52