@primer/[email protected]

Minor Changes

• #825 2c8e9240 Thanks @rezrah! - Switched to use CSS Logical Properties in compiled output.

  • Compiled styles now directly use CSS logical properties (e.g., margin-inline-start, margin-inline-end) instead of physical properties (margin-left, margin-right).
  • This change simplifies the stylesheet and reduces its overall size (652kB > 593kB)

  Example of the change:

  Source:

  .selector {
    margin-inline-start: var(--base-size-20);
  }

  Previous compiled output	New compiled output
  [dir='ltr'] .selector { margin-left: 2px; } [dir='rtl'] .selector { margin-right: 2px; }	.selector { margin-inline-start: 2px; }

Patch Changes

• #825 2c8e9240 Thanks @rezrah! - Fixed errors in compiled CSS stylesheets where selectors with special characters were being unintentionally escaped for compatibility with legacy browsers.

• #818 281beb08 Thanks @joshfarrant! - FormControl.Validation is now associated with the relevant input using aria-describedby.

• #822 75da350d Thanks @joshfarrant! - Updated IDEChatMessage type declaration to differentiate between assistant and user messages.

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

See documentation for this release

Patch Changes

• #812 8ce76569 Thanks @danielguillan! - Ensure accessible content order in PricingOptions markup

• #815 7345cc9d Thanks @rezrah! - Fixed corner background overflow bug in Card component on Safari browsers

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

Minor Changes

• #811 6331ae61 Thanks @rezrah! - River and SectionIntro link colors now default to blue (accent) for consistency with Card, Pillar and similar components that feature blue links.

  ⚠️ This is a visual breaking change. Please manually review all usages of River and SectionIntro to ensure there is sufficient contrast with the background color.

Patch Changes

• #805 2928995b Thanks @rezrah! - Disabled all transitions and auto-staggering when reduced-motion user preference is enabled

• #809 bbb14ce9 Thanks @rezrah! - Updated Link underline to fill entire width

• #798 af335d37 Thanks @joshfarrant! - - Fixed a bug where the Bento leadingVisual prop wouldn't honour the provided size.

  • Updated the Card.Icon internal implementation to use the new Icon component.

• #810 774b91b0 Thanks @rezrah! - Added new background customization options to CTABanner

  New props:

  • backgroundColor
  • backgroundImageSrc
  • backgroundImageSize
  • backgroundImagePosition

  Also added variant prop to CTABanner.Description, to achieve higher contrast when using background images.

  🔗 See the documentation for more details and usage examples.

• #805 2928995b Thanks @rezrah! - Removed negative margin from RiverStoryScroll when reduced-motion user preference is enabled

@primer/[email protected]

Minor Changes

• #798 af335d37 Thanks @joshfarrant! - ⚠️ Breaking change: Removed all Card-icon-background/color tokens (eg --brand-Card-icon-background-blue, --brand-Card-icon-color-orange)

@primer/[email protected]

Minor Changes

• #779 b5c291e2 Thanks @joshfarrant! - Accessibility improvements to the FormControl.Hint component.

  • FormControl.Hint is now automatically associated with the form field using aria-describedby.
  • Improvements to the styling of FormControl.Hint when used alongside a Checkbox.

Patch Changes

• #791 8105b6a3 Thanks @joshfarrant! - Increased spacing between River components on narrow viewports from 28px to 36px

• #776 06fd8476 Thanks @joshfarrant! - Added aria-describedby attribute to leading/trailing text and visuals in TextInput component

• #781 ec6ffc36 Thanks @joshfarrant! - - Card component no longer expands to full width when fullWidth={false}

  • Card component no longer renders duplicate borders in dark mode when hasBorder={true}

• #774 a6baf41d Thanks @joshfarrant! - Fixed issue where Button component would reflow and break over multiple lines when its text content exceeded the viewport width.

  ⚠️ Breaking changes to the following design tokens:

  - --brand-control-medium-paddingBlock
  + --brand-control-medium-paddingBlock-normal

  - --brand-control-large-paddingBlock
  + --brand-control-large-paddingBlock-normal

  Additional tokens added:

  + --brand-control-medium-paddingBlock-condensed
  + --brand-control-large-paddingBlock-condensed

• #728 c6ee839e Thanks @MelissaPastore! - Fixed a bug with the Checkbox component where validation messages wouldn't be positioned correctly.

• #768 0270f06d Thanks @danielguillan! - Improves spacing of RiverBreakout content

• #797 b3e34be5 Thanks @rezrah! - Fixed visual bug in RiverStoryScroll layout on narrow viewports. Also adjusted positioning of the pagination to be closer to the scrolled items.

• #760 6be1118d Thanks @joshfarrant! - Fixed a bug where passing a className to Hero.Label or Hero.Eyebrow would replace the default class.

• #766 d10dc535 Thanks @danielguillan! - Adds internal paddings to River content on larger viewports

• #767 299ad371 Thanks @danielguillan! - - Update the order of River children to ensure an accessible markup structure.

  • On narrow viewports, the content and visuals are now flipped, with the visuals always placed first to enhance visual hierarchy.

    ⚠️ This may introduce a visual breaking change, whereby the visual is now displayed earlier in the page than originally intended. Please manually review content adjacent to the River components for correctness.

• #785 ec7d4023 Thanks @joshfarrant! - Fixed bug in Card component which caused the focus outline to not display when in dark-mode

@primer/[email protected]

Minor Changes

• #774 a6baf41d Thanks @joshfarrant! - Fixed issue where Button component would reflow and break over multiple lines when its text content exceeded the viewport width.

  ⚠️ Breaking changes to the following design tokens:

  - --brand-control-medium-paddingBlock
  + --brand-control-medium-paddingBlock-normal

  - --brand-control-large-paddingBlock
  + --brand-control-large-paddingBlock-normal

  Additional tokens added:

  + --brand-control-medium-paddingBlock-condensed
  + --brand-control-large-paddingBlock-condensed

Patch Changes

• #791 8105b6a3 Thanks @joshfarrant! - Increased spacing between River components on narrow viewports from 28px to 36px

• #769 41531950 Thanks @danielguillan! - Adjust text 800 line height

@primer/[email protected]

See documentation for this release

Patch Changes

• #754 d061705c Thanks @joshfarrant! - The RiverStoryScroll component now enforces that its children must be River components through type checking, instead of relying on a run-time check.

• #739 24bd6338 Thanks @joshfarrant! - Fixed a bug in the SubNav component where the submenu toggle was rendered as an empty button on mobile viewports.

• #736 73cf706e Thanks @lukasoppermann! - Replaced the --brand-VideoPlayer-tooltip-padding design token in the VideoPlayer component with two new tokens that separately account for padding along each axis: --brand-VideoPlayer-tooltip-padding-inline and --brand-VideoPlayer-tooltip-padding-block.

  Note: This update does not introduce any visual changes. Please update any manual references to --brand-VideoPlayer-tooltip-padding to use the new tokens.

  - --brand-VideoPlayer-tooltip-padding
  + --brand-VideoPlayer-tooltip-padding-inline
  + --brand-VideoPlayer-tooltip-padding-block

• #722 99328ce0 Thanks @danielguillan! - Added support for <b> elements to Bento, RiverBreakout, SectionIntro, Timeline, and Testimonial components, as <em> is semantically interpreted by screen readers for emphasis, while <b> allows duo-tone text to function purely as a visual decoration.

  Usage example:

  <SectionIntro>
    <SectionIntro.Heading>
      <b>Expressive headline</b> about an exclusive set of features.
    </SectionIntro.Heading>
  </SectionIntro>

  Important
  The updated components still support the use of <em> elements for backward compatibility, but moving forward, the only recommended element for emphasized text is <b>.

• #733 2dcb9bad Thanks @danielguillan! - Fixes Label component multiline reflow

• #746 4af8db14 Thanks @joshfarrant! - Fixed a bug where Card components rendered within a dark colour mode would not take the full width of their container.

@primer/[email protected]

Patch Changes

• #736 73cf706e Thanks @lukasoppermann! - Replaced the --brand-VideoPlayer-tooltip-padding design token in the VideoPlayer component with two new tokens that separately account for padding along each axis: --brand-VideoPlayer-tooltip-padding-inline and --brand-VideoPlayer-tooltip-padding-block.

  Note: This update does not introduce any visual changes. Please update any manual references to --brand-VideoPlayer-tooltip-padding to use the new tokens.

  - --brand-VideoPlayer-tooltip-padding
  + --brand-VideoPlayer-tooltip-padding-inline
  + --brand-VideoPlayer-tooltip-padding-block

• #738 f6bab573 Thanks @lukasoppermann! - Fixed line formatting in functional/size/size-coarse.css and functional/size/size-fine.css

  E.g.

  -    @media (pointer: coarse) { :root {
  -  --brand-controlStack-medium-gap-auto: var(--base-size-12);
  -  --brand-controlStack-small-gap-auto: var(--base-size-16);
  -  --brand-control-minTarget-auto: var(--base-size-44);
  -}}
  +@media (pointer: coarse) {
  +  :root {
  +    --brand-controlStack-medium-gap-auto: var(--base-size-12);
  +    --brand-controlStack-small-gap-auto: var(--base-size-16);
  +    --brand-control-minTarget-auto: var(--base-size-44);
  +  }
  +}