@uniformdev/design-system 20.31.0 → 20.32.0

package/dist/esm/index.js

@@ -5619,13 +5619,14 @@ var buttonSizeLarge = css36`
   --line-offset: -1px;
 `;
 var ButtonWithMenuContainer = css36`
-  align-items: center;
   border: 1px solid transparent;
   border-radius: var(--rounded-base);
   color: var(--white);
-  display: inline-flex;
+  display: inline-grid;
   position: relative;
+  grid-template-columns: 1fr minmax(var(--icon-padding), 2.44rem);
   min-height: 24px;
+  max-width: max-content;
   transition:
     color var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
@@ -5648,6 +5649,12 @@ var ButtonWithMenuContainer = css36`
     height: var(--svg-size);
   }
 `;
+var IconButtonContainer = css36`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+`;
 function ButtonWithMenuBtn(overrideHairlineColor) {
   return css36`
     position: relative;
@@ -5680,8 +5687,12 @@ function ButtonWithMenuBtn(overrideHairlineColor) {
   `;
 }
 var ButtonWithMenuIcon = (disabled2) => css36`
-  padding: var(--icon-padding);
+  display: flex;
+  align-items: center;
+  justify-content: center;
   pointer-events: ${disabled2 ? "none" : "auto"};
+  width: 100%;
+  height: 100%;
 `;
 var buttonPrimary2 = css36`
   background: var(--gray-800);
@@ -5805,15 +5816,17 @@ var ButtonWithMenu = ({
       ]
     }
   );
-  const menuButton = /* @__PURE__ */ jsx49(
-    "div",
+  const menuButton = /* @__PURE__ */ jsx49("div", { css: IconButtonContainer, children: /* @__PURE__ */ jsx49(
+    "button",
     {
+      type: "button",
       css: ButtonWithMenuIcon(disabledValue),
       "data-testid": "multioptions-button-call-menu",
       "aria-disabled": disabledValue,
+      "aria-label": "Open menu",
       children: /* @__PURE__ */ jsx49(Icon, { icon: CgChevronDown3, iconColor: "currentColor" })
     }
-  );
+  ) });
   const tip = tooltip != null ? tooltip : shortcut && !disabledValue ? getFormattedShortcut(shortcut.shortcut) : void 0;
   if (onButtonClickHandler) {
     return /* @__PURE__ */ jsxs31(
@@ -6485,7 +6498,7 @@ var ChipContainer = css45`
     cursor: pointer;
   }
 
-  &:hover {
+  :where(button):hover {
     [role='presentation'] {
       transition: opacity var(--duration-fast) var(--timing-ease-out);
       opacity: var(--opacity-100);

package/dist/index.js

@@ -7379,13 +7379,14 @@ var buttonSizeLarge = import_react56.css`
   --line-offset: -1px;
 `;
 var ButtonWithMenuContainer = import_react56.css`
-  align-items: center;
   border: 1px solid transparent;
   border-radius: var(--rounded-base);
   color: var(--white);
-  display: inline-flex;
+  display: inline-grid;
   position: relative;
+  grid-template-columns: 1fr minmax(var(--icon-padding), 2.44rem);
   min-height: 24px;
+  max-width: max-content;
   transition:
     color var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
@@ -7408,6 +7409,12 @@ var ButtonWithMenuContainer = import_react56.css`
     height: var(--svg-size);
   }
 `;
+var IconButtonContainer = import_react56.css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+`;
 function ButtonWithMenuBtn(overrideHairlineColor) {
   return import_react56.css`
     position: relative;
@@ -7440,8 +7447,12 @@ function ButtonWithMenuBtn(overrideHairlineColor) {
   `;
 }
 var ButtonWithMenuIcon = (disabled2) => import_react56.css`
-  padding: var(--icon-padding);
+  display: flex;
+  align-items: center;
+  justify-content: center;
   pointer-events: ${disabled2 ? "none" : "auto"};
+  width: 100%;
+  height: 100%;
 `;
 var buttonPrimary2 = import_react56.css`
   background: var(--gray-800);
@@ -7565,15 +7576,17 @@ var ButtonWithMenu = ({
       ]
     }
   );
-  const menuButton = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-    "div",
+  const menuButton = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { css: IconButtonContainer, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    "button",
     {
+      type: "button",
       css: ButtonWithMenuIcon(disabledValue),
       "data-testid": "multioptions-button-call-menu",
       "aria-disabled": disabledValue,
+      "aria-label": "Open menu",
       children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icon, { icon: import_CgChevronDown4.CgChevronDown, iconColor: "currentColor" })
     }
-  );
+  ) });
   const tip = tooltip != null ? tooltip : shortcut && !disabledValue ? getFormattedShortcut(shortcut.shortcut) : void 0;
   if (onButtonClickHandler) {
     return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
@@ -8264,7 +8277,7 @@ var ChipContainer = import_react67.css`
     cursor: pointer;
   }
 
-  &:hover {
+  :where(button):hover {
     [role='presentation'] {
       transition: opacity var(--duration-fast) var(--timing-ease-out);
       opacity: var(--opacity-100);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "20.31.0",
+  "version": "20.32.0",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "exports": {
@@ -38,8 +38,8 @@
     "@storybook/theming": "^8.3.3",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
-    "@uniformdev/canvas": "^20.31.0",
-    "@uniformdev/richtext": "^20.31.0",
+    "@uniformdev/canvas": "^20.32.0",
+    "@uniformdev/richtext": "^20.32.0",
     "@vitest/coverage-v8": "^3.1.2",
     "autoprefixer": "10.4.21",
     "hygen": "6.2.11",
@@ -91,5 +91,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f0beedff37c21c6b6795018e82fa9ad5fe2b59fd"
+  "gitHead": "5e94bba0b8d4295cdb77a7f72196849412da96c6"
 }