Plex UI changelog: release notes for every version with new components, breaking changes, bug fixes, and dependency updates by date

This changelog documents significant updates, bug fixes, and improvements to components in the Plex UI design system. Entries follow the Keep a Changelog format.

0.20.0 (2026-10-26)

Added

@plexui/vue: Plex UI for Vue 3. Every component, icon and meaningful hook has a Vue counterpart with the same names, props, defaults and rendered markup, styled by the same @plexui/styles CSS modules and checked against the React components by parity tests. Each component page has a Vue tab, and the Vue guide covers installation, the Vite plugin and SSR. The MCP server takes framework: "vue", llms-vue.txt describes the Vue API, and plexui.com/r/vue is a registry for the shadcn-vue CLI.
InputGroup: an input or textarea with icons, text, buttons and menus attached inside one frame. InputGroup.Addon sits before or after the control (align="inline-start" / "inline-end") or as a header or footer row ("block-start" / "block-end"); InputGroup.Button is a ghost Button sized from the group; InputGroup.Text holds prefixes, units and counters. Every Input size from 3xs to 3xl, both variants, pill, disabled and invalid. Also in @plexui/vue as InputGroup, InputGroupInput, InputGroupTextarea, InputGroupAddon, InputGroupButton and InputGroupText.
Menu.Item takes a description: a second line under the label, with the label going semibold on its own. Same "item + subtitle" anatomy a Select option with a description already had, so a two-line menu item no longer needs hand-written typography.
Select accepts checkPosition="none", which removes the indicator column from the list. A menu of one-shot actions, or a list whose option view states the selection itself, no longer reserves an empty 16px column in every row.
Slider accepts aria-label and aria-labelledby, so a slider without a visible label can be named. Range thumbs keep their Minimum and Maximum names.
MarkdownEditor accepts aria-label and aria-labelledby for its editable region, which a <label for> cannot name.
Menu.ItemAction accepts aria-label, so its icon-only button can be named.
DatePicker and DateRangePicker calendars move focus from the keyboard: the arrow keys by a day or a week, Home and End to the start or end of the week, Page Up and Page Down by a month. The calendar turns to the next or previous month when needed, and focus stays put rather than move to a day outside min and max.
Kbd: a key or a keyboard shortcut such as ⌘K, in text, in a tooltip or at the end of a menu item. Kbd.Group holds keys pressed together; three sizes, soft and outline, both mixing the surrounding text color so a key reads on any surface. Also in @plexui/vue as Kbd and KbdGroup.
Breadcrumb: the trail of pages above a page title. A nav landmark around an ordered list; Breadcrumb.Item is a link (href or to, through the linkComponent of PlexUIProvider), a button (onClick), a plain step or the current page (aria-current="page"). Custom separator, size="sm", and long trails wrap. Also in @plexui/vue as Breadcrumb and BreadcrumbItem (the separator is a slot).
Tabs take overflow="menu": the tabs that do not fit move into a menu at the end of the row instead of a sideways scroll. When the active tab is a hidden one, the menu button shows its name and carries the selection; badges move into the menu with their tabs. overflowLabel sets the button's text.
Dialog.Body (Vue DialogBody): with it, only the body scrolls and the header and footer stay in view. Dialog.Content takes placement (center, top, bottom, start, end, fullscreen) for search dialogs, bottom sheets and side panels, mobilePlacement for 640px and below (a centered dialog that becomes a bottom sheet on phones), and onOpenAutoFocus / onCloseAutoFocus.
Field takes a labelAction: a link or small control at the end of the label row, such as "Forgot password?".
Checkbox and RadioGroup.Item take a description: a second line under the label, outside it, linked through aria-describedby. Switch already had one.
Menu.Item and Menu.Link take danger for destructive actions: the label and the highlight use the danger color.
EmptyMessage takes size="sm" for an empty panel, card section or list, and align="start" for an empty state under a section heading.
Alert takes banner: a full-width strip with square corners and lines above and below only, for offline, read-only or new-version notices.
Input takes variant="ghost": no border and no fill, for a field its container already frames, such as a search line at the top of a dialog.
FieldError takes icon={false} for a message that stands alone, such as under a centered code input.
CopyButton and CopyTooltip report the clipboard result through onCopy(copied) (Vue: the copy event).
--sidebar-menu-sub-max-height sets the height an open SidebarMenuSub animates to (1000px by default), so long lists are not cut off.
Select takes searchSize for the search field in its menu, such as 2xl for 44px touch targets on phones.
@plexui/ui/styles/tailwind-utilities.css is exported, for apps that import the token files one by one instead of @plexui/ui/css.

Changed

@plexui/mcp 0.2.0: every tool takes framework: "vue" for the @plexui/vue docs, and get_component finds components by their exported and part names.
The CSS now ships in its own package, @plexui/styles: design tokens, globals and the CSS module of every component. @plexui/ui depends on it and re-exports it, so @import "@plexui/ui/css", the @plexui/ui/styles/*.css files, @plexui/ui/vite and @plexui/ui/types keep working unchanged. Rendered markup and compiled CSS are identical to 0.19. Install @plexui/styles on its own to use the same styles from another framework.
Grouped Select menus separate their sections. A group heading is now smaller and semibold in the secondary color instead of an option-sized muted row, a rule runs between sections, and the heading starts at the row's content edge instead of being indented to the option labels.
SidebarGroup no longer accepts onOpenChange. The group has no toggle of its own and never called it; set open from your own control, and a closed group hides its SidebarGroupContent.
@plexui/ui requires React 19 in peerDependencies. The components already used React 19 APIs (use(Context), <Context value>, ref as a prop) and could not run on React 18.
Published modules use fully specified imports (./Button.js, lodash/clamp.js), so the package resolves under webpack 5's strict ESM rules, Node ESM and TypeScript NodeNext. The PlexUI global types now ship with the declarations instead of being dropped from them.
Field takes its label size from the child control: <Field><Input size="sm" /></Field> gets an sm label without repeating the size. An explicit size on Field still wins, and a render prop keeps md.
FloatingLabelSelect shows its error as the same plain line as FloatingLabelInput, so the two read alike on one form. It used to render FieldError with an icon.
The Alert icon sits on the first line of the message, next to the title, instead of in the middle of a title and a description. A one-line alert looks the same.

Fixed

checkPosition="none" also drops the indicator column from a group's expand row (optionsLimit.label). The row kept a 16px slot and sat indented under options that no longer had one.
Select menus are never narrower than the field they belong to. listWidth="auto" still grows with the content, but the menu's min-width now falls back to the trigger's width instead of collapsing to nothing.
Select menus line up with their trigger's edge. align="start"/"end" no longer apply a hidden -5px offset that pushed the menu outside the field.
Select search inputs have a default accessible name and support searchAriaLabel independently of the trigger label. DatePicker's year search is named Search year.
DatePicker and DateRangePicker use a complete attribute selector when excluding exiting calendars from their height calculation.
Grouped Select lists expose each group to assistive technology: a role="group" named by its heading. The arrow keys still move through the options of every group in order, and the look is unchanged.
DatePicker month and year menus use Plex UI Select, with accessible names and consistent keyboard navigation and styling across browsers.
Select and DatePicker now forward accessible labels, descriptions and invalid state to their interactive triggers. aria-labelledby includes the visible selected value or placeholder, keeping both the field name and current selection available to assistive technology.
Select checkmarks are vertically centered on the title's first line at either position, including options with multiline descriptions.
CopyButton without children, the copy action in every CodeBlock, has an accessible name: Copy, then Copied after a click.
Slider thumbs take their accessible name from label (range thumbs keep Minimum and Maximum, as in "Price range Minimum"). In range mode the label no longer points at a missing input, and the reset button is labelled with resetTooltip.
TagInput keeps every tag when several are pasted at once (pasting a,b,c used to keep only c), stops at maxTags, and no longer throws when a tag containing a double quote is selected. Select option lookup escapes values the same way.
DatePicker and DateRangePicker calendars keep the min and max days selectable. A max at midnight or a min later in the day used to disable that whole day.
DatePicker and DateRangePicker month navigation buttons are labelled Previous month and Next month. The DateRangePicker month stepper also works with Enter and Space.
SidebarProvider with onOpenChange but no open expands and collapses again. Controlled mode follows the open prop; onOpenChange is always called.
Image renders a new src after an earlier one failed to load.
Switch no longer points aria-describedby at a description it does not render (a description without a label).
A Checkbox or Switch with a description inside a Field with one: the two descriptions have their own ids (the control's ends in -label-description) and the control is described by both. They shared an id, and a Switch dropped its own description.
DataTable supports uncontrolled row selection, filtering and column visibility, also with only an on*Change callback (row.getIsSelected() threw without a rowSelection prop). It re-paginates when pageSize changes, including to and from 0 or Infinity, and labels its pagination buttons and rows-per-page select.
Space and Enter on the clear button of SelectControl and FloatingLabelSelect clear the value instead of opening the list, also inside a Menu.Trigger.
CopyTooltip copies with Enter or Space, not only with a pointer press.
TagInput with maxTags={0} (no limit, as the input already treated it) no longer renders a stray 0 where the counter goes.
Input and Textarea forward autoComplete and set aria-invalid when invalid is true. FileUpload puts aria-invalid and its error description on the visible trigger instead of the hidden file input.
TextLink keeps an explicit target, as ButtonLink already did.
A TextLink without href but with onClick is focusable and runs its action on Enter and Space.
Button color and DatePicker triggerDateFormat are optional in the types, matching their runtime defaults.
Select returns focus to its trigger after choosing an option or pressing Escape; it used to drop focus to the page.
With showTime, DatePicker keeps the chosen date and time within min and max, and the time fields show the adjusted time.
ProgressSteps with variant="minimal" renders a div with role="progressbar" instead of a nav, where that role is not allowed.
The header of the primary sorted DataTable column carries aria-sort.
StatCard's info tooltip can be reached with the keyboard and is announced as "More information".
TagInput keeps a tab stop when maxTags is reached, so tags can still be removed from the keyboard.
MarkdownEditor toolbar toggles expose their state through aria-pressed.
FloatingLabelInput with multiline forwards props such as required, maxLength and key handlers to its textarea, and resizes when a controlled value or rows changes.
Field names controls that its label's for cannot reach. The label has an id, and a child without its own aria-label, aria-labelledby or label gets aria-labelledby pointing at it, so a Select or DatePicker trigger in a Field reads "Role, Admin" instead of only its value. A render prop receives aria-labelledby among the field props.
CopyButton (and so every CodeBlock copy button) and CopyTooltip show the copied state only after the clipboard write succeeds; a failed write used to show the check mark anyway. A second click while the write is in flight no longer copies twice.
A long FieldError message wraps inside the field, and its icon stays on the first line.
Sidebar: the collapsed header no longer hides or shrinks the collapse trigger; collapsed-state rules no longer hide labels, group labels and badges in an expanded sidebar nested inside a collapsed one; in React the phone layout is used on the first render instead of one frame of the desktop sidebar.
Toasts stay inside the screen on phones instead of keeping the 400px desktop width, with the same inset on both sides.
The opaque soft fills (--color-background-{info,success,warning,caution,danger,discovery}-soft and their hover and active states) have dark-theme values: they stayed light, under text that turned light.
Checkbox plays its check animation only for the checkbox in use, not for every checked box when a list first renders or a tab with checkboxes opens.
OTPInput cells narrow to fit a 320px screen, and a field cleared from outside (a wrong code wiped by the form) puts the caret back in the first cell when the focus was in the field.
Select's hidden form input uses its own class instead of Tailwind utilities, so it can no longer take the trigger's width in an app whose Tailwind build orders w-full after sr-only or does not generate sr-only.
The Tabs thumb follows the active tab when tabs are added, removed, reordered or relabelled.
Menu.Trigger forwards its props and ref to the trigger element.
AnimateLayoutGroup applies insertMethod and preventInitialTransition.
ButtonLink, TextLink and Menu.Link type their props from the link component set in PlexUIConfig, as the installation guide describes. The augmentation used to reach only PlexUIProvider, so <ButtonLink to="/x"> with a router Link failed to type-check. PlexUIOverrides still works.
SidebarMenuButton with asChild renders the child element as the button. The button props used to land on an inner span wrapped around the child, so a link lost the button styles and aria-current.
Sidebar no longer imports the undeclared @radix-ui/react-slot, which strict installs (pnpm without hoisting, Yarn PnP) could not resolve.
Field merges its aria-describedby with the child's own and keeps the child's explicit aria-invalid.
An Avatar with onClick uses name as its accessible name instead of announcing only the initial, or nothing for icon avatars.
A sidebar item's chevron turns only when that item is expanded, not when an item it is nested under is.
Slider, the useBreakpoint hook, useDocumentTheme and the userAgent helpers render on the server. useBreakpoint returns false on the server and on the first client render, then reads the viewport; useDocumentTheme returns light there, then follows the document.
Slider marks follow new values and labels when their count stays the same (changing min, max and marks together no longer throws), range marks are positioned, thumbs show a focus ring from the keyboard, the value input accepts negative numbers, and a typed value that has not been reported yet no longer overwrites a newer change. usePrevious returns the value before the latest change.
Select's option list is a listbox: aria-selected follows the selection, aria-activedescendant the highlighted option, and multiple selection sets aria-multiselectable. Typeahead in grouped options picks the next match, Ctrl, Cmd and Alt shortcuts no longer change the value, a multiple Select with name submits every value, and a disabled Select is neither submitted nor validated.
FloatingLabelSelect used as a Select or Menu trigger opens from the keyboard and gets focus back when the list closes.
Clicking the frame, an adornment or the label of an email or number Input or FloatingLabelInput no longer throws. Clear buttons keep focus in the field, and FloatingLabelInput keeps an explicit aria-invalid such as the one Field passes.
OTPInput keeps every digit in its cell, DateInput shows its value again when it loses focus with a partly typed date, a disabled TagInput cannot remove or add tags, and InputGroup keeps its invalid border while focused.
DatePicker and DateRangePicker accept equal min and max, name every day with its full date, mark the selection with aria-pressed and today with aria-current, and their id is optional. DateRangePicker disables shortcuts outside min, max or maxRangeDays, and starts a fresh selection after its value is reset to null.
DataTable enableRowSelection renders the checkbox column it promised, rows with onRowClick work from the keyboard, grouped headers span their columns, the rows-per-page select shows the real page size, and pagination stays while rows overflow it.
MarkdownEditor places the caret where you click, saves links as links instead of escaped HTML, runs Cancel and Remove on Enter, and keeps focus inside its link dialog. The CodeBlock copy button shows its focus ring, and expanded code taller than maxExpandedHeight scrolls.
FileUpload without multiple replaces its file instead of adding a second one.
Clicking the dimmed area around a Dialog closes it. A Menu.Item with only onClick is interactive, a disabled Menu.Link does not navigate, and Menu.Label has its 12px text again.
Image and Avatar show an image that loaded before hydration. Button and Badge keep a Tooltip trigger or a render-prop child intact.
A collapsed SidebarMenuSub leaves the tab order, and an onClick on SidebarTrigger or SidebarMobileMenuButton runs before the toggle and can cancel it.
ButtonGroup.Text has its padding and gap again, Button gutterSize="3xs" has a style, transition groups render children keyed like constructor, and AnimateLayoutGroup applies hideOverflow and itemAnchor.
@plexui/ui and @plexui/vue declarations pass a consumer type check with skipLibCheck off, also together (one ColumnMeta augmentation). @types/luxon and @tanstack/table-core are dependencies of the packages that use them.
The registry button and menu items no longer re-export types that do not exist. The registry styles item is imported from your stylesheet after Tailwind and carries @source, so Tailwind generates the classes the components use.
The MCP server finds components by their exported and part names (DataTable, Toaster, Dialog.Trigger), its React setup guide includes the layer order, @source and linkComponent, and llms-full.txt is generated from the docs.
@plexui/vue: Vue renders what React renders with radix-ui 1.8 (Tabs radiogroup, Tooltip content, aria-controls only while open, Popover and Dialog dismiss on the click after an outside press, RadioGroup, Checkbox and Switch form inputs) and follows every fix above. Vue-only fixes: Card, ButtonLink and TextLink give vue-router's RouterLink a to; DialogTrigger, DialogClose, MenuTrigger and Field work with a child forwarded through <slot />; closed Popover, Dialog and Select render no teleport on the server; Escape closes a Dialog with a forced-open Tooltip on the page; Input and FloatingLabelInput accept readonly; keyed multi-root <template v-for> items in transition groups; TagInput emits plain objects; DateRangePicker follows in-place edits of its range; missing props types are exported.

0.18.1 (2026-06-20)

Fixed

Loading spinner centring in Button. When loading was set, the spinner pinned to the top-left of the button instead of being flex-centred inside the loader's inset:0 overlay. The cause was a CSS-cascade collision: TransitionGroup applies both .ButtonLoader (the consumer class with display: flex) and its own .TransitionGroupChild (display: block) to the same wrapper <span>, and TransitionGroup.module.css loads after Button.module.css, so block won at equal specificity. Scoping the selector as .Button > .ButtonLoader bumps specificity to (0,2,0) and restores centring.

0.18.0 (2026-05-20)

Added

Built-in password reveal toggle on FloatingLabelInput. A type="password" field now renders the eye show/hide toggle on its own, so no more wiring up an endAdornment button and swapping type by hand. The new revealable prop controls it: it defaults to true for password inputs that don't pass their own endAdornment, and you can set revealable to false to opt out. A companion onRevealedChange callback reports the toggle state, so custom-masked fields (e.g. an SSN input) can drive their own reveal with the same built-in button. If you already render your own visibility toggle in endAdornment, remove it (or set revealable to false) to avoid a duplicate.

0.17.1 (2026-05-04)

Fixed

Text color consistency on SelectControl and TagInput. Both components were missing a base color rule and inherited the page foreground (~#181818), which sat one step lighter than the --color-text token used by Input, Textarea, and the TagInput tag chips themselves. Side-by-side controls in a form now share the same value text color (--input-text-color). Placeholder state on SelectControl (data-selected="false") is unchanged.

0.17.0 (2026-05-02)

Added

Vite plugin: new sub-export @plexui/ui/vite. One line in vite.config.ts replaces every install-time gotcha: pins css.transformer = 'postcss', pins build.cssMinify = 'esbuild' (so Vite 8's Lightning CSS minifier doesn't strip @layer declarations), and injects <style>@layer theme, base, components, utilities;</style> into <head> as a runtime failsafe. Setup becomes:
```
import { defineConfig } from "vite";
import plexui from "@plexui/ui/vite";

export default defineConfig({ plugins: [plexui()] });
```
Your main.css then only needs the Tailwind, Plex UI, and source imports, with no manual @layer line. vite is an optional peer dependency (range: 4.x to 8.x); if you don't use Vite, you can ignore this export. Layer-order injection can be disabled with the injectLayerOrder: false option. See /docs/installation → On Vite.

0.16.0 (2026-05-02)

Changed

Default pill shape on Button, ButtonLink, Select, and SelectControl is now false. The JSDoc on these props always declared @default false; the runtime now matches. Square corners are the modern Plex default and what the Plex docs and Figma kit have shown all along. To keep a pill shape on a specific control, pass pill explicitly.

0.15.3 (2026-05-02)

Fixed

@plexui/ui/css distribution: radius, font, and font-weight tokens are now declared in :root via the new internal variables-tokens-root.css, instead of being pulled in through the @theme static block (which is what 0.15.2 attempted). The @theme static approach worked for component var(--radius-md) lookups but reset Tailwind's own theme via --radius-*: initial, breaking consumer-side utilities like rounded-md, rounded-full, and text-sm. The new file declares the same tokens in :root so components see them but Tailwind's theme stays untouched. The standalone @plexui/ui/styles/variables-tailwind-theme.css sub-export is unchanged and remains opt-in for consumers who explicitly want the Plex scale to drive their Tailwind utilities.

Documentation

Installation guide (/docs/installation): added an explicit @layer theme, base, components, utilities; declaration to the recommended snippet so cascade layer order is pinned regardless of CSS transformer. New sub-sections cover the Vite + Lightning CSS layer-reorder gotcha (with a one-line workaround to switch the transformer back to PostCSS), an optional skip-Tailwind-preflight recipe (Plex UI ships its own reset), and an opt-in Plex Tailwind theme recipe for consumers who want their rounded-md utilities to use the Plex radius scale.

This release is on npm but should not be used. Its @theme static import inside @plexui/ui/css resets Tailwind's radius, font, and font-weight defaults to initial, which breaks Tailwind utilities like rounded-md, rounded-full, and text-sm in consumer projects. Upgrade to 0.15.3 immediately.

0.15.1 (2026-05-01)

Changed

SelectControl: trigger value text now uses --font-weight-normal (400) by default instead of --font-weight-medium (500), matching Input so mixed form rows (e.g. Card Number / Month / Year / CVV) read as one cohesive set of value fields. Toolbar-style usage that wants the heavier "button" feel can opt back in via the existing --select-control-font-weight token.

0.15.0 (2026-04-28)

Added

TagInput: new sm size (28 px) matching Input and SelectControl sm. Sits flush in horizontal filter rows alongside the matching Select.
TagInput: new pill prop. Both the container and inner chips become fully-rounded so the control reads as a single rounded surface, matching Input pill and SelectControl pill.
Menu.Content: exposes onCloseAutoFocus. Call event.preventDefault() to keep the trigger from regaining focus (and its focus-visible ring) after a mouse pick, useful when the menu is paired with a SelectControl in filter rows.

Changed

TagInput: chip height, font-size, and gutter now scale per-size via --tag-input-tag-{height,gutter,font-size} (defaulting to --tag-input-height / --tag-input-font-size), so a chip-filled container is exactly the same height as an empty one. Previously chip was fixed at --control-size-xs (26 px), which made md/lg/xl containers grow when chips were added.
TagInput: container border-radius now scales per-size (sm=6, md=8, lg=10, xl/2xl/3xl=12), matching SelectControl's scale. Chip border-radius is concentric with the container (container_radius − inner_padding) at every size.
TagInput: pill-mode radius is now single_row_height / 2 instead of --radius-full. Visually identical when there's one row, but no longer flares into a giant ellipse when chips wrap to a second/third row.
TagInput: the X close-button inside a chip now has symmetric whitespace on top, right, and bottom (driven by chip's vertical padding), instead of being pulled to the chip edge with margin-right: -1px.

Fixed

TagInput: added a ResizeObserver on the container and every chip so the internal inputWidth recomputes on any layout change (size/pill toggle, window resize, font load). Without it, a CSS-var-driven reflow didn't trigger React re-renders, which left a stale inputWidth and caused the input or last chip to wrap onto a phantom extra row right after toggling size.

0.14.3 (2026-04-27)

Fixed

CodeBlock: mask the 8 px gap between the in-block CopyButton's right edge and the codeblock's right edge so horizontally-scrolling code text can no longer peek past the button. .CopyButtonContainer now casts an 8 px box-shadow in the codeblock's surface colour, which renders behind the button and on top of the scrolling <pre>, invisible against the rest of the chrome but enough to hide overflowing characters (e.g. the tail of a long raw.githubusercontent.com/…/AGENT.md URL).

0.14.2 (2026-04-26)

Fixed

EmptyMessage: relax the container min-width from a hard 20rem to min(20rem, 100%) so the component shrinks gracefully inside narrow grid columns instead of overflowing its parent. A 320px-wide EmptyMessage placed in a 304px column was pushing 16px of horizontal overflow; now it caps at the column width and re-flows the title and description text below it.

0.14.1 (2026-04-26)

Fixed

CodeBlock: restore the ghost-secondary hover background on the in-block CopyButton. A long-standing override in CodeBlock.module.css forced the Button's ::before pseudo-element to opacity: 0 !important, suppressing the standard Plex ghost-button hover affordance. Removed; copy buttons now light up on hover with the same subtle gray as every other ghost-secondary Button on the system.
Icons: fixed three previously-unrendered icons (Education, HapticFeedback, ThumbMixed) that wrapped their paths in a <g clipPath> referencing a <rect width="1em" height="1em">. Inside the viewBox="0 0 24 24" coordinate system, "1em" collapsed to ~1 user-unit and clipped the icon out of view. Removed the broken clip wrapper.

Changed

AppStoreSquare icon: cleaner double-rounded-rect outline geometry; matches the rest of the AppStore family in stroke weight and proportions.

0.14.0 (2026-04-25)

Added

Input.AdornmentButton (Input)
New compound sub-component for in-input action buttons (voice toggle, copy, send, visibility). Picks up the same --input-clear-size / --input-clear-pill-offset / --input-clear-icon-size tokens as the built-in clear button, so it stays perfectly aligned inside any Input regardless of size or pill shape. Supports aria-pressed for toggle state and inherits all native <button> props. A new color prop (caution / danger / success / info / discovery) tints the pressed state with Plex's semantic palette (same tokens Button uses), so a recording-mode mic reads as amber, a destructive retry as red, etc.
ButtonGroup component (ButtonGroup)
Wraps any row of controls (Button, Input, trigger buttons) and strips the shared border so they read as one unit. Compound API with ButtonGroup.Separator and ButtonGroup.Text (muted label pill; asChild supported). Nest ButtonGroup inside itself for visually separated sub-groups (gap driven by --button-group-nested-gap). Supports orientation="horizontal" | "vertical" for toolbars, steppers, split buttons, pager + arrow nav, rich message composers, and search affordances.
Accordion component (Accordion)
Compound primitive built on Radix Accordion.Root: compose Accordion.Item, Accordion.Trigger, Accordion.Content. Supports type="single" | "multiple", collapsible, per-item disabled, and controlled value/onValueChange. Styled through --accordion-item-divider-color, --accordion-trigger-padding-block, --accordion-icon-size, and a full set of typography / transition tokens. Use it for FAQ sections, settings panels, and collapsible reference lists.
Progress component (Progress)
Linear progress bar built on Radix Progress.Root. Accepts value (0 to max) or null for an indeterminate sweep. Styled through --progress-height, --progress-track-color, --progress-indicator-color, --progress-radius, --progress-indeterminate-duration. Use it for uploads, onboarding completion, and any determinate "X of Y" feedback; CircularProgress / LoadingIndicator stay for loading-spinner cases.

Changed

Input: the disabled state no longer fades the entire Container. The opacity now applies to the input text and the built-in Clear button only, so any Input.AdornmentButton nested via endAdornment stays at full opacity and remains interactive (e.g. a voice-mode toggle that puts the input into a read-only recording state while itself staying clickable).

0.10.0 (2026-04-23)

Added

Label component (Label)
Standalone accessible label built on Radix's Label.Root. Pairs with any form control via htmlFor, prevents double-click text selection, and forwards clicks to the associated control. Props: htmlFor. Styled through --label-color, --label-font-size, --label-font-weight, --label-line-height. Use Field for stacked form rows; use Label when pairing with a standalone Checkbox, Switch, or custom layout.

0.9.0 (2026-04-23)

Added

Separator component (Separator)
Thin wrapper around Radix's Separator.Root for horizontal or vertical dividers. Props: orientation="horizontal" | "vertical" and decorative. Styled through --separator-color and --separator-thickness tokens so any scope can override look without subclassing.

0.8.0 (2026-04-23)

Added

Card component (Card)
New surface primitive for composing forms, pricing tiles, and showcase cards. Compound API (Card.Header, Card.Title, Card.Description, Card.Content, Card.Footer, Card.Action) with variant="outline" | "solid" | "ghost", size="sm" | "md" | "lg", and optional href + interactive props. When href is provided the Card renders as the configured LinkComponent (e.g. next/link) via useLinkComponent().

0.7.98 (2026-04-23)

Added

Toast component (Toast)
New themed notification surface built on sonner. <Toaster /> + toast() re-exported from @plexui/ui/components/Toast. Light/dark sync via data-theme and MutationObserver (no next-themes dependency). Semantic success/error/warning/info variants drive icon color from --color-text-{intent}-outline tokens, no richColors. Defaults: top-center position, 3000ms duration, shrink-to-fit width centered within a 400px max, no close button (persistent toasts use an inline action). compact helper export for centered-text layouts. Re-exports Action, ExternalToast, ToastT types.
Avatar initial renders behind image while loading (Avatar)
Initial letter (or icon / overflow count) now renders as a placeholder layer underneath the image. On slow networks the avatar is never visually empty while the image is fetching, and if the image fails the placeholder remains, and onError just hides the image layer.

Changed

Select options with descriptions auto-bold title (Select)
The item + subtitle pattern is now built into the component: any option carrying a description keeps its label at font-weight: semibold in every state (idle, highlighted, selected). Consumers and AI-generated demos no longer need to pass optionClassName="font-semibold". .OptionDescription's own font-weight: normal rule protects the description line.
Select option layout refactored into leading / trailing groups (Select)
Title and description now stack inside an OptionLeading column; the OptionIndicatorSlot is a dedicated start/end column at the PressableInner level. Fixes a regression where checkPosition="end" let the description line bleed under the checkmark column. Also replaces the :last-child match (which was also hitting the start-position slot because text nodes don't count as element children) with an explicit data-position="end" attribute.
Avatar demos migrated to shared data-demo-controls pattern (Avatar)
Sizing, Overflow count, Roundness, and Colors & variants now use the same data-demo-controls / data-demo-stage layout as every other component page, with no more margin: 24px -24px ... + width: calc(100% + 48px) hack. Overflow count demo grew an overflowCount slider, Colors & variants and Roundness gained size sliders. Colors is now a vertical 2-column grid (soft / solid × 6 colors) so it never clips at narrow widths.

Fixed

Slider hidden in docs SliderValueControl
A :last-child rule in SliderValueControl was hiding the slider itself when <Slider> rendered without a label (regression from 0.7.35 when Slider's label row became conditional). The only child of SliderContainer matched both :first-child and :last-child, and the hide rule won. Added :not(:first-child) so the rule only targets the marks container when it exists. All size / roundness / overflow sliders on Avatar, Select, Alert, and Button docs are visible again.

0.7.97 (2026-04-17)

Changed

Sidebar docs rewritten (Sidebar)
Consolidated 14 examples into 7. The new App Shell demo (workspace selector, expandable sections with hover flyouts when collapsed, footer with docs link + user menu) replaces the standalone Console example, and a beefed-up Basic demo absorbs Scrollable Content, Without Icons, Collapse Modes, Footer Cards, Group Label Sizes, Badges, and Loading State via toggles (collapsible, icons, badges, footerCard, labelSize, bordered). All demos now share a 260px width, the same DemoSidebarHeader (wordmark + tooltip-wrapped trigger with ⌘. shortcut), context-aware SidebarCollapseLeft/SidebarCollapseRight trigger icons, and consistent group/header spacing.

Fixed

Sidebar trigger hidden when icons are disabled (Sidebar)
The collapsible="icon" rail no longer appears when a sidebar has no icons to collapse to, since there's nothing to click on. The Mobile Menu and App Shell demos now force collapsible="none" when the icons toggle is off.

Added

Installable AI skill (Skills)
Plex UI now ships as a Claude Code plugin marketplace and a Codex skill. One-step install in Claude Code via /plugin marketplace add plex-ui/ui + /plugin install plex-ui@plex-ui; one-line install in Codex via npx degit plex-ui/ui/skills/plexui/skills/plex-ui .agents/skills/plex-ui. Ships agents/openai.yaml with Codex UI metadata (display name, SVG + PNG icons, brand color, default prompt, invocation policy) and .claude-plugin/marketplace.json with full manifest. Standalone SKILL.md install also supported for any agent that reads the open Agent Skills format.
DateInput component (DateInput)
New masked date and datetime input with Luxon-backed value parsing, configurable format, and min/max bounds.
FloatingLabelSelect multi-select (Floating Label Input)
New demo pairing FloatingLabelSelect with a multiple + clearable Select. Trigger shows the single label when one value is picked, N skills when more, with an integrated clear button that resets the list.
Skill promoted on marketing surfaces
Homepage Hero CTA Install as skill, AiFoundationSection primary CTA, expanded FAQ answer with the one-line install commands for each agent, and a Quick Start block in the repo README.md.

Fixed

figma-sidebar-mcp skill missing frontmatter
skills/figma-sidebar-mcp/SKILL.md was shipped without a YAML frontmatter block, so Claude Code never registered it as a skill. Added name and description per the official Claude Code skill spec.
Hero and /bridge pills removed, BridgePromo width balanced
Dropped the “New · Plex UI ships as…” pill above the Hero icon tiles and the “Design tokens, not just pixels” eyebrow pill on /bridge. Both were visual clutter. BridgePromo LandingSection now uses maxWidth="2xl" so the card width matches its paragraph instead of stretching to a 4xl container.
Luxon type conflicts (DateInput)
Aligned @types/luxon versions across workspace and fixed a DateTime / min/max prop type mismatch in DateInput demos.

0.7.96 (2026-04-08)

Changed

Select description styling (Select)
Polished the option description treatment and rewrote EmptyMessage docs so LLMs pick the right component and props on the first try.

0.7.95 (2026-04-07)

Changed

TagInput tags restyled (TagInput)
Tags now render as soft buttons for consistency with the rest of the system. Added a new suggestions demo.

0.7.94 (2026-04-06)

Fixed

Switch label font-weight (Switch)
Switch label font-weight now matches Field label (medium). It previously rendered lighter than surrounding form labels.

0.7.93 (2026-04-05)

Added

Plain text FloatingLabelSelect example (Floating Label Input)
New example without icons: a cleaner reference for simple role / category selects.
SEO blog posts (10 new) (Blog)
First push of 7 posts covering AI + design systems, Figma MCP, Bridge, design tokens, and component-library comparisons. Second push of 3 more with FAQ schema, internal linking, and updated sitemap.
Comparison pages (Radix UI, MUI, Ant Design)
Three new comparison pages alongside the existing shadcn/ui and Untitled UI pages. Footer and sitemap updated.
Figma AI Bridge branding
Renamed “Figma Bridge” to “Figma AI Bridge” across all pages and metadata. Landing page repositioned to lead with design tokens; ports in docs corrected (8766/8767 → 8866/8867).

Fixed

Floating label alignment (Floating Label Input)
Set transform-origin: left so the label scales from its left edge instead of jumping horizontally when it floats up.
Blog code block styling (Blog)
Unified Plex code block styles across blog and docs. Prose overrides for pre/code, default text language for bare fences, removed outdated Bridge demo video, and replaced placeholder /some-path links in ButtonLink examples.
Comparison pages polish
Left-aligned table headers across all comparison pages, fixed typography consistency.

0.7.92 (2026-04-05)

Added

FloatingLabelInput description (FloatingLabelInput)
New description prop for helper text below the input. When both errorMessage and description are present, error appears first (closest to input), description below, rendered as a single tight block with margin-bottom only under the last element. Text is left-aligned with input content via padding-inline-start. Error uses plain text (no icon) with role="alert" for accessibility.

0.7.87 (2026-04-03)

Added

Form examples (Form Examples)
New docs page with real-world form patterns: Field label vs section header hierarchy following Apple Settings strategy: SidebarGroupLabel for section headers, Field labels for individual controls.

Fixed

Field label-description gap
Set gap between label and description to 0px for all Field sizes (align with Figma).
Switch label-description gap
Removed 4px gap between Switch label and description (align with Figma).
Switch horizontal alignment
Horizontal Switch fields now align to top instead of center.

0.7.82 (2026-04-02)

Added

FileCard (FileUpload)
Extracted FileCard as a standalone component with optional delete button.

Fixed

Control border-radius
Aligned control border-radius with Figma design tokens for sm, lg, and xl sizes.

0.7.76 (2026-04-01)

Added

FileUpload (FileUpload)
New file upload component with drag-and-drop, multi-file support, middle-truncated filenames, and form integration. CSS pixel-perfect from Figma specs.
FloatingLabelInput multiline (FloatingLabelInput)
New textarea mode with auto-resize, no resize handle, 2-row default, and exact padding match with input mode.
RadioGroup/Checkbox descriptions
Added description examples to RadioGroup and Checkbox docs.

Fixed

FileUpload colors
Icon color set to --input-text-color, filesize to --color-text-tertiary. All colors use CSS variables (no hardcoded values).
Textarea label position
Matched textarea label position to input mode, accounting for border-box.

0.7.68 (2026-03-30)

Added

Horizontal menu (Menu)
New horizontal menu layout with size prop (sm/md/lg), equal-width items, and Play icon.
Icon-only tabs (Tabs)
New example showing icon-only tab items.
Icons: AlignCenterVertical, AlignStartVertical, AlignEndVertical, FoldHorizontal, UnfoldHorizontal, TextAlignCenter, TextAlignEnd, ArrowsMaximize, ArrowsMinimize, Play.

0.7.64 (2026-03-28)

Fixed

Field gap
Synced Field gap with Figma (6px). Fixed desktop preview max-width.
Mobile previews
Responsive mobile previews, OG image for Twitter, Product structured data.
MarkdownEditor
Fixed placeholder visibility, default rows=1.

0.7.61 (2026-03-28)

Added

Markdown Editor (Markdown Editor)
New compact WYSIWYG markdown editor embedded in a form field, powered by Tiptap. Supports bold, italic, ordered/unordered lists, and links. Markdown input/output format ([text](url)). Includes link dialog with URL + title fields and remove action. Toolbar buttons show active state and feature design-system tooltips. Works with Field wrapper and supports outline/soft variants.
Icons: Bold, Italic, List, ListNumbers.

0.7.51 (2026-03-25)

Added

Sidebar Filtered Tree example (Sidebar)
New demo with type-based filtering via Filter / FilterBadge icons, expand mode toggle (row vs chevron), and search with soft Input variant.
Sidebar Action Tree example (Sidebar)
Drag-and-drop sortable nested items using @dnd-kit/sortable. Hover-revealed action buttons (more, add, reorder). New GripVertical and Parallel icons.
Icons: Filter, FilterBadge, GripVertical, Parallel.
@plexui/mcp
MCP server package for AI agents, docs page, and llms.txt.

Fixed

Sidebar menu item press effect on action hover
Hovering action buttons no longer triggers scale/press animation on the parent menu item. Root cause: Tailwind scale property didn't override CSS module transform: scale().
Sidebar action tree DnD not working
Extracted SortableNestedItem to module level (was re-created every render). Removed onPointerDownCapture stopPropagation on drag handle that blocked dnd-kit's onPointerDown listener.
Sidebar child item text centered instead of left-aligned
<button> default text-align: center inherited by flex-1 text spans. Added text-left.
Hydration mismatch on sidebar page
Added stable id prop to DndContext to prevent dnd-kit's auto-incrementing counter from diverging between SSR and client.
Dialog mobile buttons, Input line-height & sizing demo

0.7.45 (2026-03-18)

Added

DatePicker variants (DatePicker)
DOB dropdown, time picker, masked date/datetime inputs.

0.7.44 (2026-03-16)

Added

Dialog component (Dialog)
New modal dialog built on Radix Dialog. Compound components: Dialog.Content, Dialog.Trigger, Dialog.Header, Dialog.Title, Dialog.Description, Dialog.Footer, Dialog.Close. Supports 9-step size scale, scroll lock, and focus trapping.
Form Examples page (Form Examples)
Dedicated page for complete authentication flow demos: About You, Sign up, Log in, Enter password, Verify email, Verify email (error), and Confirm phone. Each demo includes a dialog toggle to preview the form inside a modal shell.
OTP input mode toggle (Form Examples)
Verify email and Confirm phone demos now toggle between per-digit OTPInput and standard FloatingLabelInput text field modes.

Changed

Form demos consolidated (Form Examples)
Moved all authentication form demos from Float Input and OTP Input pages into the dedicated Form Examples page. Source pages now focus on individual component API and features only.
Component index updated (Components)
Added Dialog, Form Examples, and OTP Input to the component card grid.

Fixed

Inline links in docs not distinguishable
Prose links in documentation pages were rendered in the same color as body text, making them invisible as links. Now use --link-primary-text-color with hover state, matching the TextLink component.

0.7.40 (2026-03-13)

Added

StatCard component (Stat Card)
New dashboard statistics card with 7 configurable features: size (sm/md/lg), tooltip, trendPosition (label/value), trendVariant (positive/negative/neutral), icon with accent colors, and invertTrend. Supports 8 accent color schemes. Icon layout uses align-self: stretch; aspect-ratio: 1 for equal padding. Includes 5 interactive demo components with live controls.
DataTable component (Table)
New data table built on TanStack Table v8. Features: sorting, pagination, global filtering, column visibility, row click, row selection, and empty state handling. Includes DataTableColumnHeader for sortable headers and DataTablePagination with rows-per-page selector.
DataTable variant prop (Table)
Added variant prop with "default" (borderless) and "bordered" (rounded border with tinted header background) options.
DataTable column helpers (Table)
New helper functions for common cell patterns: idCell (monospace ID with CopyTooltip), dateTimeCell (formatted datetime via Intl.DateTimeFormat), statusCell (Badge with automatic status-to-color mapping), and tooltipHeader (header with dashed underline and tooltip).
DataTable meta.align (Table)
Column definitions now support meta: { align: "right" } to align both header and cell content consistently. Extends TanStack Table's ColumnMeta type.
Fingerprint icon
Added new Fingerprint icon to the icon library.

Changed

Table table-layout: fixed (Table)
Table primitive now uses table-layout: fixed to prevent column widths from jumping when sorting changes row order.
DataTable pagination buttons (Table)
Pagination prev/next buttons no longer use pill shape (pill={false}), using standard border-radius instead.

0.7.36 (2026-03-05)

Added

Menu.Label and Menu.Group (Menu)
New compound components for organizing menu items into labeled groups. Menu.Group wraps related items, Menu.Label renders a non-interactive section heading.
FloatingLabelSelect component (Floating Label Input)
New select variant with floating label animation matching FloatingLabelInput. Label floats above when an option is selected.
FloatingLabelInput endAdornment (Floating Label Input)
Added endAdornment prop for placing icons or buttons at the end of the input. Includes password toggle, SSN mask, and birthday masked input demos.
FloatingLabelInput placeholder support (Floating Label Input)
Added placeholder prop with focus-only visibility: placeholder text appears when the input is focused and the label has floated above.
Birthday masked input (Field)
Composition demo for segmented birthday input with segment highlighting, cursor positioning through separators, and live validation. Includes both masked and segmented select variants.
Phone input and country selector (Select Control)
Composition demo combining SelectControl with country flag icons and phone number formatting. Flag icons use lipis/flag-icons 4:3 SVGs via jsDelivr CDN.
Column configuration demo (Select)
Composition demo for table column visibility toggles using Select with checkbox items.
Switch description prop (Switch)
Added description prop to Switch for displaying secondary text below the label.
Tabs scrollable demo (Tabs)
Added Scrollable example to Tabs documentation showing horizontal overflow behavior with auto-scroll to active tab. No extra prop needed: just constrain the container width.

Changed

Alert dismiss button (Alert)
Replaced raw close icon with a soft Button component for the dismiss action. Consolidated Actions and Dismissible sections into single previews for cleaner documentation.
Indicator sizes unified (Indicators)
Standardized all indicator sizes to 18px across LoadingIndicator, CircularProgress, and LoadingDots. Consolidated Indicator and Dismissible demo sections into single preview cards.
Checkbox alignment unified with RadioGroup (Checkbox)
Aligned Checkbox indicator size (18×18px) and label gap with RadioGroup for visual consistency. Fixed label vertical alignment to match RadioGroup first-line behavior. Added combined Checkbox + RadioGroup alignment demo to both doc pages.
FloatingLabelInput focus tokens (Floating Label Input)
Replaced hardcoded blue focus ring color with neutral design tokens for consistency with the rest of the system.
Birthday segment highlight token (Field)
Uses primary/solid token for active segment highlight instead of hardcoded color.
Removed "New" badges from component index and sidebar
Cleared all isNew badges from the components index page and sidebar. Too many components were flagged, reducing the signal value.

Fixed

Birthday mask cursor positioning (Field)
Fixed cursor advancing past separators on complete segment and handling backspace through separator characters in the masked birthday input.
Birthday inputs browser autocomplete (Field)
Fixed segmented birthday inputs triggering unwanted browser autocomplete dropdown.
Flag icon aspect ratio (Select Control)
Fixed flag icons rendering as squares instead of proper 4:3 rectangles. Switched to same-height CDN endpoints and fixed alignment in dropdown lists.
Input clear button styling (Input)
Fixed clear button styling inconsistencies when used alongside FloatingLabelSelect demos.
Column config demo toggles (Select)
Fixed broken toggle state and removed unnecessary separator in column configuration popover.
Button sizing demo height jump (Button)
Fixed preview card height jumping when switching between button sizes.
FileDocument icon export (Menu)
Fixed import using non-existent File icon export. Replaced with FileDocument.

0.6.0 (2026-02-01)

Added

Sidebar component (Sidebar)
New composable navigation sidebar for application layouts. Includes SidebarProvider for state management, SidebarLayout for layout structure, scrollable SidebarContent, sticky SidebarHeader/SidebarFooter, and organized navigation with SidebarGroup, SidebarMenu, SidebarMenuItem, and SidebarMenuButton. Supports three collapse modes: offcanvas (drawer on mobile, full collapse on desktop), icon (collapses to icon rail), and none (static). Includes keyboard shortcut Cmd+B/Ctrl+B for toggling.
Sidebar nested navigation (Sidebar)
Collapsible nested menus with SidebarMenuSub and SidebarMenuSubButton. Animated chevron toggles via SidebarMenuChevron. Supports multi-level hierarchies for documentation and API reference navigation patterns.
Sidebar footer cards (Sidebar)
SidebarCard component for promotional content, upgrade CTAs, or announcements in the sidebar footer. Includes SidebarCardTitleLink with dismissible close button, SidebarCardContent for description text, and SidebarCardFooter for action buttons. Cards animate in after sidebar expansion with delayed opacity transition.
Sidebar badges (Sidebar)
SidebarMenuBadge container for displaying status indicators, counts, or labels alongside menu items. Pairs with the Badge component supporting all semantic colors (success, warning, danger, info, discovery, caution) and pill shape option.
Sidebar mobile menu (Sidebar)
SidebarMobileMenuButton with animated hamburger icon that transforms to close icon. Mobile behavior is automatic via SidebarProvider with responsive breakpoint detection. Drawer slides in from left with backdrop overlay.
Skeleton component (Skeleton)
New component for displaying loading placeholders. Supports rectangular and circular shapes via circle prop. Uses design tokens for background color and border-radius. Includes composition examples for avatars, cards, text blocks, forms, and tables.
Floating Label Input component (Floating Label Input)
New input component with animated floating label that moves above the input on focus or when filled. Supports error states with errorMessage prop, built-in clear button via onClear, disabled and read-only modes, browser autofill detection with onAutofill callback, and password manager extension blocking with allowAutofillExtensions.
Progress Steps component (Progress Steps)
New component for displaying progress through multi-step processes. Supports horizontal and vertical orientations, three sizes (sm, md, lg), solid and dashed connector styles, custom icons per step, and a minimal bar variant for compact layouts. Includes compound components: ProgressSteps.Step, ProgressSteps.Title, and ProgressSteps.Description. Color schemes include default and success variants.
ShimmerText component (ShimmerText)
New component for animated shimmer effect on text content. Includes ShimmerText for simple shimmer animation and ShimmerableText for streaming-style text reveal with shimmer on the latest token. Supports customizable speed, shimmer width, and color via CSS custom properties.
Field component (Field)
New form field wrapper that provides label, description, and error message with automatic accessibility linking. Generates htmlFor, aria-describedby, and aria-invalid attributes. Supports 9-step size scale, horizontal/vertical orientation, required indicator, and composition with Input, Textarea, Select, Slider, Checkbox, RadioGroup, and Switch controls via render prop pattern.
Field optical alignment (Field)
New opticallyAlign prop on Field that forwards to child controls via cloneElement. Compensates for pill gutter padding in form layouts, aligning labels and error messages with the visual text edge of Input, Select, and Button controls.
Slider range mode (Slider)
Slider now supports dual-thumb range selection via array value/defaultValue. Also added vertical orientation, disabled state, prefix/suffix units, and step markers with labels.
Icon and badge support (Tabs)
Added icon and badge props to Tabs.Tab. Icons automatically size based on control size. Badges support semantic colors (secondary, success, danger, etc.), style variants (soft, solid), and pill shape option.
Tabs component (Tabs)
Renamed and extended SegmentedControl into Tabs. Adds variant prop with "segmented" (default, existing behavior) and "underline" (animated line indicator with no background). Adds orientation prop with "horizontal" (default) and "vertical" support. Sub-components: Tabs.Tab (new canonical name) and Tabs.Option (backward-compat alias). The SegmentedControl import continues to work as a backward-compatible alias.
Tabs flush underline variant (Tabs)
Added flush boolean prop for the underline variant. Removes tab padding so the indicator matches the text width exactly, uses gap-based spacing between tabs, removes the container bottom border, and renders a 1px indicator with no border-radius. Spacing scales with size prop.
RadioGroup orientation and block props (Radio Group)
New orientation prop on RadioGroup.Item positions the radio indicator left (default) or right of the label. New block prop stretches the item to full width with justify-content: space-between for menu-style layouts. Documented with Orientation, With Field, Field error, Choice card, and Card selection examples.

Changed

Sidebar variants simplified (Sidebar)
Removed unused sidebar variants (floating, inset, dual-tier) from type definitions, documentation, and CSS. The component now supports only sidebar (default) and docs variants.
Field horizontal orientation refactored (Field)
Restructured HTML to use LabelGroup (label + description) and Content (control + error) containers for proper horizontal layout. Added fixed-width CSS variables --field-horizontal-label-width and --field-horizontal-control-width. Label vertical centering now uses calc((control-height - label-line-height) / 2) per size for pixel-perfect alignment.
Checkbox indicator aligned to Figma (Checkbox)
Indicator size changed from hardcoded 20×20px to 18×18px using the --menu-checkbox-indicator-size token, matching the Menu CheckboxItem and Figma specification. Border colors changed from solid grays (var(--gray-200)) to alpha-based tokens (var(--alpha-16) default, var(--alpha-20) hover) for consistent rendering on any background.
Checkbox label layout (Checkbox)
Label changed from display: flex; align-items: center to display: block for proper text flow in multi-line labels with descriptions. Gap tokens aligned with Menu CheckboxItem: spacing(2) (8px) for left orientation, spacing(3) (12px) for right orientation.

Fixed

Sidebar collapse animation stability (Sidebar)
Fixed jitter and layout shifts during sidebar collapse/expand animations. Stabilized flexbox rendering for menu items, improved padding transitions, and ensured footer cards animate in only after sidebar fully expands.
Sidebar mobile menu label visibility (Sidebar)
Labels in mobile menu were sometimes hidden due to incorrect collapsed state detection. Fixed to ensure labels are always visible in mobile drawer mode regardless of desktop sidebar state.
Month stepper sizing and alignment (Date Range Picker)
Fixed multiple issues with the month stepper trigger: stepper buttons now properly scale with control size using CSS variable overrides with correct specificity; added vertical alignment for buttons; gap between buttons and text scales with control size; month text min-width now uses em units (9em) to scale with font size, preventing width jumps when switching between months with different name lengths (e.g., "May" vs "September"). Stepper buttons now inherit pill prop from parent, matching SelectControl's Clear button behavior. Added size and pill controls to Storybook docs for testing.
Clear button sizing and consistency (Input)
Clear button overflow and border collision at various sizes. Refactored to use built-in onClear prop with dedicated sizing tokens matching SelectControl's clear-iso button. Updated gutter values and added per-size offsets for proper alignment in both standard and pill modes.
FieldError semantic color tokens (Field)
Replaced hardcoded error colors with --color-text-danger-outline and --color-border-danger-outline semantic tokens. Removed margin-top: -0.1em hack from error icon, now relies on flex centering for alignment.
Pill overflow and text overlap (Tabs)
In pill mode, narrow options (icons, single digits) could be narrower than the control height, causing circular hover highlights and the active thumb to overflow or clip. Added min-width to options in pill mode ensuring they're at least as wide as the control height. Also fixed a scrollable mode regression where text items overlapped, and corrected invalid white-space: wrap to white-space: normal.
Highlight overlay radius mismatch (Tabs)
The hover/active overlay (::before) used the same border-radius as the option, but the overlay is inset by 1px. This caused the inner rounded shape to not nest correctly. Added calculated radius as option radius minus inset, so the overlay aligns flush with the container.
Pill gutter scaling with opticallyAlign (Select Control, Input, Button)
When using opticallyAlign with pill={true}, the margin calculation used only the base gutter and ignored the pill scaling multiplier (1.33×). Controls with pills now correctly multiply the margin by --control-gutter-pill-scaling, aligning properly with Ghost controls.
Inconsistent gap between Options and Actions (Select)
Options used gap: spacing(1) (4px) while Actions used --menu-item-gap (6px). Standardized both to use --menu-item-gap for consistency with the base Menu component.
Search input icon color (Select)
The search icon had className="fill-secondary" but fill="currentColor" in the SVG path inherited color from the Input container, ignoring the class. Fixed by passing fill="var(--color-text-secondary)" as a prop with !important to override currentColor.
Missing caution color variant (Badge)
Badge was missing the caution color option, inconsistent with Button and Alert. Added caution to BadgeProps, implemented CSS styles for all variants (soft, solid, outline), and added to the Colors example matrix.
Tabs pill variant radius (Tabs)
Fixed incorrect border-radius in pill mode for both segmented and vertical orientations. The option radius now correctly uses --radius-full when pill is active.
Field label text selection (Field)
Removed user-select: none from Field label, allowing users to select and copy label text.

Changelog

On this page