From 9c3b2f70c6e85865b1948f453df763755b131045 Mon Sep 17 00:00:00 2001
From: Sheila Sheikh <166654065+sheila-semrush@users.noreply.github.com>
Date: Wed, 22 Jul 2026 14:37:11 +0200
Subject: [PATCH 1/5] [base-trigger] updated styles

---
 .../src/style/base-trigger.shadow.css         | 57 +++++--------------
 .../src/style/button-trigger.shadow.css       |  9 ++-
 2 files changed, 19 insertions(+), 47 deletions(-)

diff --git a/semcore/base-trigger/src/style/base-trigger.shadow.css b/semcore/base-trigger/src/style/base-trigger.shadow.css
index 2046743fc6..f23c8ddc87 100644
--- a/semcore/base-trigger/src/style/base-trigger.shadow.css
+++ b/semcore/base-trigger/src/style/base-trigger.shadow.css
@@ -8,7 +8,6 @@ SBaseTrigger {
   white-space: nowrap;
   user-select: none;
   box-sizing: border-box;
-  padding: 0;
   margin: 0;
   box-shadow: none;
   text-decoration: none;
@@ -19,12 +18,15 @@ SBaseTrigger {
   font-family: inherit;
   cursor: pointer;
 
-  background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-select-trigger-normal */
+  background: var(--intergalactic-control-select-trigger-normal, oklch(1 0 0));
 
   font-weight: var(--intergalactic-regular, 400);
   border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
 
+  border-radius: var(--intergalactic-control-rounded, 6px);
+  padding: 0 var(--intergalactic-spacing-content-inset-inline, 12px);
+  
   &::-moz-focus-inner {
     border: none;
     padding: 0;
@@ -40,13 +42,13 @@ SBaseTrigger {
   }
 
   &:hover {
-    background-color: var(--intergalactic-bg-primary-neutral-hover, oklch(0.98 0.001 180)); /* TODO: --intergalactic-control-select-trigger-hover */
+    background-color: var(--intergalactic-control-select-trigger-hover, oklch(0.98 0.001 180));
   }
 
   &:active,
   &[active] {
     border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
-    background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-select-trigger-active */
+    background-color: var(--intergalactic-control-select-trigger-active, oklch(1 0 0));
   }
 }
 
@@ -61,6 +63,7 @@ SInner {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: var(--intergalactic-spacing-content-gap-medium, 6px);
   height: 100%;
   width: 100%;
 }
@@ -68,11 +71,9 @@ SInner {
 SText {
   display: inline;
   /* disable-tokens-validator */
-  padding: 1px 0;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  line-height: var(--intergalactic-lh-200, 142%);
   flex-grow: 1;
   text-align: left;
 }
@@ -83,57 +84,25 @@ SAddon {
   justify-content: center;
   flex-shrink: 0;
   pointer-events: none;
-}
 
-SBaseAddon {
-  width: 12px;
-  height: 12px;
+  &:only-child {
+    margin-left: calc(-1 * var(--intergalactic-spacing-1x, 4px));
+    margin-right: calc(-1 * var(--intergalactic-spacing-1x, 4px));
+  }
 }
 
 SBaseTrigger[size='m'] {
   min-width: var(--intergalactic-form-control-m, 32px);
   height: var(--intergalactic-form-control-m, 32px);
-  border-radius: var(--intergalactic-control-rounded, 6px);
-  padding: 0 var(--intergalactic-spacing-2x, 8px);
   font-size: var(--intergalactic-fs-200, 14px);
-
-  & SAddon {
-    &:not(:only-child):first-child {
-      margin-right: var(--intergalactic-spacing-2x, 8px);
-    }
-
-    &:not(:only-child):last-child {
-      margin-left: var(--intergalactic-spacing-2x, 8px);
-    }
-
-    &:only-child {
-      margin-left: calc(-1 * var(--intergalactic-spacing-1x, 4px));
-      margin-right: calc(-1 * var(--intergalactic-spacing-1x, 4px));
-    }
-  }
+  line-height: var(--intergalactic-lh-200, 142%);
 }
 
 SBaseTrigger[size='l'] {
   min-width: var(--intergalactic-form-control-l, 44px);
   height: var(--intergalactic-form-control-l, 44px);
-  border-radius: var(--intergalactic-control-rounded, 6px);
-  padding: 0 var(--intergalactic-spacing-3x, 12px);
   font-size: var(--intergalactic-fs-300, 16px);
-
-  & SAddon {
-    &:not(:only-child):first-child {
-      margin-right: var(--intergalactic-spacing-2x, 8px);
-    }
-
-    &:not(:only-child):last-child {
-      margin-left: var(--intergalactic-spacing-2x, 8px);
-    }
-
-    &:only-child {
-      margin-left: calc(-1 * var(--intergalactic-spacing-1x, 4px));
-      margin-right: calc(-1 * var(--intergalactic-spacing-1x, 4px));
-    }
-  }
+  line-height: var(--intergalactic-lh-300, 150%);
 }
 
 SBaseTrigger[neighborLocation='right'] {
diff --git a/semcore/base-trigger/src/style/button-trigger.shadow.css b/semcore/base-trigger/src/style/button-trigger.shadow.css
index 29b3fb18e8..f31559c95a 100644
--- a/semcore/base-trigger/src/style/button-trigger.shadow.css
+++ b/semcore/base-trigger/src/style/button-trigger.shadow.css
@@ -1,8 +1,11 @@
 SButtonAddon {
-  width: 12px;
-  height: 12px;
+  width: var(--intergalactic-spacing-3x, 12px);
+  height: var(--intergalactic-spacing-3x, 12px);
+  color: var(--intergalactic-icon-non-interactive, oklch(0.094 0.024 153.9 / 0.503));
+  position: relative;
+  left: var(--intergalactic-spacing-05x, 2px);
 }
 
 SButtonTriggerSpin {
-  fill: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526));
+  fill: var(--intergalactic-icon-non-interactive, oklch(0.094 0.024 153.9 / 0.503));
 }

From ea878097a68f8c1dae8872b7b28fa7609e05334f Mon Sep 17 00:00:00 2001
From: Sheila Sheikh <166654065+sheila-semrush@users.noreply.github.com>
Date: Thu, 23 Jul 2026 13:30:51 +0200
Subject: [PATCH 2/5] [dropdown-menu, select] update menu styles

---
 .../src/style/dropdown-menu.shadow.css        | 12 +++-
 semcore/dropdown/src/StatusItem.tsx           |  3 +-
 .../dropdown/src/style/dropdown.shadow.css    | 47 ++++++++------
 .../select/src/style/input-search.shadow.css  |  8 ++-
 semcore/select/src/style/select.shadow.css    | 40 ++++++------
 .../docs/examples/dropdown-menu.tsx           |  9 ++-
 .../docs/examples/item_actions.tsx            |  4 +-
 .../dropdown-menu/docs/examples/nested.tsx    | 21 ++++---
 .../docs/examples/nested_with_focusable.tsx   |  4 +-
 .../examples/dropdownmenu_customization.tsx   | 17 ++---
 .../docs/examples/options_filtering.tsx       |  2 +-
 .../examples/trigger_customization_deep.tsx   |  8 ++-
 .../select/tests/Select.stories.tsx           |  8 +++
 .../basic_props_and_trigger_addons.tsx        | 16 ++++-
 .../style/design-tokens/design-tokens.json    | 62 +++++++++++++------
 15 files changed, 165 insertions(+), 96 deletions(-)

diff --git a/semcore/dropdown-menu/src/style/dropdown-menu.shadow.css b/semcore/dropdown-menu/src/style/dropdown-menu.shadow.css
index 6f3453c496..1b13ef106e 100644
--- a/semcore/dropdown-menu/src/style/dropdown-menu.shadow.css
+++ b/semcore/dropdown-menu/src/style/dropdown-menu.shadow.css
@@ -1,5 +1,5 @@
 SDropdownMenuList {
-  max-height: 240px;
+  max-height: 246px;
   padding: var(--intergalactic-spacing-1x, 4px) 0;
   position: relative;
   min-height: 26px;
@@ -29,6 +29,10 @@ SDropdownMenuList {
   }
 }
 
+SDropdownMenuList[size='l'] {
+  max-height: 306px;
+}
+
 SDropdownMenuItemContainer {
   SItemContent:focus-visible {
     outline: none;
@@ -42,11 +46,13 @@ SDropdownMenuItemContainer[nesting-trigger] {
 SDropdownMenuItemAddon,
 SItemContentText {
   display: inline-flex; /* todo: Brauer Ilia - why? should be changed to inline/inline-block for SItemContentText */
-  margin-left: var(--intergalactic-spacing-1x, 4px);
-  margin-right: var(--intergalactic-spacing-1x, 4px);
+
+  margin-left: var(--intergalactic-spacing-content-gap-small, 4px);
+  margin-right: var(--intergalactic-spacing-content-gap-small, 4px);
 
   &:first-child {
     margin-left: 0;
+    margin-right: var(--intergalactic-spacing-content-gap-medium, 6px);
   }
 
   &:last-child {
diff --git a/semcore/dropdown/src/StatusItem.tsx b/semcore/dropdown/src/StatusItem.tsx
index e207d31def..6836081fa4 100644
--- a/semcore/dropdown/src/StatusItem.tsx
+++ b/semcore/dropdown/src/StatusItem.tsx
@@ -38,7 +38,8 @@ class StatusItemRoot extends Component<
           render={Text}
           tag='div'
           key='StatusItem'
-          p={size === 'l' ? 3 : 2}
+          px={3}
+          py={size === 'l' ? 3 : 2}
           use:size={size === 'l' ? 300 : 200}
           use='secondary'
         >
diff --git a/semcore/dropdown/src/style/dropdown.shadow.css b/semcore/dropdown/src/style/dropdown.shadow.css
index eef34c1d96..8bfb226148 100644
--- a/semcore/dropdown/src/style/dropdown.shadow.css
+++ b/semcore/dropdown/src/style/dropdown.shadow.css
@@ -14,13 +14,13 @@ SDropdownPopper {
     text-decoration: none;
     box-sizing: border-box;
     cursor: pointer;
-    width: 100%;
     text-align: left;
     line-height: normal;
     outline: none;
   }
-
+  
   SDropdownItem:not(button) {
+    width: 100%;
     color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
 
     &:hover {
@@ -36,7 +36,7 @@ SDropdownPopper {
       position: absolute;
       border: 1px solid;
       border-radius: var(--intergalactic-addon-rounded, 4px);
-      box-sizing: content-box;
+      box-sizing: border-box;
     }
 
     &::before {
@@ -51,13 +51,20 @@ SDropdownPopper {
       background-position: center center;
       background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
       border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
-      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==');
+    }
+    
+    &[selected][size='m']::after {
+      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMiAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuMzEwNyAyLjE2NzkxTDQuNjQ2NDUgNy44MzIxMkwxLjY4OTM0IDQuODc1MDEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZT0id2hpdGUiLz48L3N2Zz4=');
+    }
+
+    &[selected][size='l']::after {
+      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIuNCAyLjQ1MjIxTDUuMzA0NCA5LjU0NzgyTDEuNjAwMDEgNS44NDM0MyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==');
     }
   }
 
   SDropdownItem[selected]:not(SDropdownItem[isMenuItemCheckbox]) {
     background-color: var(--intergalactic-dropdown-menu-item-selected, oklch(0.525 0.265 263 / 0.077));
-    box-shadow: 2px 0px 0px 0px var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)) inset; /* TODO: --intergalactic-dropdown-menu-item-selected-border */
+    box-shadow: 2px 0px 0px 0px var(--intergalactic-dropdown-menu-item-selected-box-shadow, oklch(0.23 0.01 140)) inset;
 
     &:hover {
       background-color: var(--intergalactic-dropdown-menu-item-selected-hover, oklch(0.52 0.268 263.2 / 0.191));
@@ -87,18 +94,19 @@ SDropdownPopper {
   SDropdownItem[size='l'] {
     font-size: var(--intergalactic-fs-300, 16px);
     line-height: var(--intergalactic-lh-300, 150%);
-    padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px);
-    min-height: 40px;
+    padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-content-inset-inline, 12px);
+    min-height: var(--intergalactic-spacing-10x, 40px);
 
     &[isMenuItemCheckbox] {
-      padding-left: calc(var(--intergalactic-spacing-3x, 12px) * 2 + 16px + 2px); /* padding*2 (parent item and from checkbox to content) + checkboxWidth + border*2 */
+      padding-left: calc(var(--intergalactic-spacing-content-inset-inline, 12px) + var(--intergalactic-spacing-5x, 20px) + var(--intergalactic-spacing-content-gap-large, 8px));
+      /* padding before + checkbox + padding after */
 
       &::before,
       &::after {
-        width: 20px;
-        height: 20px;
-        top: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
-        left: var(--intergalactic-spacing-3x, 12px);
+        width: var(--intergalactic-spacing-5x, 20px);
+        height: var(--intergalactic-spacing-5x, 20px);
+        top: calc(var(--intergalactic-spacing-2x, 8px) + var(--intergalactic-spacing-05x, 2px));
+        left: var(--intergalactic-spacing-content-inset-inline, 12px);
       }
     }
   }
@@ -106,18 +114,19 @@ SDropdownPopper {
   SDropdownItem[size='m'] {
     font-size: var(--intergalactic-fs-200, 14px);
     line-height: var(--intergalactic-lh-200, 142%);
-    padding: calc(var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) var(--intergalactic-spacing-2x, 8px);
-    min-height: 32px;
+    padding: calc(var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) var(--intergalactic-spacing-content-inset-inline, 12px);
+    min-height: var(--intergalactic-form-control-m, 32px);
 
     &[isMenuItemCheckbox] {
-      padding-left: calc(var(--intergalactic-spacing-2x, 8px) * 2 + 16px + 2px); /* padding*2 (parent item and from checkbox to content) + checkboxWidth + border*2 */
+      padding-left: calc(var(--intergalactic-spacing-content-inset-inline, 12px) + var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-content-gap-medium, 6px));
+      /* padding before + checkbox + padding after */
 
       &::before,
       &::after {
-        width: 16px;
-        height: 16px;
-        top: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
-        left: var(--intergalactic-spacing-2x, 8px);
+        width: var(--intergalactic-spacing-4x, 16px);
+        height: var(--intergalactic-spacing-4x, 16px);
+        top: var(--intergalactic-spacing-2x, 8px);
+        left: var(--intergalactic-spacing-content-inset-inline, 12px);
       }
     }
   }
diff --git a/semcore/select/src/style/input-search.shadow.css b/semcore/select/src/style/input-search.shadow.css
index 14db18dac4..92de2e78aa 100644
--- a/semcore/select/src/style/input-search.shadow.css
+++ b/semcore/select/src/style/input-search.shadow.css
@@ -1,9 +1,11 @@
-SInputSearch[size='m'] {
-  height: 32px;
+SInputSearch[size='l'] {
+  height: var(--intergalactic-form-control-l, 44px);
 }
 
 SSearchClear {
-  padding: 0 var(--intergalactic-spacing-2x, 8px);
+  padding: 0 var(--intergalactic-spacing-05x, 2px);
+  margin-left: var(--intergalactic-spacing-05x, 2px);
+  margin-right: var(--intergalactic-spacing-content-gap-medium, 6px);
 }
 
 SSearchClear[hide] {
diff --git a/semcore/select/src/style/select.shadow.css b/semcore/select/src/style/select.shadow.css
index 04cae287a4..1cc6a3f102 100644
--- a/semcore/select/src/style/select.shadow.css
+++ b/semcore/select/src/style/select.shadow.css
@@ -1,6 +1,6 @@
 SOptionCheckbox {
   margin-top: var(--intergalactic-spacing-05x, 2px);
-  margin-right: var(--intergalactic-spacing-2x, 8px);
+  margin-right: var(--intergalactic-spacing-content-gap-medium, 6px);
   margin-bottom: auto;
   position: relative;
   flex-shrink: 0;
@@ -12,14 +12,13 @@ SOptionCheckbox {
     left: 0;
     right: 0;
     bottom: 0;
-    background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
-    border: 1px solid;
+    background: var(--intergalactic-control-checkbox-bg-normal, oklch(1 0 0));
+    border: 1px solid var(--intergalactic-control-checkbox-border, oklch(0.137 0.026 175.7 / 0.161));
     border-radius: var(--intergalactic-addon-rounded, 4px);
-    border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   }
 
-  width: 16px;
-  height: 16px;
+  width: var(--intergalactic-spacing-4x, 16px);
+  height: var(--intergalactic-spacing-4x, 16px);
 }
 
 SOptionCheckbox::after {
@@ -35,26 +34,27 @@ SOptionCheckbox::after {
 }
 
 SOptionCheckbox[selected]::after {
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==');
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMiAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuMzEwNyAyLjE2NzkxTDQuNjQ2NDUgNy44MzIxMkwxLjY4OTM0IDQuODc1MDEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZT0id2hpdGUiLz48L3N2Zz4=');
 }
 
 SOptionCheckbox[size='l'] {
-  width: 20px;
-  height: 20px;
+  width: var(--intergalactic-spacing-5x, 20px);
+  height: var(--intergalactic-spacing-5x, 20px);
+  margin-right: var(--intergalactic-spacing-content-gap-large, 8px);
 }
 
 SOptionCheckbox[size='l'][selected]::after {
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==');
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIuNCAyLjQ1MjIxTDUuMzA0NCA5LjU0NzgyTDEuNjAwMDEgNS44NDM0MyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==');
 }
 
 SOptionCheckbox[selected]:before {
-  background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */
-  border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */
+  background-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 140));
+  border-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 140));
 }
 
 SOptionCheckbox[indeterminate]:before {
-  background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */
-  border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */
+  background-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 140));
+  border-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 140));
 }
 
 SOptionCheckbox[theme]:before {
@@ -76,7 +76,7 @@ SOptionCheckbox[selected] {
 }
 
 SOptionCheckbox[indeterminate]:after {
-  background-color: #ffffff; /* TODO: --gray-white */
+  background-color: var(--intergalactic-control-checkbox-checkmark, oklch(1 0 0));
   background-image: none;
   margin: auto;
   /* disable-tokens-validator */
@@ -84,11 +84,13 @@ SOptionCheckbox[indeterminate]:after {
 }
 
 SOptionCheckbox[indeterminate][size='l']:after {
-  width: 12px;
-  height: 2px;
+  width: var(--intergalactic-spacing-3x, 12px);
+  /* disable-tokens-validator */
+  height: 1.5px; /* TODO: --intergalactic-icon-stroke-width (?) */
 }
 
 SOptionCheckbox[indeterminate][size='m']:after {
-  width: 8px;
-  height: 2px;
+  width: var(--intergalactic-spacing-2x, 8px);
+  /* disable-tokens-validator */
+  height: 1.5px; /* TODO: --intergalactic-icon-stroke-width (?) */
 }
diff --git a/stories/components/dropdown-menu/docs/examples/dropdown-menu.tsx b/stories/components/dropdown-menu/docs/examples/dropdown-menu.tsx
index 4fb272c579..1752688801 100644
--- a/stories/components/dropdown-menu/docs/examples/dropdown-menu.tsx
+++ b/stories/components/dropdown-menu/docs/examples/dropdown-menu.tsx
@@ -40,12 +40,11 @@ const Demo = () => {
           <Notice
             aria-labelledby='export-notice-title'
             theme='warning'
+            p={3}
+            // TODO: remove styles and replace with new dropdown notice
+            borderRadius='0 0 var(--intergalactic-rounded-medium, 6px) var(--intergalactic-rounded-medium, 6px)'
             style={{
-              padding: 'var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)',
-              borderWidth: 0,
-              borderTopWidth: '1px',
-              borderRadius:
-                '0 0 var(--intergalactic-rounded-medium, 6px) var(--intergalactic-rounded-medium, 6px)',
+              borderWidth: '1px 0 0 0',
             }}
           >
             <Notice.Content>
diff --git a/stories/components/dropdown-menu/docs/examples/item_actions.tsx b/stories/components/dropdown-menu/docs/examples/item_actions.tsx
index 100ae946be..0e741c018a 100644
--- a/stories/components/dropdown-menu/docs/examples/item_actions.tsx
+++ b/stories/components/dropdown-menu/docs/examples/item_actions.tsx
@@ -20,7 +20,7 @@ const Demo = () => {
               <DropdownMenu.Item.Content tag={DropdownMenu.Trigger}>
                 Menu item 3
               </DropdownMenu.Item.Content>
-              <DropdownMenu.Actions gap={1}>
+              <DropdownMenu.Actions gap='var(--intergalactic-spacing-content-gap-medium)'>
                 <DropdownMenu.Item tag={Button} addonLeft={PlusM} title='Add new' />
                 <DropdownMenu.Item tag={Button} addonLeft={TrashM} title='Delete' />
               </DropdownMenu.Actions>
@@ -32,7 +32,7 @@ const Demo = () => {
             placement='right-start'
             interaction={DropdownMenu.nestedMenuInteraction}
             timeout={[0, 300]}
-            offset={[-11, 12]}
+            offset={[-11, 17]}
           >
             <DropdownMenu.Item.Content tag={DropdownMenu.Trigger}>
               Menu item 4
diff --git a/stories/components/dropdown-menu/docs/examples/nested.tsx b/stories/components/dropdown-menu/docs/examples/nested.tsx
index ee2aad100d..fd4fd34f32 100644
--- a/stories/components/dropdown-menu/docs/examples/nested.tsx
+++ b/stories/components/dropdown-menu/docs/examples/nested.tsx
@@ -1,9 +1,12 @@
 import ChevronRightIcon from '@semcore/icon/ChevronRight/m';
 import Button from '@semcore/ui/button';
-import DropdownMenu from '@semcore/ui/dropdown-menu';
+import DropdownMenu, { type DropdownMenuProps } from '@semcore/ui/dropdown-menu';
 import React from 'react';
 
 const Demo = () => {
+  const nestedOffset: DropdownMenuProps['offset'] = [-11, 17];
+  const nestedTimeout: DropdownMenuProps['timeout'] = [0, 300];
+
   return (
     <DropdownMenu>
       <DropdownMenu.Trigger tag={Button}>Explore nested menus</DropdownMenu.Trigger>
@@ -15,8 +18,8 @@ const Demo = () => {
           <DropdownMenu
             placement='right-start'
             interaction={DropdownMenu.nestedMenuInteraction}
-            timeout={[0, 300]}
-            offset={[-11, 12]}
+            timeout={nestedTimeout}
+            offset={nestedOffset}
           >
             <DropdownMenu.Item.Content tag={DropdownMenu.Trigger}>
               Item 4
@@ -27,8 +30,8 @@ const Demo = () => {
                 <DropdownMenu
                   placement='right-start'
                   interaction={DropdownMenu.nestedMenuInteraction}
-                  timeout={[0, 300]}
-                  offset={[-11, 12]}
+                  timeout={nestedTimeout}
+                  offset={nestedOffset}
                 >
                   <DropdownMenu.Item.Content tag={DropdownMenu.Trigger}>
                     Item 4.1
@@ -48,8 +51,8 @@ const Demo = () => {
                 <DropdownMenu
                   placement='right-start'
                   interaction={DropdownMenu.nestedMenuInteraction}
-                  timeout={[0, 300]}
-                  offset={[-11, 12]}
+                  timeout={nestedTimeout}
+                  offset={nestedOffset}
                 >
                   <DropdownMenu.Item.Content tag={DropdownMenu.Trigger}>
                     Item 4.2
@@ -63,8 +66,8 @@ const Demo = () => {
                       <DropdownMenu
                         placement='right-start'
                         interaction={DropdownMenu.nestedMenuInteraction}
-                        timeout={[0, 300]}
-                        offset={[-11, 12]}
+                        timeout={nestedTimeout}
+                        offset={nestedOffset}
                       >
                         <DropdownMenu.Item.Content tag={DropdownMenu.Trigger}>
                           Item 4.2.1
diff --git a/stories/components/dropdown-menu/docs/examples/nested_with_focusable.tsx b/stories/components/dropdown-menu/docs/examples/nested_with_focusable.tsx
index e7e9399eba..99304aa703 100644
--- a/stories/components/dropdown-menu/docs/examples/nested_with_focusable.tsx
+++ b/stories/components/dropdown-menu/docs/examples/nested_with_focusable.tsx
@@ -22,7 +22,7 @@ const Demo = () => {
                 placement='right-start'
                 interaction={DropdownMenu.nestedMenuInteraction}
                 timeout={[0, 300]}
-                offset={[-11, 12]}
+                offset={[-11, 17]}
               >
                 <DropdownMenu.Item.Content tag={DropdownMenu.Trigger}>
                   {item}
@@ -35,7 +35,7 @@ const Demo = () => {
                     <DropdownMenu.Item>Item 4.1.3</DropdownMenu.Item>
                   </DropdownMenu.List>
                   <Divider my={1} />
-                  <Box p={2}>
+                  <Box px={3} py={2}>
                     <InputNumber w='50%' neighborLocation='right'>
                       <InputNumber.Value min={min} max={max} placeholder={min.toString()} />
                       <InputNumber.Controls />
diff --git a/stories/components/select/docs/examples/dropdownmenu_customization.tsx b/stories/components/select/docs/examples/dropdownmenu_customization.tsx
index 46780811bf..a7a83d2dd6 100644
--- a/stories/components/select/docs/examples/dropdownmenu_customization.tsx
+++ b/stories/components/select/docs/examples/dropdownmenu_customization.tsx
@@ -8,12 +8,6 @@ const options = Array(12)
   .fill('')
   .map((_, index) => `Option ${index}`);
 
-const noticeStyle = {
-  border: 'none',
-  borderRadius: `0 0 var(--intergalactic-rounded-medium, 6px) var(--intergalactic-rounded-medium, 6px)`,
-  padding: 'var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)',
-};
-
 const Demo = () => (
   <Flex direction='column'>
     <Text tag='label' size={200} htmlFor='customized-dropdown-select'>
@@ -22,14 +16,21 @@ const Demo = () => (
     <Select>
       <Select.Trigger mt={2} mr='auto' id='customized-dropdown-select' />
       <Select.Popper aria-label='Select with notice'>
-        <Select.List hMax='240px'>
+        <Select.List>
           {options.map((option, index) => (
             <Select.Option value={option} key={index}>
               {option}
             </Select.Option>
           ))}
         </Select.List>
-        <Notice style={noticeStyle}>
+        {/* TODO: remove styles and replace with new dropdown notice */}
+        <Notice
+          p='var(--intergalactic-spacing-content-inset-inline)'
+          borderRadius='0 0 var(--intergalactic-rounded-medium, 6px) var(--intergalactic-rounded-medium, 6px)'
+          style={{
+            borderWidth: '1px 0 0 0',
+          }}
+        >
           <Notice.Content aria-live='polite'>Woooop, it's simple magic!</Notice.Content>
         </Notice>
       </Select.Popper>
diff --git a/stories/components/select/docs/examples/options_filtering.tsx b/stories/components/select/docs/examples/options_filtering.tsx
index 8535d4f571..80992b3229 100644
--- a/stories/components/select/docs/examples/options_filtering.tsx
+++ b/stories/components/select/docs/examples/options_filtering.tsx
@@ -26,7 +26,7 @@ const Demo = () => {
             onChange={setFilter}
           />
           {options.length > 0 && (
-            <Select.List hMax='224px'>
+            <Select.List>
               {options.map(({ value, label }) => (
                 <Select.Option value={value} key={value}>
                   {label}
diff --git a/stories/components/select/docs/examples/trigger_customization_deep.tsx b/stories/components/select/docs/examples/trigger_customization_deep.tsx
index e818922a92..90ab78a9db 100644
--- a/stories/components/select/docs/examples/trigger_customization_deep.tsx
+++ b/stories/components/select/docs/examples/trigger_customization_deep.tsx
@@ -26,8 +26,12 @@ const Demo = () => {
         <Select.Menu hMax={180}>
           {flags.map((value) => (
             <Select.Option key={value} value={value}>
-              <Flags iso2={value as keyof typeof iso2Name} mr={2} />
-              {formatName(iso2Name[value])}
+              <Select.Option.Addon>
+                <Flags iso2={value as keyof typeof iso2Name} />
+              </Select.Option.Addon>
+              <Select.Option.Text>
+                {formatName(iso2Name[value])}
+              </Select.Option.Text>
             </Select.Option>
           ))}
         </Select.Menu>
diff --git a/stories/components/select/tests/Select.stories.tsx b/stories/components/select/tests/Select.stories.tsx
index 167ea265fe..5c632710ed 100644
--- a/stories/components/select/tests/Select.stories.tsx
+++ b/stories/components/select/tests/Select.stories.tsx
@@ -101,6 +101,14 @@ export const BasicPropsAndTriggerAddons: StoryObj<typeof BasicProps> = {
     showTriggerText: {
       control: { type: 'boolean' },
     },
+
+    // option addon props
+    showOptionLeftAddon: {
+      control: { type: 'boolean' },
+    },
+    showOptionRightAddon: {
+      control: { type: 'boolean' },
+    },
   },
   args: BasicProps,
 };
diff --git a/stories/components/select/tests/examples/basic_props_and_trigger_addons.tsx b/stories/components/select/tests/examples/basic_props_and_trigger_addons.tsx
index 37fed7c4c5..360cf0956d 100644
--- a/stories/components/select/tests/examples/basic_props_and_trigger_addons.tsx
+++ b/stories/components/select/tests/examples/basic_props_and_trigger_addons.tsx
@@ -32,6 +32,10 @@ export type SelectBasicProps = Omit<
   showTriggerText?: boolean;
   triggerText?: string;
   size?: 'm' | 'l';
+
+  // option addon props
+  showOptionLeftAddon?: boolean;
+  showOptionRightAddon?: boolean;
 };
 
 const Demo = (props: SelectBasicProps) => {
@@ -63,6 +67,10 @@ const Demo = (props: SelectBasicProps) => {
     triggerText = 'Trigger',
     showTriggerText = false,
 
+    // option addon
+    showOptionLeftAddon = false,
+    showOptionRightAddon = false,
+
     ...restProps
   } = props;
 
@@ -74,7 +82,7 @@ const Demo = (props: SelectBasicProps) => {
       children: `Option ${index}`,
     }));
 
-  const hasCustomTrigger = showLeftAddon || showRightAddon || showTriggerText;
+  const hasCustomTriggerOrOption = showLeftAddon || showRightAddon || showTriggerText || showOptionLeftAddon || showOptionRightAddon;
   const [value, setValue] = React.useState<SelectBasicValue>(multiselect ? [] : null);
 
   React.useEffect(() => {
@@ -93,7 +101,7 @@ const Demo = (props: SelectBasicProps) => {
           {labelText}
         </Text>
       )}
-      {hasCustomTrigger
+      {hasCustomTriggerOrOption
         ? (
             <Select
               value={value}
@@ -138,7 +146,9 @@ const Demo = (props: SelectBasicProps) => {
               <Select.Menu>
                 {options.map((option) => (
                   <Select.Option key={option.value} value={option.value}>
-                    {option.children}
+                    {showOptionLeftAddon && <Select.Option.Addon><LinkExternalM /></Select.Option.Addon>}
+                    <Select.Option.Text>{option.children}</Select.Option.Text>
+                    {showOptionRightAddon && <Select.Option.Addon><LinkExternalM /></Select.Option.Addon>}
                   </Select.Option>
                 ))}
               </Select.Menu>
diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json
index 2f33224f83..015c8cf672 100644
--- a/website/docs/style/design-tokens/design-tokens.json
+++ b/website/docs/style/design-tokens/design-tokens.json
@@ -137,7 +137,6 @@
     "description": "Primary background of the interface which contains the main data and information.",
     "components": [
       "base-components",
-      "base-trigger",
       "bulk-textarea",
       "card",
       "checkbox",
@@ -154,7 +153,6 @@
       "modal",
       "pills",
       "radio",
-      "select",
       "side-panel",
       "slider",
       "switch",
@@ -176,7 +174,6 @@
     "value": "oklch(0.98 0.001 180)",
     "description": "Hover state of the primary background of the interface which contains the main data and information.",
     "components": [
-      "base-trigger",
       "pills"
     ]
   },
@@ -425,7 +422,6 @@
       "input",
       "pills",
       "radio",
-      "select",
       "side-panel",
       "slider",
       "spin",
@@ -852,25 +848,33 @@
     "name": "--intergalactic-control-checkbox-bg-normal",
     "value": "oklch(1 0 0)",
     "description": "Background color of the Checkbox.",
-    "components": []
+    "components": [
+      "select"
+    ]
   },
   {
     "name": "--intergalactic-control-checkbox-bg-selected",
     "value": "oklch(0.23 0.01 140)",
     "description": "Background color of the checked Checkbox.",
-    "components": []
+    "components": [
+      "select"
+    ]
   },
   {
     "name": "--intergalactic-control-checkbox-border",
     "value": "oklch(0.137 0.026 175.7 / 0.161)",
     "description": "Border color of the Checkbox.",
-    "components": []
+    "components": [
+      "select"
+    ]
   },
   {
     "name": "--intergalactic-control-checkbox-checkmark",
     "value": "oklch(1 0 0)",
     "description": "Color of the checkmark.",
-    "components": []
+    "components": [
+      "select"
+    ]
   },
   {
     "name": "--intergalactic-control-checkbox-button-bg-hover",
@@ -1009,7 +1013,6 @@
       "dropdown",
       "feature-highlight",
       "radio",
-      "select",
       "slider",
       "switch"
     ]
@@ -1157,19 +1160,25 @@
     "name": "--intergalactic-control-select-trigger-active",
     "value": "oklch(1 0 0)",
     "description": "Background of the Select trigger in its active state.",
-    "components": []
+    "components": [
+      "base-trigger"
+    ]
   },
   {
     "name": "--intergalactic-control-select-trigger-hover",
     "value": "oklch(0.98 0.001 180)",
     "description": "Background of the Select trigger in its hover state.",
-    "components": []
+    "components": [
+      "base-trigger"
+    ]
   },
   {
     "name": "--intergalactic-control-select-trigger-normal",
     "value": "oklch(1 0 0)",
     "description": "Background of the Select trigger in its normal state.",
-    "components": []
+    "components": [
+      "base-trigger"
+    ]
   },
   {
     "name": "--intergalactic-control-slider-bar-bg",
@@ -1480,7 +1489,9 @@
     "name": "--intergalactic-dropdown-menu-item-selected-box-shadow",
     "value": "oklch(0.23 0.01 140)",
     "description": "Border color of the selected item in the DropdownMenu.",
-    "components": []
+    "components": [
+      "dropdown"
+    ]
   },
   {
     "name": "--intergalactic-dropdown-menu-item-selected-hover",
@@ -1568,7 +1579,9 @@
     "name": "--intergalactic-icon-non-interactive",
     "value": "oklch(0.094 0.024 153.9 / 0.503)",
     "description": "Color for the default non-interactive icon.",
-    "components": []
+    "components": [
+      "base-trigger"
+    ]
   },
   {
     "name": "--intergalactic-icon-primary-critical",
@@ -1618,7 +1631,6 @@
     "description": "Default icon weight on normal backgrounds—stronger emphasis than secondary icons.",
     "components": [
       "accordion",
-      "base-trigger",
       "carousel",
       "drag-and-drop",
       "feature-highlight",
@@ -3047,6 +3059,7 @@
       "base-trigger",
       "button",
       "color-picker",
+      "dropdown",
       "input",
       "input-tags",
       "notice",
@@ -3065,6 +3078,7 @@
       "input",
       "input-tags",
       "pills",
+      "select",
       "tab-line",
       "time-picker"
     ]
@@ -3074,21 +3088,29 @@
     "value": "12px",
     "description": "Horizontal inset for content inside controls and surfaces.",
     "components": [
-      "button"
+      "base-trigger",
+      "button",
+      "dropdown"
     ]
   },
   {
     "name": "--intergalactic-spacing-content-gap-small",
     "value": "4px",
     "description": "Small gap between content elements inside controls.",
-    "components": []
+    "components": [
+      "dropdown-menu"
+    ]
   },
   {
     "name": "--intergalactic-spacing-content-gap-medium",
     "value": "6px",
     "description": "Medium gap between content elements inside controls.",
     "components": [
-      "button"
+      "base-trigger",
+      "button",
+      "dropdown",
+      "dropdown-menu",
+      "select"
     ]
   },
   {
@@ -3096,7 +3118,9 @@
     "value": "8px",
     "description": "Large gap between content elements inside controls.",
     "components": [
-      "button"
+      "button",
+      "dropdown",
+      "select"
     ]
   },
   {

From 8c04079c77d61144ed62c01e6e21319cb2c51b56 Mon Sep 17 00:00:00 2001
From: Sheila Sheikh <166654065+sheila-semrush@users.noreply.github.com>
Date: Thu, 23 Jul 2026 14:00:08 +0200
Subject: [PATCH 3/5] [dropdown-menu] increase size for actions in size L

---
 semcore/dropdown/src/style/dropdown.shadow.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/semcore/dropdown/src/style/dropdown.shadow.css b/semcore/dropdown/src/style/dropdown.shadow.css
index 8bfb226148..05bc6eeaf8 100644
--- a/semcore/dropdown/src/style/dropdown.shadow.css
+++ b/semcore/dropdown/src/style/dropdown.shadow.css
@@ -28,6 +28,11 @@ SDropdownPopper {
     }
   }
 
+  SDropdownItem[size='l'] SDropdownItem:is(button) {
+    width: var(--intergalactic-spacing-6x, 24px);
+    height: var(--intergalactic-spacing-6x, 24px);
+  }
+
   SDropdownItem[isMenuItemCheckbox] {
 
     &::before,

From 2e4dde09093fe46e70f9b1502bf9da283dd9c5df Mon Sep 17 00:00:00 2001
From: "ilia.brauer" <ilia.brauer@semrush.com>
Date: Thu, 23 Jul 2026 15:34:37 +0200
Subject: [PATCH 4/5] [dropdown, dropdown-menu, select] added Notice for
 poppers

---
 pnpm-lock.yaml                                |  5 +++-
 semcore/dropdown-menu/src/DropdownMenu.jsx    |  1 +
 semcore/dropdown-menu/src/index.d.ts          |  2 +-
 semcore/dropdown/package.json                 |  3 ++-
 semcore/dropdown/src/Dropdown.jsx             |  2 ++
 semcore/dropdown/src/Notice.tsx               | 25 +++++++++++++++++++
 semcore/dropdown/src/index.d.ts               |  6 +++++
 .../src/style/dropdownNotice.shadow.css       |  9 +++++++
 semcore/select/src/Select.jsx                 |  1 +
 semcore/select/src/index.d.ts                 |  3 ++-
 .../advanced/examples/modal-in-dd-notice.tsx  |  9 +++----
 .../docs/examples/dropdown-menu.tsx           | 14 +++--------
 .../examples/dropdownmenu_customization.tsx   | 13 +++-------
 13 files changed, 64 insertions(+), 29 deletions(-)
 create mode 100644 semcore/dropdown/src/Notice.tsx
 create mode 100644 semcore/dropdown/src/style/dropdownNotice.shadow.css

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fdda9ec380..eb3fce91ba 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -914,6 +914,9 @@ importers:
 
   semcore/dropdown:
     dependencies:
+      '@semcore/notice':
+        specifier: ^17.2.2
+        version: link:../notice
       '@semcore/typography':
         specifier: ^17.2.1
         version: link:../typography
@@ -19556,7 +19559,7 @@ snapshots:
       sirv: 3.0.2
       tinyglobby: 0.2.17
       tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/debug@4.1.13)(@types/node@25.5.2)(@vitest/browser@3.2.4)(@vitest/ui@3.2.4)(happy-dom@9.20.3)(jsdom@22.1.0)(lightningcss@1.31.1)(sass@1.100.0)(sugarss@5.0.1(postcss@8.5.15))(terser@5.48.0)(yaml@2.8.3)
+      vitest: 3.2.4(@types/debug@4.1.13)(@types/node@25.5.2)(@vitest/browser@3.2.4)(@vitest/ui@3.2.4)(happy-dom@9.20.3)(jsdom@22.1.0)(lightningcss@1.31.1)(sass@1.100.0)(sugarss@5.0.1(postcss@8.5.14))(terser@5.48.0)(yaml@2.8.3)
 
   '@vitest/utils@3.2.4':
     dependencies:
diff --git a/semcore/dropdown-menu/src/DropdownMenu.jsx b/semcore/dropdown-menu/src/DropdownMenu.jsx
index 8c3b7498fe..7ea55290a5 100644
--- a/semcore/dropdown-menu/src/DropdownMenu.jsx
+++ b/semcore/dropdown-menu/src/DropdownMenu.jsx
@@ -570,6 +570,7 @@ const DropdownMenu = createComponent(
     Item: [Item, { Addon, Content: ItemContent, Text: ItemContentText, Hint: ItemHint }],
     Group: Dropdown.Group,
     StatusItem: Dropdown.StatusItem,
+    Notice: Dropdown.Notice,
   },
   {
     parent: [Dropdown],
diff --git a/semcore/dropdown-menu/src/index.d.ts b/semcore/dropdown-menu/src/index.d.ts
index 85260d57c9..49d2d68739 100644
--- a/semcore/dropdown-menu/src/index.d.ts
+++ b/semcore/dropdown-menu/src/index.d.ts
@@ -154,8 +154,8 @@ declare const DropdownMenu: Intergalactic.Component<
   };
 
   Group: typeof Dropdown.Group;
-
   StatusItem: StatusItemComponent;
+  Notice: DropdownNoticeComponent;
 
   VirtualList: typeof VirtualList;
 
diff --git a/semcore/dropdown/package.json b/semcore/dropdown/package.json
index 25446d3b97..6d1302a961 100644
--- a/semcore/dropdown/package.json
+++ b/semcore/dropdown/package.json
@@ -17,7 +17,8 @@
     "require": "./lib/cjs/index.js"
   },
   "dependencies": {
-    "@semcore/typography": "^17.2.1"
+    "@semcore/typography": "^17.2.1",
+    "@semcore/notice": "^17.2.2"
   },
   "peerDependencies": {
     "@semcore/base-components": "^17.2.1"
diff --git a/semcore/dropdown/src/Dropdown.jsx b/semcore/dropdown/src/Dropdown.jsx
index 942cbe801c..5a5aed417b 100644
--- a/semcore/dropdown/src/Dropdown.jsx
+++ b/semcore/dropdown/src/Dropdown.jsx
@@ -7,6 +7,7 @@ import { hasFocusableIn } from '@semcore/core/lib/utils/use/useFocusLock';
 import React from 'react';
 
 import { DropdownItem } from './DropdownItem';
+import { DropdownNotice } from './Notice';
 import { StatusItem } from './StatusItem';
 import style from './style/dropdown.shadow.css';
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
@@ -212,6 +213,7 @@ const Dropdown = createComponent(
     Item: DropdownItem,
     Group: DropdownGroup,
     StatusItem,
+    Notice: DropdownNotice,
   },
   {
     parent: Popper,
diff --git a/semcore/dropdown/src/Notice.tsx b/semcore/dropdown/src/Notice.tsx
new file mode 100644
index 0000000000..b057cf9a5d
--- /dev/null
+++ b/semcore/dropdown/src/Notice.tsx
@@ -0,0 +1,25 @@
+import { Component, createComponent, Root, sstyled } from '@semcore/core';
+import Notice, { type NSNotice } from '@semcore/notice';
+import React from 'react';
+
+import style from './style/dropdownNotice.shadow.css';
+
+class DropdownNoticeRoot extends Component<NSNotice.Props> {
+  static displayName = 'Notice';
+  static style = style;
+
+  render() {
+    const { styles } = this.asProps;
+    const SDropdownNotice = Root;
+    return sstyled(styles)(<SDropdownNotice render={Notice} />);
+  }
+}
+
+export const DropdownNotice = createComponent<NSNotice.Component, typeof DropdownNoticeRoot>(DropdownNoticeRoot, {
+  Label: Notice.Label,
+  Title: Notice.Title,
+  Text: Notice.Text,
+  Actions: Notice.Actions,
+  Content: Notice.Content,
+  Close: Notice.Close,
+}, { parent: Notice });
diff --git a/semcore/dropdown/src/index.d.ts b/semcore/dropdown/src/index.d.ts
index 244a66abad..41115001fe 100644
--- a/semcore/dropdown/src/index.d.ts
+++ b/semcore/dropdown/src/index.d.ts
@@ -7,6 +7,8 @@ import type { Box, BoxProps,
   PopperPopperProps,
 } from '@semcore/base-components';
 import type { Intergalactic, PropGetterFn } from '@semcore/core';
+import type { NSNotice } from '@semcore/notice';
+import type Notice from '@semcore/notice';
 import type React from 'react';
 
 export type DropdownProps = PopperProps & {
@@ -71,6 +73,9 @@ export type DropdownStatusItemProps = {
 
 export type StatusItemComponent = Intergalactic.Component<'div', DropdownStatusItemProps>;
 
+export type DropdownNoticeProps = NSNotice.Props;
+export type DropdownNoticeComponent = Intergalactic.Component<typeof Notice, DropdownNoticeProps>;
+
 declare const Dropdown: Intergalactic.Component<
   'div',
   DropdownProps,
@@ -87,6 +92,7 @@ declare const Dropdown: Intergalactic.Component<
   Item: Intergalactic.Component<typeof Box>;
   Group: Intergalactic.Component<'div', DropdownGroupProps>;
   StatusItem: StatusItemComponent;
+  DropdownNotice: DropdownNoticeComponent;
 };
 
 export default Dropdown;
diff --git a/semcore/dropdown/src/style/dropdownNotice.shadow.css b/semcore/dropdown/src/style/dropdownNotice.shadow.css
new file mode 100644
index 0000000000..ee1173fdd7
--- /dev/null
+++ b/semcore/dropdown/src/style/dropdownNotice.shadow.css
@@ -0,0 +1,9 @@
+SDropdownNotice {
+  padding-top: var(--intergalactic-spacing-content-inset-inline, 12px);
+  padding-bottom: var(--intergalactic-spacing-content-inset-inline, 12px);
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
diff --git a/semcore/select/src/Select.jsx b/semcore/select/src/Select.jsx
index d48b1d4e7b..660b30f9c6 100644
--- a/semcore/select/src/Select.jsx
+++ b/semcore/select/src/Select.jsx
@@ -510,6 +510,7 @@ const Select = createComponent(
     Divider,
     InputSearch: [InputSearchWrapper, InputSearch._______childrenComponents],
     Input: [InputSearchWrapper, InputSearch._______childrenComponents],
+    Notice: Dropdown.Notice,
   },
   { parent: DropdownMenu, context: selectContext },
 );
diff --git a/semcore/select/src/index.d.ts b/semcore/select/src/index.d.ts
index 27e01b7ec6..da089a1152 100644
--- a/semcore/select/src/index.d.ts
+++ b/semcore/select/src/index.d.ts
@@ -3,7 +3,7 @@ import type { ButtonTrigger, BaseTriggerProps, ButtonTriggerProps, LinkTriggerPr
 import type { PropGetterFn, Intergalactic } from '@semcore/core';
 import type Divider from '@semcore/divider';
 import type Dropdown from '@semcore/dropdown';
-import type { StatusItemComponent } from '@semcore/dropdown';
+import type { StatusItemComponent, DropdownNoticeComponent } from '@semcore/dropdown';
 import type {
   DropdownMenuContext,
   DropdownMenuItemProps,
@@ -162,6 +162,7 @@ declare const Select: IntergalacticSelectComponent & {
   Divider: typeof Divider;
   InputSearch: typeof InputSearch;
   Input: typeof InputSearch;
+  Notice: DropdownNoticeComponent;
 };
 
 declare const wrapSelect: <PropsExtending extends {}>(
diff --git a/stories/components/dropdown-menu/advanced/examples/modal-in-dd-notice.tsx b/stories/components/dropdown-menu/advanced/examples/modal-in-dd-notice.tsx
index f7783bc87f..2294c8796f 100644
--- a/stories/components/dropdown-menu/advanced/examples/modal-in-dd-notice.tsx
+++ b/stories/components/dropdown-menu/advanced/examples/modal-in-dd-notice.tsx
@@ -2,7 +2,6 @@ import FileExportM from '@semcore/icon/FileExport/m';
 import Button from '@semcore/ui/button';
 import DropdownMenu from '@semcore/ui/dropdown-menu';
 import Modal from '@semcore/ui/modal';
-import Notice from '@semcore/ui/notice';
 import SpinContainer from '@semcore/ui/spin-container';
 import { Text } from '@semcore/ui/typography';
 import React from 'react';
@@ -41,13 +40,13 @@ const Demo = () => {
               <DropdownMenu.Item onClick={handleClick}>CSV</DropdownMenu.Item>
               <DropdownMenu.Item onClick={handleClick}>CSV Semicolon</DropdownMenu.Item>
             </DropdownMenu.List>
-            <Notice theme='warning'>
-              <Notice.Content>
+            <DropdownMenu.Notice theme='warning'>
+              <DropdownMenu.Notice.Content>
                 <Button onClick={handleOpen} use='primary'>
                   Open modal
                 </Button>
-              </Notice.Content>
-            </Notice>
+              </DropdownMenu.Notice.Content>
+            </DropdownMenu.Notice>
           </SpinContainer>
         </DropdownMenu.Popper>
       </DropdownMenu>
diff --git a/stories/components/dropdown-menu/docs/examples/dropdown-menu.tsx b/stories/components/dropdown-menu/docs/examples/dropdown-menu.tsx
index 1752688801..925d34ac6f 100644
--- a/stories/components/dropdown-menu/docs/examples/dropdown-menu.tsx
+++ b/stories/components/dropdown-menu/docs/examples/dropdown-menu.tsx
@@ -37,17 +37,11 @@ const Demo = () => {
             <DropdownMenu.Item onClick={handleClick}>CSV</DropdownMenu.Item>
             <DropdownMenu.Item onClick={handleClick}>CSV Semicolon</DropdownMenu.Item>
           </DropdownMenu.List>
-          <Notice
+          <DropdownMenu.Notice
             aria-labelledby='export-notice-title'
             theme='warning'
-            p={3}
-            // TODO: remove styles and replace with new dropdown notice
-            borderRadius='0 0 var(--intergalactic-rounded-medium, 6px) var(--intergalactic-rounded-medium, 6px)'
-            style={{
-              borderWidth: '1px 0 0 0',
-            }}
           >
-            <Notice.Content>
+            <DropdownMenu.Notice.Content>
               <Text tag='strong' mb={1} style={{ display: 'block' }} id='export-notice-title'>
                 Export failed
               </Text>
@@ -58,8 +52,8 @@ const Demo = () => {
                   feedback@semrush.com
                 </Link>
               </Text>
-            </Notice.Content>
-          </Notice>
+            </DropdownMenu.Notice.Content>
+          </DropdownMenu.Notice>
         </SpinContainer>
       </DropdownMenu.Popper>
     </DropdownMenu>
diff --git a/stories/components/select/docs/examples/dropdownmenu_customization.tsx b/stories/components/select/docs/examples/dropdownmenu_customization.tsx
index a7a83d2dd6..e3f968007e 100644
--- a/stories/components/select/docs/examples/dropdownmenu_customization.tsx
+++ b/stories/components/select/docs/examples/dropdownmenu_customization.tsx
@@ -23,16 +23,9 @@ const Demo = () => (
             </Select.Option>
           ))}
         </Select.List>
-        {/* TODO: remove styles and replace with new dropdown notice */}
-        <Notice
-          p='var(--intergalactic-spacing-content-inset-inline)'
-          borderRadius='0 0 var(--intergalactic-rounded-medium, 6px) var(--intergalactic-rounded-medium, 6px)'
-          style={{
-            borderWidth: '1px 0 0 0',
-          }}
-        >
-          <Notice.Content aria-live='polite'>Woooop, it's simple magic!</Notice.Content>
-        </Notice>
+        <Select.Notice>
+          <Select.Notice.Content aria-live='polite'>Woooop, it's simple magic!</Select.Notice.Content>
+        </Select.Notice>
       </Select.Popper>
     </Select>
   </Flex>

From 7a2f25b726e6576d9c8d0facc52bebd30b196ce0 Mon Sep 17 00:00:00 2001
From: "ilia.brauer" <ilia.brauer@semrush.com>
Date: Fri, 24 Jul 2026 18:07:01 +0200
Subject: [PATCH 5/5] [dropdown, dropdown-menu, select] added Notice for
 poppers

---
 semcore/dropdown-menu/src/index.d.ts | 1 +
 semcore/dropdown/src/index.d.ts      | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/semcore/dropdown-menu/src/index.d.ts b/semcore/dropdown-menu/src/index.d.ts
index 49d2d68739..4e489884f7 100644
--- a/semcore/dropdown-menu/src/index.d.ts
+++ b/semcore/dropdown-menu/src/index.d.ts
@@ -7,6 +7,7 @@ import type {
   DropdownTriggerProps,
   DropdownPopperAriaProps,
   StatusItemComponent,
+  DropdownNoticeComponent,
 } from '@semcore/dropdown';
 import type Dropdown from '@semcore/dropdown';
 import type { Text } from '@semcore/typography';
diff --git a/semcore/dropdown/src/index.d.ts b/semcore/dropdown/src/index.d.ts
index 41115001fe..35ceb02b60 100644
--- a/semcore/dropdown/src/index.d.ts
+++ b/semcore/dropdown/src/index.d.ts
@@ -92,7 +92,7 @@ declare const Dropdown: Intergalactic.Component<
   Item: Intergalactic.Component<typeof Box>;
   Group: Intergalactic.Component<'div', DropdownGroupProps>;
   StatusItem: StatusItemComponent;
-  DropdownNotice: DropdownNoticeComponent;
+  Notice: DropdownNoticeComponent;
 };
 
 export default Dropdown;