Skip to main content
Neighborhood Design System v5.1.0

Changelog

What changed in each release of Neighborhood Design System, newest first.

v5.1.0 (2026-11-10) #

Added

  • AI brand skill: new Neighborhood brand skill, a proof of concept that lets Claude, GitHub Copilot and Microsoft 365 Copilot apply any of the 15 brands’ colors, fonts, spacing and button shapes to pages, slides, documents, charts and email.
  • Figma: each selected brand now gets its own Components and Foundations pages, and the main components live on a shared Component Library page.
  • Figma: images and logos in components are now a Media Placeholder that you can fill with an image or swap for your own component.
  • Figma: new Check for updates button, a count of changes on Apply, and a note after each apply that says what changed and takes you to it.
  • Figma: the file now records the last apply (release, date, brands and who applied it) in the right sidebar and on the generated pages, with a button to reopen the plugin.
  • Form controls: new --nbhd-formControl-label-letterSpacing and --nbhd-formControl-label-textTransform tokens for styling field labels.

Changed

  • House of Rohl: now uses GT America Expanded for headings and GT America Extended for body text, buttons and form fields, in place of Open Sans.
  • FBIN: now uses the Onest font in place of Open Sans.
  • FBIN: --nbhd-color-brand-secondary and --nbhd-color-accent-secondary now use FBIN Gold.
  • Master Lock: field labels, buttons and eyebrows now use Montserrat, labels are uppercase, and large display text is heavier.
  • Documentation site: the FBIN brand page now shows the correct color token names, plus PMS and CMYK values and a neutral palette.
  • Figma: the plugin starts with no brand selected in a new file, groups components into a collapsible list with All and Clear, and keeps Preview changes and Apply in view as you scroll.
  • Figma: Dry run is now Preview changes, and Remove modes for brands not selected is now Also remove brands from this file, which also removes those brands’ pages.
  • MCP server: AI assistants now install Neighborhood packages only from GitHub Packages, and ask you to request a token from IT Digital instead of copying packages from elsewhere on your computer.
  • MCP server: markup validation now flags Neighborhood packages installed from a local file or copied folder.
  • Fixed form field labels not using the --nbhd-formControl-label-fontFamily token.

v5.0.0 (2026-11-03) #

Added

  • Carousel: new previous-label, next-label, pagination-label, slide-button-label, play-label and pause-label attributes for changing what screen readers call its buttons.
  • Filters: new drawer-label, reset-label, reset-aria-label, done-label, done-aria-label and close-label attributes for changing the wording of the mobile filters drawer.
  • New attributes for changing or translating built-in button and list names: close-label on Dialog, page-label on Pagination, file-list-label on Upload, and play-label and pause-label on Video.
  • React: new onNbhdChange event on NbhdInput, NbhdTextarea, NbhdCheckbox and NbhdRadio, onNbhdDialogOpen and onNbhdDialogClose on NbhdDialog, and onNbhdBreadcrumbClick on NbhdBreadcrumb.
  • Documentation site: new AI tools (MCP), Figma plugin, React, Glossary and Troubleshooting pages under Getting Started.
  • Documentation site: new Content and media and Loading and performance guidelines, and Platform setup now covers Vue, Svelte and Angular.
  • Documentation site: new Textarea component page.

Changed

  • Figma: the plugin is now being tried by a small group of beta testers and no longer asks for a password.
  • Figma: the plugin shows which Neighborhood release it loaded, and settings meant for the design system team are under Developer options.
  • Figma: component sets the plugin made keep updating after you move them to another page.
  • Filters: a filter group’s description is now shown as plain text, so any HTML in it appears as written instead of being formatted.
  • Documentation site: each component’s CSS properties table is now built from the design tokens and shows the token and value behind each property.
  • Documentation site: the Versions page now shows the current release, the preview site and a table of older versions with their packages and release dates.
  • MCP server: component details now include the token and description for each CSS property, matching the docs site.
  • MCP server: v4 to v5 upgrade guidance covers more renamed attributes, such as the old hero carousel settings and Autosuggest message, which is now heading.
  • Updated dependencies.

v5.0.0-rc.2 (2026-10-29) #

Added

  • Figma: new Neighborhood for Figma plugin, a proof of concept that brings Neighborhood’s tokens, styles and core components into a Figma file for the brands you choose.
  • Surfaces: new --nbhd-context-color-text-subtle and --nbhd-context-color-text-accent tokens for low-emphasis and brand-colored text that adjusts to the surface.
  • Card: new --nbhd-card-title-textTransform token for changing the case of card titles.
  • MCP server: Shopify setup instructions now point to the ready-made Shopify sections and include a single command that copies a brand’s files and fonts into a theme.

Changed

  • Brands: brand stylesheets no longer include the unbranded tokens separately, so each brand file is smaller and self-contained.
  • Documentation site: examples and guides now use the current color tokens, such as --nbhd-color-text-primary.
  • Fixed Carousel going to the wrong slide from slideTo() when loop is on.

Removed

  • Brands: the core.css brand stylesheets are gone; if your site loads the brand fonts itself, use the brand’s token file from @fbin-web/neighborhood-tokens/dist/brands/ instead.
  • Tokens: the older color tokens --nbhd-content-*, --nbhd-background-*, --nbhd-border-primary, --nbhd-border-subtle, --nbhd-form-*, --nbhd-feedback-*, --nbhd-status-*, --nbhd-brand-primary, --nbhd-accent-primary and --nbhd-link-primary are removed; use the --nbhd-color-* tokens instead, such as --nbhd-color-text-primary.

v5.0.0-rc.1 (2026-10-27) #

Added

  • Brands: new draft themes for Aqualisa, August, Emtek, Fypon, Moen Flo, Solar Innovations, Therma-Tru, Waste King and Yale, each with a brand stylesheet, a Neighborhood CSS entry and a brand page.
  • Radio Group: new component that groups Radio options under one label, with one Tab stop, arrow-key selection, help and error text, and form support.
  • Visually Hidden: new component that hides content on screen but keeps it available to screen readers.
  • Form fields: Input, Textarea, Checkbox, Radio, Select, Range and Upload now work inside a native <form>: they submit under their name, reset with the form and block submission when required or otherwise invalid.
  • Form fields: new checkValidity(), reportValidity() and setCustomValidity() methods, plus validity and validationMessage, like the browser’s own fields.
  • Checkbox and Radio: new help-text, error-text and invalid attributes, with matching help and error slots.
  • Select: new required and aria-label attributes, and typing a letter jumps to a matching option.
  • Upload: new required and required-label attributes.
  • Accordion Item, Autosuggest, Filters and Pagination Search: new heading-level attribute for matching built-in headings to the page outline.
  • Autosuggest, Filters and Pagination Search: result counts are announced to screen readers when they update, with new attributes such as results-announcement for changing the wording.
  • Search: new autosuggest attribute that links the field to an Autosuggest, so the down arrow moves into the suggestions and Escape returns to the field.
  • Search: new landmark-label, clear-label and submit-label attributes for naming the search area and its buttons.
  • Button: new aria-current, aria-expanded, aria-haspopup, aria-pressed and aria-disabled attributes, passed through to the inner button.
  • Link: new aria-current attribute, and active links are now announced as the current page.
  • Link and CTA: links with external now tell screen reader users they open in a new tab; the new external-label attribute changes that text.
  • CTA: new aria-label attribute for telling repeated CTAs apart.
  • Pagination: new label, previous-aria-label and next-aria-label attributes, and Pagination Search gets label.
  • Content Block: new tag attribute for rendering as a section or article.
  • Video: captions and descriptions can be added with <track> elements inside nbhd-video.
  • Tokens: new --nbhd-size-target-min token for the smallest click area, and new tokens such as --nbhd-humongotron-mediaOverlay-minOpacity and --nbhd-finish-active-borderWidth.
  • Documentation site: brand pages now show a Draft or Ready status.
  • Documentation site: the Accessibility page now lists what each component handles and what each site is responsible for, and Extending Components has a new section on using components in forms.
  • Storybook: the new brands are available in the brand switcher, and each story now shows accessibility issues as errors in the test panel.
  • MCP server: import instructions now cover the new brands.

Changed

  • Moen: updated branding with an orange link color, new grays, a violet focus outline, Denim Bold and a lighter display text weight.
  • Colors: text, link, form field and focus colors in every brand theme and the unbranded theme now meet WCAG AA contrast, which darkens some colors and focus outlines for CFG, FBIN, House of Rohl and Master Lock.
  • Focus: every interactive part now shows a focus outline when reached by keyboard, including in Windows High Contrast.
  • Dialog: focus moves into the dialog when it opens and returns to what opened it when it closes, and the rest of the page can’t be reached while it’s open.
  • Dialog: long content now scrolls inside the dialog instead of overflowing the screen.
  • Form fields: labels, help text and error text are now connected to every field without setting an id, and required fields show a marker.
  • Input, Textarea, Checkbox, Radio, Radio Group, Select and Range: an invalid field with no error-text now shows “This field has an error.”
  • Form fields: values are sent with the form directly, so remove any hidden inputs that copied them or they will be sent twice.
  • Select: Tab now closes the list, and reaching the maxMultiple limit is announced to screen readers.
  • Pagination and Pagination Search: the current page stays focusable, and Previous and Next stay in place, disabled, on the first and last page.
  • Pagination and Breadcrumb: now render labeled navigation landmarks; Breadcrumb marks the last item as the current page.
  • Navbar: aria-label no longer defaults to “Navigation”; set one, such as “Main”, only when a page has more than one navigation.
  • Search: the default aria-label is now “Search” instead of “Search Input”.
  • Card and Product Card: clickable cards are now named by their visible title, so their headings stay headings for screen reader users.
  • Accordion Item: each header is now wrapped in a heading, so screen reader users can jump between sections.
  • Button: disabled buttons now fade their colors instead of the whole button, so a focused aria-disabled button keeps a clear focus outline.
  • Button: icon-only buttons without an aria-label now log a console warning during development.
  • Image: images without an alt attribute now log a console warning during development; set alt="" for decorative images.
  • Spinner: now announces “Loading”, or its label and text, to screen readers.
  • Upload: help and error text are now read with the Browse button.
  • Video: autoplaying MP4 and Widen video can always be paused, and embedded video uses its alt text as the player title.
  • Featured cards and Humongotron: the image overlay is darker so text stays readable on light images, and the Humongotron overlay can no longer be set below a minimum on large screens.
  • Humongotron: the scroll indicator now pulses once instead of repeating.
  • Finish: the selected finish now has a thicker border, so it doesn’t rely on color alone.
  • Carousel and Search: pagination dots and the clear and submit buttons now have a click area of at least 24 by 24 pixels.
  • Product Card: badges that don’t fit on one line now wrap instead of being cut off.
  • List and Neighborhood CSS: lists without bullets are still announced as lists in Safari with VoiceOver.
  • Documentation site: the hidden skip and screen reader text now appears when it receives focus.

v5.0.0-beta.6 (2026-10-23) #

Added

  • Tokens: new semantic tokens for space, size, shadow, motion, opacity, z-index and breakpoints, such as --nbhd-space-6, --nbhd-size-icon-md, --nbhd-shadow-md, --nbhd-motion-duration-normal, --nbhd-opacity-disabled, --nbhd-z-100 and --nbhd-breakpoint-md.
  • Tokens: new semantic colors --nbhd-color-overlay, --nbhd-color-surface-highlight, --nbhd-color-control-track-active and --nbhd-color-control-track-inactive.
  • Neighborhood CSS: new color utilities for overlay, surface highlight and control track colors, and the eyebrow and action text styles now include letter spacing.
  • Carousel: autoplaying carousels now show a play/pause button next to the pagination, even when the pagination is hidden.
  • Carousel: new play() and pause() methods and a new nbhd-autoplay-change event for controlling and following autoplay.
  • Carousel: new shell, pagination-row and autoplay-control-icon parts for styling.
  • Image: new responsivePreset option for setting image sizes per breakpoint.
  • Documentation site: new Motion, Opacity and Focus pages under Foundations.
  • Documentation site: the Colors page and each brand page now list the semantic colors and text styles as they look for that brand.

Changed

  • Tokens: components now use the semantic tokens, so brand themes can change spacing, sizes, shadows, motion and layering in one place.
  • Fixed buttons, links, badges and form fields using a plain sans-serif font instead of the brand font for CFG, FBIN, House of Rohl and Master Lock.
  • Adjusted sizes to the new size scale: Select fields are now at least 44px tall, the Humongotron scroll indicator is 44px, and the Filters drawer buttons are 44px.
  • Upload: the drop zone, icon and thumbnails are smaller for Moen.
  • Humongotron, Jumbotron, Minitron and Hero Split: images are now automatically requested at the right size for each breakpoint when using Widen.
  • Image: preset sizes now apply to Widen URLs that already include settings, and cropped images stay aligned with image-focus when scaled.
  • Image: an image quality set in the Widen URL is now kept unless cdn.quality is set.
  • Carousel: autoplay pauses while the pointer is over the slides, stops when keyboard focus enters the carousel, and starts paused for visitors who prefer reduced motion.
  • Carousel: without loop, the previous and next buttons are disabled at the first and last slide.
  • Carousel: navigation, pagination and the play/pause button are hidden when every slide fits in view.
  • Fixed the Minitron shadow being cut off inside a Carousel; it now wraps the slide area and follows the active slide when showing one slide at a time.
  • Card List: no longer writes warnings to the browser console about unsupported content.
  • Fixed the Spinner track being hard to see on inverse surfaces; the new --nbhd-spinner-track-opacity token sets how strong it is.
  • Fixed Dialog, Minitron, Navbar and Upload not updating when slotted content is added after the page loads.

Removed

  • Tokens: --nbhd-base-transition-quickly, --nbhd-base-transition-slowly and --nbhd-base-transition-slower; use --nbhd-motion-duration-fast, --nbhd-motion-duration-normal and --nbhd-motion-duration-slow instead.
  • Brands: the brand font files no longer set --nbhd-fontFamily, --nbhd-fontFamily-heading or the --nbhd-fontStack-* variables; use the text style tokens, such as --nbhd-typography-body-fontFamily, instead.

v5.0.0-beta.5 (2026-10-22) #

Added

  • Select: new help-text, error-text and invalid options, plus help and error slots, for showing help and error messages below the field.
  • Select: the nbhd-change event now includes the selected value, and a standard change event fires alongside it.
  • Upload: new label, help-text, error-text, invalid, instructions, browse-label and browse-variant options for setting the field text and button.
  • Upload: new accept, max-files, max-file-size and name options for limiting which files can be added.
  • Upload: new nbhd-files-rejected and nbhd-file-removed events, and a way to clear the selection after a form submits.
  • Button: new aria-description option for adding extra context for screen readers.
  • Storybook: a new Playground toolbar option to show the full playground frame, a Minimal frame with only the surface and width, or no frame at all.

Changed

  • Upload: redesigned for v5; it now fills its container instead of stopping at 350px, and its colors follow the surface it sits on.
  • Upload: renamed its CSS variables to the v5 style, for example --nbhd-upload-border-radius is now --nbhd-upload-dropzone-borderRadius.
  • Upload: slots now have names (label, icon, instructions, help, error and requirements) in place of the old unnamed slots.
  • Upload: screen readers now announce the field label, help or error text, and the allowed file types.
  • Select: screen readers now announce help and error text.
  • Product Card: fixed badges so they sit over the top corner of the product image without being cut off.
  • Product Card: fixed the card changing height when hovering a finish.
  • Humongotron: fixed content alignment on desktop so text stays inside the page container, and capped the text width for easier reading.
  • Documentation site: removed the preview width buttons from component previews.

Removed

  • Upload: the data option and UploadElement type; use the new text and button options instead.
  • Upload: the files-selected event; use nbhd-files-selected instead.

v5.0.0-beta.4 (2026-10-21) #

Added

  • Documentation site: a new Neighborhood documentation site with Getting Started, Guidelines, Foundations, Components and Brands sections, site search, light and dark themes, and this changelog.
  • Documentation site: new guides for quick start, platform setup, Neighborhood CSS, product teams and requests, plus guidelines for accessibility, brand theming, content and media, the content model, extending components, layout, surfaces and tokens.
  • Documentation site: component pages show live Storybook previews with a story picker, a brand picker that’s remembered between pages, and preview width controls.
  • Storybook: a new Storybook that shows every component in both Web Components and React, with a framework switcher, a brand picker and how-to guides.
  • MCP server: new validate_markup tool that checks Neighborhood markup for mistakes and leftovers from v4, such as removed components, old attribute values, unknown slots and old event names.
  • MCP server: new get_migration_guide tool that walks through upgrades from v2, v3 and v4.

Changed

  • MCP server: component details, generated code and Bloomreach content types now follow the v5 component API, including slots, surface and nbhd-* events.
  • MCP server: the hosted endpoint now requires an access token; ask the design system team for one.

Removed

  • The previous documentation site, replaced by the new documentation site.

v5.0.0-beta.3 (2026-10-06) #

Changed

  • Spinner: refreshed styling and options.
  • Simplified how component types are exported and imported.

v5.0.0-beta.2 (2026-10-01) #

Changed

  • Updated component data, and all components now export their types.
  • Neighborhood CSS now uses design tokens.
  • Cleaned up brand tokens, including Moen and House of Rohl surface colors.
  • Image: the React component now exposes all Image props.
  • Pagination and Pagination Search: fixed page change and sort callbacks not firing.
  • Select: deprecated the OptionData type.
  • Select: the selection-changed event is now nbhd-selection-changed, and the onChange property is now onNbhdChange.

Removed

  • Flex: reversed prop; use reverse instead.
  • Alignment values left, right and middle; use start, end and center instead.
  • Image: bp-sm, bp-md and bp-lg.
  • React: the old event props onAutosuggestClick, onProductCardClick, onSelectionChanged and onValueChanged, and onChange on NbhdSelect; use onNbhdAutosuggestClick, onNbhdProductCardClick, onNbhdSelectionChanged, onNbhdValueChanged and onNbhdChange instead.

v5.0.0-beta.1 (2026-09-24) #

Changed

  • Updated the documentation for every component.
  • Updated types.
  • Storybook now opens with no brand applied by default.
  • Types are renamed from *Data and *Element to *Content and *Props, such as CardData to CardContent.
  • CTA: variants are now limited to primary, secondary and tertiary.
  • Range: the value-changed event is now nbhd-value-changed.

Removed

  • Results Filter, replaced by Filters.
  • Text: the default variant; use body instead.
  • Container: the breakpoint attribute.

v5.0.0-alpha.12 (2026-09-21) #

Changed

  • Results Filter renamed to Filters.
  • Filters: data is now filters, results-title is now heading, results is now total-results, filter-items-shown is now max-visible-options and count-accent is now count-style.
  • Filters: remove-label, show-more-label and show-less-label are now clear-filters-label, expand-label and collapse-label.
  • Filters: the filter-change event is now nbhd-filter-change, and its facetKey and facetTitle details are now filterGroupKey and filterGroupTitle.
  • Pagination: current, total and visible-range are now current-page, total-pages and max-visible-pages, and the page-changed event is now nbhd-page-changed.
  • Pagination Search: term, message, sort and results are now search-term, heading, selected-sort and total-results, and the sort-changed event is now nbhd-sort-changed.
  • Pagination Search: the search-title, search-message, search-term, search-count and sort-options parts are now summary, summary-heading, summary-term, summary-results and sort.
  • Autosuggest: categories is now suggestions, term is now search-term and message is now heading.
  • Autosuggest: max-categories and max-category-items are now max-suggestion-lists and max-suggestion-items.
  • Autosuggest: the search-message, product-card, list and category-item parts are now heading, product, suggestion-list and suggestion-item, and the autosuggest-see-more event is now nbhd-autosuggest-see-more.
  • Search: focused is now autofocus, and the search-input and search-submit events are now nbhd-search-input and nbhd-search-submit.
  • Search: added an accessible label to the input.
  • Dialog: no-header is now hide-header.
  • Dialog: improved keyboard focus handling.

v5.0.0-alpha.11 (2026-09-15) #

Changed

  • Navigation Bar renamed to Navbar.
  • Refreshed for v5 (design tokens and styling): Carousel Item, Accordion and Accordion Item.
  • Navbar: the nav slot is now links, compact and full-width are now layout, and nav-alignment and content-alignment are now alignment.
  • Navbar: logo-accent is now logo-separator, and hide-on-mobile is now mobile-hidden.
  • Navbar: the nav-title, nav-description, logo-container, nav-container, nav-items and nav-cta parts are now title, content, logo-group, links-group, links and cta-wrapper.
  • Carousel: nav-variant is now navigation-variant, with primary, secondary and ghost values, and nav-position is now navigation-position.
  • Carousel: the nav, button-prev, button-next and carousel-nav-icon parts are now navigation, navigation-prev, navigation-next and carousel-navigation-icon.
  • Carousel: the hero carousels’ navigation and pagination are replaced by hide-navigation and hide-pagination, which are inverted, so arrows and dots show by default.
  • Carousel: the hero carousels’ nav-style, pagination-style and autoplay-interval (in seconds) are now navigation-variant, pagination-variant and autoplay (in milliseconds).

Removed

  • Minitron Carousel, Jumbotron Carousel and Humongotron Carousel. Use Carousel instead.
  • Navbar: the data and nav properties and the nav-link part; use slots instead.

v5.0.0-alpha.10 (2026-09-10) #

Changed

  • Refreshed for v5 (design tokens and styling): Breadcrumb and Video.
  • Horizontal alignment now uses start and end in place of left and right.
  • Humongotron: opacity is now overlay-opacity, contain and compact are now layout, and scroll-arrow is now scroll-indicator.
  • Humongotron: the visual part is now media, the media slot’s part is now media-slot, and the scroll-arrow part is now scroll-indicator.
  • Humongotron: updated the media overlay.
  • Jumbotron and Minitron: reversed is now reverse.
  • Jumbotron: the visual part is now media, and the media slot’s part is now media-slot.
  • Minitron: now updates when its media changes.
  • List: no-divider is now divider, which is inverted, so dividers are off by default.
  • Video Player: the visual, video and base-container parts are now media, media-slot and container.

Removed

  • Humongotron, Jumbotron and Minitron: data, h1 and carousel; set tag="h1" on the slotted text instead.
  • Humongotron and Jumbotron: constrain-logo.
  • Minitron: media-only, which is now automatic.
  • Video Player: data; put the video in the media slot instead.

v5.0.0-alpha.9 (2026-09-03) #

Changed

  • Refreshed for v5 (design tokens and styling): Headline Content, Content Block and Container.
  • Hero Split: reversed is now reverse, border is now framed and top-aligned is now content-alignment="start".
  • Hero Split: no-shadow is now shadow, which is inverted, so the shadow is off by default.
  • Hero Split: the four media-radius-* attributes are now media-radius and media-radius-pattern.
  • Hero Split: the visual part is now media, and the media slot’s part is now media-slot.
  • Flex: new reverse attribute, which replaces reversed.
  • Vertical alignment now uses center in place of middle.

Removed

  • Headline Content: data, full-width and h1.
  • Hero Split: data and h1; set tag="h1" on the slotted text instead.

v5.0.0-alpha.8 (2026-09-01) #

Added

  • Media overlay tokens for darkening images and video behind text.
  • Card List now supports Product Card.

Changed

  • Image: Widen image handling is now separate from the core Image component, and Widen images now need provider="widen".
  • Image: position is now image-focus, and img-class is now css-class.
  • Card: no-zoom is now zoom, which is inverted, so zoom is off by default.
  • Card: orientation is now aspect-ratio, overlay is now layout="featured", reversed is now reverse and clickableAction is now action.
  • Card: clickable cards now have an accessible label.
  • Card List: header-alignment is now intro-alignment, list-alignment is now grid-alignment, footer is now cta-placement="footer" and header-themed is now surface-scope="intro".
  • Card List: cards now go directly inside the list instead of in the cards slot.
  • Card List: the header-container, header and base-container parts are now intro-wrapper and intro-container, intro and grid-container.
  • Product Card: model is now identifier, and the discontinued and variant options are replaced by the badges and product properties.
  • Product Card: the model, finish, media-secondary and media-finish-image slots and parts are now identifier, product-option, media-alternate and media-option-image.
  • Finish: model is now identifier, variant is now product, and the finish-hover and finish-hover-out events are now nbhd-finish-hover and nbhd-finish-hover-out.
  • Badge: variant is replaced by css-class.

Removed

  • Card List: prefab props, the data property and the header attribute.
  • Card List: per-card attributes such as shadow, orientation, clickable and no-zoom; set them on each card instead.
  • Card: size, condensed and the click-overlay part; set size on Card List instead.
  • Product Card: the status, status-variant and exclusive slots; use badges instead.
  • Image: no-widen and animated.

v5.0.0-alpha.7 (2026-08-20) #

Added

  • Borders foundation documentation.
  • Text: new body and supporting variants, which replace default and note.

Changed

  • Form components (Input, Textarea, Select, Range, Radio and Checkbox) now use design tokens.
  • Link now uses design tokens.
  • Updated the default color tokens for each context.
  • surface prop accepts none again.

v5.0.0-alpha.6 (2026-08-07) #

Added

  • Storybook playground for previewing components on different surfaces and widths.

Changed

  • Reworked color and surface tokens into a semantic layer.
  • surface values are now primary, secondary, inverse and inverse-secondary, replacing primary-light, secondary-light, primary-dark and secondary-dark.
  • Text: updated styling.
  • Button and CTA: updated styling, primary is now the default variant, and there’s a new plain variant.

Removed

  • Button and CTA: the default variant; use primary instead.
  • CTA: the icon-only attribute.
  • Text: alignment and italic props.
  • surface prop: none option. (Restored in v5.0.0-alpha.7.)
  • The default brand token set.

v5.0.0-alpha.5 (2026-07-31) #

Added

  • Border width and radius tokens.

Changed

  • Text, Button and CTA now use design tokens.
  • Button and CTA: the icon variant is now the icon-only attribute.
  • Primitive tokens renamed to base tokens, and all token names are now namespaced.
  • Tokens: spacing tokens such as --nbhd-space-4 are now --nbhd-base-space-4.
  • Documentation: Size renamed to Sizing.

Removed

  • Tokens: the --nbhd-radius-* tokens; use --nbhd-border-radius-* instead.
  • Text: the note variant.

v5.0.0-alpha.4 (2026-07-29) #

Added

  • First pass at the revised Moen branding.

Changed

  • Flex, Container, Link, Breadcrumb, List, Image, Video, Badge, Finish and Spinner now use design tokens.
  • Updated container size tokens: --nbhd-maxInlineSize and --nbhd-minInlineSize are now --nbhd-size-container-max and --nbhd-size-container-min.
  • Updated how branding documentation is presented.

Removed

  • auto value from spacing tokens.

v5.0.0-alpha.3 (2026-07-22) #

Changed

  • Tokens: the --nbhd-fontSize-* tokens are replaced by text style tokens, such as --nbhd-typography-body-fontSize.
  • Button and CTA: --nbhd-actionPrimary-* is now --nbhd-action-primary-*.

v5.0.0-alpha.2 (2026-07-13) #

Changed

  • Updated design tokens, including font sizes.

Removed

  • Moen Plus brand.

v5.0.0-alpha.1 (2026-07-01) #

Added

  • Design tokens now drive all component styling, with automated checks to catch mistakes.

Changed

  • Updated Moen spacing.
  • Foundations: Elevation renamed to Z-Index, and Border Radius renamed to Radius.
  • The background attribute is now surface on every component that had it, and content-background is now content-surface on Card List, Jumbotron, Minitron and the hero carousels.
  • Tokens: --nbhd-borderRadius-* is now --nbhd-radius-*.

Removed

  • The dark and theme attributes; components now follow the surface they sit on.

v4.4.0 (2026-06-17) #

Added

  • Content Block component.

Changed

  • Headline Content: deprecated the fullwidth prop.

v4.3.0 (2026-05-26) #

Changed

  • Cleaned up Image, Card and Card List styles.
  • Card: fixed the layout not updating when the orientation changes.
  • Video: supports more video types.
  • MCP: updated server scripts.

v4.2.0 (2026-05-08) #

Changed

  • Updated Moen branding.
  • Search: fixed focus.
  • Product Card: cleaned up styling.

v4.1.0 (2026-04-30) #

Changed

  • Cleaned up Dialog.
  • Updated Moen branding.

v3.11.4 (2026-04-28) #

Changed

  • Input: fixed the autocomplete prop.

v3.11.3 (2026-04-14) #

Added

  • Results Filter: more styling options.

v3.11.2 (2026-04-14) #

Changed

  • Results Filter: fixed scrolling on small screens.

v4.0.0 (2026-03-31) #

Changed

  • Stable release.

v4.0.0-beta.8 (2026-03-27) #

Changed

  • Theming props now use background.
  • Cleaned up documentation.

v4.0.0-beta.7 (2026-03-17) #

Changed

  • Deprecated Minitron Carousel, Jumbotron Carousel and Humongotron Carousel. Use Carousel instead.

Removed

  • prefab prop from all components.

v4.0.0-beta.6 (2026-03-16) #

Added

  • Carousel Item component.

v4.0.0-beta.5 (2026-03-13) #

Added

  • Carousel component.

v4.0.0-beta.4 (2026-02-23) #

Changed

  • Updated documentation.

v3.11.1 (2026-02-16) #

Changed

  • Autosuggest: updated the events it sends.

v4.0.0-beta.3 (2026-02-13) #

Added

  • Accordion Item component.

Changed

  • Cleaned up Accordion.
  • Updated dependencies.

v3.11.0 (2026-02-10) #

Added

  • Events on Link, Autosuggest and Product Card.

v3.10.0 (2026-02-04) #

Changed

  • Results Filter: fixed keyboard tab focus.

v4.0.0-beta.2 (2026-01-28) #

Changed

  • Cleaned up Range, Radio and Select styling.

v4.0.0-beta.1 (2026-01-07) #

Changed

  • Cleaned up Checkbox, Textarea and Breadcrumb styling.
  • Updated dependencies.

v4.0.0-alpha.5 (2025-11-19) #

Added

  • More global default colors in the tokens.

Changed

  • Cleaned up Input styling.
  • Updated Master Lock branding.

v4.0.0-alpha.4 (2025-11-10) #

Changed

  • Fixed package build dependencies.

v4.0.0-alpha.3 (2025-11-10) #

Added

  • CSS framework package.
  • Tokens package for foundation settings.
  • Upload component.

Changed

  • Restructured theming styles.
  • Button and CTA: Underlined variant renamed to Tertiary.
  • theme prop renamed to dark, and it only applies when the component is inside another component using the dark theme.

v4.0.0-alpha.2 (2025-10-27) #

Added

  • FBIN brand styling.

v4.0.0-alpha.1 (2025-10-22) #

Added

  • Brands package for brand-specific styling of components.

v3.9.0 (2025-10-07) #

Changed

  • Results Filter: hides a facet when it has only one option that matches every result.

v3.8.0 (2025-09-17) #

Changed

  • Updated component fallback styles.

v3.7.0 (2025-09-09) #

Changed

  • Product Card: shows the matching product variant when hovering a finish.
  • Finish filter option now shows an image.

v3.6.0 (2025-09-02) #

Changed

  • Text: updated styling and variants.
  • Updated Larson branding.

v3.5.1 (2025-08-25) #

Changed

  • Image: fixed Widen URLs that already include parameters.

Removed

  • Search: maximum width limit.
  • Autosuggest: built-in Container.

v3.5.0 (2025-08-22) #

Added

  • Search: input focus.

Changed

  • Updated base element styling.
  • Updated Storybook to v9.

v3.4.1 (2025-08-18) #

Changed

  • Autosuggest: no longer needs a form, and its event was renamed.
  • Autosuggest: no longer renders when it has no data.

v3.4.0 (2025-08-07) #

Changed

  • Results Filter: cleaned up the layout.

v3.4.0-beta.12 (2025-08-06) #

Added

  • Pagination Search: label for the sort selection.

Changed

  • Facet Filter renamed to Results Filter.
  • Results Filter: updated filter option logic.

v3.4.0-beta.11 (2025-07-24) #

Changed

  • Auto Suggestion renamed to Autosuggest.
  • Facet renamed to List.
  • Updated Autosuggest and List styling.
  • Badge: updated status colors.

v3.4.0-beta.10 (2025-07-21) #

Changed

  • Improved how Facet Filter and Auto Suggestion work.

v3.4.0-beta.9 (2025-07-17) #

Added

  • Finish component.
  • Search component.

Changed

  • Updated Product Card and Facet Filter styling.

v3.4.0-beta.8 (2025-07-14) #

Changed

  • Improved Product Card and Facet Filter styling and behavior.

v3.4.0-beta.7 (2025-07-10) #

Changed

  • Improved Product Card styling and behavior.
  • Updated Auto Suggest layout.

v3.4.0-beta.6 (2025-06-27) #

Added

  • Facet Filter component.

Changed

  • Updated Pagination Search Bar.
  • Updated Select.

v3.4.0-beta.5 (2025-06-23) #

Changed

  • Updated Autosuggest layout.

v3.4.0-beta.4 (2025-06-18) #

Changed

  • Updated Autosuggest and Product Card layout.
  • Text: updated styling and props.

v3.4.0-beta.3 (2025-06-18) #

Changed

  • Autosuggest: fixed a layout bug.

v3.4.0-beta.2 (2025-06-18) #

Added

  • Autosuggest component.
  • Facet component.

v3.4.0-beta.1 (2025-06-18) #

Added

  • Product Card component.
  • Spinner component.

v3.3.0 (2025-05-08) #

Changed

  • Updated dependencies, including React.

v3.2.0 (2025-05-05) #

Added

  • Button: unstyled variant.

Removed

  • Humongotron: autoplay control.

v3.1.0 (2025-04-28) #

Added

  • Video: pause and play button when autoplay is on.

Changed

  • Card: renders as a button when it is clickable and has a click action.

v3.0.0 (2025-03-06) #

Changed

  • Stable release.

v3.0.0-rc.3 (2025-02-19) #

Changed

  • Card List: fixed CTA theming.
  • Navigation Bar: fixed styling when sticky.
  • Video Player: fixed layout with standard video.

v3.0.0-rc.2 (2025-02-14) #

Changed

  • Updated dependencies.

v3.0.0-rc.1 (2025-02-14) #

Changed

  • Navigation Bar: fixed a slot bug.
  • Card: fixed a bug when clickable.

Removed

  • Legacy component references.

v3.0.0-beta.8 (2025-02-12) #

Changed

  • Updated carousel component props.

v3.0.0-beta.7 (2025-02-12) #

Added

  • Humongotron Carousel component.

v3.0.0-beta.6 (2025-02-10) #

Added

  • Minitron Carousel and Jumbotron Carousel components.

Changed

  • Cleaned up Minitron and Jumbotron.

Removed

  • Humongotron: carousel.

v3.0.0-beta.5 (2025-01-15) #

Added

  • First pass at Larson branding.

v3.0.0-beta.4 (2025-01-14) #

Added

  • Prefab options on Hero Split, Video Player and Navigation Bar.

v3.0.0-beta.3 (2025-01-07) #

Added

  • Prefab options on Headline Content and Card List.

v3.0.0-beta.2 (2024-12-17) #

Added

  • Text component.

Changed

  • Updated CTA and Button theming.

Removed

  • Eyebrow, Title, Subtitle, Content and Note, merged into Text.

v3.0.0-beta.1 (2024-11-19) #

Added

  • Examples on foundation pages.

Changed

  • Styleguide renamed to documentation.

v2.5.0-beta.2 (2024-10-08) #

Added

  • Input, Range, Checkbox, Radio, Select, Breadcrumbs, Dialog, Accordion and Label components.
  • Note: border prop.
  • Button, Link and CTA: prefix and suffix slots.

v2.5.0-beta.1 (2024-09-26) #

Added

  • Button and Minitron Item components.
  • All components in Storybook.

Changed

  • Restructured component files, and combined Elements and Components.
  • Anchor renamed to Link.

v2.4.0 (2024-09-13) #

Changed

  • Updated font references.

v2.3.1 (2024-08-29) #

Added

  • Navigation Bar: zIndex styling option.

v2.3.0 (2024-08-28) #

Changed

  • Humongotron and Jumbotron: updated logo sizing.

v2.2.0 (2024-08-28) #

Added

  • Navigation Bar component.

v2.1.0 (2024-08-26) #

Changed

  • Title: font size changes at the large breakpoint.

v2.0.0 (2024-08-22) #

Changed

  • Card List: card title is now optional.

v2.0.0-rc.5 (2024-08-08) #

Changed

  • Updated House of Rohl styling.
  • Updated dependencies.

v2.0.0-rc.4 (2024-07-31) #

Changed

  • Styles now use logical properties, so layouts adapt to text direction.
  • Updated dependencies.

v2.0.0-rc.3 (2024-07-25) #

Changed

  • Fixed SVG icons not showing in Safari.
  • Container: fixed padding in Safari.

v2.0.0-rc.2 (2024-07-24) #

Changed

  • Video: supports Widen for each brand.

v2.0.0-rc.1 (2024-07-24) #

Changed

  • Updated dependencies.

v2.0.0-beta.5 (2024-07-15) #

Changed

  • Video: allows URLs that are not from Widen.
  • Video Player: fixed audio playing while muted.

v2.0.0-beta.4 (2024-07-11) #

Changed

  • Minitron: fixed content alignment.
  • Updated styles ahead of Sass deprecating mixed declarations.
  • Updated dependencies.

v2.0.0-beta.3 (2024-07-10) #

Added

  • Master Lock branding.
  • Badge: fallback background color.
  • Shopify recipes for Card List, Jumbotron, Minitron and Video Player.
  • This changelog.

Changed

  • Restructured brand styling files.
  • Card List: updated the main CTA when shown in the footer.
  • Minitron: details are now centered vertically.
  • CTA: updated hover styling.
  • Updated Storybook.

v2.0.0-beta.2 (2024-07-03) #

Added

  • House of Rohl branding.

v2.0.0-beta.1 (2024-07-02) #

Changed

  • Jumbotron and Humongotron: fixed a logo bug.

v2.0.0-alpha.4 (2024-06-25) #

Added

  • Shopify recipes.

Changed

  • Updated type references for the React components.

v2.0.0-alpha.3 (2024-06-20) #

Changed

  • Updated custom font references and font sizes.
  • Updated packages.

v2.0.0-alpha.2 (2024-06-12) #

Added

  • New Neighborhood styleguide.
  • Storybook.

Changed

  • Cleaned up references and types.

v2.0.0-alpha.1 (2024-05-22) #

Added

  • Core components: Card List, Headline Content, Hero Split, Humongotron, Jumbotron, Minitron and Video Player.
  • Humongotron as its own component, separate from Jumbotron.
  • React versions of the components.
  • Demos with React, Vite and Next.js.
Esc
↑ ↓ to move↵ to open