wabtec-internal-volt-basic-components 1.2.0 → 1.4.0

package/dist/collection/components/autocomplete-item/vds-autocomplete-item.js

@@ -1,31 +1,214 @@
 import { Host, h } from "@stencil/core";
 import { combineClasses } from "../../utils/combine-classes";
 import { generateCheckbox, generateCheckmarkIconButton, generateInformativeIcon, generateLabel } from "../base-item/base-item";
+/**
+ * @component vds-autocomplete-item
+ * @description An autocomplete item component used within vds-basic-autocomplete.
+ * Provides selectable items with optional checkmarks, icons, and danger states.
+ * Supports different sizes, alignment options, and accessibility features.
+ *
+ * @example
+ * <!-- Basic autocomplete item -->
+ * <vds-autocomplete-item value="option1">Option 1</vds-autocomplete-item>
+ *
+ * @example
+ * <!-- Autocomplete item with label -->
+ * <vds-autocomplete-item
+ *   value="opt-1"
+ *   label="First Option">
+ * </vds-autocomplete-item>
+ *
+ * @example
+ * <!-- Disabled autocomplete item -->
+ * <vds-autocomplete-item
+ *   value="disabled-option"
+ *   disabled>
+ *   Disabled Option
+ * </vds-autocomplete-item>
+ *
+ * @example
+ * <!-- Active/selected autocomplete item -->
+ * <vds-autocomplete-item
+ *   value="active-option"
+ *   is-active>
+ *   Active Option
+ * </vds-autocomplete-item>
+ *
+ * @example
+ * <!-- Autocomplete item with informative icon -->
+ * <vds-autocomplete-item
+ *   value="document.pdf"
+ *   informative-icon="document">
+ *   Document File
+ * </vds-autocomplete-item>
+ *
+ * @example
+ * <!-- Large size autocomplete item -->
+ * <vds-autocomplete-item
+ *   value="large-item"
+ *   size="large">
+ *   Large Size Item
+ * </vds-autocomplete-item>
+ *
+ * @example
+ * <!-- Autocomplete item with checkmark (start aligned) -->
+ * <vds-autocomplete-item
+ *   value="checked-item"
+ *   has-checkmark
+ *   is-selected>
+ *   Selected Item
+ * </vds-autocomplete-item>
+ *
+ * @example
+ * <!-- Autocomplete item with checkbox (end aligned) -->
+ * <vds-autocomplete-item
+ *   value="checkbox-item"
+ *   has-checkmark
+ *   checkmark-variant="checkbox"
+ *   checkmark-alignment="end"
+ *   is-selected>
+ *   Checkbox Item
+ * </vds-autocomplete-item>
+ *
+ * @example
+ * <!-- Danger state autocomplete item -->
+ * <vds-autocomplete-item
+ *   value="delete-option"
+ *   danger>
+ *   Delete Item
+ * </vds-autocomplete-item>
+ *
+ * @example
+ * <!-- ⚠️ Avoid listening to autocompleteClicked directly – it is an internal event.
+ *      Instead, listen to selectedValueChanged on the parent vds-basic-autocomplete / vds-autocomplete.
+ *      See the autocompleteClicked event JSDoc for the full migration guide. -->
+ * <vds-basic-autocomplete id="my-auto" placeholder="Select an option">
+ *   <vds-autocomplete-item value="click-me">Click Me</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ * <script>
+ *   document.getElementById('my-auto')
+ *     .addEventListener('selectedValueChanged', (e) => {
+ *       console.log('label:', e.detail.label);
+ *       console.log('value:', e.detail.value);
+ *     });
+ * </script>
+ *
+ * @example
+ * <!-- Multiple autocomplete items in a list -->
+ * <div style="display: flex; flex-direction: column; gap: 4px;">
+ *   <vds-autocomplete-item value="item1" informative-icon="star">Favorite</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="item2" informative-icon="folder-closed">Documents</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="item3" informative-icon="image">Images</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="item4" danger>Delete All</vds-autocomplete-item>
+ * </div>
+ *
+ * @example
+ * <!-- Autocomplete items with different sizes -->
+ * <div style="display: flex; flex-direction: column; gap: 8px;">
+ *   <vds-autocomplete-item value="small" size="small">Small Item</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="medium" size="medium">Medium Item</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="large" size="large">Large Item</vds-autocomplete-item>
+ * </div>
+ *
+ * @example
+ * <!-- Autocomplete items within vds-basic-autocomplete -->
+ * <vds-basic-autocomplete placeholder="Select a fruit">
+ *   <vds-autocomplete-item value="apple" informative-icon="radio-unchecked">Apple</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="banana" informative-icon="radio-unchecked">Banana</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="orange" informative-icon="radio-unchecked">Orange</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="grape" informative-icon="radio-unchecked">Grape</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ *
+ * @example
+ * <!-- Autocomplete items with checkmarks in multiple mode -->
+ * <vds-basic-autocomplete id="multi-autocomplete" multiple placeholder="Select multiple">
+ *   <vds-autocomplete-item value="opt1" has-checkmark checkmark-variant="checkbox">Option 1</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="opt2" has-checkmark checkmark-variant="checkbox">Option 2</vds-autocomplete-item>
+ *   <vds-autocomplete-item value="opt3" has-checkmark checkmark-variant="checkbox">Option 3</vds-autocomplete-item>
+ * </vds-basic-autocomplete>
+ * <script>
+ *   const multiAuto = document.getElementById('multi-autocomplete');
+ *   multiAuto.multipleValues = ['opt1', 'opt3'];
+ * </script>
+ *
+ * @slot (default) - Default slot for custom content (overridden by label or value if present)
+ */
 export class VdsAutocompleteItem {
     constructor() {
-        /** Sets the autocomplete in disabled state */
+        /**
+         * Sets the autocomplete item in disabled state, preventing user interaction.
+         * @type {boolean}
+         * @default false
+         */
         this.disabled = false;
-        /** Sets item in active state */
+        /**
+         * Sets the item in active state for visual feedback.
+         * @type {boolean}
+         * @default false
+         */
         this.isActive = false;
-        /** Set size of menu item */
+        /**
+         * Sets the size of the autocomplete item.
+         * @type {("small" | "medium" | "large")}
+         * @default "medium"
+         */
         this.size = "medium";
-        /** Shows checkmark */
+        /**
+         * Controls whether to show a checkmark or checkbox indicator.
+         * @type {boolean}
+         * @default false
+         */
         this.hasCheckmark = false;
-        /** Set state of checkmark */
+        /**
+         * Sets the selected state of the checkmark or checkbox.
+         * @type {boolean}
+         * @default false
+         */
         this.isSelected = false;
-        /** When has-checkmark is true, sets the checks element as checkmark or checkbox.  */
+        /**
+         * When hasCheckmark is true, sets the check element as checkmark or checkbox.
+         * @type {("checkbox" | "checkmark")}
+         * @default "checkmark"
+         */
         this.checkmarkVariant = "checkmark";
-        /** When has-checkmark is true, sets the checks element at the beginning or end.  */
+        /**
+         * When hasCheckmark is true, sets the check element position at the beginning or end.
+         * @type {("start" | "end")}
+         * @default "start"
+         */
         this.checkmarkAlignment = "start";
-        /** Sets the autocomplete item to danger state.  */
+        /**
+         * Sets the autocomplete item to danger state for destructive actions.
+         * @type {boolean}
+         * @default false
+         */
         this.danger = false;
     }
+    /**
+     * Watches the isSelected property and updates the active state accordingly.
+     * @private
+     * @returns {void}
+     */
     updateItemState() {
         this.isActive = this.isSelected;
     }
+    /**
+     * Handles click events on the autocomplete item.
+     * @private
+     * @param {MouseEvent} evt - The mouse click event
+     * @returns {void}
+     */
     handleClick(evt) {
         this.handleSelected(evt);
     }
+    /**
+     * Handles the selection/deselection logic and emits appropriate events.
+     * Emits selected or deselected event based on current state.
+     * Emits autocompleteClicked event with item value and selection state.
+     * @private
+     * @param {MouseEvent} evt - The mouse click event
+     * @returns {void}
+     */
     handleSelected(evt) {
         var _a;
         const selected = !this.isSelected;
@@ -38,23 +221,52 @@ export class VdsAutocompleteItem {
             selected,
         });
     }
+    /**
+     * Generates a checkmark icon button element.
+     * @private
+     * @returns {HTMLStencilElement} The checkmark icon button element
+     */
     generateCheckmarkIconButton() {
         return generateCheckmarkIconButton(this.isSelected, this.size, this.disabled, this.isActive, this.danger);
     }
+    /**
+     * Generates a checkbox element.
+     * @private
+     * @returns {HTMLStencilElement} The checkbox element
+     */
     generateCheckbox() {
         return generateCheckbox(this.isSelected, this.size, this.disabled, this.isActive, this.danger);
     }
+    /**
+     * Generates an informative icon element.
+     * @private
+     * @returns {HTMLStencilElement} The informative icon element
+     */
     generateInformativeIcon() {
         return generateInformativeIcon(this.informativeIcon, this.value, this.size, this.disabled, this.isActive, this.danger);
     }
+    /**
+     * Generates the label text element for the item.
+     * @private
+     * @returns {HTMLStencilElement} The label element
+     */
     generateLabel() {
-        return generateLabel(this.label || this.value, this.size, this.disabled, this.isActive, this.danger);
+        return generateLabel(this.label || this.value, this.size, this.disabled, this.isActive, this.danger, this.highlightText);
     }
+    /**
+     * Determines the aria-label text based on setAriaLabel, label, or value priority.
+     * @private
+     * @returns {string} The aria-label text
+     */
     setAriaLabelText() {
         return this.setAriaLabel ? this.setAriaLabel : this.label ? this.label : this.value;
     }
+    /**
+     * Renders the autocomplete item component.
+     * @returns {HTMLStencilElement} The root autocomplete item element
+     */
     render() {
-        return (h(Host, { key: 'a1915f40532484c9ac5a716bb50b9b3e165235c6', class: this.disabled ? "vds-autocomplete-item--disabled" : "" }, h("button", { key: '2d6443ae668e4d08d5cc7656b57b4272a6d2ff73', type: "button", tabindex: "0", disabled: this.disabled, title: this.setAriaLabelText(), "aria-label": this.setAriaLabelText(), onClick: (evt) => {
+        return (h(Host, { key: '37b1496f37599c008e88c811ff9ade4430f2972b', class: this.disabled ? "vds-autocomplete-item--disabled" : "" }, h("button", { key: '35baccb28cd5e3f915cc85a402a143d95ff6f00c', type: "button", tabindex: "0", disabled: this.disabled, title: this.setAriaLabelText(), "aria-label": this.setAriaLabelText(), onClick: (evt) => {
                 if (this.disabled) {
                     evt.stopPropagation();
                     evt.preventDefault();
@@ -62,7 +274,7 @@ export class VdsAutocompleteItem {
                 else {
                     this.handleClick(evt);
                 }
-            }, class: combineClasses("vds-autocomplete-item", `vds-autocomplete-item--size-${this.size}`, this.disabled ? "vds-autocomplete-item--disabled" : "", this.isActive || this.isSelected ? "vds-autocomplete-item--active" : "", this.danger ? "vds-autocomplete-item--danger" : "", `vds-autocomplete-item__alignment-${this.checkmarkAlignment}`) }, h("div", { key: 'da47766eaafb64b1bee718c613293d24077a0b3e', class: "vds-autocomplete-item__content" }, this.checkmarkAlignment === "start" && this.hasCheckmark
+            }, class: combineClasses("vds-autocomplete-item", `vds-autocomplete-item--size-${this.size}`, this.disabled ? "vds-autocomplete-item--disabled" : "", this.isActive || this.isSelected ? "vds-autocomplete-item--active" : "", this.danger ? "vds-autocomplete-item--danger" : "", `vds-autocomplete-item__alignment-${this.checkmarkAlignment}`) }, h("div", { key: '4bc9085196a0cc47ff4333c71f7af464659a75cc', class: "vds-autocomplete-item__content" }, this.checkmarkAlignment === "start" && this.hasCheckmark
             ? this.checkmarkVariant === "checkmark"
                 ? this.generateCheckmarkIconButton()
                 : this.generateCheckbox()
@@ -93,8 +305,14 @@ export class VdsAutocompleteItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the autocomplete in disabled state"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Sets the autocomplete item in disabled state, preventing user interaction."
                 },
                 "getter": false,
                 "setter": false,
@@ -113,8 +331,14 @@ export class VdsAutocompleteItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the icon value"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Sets the informative icon value displayed in the item."
                 },
                 "getter": false,
                 "setter": false,
@@ -132,8 +356,14 @@ export class VdsAutocompleteItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets item in active state"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Sets the item in active state for visual feedback."
                 },
                 "getter": false,
                 "setter": false,
@@ -152,8 +382,14 @@ export class VdsAutocompleteItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets item's value; This will be display as the text in the item when label is not present.\nWhen value is present as text to be display, it will override children content."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Sets the item's value; this will be displayed as text when label is not present.\nWhen value is present as text to display, it will override children content."
                 },
                 "getter": false,
                 "setter": false,
@@ -171,8 +407,14 @@ export class VdsAutocompleteItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets item's label; This will be display as the text in the item.\nWhen label is present, it will override children content and value when present."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Sets the item's label; this will be displayed as text in the item.\nWhen label is present, it will override children content and value."
                 },
                 "getter": false,
                 "setter": false,
@@ -190,8 +432,14 @@ export class VdsAutocompleteItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets aria-label"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Sets the aria-label for accessibility."
                 },
                 "getter": false,
                 "setter": false,
@@ -209,8 +457,14 @@ export class VdsAutocompleteItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Set size of menu item"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{(\"small\" | \"medium\" | \"large\")}"
+                        }, {
+                            "name": "default",
+                            "text": "\"medium\""
+                        }],
+                    "text": "Sets the size of the autocomplete item."
                 },
                 "getter": false,
                 "setter": false,
@@ -229,8 +483,14 @@ export class VdsAutocompleteItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Shows checkmark"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Controls whether to show a checkmark or checkbox indicator."
                 },
                 "getter": false,
                 "setter": false,
@@ -249,12 +509,18 @@ export class VdsAutocompleteItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Set state of checkmark"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Sets the selected state of the checkmark or checkbox."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
+                "reflect": false,
                 "attribute": "is-selected",
                 "defaultValue": "false"
             },
@@ -269,8 +535,14 @@ export class VdsAutocompleteItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "When has-checkmark is true, sets the checks element as checkmark or checkbox."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{(\"checkbox\" | \"checkmark\")}"
+                        }, {
+                            "name": "default",
+                            "text": "\"checkmark\""
+                        }],
+                    "text": "When hasCheckmark is true, sets the check element as checkmark or checkbox."
                 },
                 "getter": false,
                 "setter": false,
@@ -289,8 +561,14 @@ export class VdsAutocompleteItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "When has-checkmark is true, sets the checks element at the beginning or end."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{(\"start\" | \"end\")}"
+                        }, {
+                            "name": "default",
+                            "text": "\"start\""
+                        }],
+                    "text": "When hasCheckmark is true, sets the check element position at the beginning or end."
                 },
                 "getter": false,
                 "setter": false,
@@ -309,14 +587,45 @@ export class VdsAutocompleteItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the autocomplete item to danger state."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Sets the autocomplete item to danger state for destructive actions."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
                 "attribute": "danger",
                 "defaultValue": "false"
+            },
+            "highlightText": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Sets the text to be highlighted in the item when highlightText is provided."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "highlight-text"
             }
         };
     }
@@ -328,8 +637,26 @@ export class VdsAutocompleteItem {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits event when item gets clicked"
+                    "tags": [{
+                            "name": "event",
+                            "text": "autocompleteClicked"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<{value: string, selected: boolean}>}"
+                        }, {
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "warning",
+                            "text": "**Do not listen to this event directly.** This event is intended for\ninternal communication between `vds-autocomplete-item` and its parent\n`vds-basic-autocomplete` / `vds-autocomplete`. Listening to it externally\nmay produce unexpected behaviour or break in future versions.\n\n**Migration:** Replace any `autocompleteClicked` listener on `vds-autocomplete-item`\nwith the `selectedValueChanged` event on the parent `vds-basic-autocomplete` /\n`vds-autocomplete` instead:"
+                        }, {
+                            "name": "example",
+                            "text": "<!-- \u274C Avoid \u2013 internal event, do not use externally -->\n<script>\n  document.querySelector('vds-autocomplete-item')\n    .addEventListener('autocompleteClicked', (e) => {\n      console.log(e.detail.value, e.detail.selected);\n    });\n</script>"
+                        }, {
+                            "name": "example",
+                            "text": "<!-- \u2705 Recommended \u2013 listen on the parent autocomplete -->\n<vds-basic-autocomplete id=\"my-autocomplete\" placeholder=\"Select an option\">\n  <vds-autocomplete-item value=\"opt1\">Option 1</vds-autocomplete-item>\n  <vds-autocomplete-item value=\"opt2\">Option 2</vds-autocomplete-item>\n</vds-basic-autocomplete>\n<script>\n  // selectedValueChanged emits { label, value, target } for single selection,\n  // and valueChanged emits string[] for multiple selection.\n  document.getElementById('my-autocomplete')\n    .addEventListener('selectedValueChanged', (e) => {\n      console.log('label:', e.detail.label);\n      console.log('value:', e.detail.value);\n      console.log('target element:', e.detail.target);\n    });\n</script>"
+                        }],
+                    "text": "Emitted when the item is clicked.\nContains the item's value (label, value, or textContent) and selected state."
                 },
                 "complexType": {
                     "original": "{value: string, selected: boolean}",
@@ -343,8 +670,20 @@ export class VdsAutocompleteItem {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits event when item is selected"
+                    "tags": [{
+                            "name": "event",
+                            "text": "selected"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<MouseEvent>}"
+                        }, {
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "warning",
+                            "text": "**Do not listen to this event directly.** This event is for internal\nuse by the parent `vds-basic-autocomplete` / `vds-autocomplete` component.\nUse the `selectedValueChanged` event on the parent autocomplete component\nto react to selection changes. See the `autocompleteClicked` JSDoc for a\nfull migration example."
+                        }],
+                    "text": "Emitted when the item is selected."
                 },
                 "complexType": {
                     "original": "MouseEvent",
@@ -363,8 +702,20 @@ export class VdsAutocompleteItem {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits event when item is deselected"
+                    "tags": [{
+                            "name": "event",
+                            "text": "deselected"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<MouseEvent>}"
+                        }, {
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "warning",
+                            "text": "**Do not listen to this event directly.** This event is for internal\nuse by the parent `vds-basic-autocomplete` / `vds-autocomplete` component.\nUse the `valueChanged` event on the parent autocomplete component (which\nemits the updated `string[]` of selected values) to react to deselection.\nSee the `autocompleteClicked` JSDoc for a full migration example."
+                        }],
+                    "text": "Emitted when the item is deselected."
                 },
                 "complexType": {
                     "original": "MouseEvent",
@@ -386,4 +737,3 @@ export class VdsAutocompleteItem {
             }];
     }
 }
-//# sourceMappingURL=vds-autocomplete-item.js.map

package/dist/collection/components/autocomplete-item/vds-autocomplete-item.stories.js

@@ -49,6 +49,7 @@ ${style}
         ${args.informativeIcon ? `informative-icon="${args.informativeIcon}"` : ""}
         value="${args.value}"
         label="${args.label}"
+        highlight-text="${args.highlightText || ""}"
         set-aria-label="${args.setAriaLabel}"
         has-checkmark="${args.hasCheckmark}"
         checkmark-variant="${args.checkmarkVariant}"
@@ -64,6 +65,7 @@ export const BasicUsage = codeTemplate.bind({});
 BasicUsage.args = {
     size: "medium",
     label: "Item",
+    highlightText: "",
     value: "Item",
     setAriaLabel: "Item",
     disabled: false,
@@ -109,4 +111,3 @@ BasicCheckboxUsage.args = {
     danger: false,
     isSelected: true
 };
-//# sourceMappingURL=vds-autocomplete-item.stories.js.map