From 0b7ef82fec2099d164a5e33c745007c270e6ec6d Mon Sep 17 00:00:00 2001
From: Kamil Emeleev <emeleev.kamil@gmail.com>
Date: Mon, 8 Jun 2026 21:36:55 +0300
Subject: [PATCH] fix(ActionsPanel): correct styling of internal subcomponents
 (divider, badge, buttons)

---
 .../ActionsPanelAction.module.css             | 31 ++++++++++++------
 .../ActionsPanelAction/ActionsPanelAction.tsx |  1 +
 .../ActionsPanelClearButton.module.css        | 17 ++++++++--
 .../ActionsPanelClearButton.tsx               |  2 ++
 .../ActionsPanelCounter.module.css            | 12 +++----
 .../ActionsPanelCounter.tsx                   |  2 +-
 .../ActionsPanelDivider.module.css            |  3 +-
 .../ActionsPanelDivider.tsx                   |  1 +
 .../ActionsPanelMoreAction.module.css         | 32 +++++++++++++------
 .../ActionsPanelMoreAction.tsx                |  1 +
 10 files changed, 74 insertions(+), 28 deletions(-)

diff --git a/packages/components/src/components/ActionsPanel/components/ActionsPanelAction/ActionsPanelAction.module.css b/packages/components/src/components/ActionsPanel/components/ActionsPanelAction/ActionsPanelAction.module.css
index 17a54279c..e796b5a9d 100644
--- a/packages/components/src/components/ActionsPanel/components/ActionsPanelAction/ActionsPanelAction.module.css
+++ b/packages/components/src/components/ActionsPanel/components/ActionsPanelAction/ActionsPanelAction.module.css
@@ -1,15 +1,28 @@
-.base {
+/* [data-slot] bumps specificity over Button's own rules */
+.base[data-slot='action'] {
   flex-shrink: 0;
   margin-inline-start: var(--kbq-size-xxs);
   background-color: var(--kbq-background-transparent);
-}
 
-.base:first-child {
-  margin-inline-start: unset;
-}
+  &[data-hovered='true']:not([data-loading='true']) {
+    background-color: var(--kbq-states-background-contrast-hover);
+  }
+
+  &[data-pressed='true']:not([data-loading='true']) {
+    background-color: var(--kbq-states-background-contrast-active);
+  }
+
+  &[data-disabled='true'] {
+    background-color: var(--kbq-states-background-disabled);
+  }
+
+  &:first-child {
+    margin-inline-start: unset;
+  }
 
-.base[aria-hidden='true'] {
-  visibility: hidden;
-  position: absolute;
-  inset-inline-start: -300vw;
+  &[aria-hidden='true'] {
+    visibility: hidden;
+    position: absolute;
+    inset-inline-start: -300vw;
+  }
 }
diff --git a/packages/components/src/components/ActionsPanel/components/ActionsPanelAction/ActionsPanelAction.tsx b/packages/components/src/components/ActionsPanel/components/ActionsPanelAction/ActionsPanelAction.tsx
index 2c783a842..46ebe0a13 100644
--- a/packages/components/src/components/ActionsPanel/components/ActionsPanelAction/ActionsPanelAction.tsx
+++ b/packages/components/src/components/ActionsPanel/components/ActionsPanelAction/ActionsPanelAction.tsx
@@ -15,6 +15,7 @@ export const ActionsPanelAction = (props: ActionsPanelActionProps) => {
       ref={ref}
       data-slot="action"
       startIcon={icon}
+      variant="contrast-filled"
       className={clsx(s.base, className)}
       {...other}
     >
diff --git a/packages/components/src/components/ActionsPanel/components/ActionsPanelClearButton/ActionsPanelClearButton.module.css b/packages/components/src/components/ActionsPanel/components/ActionsPanelClearButton/ActionsPanelClearButton.module.css
index 0c52a0762..1c73ad9b6 100644
--- a/packages/components/src/components/ActionsPanel/components/ActionsPanelClearButton/ActionsPanelClearButton.module.css
+++ b/packages/components/src/components/ActionsPanel/components/ActionsPanelClearButton/ActionsPanelClearButton.module.css
@@ -1,9 +1,22 @@
 .base {
   display: flex;
-  margin-inline-start: auto;
   align-items: center;
+  margin-inline-start: auto;
 }
 
-.clearButton {
+/* [data-slot] bumps specificity over Button's own rules */
+.clearButton[data-slot='clear-button'] {
   background-color: var(--kbq-background-transparent);
+
+  &[data-hovered='true']:not([data-loading='true']) {
+    background-color: var(--kbq-states-background-contrast-hover);
+  }
+
+  &[data-pressed='true']:not([data-loading='true']) {
+    background-color: var(--kbq-states-background-contrast-active);
+  }
+
+  &[data-disabled='true'] {
+    background-color: var(--kbq-states-background-disabled);
+  }
 }
diff --git a/packages/components/src/components/ActionsPanel/components/ActionsPanelClearButton/ActionsPanelClearButton.tsx b/packages/components/src/components/ActionsPanel/components/ActionsPanelClearButton/ActionsPanelClearButton.tsx
index b5388aae0..0002809c7 100644
--- a/packages/components/src/components/ActionsPanel/components/ActionsPanelClearButton/ActionsPanelClearButton.tsx
+++ b/packages/components/src/components/ActionsPanel/components/ActionsPanelClearButton/ActionsPanelClearButton.tsx
@@ -26,7 +26,9 @@ export const ActionsPanelClearButton = ({
     <div className={clsx(s.base, className)} {...other}>
       <ActionsPanelDivider />
       <Button
+        data-slot="clear-button"
         className={s.clearButton}
+        variant="contrast-filled"
         aria-label={t.format('clear selection')}
         onPress={onClearSelection}
         startIcon={<IconCircleXmark16 />}
diff --git a/packages/components/src/components/ActionsPanel/components/ActionsPanelCounter/ActionsPanelCounter.module.css b/packages/components/src/components/ActionsPanel/components/ActionsPanelCounter/ActionsPanelCounter.module.css
index 12ad6701e..2dd2b0d94 100644
--- a/packages/components/src/components/ActionsPanel/components/ActionsPanelCounter/ActionsPanelCounter.module.css
+++ b/packages/components/src/components/ActionsPanel/components/ActionsPanelCounter/ActionsPanelCounter.module.css
@@ -2,6 +2,12 @@
   order: -1;
   display: flex;
   align-items: center;
+
+  /* extra-counter */
+  .extraCounter {
+    margin-inline-start: var(--kbq-size-xs);
+    color: inherit;
+  }
 }
 
 .base[aria-hidden='true'] {
@@ -22,9 +28,3 @@
   min-inline-size: 1ch;
   display: inline-block;
 }
-
-/* extra-counter */
-.extraCounter {
-  margin-inline-start: var(--kbq-size-xs);
-  color: inherit;
-}
diff --git a/packages/components/src/components/ActionsPanel/components/ActionsPanelCounter/ActionsPanelCounter.tsx b/packages/components/src/components/ActionsPanel/components/ActionsPanelCounter/ActionsPanelCounter.tsx
index 8ccc3a065..b1253c987 100644
--- a/packages/components/src/components/ActionsPanel/components/ActionsPanelCounter/ActionsPanelCounter.tsx
+++ b/packages/components/src/components/ActionsPanel/components/ActionsPanelCounter/ActionsPanelCounter.tsx
@@ -35,9 +35,9 @@ export const ActionsPanelCounter = ({
       <Typography
         as="div"
         className={s.text}
-        ellipsis
         color="on-contrast"
         variant="text-normal-medium"
+        ellipsis
       >
         {isAll ? (
           t.format('all selected')
diff --git a/packages/components/src/components/ActionsPanel/components/ActionsPanelDivider/ActionsPanelDivider.module.css b/packages/components/src/components/ActionsPanel/components/ActionsPanelDivider/ActionsPanelDivider.module.css
index 98122f70e..01e0d5575 100644
--- a/packages/components/src/components/ActionsPanel/components/ActionsPanelDivider/ActionsPanelDivider.module.css
+++ b/packages/components/src/components/ActionsPanel/components/ActionsPanelDivider/ActionsPanelDivider.module.css
@@ -1,4 +1,5 @@
-.base {
+/* [data-slot] bumps specificity to override Divider's own --divider-color */
+.base[data-slot='divider'] {
   --divider-color: var(--actions-panel-vertical-divider-color);
 
   block-size: var(--kbq-size-m);
diff --git a/packages/components/src/components/ActionsPanel/components/ActionsPanelDivider/ActionsPanelDivider.tsx b/packages/components/src/components/ActionsPanel/components/ActionsPanelDivider/ActionsPanelDivider.tsx
index 8ae1df9bc..dd06cd09f 100644
--- a/packages/components/src/components/ActionsPanel/components/ActionsPanelDivider/ActionsPanelDivider.tsx
+++ b/packages/components/src/components/ActionsPanel/components/ActionsPanelDivider/ActionsPanelDivider.tsx
@@ -12,6 +12,7 @@ export const ActionsPanelDivider = ({
   ...other
 }: ActionsPanelCounterProps) => (
   <Divider
+    data-slot="divider"
     orientation="vertical"
     className={clsx(s.base, className)}
     {...other}
diff --git a/packages/components/src/components/ActionsPanel/components/ActionsPanelMoreAction/ActionsPanelMoreAction.module.css b/packages/components/src/components/ActionsPanel/components/ActionsPanelMoreAction/ActionsPanelMoreAction.module.css
index 1a2656577..e5ad078e1 100644
--- a/packages/components/src/components/ActionsPanel/components/ActionsPanelMoreAction/ActionsPanelMoreAction.module.css
+++ b/packages/components/src/components/ActionsPanel/components/ActionsPanelMoreAction/ActionsPanelMoreAction.module.css
@@ -1,16 +1,30 @@
-.base {
+/* [data-slot] bumps specificity over Button's own rules */
+.base[data-slot='more-action'] {
   flex-shrink: 0;
   background-color: var(--kbq-background-transparent);
-}
 
-.base[aria-hidden='true'] {
-  visibility: hidden;
-  position: absolute;
-  inset-inline-start: -300vw;
-}
+  &[data-hovered='true']:not([data-loading='true']) {
+    background-color: var(--kbq-states-background-contrast-hover);
+  }
+
+  &[data-pressed='true']:not([data-loading='true']) {
+    background-color: var(--kbq-states-background-contrast-active);
+  }
+
+  &[data-disabled='true'] {
+    background-color: var(--kbq-states-background-disabled);
+  }
+
+  /* depends on Button's internal --button-bg-color-active */
+  &[aria-expanded='true'] {
+    background-color: var(--button-bg-color-active);
+  }
 
-.base[aria-expanded='true'] {
-  background-color: var(--button-bg-color-active);
+  &[aria-hidden='true'] {
+    visibility: hidden;
+    position: absolute;
+    inset-inline-start: -300vw;
+  }
 }
 
 /* menu-header-title */
diff --git a/packages/components/src/components/ActionsPanel/components/ActionsPanelMoreAction/ActionsPanelMoreAction.tsx b/packages/components/src/components/ActionsPanel/components/ActionsPanelMoreAction/ActionsPanelMoreAction.tsx
index 15e992790..b74f78a5d 100644
--- a/packages/components/src/components/ActionsPanel/components/ActionsPanelMoreAction/ActionsPanelMoreAction.tsx
+++ b/packages/components/src/components/ActionsPanel/components/ActionsPanelMoreAction/ActionsPanelMoreAction.tsx
@@ -42,6 +42,7 @@ export const ActionsPanelMoreAction = (props: ActionsPanelMoreActionProps) => {
   }) => (
     <Button
       data-slot="more-action"
+      variant="contrast-filled"
       ref={mergeRefs(ref, controlRef)}
       aria-label={t.format('show more actions')}
       className={clsx(s.base, className)}