@ncino/web-components 15.5.0 → 15.6.0

package/dist/types/src/components/input/gator/dropdown/input-dropdown.gator.d.ts

@@ -1,12 +1,34 @@
-import { nothing } from 'lit';
+import { nothing, PropertyValues } from 'lit';
 import { Ref } from 'lit/directives/ref.js';
 import { NgcInputBase } from '../../base/input-base.gator.ts';
 import { NgcList } from '../../../list/gator/list/list.gator.ts';
+import { NgcListItem } from '../../../list/gator/list-item/list-item.gator.ts';
 export type NgcDropdownType = {
     label: string;
     value: string | number;
+    /** Icon name; host stamps `<ngc-icon slot="start">` when rendering */
+    startIcon?: string;
+    /** Icon name; host stamps `<ngc-icon slot="end">` when rendering */
+    endIcon?: string;
+    /** Secondary text under the option label */
+    subtitle?: string;
+    /** When true, option is non-interactive and skipped by keyboard navigation */
+    disabled?: boolean;
 };
 export type NgcDropdownDataType = 'country' | 'state' | 'naics' | 'phoneCodes';
+/** Internal list-item value for the Select All row — avoid using this as an option value. */
+export declare const NGC_DROPDOWN_SELECT_ALL_VALUE = "__ngc_select_all__";
+/**
+ * Dropdown / combobox. Options come from either:
+ * - the `options` / `data-type` props (data-driven), or
+ * - light-DOM `ngc-list-item` children (slotted). If any list-item children are present,
+ *   they win and `options` / `data-type` are ignored.
+ *
+ * Slotted items must be direct children of `ngc-input-dropdown` (not wrapped in other elements).
+ *
+ * @slot label - Optional custom label
+ * @slot - Optional `ngc-list-item` children used as the listbox options (avatars, custom start/end, etc.)
+ */
 export declare class NgcInputDropdown extends NgcInputBase {
     static shadowRootOptions: {
         delegatesFocus: boolean;
@@ -86,6 +108,11 @@ export declare class NgcInputDropdown extends NgcInputBase {
     private _visibleChipCount;
     private _showOverflowChip;
     private _truncateChips;
+    /**
+     * True when light-DOM `ngc-list-item` children are projected into the listbox.
+     * When true, `options` / `data-type` are ignored (either/or).
+     */
+    private _hasSlottedListItems;
     private _resizeObserver;
     private _calculationPending;
     listboxRef: Ref<HTMLDivElement>;
@@ -94,6 +121,11 @@ export declare class NgcInputDropdown extends NgcInputBase {
     listboxMessageRef: Ref<HTMLElement>;
     protected multiselectValueDelimiter: string;
     disconnectedCallback(): void;
+    /**
+     * Detect direct light-DOM list items before paint so we don't briefly render
+     * `options` alongside slotted children while waiting for slotchange.
+     */
+    protected willUpdate(changedProperties: PropertyValues): void;
     render(): import('lit').TemplateResult<1>;
     get controlClasses(): {
         'gator-cursor-pointer': boolean;
@@ -140,6 +172,29 @@ export declare class NgcInputDropdown extends NgcInputBase {
     private get autocompleteEditorValue();
     get showPlaceholder(): boolean | "";
     get listboxMarkup(): import('lit').TemplateResult<1>;
+    /**
+     * Direct light-DOM `ngc-list-item` children (default slot). Used when composing rich
+     * options (avatars, custom start/end) instead of the `options` array. Nested/wrapped
+     * list items are not supported — place them as direct children of the dropdown.
+     */
+    get slottedListItems(): NgcListItem[];
+    private refreshSlottedMode;
+    private handleDefaultSlotChange;
+    /** Consistent value matching for selection / labels (strict equality). */
+    private isSameOptionValue;
+    /**
+     * Keeps slotted list items in sync with dropdown state (selection, faux-focus, autocomplete filter).
+     * Applies the same maxAutocompleteResults cap as the data-driven options path when autocomplete is on.
+     */
+    private syncSlottedListItems;
+    private get visibleSlottedListItemCount();
+    /** Visible options in the listbox — data-driven or slotted. */
+    private get hasVisibleListOptions();
+    /**
+     * Values that Select All should consider: currently displayed/visible and not disabled.
+     * Matches data-driven `displayedOptions` filtering for autocomplete.
+     */
+    private get selectableOptionValues();
     get selectAllIcon(): "checkbox-selected" | "checkbox" | "checkbox-indeterminate";
     get allSelected(): boolean;
     selectAllOptions(): void;

package/dist/types/src/components/menu/base/gator/menu.gator.d.ts

@@ -17,9 +17,13 @@ export declare class NgcMenu extends NjcMenu {
     private _hidePopover;
     handleTriggerSlotChange(e: Event): void;
     private focusMenuItem;
+    private isNavigableMenuItem;
+    private getNavigableMenuItems;
     focusFirstMenuItem(): void;
     focusTriggerButton(): void;
     handleItemSlotChange(e: Event): void;
+    private handleMenuItemDisabledChange;
+    private syncMenuItemTabIndexes;
     handleMenuKeydown(e: KeyboardEvent): void;
     handleArrowDown(e: KeyboardEvent): void;
     handleArrowUp(e: KeyboardEvent): void;

package/dist/types/src/components/menu/menu-item/gator/menu-item.gator.d.ts

@@ -1,11 +1,20 @@
 import { NjcMenuItem } from '../menu-item.ts';
+/**
+ * @slot start - Leading content (e.g. ngc-icon or ngc-avatar). Preferred over deprecated `start-icon`.
+ * @slot end - Trailing content (e.g. ngc-icon or badge). Preferred over deprecated `end-icon`.
+ */
 export declare class NgcMenuItem extends NjcMenuItem {
+    private _startIconWarned;
+    private _endIconWarned;
     constructor();
     connectedCallback(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private syncAriaDisabled;
+    private warnDeprecatedIconProps;
     render(): import('lit').TemplateResult<1>;
     focus(options?: FocusOptions): void;
     click(): void;
-    handleKeydown(e: KeyboardEvent): void;
+    handleKeydown: (e: KeyboardEvent) => void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/types/src/components/menu/menu-item/menu-item.d.ts

@@ -6,12 +6,24 @@ export declare class NjcMenuItem extends LitElement {
      */
     value: string;
     /**
-     * An icon displayed before the value text
+     * Optional secondary text below the label (forwarded to ngc-list-item)
+     * @type {string}
+     */
+    subtitle: string | null;
+    /**
+     * When true, the menu item is non-interactive and styled as disabled
+     * @type {boolean}
+     */
+    disabled: boolean;
+    /**
+     * @deprecated Use the `start` slot instead, e.g. `<ngc-icon slot="start" name="…">`.
+     * Declarative hosts (e.g. table `menuItems[].startIcon`) should stamp slot content when rendering.
      * @type {string}
      */
     startIcon: string;
     /**
-     * An icon displayed after the value text
+     * @deprecated Use the `end` slot instead, e.g. `<ngc-icon slot="end" name="…">`.
+     * Declarative hosts (e.g. table `menuItems[].endIcon`) should stamp slot content when rendering.
      * @type {string}
      */
     endIcon: string;

package/dist/types/src/components/table/table-cell-config.d.ts

@@ -37,6 +37,8 @@ export type TableIconButtonMenuItem = {
     value?: string;
     startIcon?: string;
     endIcon?: string;
+    subtitle?: string;
+    disabled?: boolean;
 };
 export interface TableIconButtonCellConfig extends TableCellConfigBase {
     iconName: string;
@@ -48,6 +50,10 @@ export interface TableIconButtonCellConfig extends TableCellConfigBase {
 export type TableDropdownOption = {
     label: string;
     value: string | number;
+    startIcon?: string;
+    endIcon?: string;
+    subtitle?: string;
+    disabled?: boolean;
 };
 export interface TableInputDropdownCellConfig extends TableCellConfigBase {
     options?: TableDropdownOption[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ncino/web-components",
   "author": "nCino",
-  "version": "15.5.0",
+  "version": "15.6.0",
   "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -100,10 +100,10 @@
     "vite-plugin-static-copy": "^3.3.0",
     "vitest": "^4.1.10",
     "yaml-eslint-parser": "^2.1.0",
-    "@ncino/styles": "15.5.0"
+    "@ncino/styles": "15.6.0"
   },
   "peerDependencies": {
-    "@ncino/styles": "15.5.0"
+    "@ncino/styles": "15.6.0"
   },
   "bugs": {
     "url": "https://github.com/ncino/force-sdk-web-components/issues"

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ncino/web-components",
-  "version": "15.4.0",
+  "version": "15.5.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2254,7 +2254,7 @@
         },
         {
           "name": "ngc-menu-item",
-          "description": "\n---\n\n\n### **Events:**\n - **menuitemclick**",
+          "description": "\n---\n\n\n### **Events:**\n - **menuitemdisabledchange**\n- **menuitemclick**\n\n### **Slots:**\n - **start** - Leading content (e.g. ngc-icon or ngc-avatar). Preferred over deprecated `start-icon`.\n- **end** - Trailing content (e.g. ngc-icon or badge). Preferred over deprecated `end-icon`.",
           "doc-url": "",
           "attributes": [
             {
@@ -2262,37 +2262,64 @@
               "description": "The value and text displayed of the menu item",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "subtitle",
+              "description": "Optional secondary text below the label (forwarded to ngc-list-item)",
+              "value": { "type": "string", "default": "null" }
+            },
+            {
+              "name": "disabled",
+              "description": "When true, the menu item is non-interactive and styled as disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "start-icon",
-              "description": "An icon displayed before the value text",
               "value": { "type": "string", "default": "''" }
             },
             {
               "name": "end-icon",
-              "description": "An icon displayed after the value text",
               "value": { "type": "string", "default": "''" }
             }
           ],
-          "events": [{ "name": "menuitemclick", "type": "CustomEvent" }],
+          "slots": [
+            {
+              "name": "start",
+              "description": "Leading content (e.g. ngc-icon or ngc-avatar). Preferred over deprecated `start-icon`."
+            },
+            {
+              "name": "end",
+              "description": "Trailing content (e.g. ngc-icon or badge). Preferred over deprecated `end-icon`."
+            }
+          ],
+          "events": [
+            { "name": "menuitemdisabledchange", "type": "CustomEvent" },
+            { "name": "menuitemclick", "type": "CustomEvent" }
+          ],
           "js": {
             "properties": [
+              { "name": "handleKeydown" },
               {
                 "name": "value",
                 "description": "The value and text displayed of the menu item",
                 "type": "string"
               },
               {
-                "name": "startIcon",
-                "description": "An icon displayed before the value text",
+                "name": "subtitle",
+                "description": "Optional secondary text below the label (forwarded to ngc-list-item)",
                 "type": "string"
               },
               {
-                "name": "endIcon",
-                "description": "An icon displayed after the value text",
-                "type": "string"
-              }
+                "name": "disabled",
+                "description": "When true, the menu item is non-interactive and styled as disabled",
+                "type": "boolean"
+              },
+              { "name": "startIcon", "type": "string" },
+              { "name": "endIcon", "type": "string" }
             ],
-            "events": [{ "name": "menuitemclick", "type": "CustomEvent" }]
+            "events": [
+              { "name": "menuitemdisabledchange", "type": "CustomEvent" },
+              { "name": "menuitemclick", "type": "CustomEvent" }
+            ]
           }
         },
         {
@@ -4973,7 +5000,7 @@
         },
         {
           "name": "ngc-input-dropdown",
-          "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**",
+          "description": "Dropdown / combobox. Options come from either:\n- the `options` / `data-type` props (data-driven), or\n- light-DOM `ngc-list-item` children (slotted). If any list-item children are present,\n  they win and `options` / `data-type` are ignored.\n\nSlotted items must be direct children of `ngc-input-dropdown` (not wrapped in other elements).\n---\n\n\n### **Events:**\n - **input**\n- **change**\n\n### **Slots:**\n - **label** - Optional custom label\n- _default_ - Optional `ngc-list-item` children used as the listbox options (avatars, custom start/end, etc.)",
           "doc-url": "",
           "attributes": [
             {
@@ -5108,6 +5135,13 @@
               "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
+          "slots": [
+            { "name": "label", "description": "Optional custom label" },
+            {
+              "name": "",
+              "description": "Optional `ngc-list-item` children used as the listbox options (avatars, custom start/end, etc.)"
+            }
+          ],
           "events": [
             { "name": "input", "type": "CustomEvent" },
             { "name": "change", "type": "CustomEvent" }
@@ -5152,6 +5186,11 @@
               { "name": "displayedValue" },
               { "name": "showPlaceholder" },
               { "name": "listboxMarkup" },
+              {
+                "name": "slottedListItems",
+                "description": "Direct light-DOM `ngc-list-item` children (default slot). Used when composing rich\noptions (avatars, custom start/end) instead of the `options` array. Nested/wrapped\nlist items are not supported — place them as direct children of the dropdown.",
+                "type": "NgcListItem[]"
+              },
               { "name": "selectAllIcon" },
               { "name": "allSelected" },
               { "name": "listboxMessageMarkup" },
@@ -6347,14 +6386,22 @@
               "description": "The value and text displayed of the menu item",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "subtitle",
+              "description": "Optional secondary text below the label (forwarded to ngc-list-item)",
+              "value": { "type": "string", "default": "null" }
+            },
+            {
+              "name": "disabled",
+              "description": "When true, the menu item is non-interactive and styled as disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "start-icon",
-              "description": "An icon displayed before the value text",
               "value": { "type": "string", "default": "''" }
             },
             {
               "name": "end-icon",
-              "description": "An icon displayed after the value text",
               "value": { "type": "string", "default": "''" }
             }
           ],
@@ -6368,15 +6415,17 @@
                 "type": "string"
               },
               {
-                "name": "startIcon",
-                "description": "An icon displayed before the value text",
+                "name": "subtitle",
+                "description": "Optional secondary text below the label (forwarded to ngc-list-item)",
                 "type": "string"
               },
               {
-                "name": "endIcon",
-                "description": "An icon displayed after the value text",
-                "type": "string"
-              }
+                "name": "disabled",
+                "description": "When true, the menu item is non-interactive and styled as disabled",
+                "type": "boolean"
+              },
+              { "name": "startIcon", "type": "string" },
+              { "name": "endIcon", "type": "string" }
             ],
             "events": [{ "name": "menuitemclick", "type": "CustomEvent" }]
           }