Changelog

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

---

Unreleased

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–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 — 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 — 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 — 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/docs + /plugin install plex-ui@plex-ui; one-line install in Codex via npx degit plex-ui/docs/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) — 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 (Bridge)
  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.