@carbon/web-components 2.45.0 → 2.46.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/contained-list/contained-list-description.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2022, 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 { LitElement } from 'lit';
+/**
+ * Contained list description text.
+ *
+ * @element cds-contained-list-description
+ * @slot - The description text content
+ */
+declare class CDSContainedListDescription extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSContainedListDescription;

package/lib/components/contained-list/contained-list-item.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright IBM Corp. 2022, 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 { LitElement } from 'lit';
+/**
+ * Contained list item.
+ *
+ * @element cds-contained-list-item
+ * @slot - The content of the list item
+ * @slot icon - The icon slot for rendering an icon
+ * @slot action - The action slot for interactive elements
+ * @fires cds-contained-list-item-click - Fires when clickable item is clicked
+ */
+declare class CDSContainedListItem extends LitElement {
+    /**
+     * Whether this item is clickable
+     */
+    clickable: boolean;
+    /**
+     * Whether this item is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Handles slot change for icon
+     */
+    private _handleIconSlotChange;
+    private _hasIcon;
+    /**
+     * Handles click event
+     */
+    private _handleClick;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * The name of the custom event fired when a clickable item is clicked
+     */
+    static get eventClick(): string;
+    static styles: any;
+}
+export default CDSContainedListItem;

package/lib/components/contained-list/contained-list.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright IBM Corp. 2022, 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 { LitElement } from 'lit';
+export type Variants = 'on-page' | 'disclosed';
+/**
+ * Contained list.
+ *
+ * @element cds-contained-list
+ * @slot - The list items (cds-contained-list-item elements)
+ * @slot action - The action slot for interactive elements in header
+ * @slot label - The label text
+ */
+declare class CDSContainedList extends LitElement {
+    /**
+     * Specify whether the dividing lines in between list items should be inset.
+     */
+    isInset: boolean;
+    /**
+     * The kind of ContainedList you want to display
+     */
+    kind: Variants;
+    /**
+     * A label describing the contained list.
+     */
+    label: string;
+    /**
+     * Specify the size of the contained list.
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSContainedList;

package/lib/components/contained-list/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2022, 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 './contained-list';
+import './contained-list-item';
+import './contained-list-description';

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/slider/slider.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { LitElement } from 'lit';
+import '../tooltip/index';
 declare const CDSSlider_base: {
     new (...args: any[]): {
         _handles: Set<import("../../globals/internal/handle").default>;
@@ -1105,6 +1106,7 @@ declare class CDSSlider extends CDSSlider_base {
      * Handles `click` event on the `<label>` to focus on the thumb.
      */
     _handleClickLabel(): void;
+    private _setThumbTooltipOpen;
     _handleFormdata(event: FormDataEvent): void;
     /**
      * Handles `keydown` event on the thumb to increase/decrease the value.
@@ -1171,6 +1173,11 @@ declare class CDSSlider extends CDSSlider_base {
      * Specify whether you want the underlying label to be visually hidden
      */
     hideLabel: boolean;
+    /**
+     * The callback to format the label associated with the minimum/maximum value
+     * and the value tooltip when hideTextInput is true.
+     */
+    formatLabel: (value: number, label: string | undefined) => string;
     /**
      * The formatter for the text for maximum value.
      * Should be changed upon the locale the UI is rendered with.

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",
   "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",
+    "@carbon/styles": "^1.98.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",
     "@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": "ce7846aab8a3a1afe9b03d2d07d267af6cdb6ac2"
 }

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/contained-list/contained-list.scss

@@ -0,0 +1,48 @@
+//
+// 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/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/components/contained-list';
+@use '@carbon/styles/scss/components/form' as *;
+:host(#{$prefix}-contained-list) {
+  @include emit-layout-tokens();
+
+  // CSS custom properties for slotted search component
+  --cds-search-background: #{$background};
+  --cds-search-border-bottom: 1px solid #{$border-subtle};
+}
+
+:host(#{$prefix}-contained-list-item) {
+  display: block;
+}
+:host(#{$prefix}-contained-list-description) {
+  @include type-style('label-01');
+
+  display: inline-block;
+  margin: 0;
+  color: $text-secondary;
+  font-weight: $input-label-weight;
+  line-height: 1rem;
+  vertical-align: baseline;
+}
+
+:host(#{$prefix}-contained-list-item:not(:last-of-type)) {
+  .#{$prefix}--contained-list-item::before {
+    position: absolute;
+    background-color: $border-subtle;
+    block-size: 1px;
+    content: '';
+    inset-block-end: 0;
+    inset-inline: 0;
+  }
+}

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;
 }