@carbon/web-components 2.27.2 → 2.28.0

package/lib/globals/controllers/{popover-controller.js → floating-controller.js}

@@ -17,7 +17,10 @@ var dom = require('@floating-ui/dom');
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-class PopoverController {
+/**
+ * Controller for positioning the menu using Floating UI.
+ */
+class FloatingController {
     /**
      * register with host component
      * @param host host component
@@ -26,7 +29,8 @@ class PopoverController {
         this.updatePlacement = () => {
             this.computePlacement();
         };
-        (this.host = host).addController(this);
+        this.host = host;
+        host.addController(this);
     }
     async setPlacement(options = this.options) {
         this.options = options;
@@ -35,7 +39,10 @@ class PopoverController {
     }
     async computePlacement() {
         var _a;
-        const { arrowElement, alignment, caret, trigger, target } = this.options;
+        const { arrowElement, alignment, caret, trigger, target, styleElement, matchWidth, open, flipArguments, } = this.options;
+        const element = styleElement !== null && styleElement !== void 0 ? styleElement : target;
+        if (!element)
+            return;
         let shimmedAlign;
         switch (alignment) {
             case 'top-left':
@@ -67,21 +74,36 @@ class PopoverController {
                 break;
         }
         const middleware = [
-            dom.flip({ fallbackAxisSideDirection: 'start' }),
+            dom.flip(flipArguments),
             dom.offset(caret ? 10 : 0),
             ...(caret && arrowElement
                 ? [dom.arrow({ element: arrowElement, padding: 15 })]
                 : []),
+            ...(matchWidth && (shimmedAlign === 'bottom' || shimmedAlign === 'top')
+                ? [
+                    dom.size({
+                        apply({ rects, elements }) {
+                            elements.floating.style.width = `${rects.reference.width}px`;
+                        },
+                    }),
+                ]
+                : [
+                    dom.size({
+                        apply({ elements }) {
+                            elements.floating.style.removeProperty('width');
+                        },
+                    }),
+                ]),
         ];
-        if (this.host.hasAttribute('open')) {
-            const { x, y, placement, middlewareData, strategy } = await dom.computePosition(trigger, target, {
+        if (open) {
+            const { x, y, placement, middlewareData, strategy } = await dom.computePosition(trigger, element, {
                 strategy: 'fixed',
                 middleware,
                 placement: shimmedAlign,
             });
-            target.style.left = `${x}px`;
-            target.style.top = `${y}px`;
-            target.style.position = `${strategy}`;
+            element.style.left = `${x}px`;
+            element.style.top = `${y}px`;
+            element.style.position = `${strategy}`;
             if (arrowElement) {
                 // @ts-ignore
                 const { x: arrowX, y: arrowY } = middlewareData.arrow;
@@ -120,5 +142,5 @@ class PopoverController {
     }
 }
 
-exports["default"] = PopoverController;
-//# sourceMappingURL=popover-controller.js.map
+exports["default"] = FloatingController;
+//# sourceMappingURL=floating-controller.js.map

package/lib/globals/controllers/floating-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-controller.js","sources":["../../../src/globals/controllers/floating-controller.ts"],"sourcesContent":[null],"names":["autoUpdate","flip","offset","arrow","size","computePosition"],"mappings":"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"}

package/lib/index.d.ts

@@ -169,3 +169,4 @@ export { default as CDSTimePickerSelect } from './components/time-picker/time-pi
 export { default as CDSTreeView } from './components/tree-view/tree-view';
 export { default as CDSTreeNode } from './components/tree-view/tree-node';
 export { default as CDSHeading } from './components/heading/heading';
+export { default as CDSMenuButton } from './components/menu-button/menu-button';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/web-components",
   "description": "Web components for the Carbon Design System",
-  "version": "2.27.2",
+  "version": "2.28.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -65,7 +65,7 @@
     "wca": "web-component-analyzer analyze src --outFile custom-elements.json"
   },
   "dependencies": {
-    "@carbon/styles": "^1.79.1",
+    "@carbon/styles": "^1.80.0",
     "@floating-ui/dom": "^1.6.3",
     "@ibm/telemetry-js": "^1.5.0",
     "@lit/context": "^1.1.1",
@@ -76,9 +76,9 @@
   },
   "devDependencies": {
     "@carbon/icon-helpers": "10.47.0",
-    "@carbon/icons": "^11.58.0",
-    "@carbon/layout": "^11.32.0",
-    "@carbon/motion": "^11.26.0",
+    "@carbon/icons": "^11.59.0",
+    "@carbon/layout": "^11.33.0",
+    "@carbon/motion": "^11.27.0",
     "@juggle/resize-observer": "^3.4.0",
     "@mordech/vite-lit-loader": "^0.37.0",
     "@open-wc/testing": "^4.0.0",
@@ -108,7 +108,7 @@
     "globby": "^14.0.2",
     "is-port-reachable": "^3.1.0",
     "null-loader": "^4.0.0",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "read-package-up": "^11.0.0",
     "remark-gfm": "^4.0.0",
     "rimraf": "^6.0.0",
@@ -139,5 +139,5 @@
       }
     ]
   },
-  "gitHead": "1fcbf602a0c0a9e33987b3b63e7a7a8b39af47d0"
+  "gitHead": "01b2d2b1c2d901921c615dcbdb85e0a2340b67e6"
 }

package/scss/components/menu/menu.scss

@@ -17,19 +17,23 @@ $css--plex: true !default;
 
 :host(#{$prefix}-menu) {
   position: fixed;
-  --grid-template: 1rem 1fr max-content;
+  --grid-template: 1fr max-content;
   --display-icon-item: none;
   --display-selection-icon: none;
-  --block-size-value: $spacing-07;
+  --block-size-value: #{$spacing-07};
 }
 .#{$prefix}--menu--with-icons {
-  --grid-template: 1rem 1rem 1fr max-content;
+  --grid-template: #{$spacing-05} 1fr max-content;
   --display-icon-item: flex;
 }
 .#{$prefix}--menu--with-selectable-items {
   --display-selection-icon: flex;
 }
 
+.#{$prefix}--menu--with-icons.#{$prefix}--menu--with-selectable-items {
+  --grid-template: #{$spacing-05} #{$spacing-05} 1fr max-content;
+}
+
 .#{$prefix}--menu {
   @extend .#{$prefix}--menu;
 

package/scss/components/menu-button/menu-button.scss

@@ -0,0 +1,26 @@
+//
+// Copyright IBM Corp. 2025, 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+$css--plex: true !default;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/components/menu-button/index' as *;
+
+:host(#{$prefix}-menu-button) {
+  @extend .#{$prefix}--menu-button__container;
+}
+
+:host(#{$prefix}-menu-button) #{$prefix}-button:not([kind='ghost']) {
+  min-inline-size: 12rem;
+}
+
+:host(#{$prefix}-menu-button) #{$prefix}-button svg {
+  transition: transform $duration-fast-02 motion(standard, productive);
+}
+
+:host(#{$prefix}-menu-button[_open]) #{$prefix}-button svg {
+  transform: rotate(180deg);
+}

package/scss/components/tooltip/tooltip-story.scss

@@ -35,3 +35,12 @@
 .sb-tooltip-trigger svg {
   fill: theme.$background-inverse;
 }
+
+// DefinitionTooltip
+.sb-definition-tooltip {
+  max-inline-size: 60ch;
+}
+
+.sb-definition-tooltip p {
+  @include type.type-style('body-short-02');
+}

package/scss/components/tooltip/tooltip.scss

@@ -44,3 +44,8 @@
     @extend .#{$prefix}--tooltip-content;
   }
 }
+
+// Definition tooltip
+:host(#{$prefix}-definition-tooltip) #{$prefix}-popover-content::part(content) {
+  @extend .#{$prefix}--definition-tooltip;
+}