@nova-design-system/nova-webcomponents 3.30.0 → 3.31.0

package/dist/types/components.d.ts

@@ -1231,10 +1231,19 @@ export namespace Components {
           * @default false
          */
         "autofocus": boolean;
+        /**
+          * Clears the current selection. Resets the value to an empty string, removes the selected state from items, clears the filter text (when filterable) and emits `valueChanged` (and `filterTextChanged` when the filter was reset). Emits `cleared` when anything was actually reset.
+         */
+        "clear": () => Promise<void>;
         /**
           * Clears the filter text
          */
         "clearFilter": () => Promise<void>;
+        /**
+          * Shows the inline clear (×) button when a value is selected (or when filterable and the user has typed). The programmatic `clear()` method works regardless of this prop — leave it off when you want to manage clearing the selection from outside the component.
+          * @default false
+         */
+        "clearable": boolean;
         /**
           * Determines if the component’s filtering behavior is managed externally. When set to true and filterable is enabled, the component won’t automatically filter items. Instead, you must implement your own filtering logic (e.g., server-side search or custom matching) using the filterTextChanged event.
           * @default false
@@ -1923,6 +1932,15 @@ export namespace Components {
           * @default false
          */
         "autofocus": boolean;
+        /**
+          * Clears the current selection. Resets the value to an empty string and emits `valueChanged` and `cleared` when the value actually changed. The `@Watch('value')` watcher takes care of syncing the underlying native `<select>` options and the form value.
+         */
+        "clear": () => Promise<void>;
+        /**
+          * Shows the inline clear (×) button when a value is selected. The programmatic `clear()` method works regardless of this prop — leave it off when you want to manage clearing from outside the component.
+          * @default false
+         */
+        "clearable": boolean;
         /**
           * Add helpful hints or extra information under the select field. This is where you can clarify what users should choose or provide additional instructions, making the form easier to fill out correctly.
          */
@@ -3951,6 +3969,7 @@ declare global {
     interface HTMLNvFielddropdownElementEventMap {
         "valueChanged": string;
         "filterTextChanged": string;
+        "cleared": void;
         "openChanged": HTMLNvPopoverElementEventMap['openChanged'];
         "dropdownItemSelected": HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected'];
     }
@@ -4093,6 +4112,7 @@ declare global {
     };
     interface HTMLNvFieldselectElementEventMap {
         "valueChanged": string;
+        "cleared": void;
     }
     interface HTMLNvFieldselectElement extends Components.NvFieldselect, HTMLStencilElement {
         addEventListener<K extends keyof HTMLNvFieldselectElementEventMap>(type: K, listener: (this: HTMLNvFieldselectElement, ev: NvFieldselectCustomEvent<HTMLNvFieldselectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -6035,6 +6055,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "autofocus"?: boolean;
+        /**
+          * Shows the inline clear (×) button when a value is selected (or when filterable and the user has typed). The programmatic `clear()` method works regardless of this prop — leave it off when you want to manage clearing the selection from outside the component.
+          * @default false
+         */
+        "clearable"?: boolean;
         /**
           * Determines if the component’s filtering behavior is managed externally. When set to true and filterable is enabled, the component won’t automatically filter items. Instead, you must implement your own filtering logic (e.g., server-side search or custom matching) using the filterTextChanged event.
           * @default false
@@ -6119,6 +6144,10 @@ declare namespace LocalJSX {
           * Defines the name attribute of the input field, which is crucial for form submission. This value is used as the key in the key-value pair sent to the server, representing the input's data in form submissions. It should be unique within the form to avoid conflicts.
          */
         "name"?: string;
+        /**
+          * Emitted when the field is cleared via the inline clear button or the programmatic `clear()` method. Useful for reacting to user-initiated clears without subscribing to every `valueChanged` emission.
+         */
+        "onCleared"?: (event: NvFielddropdownCustomEvent<void>) => void;
         /**
           * Event emitted when an item is clicked. Propagation prevented in listener.
          */
@@ -6758,6 +6787,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "autofocus"?: boolean;
+        /**
+          * Shows the inline clear (×) button when a value is selected. The programmatic `clear()` method works regardless of this prop — leave it off when you want to manage clearing from outside the component.
+          * @default false
+         */
+        "clearable"?: boolean;
         /**
           * Add helpful hints or extra information under the select field. This is where you can clarify what users should choose or provide additional instructions, making the form easier to fill out correctly.
          */
@@ -6811,6 +6845,10 @@ declare namespace LocalJSX {
           * Defines the name attribute of the select field, which is crucial for form submission. This value is used as the key in the key-value pair sent to the server, representing the selected data in form submissions. It should be unique within the form to avoid conflicts
          */
         "name"?: string;
+        /**
+          * Emitted when the field is cleared via the inline clear button or the programmatic `clear()` method. Useful for reacting to user-initiated clears without subscribing to every `valueChanged` emission.
+         */
+        "onCleared"?: (event: NvFieldselectCustomEvent<void>) => void;
         /**
           * Emitted when the selected value changes.
           * @bind value