@salla.sa/ui-ai-kit-core 1.0.0 → 1.1.1

package/dist/collection/components/ai-message-input/ai-message-input.js

@@ -7,21 +7,38 @@ export class MessageInput {
     disabled = false;
     /** Whether to show the voice recording button */
     showVoiceButton = true;
+    /** Maximum characters allowed */
+    maxLength = 4000;
+    /** External prop to show/hide the inline voice recorder */
+    isRecording = false;
     inputValue = '';
+    showVoiceRecorder = false;
+    isMultiline = false;
     textareaRef;
     /** Event emitted when a message is sent */
     sendMessage;
-    /** Event emitted when the voice button is clicked — caller controls rendering the voice recorder */
-    voiceButtonClick;
+    /** Event emitted when voice recording is complete and audio is ready */
+    voiceAudioReady;
+    onIsRecordingChange(newVal) {
+        this.showVoiceRecorder = newVal;
+    }
     /** Set the textarea value programmatically (e.g. after speech-to-text transcription) */
     async setInputValue(value) {
         this.inputValue = value;
         if (this.textareaRef) {
-            this.textareaRef.style.height = 'auto';
-            this.textareaRef.style.height = `${this.textareaRef.scrollHeight}px`;
+            // Set value imperatively before measuring to avoid stale scrollHeight from async render queue
+            this.textareaRef.value = value;
+            this.updateHeight();
             this.textareaRef.focus();
         }
     }
+    updateHeight = () => {
+        if (!this.textareaRef)
+            return;
+        this.textareaRef.style.height = 'auto';
+        this.textareaRef.style.height = `${this.textareaRef.scrollHeight}px`;
+        this.isMultiline = this.textareaRef.scrollHeight > 28;
+    };
     handleSendMessage = () => {
         if (!this.inputValue.trim() || this.disabled)
             return;
@@ -29,25 +46,36 @@ export class MessageInput {
         this.inputValue = '';
         if (this.textareaRef) {
             this.textareaRef.style.height = 'auto';
+            this.isMultiline = false;
         }
     };
-    handleKeyPress = (e) => {
+    handleKeyDown = (e) => {
         if (e.key === 'Enter' && !e.shiftKey) {
             e.preventDefault();
             this.handleSendMessage();
         }
     };
+    handleVoiceClick = () => {
+        this.showVoiceRecorder = true;
+    };
+    handleAudioRecorded = (e) => {
+        this.showVoiceRecorder = false;
+        this.voiceAudioReady.emit(e.detail);
+    };
+    handleRecordingCancel = () => {
+        this.showVoiceRecorder = false;
+    };
     handleInputChange = (e) => {
-        const target = e.target;
-        this.inputValue = target.value;
-        if (this.textareaRef) {
-            this.textareaRef.style.height = 'auto';
-            this.textareaRef.style.height = `${this.textareaRef.scrollHeight}px`;
-        }
+        this.inputValue = e.target.value;
+        this.updateHeight();
     };
     render() {
+        if (this.showVoiceRecorder) {
+            return (h(Host, null, h("ai-voice-input", { autoStart: true, onAudioRecorded: this.handleAudioRecorded, onRecordingCancel: this.handleRecordingCancel })));
+        }
         const canSend = !!this.inputValue.trim() && !this.disabled;
-        return (h(Host, { key: '97dfe627b89657d36e4f7281a8bdb708cc913374' }, h("div", { key: 'a3efb2a0b95ec3a86cc5f575d0fdb2bb6dd2eb6c', part: "wrapper", class: "wrapper" }, h("div", { key: '5986fa2946a44757c143999a72b25ea3b6e7c336', part: "glow", class: "glow", "aria-hidden": "true" }), h("div", { key: 'd5b9d346495de00e8b0e0900ef3e766756844626', part: "container", class: "input-container" }, h("div", { key: '8313695b2e4d7557a5362e9b9d2a5c5803a4ec0c', class: "input-row" }, h("div", { key: '9c184f8097e28527b5d18fccf92010fb36b14a9c', class: "actions" }, h("button", { key: '39ad3feb24a53fd5a08e8a8388f7bcee71413a91', part: "send-button", class: `send-button${canSend ? ' active' : ''}`, onClick: this.handleSendMessage, disabled: !canSend, type: "button", "aria-label": "Send message" }, h("ai-icon", { key: '1fe555709288d33551696312fb3329b1c656d063', name: "send", size: 16 })), this.showVoiceButton && !this.inputValue && (h("button", { key: 'a7bcc3b9ca5f5e59c32a34ab33c2fbbd607bb298', part: "voice-button", class: "voice-button", onClick: () => this.voiceButtonClick.emit(), disabled: this.disabled, type: "button", "aria-label": "Record voice" }, h("ai-icon", { key: '98fea04c79e841e4a2b8ee50a480bb554212b055', name: "mic", size: 16 })))), h("textarea", { key: '798af74ca2298a31f37459dfa1c176182d740839', part: "textarea", ref: el => (this.textareaRef = el), value: this.inputValue, onInput: this.handleInputChange, onKeyPress: this.handleKeyPress, disabled: this.disabled, placeholder: this.placeholder, rows: 1, class: "textarea" }))))));
+        const remaining = this.maxLength - this.inputValue.length;
+        return (h(Host, null, h("div", { part: "wrapper", class: "wrapper" }, h("div", { part: "glow", class: "glow", "aria-hidden": "true" }), h("div", { part: "container", class: `input-container${this.isMultiline ? ' multiline' : ''}` }, h("div", { class: "input-row" }, h("textarea", { part: "textarea", ref: el => (this.textareaRef = el), value: this.inputValue, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, disabled: this.disabled, placeholder: this.placeholder, rows: 1, class: "textarea", maxLength: this.maxLength }), remaining < 200 && (h("span", { class: `char-counter${remaining < 50 ? ' warning' : ''}`, "aria-live": "polite" }, remaining)), h("div", { class: "actions" }, this.showVoiceButton && !this.inputValue && (h("button", { part: "voice-button", class: "voice-button", onClick: this.handleVoiceClick, disabled: this.disabled, type: "button", "aria-label": "Record voice" }, h("ai-icon", { name: "mic", size: 16 }))), h("button", { part: "send-button", class: `send-button${canSend ? ' active' : ''}`, onClick: this.handleSendMessage, disabled: !canSend, type: "button", "aria-label": "Send message" }, h("ai-icon", { name: "send", size: 16 }))))))));
     }
     static get is() { return "ai-message-input"; }
     static get encapsulation() { return "shadow"; }
@@ -122,12 +150,54 @@ export class MessageInput {
                 "reflect": false,
                 "attribute": "show-voice-button",
                 "defaultValue": "true"
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum characters allowed"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-length",
+                "defaultValue": "4000"
+            },
+            "isRecording": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "External prop to show/hide the inline voice recorder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-recording",
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "inputValue": {}
+            "inputValue": {},
+            "showVoiceRecorder": {},
+            "isMultiline": {}
         };
     }
     static get events() {
@@ -147,19 +217,24 @@ export class MessageInput {
                     "references": {}
                 }
             }, {
-                "method": "voiceButtonClick",
-                "name": "voiceButtonClick",
+                "method": "voiceAudioReady",
+                "name": "voiceAudioReady",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted when the voice button is clicked \u2014 caller controls rendering the voice recorder"
+                    "text": "Event emitted when voice recording is complete and audio is ready"
                 },
                 "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
+                    "original": "{ blob: Blob; duration: number }",
+                    "resolved": "{ blob: Blob; duration: number; }",
+                    "references": {
+                        "Blob": {
+                            "location": "global",
+                            "id": "global::Blob"
+                        }
+                    }
                 }
             }];
     }
@@ -189,4 +264,10 @@ export class MessageInput {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isRecording",
+                "methodName": "onIsRecordingChange"
+            }];
+    }
 }

package/dist/collection/components/ai-rating/ai-rating.css

@@ -1,32 +1,26 @@
 /* ─── Custom Properties ──────────────────────────────────────────────────── */
 :host {
-  --ai-rating-question-color:    var(--ai-text-primary, #333333);
-  --ai-rating-subtitle-color:    var(--ai-text-secondary, #737373);
   --ai-rating-question-size:     16px;
   --ai-rating-subtitle-size:     14px;
   --ai-rating-gap:               8px;
   --ai-rating-emoji-size:        24px;
   --ai-rating-btn-padding:       6px;
-  --ai-rating-btn-border:        1px solid var(--ai-border-light, #f4f4f4);
+  --ai-rating-btn-border:        1px solid var(--ai-border-light);
   --ai-rating-btn-radius:        9999px;
 
   /* hover */
-  --ai-rating-btn-bg-hover:      var(--ai-bg-surface, #f9fafb);
+  --ai-rating-btn-bg-hover:      var(--ai-bg-surface);
   --ai-rating-btn-border-hover:  1px solid var(--ai-border-default);
 
   /* selected — matches Figma warning palette */
-  --ai-rating-btn-bg-active:     var(--ai-warning-bg, #fff9eb);
-  --ai-rating-btn-border-active: 1px solid var(--ai-warning-border, #ffaf44);
-  --ai-rating-btn-shadow-active: 0px 4px 6px -1px rgba(18, 18, 23, 0.08),
-                                  0px 2px 4px -1px rgba(18, 18, 23, 0.06);
+  --ai-rating-btn-bg-active:     var(--ai-warning-bg);
+  --ai-rating-btn-border-active: 1px solid var(--ai-warning-border);
+  --ai-rating-btn-shadow-active: var(--ai-shadow-active);
 
   /* selected label */
-  --ai-rating-label-color:       var(--ai-text-primary, #333333);
   --ai-rating-label-size:        16px;
 
   display: block;
-  direction: rtl;
-  font-family: var(--ai-font-family, "PingARLT", sans-serif);
 }
 
 /* ─── Wrapper ────────────────────────────────────────────────────────────── */
@@ -53,7 +47,7 @@
   font-size: var(--ai-rating-question-size);
   font-weight: 500;
   line-height: 24px;
-  color: var(--ai-rating-question-color);
+  color: var(--ai-text-primary);
 }
 
 .rating__subtitle {
@@ -61,7 +55,7 @@
   font-size: var(--ai-rating-subtitle-size);
   font-weight: 400;
   line-height: 20px;
-  color: var(--ai-rating-subtitle-color);
+  color: var(--ai-text-secondary);
 }
 
 /* ─── Emoji row ──────────────────────────────────────────────────────────── */
@@ -133,7 +127,7 @@
   font-size: var(--ai-rating-label-size);
   font-weight: 500;
   line-height: 24px;
-  color: var(--ai-rating-label-color);
+  color: var(--ai-text-primary);
   text-align: center;
   width: 100%;
   animation: fadeIn 0.15s ease;

package/dist/collection/components/ai-route-decision/ai-route-decision.css

@@ -0,0 +1,132 @@
+:host {
+  display: inline-block;
+}
+
+/* ── Icon wrapper ───────────────────────────────────────── */
+.icon-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+/* ── Pill shell ─────────────────────────────────────────── */
+.route-pill {
+  display: inline-flex;
+  flex-direction: column;
+  background: var(--ai-bg-card);
+  border: 1px solid var(--ai-border-default);
+  border-radius: 9999px;
+  box-shadow: var(--ai-shadow-sm);
+  overflow: hidden;
+  transition: border-radius 0.2s ease;
+}
+
+.route-pill.expanded {
+  border-radius: 12px;
+}
+
+/* ── Pill header row ────────────────────────────────────── */
+.route-pill-main {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--ai-text-primary);
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.route-icon {
+  color: var(--ai-accent-dark);
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.agent-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.agent-emoji {
+  font-size: 14px;
+  line-height: 1;
+}
+
+.confidence-badge {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--ai-accent-dark);
+  background: var(--ai-accent-bg);
+  padding: 1px 6px;
+  border-radius: 9999px;
+}
+
+/* ── Expand arrow ───────────────────────────────────────── */
+.expand-icon {
+  display: inline-flex;
+  margin-inline-start: auto;
+  color: var(--ai-text-secondary);
+  transition: transform 0.2s ease;
+  transform: rotate(0deg);
+}
+
+.expand-icon.expanded {
+  transform: rotate(90deg);
+}
+
+/* ── Expanded details ───────────────────────────────────── */
+.route-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 12px 12px;
+  border-top: 1px solid var(--ai-border-default);
+  animation: fade-in 0.2s ease;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.reason-text {
+  margin: 0;
+  font-size: 12px;
+  color: var(--ai-text-secondary);
+  line-height: 1.5;
+}
+
+/* ── Confidence bar ─────────────────────────────────────── */
+.confidence-bar-wrap {
+  height: 4px;
+  border-radius: 9999px;
+  background: var(--ai-border-default);
+  overflow: hidden;
+}
+
+.confidence-bar {
+  height: 100%;
+  border-radius: 9999px;
+  background: var(--ai-accent-dark);
+  transition: width 0.4s ease;
+}
+
+/* ── Meta row (language, etc.) ──────────────────────────── */
+.meta-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--ai-text-secondary);
+}
+
+.lang-chip {
+  font-size: 11px;
+  color: var(--ai-text-secondary);
+}

package/dist/collection/components/ai-route-decision/ai-route-decision.js

@@ -0,0 +1,195 @@
+import { Host, h } from "@stencil/core";
+import { iconRegistry } from "../../utils/icon-registry";
+export class AiRouteDecision {
+    /** Selected agent name */
+    selectedAgent = '';
+    /** Agent icon — emoji or short text displayed before the agent name */
+    agentIcon = '';
+    /** Reason for routing decision (shown when expanded) */
+    reason = '';
+    /** Routing confidence percentage 0–100 */
+    confidence = 0;
+    /** Detected language label (shown when expanded) */
+    detectedLanguage = '';
+    /** Initial expanded state */
+    expanded = false;
+    _expanded = false;
+    routeExpand;
+    componentWillLoad() {
+        this._expanded = this.expanded;
+    }
+    renderIcon(name, width, height) {
+        const icon = iconRegistry[name];
+        if (!icon)
+            return null;
+        const svg = `<svg width="${width}" height="${height}" viewBox="${icon.viewBox}" fill="none" xmlns="http://www.w3.org/2000/svg">${icon.content}</svg>`;
+        return h("span", { class: "icon-wrap", innerHTML: svg });
+    }
+    handleToggle() {
+        this._expanded = !this._expanded;
+        this.expanded = this._expanded;
+        this.routeExpand.emit(this._expanded);
+    }
+    render() {
+        return (h(Host, { key: 'a22239e1db9982a860bbd6242e5848c3cdfe57ce' }, h("div", { key: '21c447b12e737e77d67b33b10f82f727f10ef4e5', class: `route-pill ${this._expanded ? 'expanded' : ''}` }, h("button", { key: 'fe5c0f167cad2b2fa2549a03a87a32c848efc4c6', class: "route-pill-main", onClick: () => this.handleToggle() }, h("span", { key: 'a1a07c6f8f108e637a43424fa9cdb918e882db3a', class: "route-icon" }, this.renderIcon('route', 14, 14)), h("span", { key: '005662e7b00f47edf185a7806ca268c2b0e9e62a', class: "agent-label" }, this.agentIcon && h("span", { key: '9fbadba81754d515e156bfcfa4821f7e2cefc88b', class: "agent-emoji", "aria-hidden": "true" }, this.agentIcon), this.selectedAgent), this.confidence > 0 && (h("span", { key: 'c2acf259644e0c74264b535b5d34ea5a3b519797', class: "confidence-badge" }, this.confidence, "%")), h("span", { key: 'ac5d1ee27417d85c50a88adb297b493c83aa85bc', class: `expand-icon ${this._expanded ? 'expanded' : ''}` }, this.renderIcon('arrow-right', 12, 12))), this._expanded && (h("div", { key: 'dc1f297cdeede44b4e6b8a4888204eef2200bc72', class: "route-details" }, this.reason && h("p", { key: '7e819d2a6dceeb81d88282e7fcc927b9fe4219c2', class: "reason-text" }, this.reason), this.confidence > 0 && (h("div", { key: 'ec6cbaf221e0679241fc1f13066d542d5b64b9ef', class: "confidence-bar-wrap" }, h("div", { key: '84b3c99aa734308db8d9abd7674eb9f5ee22b17c', class: "confidence-bar", style: { width: `${this.confidence}%` } }))), this.detectedLanguage && (h("div", { key: 'e83127633ec30ea79446a3622f31428ed50ede4d', class: "meta-row" }, this.renderIcon('list', 12, 12), h("span", { key: '1547936eaa529d999b9d0b9dc3421bff2e20937a', class: "lang-chip" }, this.detectedLanguage))))))));
+    }
+    static get is() { return "ai-route-decision"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ai-route-decision.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ai-route-decision.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selectedAgent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected agent name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-agent",
+                "defaultValue": "''"
+            },
+            "agentIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Agent icon \u2014 emoji or short text displayed before the agent name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "agent-icon",
+                "defaultValue": "''"
+            },
+            "reason": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Reason for routing decision (shown when expanded)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reason",
+                "defaultValue": "''"
+            },
+            "confidence": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Routing confidence percentage 0\u2013100"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "confidence",
+                "defaultValue": "0"
+            },
+            "detectedLanguage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Detected language label (shown when expanded)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "detected-language",
+                "defaultValue": "''"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial expanded state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expanded",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_expanded": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "routeExpand",
+                "name": "routeExpand",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/ai-suggestion/ai-suggestion.css

@@ -1,20 +1,14 @@
 /* ─── Custom Properties ──────────────────────────────────────────────────── */
 :host {
-  --ai-suggestion-bg:           var(--ai-bg-card);
-  --ai-suggestion-bg-hover:     var(--ai-accent-bg);
-  --ai-suggestion-bg-active:    var(--ai-accent-bg);
   --ai-suggestion-border:       1px solid var(--ai-accent);
   --ai-suggestion-border-hover: 1px solid var(--ai-accent);
   --ai-suggestion-radius:       9999px;
   --ai-suggestion-padding:      8px 12px;
   --ai-suggestion-gap:          4px;
-  --ai-suggestion-color:        var(--ai-accent-dark);
   --ai-suggestion-font-size:    14px;
   --ai-suggestion-line-height:  20px;
 
   display: inline-block;
-  direction: rtl;
-  font-family: var(--ai-font-family, "PingARLT", sans-serif);
 }
 
 /* ─── Chip button ────────────────────────────────────────────────────────── */
@@ -23,11 +17,11 @@
   align-items: center;
   justify-content: center;
   gap: var(--ai-suggestion-gap);
-  background: var(--ai-suggestion-bg);
+  background: var(--ai-bg-card);
   border: var(--ai-suggestion-border);
   border-radius: var(--ai-suggestion-radius);
   padding: var(--ai-suggestion-padding);
-  color: var(--ai-suggestion-color);
+  color: var(--ai-accent-dark);
   font-size: var(--ai-suggestion-font-size);
   font-weight: 400;
   line-height: var(--ai-suggestion-line-height);
@@ -36,16 +30,16 @@
   cursor: pointer;
   transition: background 0.15s ease, border-color 0.15s ease;
   outline: none;
-  text-align: right;
+  text-align: start;
 }
 
 .chip:hover:not(:disabled) {
-  background: var(--ai-suggestion-bg-hover);
+  background: var(--ai-accent-bg);
   border: var(--ai-suggestion-border-hover);
 }
 
 .chip:active:not(:disabled) {
-  background: var(--ai-suggestion-bg-active);
+  background: var(--ai-accent-bg);
 }
 
 .chip:focus-visible {

package/dist/collection/components/ai-suggestion/ai-suggestion.js

@@ -11,10 +11,10 @@ export class AiSuggestion {
         this.suggestionClick.emit(this.label);
     }
     render() {
-        return (h(Host, { key: '642ab1b74098e6cd3cebab33a127757cddd2a450' }, h("button", { key: 'd75585d53f5996d06a96bdfad5dc11a85b101b23', class: {
+        return (h(Host, { key: 'd8a9ff7279fce63faebd187cb69f0173239518ca' }, h("button", { key: '42bc023c9c48bafc11b388bb80e130255ea830b8', class: {
                 chip: true,
                 'chip--disabled': this.disabled,
-            }, disabled: this.disabled, onClick: () => this.handleClick() }, h("span", { key: '532a8cc6168accab91bc10f0b4383d4173b8c887', class: "chip__label" }, this.label, h("slot", { key: '691ae51253a08ff2005733a263153f8470e77472' })))));
+            }, disabled: this.disabled, onClick: () => this.handleClick() }, h("span", { key: '06f0324b97d9f7fb77fb2d4b9dbf0be9b5c4c3f1', class: "chip__label" }, this.label, h("slot", { key: 'ccd0d639f0b2c001088561b029b08691395e9198' })))));
     }
     static get is() { return "ai-suggestion"; }
     static get encapsulation() { return "shadow"; }