Package components

AccordionHeaderExtent is the height of one item's header row, for a caller that reserves room for an accordion in a layout before painting it.

Alert paints a Vega alert: a bordered card surface with an optional leading icon, a medium-weight title and a wrapped muted description. A non-positive bounds.Height takes AlertHeight. The AlertAction slot remains caller-owned.

AlertHeight returns the height of an alert of the given width: py-3 around a title row and, when there is a description, its wrapped lines after a 2px gap.

AspectRatio returns the largest centered rectangle with ratio width/height that fits bounds. A non-positive or unordered ratio produces an empty rect at the center, making invalid layout input deterministic.

Avatar paints fallback, border overlay, and optional badge. Explicit bounds win when both dimensions are positive; otherwise the size variant is used.

BadgeExtent is the size PaintBadge gives a badge with the label: as wide as its text plus padding (px-2 and the 1px transparent border Vega gives every variant), so a layout can reserve room for it (a flex Slot) before it is painted.

Bubble paints one retained content surface and returns its rectangle. The official component has no speech tail, so alignment only positions content inside the row bounds; the bubble is as wide as its text needs, up to 80% of the row (a ghost bubble: all of it), wraps beyond that, and is as tall as its lines. bounds.Height is not used; BubbleReaction takes the returned rectangle.

BubbleReaction paints the official reaction capsule slot. A non-zero ID makes the capsule interactive without introducing reaction state.

CalendarFocusForKey moves the focused day through a month snapshot: Left and Right by a day (reversed in RTL), Up and Down by a week, Home and End to the start and end of the current week. It clamps at the snapshot edges, skips disabled and zero days, and starts at the first enabled day when none is focused. PageUp/PageDown and Shift+PageUp/PageDown change the month and stay the caller's job, so this reports false for them.

Card paints the official default card surface.

CardDescriptionStyle is CardDescription: text-sm in the muted foreground.

CardHeaderHeight is the height of a header holding a title line and, when hasDescription, a description line under it with the header's gap-1.

CardSpacing returns the official content spacing for a card size.

CardTitleStyle is CardTitle: text-base medium, text-sm in a small card.

CarouselStepForKey is the carousel region's keyboard movement: Left/Up go to the previous slide, Right/Down to the next, and Home/End to the ends. The caller owns the index and does not move past either end.

CheckboxExtent is the side of a checkbox's square at the theme's density.

CheckboxHitExtent is the width and height of the interaction region Paint declares around a checkbox at the theme's density. A layout that gives a checkbox this much room can center the square inside it and keep adjacent checkboxes' hit regions from overlapping.

ContextMenuItemHeight is the height AddItem reserves for item. rowHeight is ContextMenuOptions.RowHeight (zero selects the standard 32px label row).

ContextMenuItemWidth is the width a context menu needs for item's row to show its icon, label and trailing content whole: take the largest over the menu's items as the bounds' Width. The menu's own minimum still applies.

Empty paints a centered empty state: media, a medium title and a wrapped muted description, all within max-w-sm and p-12. The group is centered vertically in bounds. It returns the EmptyContent rectangle (max-w-sm wide, ContentHeight high, below the description) for the caller to place actions in; the rectangle is empty when ContentHeight is zero. The dashed border of the recipe is not drawn.

FieldContent paints Vega's FieldContent: a title with its description beneath (gap-1), the text column of a row that has a control beside it. It returns the area it used, so the caller can place the control and size the row; the title is omitted when empty. A nonzero control is the identity of the switch, checkbox or field beside the text, which the title then labels (see FieldTitle).

FieldDescription paints the muted explanation under a title or a control.

FieldError paints Vega's FieldError: one message as plain destructive text, several as a bulleted list (list-disc, gap-1) with empty and repeated messages left out. It returns the area used, zero high when there is nothing to say. The bullets are drawn dots, not characters.

FieldLegend paints a field-set legend. Label legends use the normal control scale; section legends use the slightly stronger heading scale.

FieldSeparator paints the Base UI separator slot with optional centered text (text-sm, px-2 either side).

FieldTitle paints the title of a field: text-sm font-medium, for a row whose control is a switch or a checkbox beside it. A nonzero control makes the title that control's label, as FieldLabel's `htmlFor` does: pressing the text toggles the switch or checkbox (see ui.Canvas.HitLabel).

FitTableHeadings widens each fixed-width column of columns that is narrower than its heading to the width the heading needs, so that no heading is cut or ends in an ellipsis. It is what shadcn's TableHead gets from whitespace-nowrap in an auto-width table, whose column is never narrower than its heading. A column that takes the remaining space (Width <= 0) and a column without a heading keep their width; the heading of a column that is too wide for the room left is still ellipsized.

Call it before BeginTable and before TableCellBounds with the columns and headings that are passed to them: the declared widths are the minimum, and the heading is measured in the language and weight it is painted in, so a translation that is longer than its column does not need a wider column written for it.

components.FitTableHeadings(canvas, theme, columns[:], headings[:])
table := components.BeginTable(canvas, theme, bounds, columns[:])
table.Header(headings[:])

InputOTPComplete reports whether value fills every slot of the code (6 when slots is not positive): the moment shadcn's onComplete fires. The component keeps no state, so the caller compares it with the previous value.

ItemGroupGap is the spacing between items of a group (ItemGroup's gap-4, or gap-2.5 and gap-2 for small and extra-small items).

ItemMediaSize is the side of the media box for a variant at an item size.

Kbd paints one compact keyboard keycap. Zero width or height selects a content-fitted dimension; the returned rectangle is the actual painted size.

Marker paints an optional icon and content using muted metadata styling: a timeline entry, a date separator, a "joined the chat" notice. A nil icon paints none. Without a bounds height the marker is as tall as its line of text (plus the official pb-2 and its rule for MarkerBorder).

MarkerProgress is Marker for work in progress: the spinner stands where the icon does, at the given phase. Advancing the phase and scheduling the next frame are the caller's, as for PaintSpinner. Mark the region a status role where the application declares its accessibility tree: the official marker for progress is role=status.

MeasureBubble reports the size Bubble gives text in a row rowWidth wide, for laying out a list of messages before painting it.

MessageGroupGap is the space between messages of one group, the official MessageGroup gap-2.

MessageScrollerGap is the space between transcript items, the official MessageScrollerContent gap-8: 32px at the default density.

MessageSlotGap is the space between header, content and footer: the official MessageContent gap-2.5, 10px at the default density.

MetricCard paints a dashboard metric with a trend label. Its rows are placed from the theme's metrics, so the card keeps its proportions at every density.

NavigationMenuHover advances the navigation menu's hover switch: while a panel is open, resting on another trigger opens it after delay. It returns the open trigger and the wait before asking again.

NavigationMenuKeyDown moves focus between top-level triggers: Left/Right with wrapping (reversed in RTL), Home/End to the ends, Down/Enter/Space opens the focused trigger, and Up/Escape closes the open one and returns to its trigger. It returns the trigger to focus and the trigger whose panel is open (zero for none), and whether it owned the key.

PaintBadge paints a shadcn Vega badge variant. Badges are presentational; callers that need a link or button should declare that interaction separately so its action and accessible name stay explicit.

PaintChartLegend paints the official centered legend row with 8px series swatches, 6px item-internal gaps, and 16px gaps between entries.

PaintChartTooltip paints the official tooltip-content shell at origin.X/Y. It reads immutable payload rows and series metadata and performs no value formatting, lifecycle management, hit testing, or data-geometry rendering.

PaintInput paints the official Vega input recipe and returns its normalized geometry. Byte offsets describe DisplayValue (or Value when DisplayValue is empty) and are clamped to UTF-8 boundaries before painting.

PaintItemSeparator paints an ItemSeparator across bounds' width at its top and returns the height it used (ItemSeparatorHeight).

PaintNativeSelect paints the official Vega select trigger and declares combobox semantics without implementing a source-owned popup.

PaintNativeSelectSemantics declares only the trigger hit and accessibility state. A platform adapter may pair it with an OS-owned popup without asking the component to draw or retain that popup.

PaintProgressRow paints a ProgressLabel at the start and a ProgressValue at the end of a line, with the track on the line below, and returns the track's rectangle. bounds.Height is ignored; the row is ProgressRowHeight tall. value is the caller-formatted text, such as "64%".

PaintSeparator paints one one-pixel divider centered in the supplied layout bounds. The bounds may therefore retain a larger hit-free layout gap.

PaintSidebarInset paints the page surface that goes with the Inset variant: the region beside the sidebar takes the sidebar color and the content is a rounded background-colored card inside an 8px margin, flush with the sidebar edge (m-2 ml-0). It returns the card's bounds for the caller's content.

PaintTextarea paints the official Vega multiline recipe and returns its normalized geometry. The official minimum height is 64 logical pixels.

ParseColorHex accepts #RGB/#RRGGBB and, when alpha is enabled, their alpha forms. Product-specific formats and validation stay with the caller.

Progress paints the official bounded horizontal progress track and indicator. A non-finite or negative fraction is treated as zero.

Like the source, the indicator is a plain bar inside a rounded track that clips it: its left end follows the track's round end at any width, and its right end is flat until the bar fills the track.

ProgressIndeterminate paints a track whose indicator is a segment sliding across it, for work of unknown length. phase is the caller's position in the cycle: 0 puts the segment off the left end, 1 off the right end. The caller schedules the frames; nothing here keeps time.

ProgressRowHeight is the height of a labeled progress row: a text-sm line, the root's gap-3 and the track.

RadioGroupKeyDown applies radio-group keyboard navigation to current. Arrow keys wrap through enabled non-zero options. Physical Left and Right reverse in RTL. Base UI leaves Home and End to the page, so they are not owned here. The returned bool reports whether key is owned by the pattern.

RangeSliderKeyDown applies Base UI's range-slider keyboard rules to one thumb in a sorted values slice and reports whether it changed any value. Arrows move by step, Shift+arrow and PageUp/PageDown by largeStep, and Home/End go to the ends of the thumb's own range. Thumbs keep minSteps*step apart: moving a thumb pushes its neighbours, while Home and End stop at the neighbour as Base UI's range thumb does.

ResizableHandleForKey moves focus between resize handles with F6 and Shift+F6, wrapping and skipping zero identities. The application owns the handles' identities and the focus result.

SegmentedControlKeyDown applies horizontal roving focus to current. Left and Right wrap through enabled non-zero options and reverse in RTL; Home and End choose the first and last enabled options. Vertical arrows are not owned by a horizontal segmented control.

SegmentedControlWidth is the narrowest width at which every option's label is whole with the theme's control padding on both sides of it. The options are of equal width, so it is the widest label's, times their number: a control given less than this cuts its longest label.

SliderKeyDown applies Base UI's slider keyboard pattern to value with Base UI's default large step of 10 value units: the arrows move it by one step (Right and Up up, Left and Down down; Left and Right swap in RTL), Shift with an arrow and PageUp/PageDown by 10 units, Home and End to the minimum and maximum. A zero or negative step moves by one unit. The result is clamped and snapped like Slider.Step does; the returned bool reports whether key is owned by the slider pattern, so the caller passes anything else on.

next, handled := components.SliderKeyDown(m.volume, 0, 100, 5, components.LTR, event.Key, event.Modifiers)

SliderKeyDownLarge is SliderKeyDown with Base UI's configurable largeStep: the number of value units Shift+arrow and PageUp/PageDown move, not a number of steps. Base UI's default is 10, which SliderKeyDown uses, so a step of 5 moves 10 units (two steps) rather than 50. A non-positive largeStep also uses 10. The result is snapped to step, so a large step that is not a multiple of step lands on the nearest one.

SubmenuPlacement places a submenu beside its trigger row, on the right, top aligned with the row (Base UI's align start and -3px align offset), flipping left or adjusting inside the viewport when there is no room. It is the shared placement a menu's submenu controller uses instead of hand-computed edges.

SubmenuSafe reports whether point is in the grace area between a submenu trigger and its open panel, so a diagonal pointer move does not close the submenu before it arrives. It is the box of the two rectangles with a small margin: more forgiving than a strict triangle, and it does not block pointer events outside the pair the way Base UI's safe polygon does.

SwitchExtent is the width and height of a switch at the theme's density.

SwitchHitExtent is the width and height of the interaction region Paint declares around a switch. The padding is the fixed 12 by 8 logical pixels Paint adds, not scaled by density.

TableCellBounds appends to dst the cells of a row that fills row, as Header and Row paint them: fixed widths in order, a column without one taking what is left, cells that no longer fit left out. It lets a caller put something on a cell, a sort arrow or a hit region, without painting the row first.

TableHeaderHeight is the default height of the header row, TableHead's h-10.

TableRowHeight is the default height of a body or footer row: TableCell's p-2 around one 20px line, scaled to the theme's control height.

TabsKeyDown applies orientation-aware roving focus to current. Arrow keys on the tab list's layout axis wrap through enabled non-zero options; Home and End choose the first and last. Horizontal Left and Right reverse in RTL.

ToastHeight is how tall PaintToast makes the toast, for a caller that stacks toasts itself.

ToggleGroupKeyDown applies orientation-aware roving focus to current. Arrow keys on the group's layout axis wrap through enabled non-zero options; Home and End choose the first and last. Horizontal Left and Right reverse in RTL.

Typography paints one line using the theme's type scale. Rich text, wrapping, and document layout remain separate concerns of the text subsystem.

ToastQueueTimeout and ToastQueueLimit are Base UI's default toast lifetime (5 seconds) and visible limit.

HoverTooltipDelay is how long the pointer rests on a control before its tooltip appears. The pinned shadcn TooltipProvider uses delay 0, so a tooltip appears with the pointer; an application may pass a longer delay to Paint when it wants one.

ItemSeparatorHeight is the room an ItemSeparator takes: a hairline with my-2 above and below.

MenuTypeaheadReset is how long Base UI keeps a menu's typed prefix before it starts a new one.

MessageScrollPreviousPeek is the slice of the previous item the official scroller keeps above an anchored turn, scrollPreviousItemPeek.

MessageScrollerEdgeThreshold is how close to an end the viewport counts as being at it, the official scrollEdgeThreshold. Inside it the jump button for that end is not offered, so a reply that grows by a line while streaming does not make the button flicker.

TooltipDefaultSideOffset is the gap between a tooltip and the control it names when TooltipOptions.SideOffset is zero. The compact icon buttons of desktop toolbars read better with the tooltip clear of them.