@carbon/web-components 2.49.0 → 2.50.0

package/lib/components/floating-menu/defs.js

@@ -8,7 +8,7 @@
 'use strict';
 
 /**
- * Copyright IBM Corp. 2020, 2022, 2023
+ * Copyright IBM Corp. 2020, 2022, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -40,5 +40,13 @@ exports.FLOATING_MENU_DIRECTION = void 0;
      * Put menu body at the bottom of its trigger button.
      */
     FLOATING_MENU_DIRECTION["BOTTOM"] = "bottom";
+    /**
+     * Put menu body to the left of its trigger button.
+     */
+    FLOATING_MENU_DIRECTION["LEFT"] = "left";
+    /**
+     * Put menu body to the right of its trigger button.
+     */
+    FLOATING_MENU_DIRECTION["RIGHT"] = "right";
 })(exports.FLOATING_MENU_DIRECTION || (exports.FLOATING_MENU_DIRECTION = {}));
 //# sourceMappingURL=defs.js.map

package/lib/components/floating-menu/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","sources":["../../../src/components/floating-menu/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2022, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * The LTR/RTL direction used for positioning floating menu.\n */\nexport enum FLOATING_MENU_POSITION_DIRECTION {\n  /**\n   * LTR.\n   */\n  LTR = 'ltr',\n\n  /**\n   * RTL.\n   */\n  RTL = 'rtl',\n}\n\n/**\n * The direction/positioning/orientation choices of floating menu.\n */\nexport enum FLOATING_MENU_DIRECTION {\n  /**\n   * Put menu body at the top of its trigger button.\n   */\n  TOP = 'top',\n\n  /**\n   * Put menu body at the bottom of its trigger button.\n   */\n  BOTTOM = 'bottom',\n}\n"],"names":["FLOATING_MENU_POSITION_DIRECTION","FLOATING_MENU_DIRECTION"],"mappings":";;;;;;;;;AAAA;;;;;AAKG;AAEH;;AAEG;AACSA;AAAZ,CAAA,UAAY,gCAAgC,EAAA;AAC1C;;AAEG;AACH,IAAA,gCAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AAEX;;AAEG;AACH,IAAA,gCAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACb,CAAC,EAVWA,wCAAgC,KAAhCA,wCAAgC,GAAA,EAAA,CAAA,CAAA;AAY5C;;AAEG;AACSC;AAAZ,CAAA,UAAY,uBAAuB,EAAA;AACjC;;AAEG;AACH,IAAA,uBAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AAEX;;AAEG;AACH,IAAA,uBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACnB,CAAC,EAVWA,+BAAuB,KAAvBA,+BAAuB,GAAA,EAAA,CAAA,CAAA;;"}
+{"version":3,"file":"defs.js","sources":["../../../src/components/floating-menu/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2022, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * The LTR/RTL direction used for positioning floating menu.\n */\nexport enum FLOATING_MENU_POSITION_DIRECTION {\n  /**\n   * LTR.\n   */\n  LTR = 'ltr',\n\n  /**\n   * RTL.\n   */\n  RTL = 'rtl',\n}\n\n/**\n * The direction/positioning/orientation choices of floating menu.\n */\nexport enum FLOATING_MENU_DIRECTION {\n  /**\n   * Put menu body at the top of its trigger button.\n   */\n  TOP = 'top',\n\n  /**\n   * Put menu body at the bottom of its trigger button.\n   */\n  BOTTOM = 'bottom',\n\n  /**\n   * Put menu body to the left of its trigger button.\n   */\n  LEFT = 'left',\n\n  /**\n   * Put menu body to the right of its trigger button.\n   */\n  RIGHT = 'right',\n}\n"],"names":["FLOATING_MENU_POSITION_DIRECTION","FLOATING_MENU_DIRECTION"],"mappings":";;;;;;;;;AAAA;;;;;AAKG;AAEH;;AAEG;AACSA;AAAZ,CAAA,UAAY,gCAAgC,EAAA;AAC1C;;AAEG;AACH,IAAA,gCAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AAEX;;AAEG;AACH,IAAA,gCAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACb,CAAC,EAVWA,wCAAgC,KAAhCA,wCAAgC,GAAA,EAAA,CAAA,CAAA;AAY5C;;AAEG;AACSC;AAAZ,CAAA,UAAY,uBAAuB,EAAA;AACjC;;AAEG;AACH,IAAA,uBAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AAEX;;AAEG;AACH,IAAA,uBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AAEjB;;AAEG;AACH,IAAA,uBAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AAEb;;AAEG;AACH,IAAA,uBAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EApBWA,+BAAuB,KAAvBA,+BAAuB,GAAA,EAAA,CAAA,CAAA;;"}

package/lib/components/floating-menu/floating-menu.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2019, 2024
+ * Copyright IBM Corp. 2019, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -9,6 +9,22 @@ import Handle from '../../globals/internal/handle';
 import { FLOATING_MENU_DIRECTION, FLOATING_MENU_POSITION_DIRECTION } from './defs';
 import CDSFloatingMenuTrigger from './floating-menu-trigger';
 export { FLOATING_MENU_DIRECTION, FLOATING_MENU_POSITION_DIRECTION };
+export interface Offset {
+    top: number;
+    left: number;
+}
+export type MenuDirection = FLOATING_MENU_DIRECTION;
+export type MenuOffset = Offset | ((menuBody: HTMLElement, menuDirection: MenuDirection, trigger?: HTMLElement | null, flipped?: boolean) => Offset);
+/**
+ * Calculates the offset for the floating menu.
+ *
+ * @param menuBody - The menu body element.
+ * @param menuDirection - The floating menu direction.
+ * @param trigger - The trigger element.
+ * @param flipped - Whether the menu is flipped.
+ * @returns The adjustment of the floating menu position.
+ */
+export declare const getMenuOffset: (menuBody: HTMLElement, menuDirection: MenuDirection, trigger?: HTMLElement, flipped?: boolean) => Offset;
 /**
  * Position of floating menu, or trigger button of floating menu.
  */
@@ -778,6 +794,20 @@ declare abstract class CDSFloatingMenu extends CDSFloatingMenu_base {
      * `true` if the menu alignment should be flipped.
      */
     abstract flipped: boolean;
+    /**
+     * Gets the menu offset configuration (object or function).
+     * Subclasses override this to specify custom offset configs.
+     *
+     * @returns The menu offset configuration, or undefined for no offset.
+     */
+    protected getOffsetConfig(): MenuOffset | undefined;
+    /**
+     * Resolves the final menu offset by evaluating the offset configuration.
+     * Handles both static offset objects and dynamic offset functions.
+     *
+     * @returns The resolved offset with left and top values.
+     */
+    protected resolveOffset(): Offset;
     /**
      * The DOM element to put this menu into.
      */

package/lib/components/multi-select/multi-select.d.ts

@@ -59,6 +59,11 @@ declare class CDSMultiSelect extends CDSDropdown {
     protected _selectionDidChange(itemToSelect?: CDSMultiSelectItem): void;
     protected _shouldCloseAfterSelection(item?: CDSMultiSelectItem): item is undefined;
     protected _handleClickInner(event: MouseEvent): void;
+    /**
+     * Clears selections on Escape click
+     */
+    protected _handleKeydownInner(event: KeyboardEvent): void;
+    protected _handleFocusOut(event: FocusEvent): void;
     /**
      * Handler for the `keypress` event, ensures filter still works upon entering space
      */
@@ -138,6 +143,10 @@ declare class CDSMultiSelect extends CDSDropdown {
      * 'selected' or 'indeterminate'
      */
     private _computeSelectAllState;
+    /**
+     * Clears the filterable input field
+     */
+    private _clearInput;
     connectedCallback(): void;
     /**
      * A selector that will return menu body.

package/lib/components/overflow-menu/overflow-menu-body.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2019, 2025
+ * Copyright IBM Corp. 2019, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import CDSFloatingMenu, { FLOATING_MENU_DIRECTION } from '../floating-menu/floating-menu';
+import CDSFloatingMenu, { FLOATING_MENU_DIRECTION, type MenuOffset } from '../floating-menu/floating-menu';
 import { OVERFLOW_MENU_SIZE } from './defs';
 import CDSOverflowMenuItem from './overflow-menu-item';
 /**
@@ -32,6 +32,22 @@ declare class CDSOverflowMenuBody extends CDSFloatingMenu {
      * The overflow menu size.
      */
     size: OVERFLOW_MENU_SIZE;
+    /**
+     * The adjustment in position applied to the floating menu.
+     */
+    menuOffset?: MenuOffset;
+    /**
+     * The adjustment in position applied to the floating menu when flipped.
+     */
+    menuOffsetFlip?: MenuOffset;
+    /**
+     * Gets the appropriate offset (menuOffset or menuOffsetFlip) based on the flipped state.
+     * If no offset is provided, falls back to the default centering behavior.
+     * Overrides `getOffsetConfig` in `CDSFloatingMenu`.
+     *
+     * @returns The menu offset configuration (object, function, or undefined).
+     */
+    protected getOffsetConfig(): MenuOffset | undefined;
     /**
      * @param currentItem The currently selected item.
      * @param direction The navigation direction.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/web-components",
   "description": "Web components for the Carbon Design System",
-  "version": "2.49.0",
+  "version": "2.50.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -66,7 +66,7 @@
   "dependencies": {
     "@carbon/icon-helpers": "10.47.0",
     "@carbon/icons": "^11.76.0",
-    "@carbon/styles": "^1.101.0",
+    "@carbon/styles": "^1.102.0",
     "@floating-ui/dom": "^1.6.3",
     "@ibm/telemetry-js": "^1.10.2",
     "@lit/context": "^1.1.3",
@@ -129,5 +129,5 @@
       }
     ]
   },
-  "gitHead": "4f48ac426be7302a57460b1c81d74dd5d6071ad6"
+  "gitHead": "443fbe43ff4bd1df327997b8b0b0ebeee634d002"
 }

package/scss/components/button/button.scss

@@ -38,6 +38,8 @@ $css--plex: true !default;
 
 :host(#{$prefix}-button-skeleton) {
   @include emit-layout-tokens();
+
+  display: inline-flex;
 }
 
 :host(#{$prefix}-button[isExpressive]) ::slotted([slot='icon']),

package/scss/components/overflow-menu/overflow-menu.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2024
+// Copyright IBM Corp. 2019, 2026
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -239,3 +239,9 @@ $caret-size: convert.to-rem(7px);
     inset-inline-start: $caret-size * 2;
   }
 }
+
+:host(#{$prefix}-overflow-menu-body:dir(rtl)[breadcrumb='true']) {
+  &::after {
+    direction: ltr;
+  }
+}

package/scss/components/tabs/tabs-story.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2024
+// Copyright IBM Corp. 2019, 2026
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -8,9 +8,23 @@
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities/layout';
+@use '@carbon/styles/scss/components/form/form' as form;
+
+@include form.form;
 
 .#{$prefix}-ce-demo-devenv--tab-panels {
   flex: 1;
   align-self: stretch;
   padding: $spacing-05;
 }
+
+.#{$prefix}--tab-content {
+  @include layout.use('density', $default: 'normal');
+
+  padding: layout.density('padding-inline');
+}
+
+#{$prefix}-tabs[type='contained'] ~ .#{$prefix}--tab-content {
+  background: $layer;
+}

package/scss/components/tabs/tabs.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2024
+// Copyright IBM Corp. 2019, 2026
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -112,6 +112,19 @@ $inset-transition: inset 110ms motion(standard, productive);
   outline: none;
 }
 
+:host(#{$prefix}-tab:not([type='contained'])) {
+  margin-inline-end: convert.to-rem(1px);
+
+  .#{$prefix}--tabs__nav-link {
+    padding-block-end: calc(#{$spacing-03} + #{convert.to-rem(1px)});
+    padding-block-start: calc(#{$spacing-04} - #{convert.to-rem(1px)});
+  }
+}
+
+:host(#{$prefix}-tab:not([type='contained']):last-of-type) {
+  margin-inline-end: 0;
+}
+
 :host(#{$prefix}-tab[selected]) {
   .#{$prefix}--tabs__nav-link {
     @include type-style('heading-compact-01');
@@ -186,7 +199,7 @@ $inset-transition: inset 110ms motion(standard, productive);
   outline: none;
 
   .#{$prefix}--tabs__nav-link {
-    border-block-end: $tab-underline-disabled;
+    border-block-end: $tab-underline-color;
     color: $tab-text-disabled;
     outline: none;
     pointer-events: none;
@@ -236,7 +249,7 @@ $inset-transition: inset 110ms motion(standard, productive);
   .#{$prefix}--tabs__nav-link {
     @include type-style('body-short-01');
 
-    border-block-end: $tab-underline-disabled;
+    border-block-end: $tab-underline-color;
 
     color: $tab-text-disabled;
 

package/telemetry.yml

@@ -622,6 +622,8 @@ collect:
         - word
         # General - direction
         - bottom
+        - left
+        - right
         - top
         # General - kind
         - ""