@nova-design-system/nova-webcomponents 3.28.0 → 3.29.0

package/dist/types/components/nv-fieldmultiselect/nv-fieldmultiselect.d.ts

@@ -293,6 +293,15 @@ export declare class NvFieldmultiselect {
         checked: boolean;
     }>): void;
     handleSlotChange(event: Event): void;
+    /**
+     * Close the dropdown when keyboard focus leaves the component.
+     * Uses focusout (which bubbles) so it covers every internal focusable
+     * (filter input, hidden input, trigger `<p>`, chevron iconbutton,
+     * clear-filter iconbutton, dropdown items, badge close button) without
+     * needing per-element onBlur wiring.
+     * @param {FocusEvent} event - The focus event.
+     */
+    handleFocusOut(event: FocusEvent): void;
     /**
      * Handle keyboard events & arrow key navigation.
      * If the multiselect is not open, opens it and focuses on the first item if the list is not filterable.
@@ -352,11 +361,15 @@ export declare class NvFieldmultiselect {
      */
     toggleSelectAll(): Promise<void>;
     /**
-     * Reorder the content of the slot.
+     * Reorder the content of the slot using CSS flex `order` so the
+     * underlying DOM order is preserved (clearing the selection restores
+     * the original visual order automatically).
      */
     private reorderSlotContent;
     /**
-     * Reorder the content for options mode with async handling
+     * Reorder the content for options mode using CSS flex `order` so the
+     * underlying DOM order is preserved (clearing the selection restores
+     * the original visual order automatically).
      */
     private reorderOptionsContent;
     /**
@@ -408,10 +421,6 @@ export declare class NvFieldmultiselect {
      * Clear the filter text
      */
     private clearFilterText;
-    /**
-     * Handle input blur for options mode.
-     */
-    private handleInputBlurOptions;
     /**
      * Updates the highlighted item in the dropdown list.
      *
@@ -420,7 +429,7 @@ export declare class NvFieldmultiselect {
      */
     private updateHighlightedItem;
     /**
-     * Focus on the first item in the dropdown list.
+     * Focus on the first item in the dropdown list (visual order).
      */
     private focusFirstItem;
     /**
@@ -451,10 +460,6 @@ export declare class NvFieldmultiselect {
      * Handle input focus for slots mode.
      */
     private handleInputFocusSlots;
-    /**
-     * Handle input blur for slots mode.
-     */
-    private handleInputBlurSlots;
     /**
      * Toggle the multiselect popover for options mode.
      */

package/dist/types/components/nv-icon/nv-icon.d.ts

@@ -41,8 +41,9 @@ export declare class NvIcon {
     /**
      * Choose the icon you want to display. This also sets the aria-label for
      * improved accessibility, helping users who rely on screen readers.
+     * @icon
      */
-    readonly name: `${IconName}` | string;
+    readonly name: `${IconName}`;
     /**
      * Adjust the size of the icon to fit your design needs.
      */

package/dist/types/components/nv-iconbutton/nv-iconbutton.d.ts

@@ -40,8 +40,9 @@ export declare class NvIconbutton {
      * Choose the icon you want to display. This also sets the aria-label for
      * improved accessibility, helping users who rely on screen readers.
      * The icon is not displayed when the button is loading.
+     * @icon
      */
-    readonly name: `${IconName}` | string;
+    readonly name: `${IconName}`;
     /**
      * Sets the button type to control its function in forms. Use 'submit' to send
      * form data, 'reset' to clear the form, or 'button' for a standard button

package/dist/types/components/nv-menuitem/nv-menuitem.d.ts

@@ -15,6 +15,7 @@ export declare class NvMenuitem {
      * Choose the icon you want to display. This also sets the aria-label for
      * improved accessibility, helping users who rely on screen readers.
      * The icon is not displayed when the button is loading.
+     * @icon
      */
     readonly icon: `${IconName}`;
     /**

package/dist/types/components/nv-notification/nv-notification.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { FeedbackColors, NotificationEmphasis } from '../../utils/constants';
+import { type IconName } from '../nv-icon/nv-icons';
 /**
  * @slot heading - Use this slot to insert HTML as the notification title.
  * @slot content - Use this slot to insert HTML as the notification message.
@@ -39,8 +40,9 @@ export declare class NvNotification {
     /**
      * Icon associated with the notification, defaults vary based on the feedback
      * type.
+     * @icon
      */
-    readonly icon: string;
+    readonly icon: `${IconName}`;
     /**
      * Allows the notification to be dismissed via a close button (x). The
      * notification is not dismissible unless explicitly enabled.

package/dist/types/components/nv-row/nv-row.d.ts

@@ -1,5 +1,6 @@
 /**
  * @slot default - The row content.
+ * @deprecated since v3.0.0. Use Tailwind CSS classes instead with grid or flexbox utilities.
  */
 export declare class NvRow {
     /****************************************************************************/

package/dist/types/components/nv-sidebarnavitem/nv-sidebarnavitem.d.ts

@@ -10,8 +10,9 @@ export declare class NvSidebarnavitem {
     /****************************************************************************/
     /**
      * Optional icon to display before the label.
+     * @icon
      */
-    readonly icon?: IconName;
+    readonly icon?: `${IconName}`;
     /**
      * Whether this item represents the active/current page.
      * Can be set automatically when a sub-item becomes active.

package/dist/types/components.d.ts

@@ -6,18 +6,18 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, GlobalFilterPosition, IconButtonShape, LabelPlacement, LoaderColors, NotificationEmphasis, NotificationPosition, SemanticSizes, TextInputAutocomplete, ToggleButtonEmphasis, ToggleButtonSize } from "./utils/constants";
+import { IconName } from "./components/nv-icon/nv-icons";
 import { Column } from "./interfaces/Column";
 import { DateOnly, TimeOnly } from "./interfaces/dates";
 import { Element } from "./stencil-public-runtime";
 import { FilterMode } from "./utils/search-engine";
-import { IconName } from "./components/nv-icon/nv-icons";
 import { Placement, Strategy } from "@floating-ui/dom";
 export { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, GlobalFilterPosition, IconButtonShape, LabelPlacement, LoaderColors, NotificationEmphasis, NotificationPosition, SemanticSizes, TextInputAutocomplete, ToggleButtonEmphasis, ToggleButtonSize } from "./utils/constants";
+export { IconName } from "./components/nv-icon/nv-icons";
 export { Column } from "./interfaces/Column";
 export { DateOnly, TimeOnly } from "./interfaces/dates";
 export { Element } from "./stencil-public-runtime";
 export { FilterMode } from "./utils/search-engine";
-export { IconName } from "./components/nv-icon/nv-icons";
 export { Placement, Strategy } from "@floating-ui/dom";
 export namespace Components {
     interface NvAccordion {
@@ -128,8 +128,9 @@ export namespace Components {
         "hidden": boolean;
         /**
           * Icon associated with the alert, defaults vary based on the feedback type.
+          * @icon
          */
-        "icon": string;
+        "icon": `${IconName}`;
         /**
           * Main content of the alert. For more complex content, use the default slot instead.
          */
@@ -224,8 +225,9 @@ export namespace Components {
         /**
           * The icon to display in the badge.
           * @deprecated use leadIcon or slot="leading-icon" instead.
+          * @icon
          */
-        "icon": string;
+        "icon": `${IconName}`;
         /**
           * The location of the icon in the badge.
           * @deprecated only leadIcon now.
@@ -243,9 +245,10 @@ export namespace Components {
         "label"?: string | null;
         /**
           * The lead icon of the badge.
+          * @icon 
           * @default null
          */
-        "leadIcon"?: string | null;
+        "leadIcon"?: `${IconName}` | null;
         /**
           * When true, the alert does not automatically close upon dismissing. Useful for externally controlled component behavior.
           * @default false
@@ -440,6 +443,9 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * @deprecated since v3.0.0. Use Tailwind CSS classes instead with grid or flexbox utilities.
+     */
     interface NvCol {
         /**
           * Defines the column size based on a 12 column grid system.
@@ -676,9 +682,10 @@ export namespace Components {
         "form": string;
         /**
           * Sets the leading icon for the primary button.
-          * @default ''
+          * @icon 
+          * @default null
          */
-        "leadingIcon": string;
+        "leadingIcon": `${IconName}` | null;
         /**
           * Sets the type of the primary button. If using a form, this will default to 'submit' if nothing passed.
          */
@@ -690,9 +697,10 @@ export namespace Components {
         "primaryLabel": string;
         /**
           * Sets the trailing icon for the primary button.
-          * @default ''
+          * @icon 
+          * @default null
          */
-        "trailingIcon": string;
+        "trailingIcon": `${IconName}` | null;
         /**
           * Controls the visibility of the cancel button. When true, the cancel button is hidden.
           * @default false
@@ -787,9 +795,10 @@ export namespace Components {
         "form"?: string | null;
         /**
           * Sets the leading icon for the primary button.
+          * @icon 
           * @default null
          */
-        "leadingIcon"?: string | null;
+        "leadingIcon"?: `${IconName}` | null;
         /**
           * Sets the type of the primary button. If using a form, this will default to 'submit' if nothing passed.
          */
@@ -801,9 +810,10 @@ export namespace Components {
         "primaryLabel": string | null;
         /**
           * Sets the trailing icon for the primary button.
+          * @icon 
           * @default null
          */
-        "trailingIcon"?: string | null;
+        "trailingIcon"?: `${IconName}` | null;
         /**
           * Controls the visibility of the cancel button. When true, the cancel button is hidden.
           * @default false
@@ -2480,8 +2490,9 @@ export namespace Components {
         "medium": boolean;
         /**
           * Choose the icon you want to display. This also sets the aria-label for improved accessibility, helping users who rely on screen readers.
+          * @icon
          */
-        "name": `${IconName}` | string;
+        "name": `${IconName}`;
         /**
           * Adjust the size of the icon to fit your design needs.
           * @default 'md'
@@ -2531,8 +2542,9 @@ export namespace Components {
         "loading": boolean;
         /**
           * Choose the icon you want to display. This also sets the aria-label for improved accessibility, helping users who rely on screen readers. The icon is not displayed when the button is loading.
+          * @icon
          */
-        "name": `${IconName}` | string;
+        "name": `${IconName}`;
         /**
           * Sets the shape of the button. Choose between square and rounded.
           * @default 'square'
@@ -2641,6 +2653,7 @@ export namespace Components {
         "hasSubmenu": boolean;
         /**
           * Choose the icon you want to display. This also sets the aria-label for improved accessibility, helping users who rely on screen readers. The icon is not displayed when the button is loading.
+          * @icon
          */
         "icon": `${IconName}`;
         /**
@@ -2687,8 +2700,9 @@ export namespace Components {
         "hidden": boolean;
         /**
           * Icon associated with the notification, defaults vary based on the feedback type.
+          * @icon
          */
-        "icon": string;
+        "icon": `${IconName}`;
         /**
           * When true, the notification will be hidden initially, but internal changes will not be in a controlled state. Good for animating the notification in.
           * @default false
@@ -2952,6 +2966,9 @@ export namespace Components {
          */
         "triggerMode": 'hover' | 'click' | 'controlled';
     }
+    /**
+     * @deprecated since v3.0.0. Use Tailwind CSS classes instead with grid or flexbox utilities.
+     */
     interface NvRow {
     }
     /**
@@ -3048,8 +3065,9 @@ export namespace Components {
         "collapsible": boolean;
         /**
           * Optional icon to display before the label.
+          * @icon
          */
-        "icon"?: IconName;
+        "icon"?: `${IconName}`;
         /**
           * Number of notifications to display. When provided, a notification bullet will be automatically rendered. The bullet will be positioned in the trailing slot when sidebar is open, and on the icon when collapsed.
          */
@@ -3586,6 +3604,9 @@ declare global {
         prototype: HTMLNvCalendarElement;
         new (): HTMLNvCalendarElement;
     };
+    /**
+     * @deprecated since v3.0.0. Use Tailwind CSS classes instead with grid or flexbox utilities.
+     */
     interface HTMLNvColElement extends Components.NvCol, HTMLStencilElement {
     }
     var HTMLNvColElement: {
@@ -4235,6 +4256,9 @@ declare global {
         prototype: HTMLNvPopoverElement;
         new (): HTMLNvPopoverElement;
     };
+    /**
+     * @deprecated since v3.0.0. Use Tailwind CSS classes instead with grid or flexbox utilities.
+     */
     interface HTMLNvRowElement extends Components.NvRow, HTMLStencilElement {
     }
     var HTMLNvRowElement: {
@@ -4659,8 +4683,9 @@ declare namespace LocalJSX {
         "hidden"?: boolean;
         /**
           * Icon associated with the alert, defaults vary based on the feedback type.
+          * @icon
          */
-        "icon"?: string;
+        "icon"?: `${IconName}`;
         /**
           * Main content of the alert. For more complex content, use the default slot instead.
          */
@@ -4768,8 +4793,9 @@ declare namespace LocalJSX {
         /**
           * The icon to display in the badge.
           * @deprecated use leadIcon or slot="leading-icon" instead.
+          * @icon
          */
-        "icon"?: string;
+        "icon"?: `${IconName}`;
         /**
           * The location of the icon in the badge.
           * @deprecated only leadIcon now.
@@ -4787,9 +4813,10 @@ declare namespace LocalJSX {
         "label"?: string | null;
         /**
           * The lead icon of the badge.
+          * @icon 
           * @default null
          */
-        "leadIcon"?: string | null;
+        "leadIcon"?: `${IconName}` | null;
         /**
           * Emitted when the badge is dismissed.
          */
@@ -5005,6 +5032,9 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * @deprecated since v3.0.0. Use Tailwind CSS classes instead with grid or flexbox utilities.
+     */
     interface NvCol {
         /**
           * Defines the column size based on a 12 column grid system.
@@ -5320,9 +5350,10 @@ declare namespace LocalJSX {
         "form"?: string;
         /**
           * Sets the leading icon for the primary button.
-          * @default ''
+          * @icon 
+          * @default null
          */
-        "leadingIcon"?: string;
+        "leadingIcon"?: `${IconName}` | null;
         /**
           * Emitted when the cancel button is clicked. This will close the dialog.
          */
@@ -5342,9 +5373,10 @@ declare namespace LocalJSX {
         "primaryLabel"?: string;
         /**
           * Sets the trailing icon for the primary button.
-          * @default ''
+          * @icon 
+          * @default null
          */
-        "trailingIcon"?: string;
+        "trailingIcon"?: `${IconName}` | null;
         /**
           * Controls the visibility of the cancel button. When true, the cancel button is hidden.
           * @default false
@@ -5436,9 +5468,10 @@ declare namespace LocalJSX {
         "form"?: string | null;
         /**
           * Sets the leading icon for the primary button.
+          * @icon 
           * @default null
          */
-        "leadingIcon"?: string | null;
+        "leadingIcon"?: `${IconName}` | null;
         /**
           * Emitted when the cancel button is clicked. This will close the drawer.
          */
@@ -5458,9 +5491,10 @@ declare namespace LocalJSX {
         "primaryLabel"?: string | null;
         /**
           * Sets the trailing icon for the primary button.
+          * @icon 
           * @default null
          */
-        "trailingIcon"?: string | null;
+        "trailingIcon"?: `${IconName}` | null;
         /**
           * Controls the visibility of the cancel button. When true, the cancel button is hidden.
           * @default false
@@ -7204,8 +7238,9 @@ declare namespace LocalJSX {
         "medium"?: boolean;
         /**
           * Choose the icon you want to display. This also sets the aria-label for improved accessibility, helping users who rely on screen readers.
+          * @icon
          */
-        "name"?: `${IconName}` | string;
+        "name"?: `${IconName}`;
         /**
           * Adjust the size of the icon to fit your design needs.
           * @default 'md'
@@ -7255,8 +7290,9 @@ declare namespace LocalJSX {
         "loading"?: boolean;
         /**
           * Choose the icon you want to display. This also sets the aria-label for improved accessibility, helping users who rely on screen readers. The icon is not displayed when the button is loading.
+          * @icon
          */
-        "name"?: `${IconName}` | string;
+        "name"?: `${IconName}`;
         /**
           * Sets the shape of the button. Choose between square and rounded.
           * @default 'square'
@@ -7361,6 +7397,7 @@ declare namespace LocalJSX {
         "hasSubmenu"?: boolean;
         /**
           * Choose the icon you want to display. This also sets the aria-label for improved accessibility, helping users who rely on screen readers. The icon is not displayed when the button is loading.
+          * @icon
          */
         "icon"?: `${IconName}`;
         /**
@@ -7420,8 +7457,9 @@ declare namespace LocalJSX {
         "hidden"?: boolean;
         /**
           * Icon associated with the notification, defaults vary based on the feedback type.
+          * @icon
          */
-        "icon"?: string;
+        "icon"?: `${IconName}`;
         /**
           * When true, the notification will be hidden initially, but internal changes will not be in a controlled state. Good for animating the notification in.
           * @default false
@@ -7666,6 +7704,9 @@ declare namespace LocalJSX {
          */
         "triggerMode"?: 'hover' | 'click' | 'controlled';
     }
+    /**
+     * @deprecated since v3.0.0. Use Tailwind CSS classes instead with grid or flexbox utilities.
+     */
     interface NvRow {
     }
     /**
@@ -7767,8 +7808,9 @@ declare namespace LocalJSX {
         "collapsible"?: boolean;
         /**
           * Optional icon to display before the label.
+          * @icon
          */
-        "icon"?: IconName;
+        "icon"?: `${IconName}`;
         /**
           * Number of notifications to display. When provided, a notification bullet will be automatically rendered. The bullet will be positioned in the trailing slot when sidebar is open, and on the icon when collapsed.
          */
@@ -8127,6 +8169,9 @@ declare module "@stencil/core" {
             "nv-button": LocalJSX.NvButton & JSXBase.HTMLAttributes<HTMLNvButtonElement>;
             "nv-buttongroup": LocalJSX.NvButtongroup & JSXBase.HTMLAttributes<HTMLNvButtongroupElement>;
             "nv-calendar": LocalJSX.NvCalendar & JSXBase.HTMLAttributes<HTMLNvCalendarElement>;
+            /**
+             * @deprecated since v3.0.0. Use Tailwind CSS classes instead with grid or flexbox utilities.
+             */
             "nv-col": LocalJSX.NvCol & JSXBase.HTMLAttributes<HTMLNvColElement>;
             /**
              * A flexible data grid component powered by `@tanstack/table-core`.
@@ -8194,6 +8239,9 @@ declare module "@stencil/core" {
             "nv-pagination-nav": LocalJSX.NvPaginationNav & JSXBase.HTMLAttributes<HTMLNvPaginationNavElement>;
             "nv-paginationtable": LocalJSX.NvPaginationtable & JSXBase.HTMLAttributes<HTMLNvPaginationtableElement>;
             "nv-popover": LocalJSX.NvPopover & JSXBase.HTMLAttributes<HTMLNvPopoverElement>;
+            /**
+             * @deprecated since v3.0.0. Use Tailwind CSS classes instead with grid or flexbox utilities.
+             */
             "nv-row": LocalJSX.NvRow & JSXBase.HTMLAttributes<HTMLNvRowElement>;
             /**
              * Main sidebar container for navigation. Supports collapsible and persistent modes.