@pine-ds/core 3.7.0 → 3.8.0

package/dist/collection/components/pds-combobox/pds-combobox.js

@@ -45,7 +45,7 @@ export class PdsCombobox {
          */
         this.mode = 'filter';
         /**
-         * Determines the combobox trigger: 'input' (editable input) or 'button' (button-like, non-editable).
+         * Determines the combobox trigger: 'input' (editable input), 'button' (button-like, non-editable), or 'chip' (chip-like, non-editable).
          * @default 'input'
          */
         this.trigger = 'input';
@@ -59,10 +59,29 @@ export class PdsCombobox {
          * @default 'secondary'
          */
         this.triggerVariant = 'secondary';
+        /**
+         * The sentiment for the chip trigger. Matches Pine chip sentiments.
+         * @default 'neutral'
+         */
+        this.chipSentiment = 'neutral';
+        /**
+         * Whether the chip trigger should be displayed in a larger size.
+         * @default false
+         */
+        this.chipLarge = false;
+        /**
+         * Whether a dot should be displayed on the chip trigger.
+         * @default false
+         */
+        this.chipDot = false;
         /**
          * The value of the combobox input.
          */
         this.value = '';
+        /**
+         * Internal state for the display text shown in the input/trigger
+         */
+        this.displayText = '';
         /**
          * Internal state for filtered options and group labels
          */
@@ -83,11 +102,16 @@ export class PdsCombobox {
          * Internal state for the sanitized layout content of the selected option
          */
         this.selectedOptionLayoutContent = '';
+        /**
+         * Internal state to track chip properties for automatic rendering
+         */
+        this.selectedOptionChipProps = null;
         this.optionEls = [];
         this.allItems = [];
+        this.isUpdatingFromSelection = false;
         this.handleInput = (e) => {
             const target = e.target;
-            this.value = target.value;
+            this.displayText = target.value;
             this.isOpen = true;
             this.filterOptions();
             setTimeout(() => this.openDropdownPositioning(), 0);
@@ -97,6 +121,7 @@ export class PdsCombobox {
             if (!this.isOpen) {
                 this.isOpen = true;
                 this.filterOptions();
+                this.setInitialHighlightedIndex();
                 setTimeout(() => this.openDropdownPositioning(), 0);
             }
         };
@@ -106,10 +131,7 @@ export class PdsCombobox {
                 this.isOpen = true;
                 this.filterOptions();
                 // Set highlighted index immediately for testing
-                const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
-                if (selectableOptions.length > 0) {
-                    this.highlightedIndex = 0;
-                }
+                this.setInitialHighlightedIndex();
                 setTimeout(() => {
                     this.openDropdownPositioning();
                     // For input trigger, keep focus on input and use aria-activedescendant
@@ -188,6 +210,13 @@ export class PdsCombobox {
                         this.restoreFocusToTrigger();
                     }
                     break;
+                case ' ':
+                    e.preventDefault();
+                    if (this.highlightedIndex >= 0 && this.highlightedIndex < selectableOptions.length) {
+                        this.handleOptionClick(selectableOptions[this.highlightedIndex]);
+                        this.restoreFocusToTrigger();
+                    }
+                    break;
                 case 'Escape':
                     e.preventDefault();
                     this.isOpen = false;
@@ -232,12 +261,9 @@ export class PdsCombobox {
             if (this.isOpen) {
                 this.filterOptions();
                 // Set highlighted index and prepare for keyboard navigation
-                const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
-                if (selectableOptions.length > 0) {
-                    this.highlightedIndex = 0;
-                    // For button trigger, prepare for arrow-key navigation mode
-                    this.isArrowKeyNavigationMode = true;
-                }
+                this.setInitialHighlightedIndex();
+                // For button trigger, prepare for arrow-key navigation mode
+                this.isArrowKeyNavigationMode = true;
                 setTimeout(() => this.openDropdownPositioning(), 0);
             }
             else {
@@ -253,10 +279,7 @@ export class PdsCombobox {
                 this.isOpen = true;
                 this.filterOptions();
                 // Set highlighted index immediately
-                const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
-                if (selectableOptions.length > 0) {
-                    this.highlightedIndex = 0;
-                }
+                this.setInitialHighlightedIndex();
                 setTimeout(() => {
                     this.openDropdownPositioning();
                     // For all button trigger keyboard opening, focus the first option so subsequent navigation works
@@ -297,24 +320,110 @@ export class PdsCombobox {
                 this.highlightedIndex = -1;
                 this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
                 this.updateAriaActiveDescendant(); // Clear aria-activedescendant
-                // If there's a selected option but the input value doesn't match, restore the selected option's value
-                if (this.selectedOption && this.value !== this.getOptionLabel(this.selectedOption)) {
-                    this.value = this.getOptionLabel(this.selectedOption);
+                // If there's a selected option but the display text doesn't match, restore the selected option's display text
+                if (this.selectedOption && this.displayText !== this.getOptionLabel(this.selectedOption)) {
+                    this.displayText = this.getOptionLabel(this.selectedOption);
+                    // The @Watch('selectedOption') will handle value and form internals if needed
                 }
             }
         };
     }
+    connectedCallback() {
+        // Initialize ElementInternals for form association
+        if (this.el.attachInternals) {
+            this.internals = this.el.attachInternals();
+        }
+    }
     componentWillLoad() {
         this.updateOptions();
     }
+    componentDidLoad() {
+        var _a, _b, _c;
+        // Check for value-based preselection if no option is selected yet
+        if (!this.selectedOption && this.value && this.optionEls.length > 0) {
+            const matchingOption = this.optionEls.find(opt => opt.value === this.value);
+            if (matchingOption) {
+                this.setSelectedOption(matchingOption);
+                // Update the display text to show the option's text content
+                this.displayText = this.getOptionLabel(matchingOption);
+                // Keep this.value as the actual option value
+                // this.value remains unchanged (already matches matchingOption.value)
+            }
+        }
+        // Initialize form value with current value
+        if (this.internals) {
+            try {
+                this.internals.setFormValue((_c = (_b = (_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : this.value) !== null && _c !== void 0 ? _c : '');
+            }
+            catch (e) {
+                // ElementInternals.setFormValue not available in unit tests
+            }
+        }
+    }
     handleValueChange() {
         this.filterOptions();
+        // Sync with form internals for form association
+        if (this.internals) {
+            try {
+                this.internals.setFormValue(this.value);
+            }
+            catch (e) {
+                // ElementInternals.setFormValue not available in unit tests
+            }
+        }
+        // Find and select option that matches the value (for external value changes)
+        // Only do this if we're not already updating from a selection
+        if (!this.isUpdatingFromSelection && this.value && this.optionEls.length > 0) {
+            const currentSelectedValue = this.selectedOption ? this.selectedOption.value : null;
+            // If the value doesn't match the currently selected option's value, we need to update
+            if (this.value !== currentSelectedValue) {
+                const matchingOption = this.optionEls.find(opt => opt.value === this.value);
+                if (matchingOption) {
+                    this.isUpdatingFromSelection = true;
+                    this.setSelectedOption(matchingOption);
+                    // Update the display text to show the option's text content
+                    this.displayText = this.getOptionLabel(matchingOption);
+                    // Keep this.value as the actual option value (already correct)
+                    this.isUpdatingFromSelection = false;
+                }
+            }
+        }
     }
     handleSelectedOptionChange() {
         // Update the layout content when selected option changes
         this.selectedOptionLayoutContent = this.selectedOption && this.isOptionLayout(this.selectedOption)
             ? this.getOptionLayoutContent(this.selectedOption)
             : '';
+        // Update chip properties for automatic rendering when selected option changes
+        this.selectedOptionChipProps = this.selectedOption && this.isOptionChip(this.selectedOption)
+            ? this.getOptionChipProps(this.selectedOption)
+            : null;
+        // Update display text when selected option changes
+        if (this.selectedOption) {
+            this.displayText = this.getOptionLabel(this.selectedOption);
+            this.value = this.selectedOption.value;
+            // Update form internals with the actual option value
+            if (this.internals) {
+                try {
+                    this.internals.setFormValue(this.selectedOption.value);
+                }
+                catch (e) {
+                    // ElementInternals.setFormValue not available in unit tests
+                }
+            }
+        }
+        else {
+            this.displayText = '';
+            this.value = '';
+            if (this.internals) {
+                try {
+                    this.internals.setFormValue('');
+                }
+                catch (e) {
+                    // ElementInternals.setFormValue not available in unit tests
+                }
+            }
+        }
     }
     updateOptions() {
         var _a;
@@ -345,9 +454,29 @@ export class PdsCombobox {
                     this.allItems.push(el);
                 }
             });
-            // Set initial selected option if one exists (only check DOM on initialization)
-            if (!this.selectedOption) {
-                const initialSelected = this.optionEls.find(opt => opt.hasAttribute('selected')) || null;
+            // Set initial selected option based on value property
+            let initialSelected = null;
+            // Check if value property matches any option
+            if (this.value) {
+                initialSelected = this.optionEls.find(opt => opt.value === this.value) || null;
+                if (initialSelected) {
+                    // Update the display text to show the option's text content
+                    this.displayText = this.getOptionLabel(initialSelected);
+                    // Keep this.value as the actual option value (already correct)
+                }
+            }
+            // For chip triggers, ensure we always have a selected option
+            if (!initialSelected && this.trigger === 'chip' && this.optionEls.length > 0) {
+                initialSelected = this.optionEls[0]; // Select first option as default
+                this.value = initialSelected.value;
+                this.displayText = this.getOptionLabel(initialSelected);
+                console.warn('PDS Combobox: Chip triggers should always have a selected option. Automatically selected the first option.');
+            }
+            // Update selection if we found a different selected option or if we don't have one
+            if (initialSelected && initialSelected !== this.selectedOption) {
+                this.setSelectedOption(initialSelected);
+            }
+            else if (!this.selectedOption && initialSelected) {
                 this.setSelectedOption(initialSelected);
             }
             this.filterOptions();
@@ -397,6 +526,22 @@ export class PdsCombobox {
     isOptionLayout(option) {
         return this.customOptionLayouts && option.hasAttribute('data-layout');
     }
+    // Helper method to check if option has chip attributes (new automatic approach)
+    isOptionChip(option) {
+        return option.hasAttribute('chip-sentiment') ||
+            option.hasAttribute('chip-large') ||
+            option.hasAttribute('chip-icon') ||
+            option.hasAttribute('chip-dot');
+    }
+    // Helper method to get chip properties from option attributes
+    getOptionChipProps(option) {
+        return {
+            sentiment: option.getAttribute('chip-sentiment') || 'neutral',
+            large: option.hasAttribute('chip-large'),
+            icon: option.getAttribute('chip-icon') || undefined,
+            dot: option.hasAttribute('chip-dot')
+        };
+    }
     // Helper method to check if option is selected (single source of truth)
     isOptionSelected(option) {
         return this.selectedOption === option;
@@ -404,6 +549,13 @@ export class PdsCombobox {
     // Helper method to set selected option (centralized state management)
     setSelectedOption(option) {
         this.selectedOption = option;
+        // Immediately update chip properties for automatic rendering to ensure reactivity
+        if (option && this.isOptionChip(option)) {
+            this.selectedOptionChipProps = this.getOptionChipProps(option);
+        }
+        else {
+            this.selectedOptionChipProps = null;
+        }
     }
     filterOptions() {
         // Ensure allItems includes optionEls if not already populated (for edge cases)
@@ -414,7 +566,7 @@ export class PdsCombobox {
             this.filteredItems = [...this.allItems];
         }
         else {
-            const val = this.value.toLowerCase();
+            const val = this.displayText.toLowerCase();
             const filteredOptions = this.optionEls.filter(option => {
                 // For layout options, search both text content and data-search-text attribute
                 if (this.isOptionLayout(option)) {
@@ -470,7 +622,7 @@ export class PdsCombobox {
                     left: `${x}px`,
                     top: `${y}px`,
                     position: 'absolute',
-                    zIndex: 1000,
+                    zIndex: 'var(--pine-z-index-raised)',
                 });
             });
         }
@@ -487,6 +639,27 @@ export class PdsCombobox {
             (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }
+    /**
+     * Sets the initial highlighted index when dropdown opens.
+     * If there's a selected option, highlight it. Otherwise, highlight the first option.
+     */
+    setInitialHighlightedIndex() {
+        const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
+        if (selectableOptions.length === 0) {
+            this.highlightedIndex = -1;
+            return;
+        }
+        // If there's a selected option, find its index in the filtered options
+        if (this.selectedOption) {
+            const selectedIndex = selectableOptions.findIndex(option => option === this.selectedOption);
+            if (selectedIndex >= 0) {
+                this.highlightedIndex = selectedIndex;
+                return;
+            }
+        }
+        // No selected option or selected option not in filtered results, highlight first option
+        this.highlightedIndex = 0;
+    }
     /**
      * Focus management helper - moves focus to the first option when dropdown opens
      */
@@ -494,7 +667,7 @@ export class PdsCombobox {
         if (this.isOpen) {
             const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
             if (selectableOptions.length > 0) {
-                this.highlightedIndex = 0;
+                this.setInitialHighlightedIndex();
                 // DON'T focus the option elements - keep focus on trigger and use aria-activedescendant
                 // This prevents the focusout event that was closing the dropdown
                 // But still call updateOptionFocus for scrolling
@@ -513,20 +686,20 @@ export class PdsCombobox {
             this.isArrowKeyNavigationMode = true;
             const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
             if (selectableOptions.length > 0) {
-                this.highlightedIndex = 0;
-                // For arrow key navigation, actually focus the first option
+                this.setInitialHighlightedIndex();
+                // For arrow key navigation, actually focus the highlighted option
                 if (this.listboxEl) {
                     const optionElements = this.listboxEl.querySelectorAll('[role="option"]');
-                    const firstOption = optionElements[0];
-                    if (firstOption) {
+                    const highlightedOption = optionElements[this.highlightedIndex];
+                    if (highlightedOption) {
                         // Remove tabindex from all options first
                         optionElements.forEach(option => {
                             option.setAttribute('tabindex', '-1');
                         });
-                        // Set tabindex and focus on first option
-                        firstOption.setAttribute('tabindex', '0');
-                        firstOption.focus();
-                        firstOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+                        // Set tabindex and focus on highlighted option
+                        highlightedOption.setAttribute('tabindex', '0');
+                        highlightedOption.focus();
+                        highlightedOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
                     }
                 }
                 // Update aria-activedescendant on trigger
@@ -592,7 +765,7 @@ export class PdsCombobox {
     }
     // Get the label of the selected option
     get selectedLabel() {
-        return this.selectedOption ? this.getOptionLabel(this.selectedOption) : '';
+        return this.displayText || '';
     }
     // Get the layout content of the selected option for button trigger
     get selectedLayoutContent() {
@@ -602,10 +775,110 @@ export class PdsCombobox {
     get selectedHasLayout() {
         return this.selectedOption ? this.isOptionLayout(this.selectedOption) : false;
     }
+    // Extract chip sentiment from selected option's attributes, layout content, or slotted trigger content
+    get selectedChipSentiment() {
+        // First priority: Check selected option's chip attributes (new automatic approach)
+        if (this.selectedOption && this.isOptionChip(this.selectedOption)) {
+            const sentiment = this.selectedOption.getAttribute('chip-sentiment');
+            if (sentiment)
+                return sentiment;
+        }
+        // Second priority: Check selected option's layout content (existing custom layout approach)
+        if (this.selectedOption && this.isOptionLayout(this.selectedOption)) {
+            const chipElement = this.selectedOption.querySelector('pds-chip');
+            const sentiment = chipElement === null || chipElement === void 0 ? void 0 : chipElement.getAttribute('sentiment');
+            if (sentiment)
+                return sentiment;
+        }
+        // Third priority: Check if we have custom trigger content with a chip (initial state)
+        if (this.customTriggerContent) {
+            const slottedChip = this.el.querySelector('pds-chip[slot="trigger-content"]');
+            if (slottedChip) {
+                const sentiment = slottedChip.getAttribute('sentiment');
+                if (sentiment)
+                    return sentiment;
+            }
+        }
+        // Fallback: Use component props
+        return this.chipSentiment;
+    }
+    // Extract chip large from selected option's attributes, layout content, or slotted trigger content
+    get selectedChipLarge() {
+        // First priority: Check selected option's chip attributes (new automatic approach)
+        if (this.selectedOption && this.isOptionChip(this.selectedOption)) {
+            if (this.selectedOption.hasAttribute('chip-large'))
+                return true;
+        }
+        // Second priority: Check selected option's layout content (existing custom layout approach)
+        if (this.selectedOption && this.isOptionLayout(this.selectedOption)) {
+            const chipElement = this.selectedOption.querySelector('pds-chip');
+            if (chipElement === null || chipElement === void 0 ? void 0 : chipElement.hasAttribute('large'))
+                return true;
+        }
+        // Third priority: Check if we have custom trigger content with a chip (initial state)
+        if (this.customTriggerContent) {
+            const slottedChip = this.el.querySelector('pds-chip[slot="trigger-content"]');
+            if (slottedChip && slottedChip.hasAttribute('large')) {
+                return true;
+            }
+        }
+        // Fallback: Use component props
+        return this.chipLarge;
+    }
+    // Extract chip icon from selected option's attributes, layout content, or slotted trigger content
+    get selectedChipIcon() {
+        // First priority: Check selected option's chip attributes (new automatic approach)
+        if (this.selectedOption && this.isOptionChip(this.selectedOption)) {
+            const icon = this.selectedOption.getAttribute('chip-icon');
+            if (icon)
+                return icon;
+        }
+        // Second priority: Check selected option's layout content (existing custom layout approach)
+        if (this.selectedOption && this.isOptionLayout(this.selectedOption)) {
+            const chipElement = this.selectedOption.querySelector('pds-chip');
+            const icon = chipElement === null || chipElement === void 0 ? void 0 : chipElement.getAttribute('icon');
+            if (icon)
+                return icon;
+        }
+        // Third priority: Check if we have custom trigger content with a chip (initial state)
+        if (this.customTriggerContent) {
+            const slottedChip = this.el.querySelector('pds-chip[slot="trigger-content"]');
+            if (slottedChip) {
+                const icon = slottedChip.getAttribute('icon');
+                if (icon)
+                    return icon;
+            }
+        }
+        // Fallback: Use component props
+        return this.chipIcon;
+    }
+    // Extract chip dot from selected option's attributes, layout content, or slotted trigger content
+    get selectedChipDot() {
+        // First priority: Check selected option's chip attributes (new automatic approach)
+        if (this.selectedOption && this.isOptionChip(this.selectedOption)) {
+            if (this.selectedOption.hasAttribute('chip-dot'))
+                return true;
+        }
+        // Second priority: Check selected option's layout content (existing custom layout approach)
+        if (this.selectedOption && this.isOptionLayout(this.selectedOption)) {
+            const chipElement = this.selectedOption.querySelector('pds-chip');
+            if (chipElement === null || chipElement === void 0 ? void 0 : chipElement.hasAttribute('dot'))
+                return true;
+        }
+        // Third priority: Check if we have custom trigger content with a chip (initial state)
+        if (this.customTriggerContent) {
+            const slottedChip = this.el.querySelector('pds-chip[slot="trigger-content"]');
+            if (slottedChip && slottedChip.hasAttribute('dot')) {
+                return true;
+            }
+        }
+        // Fallback: Use component props
+        return this.chipDot;
+    }
     handleOptionClick(option) {
         // Update reactive state - single source of truth
+        // The @Watch('selectedOption') will handle displayText, value, and form internals
         this.setSelectedOption(option);
-        this.value = this.getOptionLabel(option);
         this.isOpen = false;
         this.pdsComboboxChange.emit({ value: option.value });
     }
@@ -629,12 +902,14 @@ export class PdsCombobox {
                 const isSelected = this.isOptionSelected(option);
                 const isHighlighted = this.highlightedIndex === optionIndex;
                 const isLayout = this.isOptionLayout(option);
+                const isChip = this.isOptionChip(option);
                 const currentOptionIndex = optionIndex++;
-                return (h("li", { key: option.value, id: `pds-combobox-option-${currentOptionIndex}`, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-setsize": selectableOptions.length, "aria-posinset": currentOptionIndex + 1, "aria-label": isLayout ? option.getAttribute('aria-label') || this.getOptionLabel(option) : undefined, tabindex: isHighlighted ? '0' : '-1', class: {
+                return (h("li", { key: option.value, id: `pds-combobox-option-${currentOptionIndex}`, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-setsize": selectableOptions.length, "aria-posinset": currentOptionIndex + 1, "aria-label": isLayout || isChip ? option.getAttribute('aria-label') || this.getOptionLabel(option) : undefined, tabindex: isHighlighted ? '0' : '-1', class: {
                         'pds-combobox__option': true,
                         'pds-combobox__option--highlighted': isHighlighted,
                         'pds-combobox__option--layout': isLayout,
-                    }, "data-option-index": currentOptionIndex, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter, onKeyDown: this.onOptionKeyDown }, isLayout ? (h("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : (this.getOptionLabel(option)), isSelected && h("pds-icon", { icon: "check", size: "regular", class: "pds-combobox__option-check" })));
+                        'pds-combobox__option--chip': isChip,
+                    }, "data-option-index": currentOptionIndex, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter, onKeyDown: this.onOptionKeyDown }, isLayout ? (h("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : isChip ? (this.renderOptionChip(option)) : (this.getOptionLabel(option)), isSelected && h("pds-icon", { icon: "check", size: "regular", class: "pds-combobox__option-check" })));
             }
             return null;
         })));
@@ -655,6 +930,23 @@ export class PdsCombobox {
     shouldShowLayoutContent() {
         return this.selectedHasLayout && !!this.selectedLayoutContent;
     }
+    // Helper method to build chip trigger CSS classes
+    getChipTriggerClass() {
+        const classes = ['pds-combobox__chip-trigger'];
+        // Add sentiment class
+        classes.push(`pds-combobox__chip-trigger--${this.selectedChipSentiment}`);
+        // Always use dropdown variant for chip triggers
+        classes.push('pds-combobox__chip-trigger--dropdown');
+        // Add large class if needed
+        if (this.selectedChipLarge) {
+            classes.push('pds-combobox__chip-trigger--large');
+        }
+        // Add dot class if needed
+        if (this.selectedChipDot) {
+            classes.push('pds-combobox__chip-trigger--dot');
+        }
+        return classes.join(' ');
+    }
     renderButtonTriggerContent() {
         // Case 1: Custom trigger content with layout priority
         if (this.customTriggerContent) {
@@ -671,15 +963,81 @@ export class PdsCombobox {
         // Case 3: Standard mode with default text content
         return [this.renderDefaultContent(), this.renderCaretIcon()];
     }
+    renderChipTriggerContent() {
+        // Case 1: Custom trigger content with layout priority
+        if (this.customTriggerContent) {
+            if (this.shouldShowLayoutContent()) {
+                // When using custom layouts, the chip handles its own dropdown arrow
+                return this.renderChipTriggerLayoutContent();
+            }
+            // Fall back to slot content when no layout is available - chip handles its own dropdown arrow
+            return h("slot", { name: "trigger-content" });
+        }
+        // Case 2: Standard mode with layout content
+        if (this.shouldShowLayoutContent()) {
+            // When using custom layouts, the chip handles its own dropdown arrow
+            return this.renderChipTriggerLayoutContent();
+        }
+        // Case 3: Automatic chip mode - selected option has chip attributes
+        if (this.selectedOption && this.selectedOptionChipProps) {
+            // Render as chip automatically - chip handles its own dropdown arrow
+            return this.renderSelectedOptionAsChip();
+        }
+        // Case 4: Standard mode with default text content
+        return [
+            this.renderChipTriggerDefaultContent(),
+            this.renderCaretIcon()
+        ];
+    }
+    // Helper method to render selected option as chip for trigger (automatic approach)
+    renderSelectedOptionAsChip() {
+        if (!this.selectedOption || !this.selectedOptionChipProps)
+            return null;
+        return (h("pds-chip", { sentiment: this.selectedOptionChipProps.sentiment, variant: "dropdown" // Always use dropdown variant for triggers
+            ,
+            large: this.selectedOptionChipProps.large, icon: this.selectedOptionChipProps.icon, dot: this.selectedOptionChipProps.dot, class: "pds-combobox__chip-trigger-auto" }, this.getOptionLabel(this.selectedOption)));
+    }
+    // Helper method to render chip trigger layout content
+    renderChipTriggerLayoutContent() {
+        return (h("div", { class: "pds-combobox__chip-trigger-layout-wrapper", innerHTML: this.getModifiedLayoutContentForTrigger() }));
+    }
+    // Helper method to modify layout content for trigger use (ensure dropdown variant)
+    getModifiedLayoutContentForTrigger() {
+        let content = this.selectedLayoutContent;
+        // If the content contains a pds-chip, ensure it has variant="dropdown"
+        if (content.includes('<pds-chip')) {
+            // Use a temporary div to parse and modify the HTML
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = content;
+            const chipElement = tempDiv.querySelector('pds-chip');
+            if (chipElement) {
+                chipElement.setAttribute('variant', 'dropdown');
+                content = tempDiv.innerHTML;
+            }
+        }
+        return content;
+    }
+    // Helper method to render chip trigger default content
+    renderChipTriggerDefaultContent() {
+        return (h("span", { class: "pds-combobox__chip-trigger-label" }, this.selectedChipIcon && h("pds-icon", { icon: this.selectedChipIcon, class: "pds-combobox__chip-trigger-icon" }), this.selectedLabel || this.placeholder));
+    }
+    // Helper method to render option as chip (new automatic approach)
+    renderOptionChip(option) {
+        const chipProps = this.getOptionChipProps(option);
+        return (h("pds-chip", { sentiment: chipProps.sentiment, variant: "text" // Dropdown options use text variant, not dropdown
+            ,
+            large: chipProps.large, icon: chipProps.icon, dot: chipProps.dot, class: "pds-combobox__option-chip" }, this.getOptionLabel(option)));
+    }
     render() {
         const triggerClass = `pds-combobox__button-trigger pds-combobox__button-trigger--${this.triggerVariant}`;
-        return (h(Host, { key: 'a7e29f0e0c5ee43f1516b3668dbabb3231ecf728' }, h("div", { key: '67da7d8953761ec64f30a4292785b7e8ed5d1449', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut }, this.label && (h("label", { key: '0f013de1a3d6ccdce2fe31c18b144f7178a2c30f', htmlFor: this.componentId, class: "pds-combobox__label" }, h("span", { key: '3c7dfa84d68565e10b5784aa2365d9c5164b7d06', class: this.hideLabel ? 'visually-hidden' : '' }, this.label))), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("input", { ref: el => {
+        return (h(Host, { key: 'd62992abd6eae05cfff52cfc0272490ca6370291' }, h("div", { key: 'affff971535065b7352daee494742bf7b65a61f4', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut }, this.label && (h("label", { key: 'c27f88928932bc4535698cb88595b1559cb22e55', htmlFor: this.componentId, class: "pds-combobox__label" }, h("span", { key: '0b65e67897735819cb2a4dc7d6d7d355af2f28d5', class: this.hideLabel ? 'visually-hidden' : '' }, this.label))), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("input", { ref: el => {
                 this.inputEl = el;
                 this.triggerEl = el;
-            }, class: "pds-combobox__input", type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), h("div", { key: 'cbf26d489f2ffc32fc1f0820f962aef74b62bed4', style: { display: 'none' } }, h("slot", { key: 'ad01cd795f9cd5aba1bbe25d0dac2d489b3e5f20', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
+            }, class: "pds-combobox__input", type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), h("div", { key: '47c259c2bc5b6f4f1d249d9bddd476b11c5a90fe', style: { display: 'none' } }, h("slot", { key: '83355a804fe978b6fb58838b4174bc815cf2f933', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
     }
     static get is() { return "pds-combobox"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["pds-combobox.scss"]
@@ -711,6 +1069,25 @@ export class PdsCombobox {
                 "attribute": "component-id",
                 "reflect": false
             },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the form control. Submitted with the form as part of a name/value pair."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": true
+            },
             "customOptionLayouts": {
                 "type": "boolean",
                 "mutable": false,
@@ -927,8 +1304,8 @@ export class PdsCombobox {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'input' | 'button'",
-                    "resolved": "\"button\" | \"input\"",
+                    "original": "'input' | 'button' | 'chip'",
+                    "resolved": "\"button\" | \"chip\" | \"input\"",
                     "references": {}
                 },
                 "required": false,
@@ -938,7 +1315,7 @@ export class PdsCombobox {
                             "name": "default",
                             "text": "'input'"
                         }],
-                    "text": "Determines the combobox trigger: 'input' (editable input) or 'button' (button-like, non-editable)."
+                    "text": "Determines the combobox trigger: 'input' (editable input), 'button' (button-like, non-editable), or 'chip' (chip-like, non-editable)."
                 },
                 "getter": false,
                 "setter": false,
@@ -992,6 +1369,100 @@ export class PdsCombobox {
                 "reflect": false,
                 "defaultValue": "'secondary'"
             },
+            "chipSentiment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ChipSentimentType",
+                    "resolved": "\"accent\" | \"brand\" | \"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
+                    "references": {
+                        "ChipSentimentType": {
+                            "location": "import",
+                            "path": "@utils/types",
+                            "id": "src/utils/types.ts::ChipSentimentType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'neutral'"
+                        }],
+                    "text": "The sentiment for the chip trigger. Matches Pine chip sentiments."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "chip-sentiment",
+                "reflect": false,
+                "defaultValue": "'neutral'"
+            },
+            "chipLarge": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the chip trigger should be displayed in a larger size."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "chip-large",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "chipIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the icon to display in the chip trigger."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "chip-icon",
+                "reflect": false
+            },
+            "chipDot": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether a dot should be displayed on the chip trigger."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "chip-dot",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "value": {
                 "type": "string",
                 "mutable": true,
@@ -1016,11 +1487,13 @@ export class PdsCombobox {
     }
     static get states() {
         return {
+            "displayText": {},
             "filteredItems": {},
             "highlightedIndex": {},
             "isOpen": {},
             "selectedOption": {},
-            "selectedOptionLayoutContent": {}
+            "selectedOptionLayoutContent": {},
+            "selectedOptionChipProps": {}
         };
     }
     static get events() {