@aurora-ds/components 1.9.0 → 1.9.2

package/dist/esm/index.js

@@ -265,13 +265,20 @@ const COLLAPSED_DRAWER_WIDTH = 58;
  * (Box `px="sm"` → theme.spacing.sm = 0.5rem = 8px).
  */
 const DRAWER_BODY_HORIZONTAL_PADDING = 8;
+/**
+ * The drawer root has `borderRight: 1px solid` with `box-sizing: border-box`,
+ * so the 1px border is consumed from the declared width, reducing the inner
+ * content area by 1px. We subtract it here so the item widths stay flush.
+ */
+const DRAWER_BORDER_WIDTH = 1;
 /**
  * DrawerItem widths (px), always derived from the drawer width minus the body
- * horizontal padding. Using explicit widths (instead of `width: 100%`) lets the
- * item animate its own width in sync with the drawer for a smooth transition.
+ * horizontal padding and the drawer border. Using explicit widths (instead of
+ * `width: 100%`) lets the item animate its own width in sync with the drawer
+ * for a smooth transition.
  */
-const EXPANDED_DRAWER_ITEM_WIDTH = EXPANDED_DRAWER_WIDTH - DRAWER_BODY_HORIZONTAL_PADDING * 2; // 264
-const COLLAPSED_DRAWER_ITEM_WIDTH = COLLAPSED_DRAWER_WIDTH - DRAWER_BODY_HORIZONTAL_PADDING * 2; // 44
+const EXPANDED_DRAWER_ITEM_WIDTH = EXPANDED_DRAWER_WIDTH - DRAWER_BODY_HORIZONTAL_PADDING * 2 - DRAWER_BORDER_WIDTH; // 223
+const COLLAPSED_DRAWER_ITEM_WIDTH = COLLAPSED_DRAWER_WIDTH - DRAWER_BODY_HORIZONTAL_PADDING * 2 - DRAWER_BORDER_WIDTH; // 41
 
 /**
  * Width of the focus ring outline. Kept thick enough to be clearly visible
@@ -4100,6 +4107,7 @@ const MENU_ITEM_STYLES = createStyles((theme) => {
             transition: `background-color ${theme.transition.fast}, border-color ${theme.transition.fast}`,
             '&[data-selected]': {
                 backgroundColor: c.primarySubtle,
+                borderLeftColor: c.primaryMain,
                 color: c.primaryMain,
                 fontWeight: theme.fontWeight.medium,
             },