semrush · Valeria-Zimnitskaya · Sep 22, 2026 · Jun 30, 2026 · Jul 1, 2026 · Jul 2, 2026
diff --git a/playground/entries/RadioCards.tsx b/playground/entries/RadioCards.tsx
@@ -0,0 +1,63 @@
+import { Flex } from '@semcore/ui/base-components';
+import type { NSRadioCards } from '@semcore/ui/radio-cards';
+import RadioCards from '@semcore/ui/radio-cards';
+import React from 'react';
+
+import type { JSXProps } from '../types/JSXProps';
+import type { PlaygroundEntry } from '../types/Playground';
+import createGithubLink from '../utils/createGHLink';
+import renderIcon from '../utils/renderIcon';
+
+export type RadioCardsJSXProps = JSXProps<Partial<NSRadioCards.Props>> & JSXProps<Partial<NSRadioCards.Item.Props>>;
+
+function getJSX(props: RadioCardsJSXProps) {
+  return (
+    <Flex bg='bg-secondary-neutral' p={3} w='100%' direction='column'>
+      <RadioCards aria-label='Radio cards' name='radio-cards'>
+        <RadioCards.Item value='all' text='All' textAddon='~9,000' />
+        <RadioCards.Item
+          value='best'
+          text={props.text}
+          textAddon={props.textAddon}
+          description={props.description}
+          iconAddon={props.iconAddon ? renderIcon('before', 'm') : undefined}
+          disabled={props.disabled}
+        />
+      </RadioCards>
+    </Flex>
+  );
+}
+
+const entry: PlaygroundEntry<RadioCardsJSXProps> = {
+  JSX: (props) => getJSX(props),
+  controls: {
+    text: {
+      type: 'text',
+      value: 'Best',
+      displayName: 'Text',
+    },
+    iconAddon: {
+      type: 'boolean',
+      value: false,
+      displayName: 'Icon addon',
+    },
+    textAddon: {
+      type: 'text',
+      value: '300',
+      displayName: 'Text addon',
+    },
+    description: {
+      type: 'text',
+      value: 'Secondary text',
+      displayName: 'Description',
+    },
+    disabled: {
+      type: 'boolean',
+      value: false,
+      displayName: 'Disabled',
+    },
+  },
+  link: createGithubLink('radio-cards'),
+};
+
+export default entry;
diff --git a/playground/registry.ts b/playground/registry.ts
@@ -37,6 +37,7 @@ import Pagination from './entries/Pagination';
 import Pills from './entries/Pills';
 import ProgressBar from './entries/ProgressBar';
 import Radio from './entries/Radio';
+import RadioCards from './entries/RadioCards';
 import Spin from './entries/Spin';
 import SpinContainer from './entries/SpinContainer';
 import Switch from './entries/Switch';
@@ -71,6 +72,7 @@ const registry = {
   Pills,
   ProgressBar,
   Radio,
+  RadioCards,
   Spin,
   SpinContainer,
   Switch,

diff --git a/playground/utils/renderIcon.tsx b/playground/utils/renderIcon.tsx
@@ -48,8 +48,8 @@ const SizeToIconMap = {
     after: <ArrowRightM />,
   },
   l: {
-    before: <CheckL />,
-    after: <ArrowRightL />,
+    before: <CheckM />,
+    after: <ArrowRightM />,
   },
 };
 

diff --git a/playwright.browser.config.ts b/playwright.browser.config.ts
@@ -9,8 +9,9 @@ const config: PlaywrightTestConfig = {
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
+  updateSnapshots: 'changed',
   /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
+  retries: process.env.CI ? 2 : 2,
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 2 : 4,
   grep: TAG ? new RegExp(TAG) : testPlanFilter(),

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/...orizontal-bar-legend-and-pattern-fill-keyboard-interaction-1-chromium-linux.png b/...orizontal-bar-legend-and-pattern-fill-keyboard-interaction-1-chromium-linux.png
diff --git a/...ify-horizontal-bar-legend-and-pattern-fill-mouse-interaction-1-webkit-linux.png b/...ify-horizontal-bar-legend-and-pattern-fill-mouse-interaction-1-webkit-linux.png
diff --git a/...ify-horizontal-bar-legend-and-pattern-fill-mouse-interaction-2-webkit-linux.png b/...ify-horizontal-bar-legend-and-pattern-fill-mouse-interaction-2-webkit-linux.png
diff --git a/...t-with-con-b1c7d-andard-all-features-medium-size-with-axis-1-chromium-linux.png b/...t-with-con-b1c7d-andard-all-features-medium-size-with-axis-1-chromium-linux.png
diff --git a/...ced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png b/...ced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png
diff --git a/...igger-input-width-grows-after-entering-date-with-locale-pt-1-chromium-linux.png b/...igger-input-width-grows-after-entering-date-with-locale-pt-1-chromium-linux.png
diff --git a/...nced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png b/...nced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png
diff --git a/...sual-Verify-focus-when-notice-and-interactive-item-in-menu-1-chromium-linux.png b/...sual-Verify-focus-when-notice-and-interactive-item-in-menu-1-chromium-linux.png
diff --git a/...-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-5-webkit-linux.png b/...-test.tsx-snapshots/-visual-Verify-base-feedback-form-styles-5-webkit-linux.png
diff --git a/...sual-Verify-feedback-rating-notice-with-title-and-subtitle-1-chromium-linux.png b/...sual-Verify-feedback-rating-notice-with-title-and-subtitle-1-chromium-linux.png
diff --git a/...isual-Verify-feedback-rating-notice-with-title-and-subtitle-1-firefox-linux.png b/...isual-Verify-feedback-rating-notice-with-title-and-subtitle-1-firefox-linux.png
diff --git a/...visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-webkit-linux.png b/...visual-Verify-feedback-rating-notice-with-title-and-subtitle-1-webkit-linux.png
diff --git a/...ots/-visual-Verify-feedback-rating-with-custom-modal-width-1-chromium-linux.png b/...ots/-visual-Verify-feedback-rating-with-custom-modal-width-1-chromium-linux.png
diff --git a/...hots/-visual-Verify-feedback-rating-with-custom-modal-width-1-firefox-linux.png b/...hots/-visual-Verify-feedback-rating-with-custom-modal-width-1-firefox-linux.png
diff --git a/...shots/-visual-Verify-feedback-rating-with-custom-modal-width-1-webkit-linux.png b/...shots/-visual-Verify-feedback-rating-with-custom-modal-width-1-webkit-linux.png
diff --git a/...-visual-Verify-feedback-rating-with-error-notice-on-submit-1-chromium-linux.png b/...-visual-Verify-feedback-rating-with-error-notice-on-submit-1-chromium-linux.png
diff --git a/.../-visual-Verify-feedback-rating-with-error-notice-on-submit-1-firefox-linux.png b/.../-visual-Verify-feedback-rating-with-error-notice-on-submit-1-firefox-linux.png
diff --git a/...s/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-webkit-linux.png b/...s/-visual-Verify-feedback-rating-with-error-notice-on-submit-1-webkit-linux.png
diff --git a/...apshots/-visual-Verify-five-stars-form-base-example-styles-1-chromium-linux.png b/...apshots/-visual-Verify-five-stars-form-base-example-styles-1-chromium-linux.png
diff --git a/...napshots/-visual-Verify-five-stars-form-base-example-styles-1-firefox-linux.png b/...napshots/-visual-Verify-five-stars-form-base-example-styles-1-firefox-linux.png
diff --git a/...snapshots/-visual-Verify-five-stars-form-base-example-styles-1-webkit-linux.png b/...snapshots/-visual-Verify-five-stars-form-base-example-styles-1-webkit-linux.png
diff --git a/...apshots/-visual-Verify-five-stars-form-base-example-styles-2-chromium-linux.png b/...apshots/-visual-Verify-five-stars-form-base-example-styles-2-chromium-linux.png
diff --git a/...napshots/-visual-Verify-five-stars-form-base-example-styles-2-firefox-linux.png b/...napshots/-visual-Verify-five-stars-form-base-example-styles-2-firefox-linux.png
diff --git a/...snapshots/-visual-Verify-five-stars-form-base-example-styles-2-webkit-linux.png b/...snapshots/-visual-Verify-five-stars-form-base-example-styles-2-webkit-linux.png
diff --git a/...apshots/-visual-Verify-five-stars-form-base-example-styles-3-chromium-linux.png b/...apshots/-visual-Verify-five-stars-form-base-example-styles-3-chromium-linux.png
diff --git a/...napshots/-visual-Verify-five-stars-form-base-example-styles-3-firefox-linux.png b/...napshots/-visual-Verify-five-stars-form-base-example-styles-3-firefox-linux.png
diff --git a/...snapshots/-visual-Verify-five-stars-form-base-example-styles-3-webkit-linux.png b/...snapshots/-visual-Verify-five-stars-form-base-example-styles-3-webkit-linux.png
diff --git a/...apshots/-visual-Verify-five-stars-form-base-example-styles-4-chromium-linux.png b/...apshots/-visual-Verify-five-stars-form-base-example-styles-4-chromium-linux.png
diff --git a/...napshots/-visual-Verify-five-stars-form-base-example-styles-4-firefox-linux.png b/...napshots/-visual-Verify-five-stars-form-base-example-styles-4-firefox-linux.png
diff --git a/...apshots/-visual-Verify-five-stars-form-base-example-styles-5-chromium-linux.png b/...apshots/-visual-Verify-five-stars-form-base-example-styles-5-chromium-linux.png
diff --git a/...apshots/-visual-Verify-five-stars-form-base-example-styles-6-chromium-linux.png b/...apshots/-visual-Verify-five-stars-form-base-example-styles-6-chromium-linux.png
diff --git a/...napshots/-visual-Verify-five-stars-form-base-example-styles-6-firefox-linux.png b/...napshots/-visual-Verify-five-stars-form-base-example-styles-6-firefox-linux.png
diff --git a/...x-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-chromium-linux.png b/...x-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-chromium-linux.png
diff --git a/...sx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-firefox-linux.png b/...sx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-firefox-linux.png
diff --git a/...tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-webkit-linux.png b/...tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-1-webkit-linux.png
diff --git a/...x-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-chromium-linux.png b/...x-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-chromium-linux.png
diff --git a/...sx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-firefox-linux.png b/...sx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-firefox-linux.png
diff --git a/...tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-webkit-linux.png b/...tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-2-webkit-linux.png
diff --git a/...x-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-chromium-linux.png b/...x-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-chromium-linux.png
diff --git a/...sx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-firefox-linux.png b/...sx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-firefox-linux.png
diff --git a/...tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-webkit-linux.png b/...tsx-snapshots/-visual-Verify-yes-no-form-base-example-styles-3-webkit-linux.png
diff --git a/...-test.tsx-snapshots/-visual-Verify-Notice-with-Undo-action-1-chromium-linux.png b/...-test.tsx-snapshots/-visual-Verify-Notice-with-Undo-action-1-chromium-linux.png
diff --git a/....browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-chromium-linux.png b/....browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-chromium-linux.png
diff --git a/...e.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-firefox-linux.png b/...e.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-firefox-linux.png
diff --git a/...ce.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-webkit-linux.png b/...ce.browser-test.tsx-snapshots/-visual-Verify-Feedback-notice-1-webkit-linux.png
diff --git a/semcore/pills/__tests__/pills.axe-test.ts b/semcore/pills/__tests__/pills.axe-test.ts
@@ -16,11 +16,4 @@ test.describe(`@pills ${TAG.ACCESSIBILITY}`, () => {
     const violations = await getAccessibilityViolations({ page });
     expect(violations).toEqual([]);
   });
-
-  test('Custom pills example', async ({ page }) => {
-    await loadPage(page, 'stories/components/pills/docs/examples/custom_pills_example.tsx', 'en');
-
-    const violations = await getAccessibilityViolations({ page });
-    expect(violations).toEqual([]);
-  });
 });
diff --git a/semcore/pills/__tests__/pills.browser-test.tsx b/semcore/pills/__tests__/pills.browser-test.tsx
@@ -68,28 +68,6 @@ test.describe(`${TAG.VISUAL}`, () => {
     });
   });
 
-  test('Verify custom pills', {
-    tag: [TAG.PRIORITY_HIGH, '@pills'],
-  }, async ({ page }) => {
-    await loadPage(page, 'stories/components/pills/docs/examples/custom_pills_example.tsx', 'en');
-
-    await test.step('Verify hover state', async () => {
-      await locators.pillsItem(page).nth(1).hover();
-      await expect(page).toHaveScreenshot();
-    });
-
-    await test.step('Verify focus state', async () => {
-      await page.keyboard.press('Tab');
-      await expect(page).toHaveScreenshot();
-    });
-
-    await test.step('Verify navigation and hover', async () => {
-      await page.keyboard.press('ArrowRight');
-      await locators.pillsItem(page).nth(1).hover();
-      await expect(page).toHaveScreenshot();
-    });
-  });
-
   test('Verify pills with tab panel', {
     tag: [TAG.PRIORITY_HIGH, '@pills'],
   }, async ({ page }) => {

diff --git a/semcore/progress-bar/src/style/progress-bar.shadow.css b/semcore/progress-bar/src/style/progress-bar.shadow.css
@@ -67,7 +67,6 @@ SProgressBar[animation] {
   animation-timing-function: linear;
   animation-iteration-count: infinite;
   animation-duration: var(--duration);
-
   &:not([theme='invert']) {
     background-color: transparent;
   }

diff --git a/semcore/radio-cards/.npmignore b/semcore/radio-cards/.npmignore
@@ -0,0 +1,5 @@
+node_modules
+__tests__
+src
+tsconfig.json
+tsconfig.tsbuildinfo
diff --git a/semcore/radio-cards/CHANGELOG.md b/semcore/radio-cards/CHANGELOG.md
@@ -0,0 +1,9 @@
+# Changelog
+
+CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
+
+## [18.0.0] - 2026-08-04
+
+### Added
+
+- `RadioCards` component.
diff --git a/semcore/radio-cards/README.md b/semcore/radio-cards/README.md
@@ -0,0 +1,37 @@
+# @semcore/radio-cards
+
+[![version](https://img.shields.io/npm/v/@semcore/radio-cards.svg)](https://www.npmjs.com/@semcore/radio-cards)
+[![downloads](https://img.shields.io/npm/dt/@semcore/radio-cards.svg)](https://www.npmjs.com/package/@semcore/radio-cards)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE)
+
+> This component is part of the Intergalactic Design System
+
+### 📖 [Component documentation](https://developer.semrush.com/intergalactic/components/radio-cards/)
+
+### 🏠 [Design system](https://developer.semrush.com/intergalactic/)
+
+## Install
+
+```sh
+npm install @semcore/radio-cards
+```
+
+
+
+## 👤 Author
+
+[UI-kit team](https://github.com/semrush/intergalactic/blob/HEAD/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
+
+## 🤝 Contributing
+
+Contributions, issues and feature requests are welcome!
+
+Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/HEAD/CONTRIBUTING.md).
+
+## Show your support
+
+Give a ⭐️ if this project helped you!
+
+## 📝 License
+
+This project is [MIT](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE) licensed.
diff --git a/semcore/radio-cards/__tests__/__snapshots__/index.test.tsx.snap b/semcore/radio-cards/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,60 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`RadioCards > Verify data-ui-name 1`] = `
+{
+  "children": [
+    {
+      "children": [
+        {
+          "children": [
+            {
+              "children": [],
+              "uiName": null,
+            },
+            {
+              "children": [
+                {
+                  "children": [
+                    {
+                      "children": [],
+                      "uiName": "Text",
+                    },
+                  ],
+                  "uiName": "Box",
+                },
+              ],
+              "uiName": "Flex",
+            },
+          ],
+          "uiName": "RadioCards.Item",
+        },
+        {
+          "children": [
+            {
+              "children": [],
+              "uiName": null,
+            },
+            {
+              "children": [
+                {
+                  "children": [
+                    {
+                      "children": [],
+                      "uiName": "Text",
+                    },
+                  ],
+                  "uiName": "Box",
+                },
+              ],
+              "uiName": "Flex",
+            },
+          ],
+          "uiName": "RadioCards.Item",
+        },
+      ],
+      "uiName": "RadioCards",
+    },
+  ],
+  "uiName": null,
+}
+`;