@momentum-design/components 0.133.19 → 0.133.21

package/dist/components/searchfield/searchfield.component.d.ts

@@ -1,6 +1,6 @@
 import { CSSResult, PropertyValueMap } from 'lit';
 import Input from '../input/input.component';
-declare const Searchfield_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyDownHandledMixin").KeyDownHandledMixinInterface> & typeof Input;
+declare const Searchfield_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ControlTypeMixin").ControlTypeMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyDownHandledMixin").KeyDownHandledMixinInterface> & typeof Input;
 /**
  * `mdc-searchfield` component is used as an input field for search functionality.
  *
@@ -11,6 +11,10 @@ declare const Searchfield_base: import("../../utils/mixins/index.types").Constru
  *
  * This component is built by extending the `mdc-input` component.
  *
+ * Searchfield supports controlled vs uncontrolled behavior for chip filters, which can be set via the `control-type` attribute:
+ * - In **uncontrolled** mode (default), when a chip is removed via the UI, it is automatically removed from the DOM and a `chipRemove` event is dispatched with the removed chip in the event detail. The consumer can listen to the `chipRemove` event but does not need to do anything to remove the chip from the DOM.
+ * - In **controlled** mode (`control-type="controlled"`), when a chip is removed via the UI, it is NOT removed from the DOM, but a `chipRemove` event is still dispatched with the "removed" chip in the event detail. The consumer must listen to the `chipRemove` event and handle removing the chip from the DOM themselves (e.g., by updating their state that controls which chips are rendered).
+ *
  * **Accessibility:**
  *
  * NOTE: this component should not be used in combination with a Popover or Listbox component.
@@ -25,6 +29,7 @@ declare const Searchfield_base: import("../../utils/mixins/index.types").Constru
  * @event focus - (React: onFocus) This event is dispatched when the input receives focus.
  * @event blur - (React: onBlur) This event is dispatched when the input loses focus.
  * @event clear - (React: onClear) This event is dispatched when the input text is cleared.
+ * @event chipRemove - (React: onChipRemove) This event is dispatched when a chip filter is removed. The removed chip element is available in event.detail.chip. In `uncontrolled` mode (default) the chip is removed from the DOM automatically; in `controlled` mode only the event is fired and the consumer is responsible for removing the chip.
  *
  * @slot filters - Slot for chip filters rendered inline with the input text
  * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
@@ -105,6 +110,12 @@ declare class Searchfield extends Searchfield_base {
      * @param event - Keyboard event
      */
     handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Overrides the focus method to allow programmatically focusing the input field.
+     * Delegate focus didn't work as expect since we have a scrollable container that contains both chips and the input, and we want to focus the input when the component itself is focused. We need to override the focus method to achieve this behavior.
+     * @param options - Focus options
+     */
+    focus(options?: FocusOptions): void;
     disconnectedCallback(): void;
     connectedCallback(): void;
     /**
@@ -121,6 +132,12 @@ declare class Searchfield extends Searchfield_base {
      * @override
      */
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    /**
+     * Removes a chip element from the DOM and dispatches the 'chipRemove' event with the chip detail.
+     * In controlled mode, the chip is not removed from the DOM, only the event is dispatched.
+     * @param chip - The chip element to be removed
+     */
+    private removeChip;
     clearInputText(): void;
     /**
      * Removes keydown and focus event listeners from the focus target of a chip.

package/dist/components/searchfield/searchfield.component.js

@@ -14,6 +14,7 @@ import { classMap } from 'lit-html/directives/class-map.js';
 import Input from '../input/input.component';
 import { ACTIONS } from '../../utils/mixins/KeyToActionMixin';
 import { KeyDownHandledMixin } from '../../utils/mixins/KeyDownHandledMixin';
+import { ControlTypeMixin } from '../../utils/mixins/ControlTypeMixin';
 import { TAG_NAME as INPUT_CHIP_TAG } from '../inputchip/inputchip.constants';
 import styles from './searchfield.styles';
 import { CHIP_SELECTOR, DEFAULTS } from './searchfield.constants';
@@ -27,6 +28,10 @@ import { CHIP_SELECTOR, DEFAULTS } from './searchfield.constants';
  *
  * This component is built by extending the `mdc-input` component.
  *
+ * Searchfield supports controlled vs uncontrolled behavior for chip filters, which can be set via the `control-type` attribute:
+ * - In **uncontrolled** mode (default), when a chip is removed via the UI, it is automatically removed from the DOM and a `chipRemove` event is dispatched with the removed chip in the event detail. The consumer can listen to the `chipRemove` event but does not need to do anything to remove the chip from the DOM.
+ * - In **controlled** mode (`control-type="controlled"`), when a chip is removed via the UI, it is NOT removed from the DOM, but a `chipRemove` event is still dispatched with the "removed" chip in the event detail. The consumer must listen to the `chipRemove` event and handle removing the chip from the DOM themselves (e.g., by updating their state that controls which chips are rendered).
+ *
  * **Accessibility:**
  *
  * NOTE: this component should not be used in combination with a Popover or Listbox component.
@@ -41,6 +46,7 @@ import { CHIP_SELECTOR, DEFAULTS } from './searchfield.constants';
  * @event focus - (React: onFocus) This event is dispatched when the input receives focus.
  * @event blur - (React: onBlur) This event is dispatched when the input loses focus.
  * @event clear - (React: onClear) This event is dispatched when the input text is cleared.
+ * @event chipRemove - (React: onChipRemove) This event is dispatched when a chip filter is removed. The removed chip element is available in event.detail.chip. In `uncontrolled` mode (default) the chip is removed from the DOM automatically; in `controlled` mode only the event is fired and the consumer is responsible for removing the chip.
  *
  * @slot filters - Slot for chip filters rendered inline with the input text
  * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
@@ -84,7 +90,7 @@ import { CHIP_SELECTOR, DEFAULTS } from './searchfield.constants';
  * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.
  * @csspart searchfield-container - The inline flow container for chips and the input field.
  */
-class Searchfield extends KeyDownHandledMixin(Input) {
+class Searchfield extends ControlTypeMixin(KeyDownHandledMixin(Input)) {
     constructor() {
         super(...arguments);
         /**
@@ -228,6 +234,15 @@ class Searchfield extends KeyDownHandledMixin(Input) {
             this.keyDownEventHandled();
         }
     }
+    /**
+     * Overrides the focus method to allow programmatically focusing the input field.
+     * Delegate focus didn't work as expect since we have a scrollable container that contains both chips and the input, and we want to focus the input when the component itself is focused. We need to override the focus method to achieve this behavior.
+     * @param options - Focus options
+     */
+    focus(options) {
+        var _a;
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(options);
+    }
     disconnectedCallback() {
         var _a;
         super.disconnectedCallback();
@@ -255,7 +270,7 @@ class Searchfield extends KeyDownHandledMixin(Input) {
         if (this.chips) {
             this.chips.forEach(element => {
                 if (!element.matches(CHIP_SELECTOR)) {
-                    element.remove();
+                    this.removeChip(element);
                     return;
                 }
                 // Remove chips from tab order; they are navigated via arrow keys from the input
@@ -303,14 +318,26 @@ class Searchfield extends KeyDownHandledMixin(Input) {
         };
         super.firstUpdated(_changedProperties);
     }
+    /**
+     * Removes a chip element from the DOM and dispatches the 'chipRemove' event with the chip detail.
+     * In controlled mode, the chip is not removed from the DOM, only the event is dispatched.
+     * @param chip - The chip element to be removed
+     */
+    removeChip(chip) {
+        this.dispatchEvent(new CustomEvent('chipRemove', { detail: { chip }, bubbles: true, composed: true }));
+        if (this.controlType !== 'controlled') {
+            chip.remove();
+        }
+    }
     clearInputText() {
         var _a;
         super.clearInputText();
-        // Directly remove all chips from DOM since not all chip types support the 'remove' event
+        // Directly remove all chips from DOM since not all chip types support the 'removed' event
+        // In uncontrolled mode, removeChip handles DOM removal.
+        // In controlled mode, only the 'chipRemove' event is fired per chip.
         const chipsToRemove = [...((_a = this.chips) !== null && _a !== void 0 ? _a : [])];
         chipsToRemove.forEach(element => {
-            this.removeChipListeners(element);
-            element.remove();
+            this.removeChip(element);
         });
     }
     /**
@@ -366,7 +393,7 @@ class Searchfield extends KeyDownHandledMixin(Input) {
             return;
         const chip = this.chips[index];
         this.removeChipListeners(chip);
-        chip.remove();
+        this.removeChip(chip);
         // Wait for DOM/slot update after removal
         requestAnimationFrame(() => {
             if (this.chips && this.chips.length > 0) {

package/dist/components/searchfield/searchfield.types.d.ts

@@ -1,2 +1,12 @@
-import type { Events } from '../input/input.types';
+import { TypedCustomEvent } from '../../utils/types';
+import AlertChip from '../alertchip';
+import Chip from '../chip';
+import type { Events as InputEvents } from '../input/input.types';
+import InputChip from '../inputchip';
+import Searchfield from './searchfield.component';
+type Events = InputEvents & {
+    onChipRemoveEvent: TypedCustomEvent<Searchfield, {
+        chip: Chip | InputChip | AlertChip;
+    }>;
+};
 export type { Events };

package/dist/components/searchpopover/searchpopover.component.d.ts

@@ -14,6 +14,10 @@ import type { Placement } from './searchpopover.types';
  *
  * This component is built by extending the `mdc-searchfield` component & rendering the mdc-popover component inside.
  *
+ * Searchpopover supports controlled vs uncontrolled behavior for chip filters, which can be set via the `control-type` attribute:
+ * - In **uncontrolled** mode (default), when a chip is removed via the UI, it is automatically removed from the DOM and a `chipRemove` event is dispatched with the removed chip in the event detail. The consumer can listen to the `chipRemove` event but does not need to do anything to remove the chip from the DOM.
+ * - In **controlled** mode (`control-type="controlled"`), when a chip is removed via the UI, it is NOT removed from the DOM, but a `chipRemove` event is still dispatched with the "removed" chip in the event detail. The consumer must listen to the `chipRemove` event and handle removing the chip from the DOM themselves (e.g., by updating their state that controls which chips are rendered).
+ *
  * @tagname mdc-searchpopover
  *
  * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).
@@ -21,6 +25,9 @@ import type { Placement } from './searchpopover.types';
  * @event focus - (React: onFocus) This event is dispatched when the input receives focus.
  * @event blur - (React: onBlur) This event is dispatched when the input loses focus.
  * @event clear - (React: onClear) This event is dispatched when the input text is cleared.
+ * @event chipRemove - (React: onChipRemove) This event is dispatched when a chip filter is removed. The removed chip element is available in event.detail.chip.
+ * In **controlled** mode (`control-type="controlled"`), the chip is NOT removed from the DOM automatically — the consumer is responsible for removing it.
+ * In **uncontrolled** mode (default), the chip is removed from the DOM automatically.
  * @event shown - (React: onShown) This event is dispatched when the popover is shown
  * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden
  *

package/dist/components/searchpopover/searchpopover.component.js

@@ -31,6 +31,10 @@ import { DEFAULTS, TRIGGER_ID, POPOVER_ID } from './searchpopover.constants';
  *
  * This component is built by extending the `mdc-searchfield` component & rendering the mdc-popover component inside.
  *
+ * Searchpopover supports controlled vs uncontrolled behavior for chip filters, which can be set via the `control-type` attribute:
+ * - In **uncontrolled** mode (default), when a chip is removed via the UI, it is automatically removed from the DOM and a `chipRemove` event is dispatched with the removed chip in the event detail. The consumer can listen to the `chipRemove` event but does not need to do anything to remove the chip from the DOM.
+ * - In **controlled** mode (`control-type="controlled"`), when a chip is removed via the UI, it is NOT removed from the DOM, but a `chipRemove` event is still dispatched with the "removed" chip in the event detail. The consumer must listen to the `chipRemove` event and handle removing the chip from the DOM themselves (e.g., by updating their state that controls which chips are rendered).
+ *
  * @tagname mdc-searchpopover
  *
  * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).
@@ -38,6 +42,9 @@ import { DEFAULTS, TRIGGER_ID, POPOVER_ID } from './searchpopover.constants';
  * @event focus - (React: onFocus) This event is dispatched when the input receives focus.
  * @event blur - (React: onBlur) This event is dispatched when the input loses focus.
  * @event clear - (React: onClear) This event is dispatched when the input text is cleared.
+ * @event chipRemove - (React: onChipRemove) This event is dispatched when a chip filter is removed. The removed chip element is available in event.detail.chip.
+ * In **controlled** mode (`control-type="controlled"`), the chip is NOT removed from the DOM automatically — the consumer is responsible for removing it.
+ * In **uncontrolled** mode (default), the chip is removed from the DOM automatically.
  * @event shown - (React: onShown) This event is dispatched when the popover is shown
  * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden
  *

package/dist/components/searchpopover/searchpopover.types.d.ts

@@ -1,7 +1,7 @@
-import type { Events as InputEvents } from '../input/input.types';
+import type { Events as SearchFieldTypes } from '../searchfield/searchfield.types';
 import type { PopoverPlacement, PopoverShownEvent, PopoverHiddenEvent } from '../popover/popover.types';
 type Placement = Extract<PopoverPlacement, 'bottom-start' | 'top-start'>;
-type Events = InputEvents & {
+type Events = SearchFieldTypes & {
     onShownEvent: PopoverShownEvent;
     onHiddenEvent: PopoverHiddenEvent;
 };

package/dist/custom-elements.json

@@ -173,8 +173,8 @@
               "attribute": "disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "AccordionButton",
-                "module": "components/accordionbutton/accordionbutton.component.js"
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
             },
             {
@@ -493,8 +493,8 @@
               "default": "undefined",
               "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "AccordionButton",
-                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
             },
             {
@@ -38255,7 +38255,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-searchfield` component is used as an input field for search functionality.\n\nIt supports any interactable Chip component as filters. (`mdc-inputchip`, `mdc-alertchip`, `mdc-chip`)\nChips are rendered inline with the search input text, behaving like single characters.\nUsers can traverse the cursor between chips and text using arrow keys,\nand remove a chip by pressing Backspace when the cursor is adjacent to it.\n\nThis component is built by extending the `mdc-input` component.\n\n**Accessibility:**\n\nNOTE: this component should not be used in combination with a Popover or Listbox component.\nSearch results should be shown permanently on the page if using this component.\n\nFor a search field that opens a Popover, use the `mdc-searchpopover` widget instead.",
+          "description": "`mdc-searchfield` component is used as an input field for search functionality.\n\nIt supports any interactable Chip component as filters. (`mdc-inputchip`, `mdc-alertchip`, `mdc-chip`)\nChips are rendered inline with the search input text, behaving like single characters.\nUsers can traverse the cursor between chips and text using arrow keys,\nand remove a chip by pressing Backspace when the cursor is adjacent to it.\n\nThis component is built by extending the `mdc-input` component.\n\nSearchfield supports controlled vs uncontrolled behavior for chip filters, which can be set via the `control-type` attribute:\n- In **uncontrolled** mode (default), when a chip is removed via the UI, it is automatically removed from the DOM and a `chipRemove` event is dispatched with the removed chip in the event detail. The consumer can listen to the `chipRemove` event but does not need to do anything to remove the chip from the DOM.\n- In **controlled** mode (`control-type=\"controlled\"`), when a chip is removed via the UI, it is NOT removed from the DOM, but a `chipRemove` event is still dispatched with the \"removed\" chip in the event detail. The consumer must listen to the `chipRemove` event and handle removing the chip from the DOM themselves (e.g., by updating their state that controls which chips are rendered).\n\n**Accessibility:**\n\nNOTE: this component should not be used in combination with a Popover or Listbox component.\nSearch results should be shown permanently on the page if using this component.\n\nFor a search field that opens a Popover, use the `mdc-searchpopover` widget instead.",
           "name": "Searchfield",
           "cssProperties": [
             {
@@ -38663,6 +38663,32 @@
                 "module": "components/input/input.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "controlType",
+              "type": {
+                "text": "ControlType | undefined"
+              },
+              "privacy": "public",
+              "description": "Indicates whether the component is controlled or uncontrolled.\n- 'controlled' it will not handle any interaction itself, e.g. toggling a checkbox.\n- 'uncontrolled' it will handle interactions\n- undefined it will get the value from controltypeprovider, or default to 'uncontrolled'",
+              "default": "undefined",
+              "attribute": "control-type",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ControlTypeMixin",
+                "module": "utils/mixins/ControlTypeMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "controlTypeProviderContext",
+              "privacy": "private",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "ControlTypeMixin",
+                "module": "utils/mixins/ControlTypeMixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "dataAriaDescribedby",
@@ -38721,6 +38747,26 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "Focus options"
+                }
+              ],
+              "description": "Overrides the focus method to allow programmatically focusing the input field.\nDelegate focus didn't work as expect since we have a scrollable container that contains both chips and the input, and we want to focus the input when the component itself is focused. We need to override the focus method to achieve this behavior."
+            },
             {
               "kind": "field",
               "name": "handleFilterContainerClick"
@@ -38923,6 +38969,21 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "removeChip",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "chip",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The chip element to be removed"
+                }
+              ],
+              "description": "Removes a chip element from the DOM and dispatches the 'chipRemove' event with the chip detail.\nIn controlled mode, the chip is not removed from the DOM, only the event is dispatched."
+            },
             {
               "kind": "method",
               "name": "renderHelperText",
@@ -39283,6 +39344,14 @@
             }
           ],
           "events": [
+            {
+              "name": "chipRemove",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "(React: onChipRemove) This event is dispatched when a chip filter is removed. The removed chip element is available in event.detail.chip. In `uncontrolled` mode (default) the chip is removed from the DOM automatically; in `controlled` mode only the event is fired and the consumer is responsible for removing the chip.",
+              "reactName": "onChipRemove"
+            },
             {
               "description": "(React: onInput) This event is dispatched when the value of the input field changes (every press).",
               "name": "input",
@@ -39342,6 +39411,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "ControlTypeMixin",
+              "module": "/src/utils/mixins/ControlTypeMixin"
+            },
             {
               "name": "KeyDownHandledMixin",
               "module": "/src/utils/mixins/KeyDownHandledMixin"
@@ -39352,9 +39425,22 @@
             "module": "/src/components/input/input.component"
           },
           "tagName": "mdc-searchfield",
-          "jsDoc": "/**\n * `mdc-searchfield` component is used as an input field for search functionality.\n *\n * It supports any interactable Chip component as filters. (`mdc-inputchip`, `mdc-alertchip`, `mdc-chip`)\n * Chips are rendered inline with the search input text, behaving like single characters.\n * Users can traverse the cursor between chips and text using arrow keys,\n * and remove a chip by pressing Backspace when the cursor is adjacent to it.\n *\n * This component is built by extending the `mdc-input` component.\n *\n * **Accessibility:**\n *\n * NOTE: this component should not be used in combination with a Popover or Listbox component.\n * Search results should be shown permanently on the page if using this component.\n *\n * For a search field that opens a Popover, use the `mdc-searchpopover` widget instead.\n *\n * @tagname mdc-searchfield\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n *\n * @slot filters - Slot for chip filters rendered inline with the input text\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart leading-icon - The leading icon element that is displayed before the input field.\n * @csspart prefix-text - The prefix text element that is displayed before the input field.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n * @csspart searchfield-container - The inline flow container for chips and the input field.\n */",
+          "jsDoc": "/**\n * `mdc-searchfield` component is used as an input field for search functionality.\n *\n * It supports any interactable Chip component as filters. (`mdc-inputchip`, `mdc-alertchip`, `mdc-chip`)\n * Chips are rendered inline with the search input text, behaving like single characters.\n * Users can traverse the cursor between chips and text using arrow keys,\n * and remove a chip by pressing Backspace when the cursor is adjacent to it.\n *\n * This component is built by extending the `mdc-input` component.\n *\n * Searchfield supports controlled vs uncontrolled behavior for chip filters, which can be set via the `control-type` attribute:\n * - In **uncontrolled** mode (default), when a chip is removed via the UI, it is automatically removed from the DOM and a `chipRemove` event is dispatched with the removed chip in the event detail. The consumer can listen to the `chipRemove` event but does not need to do anything to remove the chip from the DOM.\n * - In **controlled** mode (`control-type=\"controlled\"`), when a chip is removed via the UI, it is NOT removed from the DOM, but a `chipRemove` event is still dispatched with the \"removed\" chip in the event detail. The consumer must listen to the `chipRemove` event and handle removing the chip from the DOM themselves (e.g., by updating their state that controls which chips are rendered).\n *\n * **Accessibility:**\n *\n * NOTE: this component should not be used in combination with a Popover or Listbox component.\n * Search results should be shown permanently on the page if using this component.\n *\n * For a search field that opens a Popover, use the `mdc-searchpopover` widget instead.\n *\n * @tagname mdc-searchfield\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n * @event chipRemove - (React: onChipRemove) This event is dispatched when a chip filter is removed. The removed chip element is available in event.detail.chip. In `uncontrolled` mode (default) the chip is removed from the DOM automatically; in `controlled` mode only the event is fired and the consumer is responsible for removing the chip.\n *\n * @slot filters - Slot for chip filters rendered inline with the input text\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart leading-icon - The leading icon element that is displayed before the input field.\n * @csspart prefix-text - The prefix text element that is displayed before the input field.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n * @csspart searchfield-container - The inline flow container for chips and the input field.\n */",
           "customElement": true,
           "attributes": [
+            {
+              "name": "control-type",
+              "type": {
+                "text": "ControlType | undefined"
+              },
+              "description": "Indicates whether the component is controlled or uncontrolled.\n- 'controlled' it will not handle any interaction itself, e.g. toggling a checkbox.\n- 'uncontrolled' it will handle interactions\n- undefined it will get the value from controltypeprovider, or default to 'uncontrolled'",
+              "default": "undefined",
+              "fieldName": "controlType",
+              "inheritedFrom": {
+                "name": "ControlTypeMixin",
+                "module": "src/utils/mixins/ControlTypeMixin.ts"
+              }
+            },
             {
               "name": "auto-focus-on-mount",
               "type": {
@@ -39753,7 +39839,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-searchpopover` widget is a combination of the Searchfield and Popover components, connected to ensure\nproper accessibility. This component should be used when search results or suggestions need to be displayed\nin a popover below the search input field, where the search results hold individual actions like navigating to a\na different url etc.\n\n- Don't use this when search results are displayed inline on the page -\\> use Searchfield component instead.\n- Don't use this when a list of options is filtered based on the search input -\\> use Combobox component instead.\n\nIt supports any Chip component as filters. (`mdc-inputchip`, `mdc-alertchip`, `mdc-chip`)\n\nThis component is built by extending the `mdc-searchfield` component & rendering the mdc-popover component inside.",
+          "description": "`mdc-searchpopover` widget is a combination of the Searchfield and Popover components, connected to ensure\nproper accessibility. This component should be used when search results or suggestions need to be displayed\nin a popover below the search input field, where the search results hold individual actions like navigating to a\na different url etc.\n\n- Don't use this when search results are displayed inline on the page -\\> use Searchfield component instead.\n- Don't use this when a list of options is filtered based on the search input -\\> use Combobox component instead.\n\nIt supports any Chip component as filters. (`mdc-inputchip`, `mdc-alertchip`, `mdc-chip`)\n\nThis component is built by extending the `mdc-searchfield` component & rendering the mdc-popover component inside.\n\nSearchpopover supports controlled vs uncontrolled behavior for chip filters, which can be set via the `control-type` attribute:\n- In **uncontrolled** mode (default), when a chip is removed via the UI, it is automatically removed from the DOM and a `chipRemove` event is dispatched with the removed chip in the event detail. The consumer can listen to the `chipRemove` event but does not need to do anything to remove the chip from the DOM.\n- In **controlled** mode (`control-type=\"controlled\"`), when a chip is removed via the UI, it is NOT removed from the DOM, but a `chipRemove` event is still dispatched with the \"removed\" chip in the event detail. The consumer must listen to the `chipRemove` event and handle removing the chip from the DOM themselves (e.g., by updating their state that controls which chips are rendered).",
           "name": "Searchpopover",
           "cssProperties": [
             {
@@ -40193,6 +40279,32 @@
                 "module": "components/input/input.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "controlType",
+              "type": {
+                "text": "ControlType | undefined"
+              },
+              "privacy": "public",
+              "description": "Indicates whether the component is controlled or uncontrolled.\n- 'controlled' it will not handle any interaction itself, e.g. toggling a checkbox.\n- 'uncontrolled' it will handle interactions\n- undefined it will get the value from controltypeprovider, or default to 'uncontrolled'",
+              "default": "undefined",
+              "attribute": "control-type",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ControlTypeMixin",
+                "module": "utils/mixins/ControlTypeMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "controlTypeProviderContext",
+              "privacy": "private",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "ControlTypeMixin",
+                "module": "utils/mixins/ControlTypeMixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "dataAriaDescribedby",
@@ -40262,6 +40374,30 @@
               "attribute": "display-popover",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "Focus options"
+                }
+              ],
+              "description": "Overrides the focus method to allow programmatically focusing the input field.\nDelegate focus didn't work as expect since we have a scrollable container that contains both chips and the input, and we want to focus the input when the component itself is focused. We need to override the focus method to achieve this behavior.",
+              "inheritedFrom": {
+                "name": "Searchfield",
+                "module": "components/searchfield/searchfield.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "handleFilterContainerClick",
@@ -40500,6 +40636,25 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "removeChip",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "chip",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The chip element to be removed"
+                }
+              ],
+              "description": "Removes a chip element from the DOM and dispatches the 'chipRemove' event with the chip detail.\nIn controlled mode, the chip is not removed from the DOM, only the event is dispatched.",
+              "inheritedFrom": {
+                "name": "Searchfield",
+                "module": "components/searchfield/searchfield.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "renderHelperText",
@@ -40908,6 +41063,18 @@
                 "module": "src/components/input/input.component.ts"
               }
             },
+            {
+              "name": "chipRemove",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "(React: onChipRemove) This event is dispatched when a chip filter is removed. The removed chip element is available in event.detail.chip. In **controlled** mode (`control-type=\"controlled\"`), the chip is NOT removed from the DOM automatically — the consumer is responsible for removing it. In **uncontrolled** mode (default), the chip is removed from the DOM automatically.",
+              "reactName": "onChipRemove",
+              "inheritedFrom": {
+                "name": "Searchfield",
+                "module": "src/components/searchfield/searchfield.component.ts"
+              }
+            },
             {
               "description": "(React: onShown) This event is dispatched when the popover is shown",
               "name": "shown",
@@ -40964,6 +41131,19 @@
               "description": "The aria-label for the popover within Searchpopover.\nUse to provide an accessible name for the popover i.e. \"Search results\".",
               "fieldName": "popoverAriaLabel"
             },
+            {
+              "name": "control-type",
+              "type": {
+                "text": "ControlType | undefined"
+              },
+              "description": "Indicates whether the component is controlled or uncontrolled.\n- 'controlled' it will not handle any interaction itself, e.g. toggling a checkbox.\n- 'uncontrolled' it will handle interactions\n- undefined it will get the value from controltypeprovider, or default to 'uncontrolled'",
+              "default": "undefined",
+              "fieldName": "controlType",
+              "inheritedFrom": {
+                "name": "ControlTypeMixin",
+                "module": "src/utils/mixins/ControlTypeMixin.ts"
+              }
+            },
             {
               "name": "auto-focus-on-mount",
               "type": {
@@ -41348,7 +41528,7 @@
             "module": "/src/components/searchfield/searchfield.component"
           },
           "tagName": "mdc-searchpopover",
-          "jsDoc": "/**\n * `mdc-searchpopover` widget is a combination of the Searchfield and Popover components, connected to ensure\n * proper accessibility. This component should be used when search results or suggestions need to be displayed\n * in a popover below the search input field, where the search results hold individual actions like navigating to a\n * a different url etc.\n *\n * - Don't use this when search results are displayed inline on the page -\\> use Searchfield component instead.\n * - Don't use this when a list of options is filtered based on the search input -\\> use Combobox component instead.\n *\n * It supports any Chip component as filters. (`mdc-inputchip`, `mdc-alertchip`, `mdc-chip`)\n *\n * This component is built by extending the `mdc-searchfield` component & rendering the mdc-popover component inside.\n *\n * @tagname mdc-searchpopover\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n * @event shown - (React: onShown) This event is dispatched when the popover is shown\n * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden\n *\n * @slot default - Default slot (=children) for the popover content\n * @slot filters - Slot for input chips\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n * @cssproperty --mdc-searchpopover-width - Width of the searchpopover component\n * @cssproperty --mdc-searchpopover-popover-width - Width of the popover within the searchpopover component\n * @cssproperty --mdc-searchpopover-popover-height - Height of the popover within the searchpopover component\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart leading-icon - The leading icon element that is displayed before the input field.\n * @csspart prefix-text - The prefix text element that is displayed before the input field.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n * @csspart popover-content - The popover content element.\n */",
+          "jsDoc": "/**\n * `mdc-searchpopover` widget is a combination of the Searchfield and Popover components, connected to ensure\n * proper accessibility. This component should be used when search results or suggestions need to be displayed\n * in a popover below the search input field, where the search results hold individual actions like navigating to a\n * a different url etc.\n *\n * - Don't use this when search results are displayed inline on the page -\\> use Searchfield component instead.\n * - Don't use this when a list of options is filtered based on the search input -\\> use Combobox component instead.\n *\n * It supports any Chip component as filters. (`mdc-inputchip`, `mdc-alertchip`, `mdc-chip`)\n *\n * This component is built by extending the `mdc-searchfield` component & rendering the mdc-popover component inside.\n *\n * Searchpopover supports controlled vs uncontrolled behavior for chip filters, which can be set via the `control-type` attribute:\n * - In **uncontrolled** mode (default), when a chip is removed via the UI, it is automatically removed from the DOM and a `chipRemove` event is dispatched with the removed chip in the event detail. The consumer can listen to the `chipRemove` event but does not need to do anything to remove the chip from the DOM.\n * - In **controlled** mode (`control-type=\"controlled\"`), when a chip is removed via the UI, it is NOT removed from the DOM, but a `chipRemove` event is still dispatched with the \"removed\" chip in the event detail. The consumer must listen to the `chipRemove` event and handle removing the chip from the DOM themselves (e.g., by updating their state that controls which chips are rendered).\n *\n * @tagname mdc-searchpopover\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n * @event chipRemove - (React: onChipRemove) This event is dispatched when a chip filter is removed. The removed chip element is available in event.detail.chip.\n * In **controlled** mode (`control-type=\"controlled\"`), the chip is NOT removed from the DOM automatically — the consumer is responsible for removing it.\n * In **uncontrolled** mode (default), the chip is removed from the DOM automatically.\n * @event shown - (React: onShown) This event is dispatched when the popover is shown\n * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden\n *\n * @slot default - Default slot (=children) for the popover content\n * @slot filters - Slot for input chips\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n * @cssproperty --mdc-searchpopover-width - Width of the searchpopover component\n * @cssproperty --mdc-searchpopover-popover-width - Width of the popover within the searchpopover component\n * @cssproperty --mdc-searchpopover-popover-height - Height of the popover within the searchpopover component\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart leading-icon - The leading icon element that is displayed before the input field.\n * @csspart prefix-text - The prefix text element that is displayed before the input field.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n * @csspart popover-content - The popover content element.\n */",
           "customElement": true
         }
       ],

package/dist/react/searchfield/index.d.ts

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/searchfield';
+import type { Events } from '../../components/searchfield/searchfield.types';
 import type { Events as EventsInherited } from '../../components/input/input.types';
 /**
  * `mdc-searchfield` component is used as an input field for search functionality.
@@ -11,6 +12,10 @@ import type { Events as EventsInherited } from '../../components/input/input.typ
  *
  * This component is built by extending the `mdc-input` component.
  *
+ * Searchfield supports controlled vs uncontrolled behavior for chip filters, which can be set via the `control-type` attribute:
+ * - In **uncontrolled** mode (default), when a chip is removed via the UI, it is automatically removed from the DOM and a `chipRemove` event is dispatched with the removed chip in the event detail. The consumer can listen to the `chipRemove` event but does not need to do anything to remove the chip from the DOM.
+ * - In **controlled** mode (`control-type="controlled"`), when a chip is removed via the UI, it is NOT removed from the DOM, but a `chipRemove` event is still dispatched with the "removed" chip in the event detail. The consumer must listen to the `chipRemove` event and handle removing the chip from the DOM themselves (e.g., by updating their state that controls which chips are rendered).
+ *
  * **Accessibility:**
  *
  * NOTE: this component should not be used in combination with a Popover or Listbox component.
@@ -25,6 +30,7 @@ import type { Events as EventsInherited } from '../../components/input/input.typ
  * @event focus - (React: onFocus) This event is dispatched when the input receives focus.
  * @event blur - (React: onBlur) This event is dispatched when the input loses focus.
  * @event clear - (React: onClear) This event is dispatched when the input text is cleared.
+ * @event chipRemove - (React: onChipRemove) This event is dispatched when a chip filter is removed. The removed chip element is available in event.detail.chip. In `uncontrolled` mode (default) the chip is removed from the DOM automatically; in `controlled` mode only the event is fired and the consumer is responsible for removing the chip.
  *
  * @slot filters - Slot for chip filters rendered inline with the input text
  * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
@@ -69,6 +75,7 @@ import type { Events as EventsInherited } from '../../components/input/input.typ
  * @csspart searchfield-container - The inline flow container for chips and the input field.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onChipRemove: EventName<Events["onChipRemoveEvent"]>;
     onInput: EventName<EventsInherited["onInputEvent"]>;
     onChange: EventName<EventsInherited["onChangeEvent"]>;
     onFocus: EventName<EventsInherited["onFocusEvent"]>;