StickyBar

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

The sticky action-bar wrapper. It stays anchored just above the page edge and translates out of view when hidden is true.

Vue component: StickyBar

Slot	Default classes	Description
root	callback	The sticky action-bar wrapper. It stays anchored just above the page edge and translates out of view when hidden is true.
inner	2 classes	The visible sticky-bar surface. It uses a card fill (overridable per instance via the --vueda-sticky-bar-surface custom property), a bottom divider, and wrapping row layout for primary and secondary controls. The surface is the single strip chrome: callers that pass a :class to the StickyBar root set the surface custom property rather than painting a competing background, so the bar never double-wraps a nested padded surface.
primary	flex flex-wrap gap-1.5 mr-auto	The primary control cluster inside the sticky bar. It wraps compact action buttons and pushes secondary content to the far side.
secondary	flex flex-wrap gap-1.5 items-center	The secondary control cluster inside the sticky bar. It keeps trailing controls aligned while allowing them to wrap on narrow widths.
dirty	4 classes	The dirty-state badge inside the sticky bar. It uses primary tint, uppercase micro text, and pill radius to read as transient state rather than a command.

root

The sticky action-bar wrapper. It stays anchored just above the page edge and translates out of view when hidden is true.

Callback:

({ hidden }) => {
            return {
                class: {
                    "sticky top-[-1px] z-30": true,
                    "transition-transform duration-300 ease-in-out transform": true,
                    "translate-y-[-100%]": hidden,
                    "translate-y-0": !hidden,
                },
            };
        }

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

inner

The visible sticky-bar surface. It uses a card fill (overridable per instance via the --vueda-sticky-bar-surface custom property), a bottom divider, and wrapping row layout for primary and secondary controls. The surface is the single strip chrome: callers that pass a :class to the StickyBar root set the surface custom property rather than painting a competing background, so the bar never double-wraps a nested padded surface.

Default classes:

bg-[var(--vueda-sticky-bar-surface,var(--card))] border-b-hairline px-5 py-[10px]
flex items-center flex-wrap gap-2

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

primary

The primary control cluster inside the sticky bar. It wraps compact action buttons and pushes secondary content to the far side.

Default classes:

flex flex-wrap gap-1.5 mr-auto

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

secondary

The secondary control cluster inside the sticky bar. It keeps trailing controls aligned while allowing them to wrap on narrow widths.

Default classes:

flex flex-wrap gap-1.5 items-center

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

dirty

The dirty-state badge inside the sticky bar. It uses primary tint, uppercase micro text, and pill radius to read as transient state rather than a command.

Default classes:

inline-flex items-center justify-center
h-[22px] px-2 rounded-full
bg-primary/[0.12] text-primary
text-[10px] font-semibold uppercase tracking-[0.06em] leading-none

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