@carbon/web-components 2.45.0 → 2.46.0-rc.0

package/es-custom/components/toggle-tip/toggletip.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggletip.js","sources":["../../../src/components/toggle-tip/toggletip.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2025\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\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport Information16 from '@carbon/icons/es/information/16.js';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { POPOVER_ALIGNMENT } from '../popover/defs';\nimport FloatingUIContoller from '../../globals/controllers/floating-controller';\nimport styles from './toggletip.scss?lit';\nimport { iconLoader } from '../../globals/internal/icon-loader';\n\n/**\n * Definition tooltip.\n *\n * @element cds-custom-toggletip\n */\n@customElement(`${prefix}-toggletip`)\nclass CDSToggletip extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * Create popover controller instance\n   */\n  private popoverController = new FloatingUIContoller(this);\n\n  /**\n   * How the tooltip is aligned to the trigger button.\n   */\n  @property({ reflect: true })\n  alignment = POPOVER_ALIGNMENT.TOP;\n\n  /**\n   * **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled.\n   */\n  @property({ type: Number, attribute: 'alignment-axis-offset' })\n  alignmentAxisOffset = 0;\n\n  /**\n   * Specify whether a auto align functionality should be applied\n   */\n  @property({ type: Boolean, reflect: true })\n  autoalign = false;\n\n  /**\n   * The label for the toggle button\n   */\n  @property({ attribute: 'button-label' })\n  buttonLabel = 'Show information';\n\n  /**\n   * Set whether toggletip is open\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Set whether toggletip is open by default.\n   */\n  @property({ type: Boolean, attribute: 'default-open' })\n  defaultOpen = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (this.defaultOpen && !this.hasAttribute('open')) {\n      this.open = true;\n    }\n  }\n\n  /**\n   * Handles `slotchange` event.\n   */\n  private _handleActionsSlotChange({ target }: Event) {\n    const hasContent = (target as HTMLSlotElement).assignedNodes();\n    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452\n    hasContent\n      ? this.setAttribute('has-actions', '')\n      : this.removeAttribute('has-actions');\n  }\n\n  protected _handleClick() {\n    this.open = !this.open;\n  }\n\n  /**\n   * Handles `keydown` event on this element.\n   */\n  @HostListener('keydown')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleKeydown = async (event) => {\n    if (event.key === 'Escape') {\n      this.open = false;\n    }\n  };\n\n  /**\n   * Handles `blur` event handler on the document this element is in.\n   *\n   * @param event The event.\n   */\n  @HostListener('focusout')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleFocusOut(event: FocusEvent) {\n    if (this.contains(event.relatedTarget as Node)) {\n      return;\n    }\n\n    if (this._deepShadowContains(this, event.relatedTarget)) {\n      return;\n    }\n    this.open = false;\n  }\n\n  private _deepShadowContains(root: Node, el: EventTarget | null): boolean {\n    if (!(el instanceof Node)) {\n      return false;\n    }\n    if (el === root) {\n      return true;\n    }\n\n    return this._deepShadowContains(\n      root,\n      (el as HTMLElement).assignedSlot ||\n        el.parentNode ||\n        (el.getRootNode() as ShadowRoot).host ||\n        null\n    );\n  }\n\n  protected _renderToggleTipLabel = () => {\n    return html`\n      <span class=\"${prefix}--toggletip-label\">\n        <slot></slot>\n      </span>\n    `;\n  };\n\n  protected _renderTooltipButton = () => {\n    return html`\n      <button\n        aria-controls=\"${this.id}\"\n        aria-label=\"${this.buttonLabel}\"\n        class=\"${prefix}--toggletip-button\"\n        @click=${this._handleClick}>\n        <slot name=\"trigger\"\n          >${iconLoader(Information16, { id: 'trigger' })}\n        </slot>\n      </button>\n    `;\n  };\n\n  protected _renderTooltipContent = () => {\n    return this.autoalign\n      ? html`\n          <span class=\"${prefix}--popover-content\">\n            <div class=\"${prefix}--toggletip-content\">\n              <slot name=\"body-text\"></slot>\n              <div class=\"${prefix}--toggletip-actions\">\n                <slot\n                  name=\"actions\"\n                  @slotchange=\"${this._handleActionsSlotChange}\"></slot>\n              </div>\n            </div>\n            <span class=\"${prefix}--popover-caret\"></span>\n          </span>\n        `\n      : html`\n          <span class=\"${prefix}--popover\">\n            <span class=\"${prefix}--popover-content\">\n              <div class=\"${prefix}--toggletip-content\">\n                <slot name=\"body-text\"></slot>\n                <div class=\"${prefix}--toggletip-actions\">\n                  <slot\n                    name=\"actions\"\n                    @slotchange=\"${this._handleActionsSlotChange}\"></slot>\n                </div>\n              </div>\n            </span>\n            <span class=\"${prefix}--popover-caret\"></span>\n          </span>\n        `;\n  };\n\n  protected _renderInnerContent = () => {\n    return html`\n      ${this._renderTooltipButton()} ${this._renderTooltipContent()}\n    `;\n  };\n\n  updated() {\n    if (this.autoalign) {\n      // auto align functionality with @floating-ui/dom library\n      const button = this.shadowRoot?.querySelector(\n        CDSToggletip.selectorToggletipButton\n      );\n\n      const tooltip = this.shadowRoot?.querySelector(\n        CDSToggletip.selectorToggletipContent\n      );\n      const arrowElement = this.shadowRoot?.querySelector(\n        CDSToggletip.selectorToggletipCaret\n      );\n\n      if (button && tooltip) {\n        // Ensure toggletip is visible when rendered in a large scrollable container (storybook parity)\n        button.scrollIntoView({ block: 'center', inline: 'center' });\n\n        this.popoverController?.setPlacement({\n          trigger: button as HTMLElement,\n          target: tooltip as HTMLElement,\n          arrowElement: arrowElement as HTMLElement,\n          caret: true,\n          flipArguments: { fallbackAxisSideDirection: 'start' },\n          alignment: this.alignment,\n          open: this.open,\n          alignmentAxisOffset: this.alignmentAxisOffset,\n        });\n      }\n    }\n  }\n\n  render() {\n    const { alignment, open } = this;\n    const classes = classMap({\n      [`${prefix}--popover-container`]: true,\n      [`${prefix}--popover--caret`]: true,\n      [`${prefix}--popover--high-contrast`]: true,\n      [`${prefix}--popover--open`]: open,\n      [`${prefix}--popover--${alignment}`]: alignment,\n      [`${prefix}--toggletip`]: true,\n      [`${prefix}--toggletip--open`]: open,\n    });\n    return html`\n      ${this._renderToggleTipLabel()}\n      <span class=\"${classes}\"> ${this._renderInnerContent()} </span>\n    `;\n  }\n\n  /**\n   * A selector that will return the toggletip content.\n   */\n  static get selectorToggletipContent() {\n    return `.${prefix}--popover-content`;\n  }\n\n  /**\n   * A selector that will return the toggletip caret.\n   */\n  static get selectorToggletipCaret() {\n    return `.${prefix}--popover-caret`;\n  }\n\n  /**\n   * A selector that will return the trigger element.\n   */\n  static get selectorToggletipButton() {\n    return `.${prefix}--toggletip-button`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = styles;\n}\n\nexport default CDSToggletip;\n"],"names":["FloatingUIContoller","customElement"],"mappings":"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"}
+{"version":3,"file":"toggletip.js","sources":["../../../src/components/toggle-tip/toggletip.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2025\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\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport Information16 from '@carbon/icons/es/information/16.js';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { POPOVER_ALIGNMENT } from '../popover/defs';\nimport FloatingUIController from '../../globals/controllers/floating-controller';\nimport styles from './toggletip.scss?lit';\nimport { iconLoader } from '../../globals/internal/icon-loader';\n\n/**\n * Definition tooltip.\n *\n * @element cds-custom-toggletip\n */\n@customElement(`${prefix}-toggletip`)\nclass CDSToggletip extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * Create popover controller instance\n   */\n  private popoverController = new FloatingUIController(this);\n\n  /**\n   * How the tooltip is aligned to the trigger button.\n   */\n  @property({ reflect: true })\n  alignment = POPOVER_ALIGNMENT.TOP;\n\n  /**\n   * **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled.\n   */\n  @property({ type: Number, attribute: 'alignment-axis-offset' })\n  alignmentAxisOffset = 0;\n\n  /**\n   * Specify whether a auto align functionality should be applied\n   */\n  @property({ type: Boolean, reflect: true })\n  autoalign = false;\n\n  /**\n   * The label for the toggle button\n   */\n  @property({ attribute: 'button-label' })\n  buttonLabel = 'Show information';\n\n  /**\n   * Set whether toggletip is open\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Set whether toggletip is open by default.\n   */\n  @property({ type: Boolean, attribute: 'default-open' })\n  defaultOpen = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (this.defaultOpen && !this.hasAttribute('open')) {\n      this.open = true;\n    }\n  }\n\n  /**\n   * Handles `slotchange` event.\n   */\n  private _handleActionsSlotChange({ target }: Event) {\n    const hasContent = (target as HTMLSlotElement).assignedNodes();\n    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452\n    hasContent\n      ? this.setAttribute('has-actions', '')\n      : this.removeAttribute('has-actions');\n  }\n\n  protected _handleClick() {\n    this.open = !this.open;\n  }\n\n  /**\n   * Handles `keydown` event on this element.\n   */\n  @HostListener('keydown')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleKeydown = async (event) => {\n    if (event.key === 'Escape') {\n      this.open = false;\n    }\n  };\n\n  /**\n   * Handles `blur` event handler on the document this element is in.\n   *\n   * @param event The event.\n   */\n  @HostListener('focusout')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleFocusOut(event: FocusEvent) {\n    if (this.contains(event.relatedTarget as Node)) {\n      return;\n    }\n\n    if (this._deepShadowContains(this, event.relatedTarget)) {\n      return;\n    }\n    this.open = false;\n  }\n\n  private _deepShadowContains(root: Node, el: EventTarget | null): boolean {\n    if (!(el instanceof Node)) {\n      return false;\n    }\n    if (el === root) {\n      return true;\n    }\n\n    return this._deepShadowContains(\n      root,\n      (el as HTMLElement).assignedSlot ||\n        el.parentNode ||\n        (el.getRootNode() as ShadowRoot).host ||\n        null\n    );\n  }\n\n  protected _renderToggleTipLabel = () => {\n    return html`\n      <span class=\"${prefix}--toggletip-label\">\n        <slot></slot>\n      </span>\n    `;\n  };\n\n  protected _renderTooltipButton = () => {\n    return html`\n      <button\n        aria-controls=\"${this.id}\"\n        aria-label=\"${this.buttonLabel}\"\n        class=\"${prefix}--toggletip-button\"\n        @click=${this._handleClick}>\n        <slot name=\"trigger\"\n          >${iconLoader(Information16, { id: 'trigger' })}\n        </slot>\n      </button>\n    `;\n  };\n\n  protected _renderTooltipContent = () => {\n    return this.autoalign\n      ? html`\n          <span class=\"${prefix}--popover-content\">\n            <div class=\"${prefix}--toggletip-content\">\n              <slot name=\"body-text\"></slot>\n              <div class=\"${prefix}--toggletip-actions\">\n                <slot\n                  name=\"actions\"\n                  @slotchange=\"${this._handleActionsSlotChange}\"></slot>\n              </div>\n            </div>\n            <span class=\"${prefix}--popover-caret\"></span>\n          </span>\n        `\n      : html`\n          <span class=\"${prefix}--popover\">\n            <span class=\"${prefix}--popover-content\">\n              <div class=\"${prefix}--toggletip-content\">\n                <slot name=\"body-text\"></slot>\n                <div class=\"${prefix}--toggletip-actions\">\n                  <slot\n                    name=\"actions\"\n                    @slotchange=\"${this._handleActionsSlotChange}\"></slot>\n                </div>\n              </div>\n            </span>\n            <span class=\"${prefix}--popover-caret\"></span>\n          </span>\n        `;\n  };\n\n  protected _renderInnerContent = () => {\n    return html`\n      ${this._renderTooltipButton()} ${this._renderTooltipContent()}\n    `;\n  };\n\n  updated() {\n    if (this.autoalign) {\n      // auto align functionality with @floating-ui/dom library\n      const button = this.shadowRoot?.querySelector(\n        CDSToggletip.selectorToggletipButton\n      );\n\n      const tooltip = this.shadowRoot?.querySelector(\n        CDSToggletip.selectorToggletipContent\n      );\n      const arrowElement = this.shadowRoot?.querySelector(\n        CDSToggletip.selectorToggletipCaret\n      );\n\n      if (button && tooltip) {\n        // Ensure toggletip is visible when rendered in a large scrollable container (storybook parity)\n        button.scrollIntoView({ block: 'center', inline: 'center' });\n\n        this.popoverController?.setPlacement({\n          trigger: button as HTMLElement,\n          target: tooltip as HTMLElement,\n          arrowElement: arrowElement as HTMLElement,\n          caret: true,\n          flipArguments: { fallbackAxisSideDirection: 'start' },\n          alignment: this.alignment,\n          open: this.open,\n          alignmentAxisOffset: this.alignmentAxisOffset,\n        });\n      }\n    }\n  }\n\n  render() {\n    const { alignment, open } = this;\n    const classes = classMap({\n      [`${prefix}--popover-container`]: true,\n      [`${prefix}--popover--caret`]: true,\n      [`${prefix}--popover--high-contrast`]: true,\n      [`${prefix}--popover--open`]: open,\n      [`${prefix}--popover--${alignment}`]: alignment,\n      [`${prefix}--toggletip`]: true,\n      [`${prefix}--toggletip--open`]: open,\n    });\n    return html`\n      ${this._renderToggleTipLabel()}\n      <span class=\"${classes}\"> ${this._renderInnerContent()} </span>\n    `;\n  }\n\n  /**\n   * A selector that will return the toggletip content.\n   */\n  static get selectorToggletipContent() {\n    return `.${prefix}--popover-content`;\n  }\n\n  /**\n   * A selector that will return the toggletip caret.\n   */\n  static get selectorToggletipCaret() {\n    return `.${prefix}--popover-caret`;\n  }\n\n  /**\n   * A selector that will return the trigger element.\n   */\n  static get selectorToggletipButton() {\n    return `.${prefix}--toggletip-button`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = styles;\n}\n\nexport default CDSToggletip;\n"],"names":["FloatingUIController","customElement"],"mappings":"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"}

package/lib/components/combo-box/combo-box.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.
@@ -57,10 +57,12 @@ declare class CDSComboBox extends CDSDropdown {
      * @returns `true` if the given combo box item matches the given query text.
      */
     protected _defaultItemMatches(item: CDSComboBoxItem, queryText: string): boolean;
+    connectedCallback(): void;
     /**
      * Handles `input` event on the `<input>` for filtering.
      */
-    protected _handleInput(): void;
+    protected _handleInput(event: InputEvent): void;
+    protected _removeAutoCompleteSuggestion(): void;
     protected _filterItems(items: NodeListOf<Element>, queryText: string, rawQueryText: string): number;
     protected _scrollItemIntoView(item: HTMLElement): void;
     protected _getSelectedItem(): CDSComboBoxItem | null;
@@ -90,9 +92,14 @@ declare class CDSComboBox extends CDSDropdown {
      */
     itemMatches: (item: CDSComboBoxItem, queryText: string) => boolean;
     /**
-     * Provide custom filtering behavior.
+     * Provide custom filtering behavior. This attribute will be ignored if
+     * `typeahead` is enabled and will default to `true`
      */
     shouldFilterItem: boolean | ShouldFilterItem;
+    /**
+     * **Experimental**: will enable autocomplete and typeahead for the input field.
+     */
+    typeahead: boolean;
     shouldUpdate(changedProperties: any): boolean;
     protected _clearInputWithoutSelecting(focus?: boolean): void;
     updated(changedProperties: any): void;

package/lib/components/dropdown/dropdown.d.ts

@@ -1403,6 +1403,10 @@ declare class CDSDropdown extends CDSDropdown_base {
      * Currently slotted AI decorator nodes (`cds-ai-label`/slug) with listeners attached.
      */
     private _aiDecoratorNodes;
+    /**
+     * Floating UI controller instance for autoalign positioning.
+     */
+    private _floatingController;
     /**
      * Handles interaction on an AI decorator while the menu is open.
      */
@@ -1421,6 +1425,14 @@ declare class CDSDropdown extends CDSDropdown_base {
      * The list box `<div>` node.
      */
     protected _listBoxNode: HTMLDivElement;
+    /**
+     * The menu body element.
+     */
+    protected _menuBodyNode: HTMLDivElement;
+    /**
+     * The trigger button element.
+     */
+    protected _triggerButtonNode: HTMLDivElement;
     /**
      * The `<slot>` element for the helper text in the shadow DOM.
      */
@@ -1553,6 +1565,10 @@ declare class CDSDropdown extends CDSDropdown_base {
      * Specify the direction of the dropdown. Can be either top or bottom.
      */
     direction: DROPDOWN_DIRECTION;
+    /**
+     * Specify whether auto align functionality should be applied
+     */
+    autoalign: boolean;
     /**
      * `true` if this dropdown should be disabled.
      */
@@ -1638,7 +1654,15 @@ declare class CDSDropdown extends CDSDropdown_base {
      */
     get toggleLabel(): string;
     shouldUpdate(changedProperties: any): boolean;
-    updated(_changedProperties: any): void;
+    updated(changedProperties: any): void;
+    /**
+     * Clears Floating UI styles when auto-align is off or the menu closes.
+     */
+    private _resetFloatingStyles;
+    /**
+     * Runs Floating UI placement while auto-align is active.
+     */
+    private _updateAutoAlignPlacement;
     /**
      * Normalizes validation props based on disabled and readOnly states
      */

package/lib/components/fluid-number-input/fluid-number-input-skeleton.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp.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.
+ */
+import CDSNumberInputSkeleton from '../number-input/number-input-skeleton';
+/**
+ * Fluid number input.
+ *
+ * @element cds-fluid-number-input-skeleton
+ */
+declare class CDSFluidNumberInputSkeleton extends CDSNumberInputSkeleton {
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any[];
+}
+export default CDSFluidNumberInputSkeleton;

package/lib/components/fluid-number-input/fluid-number-input.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright IBM Corp.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.
+ */
+import CDSNumberInput from '../number-input/number-input';
+/**
+ * Fluid number input.
+ *
+ * @element cds-fluid-number-input
+ */
+declare class CDSFluidNumberInput extends CDSNumberInput {
+    connectedCallback(): void;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any[];
+}
+export default CDSFluidNumberInput;

package/lib/components/fluid-number-input/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
+import './fluid-number-input';
+import './fluid-number-input-skeleton';

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

@@ -7,6 +7,7 @@
 import { LitElement, PropertyValues } from 'lit';
 import { MENU_ITEM_KIND, MENU_SIZE } from './defs';
 export { MENU_ITEM_KIND, MENU_SIZE };
+export declare const MENU_CLOSE_ROOT_EVENT = "cds-menu-close-root-request";
 declare const CDSmenuItem_base: {
     new (...args: any[]): {
         _handles: Set<import("../../globals/internal/handle").default>;

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

@@ -459,6 +459,7 @@ declare class CDSMenu extends CDSMenu_base {
     static get eventOnOpen(): string;
     updated(changedProperties: any): void;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     firstUpdated(): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;
     _handleKeyDown: (e: KeyboardEvent) => void;
@@ -469,7 +470,9 @@ declare class CDSMenu extends CDSMenu_base {
     _getPosition: (x: number | (number | null | undefined)[]) => number[] | undefined;
     _calculatePosition: () => number[];
     _handleOpen: () => Promise<void>;
-    dispatchCloseEvent: (e: any) => void;
+    dispatchCloseEvent: (e?: Event) => void;
+    private _handleClose;
+    private _handleRootCloseRequest;
     _newContextCreate: () => void;
     _registerMenuItems: () => void;
     _setActiveItems: () => void;

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

@@ -8,7 +8,6 @@ import { LitElement } from 'lit';
 import '../button/index';
 import '../menu/index';
 import { POPOVER_ALIGNMENT } from '../popover/defs';
-import CDSMenu from '../menu/menu';
 import CDSButton from '../button/button';
 import { MENU_BUTTON_KIND, MENU_BUTTON_SIZE } from './defs';
 import { MENU_BACKGROUND_TOKEN } from '../menu/defs';
@@ -368,7 +367,6 @@ declare const CDSMenuButton_base: {
 declare class CDSMenuButton extends CDSMenuButton_base {
     private _menuController;
     _triggerNode: CDSButton;
-    _menuNode: CDSMenu;
     private _open;
     /**
      * Specify whether the MenuButton should be disabled, or not.
@@ -402,9 +400,14 @@ declare class CDSMenuButton extends CDSMenuButton_base {
      */
     tabIndex: number;
     private _handleClick;
+    private _handleMousedown;
     private _handleBlur;
+    private _handleKeydown;
+    private _handleMenuClosed;
     updated(changedProperties: any): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: any;
+    private _closeMenu;
+    private _focusTrigger;
 }
 export default CDSMenuButton;

package/lib/components/notification/callout-notification.d.ts

@@ -23,7 +23,7 @@ declare class CDSCalloutNotification extends CDSActionableNotification {
      *  Specify the notification kind, Defaults to 'info'.
      */
     kind: NOTIFICATION_KIND;
-    protected _renderIcon(): any;
+    protected _renderIcon(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/unsafe-svg").UnsafeSVGDirective> | null | undefined;
     protected _renderText(): import("lit-html").TemplateResult<1>;
     protected _renderButton(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;

package/lib/components/number-input/number-input.d.ts

@@ -93,6 +93,10 @@ declare class CDSNumberInput extends CDSTextInput {
      * Specify if the wheel functionality for the input should be disabled, or not
      */
     disableWheel: boolean;
+    /**
+     * Set to true to use the fluid variant.
+     */
+    isFluid: boolean;
     /**
      * The input box size.
      */

package/lib/components/password-input/password-input.d.ts

@@ -18,6 +18,10 @@ export { INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TOOLTIP_ALIGNMENT, INPUT_TOOLTIP_
  * @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state.
  */
 declare class CDSPasswordInput extends CDSTextInput {
+    /**
+     * The Show/Hide Password tooltip
+     */
+    private _passwordTooltip?;
     /**
      * Handles `oninput` event on the `input`.
      *
@@ -52,6 +56,7 @@ declare class CDSPasswordInput extends CDSTextInput {
      */
     private handleTogglePasswordVisibility;
     render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): Promise<void>;
     /**
      * A selector that will return the slug item.
      *

package/lib/components/text-input/text-input-skeleton.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2019, 2024
+ * Copyright IBM Corp. 2019, 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.

package/lib/components/textarea/textarea-skeleton.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 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.
@@ -11,6 +11,10 @@ import { LitElement } from 'lit';
  * Skeleton of text area.
  */
 declare class CDSTextareaSkeleton extends LitElement {
+    /**
+     * Specify whether the label should be hidden, or not
+     */
+    hideLabel: boolean;
     render(): import("lit-html").TemplateResult<1>;
     static styles: any;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/web-components",
   "description": "Web components for the Carbon Design System",
-  "version": "2.45.0",
+  "version": "2.46.0-rc.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -67,19 +67,18 @@
   },
   "dependencies": {
     "@carbon/icon-helpers": "10.47.0",
-    "@carbon/icons": "^11.72.0",
-    "@carbon/styles": "^1.97.0",
+    "@carbon/icons": "^11.73.0-rc.0",
+    "@carbon/styles": "^1.98.0-rc.0",
     "@floating-ui/dom": "^1.6.3",
     "@ibm/telemetry-js": "^1.10.2",
     "@lit/context": "^1.1.3",
     "flatpickr": "4.6.13",
     "lit": "^3.1.0",
     "lodash-es": "^4.17.21",
-    "storybook-addon-accessibility-checker": "^9.2.0-rc.3",
     "tslib": "^2.6.3"
   },
   "devDependencies": {
-    "@carbon/layout": "^11.45.0",
+    "@carbon/layout": "^11.46.0-rc.0",
     "@carbon/motion": "^11.39.0",
     "@juggle/resize-observer": "^3.4.0",
     "@mordech/vite-lit-loader": "^0.37.0",
@@ -132,5 +131,5 @@
       }
     ]
   },
-  "gitHead": "57fdbc7bfad9349b5c4359c7d621e709cd4daa25"
+  "gitHead": "8263c72357fc43c00e66c9030698f759ef7977ce"
 }

package/scss/components/combo-box/combo-box.scss

@@ -60,7 +60,28 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-combo-box[warn]) {
+  .#{$prefix}--form__helper-text {
+    color: $text-primary;
+  }
+}
+
 :host(#{$prefix}-combo-box[read-only]) {
+  .#{$prefix}--combo-box,
+  .#{$prefix}--combo-box:hover {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--text-input {
+    border-block-end-color: $border-subtle;
+  }
+
+  .#{$prefix}--list-box__menu-icon,
+  .#{$prefix}--list-box__selection {
+    cursor: default;
+  }
+
+  .#{$prefix}--list-box__menu-icon svg,
   .#{$prefix}--list-box__selection svg {
     fill: $icon-disabled;
   }

package/scss/components/fluid-number-input/fluid-number-input.scss

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp.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/components/fluid-number-input/index';
+@use '@carbon/styles/scss/components/fluid-text-input' as *;
+@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/skeleton' as *;
+@use '@carbon/styles/scss/components/number-input/index' as *;
+
+:host(#{$prefix}-fluid-number-input) {
+  @include emit-layout-tokens();
+}
+
+:host(#{$prefix}-fluid-number-input-skeleton) {
+  @extend .#{$prefix}--text-input--fluid__skeleton;
+
+  display: block;
+}

package/scss/components/menu/menu.scss

@@ -17,6 +17,7 @@ $css--plex: true !default;
 
 :host(#{$prefix}-menu) {
   position: fixed;
+  z-index: z('modal');
   --grid-template: 1fr max-content;
   --display-icon-item: none;
   --display-selection-icon: none;
@@ -27,6 +28,7 @@ $css--plex: true !default;
   --display-icon-item: flex;
 }
 .#{$prefix}--menu--with-selectable-items {
+  --grid-template: #{$spacing-05} 1fr max-content;
   --display-selection-icon: flex;
 }
 

package/scss/components/number-input/number-input.scss

@@ -13,6 +13,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/utilities';
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/number-input/index';
+@use '@carbon/styles/scss/components/fluid-number-input' as *;
 @use '@carbon/styles/scss/utilities/ai-gradient' as *;
 @use '@carbon/styles/scss/spacing' as *;
 
@@ -85,3 +86,15 @@ $css--plex: true !default;
 :host(#{$prefix}-number-input[ai-label]) input {
   @include ai-gradient;
 }
+
+:host(#{$prefix}-number-input[invalid][fluid]) {
+  @extend .#{$prefix}--number-input--fluid--invalid;
+}
+
+:host(#{$prefix}-number-input[focused][fluid]) {
+  @extend .#{$prefix}--number-input--fluid--focus;
+}
+
+:host(#{$prefix}-number-input[disabled][fluid]) {
+  @extend .#{$prefix}--number-input--fluid--disabled;
+}

package/scss/components/password-input/password-input.scss

@@ -38,6 +38,27 @@ $css--plex: true !default;
   ::slotted(#{$prefix}-slug:not([revert-active])) {
     transform: translateY(-50%);
   }
+
+  #{$prefix}-tooltip::part(popover-container) {
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--btn--icon-only {
+    border: none;
+    background-color: transparent;
+    block-size: 100%;
+    cursor: pointer;
+    inline-size: 100%;
+
+    &:focus {
+      @include focus-outline('outline');
+    }
+  }
+
+  .#{$prefix}--text-input--password__visibility__toggle svg {
+    pointer-events: none;
+  }
 }
 
 :host(#{$prefix}-password-input[warn]),
@@ -56,20 +77,3 @@ $css--plex: true !default;
     position: relative;
   }
 }
-
-#{$prefix}-tooltip::part(popover-container) {
-  block-size: 100%;
-  inline-size: 100%;
-}
-
-.#{$prefix}--btn--icon-only {
-  border: none;
-  background-color: transparent;
-  block-size: 100%;
-  cursor: pointer;
-  inline-size: 100%;
-
-  &:focus {
-    @include focus-outline('outline');
-  }
-}

package/scss/components/text-input/text-input.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2024
+// Copyright IBM Corp. 2019, 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.
@@ -15,13 +15,16 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/layout' as *;
 @use '@carbon/styles/scss/utilities/ai-gradient' as *;
 
-:host(#{$prefix}-text-input) {
+:host(#{$prefix}-text-input),
+:host(#{$prefix}-text-input-skeleton) {
   @include emit-layout-tokens();
 
   // the base text-input class has a 100% so we need to propagate it up to the host element
   inline-size: 100%;
   outline: none;
+}
 
+:host(#{$prefix}-text-input) {
   ::slotted(#{$prefix}-ai-label),
   ::slotted(#{$prefix}-slug) {
     position: absolute;

package/telemetry.yml

@@ -17,6 +17,7 @@ collect:
         - align
         - alignment
         - alignment-axis-offset
+        - allow-empty
         - aria-current
         - aria-label
         - aria-labelledby
@@ -50,12 +51,14 @@ collect:
         - counter-mode
         - danger-description
         - data-table
+        - decrement-button-assistive-text
         - default-checked
         - default-open
         - default-value
         - defaultOpen
         - description
         - direction
+        - disable-wheel
         - disabled
         - download
         - dropShadow
@@ -81,6 +84,7 @@ collect:
         - hide-close-button
         - hide-divider
         - hide-label
+        - hide-steppers
         - hidePasswordLabel
         - highContrast
         - highlighted
@@ -89,6 +93,7 @@ collect:
         - icon
         - icon-description
         - id
+        - increment-button-assistive-text
         - indeterminate
         - index
         - inline
@@ -132,6 +137,7 @@ collect:
         - oncds-header-menu-button-toggled
         - oncds-notification-beingclosed
         - oncds-notification-closed
+        - oncds-number-input
         - oncds-radio-button-changed
         - oncds-search-input
         - oncds-select-selected
@@ -260,6 +266,7 @@ collect:
         - oncds-combo-box-selected
         - oncds-combo-box-toggled
         - should-filter-item
+        - typeahead
         # cds-copy-button
         - autoAlign
         # cds-date-picker
@@ -364,13 +371,6 @@ collect:
         - selection-feedback
         # cds-multi-select-item
         - is-select-all
-        # cds-number-input
-        - allow-empty
-        - decrement-button-assistive-text
-        - disable-wheel
-        - hide-steppers
-        - increment-button-assistive-text
-        - oncds-number-input
         # cds-operational-tag
         - oncds-operational-tag-beforeselected
         - oncds-operational-tag-selected

package/dist/16-BFl-qNrl.js

@@ -1,28 +0,0 @@
-/**
- * Copyright IBM Corp. 2019, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/**
- * @license
- * 
- * This bundle contains the following third-party dependencies:
- * 
- * Also refer to the following links for the license of other third-party dependencies:
- * 
- * https://www.npmjs.com/package/tslib
- * https://www.npmjs.com/package/lit
- * https://www.npmjs.com/package/@lit/context
- * https://www.npmjs.com/package/lodash-es
- * https://www.npmjs.com/package/@floating-ui/dom
- * https://www.npmjs.com/package/@carbon/icon-helpers
- * https://www.npmjs.com/package/flatpickr
- * https://www.npmjs.com/package/lit-element
- * https://www.npmjs.com/package/lit-html
- * https://www.npmjs.com/package/@lit/reactive-element
- * https://www.npmjs.com/package/@floating-ui/core
- * https://www.npmjs.com/package/@floating-ui/utils
- */
-
-var t={elem:"svg",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"currentColor",width:16,height:16},content:[{elem:"path",attrs:{d:"M14 21.414L9 16.413 10.413 15 14 18.586 21.585 11 23 12.415 14 21.414z"}},{elem:"path",attrs:{d:"M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"}}],name:"checkmark--outline",size:16},e={elem:"svg",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"currentColor",width:16,height:16},content:[{elem:"path",attrs:{d:"M23.7642 6.8593l1.2851-1.5315A13.976 13.976 0 0020.8672 2.887l-.6836 1.8776A11.9729 11.9729 0 0123.7642 6.8593zM27.81 14l1.9677-.4128A13.8888 13.8888 0 0028.14 9.0457L26.4087 10A12.52 12.52 0 0127.81 14zM20.1836 27.2354l.6836 1.8776a13.976 13.976 0 004.1821-2.4408l-1.2851-1.5315A11.9729 11.9729 0 0120.1836 27.2354zM26.4087 22L28.14 23a14.14 14.14 0 001.6382-4.5872L27.81 18.0659A12.1519 12.1519 0 0126.4087 22zM16 30V2a14 14 0 000 28z"}}],name:"incomplete",size:16},l={elem:"svg",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"currentColor",width:16,height:16},content:[{elem:"path",attrs:{d:"M7.7 4.7a14.7 14.7 0 00-3 3.1L6.3 9A13.26 13.26 0 018.9 6.3zM4.6 12.3l-1.9-.6A12.51 12.51 0 002 16H4A11.48 11.48 0 014.6 12.3zM2.7 20.4a14.4 14.4 0 002 3.9l1.6-1.2a12.89 12.89 0 01-1.7-3.3zM7.8 27.3a14.4 14.4 0 003.9 2l.6-1.9A12.89 12.89 0 019 25.7zM11.7 2.7l.6 1.9A11.48 11.48 0 0116 4V2A12.51 12.51 0 0011.7 2.7zM24.2 27.3a15.18 15.18 0 003.1-3.1L25.7 23A11.53 11.53 0 0123 25.7zM27.4 19.7l1.9.6A15.47 15.47 0 0030 16H28A11.48 11.48 0 0127.4 19.7zM29.2 11.6a14.4 14.4 0 00-2-3.9L25.6 8.9a12.89 12.89 0 011.7 3.3zM24.1 4.6a14.4 14.4 0 00-3.9-2l-.6 1.9a12.89 12.89 0 013.3 1.7zM20.3 29.3l-.6-1.9A11.48 11.48 0 0116 28v2A21.42 21.42 0 0020.3 29.3z"}}],name:"circle-dash",size:16};export{e as _,l as a,t as b};