@pine-ds/core 3.14.2 → 3.15.1

package/components/pds-multiselect.js

@@ -3,11 +3,13 @@ import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shi
 import { d as debounceEvent } from './utils.js';
 import { a as assignDescription, m as messageId } from './form.js';
 import { g as enlarge, h as danger } from './index2.js';
-import { d as defineCustomElement$4 } from './pds-checkbox2.js';
-import { d as defineCustomElement$3 } from './pds-icon2.js';
-import { d as defineCustomElement$2 } from './pds-loader2.js';
+import { d as defineCustomElement$6 } from './pds-box2.js';
+import { d as defineCustomElement$5 } from './pds-checkbox2.js';
+import { d as defineCustomElement$4 } from './pds-icon2.js';
+import { d as defineCustomElement$3 } from './pds-loader2.js';
+import { d as defineCustomElement$2 } from './pds-text2.js';
 
-const pdsMultiselectCss = ":host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-550);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color 0.2s ease, -webkit-box-shadow 0.2s ease;transition:border-color 0.2s ease, -webkit-box-shadow 0.2s ease;transition:border-color 0.2s ease, box-shadow 0.2s ease;transition:border-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__panel{background:var(--pine-color-background-container);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{pointer-events:none;width:100%}.pds-multiselect__option:hover,.pds-multiselect__option.pds-multiselect__option--highlighted{background:var(--pine-color-background-muted)}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}";
+const pdsMultiselectCss = ":host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-550);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color 0.2s ease, -webkit-box-shadow 0.2s ease;transition:border-color 0.2s ease, -webkit-box-shadow 0.2s ease;transition:border-color 0.2s ease, box-shadow 0.2s ease;transition:border-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__panel{background:var(--pine-color-background-container);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{pointer-events:none;width:100%}.pds-multiselect__option:hover,.pds-multiselect__option.pds-multiselect__option--highlighted{background:var(--pine-color-background-muted)}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}";
 
 const PdsMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class PdsMultiselect extends HTMLElement {
     constructor(registerHost) {
@@ -19,6 +21,7 @@ const PdsMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class PdsMultiselect e
         this.pdsMultiselectChange = createEvent(this, "pdsMultiselectChange", 7);
         this.pdsMultiselectSearch = createEvent(this, "pdsMultiselectSearch", 7);
         this.pdsMultiselectLoadOptions = createEvent(this, "pdsMultiselectLoadOptions", 7);
+        this.pdsMultiselectCreate = createEvent(this, "pdsMultiselectCreate", 7);
         /**
          * Placeholder text for the input field.
          */
@@ -39,6 +42,10 @@ const PdsMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class PdsMultiselect e
          * Debounce delay in milliseconds for search/fetch.
          */
         this.debounce = 300;
+        /**
+         * Timeout in milliseconds for async fetch requests.
+         */
+        this.fetchTimeout = 30000;
         /**
          * Maximum height of the dropdown before scrolling.
          */
@@ -71,6 +78,7 @@ const PdsMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class PdsMultiselect e
         this.selectedItems = [];
         this.currentPage = 1;
         this.hasMore = false;
+        this.creating = false;
         // Flag to prevent focusout from closing during open transition
         this.isOpening = false;
         this.handleTriggerClick = () => {
@@ -303,6 +311,10 @@ const PdsMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class PdsMultiselect e
             window.clearTimeout(this.fetchDebounceTimer);
             this.fetchDebounceTimer = undefined;
         }
+        if (this.fetchTimeoutTimer !== undefined) {
+            window.clearTimeout(this.fetchTimeoutTimer);
+            this.fetchTimeoutTimer = undefined;
+        }
         (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
         this.abortController = undefined;
     }
@@ -323,9 +335,25 @@ const PdsMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class PdsMultiselect e
         // Ensure value is an array (may be string from HTML attribute)
         const valueArray = this.ensureValueArray();
         const allOptions = this.getAllOptions();
-        this.selectedItems = valueArray
-            .map(val => allOptions.find(opt => String(opt.id) === String(val)))
-            .filter((opt) => opt !== undefined);
+        // Map values to options, preserving existing selectedItems for values not yet in options
+        const newSelectedItems = [];
+        const existingItemsMap = new Map(this.selectedItems.map(item => [String(item.id), item]));
+        valueArray.forEach(val => {
+            // First try to find in available options
+            const option = allOptions.find(opt => String(opt.id) === String(val));
+            if (option) {
+                newSelectedItems.push(option);
+            }
+            else if (existingItemsMap.has(String(val))) {
+                // If not in options but exists in current selectedItems, preserve it
+                // This handles the case where async data hasn't loaded yet or newly created items
+                newSelectedItems.push(existingItemsMap.get(String(val)));
+            }
+            // Note: We don't create placeholders for values without matching options.
+            // This ensures selectedItems remains empty until options are actually loaded,
+            // which matches the expected behavior for preselected values.
+        });
+        this.selectedItems = newSelectedItems;
     }
     ensureValueArray() {
         // Handle JSON string values passed via HTML attribute
@@ -352,13 +380,22 @@ const PdsMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class PdsMultiselect e
     getFilteredOptions() {
         const allOptions = this.getAllOptions();
         const query = this.searchQuery.toLowerCase();
-        return allOptions.filter(opt => {
+        const filtered = allOptions.filter(opt => {
             // Filter by search query only - don't filter out selected items
             if (query) {
                 return opt.text.toLowerCase().includes(query);
             }
             return true;
         });
+        // Add create option if enabled and no matches found
+        if (this.createUrl && this.searchQuery.trim() && filtered.length === 0) {
+            return [{
+                    id: '__create__',
+                    text: this.searchQuery.trim(),
+                    isCreateOption: true,
+                }];
+        }
+        return filtered;
     }
     updateFormValue() {
         var _a;
@@ -382,33 +419,79 @@ const PdsMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class PdsMultiselect e
             }
         }
     }
+    getCsrfToken() {
+        // Use provided token if available
+        if (this.csrfToken) {
+            return this.csrfToken;
+        }
+        // Try to read from meta tag
+        const metaTag = document.querySelector('meta[name="csrf-token"]');
+        return (metaTag === null || metaTag === void 0 ? void 0 : metaTag.content) || null;
+    }
     async fetchOptions(query, page = 1) {
         var _a;
         if (!this.asyncUrl)
             return;
+        // Abort any pending request and clear existing timeout
         (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+        if (this.fetchTimeoutTimer !== undefined) {
+            window.clearTimeout(this.fetchTimeoutTimer);
+            this.fetchTimeoutTimer = undefined;
+        }
         this.abortController = new AbortController();
         this.loading = true;
+        // Set up timeout for fetch request
+        this.fetchTimeoutTimer = window.setTimeout(() => {
+            var _a;
+            (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+            this.fetchTimeoutTimer = undefined;
+        }, this.fetchTimeout);
         try {
-            const url = new URL(this.asyncUrl, window.location.origin);
+            // Guard against malformed asyncUrl
+            let url;
+            try {
+                url = new URL(this.asyncUrl, window.location.origin);
+            }
+            catch (urlError) {
+                throw new TypeError(`Invalid asyncUrl: ${this.asyncUrl}`);
+            }
             if (this.asyncMethod === 'GET') {
                 url.searchParams.set('search', query);
                 url.searchParams.set('page', String(page));
             }
-            const response = await fetch(url.toString(), Object.assign({ method: this.asyncMethod, signal: this.abortController.signal, headers: {
-                    'Content-Type': 'application/json',
-                    'Accept': 'application/json',
-                } }, (this.asyncMethod === 'POST' && {
+            const csrfToken = this.getCsrfToken();
+            const headers = {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json',
+            };
+            if (csrfToken) {
+                headers['X-CSRF-Token'] = csrfToken;
+            }
+            const response = await fetch(url.toString(), Object.assign({ method: this.asyncMethod, signal: this.abortController.signal, headers }, (this.asyncMethod === 'POST' && {
                 body: JSON.stringify({ search: query, page }),
             })));
+            // Clear timeout on successful response
+            if (this.fetchTimeoutTimer !== undefined) {
+                window.clearTimeout(this.fetchTimeoutTimer);
+                this.fetchTimeoutTimer = undefined;
+            }
             if (!response.ok)
                 throw new Error('Failed to fetch options');
             const data = await response.json();
             const formattedResults = data.results.map(item => {
+                // If formatResult is provided, use it
                 if (this.formatResult) {
                     return this.formatResult(item);
                 }
-                return Object.assign({ id: item.id, text: item.text }, item);
+                // Defensive check: ensure item is an object before spreading
+                if (typeof item === 'object' && item !== null) {
+                    return Object.assign({ id: item.id, text: item.text }, item);
+                }
+                // Handle primitives by converting to safe shape
+                return {
+                    id: String(item),
+                    text: String(item),
+                };
             });
             if (page === 1) {
                 this.internalOptions = formattedResults;
@@ -420,6 +503,11 @@ const PdsMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class PdsMultiselect e
             this.currentPage = page;
         }
         catch (error) {
+            // Clear timeout on error
+            if (this.fetchTimeoutTimer !== undefined) {
+                window.clearTimeout(this.fetchTimeoutTimer);
+                this.fetchTimeoutTimer = undefined;
+            }
             if (error.name !== 'AbortError') {
                 console.error('PdsMultiselect: Failed to fetch options', error);
             }
@@ -428,6 +516,64 @@ const PdsMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class PdsMultiselect e
             this.loading = false;
         }
     }
+    async createOption(query) {
+        if (!this.createUrl || !query.trim())
+            return;
+        // Reentrancy guard: prevent duplicate POSTs if creation is already in-flight
+        if (this.creating)
+            return;
+        this.creating = true;
+        try {
+            const url = new URL(this.createUrl, window.location.origin);
+            const csrfToken = this.getCsrfToken();
+            const headers = {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json',
+            };
+            if (csrfToken) {
+                headers['X-CSRF-Token'] = csrfToken;
+            }
+            const response = await fetch(url.toString(), {
+                method: 'POST',
+                headers,
+                body: JSON.stringify({ text: query.trim() }),
+            });
+            if (!response.ok)
+                throw new Error('Failed to create option');
+            const data = await response.json();
+            const newOption = Object.assign({ id: data.id, text: data.text }, data);
+            // Add to internal options first
+            this.internalOptions = [...this.internalOptions, newOption];
+            // Select the new option
+            this.value = [...this.value, String(newOption.id)];
+            // Sync selected items to update display with new option
+            this.syncSelectedItems();
+            // Emit create event
+            this.pdsMultiselectCreate.emit({
+                query: query.trim(),
+                newOption,
+            });
+            // Emit change event with synced items
+            this.pdsMultiselectChange.emit({
+                values: this.value,
+                items: this.selectedItems,
+            });
+            // Clear search and keep dropdown open
+            this.searchQuery = '';
+            this.highlightedIndex = -1;
+            // Focus back on search input
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        }
+        catch (error) {
+            console.error('PdsMultiselect: Failed to create option', error);
+        }
+        finally {
+            this.creating = false;
+        }
+    }
     openDropdown() {
         if (this.disabled)
             return;
@@ -506,30 +652,33 @@ const PdsMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class PdsMultiselect e
     }
     toggleOption(option) {
         var _a;
+        // Handle create option
+        if (option.isCreateOption) {
+            // Prevent multiple create calls while one is in-flight
+            if (!this.creating) {
+                this.createOption(this.searchQuery);
+            }
+            return;
+        }
         const isSelected = this.value.includes(String(option.id));
         if (isSelected) {
             // Remove from selection
-            const newValue = this.value.filter(v => v !== String(option.id));
-            this.value = newValue;
-            const newSelectedItems = this.selectedItems.filter(item => String(item.id) !== String(option.id));
-            this.pdsMultiselectChange.emit({
-                values: newValue,
-                items: newSelectedItems,
-            });
+            this.value = this.value.filter(v => v !== String(option.id));
         }
         else {
             // Add to selection
             if (this.maxSelections && this.value.length >= this.maxSelections) {
                 return;
             }
-            const newValue = [...this.value, String(option.id)];
-            this.value = newValue;
-            const newSelectedItems = [...this.selectedItems, option];
-            this.pdsMultiselectChange.emit({
-                values: newValue,
-                items: newSelectedItems,
-            });
+            this.value = [...this.value, String(option.id)];
         }
+        // Sync selected items to ensure no duplicates and accurate state
+        this.syncSelectedItems();
+        // Emit change event with synced items
+        this.pdsMultiselectChange.emit({
+            values: this.value,
+            items: this.selectedItems,
+        });
         // Keep focus on search input, don't close dropdown
         (_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
@@ -551,13 +700,17 @@ const PdsMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class PdsMultiselect e
         const hasSlottedLoading = !!this.el.querySelector('[slot="loading"]');
         return (h("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, h("div", { class: "pds-multiselect__search" }, h("pds-icon", { name: "search", size: "small" }), h("input", { ref: el => (this.searchInputEl = el), type: "text", class: "pds-multiselect__search-input", placeholder: "Find...", value: this.searchQuery, "aria-label": "Search options", "aria-controls": `${this.componentId}-listbox`, "aria-activedescendant": this.highlightedIndex >= 0 ? `${this.componentId}-option-${this.highlightedIndex}` : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": "true", "aria-autocomplete": "list", autocomplete: "off", onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchInputKeyDown })), this.renderSelectedItemsList(), h("ul", { class: "pds-multiselect__listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label || 'Options', id: `${this.componentId}-listbox`, ref: el => (this.listboxEl = el), style: { maxHeight: this.maxHeight }, onScroll: this.handleScroll }, this.loading && (h("li", { class: "pds-multiselect__loading", role: "presentation" }, hasSlottedLoading ? (h("slot", { name: "loading" })) : (h("pds-loader", { size: "small" })))), !this.loading && filteredOptions.length === 0 && (h("li", { class: "pds-multiselect__empty", role: "presentation" }, hasSlottedEmpty ? (h("slot", { name: "empty" })) : (h("span", null, "No options found")))), filteredOptions.map((option, index) => {
             const isSelected = valueArray.includes(String(option.id));
-            const isHighlighted = index === this.highlightedIndex;
+            const isCreateOption = option.isCreateOption;
+            const isHighlighted = index === this.highlightedIndex && !isCreateOption;
             const optionId = `${this.componentId}-option-${index}`;
+            const isCreateDisabled = isCreateOption && this.creating;
             return (h("li", { key: String(option.id), id: optionId, class: {
                     'pds-multiselect__option': true,
                     'pds-multiselect__option--highlighted': isHighlighted,
                     'pds-multiselect__option--selected': isSelected,
-                }, role: "option", "aria-selected": isSelected ? 'true' : 'false', "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onMouseEnter: this.handleOptionMouseEnter(index) }, h("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, style: { pointerEvents: 'none' } })));
+                    'pds-multiselect__option--create': isCreateOption,
+                    'pds-multiselect__option--disabled': isCreateDisabled,
+                }, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? `Create new tag: ${option.text}` : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onMouseEnter: this.handleOptionMouseEnter(index) }, isCreateOption ? (h("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, h("pds-icon", { name: "add", size: "small" }), h("pds-text", null, "Add \"", option.text, "\""))) : (h("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, style: { pointerEvents: 'none' } }))));
         }), this.hasMore && !this.loading && (h("li", { class: "pds-multiselect__load-more", role: "presentation" }, h("pds-loader", { size: "small" }))))));
     }
     getTriggerText() {
@@ -569,19 +722,19 @@ const PdsMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class PdsMultiselect e
     }
     render() {
         const hasSelections = this.selectedItems.length > 0;
-        return (h(Host, { key: 'e7d872fd9bedb03390eaf8a2bd9c5d6ba1cc7ecc', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '141dee3c657dd17d3389d4a25979d0f748e36361', class: "pds-multiselect" }, this.label && (h("label", { key: '386114a823424506857a1e927a2538e88d3c82f5', htmlFor: this.componentId, class: {
+        return (h(Host, { key: '5eabf872bf4e4f109106c0dd7f9fc8ea48e8c0c0', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '2623280ddbb4e116da4dbf0fe9123b5f06f0da0c', class: "pds-multiselect" }, this.label && (h("label", { key: 'ec644a7af54ca4dcdece849c6df692fae268b445', htmlFor: this.componentId, class: {
                 'pds-multiselect__label': true,
                 'visually-hidden': this.hideLabel,
-            } }, this.label)), h("div", { key: '9fc18bf93f981ee7f72f31c20f43f5251ed647e4', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), onFocusout: this.handleContainerFocusOut, style: { width: this.triggerWidth } }, h("button", { key: '74e8eb5ef5984307dce779ef63d54e49e07497ea', ref: el => (this.triggerEl = el), type: "button", class: {
+            } }, this.label)), h("div", { key: 'ae08d5be617ee801a730fd9289146e82f2df8258', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), onFocusout: this.handleContainerFocusOut, style: { width: this.triggerWidth } }, h("button", { key: 'c4639d573de4bb7963f848284057afcf9cc65cb9', ref: el => (this.triggerEl = el), type: "button", class: {
                 'pds-multiselect__trigger': true,
                 'pds-multiselect__trigger--open': this.isOpen,
                 'pds-multiselect__trigger--disabled': this.disabled,
                 'pds-multiselect__trigger--invalid': this.invalid || !!this.errorMessage,
                 'pds-multiselect__trigger--has-value': hasSelections,
-            }, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, h("span", { key: 'fb7f9b9fffd46839ddc4ab0bb549b61de191f76c', class: {
+            }, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, h("span", { key: 'b16da29ea9a98d6672813d9c142ef63135b12dca', class: {
                 'pds-multiselect__trigger-text': true,
                 'pds-multiselect__trigger-text--placeholder': !hasSelections,
-            } }, this.getTriggerText()), h("pds-icon", { key: '354e1c57758350d73557a6c94d0b31eb6732f12a', class: "pds-multiselect__icon", icon: enlarge })), this.renderDropdown()), this.helperMessage && !this.errorMessage && (h("p", { key: '3709f184a7972e1acfd3826faefc4ba139a8d518', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: '8029b58286455b7b4789a4336a79c324ca91ad74', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'cd781f3caed8b81deef2ce43f0a4406b6ed2d53c', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '7c303f4d64247b41b9e88892cfb8c02acd5d8d59', style: { display: 'none' } }, h("slot", { key: 'e9b384038e67bb951613933bbf68fd2b2efc71ef' })))));
+            } }, this.getTriggerText()), h("pds-icon", { key: '4e86739529355331c9fa6b95b63f223d5a315ad5', class: "pds-multiselect__icon", icon: enlarge })), this.renderDropdown()), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: '34cd42ddb1725546ce367699ef520e37d24cae25', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: '0eada43d1bcb44ea7b95927dd3f799aff6cc6b3a', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '546dcc24794d274d73b3de867b79123b6f0069fc', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '3921e646c9e3638077c016e7cb28a19adaa302f0', style: { display: 'none' } }, h("slot", { key: '3923872eaae0a59da8c4a5b9801abf41ae9a3c3d' })))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }
@@ -602,6 +755,7 @@ const PdsMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class PdsMultiselect e
         "asyncUrl": [1, "async-url"],
         "asyncMethod": [1, "async-method"],
         "debounce": [2],
+        "fetchTimeout": [2, "fetch-timeout"],
         "maxSelections": [2, "max-selections"],
         "maxHeight": [1, "max-height"],
         "triggerWidth": [1, "trigger-width"],
@@ -615,6 +769,8 @@ const PdsMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class PdsMultiselect e
         "loading": [1028],
         "options": [16],
         "formatResult": [16],
+        "createUrl": [1, "create-url"],
+        "csrfToken": [1, "csrf-token"],
         "isOpen": [32],
         "searchQuery": [32],
         "highlightedIndex": [32],
@@ -622,6 +778,7 @@ const PdsMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class PdsMultiselect e
         "selectedItems": [32],
         "currentPage": [32],
         "hasMore": [32],
+        "creating": [32],
         "setFocus": [64]
     }, [[8, "keydown", "handleWindowKeyDown"]], {
         "debounce": ["setupDebounce"],
@@ -633,24 +790,34 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pds-multiselect", "pds-checkbox", "pds-icon", "pds-loader"];
+    const components = ["pds-multiselect", "pds-box", "pds-checkbox", "pds-icon", "pds-loader", "pds-text"];
     components.forEach(tagName => { switch (tagName) {
         case "pds-multiselect":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PdsMultiselect$1);
             }
             break;
+        case "pds-box":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
         case "pds-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "pds-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "pds-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "pds-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }