What's new

This page is generated at build time from two sources: pending changes from the changesets in the repository (.changeset/*.md), and released versions from each package’s CHANGELOG.md. Changes are grouped by package, with breaking (major) changes first. When a change names a component, it links to that component’s Changelog tab. Change notes are written in English.

Waiting for release

@bigbang/icons1 changes

• @bigbang/icons Minor@bigbang/tokens Minor

  Add the icon registry package: typed kebab-case names over lucide-react 1.59.0 (ISC, NOTICE included), directional icons marked to mirror in right-to-left text. Add icon-size-xs|sm|md|lg|xl (12-32 px) component tokens.

@bigbang/tokens26 changes

• @bigbang/tokens Minor@bigbang/ui Minor

  Accordion: the line look draws rules between items only (none above the first or below the last), drops its inline padding so the header text lines up with the content around it, and underlines the header on hover instead of filling it; contained keeps the filled hover. The default size is now sm (40 px header, 14/500 text) and the chevron sits on the first title line. New tokens: dimension.10 and accordion.padding-block.sm|md (10 and 12 px).

  Related components:Accordion

• @bigbang/tokens Minor@bigbang/ui Minor

  AppShell: navigation items are 32 px (app-shell.item.height) with 14/400 labels, 16 px icons, 8 px padding and gap, a pressed fill and a medium-weight current page; a folding group's items hang from a 1 px rail. The collapsed sidebar is 48 px and the drawer at most 288 px, both from new app-shell.* tokens (sidebar.width, sidebar.width-collapsed, drawer.width, item.height, rail.width). Ctrl+B or Cmd+B toggles the sidebar (the drawer below 1024 px), a 16 px hit zone on the sidebar edge toggles it with the pointer, and each change is written to the bigbang_sidebar_collapsed cookie (APP_SHELL_COOKIE) for seven days.

  Related components:AppShell

• Minor

  Breaking: badge-height and badge-padding-inline split by size into badge-height-sm (16 px), badge-height-md (20 px), badge-padding-inline-sm (6 px) and badge-padding-inline-md (8 px). Adds badge-icon-size (12 px).

  Related components:Badge

• Minor

  Export the brand files as @bigbang/tokens/brands/<id>.json so the docs theme generator can load the fixture brands.

• Minor

  Add the brand pack contract: schema/brand-pack.schema.json (JSON Schema 2020-12), shipped as @bigbang/tokens/schema/brand-pack.schema.json. Brand files state schemaVersion: 1; the validator rejects any other version, and a test keeps the schema in step with the validator's keys, ramps, appearance values and override cap. The docs theme generator writes the version into the files it exports.

• Minor

  Brand ramps now have 11 steps (50 to 950) derived in OKLCH from a recorded seed, and every brand defines an accent ramp. New semantic groups: color-illustration-* (14 illustration slots, light and dark) and color-chart-categorical-1 to -8. New @bigbang/tokens/brand module and brand:validate script: closed brand-file schema, BRAND-07 contrast pairs in both modes and at most eight dark exceptions, shared by the build and the docs theme generator. Brand files may replace the neutral or status ramps and declare dark exceptions under overrides.dark. Existing semantic tokens keep their names and ramp steps; brand colour values shift slightly where the OKLCH derivation differs from the hand-picked values.

• @bigbang/tokens Minor@bigbang/ui Minor

  Card: new padding="sm" (12 px); the description is 14 px (body-md); Card.Footer spans the card width on a tinted band (surface-layer-1) with a top rule; a leading or trailing direct img reaches the card edges and is clipped to its corners. Badge: the icon side of a badge with an icon is 2 px tighter (new badge.padding-inline-icon.sm|md, 4 and 6 px). Avatar: the default size is sm (32 px) for Avatar and Avatar.Group, and group avatars overlap by 8 px.

  Related components:Card

• Minor

  Raise touch targets under a coarse pointer: button-height-md, input-height-md and tab-height-md go from 40 px to 44 px, and button-height-lg and input-height-lg from 40 px to 48 px, so lg stays above md. Fine-pointer sizes do not change.

• Minor

  Add color-action-danger-subtle-hovered, color-action-danger-subtle-pressed and color-action-on-danger-subtle-default for secondary and tertiary danger Buttons: red text on the secondary fill or the page, with a light red fill on hover and press.

• @bigbang/tokens Minor@bigbang/ui Minor

  Focus now shows as a soft 3 px halo in the focus colour at 70 % (3.15:1 on the light page, 4.77:1 on the dark page) instead of a 2 px outline; fields also turn their border to the focus colour. Pressed controls move down 1 px instead of scaling, and triggers that open a popup stay put.

• Minor

  Glass material, an alternative look for chrome surfaces. - New color.material.glass.{regular,regular-contrast,clear,dim,rim,edge,shade,specular} per mode, blur.surface.glass (16 / 20 px) and blur.surface.glass-clear (6 / 8 px), material.glass.{saturate,brightness,refraction-scale,refraction-band,scroll-edge,prominent-tint}, shadow.glass and motion.glass.press.scale (1.02, 1 with reduced motion). New white, black and neutral alpha primitives feed them. - The Tailwind theme adds the glass: variant and the material-glass, material-glass-contrast, material-glass-clear, material-glass-prominent, material-glass-refract, material-glass-interactive and material-glass-scroll-edge utilities. glass: applies under data-material="glass" only where backdrop blur is supported and neither more contrast nor forced colours is requested; an element with data-material="solid", anything inside one, or anything inside data-material-pref="solid" stays solid. Reduced transparency and slow displays fall back to the raised surface. - Each brand CSS file re-declares the tokens that differ between modes under [data-backdrop="light"] and [data-backdrop="dark"], so glass over imagery can take the other mode. - New dist/assets/glass-edge-map.svg (exported as @bigbang/tokens/assets/*), the edge normal map of the refraction filter, and dist/platform/material.json with its displacement scale. - validateBrand and contrastReport(resolved, mode) check glass text and icons over seven worst-case backdrops after the material filters, with and without the specular highlight, plus the prominent glass label and clear-glass icons. New helpers withAlpha and filterBackdrop.

• @bigbang/tokens Minor@bigbang/ui Minor

  ListItem: titles are medium weight and show one line, subtitles are 14 px and show two lines, slots are 10 px apart (8 px at sm), rows carry a transparent 1 px border, new variant (default, outline, muted), and an image placed directly in leading is sized 32, 40 or 48 px. Kbd: the default size is sm (20 px, 12 px text) and keys are flat on a muted fill with 6 px corners; inside a tooltip they take a light tint of the tooltip text colour. ScrollArea: the track is 10 px with a 1 px inset, so the thumb is 8 px. New tokens: list-item.gap.*, list-item.media-size.*, kbd.radius, kbd.size.sm|md, scroll-area.track-size.

  Related components:ListItem

• Minor

  2026 visual refresh of the token set. - New default brand pack neutral: an achromatic OKLCH neutral ramp with a new neutral.450 step, a near-black primary in light mode and a near-white primary in dark mode, and iris/peach brand and accent ramps for badges, illustration and the brand tone. The teal pack bigbang becomes optional and keeps a brand-coloured primary. - New brand slot appearance with primary (neutral or brand) and radius (default, none, compact, soft, round). primary picks the overlay of the twelve primary-dependent semantic colours; radius picks a radius preset. - Seven pastel ramps (red, orange as amber, green, blue, violet, teal, pink) on one lightness table, steps 50–950. Status colours use pastel fills (status.*.background = step 100, dark 900) with darker text, softer edges, mid-tone emphasis fills and dark tinted on-emphasis text. Brand files may now override violet, teal and pink. - New color.tag.{red,orange,green,blue,violet,teal,pink}.{background,foreground,border} pastel pairs. - Fixed eight-series chart palette independent of the brand, new chart.soft.1–8 fills and chart.grid, chart.axis, chart.cursor. chart.series.N now aliases color.chart.categorical.N, so it follows the mode. New chart.bar-radius and chart.line-width. - Radius scale on a 10 px base: lg 16 → 10 px, xl 24 → 14 px, new base, 2xl and 3xl. - Shadows on the Tailwind v4 scale: new shadow.xs; two-layer shadow.raised and shadow.overlay in light mode; stronger shadow.popup and shadow.panel in dark mode. New color.border.overlay hairline for floating surfaces. - Control heights 32/36/40 (button.height, input.height with a new sm, tab.height); the 36 px md step stays 40 px under (pointer: coarse). New input.shadow, card.radius, popover.radius, menu.radius, menu.item-radius, menu item padding and gap, menu.inset, toast.radius. Button, input, tag, tab and dialog radii move up the scale. The table header has no fill. - Focus: border.width.focus 3 → 2 px and a new focus.offset for a solid outline; focus.ring is neutral.500 / neutral.450 with the neutral primary. - Typography: tracking tokens for display and headings, heading-sm at medium weight, title-sm on a 20 px line, and heading utilities that balance their lines. - Theme presets: neutral presets zinc, stone, slate, gray (chroma clamped to the neutral cap) and accent presets blue, green, orange, rose, violet, teal, applied with applyPreset. - More gated contrast pairs: status emphasis fills on surfaces, status text on raised surfaces, tag pairs and chart series on the default surface. - Table: table.header.border (the stronger rule under the header), table.row.height.{compact,standard,comfortable} at 32, 40 and 48 px, and compact cells on 4 px block padding. - Drawer: drawer.sheet-height.{sm,md} (320 and 560 px), the height of a small or medium drawer shown as a bottom sheet. - input-action.size.sm (24 px) for actions inside a small input. - The Tailwind theme adds the focus-outline and focus-outline-inset utilities: a solid border.width.focus outline in focus.ring, offset by focus.offset or drawn inside the element.

• Minor

  Add the motion standard tokens: enter and exit easing curves for the productive and expressive families, easing-linear, spring tokens (spring-* settle time plus a matching easing-spring-* curve), loop periods, state-layer opacities and semantic motion-* tokens per component and pattern. Every token CSS file now ends with one prefers-reduced-motion block and a data-motion="reduce" override that replace movement with short fades. The Tailwind theme adds ease-* for the new curves, animate-shimmer, animate-indeterminate and the reduce-motion: variant. platform/motion.json carries the same values in milliseconds, Bézier arrays and spring parameters for JS and native code. easing-exit stays as an alias of easing-productive-exit.

• Minor

  Overlay tokens: color-surface-scrim dims the page by 32 % in light and 48 % in dark mode (was 10 %). New popup-offset (4 px) for every anchored popup. command-width follows dialog-width-md (560 px) and new command-offset-top places the command dialog 12dvh from the top. dialog-padding is split into dialog-padding-sm (16 px, below 640 px) and dialog-padding-md (24 px, from 640 px); the single dialog-padding token is removed.

• Minor

  Match the shadcn reference for overlays and feedback: color.surface.scrim is black at 10 % in both modes, dialog.padding is 16 px, popover.padding is 10 px and the drawer handle is 96 px wide. New tokens: shadow.popup and shadow.panel, text.title-sm and text.label-lg, radius.2xs (2 px), dialog.backdrop-blur, dialog.media, drawer.sheet-offset, drawer.stack.peek and drawer.stack.step, popover.gap, tooltip.arrow-size, command.width, command.search-height and empty-state.actions-gap. The contrast check now also covers text.subtle on the status backgrounds.

• Minor

  Remove color-surface-overlay. It duplicated the backdrop role; use color-surface-scrim behind dialogs and color-surface-raised with shadow-overlay for menus.

• Minor

  Form and action component tokens follow the shadcn reference: - slider-vertical-min-height (160 px) for vertical sliders. - checkbox-mark-size (14 px) for the check and dash. - Switch tokens gain sizes: switch-width-md / switch-height-md / switch-thumb-md are 32 / 18 / 16 px and switch-width-sm / switch-height-sm / switch-thumb-sm 24 / 14 / 12 px. They replace switch-width, switch-height and switch-thumb (36 / 20 / 16 px). - combobox-list-max-height (252 px) caps the Combobox option list. - button-icon-inset (2 px) is taken off the Button padding on the side of a start or end icon. - input-group-button-size (24 px) for InputGroup.Button. - period-caret-blink (1000 ms) and the animate-caret-blink utility for the drawn OtpInput caret, which blinks five times and stops. - text.label-lg (16 / 24 px, medium) and the type-label-lg utility for Field.Legend.

• Minor

  Soften the page surfaces. Light pages use the new neutral step 75 (#F7F7F7) under white cards, popups and inputs; layers, sunken, hovered and selected move one step darker. Dark pages use neutral 850 (#1E1E1E) instead of 950, cards and layer-1 use 800, and the new step 750 (#303030) carries layer-2, hovered and the neutral badge; borders, secondary and subtle actions follow. Every neutral preset gains steps 75 and 750 in its own hue. Dark translucent and glass tints are based on the new page colour (neutral-alpha.850-*), with the regular glass tint at 84% so subtle text keeps 4.5:1 over any backdrop. green.500 and teal.500 are a touch darker so the success emphasis and the second chart series keep 3:1 on the grey page.

• @bigbang/tokens Minor@bigbang/ui Minor

  Table and DataTable: a new standard density (8 px block padding, 37 px rows, 40 px header) is the default; cells have 8 px inline padding (table.cell.padding-inline) and checkbox cells none at the end. The last body row has no divider; the footer draws its own rule above. Table rows tint on hover by default (hoverable now defaults to true), and a row holding an expanded disclosure keeps the hover tint. New tokens: table.cell.padding-block.standard, table.header.height.

  Related components:Table

• Minor

  Build a resolved DTCG token tree per brand and mode as @bigbang/tokens/dtcg/<brand>-<mode>.tokens.json. CSS-only tokens (spring linear() curves, percentage distances) are listed by name under $extensions["com.pupas.cssOnly"].

• Patch

  Add button-icon-size-sm, button-icon-size-md and button-icon-size-lg (16, 16 and 20 px) for icons and the loading spinner inside Button.

  Related components:Button

• Patch

  Add chart.series.1 to chart.series.8 (categorical series colours, each at least 3:1 against color.surface.raised in light and dark mode, checked by the contrast test), chart.height.sm|md|lg (160, 240, 320 px) and chart.sparkline.height (32 px).

  Related components:Chart

• Patch

  Pin the accepted glass values in tests (dark regular tint 84 %, prominent tint 90 %, press swell 1.02 with 1 under reduced motion) and check that no motion, duration or spring token uses 700 ms and that only the period tokens loop.

• Patch

  Gate the outline badge and layer-1 text pairs. - The contrast test also checks tag-violet-foreground, tag-teal-foreground and tag-pink-foreground on surface-default (outline badges) and text-default and text-subtle on surface-layer-1 (CodeBlock). Every pack and preset passes. - drawer.sheet-height describes top and bottom sheets.

• @bigbang/tokens Patch@bigbang/ui Patch

  Add the stepper.track-thickness and timeline.rail-thickness component tokens (2 px); Stepper and Timeline use them instead of raw pixel values, and date segments use px-px.

  Related components:Stepper

@bigbang/ui123 changes

• Minor

  Add Accordion (Accordion, AccordionItem) and Collapsible (Collapsible, CollapsibleTrigger, CollapsiblePanel) on Base UI: single or multiple open items, line and contained variants, sm and md sizes, a configurable heading level, an optional description read as the trigger's description, closed content findable with find in page (hidden="until-found") by default, content that fades in and drops 4 px while the height changes at once, and a chevron that turns half a turn.

  Related components:AccordionCollapsible

• Minor

  Add ActionBar: bulk actions for selected items with a count announcement, Escape to clear and an entry motion.

  Related components:ActionBar

• Minor

  Add the action components: IconButton (required label, square or circle, loading), Link (inline or standalone, external with rel="noopener noreferrer" and a localised new-tab notice, unsafe URL schemes removed), ButtonGroup (spaced or attached, horizontal or vertical, logical corners), Toggle (Base UI, pressed shown by fill and border) and ToggleGroup (single or multiple, roving focus, shared size and variant). Add the ui.link.external string.

• Minor

  Add AmountInput: a money field that parses typed and pasted text in the Provider language into bigint minor units (never a float), drops letters, formats on blur, shows the currency symbol in the box and its name to screen readers, and has messages for too many decimals, min and max. The form value is the minor units as an integer string.

  Related components:AmountInput

• Minor

  Add Anchor: in-page navigation with #id links, one sublevel, and the section being read marked with aria-current="location" while the page scrolls.

  Related components:Anchor

• Minor

  AppShell no longer writes a cookie: APP_SHELL_COOKIE is removed, and apps store the collapsed state themselves through onCollapsedChange and pass it back as defaultCollapsed. Ctrl+B (Cmd+B) is ignored while focus is in a text field, select or editable content, and the new shortcut prop (default true) turns it off.

  Related components:AppShell

• Minor

  Add AppShell, NavGroup and NavItem: a skip link, a sidebar that narrows to icons, a mobile menu drawer and a sliding current-page indicator.

  Related components:AppShell

• Minor

  Add Autocomplete: a text input with suggestions that accepts any text, on Base UI Autocomplete.

  Related components:Autocomplete

• @bigbang/ui Minor@bigbang/tokens Patch

  Add Avatar with Avatar.Image, Avatar.Fallback, Avatar.Status and Avatar.Group. It shows a picture, or the initials of name (upper-cased for the Provider language, İ in Turkish) on a status tone chosen from the name, or a person or company icon without a name. size is 24, 32, 40, 48 or 64 px, kind is person or company, shape is circle or square, and status adds an online, offline or busy dot that is also part of the accessible name. The picture fades in with motion.reveal; delay holds the fallback back; decorative hides the avatar from screen readers. Adds the avatar.size.* and avatar.status-size.* component tokens and the ui.avatar.* strings.

  Related components:Avatar

• Minor

  Breaking: Badge renames emphasis to variant (subtle, bold); migrate emphasis="bold" to variant="bold". Adds size (sm 16 px, md 20 px, default md), a decorative startIcon and data-component="badge".

  Related components:Badge

• Minor

  Breadcrumbs: the trail is 14 px (body-md) with muted links (fg-subtle) that turn the default text colour on hover instead of brand links that underline, a regular-weight current page and a 6 px gap between items. Pagination: page buttons are 2 px apart instead of 4 px.

  Related components:Breadcrumbs

• Minor

  Add Breadcrumbs: a named navigation landmark with an ordered trail, the current page as aria-current="page" text, mirrored chevron separators hidden from screen readers, long trails folded into a "…" button that expands in place with a staggered entrance and moves focus to the first revealed link, a parent-only link below 640 px, router render and safe hrefs through Link. Add the ui.breadcrumbs.label and ui.breadcrumbs.expand strings.

  Related components:Breadcrumbs

• Minor

  Add a loading state and icon slots to Button. loading shows a spinner over the label, keeps the Button's width and focus, ignores clicks and sets aria-busy and data-loading; loadingLabel is the text screen readers read meanwhile. startIcon and endIcon render decorative icons sized from the Button size.

  Related components:Button

• Minor

  Breaking: Button replaces appearance with variant (primary, secondary, tertiary) and tone (neutral, danger). Migrate appearance="subtle" to variant="tertiary" and appearance="danger" to tone="danger"; tone="danger" also works with secondary and tertiary. A loading Button no longer sets aria-busy: it keeps its label as its name and announces loadingLabel once in a polite status region next to it, defaulting to the new ui.button.loading string ("Yükleniyor", or "Loading" inside <Provider locale="en-GB">). startIcon and endIcon now take a ReactElement. Adds Provider, which sets the language of the library's own strings, and data-component="button".

  Related components:ProviderButton

• @bigbang/ui Minor@bigbang/tokens Minor

  Add Calendar on @internationalized/date (new dependency, Apache-2.0): an APG date grid with roving focus, arrow, Home/End, Page Up/Down and Shift + Page Up/Down keys, weeks starting on the locale's first day (Monday in Turkish), Intl day and month names, full-date day names with today, status and unavailable added, min, max, isDateUnavailable, dayStatus dots, and a month change that slides 4 px in the direction of travel. Re-exports CalendarDate, Time, parseDate, parseTime, today and getLocalTimeZone. Adds the calendar-cell-size component token and ui.calendar.* strings.

  Related components:Calendar

• Minor

  Add Card with Card.Header, Card.Title, Card.Description, Card.Actions, Card.Body, Card.Footer and Card.Link. variant is outlined, elevated or filled; padding is md (16 px) or lg (24 px). A card with a title renders a <section> named by it. interactive stretches the one Card.Link over the card, lifts it 2 px on hover with motion.lift and draws the focus ring around the card.

  Related components:Card

• Minor

  Add Chart and Chart.Sparkline, drawn with tree-shaken ECharts and the SVG renderer only. kind is line, area, bar, stacked-bar or donut; height is sm, md or lg. Colours and the font are read from the design tokens at run time and the chart redraws when the brand or mode changes. Every chart is a figure with a caption, a generated summary sentence as the accessible name, decal patterns on bars and donuts, distinct symbols and dashes on line series, and a semantic data table (table is toggle, visible or hidden). Also loading, an empty state, hideValues, formatValue, formatCategory and ui.chart.* strings. Motion uses the chart enter and update tokens and is off with reduced motion.

  Related components:Chart

• @bigbang/ui Minor@bigbang/tokens Minor

  Add Checkbox (Base UI Checkbox: label, description, checked or indeterminate, invalid, required, disabled, parent) and CheckboxGroup (a <fieldset> with legend, help text, error, necessity marker, shared value list, allValues for a parent checkbox, vertical or horizontal). The mark uses motion.selectionMark. Add the checkbox.size, checkbox.radius, radio.size and switch.width|height|thumb component tokens.

  Related components:Checkbox

• Minor

  Add CodeBlock: code in the mono type with an optional header, line numbers, highlighted lines, wrapping and a copy button, with no syntax-highlighting dependency.

  Related components:CodeBlock

• Minor

  Add Combobox on Base UI Combobox: single and multiple choice with chips, server results (filter, onInputValueChange, loading) and user-created options (onCreate).

  Related components:Combobox

• Minor

  Add Command and CommandDialog: a grouped command palette with keyword search, shortcut keys and a ⌘K / Ctrl+K hotkey, on Base UI Combobox and Dialog.

  Related components:Command

• Minor

  Wire the motion presets into the existing components. Button presses with motion.press and gains success and successLabel (a check mark that grows once and an announcement from ui.button.success). TextInput and Field fade field colours with motion.field and drop error messages in with motion.fieldMessage. Badge fades in with motion.reveal. The motion demos use neutral demo texts.

• Minor

  ConsentBlock takes items: one checkbox per purpose, each with documentId, version, documentName, required and mustRead. A button opens the document through onOpenDocument (a dialog on the page, never a new tab), readIds unlocks mustRead items, which are disabled with the reason "Önce metni okuyun" until then, and value / onValueChange carry the accepted ids. The component stores nothing; the app sends the id, document and version of each accepted item to the server. The single-text form (title, children, checkboxLabel) still works but is deprecated and warns in development. New types ConsentItem, ConsentBlockItemsProps and ConsentBlockTextProps.

  Related components:ConsentBlock

• @bigbang/ui Minor@bigbang/tokens Minor

  Add ConsentBlock: a text to read in a named, keyboard-focusable scroll region with a reading progress bar and a bottom fade, a version line and full-text link, and a consent checkbox that requireScroll keeps locked (with the reason linked) until the end, announcing when it unlocks. Adds the consent-block-max-height component token.

  Related components:ConsentBlock

• Minor

  Add ContextMenu: an action menu opened at the pointer by right click or long press, on Base UI Context Menu, with the DropdownMenu parts.

  Related components:ContextMenu

• Minor

  Add Copy: copies a value to the clipboard from an icon button, a text button or an inline value, shows a check mark with the success motion, announces "Copied" or "Could not copy" and falls back to a hidden text area where the Clipboard API is missing.

  Related components:Copy

• @bigbang/ui Minor@bigbang/tokens Minor

  Add CountdownTimer and formatClock: time left to a target moment as a role="timer" clock, an optional ring that drains linearly (stepping under reduced motion), warning and done colours, milestones spoken in a status region (5 min, 1 min, 10 s, time is up by default) and a one-time onComplete. Adds the countdown-timer-ring-size component token.

  Related components:CountdownTimer

• Minor

  Add DataTable on TanStack Table v9 and TanStack Virtual, built from the Table parts and tableStyles. Sorting (sorting, defaultSorting, manualSorting) with a header button, aria-sort and a polite live region; row selection (selectionMode, rowSelection) with a select-all checkbox that shows a mixed state and row checkboxes named through getRowLabel; column visibility with DataTable.ColumnToggle; built-in status states (loading skeleton with aria-busy, empty, filtered-empty, error); rowActions, onRowOpen, toolbar, footer and totalRowCount; and virtualize with aria-rowcount and aria-rowindex. Export createDataTableColumnHelper, dataTableStyles and the column meta options (align, numeric, truncate, headerLabel, rowHeader). Add the ui.data-table.* strings in Turkish and English.

  Related components:TableDataTable

• Minor

  Add DatePicker: day, month and year spinbutton segments in the locale's order (gg.aa.yyyy in Turkish) with typed entry, auto-advance, wrapping arrows and Backspace, a calendar popup on Base UI Popover with focus on the selected day, built-in localised messages for dates outside min/max or unavailable, dayStatus, and YYYY-MM-DD form submission. Adds the ui.date.* and ui.date-picker.* strings.

  Related components:DatePicker

• Minor

  Add DateRangePicker: start and end segment groups that move from one to the other, a calendar popup with two months from 1024 px and one below, two-click picking with pointer and keyboard range preview, preset ranges on a Base UI radio group (today, yesterday, last 7 days, this month, last month, this year, custom), maxRangeDays, apply="instant" | "confirm" with Apply and Cancel, built-in reversed, too-long and out-of-range messages, and ISO 8601 interval form submission. Exports presetRange, DateRange and DateRangePreset. Keyboard focus in the calendar now previews ranges as hover does.

  Related components:DateRangePicker

• Minor

  Add DateTimePicker: a DatePicker and a TimeField in one named group with a CalendarDateTime value. Export CalendarDateTime and parseDateTime.

  Related components:DateTimePicker

• Minor

  Add DateTimeText and relativeParts: a date, date-time, time or relative time in a <time> element, written with Intl in the Provider language, with date and time styles, a time zone, plain ISO dates that do not shift a day, and relative time that refreshes every 30 seconds with a cross-fade and keeps the exact time in title.

  Related components:DateTimeText

• Minor

  Add DescriptionList with DescriptionList.Item, DescriptionList.Term, DescriptionList.Details and DescriptionList.Action, built on native dl, dt and dd. Pass items or compose the parts. layout is inline (stacked below 1024 px, term and details side by side from 1024 px), stacked or grid (columns 1 to 3); dividers and size (sm, md) are optional. Empty details show a dash with a hidden reason (ui.description-list.empty), long values wrap, and an action at the end of a row is its own tab stop. The list is static, with no entrance motion.

  Related components:DescriptionList

• @bigbang/ui Minor@bigbang/tokens Minor

  Add Dialog and AlertDialog on Base UI Dialog and AlertDialog. Dialog has a required title, description, a scrolling body that becomes keyboard-scrollable only when it overflows, footer actions, Dialog.Close, size sm/md/lg from the new dialog-width-* tokens, a bottom-sheet layout below 640 px, a localized close button (ui.dialog.close) and dismissible={false} for forced decisions. AlertDialog asks a single question with confirmLabel, a localized cancel action (ui.alertDialog.cancel), tone="danger", focus on cancel first, and an async onConfirm that keeps the dialog busy until it settles. Both enter and leave with motion.dialog over a motion.scrim backdrop. New component tokens: dialog-width-sm|md|lg, dialog-radius, dialog-padding, dialog-margin.

  Related components:Dialog

• @bigbang/ui Minor@bigbang/tokens Minor

  Add Drawer on Base UI Drawer: a panel from the inline end (side="end", mirrored in right-to-left text) or the bottom, size sm/md/lg from the new drawer-width-* tokens, swipe to close towards its edge with the backdrop clearing as it moves, an automatic bottom sheet with a handle below 640 px, modal={false} for panels used next to the page, a scrolling body, footer actions, Drawer.Close and the localized close button. Adds the motion.sheet preset (the drawer motion on the block axis) and the drawer-width-sm|md|lg, drawer-handle-width, drawer-handle-height component tokens.

  Related components:Drawer

• @bigbang/ui Minor@bigbang/tokens Minor

  Add DropdownMenu on Base UI Menu with DropdownMenu.Item (icon, tone="danger", shortcut shown with Kbd and exposed as aria-keyshortcuts, description, disabledReason read as the item's description, closeOnSelect), LinkItem, CheckboxItem and RadioGroup/RadioItem with the motion.selectionMark check and dot, labelled Group, Separator and Submenu (opens on hover, press and the inward arrow key, mirrored in right-to-left text). The popup uses motion.popover and items fade their highlight with motion.hover. New component tokens: menu-min-width, menu-max-width, menu-item-height.

  Related components:SeparatorRadioGroupDropdownMenu

• @bigbang/ui Minor@bigbang/tokens Minor

  Add EmptyState and ResultState. EmptyState shows an icon tile or an illustration, a title at a chosen headingLevel, a description and the next step, in md for pages and sm for cards, and cross-fades in with motion.reveal. ResultState ends a task or flow with a toned icon that grows in (motion.success), a title with a spoken tone prefix, details, next steps and focusOnMount to move focus to the title when it replaces the last step. New component tokens: empty-state-text-width, empty-state-media-sm, empty-state-media-md.

• Minor

  Field: error also takes a list of messages, shown as a list and linked to the control; an empty list leaves the field valid. Add Field.Counter, which shows characters used out of a limit, announces the remaining characters politely from 80 % of the limit and turns danger over it (new ui.field.counterRemaining and ui.field.counterOver strings). A bare Field.Control now has the TextInput look; pass className to replace it.

  Related components:Field

• Minor

  FileDropzone: add onUpload(file, signal). The component never makes a network request; it runs the upload the app supplies for each accepted file with its own AbortController, cancels it when the file is removed, calls it again on retry, and never passes rejected files. A real "Choose files" Button now opens the chooser (the native input leaves the tab order and focus returns to the Button after a removal), several rejected files are listed one per line, and the live region sums up the uploads when they finish.

  Related components:FileDropzone

• Minor

  Add FileDropzone: a clickable drop zone around a native, labelled file input with accept, maxSize, maxFiles and multiple rules, built-in localised rejection messages and onReject, a list of chosen files with sizes in Intl units and named Remove buttons that return focus to the input, announcements for added and removed files, and drag motion (solid border, fill, a 1% lean and a lifting icon). Exports acceptsFile and formatBytes. Adds the ui.file-dropzone.* strings.

  Related components:FileDropzone

• Minor

  Add the generic FilterBar<TFilter> with FilterBar.Search, Field, More, Apply, Clear, Applied and ResultCount. Fields are plain typed config (search, select, multi-select, toggle) and the value is a typed object. apply is instant or batch; applied filters show as removable Tag chips, "Clear filters" returns to defaultValue and moves focus to the first control, and resultCount is announced politely 500 ms after it stops changing. Below 1024 px the extra fields move under a "More filters" button. Also exports the pure filtersToSearchParams and searchParamsToFilters helpers and the ui.filter-bar.* strings.

  Related components:FieldFilterBar

• Minor

  Form gains schema: any Standard Schema v1 schema (Zod, Valibot, ArkType) checks the form data on submit. Issues go to the fields by name unless a field has its own error, join native and server problems in the summary, and the schema's output is the third argument of onSubmit. Async schemas are awaited with the submit button aria-disabled. The contract is copied as types (StandardSchemaV1), so the library ships no schema package; formDataToObject and issuesToErrors are exported. Field controls read schema and server errors for their name from the Form.

  Related components:Form

• Minor

  Add Form: a native form that checks fields on submit (server errors by name, fields marked aria-invalid, browser constraints), stops the submit when there are problems, shows a role="alert" validation summary with links to each field and focuses it (or the first invalid field with summary={false}), summarises server errors that arrive after a submit, and scrolls linked fields into view with reduced motion respected. Exports collectProblems. Adds the ui.form.* strings.

  Related components:Form

• Minor

  Glass material for chrome surfaces. - Provider takes material: 'solid' | 'glass' (default solid). Glass sets data-material="glass", mounts the refraction filter once in engines that render it, and renders solid when the system asks for reduced transparency. A Provider without the prop keeps the material of the one around it. New useMaterial hook. - Under a glass Provider these surfaces turn glass, and each takes material="solid" to stay solid: Popover, DropdownMenu (with submenus), Select and Combobox lists, CommandDialog, Dialog and AlertDialog (higher-contrast tint), Toaster, Toolbar, SegmentedControl, Tabs contained, ActionBar, SaveBar and the AppShell top bar (with a scroll edge) and inset sidebar. InfoPopover, the AppShell menu drawer, tooltips, tables, forms, cards, charts and money fields stay solid. The popover arrow is hidden on glass. - Button gains variant="glass" and variant="glass-prominent", glass even without a glass Provider, with the secondary and primary look as the solid fallback. An icon-only glass IconButton inside a dark data-backdrop uses the clear material. - Storybook serves @bigbang/tokens/assets at /assets/bigbang, the path the refraction filter reads its edge map from.

  Related components:ProviderButtonIconButton

• Minor

  Add IbanInput and the normalizeIban, formatIban and isValidIban helpers: a Turkish IBAN field with a fixed TR prefix, digits grouped in fours while typing with the caret kept in place, paste handling, an ISO 7064 mod 97 check with bigint, a check mark with the success motion and a "valid" announcement, and messages for a failed check and an incomplete IBAN.

  Related components:IbanInput

• Minor

  Add InlineAlert and Banner. Both take tone (info, success, warning, danger) with a status icon and a spoken tone prefix (ui.alert.* strings), dismissible with an exit fade (motion.collapsible) that moves focus to the next control, onDismiss, dismissLabel and announce, which gives danger role="alert" and other tones role="status" for messages that appear after load. InlineAlert sits in the content with an optional title and up to two actions; Banner spans the top of the app on the bold status colours with one action.

  Related components:InlineAlert

• Minor

  Add InlineEdit: a value shown as text that turns into an input in place, with save, cancel, validation and async save.

  Related components:InlineEdit

• Minor

  Add InputGroup: a text control with addons inside one bordered box, built on Field. Parts InputGroup.Input, InputGroup.Textarea, InputGroup.Text and InputGroup.Addon with align inline-start, inline-end, block-start or block-end. Clicking an addon's surface focuses the control; focus and error colour the whole box.

  Related components:InputGroup

• Minor

  Add Kbd: one key or a combination as nested <kbd> elements, named keys (mod, shift, alt, enter, arrows…) with platform-aware symbols and localised spoken names (ui.kbd.*), and two sizes.

  Related components:Kbd

• Minor

  Add Label: a native <label> for controls outside Field, with htmlFor, size (sm, md), a disabled look and the same localised necessity marker as Field (required, necessityIndicator).

  Related components:Label

• @bigbang/ui Minor@bigbang/tokens Minor

  Add the layout and base components: Box, Stack, Inline, Grid (with Grid.Item), Container, Text, Heading, VisuallyHidden, Separator and Icon, with render for semantics and token-only styling. Provider gains direction and reducedMotion and now renders one display: contents element carrying lang, dir and data-motion. Add container-max-width-sm|md|lg and container-padding-inline-base|md component tokens.

• Minor

  Add ListItem with ListItem.List, ListItem.Leading, ListItem.Content, ListItem.Title, ListItem.Subtitle, ListItem.Meta and ListItem.Trailing. A row has leading, title, subtitle, meta and trailing slots and a size of sm, md or lg (8, 12 or 16 px block padding). It is static by default; render={<a href="…" />} or a button makes the row one interactive target with the motion.stateLayer hover and press, a focus ring, selected (aria-current="true" and a selected bar) and disabled. truncate keeps the title on one line. ListItem.List renders the ul, with divided separator lines and an optional animate stagger with motion.listItem.

  Related components:ListItem

• Minor

  Add MaskedValue and maskValue: a sensitive value shown masked with visible ends or a fixed mask length, a pressed show toggle with a cross-fade, auto hide, an optional Copy button, and a screen reader text that says only the visible end.

  Related components:MaskedValue

• @bigbang/ui Minor@bigbang/tokens Patch

  Add Meter, a scalar value in a known range (storage used, a quota, a score), built on Base UI Meter with role="meter". Props: label, labelHidden, value, min, max, format (Intl.NumberFormat options; percent of the range by default), showValue, valueText, description, size (sm 4 px, md 8 px) and tone. tone="auto" follows the HTML <meter> regions through low, high and optimum and adds a word to the value text so colour is never the only signal. The fill grows with motion.progress, starts from the right edge in right-to-left text and never loops; the track gets an outline in forced-colours mode. Adds the ui.locale and ui.meter.* strings and the meter.height.sm, meter.height.md and meter.radius tokens.

  Related components:Meter

• Minor

  Bring the components and variants added after the 2026 refresh in line with it. - NativeSelect gains size="sm" (32 px), the field shadow, the solid focus outline and the invalid halo. MonthPicker, YearPicker, DateTimePicker and Autocomplete gain size="sm". - Combobox and Autocomplete use 24 px field buttons at sm, so they fit inside the 32 px field. - InlineEdit shows the TextInput invalid edge and halo on a validation error. - Month and year cells, the DataTable expand button, the CodeBlock scroll region and Anchor links draw the solid focus outline instead of the 70 % ring. - Select and Combobox group headings use one shared recipe (optionGroupLabelStyles), lined up with the option text as in menus. - DataTable: pinned header cells take the page fill, the pinned edge takes the table rule colour, the expanded row sits on surface-layer-1 and the column panel uses the shared overlay surface. - Drawer start and top mirror end and bottom: the overlay hairline instead of a border, 14 px free corners, and top sheets take the sm/md heights. - Badge variant="outline" covers the violet, teal and pink hues; the neutral outline takes the pastel neutral border. - CodeBlock moves to surface-layer-1 with 10 px corners. - A failed FileDropzone upload row takes the danger border.

• Minor

  2026 visual refresh of the components. - Focus: every focusable part draws a 2 px outline with a 2 px offset in the focus ring colour (focus-outline), or an inset outline where the part sits flush against its neighbours (focus-outline-inset). - One overlay surface for Popover, DropdownMenu, Select, Combobox, Command, DatePicker, DateRangePicker, Dialog, Drawer, Toast, SplitButton, FilterBar and ActionBar: raised fill, the border.overlay hairline, the popup, overlay or panel shadow and the popover, menu, dialog or toast radius token. Menu and list rows share one option row metric (menu item height, padding, gap and radius tokens) and highlight with the selected fill. - One height grid: 32, 36 and 40 px. TextInput, Select, Combobox, OtpInput, InputGroup and the inputs built on them gain a sm size. Tabs default to md (36 px). Toolbar draws its frame at the height of a control of the same size. - Drawer: a sm or md drawer on a narrow viewport keeps its size as a bottom sheet height instead of filling the screen. End and bottom drawers round their inner corners and draw the overlay hairline. - Inputs: a hairline shadow, a 4 px danger halo when invalid, and the outside focus outline. Checkbox and Radio use the input border. - Pastel status: InlineAlert and Banner use the status background and border; toned Tag is filled; Badge and Tag gain violet, teal and pink; Avatar fallbacks hash over the seven pastel tag pairs. - Link always underlines, with a muted line that takes the text colour on hover. - Card uses the card radius and a ring instead of a border; Kbd, Tooltip, EmptyState, Switch, Skeleton, Tabs and SegmentedControl follow the new surfaces and radii. - AppShell gains variant="inset": from 1024 px the top bar and content float as a raised, rounded panel on the sidebar fill. - Table and DataTable: a transparent header with small labels on a stronger rule, minimum row heights of 32, 40 and 48 px per density, and a raised fill under a sticky header. - Chart: horizontal split lines only, axis labels in chart.axis, a tooltip on the popup surface, a band cursor for bars and a rule for lines, bars rounded at the outer end (only the top segment of a stack), smooth 2 px lines with the point on hover, area fills fading from 30 % to 2 %, a donut ring with a pad angle and the legend at the top start. Values use tabular numerals. - Meter, ProgressBar, Slider, Stepper and Timeline draw their tracks on surface.layer-2. ProgressBar gains the warning tone and Timeline the brand tone. - Spinner: the primary action tone is now named brand, as in the other components; primary keeps working and draws the same colour. - Body text uses Inter's cv11 and ss01 features, and paragraphs wrap with text-wrap: pretty.

• Minor

  MoneyText gains hidden and compact. hidden shows "••••" with the currency and the name "Tutar gizli" / "Amount hidden" (ui.money-text.hidden); the amount is then nowhere in the DOM, including title, aria-*, data-* and the <data> value. compact uses Intl compact notation for charts and summaries. formatMoneyParts and formatMoney take the same compact option.

  Related components:MoneyText

• Minor

  Add MoneyText and the money helpers (toMinor, minorToDecimal, currencyDigits, formatMoney, formatMoneyParts, parseAmount, formatAmountInput, separators): amounts travel as bigint minor units and are formatted exactly with Intl from a decimal string, never a float. TRY is the default; Turkish writes the currency after the number (ui.money.currency-position). MoneyText adds a sign tone, a subtle fraction, sizes, a <data> value and a change motion.

  Related components:MoneyText

• Minor

  Add MonthPicker and YearPicker: fields that choose a month or a year from a twelve-cell grid, with min, max, unavailable months and a hidden form value.

• Minor

  Add the motion presets (press, hover, state layer, field, selection, overlays, collapsible, indicator, skeleton, list, progress, success), motionValues and useReducedMotion. Components will compose these presets in their style recipes; no props change.

• Minor

  Add NativeSelect: an HTML select with the Select look, flat or grouped options, a placeholder option and Field wiring.

  Related components:NativeSelect

• @bigbang/ui Minor@bigbang/tokens Minor

  Add NumberField: a labelled number field on Base UI NumberField with step buttons inside the box (motion.press), min, max, step, largeStep, Intl format in the Provider language, an optional unit added to the accessible name, stepper={false}, onValueCommitted, and a polite announcement when a typed value is moved to a bound. The aria-roledescription and step button names are localised (ui.number-field.*). Adds the input-action-size-md and input-action-size-lg component tokens.

  Related components:NumberField

• Minor

  OtpInput gains purpose ('login' | 'confirm', default 'confirm'). autoSubmit now works only for purpose="login"; with a confirmation code it is ignored and a development warning explains why, so an approval code is always submitted by the user. Both purposes keep autocomplete="one-time-code". The Turkish slot name is now "Hane 2 / 6".

  Related components:OtpInput

• Minor

  Add OtpInput on Base UI OTP Field: one box per character with a single tab stop, arrow-key movement, paste and one-time-code autofill, length, groupSize separators hidden from screen readers, validationType, mask, autoSubmit, onValueComplete, and box names by position localised through ui.otp.*.

  Related components:OtpInput

• Minor

  Overlays: the Dialog, Drawer and command-dialog scrim keeps its blur only where the user has not asked for a solid material, more contrast, reduced transparency or forced colours. Every anchored popup sits 4 px from its trigger (Combobox and Autocomplete were 6 px, DateRangePicker, PhoneInput and PreviewCard 8 px); DateRangePicker opens aligned to the start like DatePicker. The command dialog is 560 px wide, 12dvh from the top, with a thin visible list scrollbar. Dialog, AlertDialog and Drawer padding is 16 px below 640 px and 24 px from 640 px. A bottom-sheet Drawer shows its handle by default when it has snap points (handle still overrides), and its exit after a flick is clamped to half to the full exit duration.

• Minor

  Match the shadcn reference in overlays. Dialog and AlertDialog: 16 px padding, a hairline ring instead of a shadow, a lighter blurred scrim, the title at 16 px medium, and the actions on a sunken band that stacks below 640 px. AlertDialog takes an optional icon tile and centres its header on phones. Drawer: a square end drawer with a start border and shadow-panel, a bottom sheet with a top border and a 96 px top gap, a stacked full-width footer, a centred bottom-sheet header, an opt-in handle, snapPoints, nested-drawer stacking and an exit that shortens after a flick. Popover centres on its trigger by default and uses 10 px padding, a ring and shadow-popup; DropdownMenu uses the ring and shadow too, puts check and radio indicators after the label and adds inset. Tooltip sits 4 px from its trigger with a 10 px rounded arrow and lays out a Kbd beside the text. Command uses an inset filled search field, hides the list scrollbar, and opens its dialog a third of the way down at 384 px wide. Match the shadcn reference in feedback components. InlineAlert keeps the tone in its tint and a 16 px icon, with a neutral border, muted message text and a 2 px title gap. ProgressBar defaults to the 4 px track, uses 14 px label and value text 12 px above the track, and its fill slides with translate (new motion.progressSlide preset) so its ends stay round. Skeleton text lines use 8 px corners. Spinner draws an open arc without a track. EmptyState uses the 16 px heading at both sizes, 24 px padding and wider gaps at md, and 10 px between actions.

• Minor

  Add Pagination with Pagination.List, Pagination.Previous, Pagination.Next, Pagination.Page, Pagination.Ellipsis, Pagination.PageSize and Pagination.Summary, built on Button and Select, and the pure paginationRange helper. Page mode (page, pageCount, onPageChange) and cursor mode (mode="cursor"); pageSize, pageSizeOptions, onPageSizeChange and totalCount add the page size select and the "21-40 / 345" summary; getPageHref renders links. Controls at an end or while disabled stay focusable with aria-disabled, focus stays on the clicked control after a page change, the current page has aria-current="page", and below 1024 px the page numbers give way to previous, next and a counter. The summary range cross-fades with motion.reveal. Adds the ui.pagination.* strings.

  Related components:ButtonSelectPagination

• Minor

  Add PasswordInput: a password field with an eye button (aria-pressed, localised name, icon swap with motion.success), required autoComplete, an optional rules checklist linked with aria-describedby and read as met or not met, a three-step showStrength bar with a text level, a Caps Lock warning, and a delayed polite announcement of rule progress. Paste is never blocked. Adds the ui.password.* strings.

  Related components:PasswordInput

• Minor

  Add PhoneInput: a country code picker (Base UI Select, country names from Intl.DisplayNames in the Provider language) and a number in one labelled group, Turkey (+90) by default, grouping while typing (532 123 45 67), trunk 0 dropped, + and 00 prefixes switching the country on paste, and E.164 submitted under name. Exports parsePhone, toE164, isPhoneComplete and phoneCountries. Adds the ui.phone.country string.

  Related components:PhoneInput

• Minor

  Add Popconfirm: a small alertdialog next to a button that asks yes or no before a light action, with async confirm support.

  Related components:Popconfirm

• @bigbang/ui Minor@bigbang/tokens Minor

  Add Popover and InfoPopover on Base UI Popover. Popover is a non-modal panel anchored to a required trigger, named by its title, with description, logical side, align, size sm/md/lg from the new popover-width-* tokens, an optional arrow, modal, Popover.Close, collision flipping and motion.popover. InfoPopover is a toggletip: a round info IconButton named by label (default ui.infoPopover.label) that opens a short explanation on press, so it works on touch and with the keyboard where a Tooltip does not. New component tokens: popover-width-sm|md|lg, popover-padding.

  Related components:Popover

• Minor

  motion.press scales the control to motion-press-scale (97 %, 1 under reduced motion) instead of moving it down 1 px, and springs back on release. Triggers that open a popup still do not move.

• Minor

  Add PreviewCard: a link that shows a short preview of its destination on hover or focus, on Base UI Preview Card.

  Related components:PreviewCard

• @bigbang/ui Minor@bigbang/tokens Minor

  Add ProgressBar on Base UI Progress: determinate with the value formatted as a percentage in the Provider's locale, or indeterminate without a value (a sweep that stops under reduced motion). It takes label (always in the accessible name, hideLabel hides it visually), max, showValue, valueText, description linked with aria-describedby, size and tone (brand, success, danger), and mirrors in right-to-left text. The fill grows on the compositor with motion.progress. Provider gains useLocale. New component tokens: progress-height-sm, progress-height-md.

  Related components:ProgressBar

• @bigbang/ui Minor@bigbang/tokens Minor

  Add QrCode: shows a finished payload, such as a payment link or a TR Karekod string, as one SVG path with a four-module quiet zone. Error correction is M by default and Q with a centre logo; label names the code and caption shows the reference and domain as text. Encoding uses uqr; the component never builds payment payloads and uses no HTML strings. New qr-foreground and qr-background tokens keep the code black on white in every brand, mode and in print.

  Related components:QrCode

• Minor

  Add RadioCard: a large option for use inside RadioGroup with a title, description, decorative icon and meta, where the whole card is a label, the radio is named by the title alone with the rest as its description, the focus ring and selection border are drawn on the card, and the selection dot scales in.

  Related components:RadioCard

• Minor

  Add RadioGroup (Base UI RadioGroup on a <fieldset>: legend, help text, error that marks every item, necessity marker, single value, name, vertical or horizontal) and Radio (label, description, per-item disabled). The dot uses motion.selectionMark and the radio.size token.

  Related components:RadioGroup

• Minor

  Button and Badge now require children. A button or badge without a visible label is not supported; give the text it should show.

  Related components:BadgeButton

• Minor

  Add SaveBar: a named region that rises from the bottom while open (fixed or sticky), is inert while closed, announces its message, has Discard and Save with saving and saved states, stacks full-width buttons below 640 px, and asks the browser to confirm leaving while open. Adds the ui.save-bar.* strings.

  Related components:SaveBar

• Minor

  Add ScrollArea (themed thin scrollbars that fade in on hover and scroll, fading edges where content is hidden, a focusable viewport and an optional named region), SegmentedControl (a radio group with a required label, arrow keys that move and select, a thumb that slides on the base spring, press motion, sizes and full width) and PageHeader (title heading with breadcrumbs or a back link, status, description, actions that wrap on narrow screens, and a loading placeholder that keeps the heading). Add the ui.pageHeader.loading string.

• Minor

  Add SearchInput: a type="search" field with a search icon, a named clear button that grows in and returns focus, Escape to clear (passing on when empty), onSearch with debounceMs, onSubmit on Enter, loading with a spinner and one polite announcement, hideLabel and an optional role="search" landmark. Adds the ui.search.* strings.

  Related components:SearchInput

• Minor

  Add Select: a single choice from a short list on Base UI Select, wired to Field (label, help text, error, necessity marker). Options come from items (value, label, optional icon and disabled); placeholder, size (md, lg), readOnly, disabled, controlled or uncontrolled string | null value. The popup uses motion.popover and the check mark motion.selectionMark. Export the SelectItem type.

  Related components:Select

• Minor

  Form and action components follow the shadcn reference: - Slider: the thumb stays inside the track ends (edge alignment) and marks sit under its centre; new orientation="vertical". - Checkbox: the check and dash are 14 px; box, circle and track sit 8 px from their label in Checkbox, Radio and Switch, and RadioGroup items are 8 px apart. - Switch: 32 × 18 px track by default and a new size="sm" (24 × 14 px); the thumb has no shadow and the track has a larger invisible hit area. The off track stays strong grey for 3:1 contrast. - Chevrons in SplitButton and Combobox no longer turn while their popup is open, as in Select; the open fill shows the state. - Select, Combobox and SplitButton popups have 4 px padding. - Combobox: the clear button is opt-in with the new showClear and takes the chevron's place while it shows; the list opens 6 px from the field and scrolls past 252 px; chips are 4 px apart. - Select: items takes { label, items } groups with headings and separators, and the list shows scroll arrows; the trigger fits its value with the chevron 8 px from the end, and the new fullWidth stretches it to the field. New SelectItemGroup type. - Button: the fill stops inside the border (bg-clip-padding), and the side with startIcon or endIcon has 2 px less padding; icon spans carry data-icon="start|end". - ButtonGroup: nested groups sit 8 px apart; new ButtonGroup.Text and ButtonGroup.Separator parts. - ToggleGroup: items are 8 px apart. - Textarea: grows with its content by default (autoResize now defaults to true, starting at rows lines); block padding is 8 px. Pass autoResize={false} for the old fixed height with a resize handle. - InputGroup: new InputGroup.Button, a compact 24 px ghost button; addon text is medium weight with 8 px gaps; block addons have no divider unless divider is set; InputGroup.Textarea grows with its content and has 8 px block padding. - OtpInput: the slots join into one strip per group (shared borders, round outer corners), and the empty active slot shows a drawn 1 × 16 px caret that blinks five times and stops (still under reduced motion). - Label: items inside it (icon, text, control) sit 8 px apart; the * and "(optional)" marks keep their 2 and 4 px. - Field: new layout parts Field.Set (a fieldset, fields 16 px apart, 12 px around a CheckboxGroup or RadioGroup), Field.Legend (variant legend 16 px or label 14 px), Field.Group (fields 20 px apart, nested groups 16 px) and Field.Separator (a line with optional centred text).

• Minor

  Add Skeleton: text lines, a block or a circle on motion.skeleton (the highlight crosses three times and stops), a busy status with the localised ui.skeleton.loading label or decorative, and loading={false} to show its children with motion.reveal.

  Related components:Skeleton

• @bigbang/ui Minor@bigbang/tokens Minor

  Add Slider on Base UI Slider: a single value or a [low, high] range with named thumbs, Intl formatting in the provider locale, a visible value, a value bubble on drag, hover and keyboard focus, marks, onValueCommitted, a 40 px touch area, a thumb that grows on hover and while held on the productive spring, and a glide on track clicks and keys that stops while dragging. Adds the slider-track-height, slider-thumb-size and slider-hit-size component tokens and ui.slider.* strings.

  Related components:Slider

• Minor

  Add Spinner (four sizes, three tones, a localised ui.spinner.loading label or decorative; loops at period-spinner and stops under reduced motion) and Switch (Base UI Switch: label, description, controlled or uncontrolled, loading with a spinner in the thumb, aria-busy and one announcement, disabled, RTL-aware thumb travel on motion.switchThumb).

  Related components:Spinner

• Minor

  Add SplitButton: a main action joined to a Base UI menu of related actions, with an animated chevron and menu.

  Related components:SplitButton

• Minor

  Add StatCard, a key figure tile built on Card, with StatCard.Label, StatCard.Value, StatCard.Delta, StatCard.Period, StatCard.Trend and StatCard.Info. Pass label, value, delta, period, trend and info for the common case or compose the parts. The delta shows an arrow and a screen reader word with a sentiment colour (text-data-positive, text-data-negative, text-fg-subtle) that can differ from the direction. States: loading (placeholder with motion.skeleton and aria-busy), no value (a dash with a reason) and hidden (privacy mode). A changed value cross-fades with motion.reveal. Adds the ui.stat-card.* strings.

  Related components:CardStatCard

• Minor

  Add StatusBadge and the statusVocabulary (StatusKey): a status label built on Badge that maps twelve domain-neutral statuses (draft, pending, in-review, active, approved, completed, paused, cancelled, rejected, failed, expired, archived) to a tone, an icon and a ui.status.* label in Turkish and English. Pages pass status, size, variant (subtle or bold) and an optional label, never a tone. An unknown code shows as a neutral badge with the raw code and warns once in development. A changed status remounts the badge so it reveals again with motion.reveal; announce adds a polite live region.

  Related components:BadgeStatusBadge

• @bigbang/ui Minor@bigbang/tokens Minor

  Add Stepper and WizardFooter. Stepper is an ordered list in a named nav with aria-current="step", hidden status text, horizontal and vertical layouts, a compact layout below 640 px, connectors that fill with motion.progress, a check that grows in on completion, an attention state and optional buttons for complete steps. WizardFooter has Back (hidden on the first step), a step count that fades in, extra actions, Next with a nudging arrow or Finish on the last step, loading and nextType="submit". Adds the stepper-marker-size component token and ui.stepper.* and ui.wizard.* strings. Calendar month buttons no longer rotate in RTL on top of the icon's own mirroring.

  Related components:Stepper

• Minor

  Clear the accessibility errors Storybook reported. Accordion triggers and DropdownMenu items now take their name from their visible text (title or label, then the second line) instead of aria-labelledby and aria-describedby, so the name matches what is shown (WCAG 2.5.3). A decorative Avatar draws its initials from CSS, so they stay out of the name of the control around it. Disabled Slider, InputGroup and FileDropzone carry aria-disabled; disabled static ListItem rows and Tags, and the help line under a disabled Checkbox, Radio, RadioCard or Switch, keep text contrast. Dialog and Drawer measure body overflow once the body has mounted, so a long body is keyboard-scrollable. Label, IconButton and MoneyText list their union prop values inline, which fixes a Storybook docgen error.

• @bigbang/ui Minor@bigbang/tokens Patch

  Add Table with Table.Header, Table.Body, Table.Footer, Table.Row, Table.HeaderCell, Table.RowHeader and Table.Cell, and export tableStyles for DataTable to reuse. A static semantic table inside a named, focusable scroll region; caption is required. Options: density (compact or comfortable), striped, stickyHeader, hoverable (colour only, no lift) and dividers; cells take align, numeric and truncate; rows take selected. Add the table.* component tokens (header, row backgrounds, border, cell padding) that follow the colour mode.

  Related components:Table

• Minor

  Tabs: the default size is now sm (32 px row) and both sizes use 14/500 labels. The line list no longer draws a track line; only the 2 px indicator marks the selected tab. The contained track is as tall as the row (32 or 40 px), so its tabs are 4 px shorter, and the list and panel are 8 px apart instead of 12 px.

  Related components:Tabs

• @bigbang/ui Minor@bigbang/tokens Minor

  Add Tabs (Tabs, TabList, Tab, TabPanel) on Base UI Tabs: line and contained variants, sm and md sizes, horizontal or vertical, automatic or manual activation, an indicator that follows the selected tab on the base spring, a fading panel, tab icons and counts read as part of the name, and a required list label. Add the tab.* component tokens.

  Related components:Tabs

• @bigbang/ui Minor@bigbang/tokens Patch

  Add Tag with Tag.Icon, Tag.Label, Tag.Remove and Tag.Group: an outlined label with six tones and two sizes (24 and 32 px). onRemove adds a real remove button (24 px target, name from ui.tag.remove); selected, defaultSelected and onSelectedChange make it a Base UI Toggle with aria-pressed and a check mark animated by motion.selectionMark. A tag cannot be both removable and selectable. Tag.Group is a named list that moves focus to the next, else the previous tag, else onEmpty after a removal with click, Enter, Space, Backspace or Delete. Add tag.height, tag.padding-inline and tag.radius component tokens and the ui.tag.remove string.

  Related components:ToggleTag

• Minor

  TextInput adds invalid, required with necessityIndicator (a * with a hidden "zorunlu"/"required", or "(isteğe bağlı)"/"(optional)" on optional fields, from the ui.* strings), startContent and endContent, data-required, data-readonly, data-component and data-part attributes, and a fixed aria-describedby order (description, then error). Adds the public Field with Field.Root, Field.Label, Field.Control, Field.Description and Field.Error for custom controls. The border and focus ring now sit on a box that wraps the input.

  Related components:TextInputField

• Minor

  Add Textarea: multi-line text entry built on Field with label, help text, errors (one or a list), necessity marker, rows, autoResize up to maxRows (CSS field-sizing), and a character counter (maxLength + showCount) that announces near the limit and marks the field invalid over it. Controlled and uncontrolled.

  Related components:Textarea

• Minor

  Add TimeField: 24-hour hour and minute (and optional second) spinbutton segments on @internationalized/date Time, with typed entry and auto-advance, wrapping arrows, a decorative clock icon, built-in localised messages outside min/max, and HH:MM form submission. Adds the ui.time-field.* strings.

  Related components:TimeField

• @bigbang/ui Minor@bigbang/tokens Minor

  Add Timeline: an ordered list of events with toned dot or icon markers on a rail, titles, <time> values written with Intl in the provider locale (plain dates do not shift with the time zone), descriptions, extra content and a staggered entrance. Adds the timeline-marker-size component token.

  Related components:Timeline

• @bigbang/ui Minor@bigbang/tokens Minor

  Add Toast on Base UI Toast: a Toaster region (F6 landmark, labelled with the ui.toast.region string) that stacks up to three toasts at the inline end of the bottom edge, expands them on hover or focus and lets people swipe them down or towards the edge, and the useToast hook with show, update, close and promise (a loading toast with a spinner that becomes a success or an error toast). Toasts take tone (neutral, success, info, warning, danger), one action, and a timeout of at least 5000 ms that pauses on hover and focus; danger is announced at once and stays until closed. New motion.toastStack preset and component tokens toast-width, toast-gap, toast-peek, toast-margin.

  Related components:Toast

• Minor

  Add Toolbar, ToolbarButton, ToolbarGroup and ToolbarSeparator on Base UI Toolbar: one tab stop, arrow-key movement and pressed toggles.

  Related components:Toolbar

• @bigbang/ui Minor@bigbang/tokens Minor

  Add Tooltip (Base UI Tooltip: opens on hover after the motion.tooltip.delay token and at once on keyboard focus, closes on Escape, logical sides, an arrow, motion.tooltip, aria-describedby while open unless describes={false}) and the tooltip.max-width component token. IconButton now shows its label as a tooltip; turn it off with tooltip={false} and place it with tooltipSide.

  Related components:Tooltip

• Minor

  Add DataTable column pinning and expandable rows, Select multiple selection, Combobox option groups and FileDropzone per-file upload state.

• @bigbang/ui Minor@bigbang/tokens Minor

  Add variants: Badge count (with max, 99+), dot, label and variant="outline"; Button and IconButton size="xs" (24 px); ProgressBar tone="warning"; ResultState size (sm, md); Dialog size="xl" (960 px) and size="full"; Drawer side="start" and side="top". Add the Dialog parts API (Dialog.Root, Dialog.Popup, Dialog.Header, Dialog.Title, Dialog.Description, Dialog.Body, Dialog.Footer) and the Drawer parts API (Drawer.Root, Drawer.Header, Drawer.Title, Drawer.Description, Drawer.Body, Drawer.Footer). New tokens: button-height-xs, button-padding-inline-xs, button-icon-size-xs, badge-dot-size, dialog-width-xl; the contrast check covers status foregrounds and emphasis colours on the default surface.

• Patch

  AppShell's current-page indicator takes its thickness from the tab.indicator.thickness token (2 px) instead of a raw 3 px value, so it matches the Tabs indicator.

  Related components:AppShell

• Patch

  StatusBadge stories name the variants "Sade" and "Belirgin" in Turkish, matching the Badge docs and the glossary ("Sade", "Belirgin", "Çerçeveli").

  Related components:Badge

• Patch

  Breadcrumbs links underline on hover and keyboard focus, so the cue does not rely on colour alone.

  Related components:Breadcrumbs

• Patch

  Button and IconButton: when loading and disabled are both set, loading wins. The control keeps its variant colours and spinner, stays in the tab order with aria-disabled="true", ignores activation and form submission, and announces loadingLabel. When loading ends with disabled still set, the disabled look and behaviour return.

  Related components:Button

• Patch

  Calendar: weekday names are regular weight (body-sm). DatePicker: the calendar popup opens aligned to the start of the field, 4 px below it, with 8 px padding.

  Related components:Calendar

• Patch

  Document component props with TSDoc and expose the generated @bigbang/ui/props.json.

• Patch

  Form takes its StandardSchemaV1 types from @standard-schema/spec 1.1.0 (types only) instead of a local copy; the exported type names stay the same. Contract tests show Form working with Zod 4 and Valibot 1 schemas as they are.

  Related components:Form

• Patch

  isValidIban and IbanInput reject check digits outside 02 to 98 and a Turkish reserve digit other than 0, even when mod 97 holds. parseAmount and AmountInput treat a second decimal separator as invalid instead of reading it as grouping.

• Patch

  Button no longer falls back to the English "Loading" while loading is set. Without loadingLabel, screen readers read the Button's own label with a busy state; with it, they read the given text.

  Related components:Button

• Patch

  MonthPicker and YearPicker no longer set aria-required on their trigger button, where the attribute is not allowed; the label still marks the field as required.

  Related components:MonthPicker

• @bigbang/ui Patch@bigbang/tokens Patch

  Motion standard gates: a test stops component recipes from adding raw transition, duration-* or ease-* classes (MOT-14; the existing ones are listed and may only go down), the state-layer opacities are pinned (MOT-15), and ESLint rejects animation engines until their ADRs merge (MOT-06). The docs site drops its global reduced-motion reset, which deleted motion instead of replacing it, and the easing scale plays each spring curve at its own settle time.

• Patch

  Neutral demo text: the motion demo keys autopay and receive are renamed setting and increase, and the Anchor, Card, CodeBlock, DataTable, PreviewCard and Avatar stories drop payment and e-money wording. A test keeps foundations demos and generic component stories free of payments nouns, currency amounts and transaction counts; money and identity components keep their realistic fixtures.

• Patch

  Neutral demo texts in the SaveBar story and docs examples (no person names), and in the Avatar fallback example.

• Patch

  Use neutral demo texts in stories, docs examples and prop descriptions: realistic person names become "Kullanıcı N" / "User N", the amount and currency input demo becomes a quantity with an items unit, and the Button fullWidth description no longer mentions payment steps.

• Patch

  Export the part prop types of Card, Table, ListItem, StatCard, DescriptionList, Avatar, Field, InputGroup, Pagination, Dialog, Drawer and Popover, and declare the missing ones (FieldRootProps, FieldControlProps, FieldDescriptionProps, FieldErrorProps, InputGroupAddonProps, InputGroupInputProps, InputGroupTextareaProps, InputGroupTextProps, InputGroupButtonProps, DialogCloseProps, DrawerCloseProps, PopoverCloseProps). SplitButton gives the secondary pair an explicit divider in its border colour. Add the InputGroup block-start, CountdownTimer sizes, Popover large and Accordion medium stories.

• Patch

  Detail fixes from a side-by-side review against the shadcn reference: tooltips and side popups drift toward their trigger on every side; tooltip padding 12/6 px; popover 4 px from its trigger and 14 px body text; Command highlight and list padding match DropdownMenu; InlineAlert message at 14 px; dialog footer button gap 8 px; submenu aligned to its trigger item; select and combobox options leave room for the check; text fields use 16 px text below 768 px so iOS does not zoom; the field ring follows the text control; buttons keep their hovered fill while their menu is open; combobox chip and icon buttons give press feedback; SplitButton menu at least 192 px wide; calendar range band joins its end marks and outside days are lighter; AppShell sidebar on surface.layer-1, 8 px item corners and tooltips in the collapsed rail; Accordion chevron 16 px; Avatar hairline inner edge; Kbd reads on a tooltip; DatePicker popup 8 px corners; skeleton shimmer visible in light mode.

• Patch

  Button and Combobox loading spinners turn at the period.spinner pace like Spinner, and the Button spinner now also stops under Provider reducedMotion, not only under the system setting.

  Related components:Spinner

• Patch

  A toast with an action stays open until people act on it or close it, unless a timeout is given (WCAG 2.2.1 Timing adjustable).

  Related components:Toast

• Patch

  Draw the Button success mark and the DropdownMenu check on the 24-unit icon grid, so their stroke matches registry icons. Turn only the glyph of the AppShell collapse button, so the button keeps the hover and press transitions of every IconButton. Use the focus border width token for the Form error summary links.

Release types

While the packages are at 0.x, breaking changes ship as minor releases and their text includes a migration note. After 1.0, every breaking change is a major release.