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 min-h-vueda-control items-center gap-2	Row that keeps the title and its reserved loading indicator together. Its minimum height matches a standard control, so adding page actions does not increase the header height. The title text can wrap within the row.
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.
titleSkeleton	h-[26px] w-48	Placeholder shown in place of the <h1> while the active view has registered an empty title. Sized to one line of the display-role title.
loading	flex size-5 shrink-0 items-center justify-center text-base	Permanent space beside the title for the loading indicator, keeping the header stable when loading toggles.
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

Row that keeps the title and its reserved loading indicator together. Its minimum height matches a standard control, so adding page actions does not increase the header height. The title text can wrap within the row.

Default classes:

flex min-h-vueda-control items-center 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

titleSkeleton

Placeholder shown in place of the <h1> while the active view has registered an empty title. Sized to one line of the display-role title.

Default classes:

h-[26px] w-48

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

loading

Permanent space beside the title for the loading indicator, keeping the header stable when loading toggles.

Default classes:

flex size-5 shrink-0 items-center justify-center text-base

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

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:60