@teranga-ds/components 0.1.0

package/dist/collection/components/tg-chat/tg-chat.js

@@ -0,0 +1,194 @@
+import { h, Host } from "@stencil/core";
+export class TgChat {
+    constructor() {
+        this.chatTitle = 'Teranga AI';
+        this.botInitial = 'T';
+        this.placeholder = 'Écrivez votre message…';
+        this.messages = [];
+        this.typing = false;
+        this.inputValue = '';
+        this.handleSend = () => {
+            const text = this.inputValue.trim();
+            if (!text)
+                return;
+            this.tgSend.emit(text);
+            this.inputValue = '';
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                this.handleSend();
+            }
+        };
+    }
+    get parsedMessages() {
+        if (typeof this.messages === 'string') {
+            try {
+                return JSON.parse(this.messages);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.messages;
+    }
+    componentDidUpdate() {
+        this.scrollToBottom();
+    }
+    scrollToBottom() {
+        if (this.messagesRef) {
+            this.messagesRef.scrollTop = this.messagesRef.scrollHeight;
+        }
+    }
+    render() {
+        const msgs = this.parsedMessages;
+        const sendIcon = `<svg viewBox="0 0 20 20" fill="currentColor"><path d="M3.105 2.289a.75.75 0 00-.826.95l1.414 4.925A1.5 1.5 0 005.135 9.25H10.5a.75.75 0 010 1.5H5.135a1.5 1.5 0 00-1.442 1.086l-1.414 4.926a.75.75 0 00.826.95l14.095-5.638a.75.75 0 000-1.39L3.105 2.289z"/></svg>`;
+        return (h(Host, { key: '3c07f4d1c6c599cf0d35868d3ffe03994fdd5d19' }, h("div", { key: '822715425ecbce20177e6e7733dfc4d05d2db5ed', class: "tg-chat" }, h("div", { key: '0b0df62a9c73f7ff39beac69be771a339b0272f3', class: "tg-chat__header" }, h("div", { key: 'e1b2d914c8676ae17617b559cdeb7d8ecddf6ae4', class: "tg-chat__avatar" }, this.botInitial), h("div", { key: '6599d0a5c87221500339590925a91e00ec622ff3' }, h("div", { key: 'a814d5d5566324592a9916b147017b6e70bb5045', class: "tg-chat__name" }, this.chatTitle), h("div", { key: 'f6c60c941406e25a69df2d4acffc40103488d070', class: "tg-chat__status" }, this.typing ? 'En cours de saisie…' : 'En ligne'))), h("div", { key: '97d71ad1679aeab0083265192429fd8602f7cba8', class: "tg-chat__messages", ref: el => (this.messagesRef = el) }, msgs.map(msg => (h("div", { class: { 'tg-chat__bubble-row': true, [`tg-chat__bubble-row--${msg.role}`]: true }, key: msg.id }, msg.role === 'bot' && h("div", { class: "tg-chat__avatar", style: { width: '28px', height: '28px', fontSize: '0.7rem' } }, this.botInitial), h("div", null, h("div", { class: { 'tg-chat__bubble': true, [`tg-chat__bubble--${msg.role}`]: true } }, msg.content), msg.time && h("div", { class: "tg-chat__time" }, msg.time))))), this.typing && (h("div", { key: 'd50dc27b7714a270e748ab275926021dceb0639c', class: "tg-chat__bubble-row" }, h("div", { key: '452cd4e105b619acc2ba713b95b829cca12ee4d7', class: "tg-chat__avatar", style: { width: '28px', height: '28px', fontSize: '0.7rem' } }, this.botInitial), h("div", { key: '5f07a0fcc43e7a6ffd2b7a0e90f2c2d537a678ec', class: "tg-chat__typing" }, h("span", { key: 'a85767e97c3d77ad5fa793aa43e65792cc4517fc', class: "tg-chat__typing-dot" }), h("span", { key: '7a57588d308703763e816cac5a3cbf137753dbf6', class: "tg-chat__typing-dot" }), h("span", { key: '416b6cca53977055fba5d52bf76f024fe3ce53fc', class: "tg-chat__typing-dot" }))))), h("div", { key: '3c0c6dc9e4af5080213568e41c49635933bd9fbb', class: "tg-chat__composer" }, h("textarea", { key: 'c0a43e3e12b0e1ed3e6f75181939e42a1839107a', class: "tg-chat__input", placeholder: this.placeholder, rows: 1, value: this.inputValue, onInput: (e) => (this.inputValue = e.target.value), onKeyDown: this.handleKeyDown }), h("button", { key: 'f8d15458a911b1731798533b28fb4eff754db991', class: "tg-chat__send", onClick: this.handleSend, disabled: !this.inputValue.trim(), "aria-label": "Envoyer", innerHTML: sendIcon })))));
+    }
+    static get is() { return "tg-chat"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-chat.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-chat.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "chatTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "chat-title",
+                "defaultValue": "'Teranga AI'"
+            },
+            "botInitial": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bot-initial",
+                "defaultValue": "'T'"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'\u00C9crivez votre message\u2026'"
+            },
+            "messages": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | TgChatMessage[]",
+                    "resolved": "TgChatMessage[] | string",
+                    "references": {
+                        "TgChatMessage": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-chat/tg-chat.tsx",
+                            "id": "src/components/tg-chat/tg-chat.tsx::TgChatMessage"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "messages",
+                "defaultValue": "[]"
+            },
+            "typing": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "typing",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "inputValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgSend",
+                "name": "tgSend",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/tg-chat-message/tg-chat-message.css

@@ -0,0 +1,15 @@
+:host { display: block; }
+.tg-cm { display: flex; gap: var(--tg-spacing-2); font-family: var(--tg-font-family-sans); margin-bottom: var(--tg-spacing-3); animation: tg-cm-in 0.2s var(--tg-ease-out); }
+@keyframes tg-cm-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
+.tg-cm--user { flex-direction: row-reverse; }
+.tg-cm__avatar { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
+.tg-cm--assistant .tg-cm__avatar { background: var(--tg-color-primary-subtle); }
+.tg-cm--user .tg-cm__avatar { background: var(--tg-color-surface-sunken); }
+.tg-cm__bubble { padding: var(--tg-spacing-3); border-radius: var(--tg-radius-xl); font-size: var(--tg-font-size-sm); line-height: var(--tg-line-height-relaxed); max-width: 80%; }
+.tg-cm--assistant .tg-cm__bubble { background: var(--tg-color-surface-raised); border: 1px solid var(--tg-color-border); color: var(--tg-color-text-primary); border-bottom-left-radius: var(--tg-radius-sm); }
+.tg-cm--user .tg-cm__bubble { background: var(--tg-color-primary); color: var(--tg-color-primary-on); border-bottom-right-radius: var(--tg-radius-sm); margin-left: auto; }
+.tg-cm--system .tg-cm__bubble { background: var(--tg-color-warning-subtle); color: var(--tg-color-warning); text-align: center; max-width: 100%; font-size: var(--tg-font-size-xs); }
+.tg-cm__cursor { display: inline-block; width: 2px; height: 1em; background: var(--tg-color-primary); animation: tg-cm-blink 0.8s infinite; vertical-align: middle; margin-left: 2px; }
+@keyframes tg-cm-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
+.tg-cm__time { display: block; font-size: var(--tg-font-size-xs); color: var(--tg-color-text-disabled); margin-top: var(--tg-spacing-0-5); }
+.tg-cm--user .tg-cm__time { text-align: right; }

package/dist/collection/components/tg-chat-message/tg-chat-message.js

@@ -0,0 +1,104 @@
+import { h, Host } from "@stencil/core";
+export class TgChatMessage {
+    constructor() {
+        this.role = 'user';
+        this.streaming = false;
+    }
+    render() {
+        return (h(Host, { key: '8f33ddbaf10f4111a7747d18afd4b8ae1ed6d9b2' }, h("div", { key: '4f0fef482ab9e2070a4a2ee5494bbcd9cd9c5f44', class: 'tg-cm tg-cm--' + this.role }, h("div", { key: 'ab5528b751f5947e2a2450dbb99ef777ce43562a', class: "tg-cm__avatar" }, this.avatar || (this.role === 'user' ? '\ud83d\udc64' : '\ud83e\udd16')), h("div", { key: '5cc89064ada68b7adf4ed56067acbfe2474610ad', class: "tg-cm__body" }, h("div", { key: '58b8b2b1d1748b9538824fa43a3c229fe4225a6f', class: "tg-cm__bubble" }, h("slot", { key: '42eaec7d0dcea1b24bdd37e1c9063f1eca3b97a4' }), this.streaming && h("span", { key: '500c8e09faf030ebee17ea6a05017b2fb1072c3a', class: "tg-cm__cursor" })), this.timestamp && h("span", { key: '66fc731892b0c1a15462f6e7868dca87b9e73fca', class: "tg-cm__time" }, this.timestamp)))));
+    }
+    static get is() { return "tg-chat-message"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-chat-message.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-chat-message.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "role": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'user' | 'assistant' | 'system'",
+                    "resolved": "\"assistant\" | \"system\" | \"user\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "role",
+                "defaultValue": "'user'"
+            },
+            "avatar": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatar"
+            },
+            "timestamp": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "timestamp"
+            },
+            "streaming": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "streaming",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/tg-checkbox/tg-checkbox.css

@@ -0,0 +1,94 @@
+/* ============================================================
+   tg-checkbox — Teranga Design System
+   ============================================================ */
+
+:host {
+  display: inline-flex;
+}
+
+.tg-checkbox {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--tg-spacing-2);
+  cursor: pointer;
+  font-family: var(--tg-font-family-sans);
+  user-select: none;
+}
+
+.tg-checkbox--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.tg-checkbox__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.tg-checkbox__box {
+  position: relative;
+  width: 1.125rem;
+  height: 1.125rem;
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+  border: 2px solid var(--tg-color-border-strong);
+  border-radius: var(--tg-radius-sm);
+  background: var(--tg-color-surface-raised);
+  transition: all var(--tg-duration-fast) var(--tg-ease-default);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tg-checkbox__input:checked + .tg-checkbox__box {
+  background: var(--tg-color-primary);
+  border-color: var(--tg-color-primary);
+}
+
+.tg-checkbox__input:checked + .tg-checkbox__box .tg-checkbox__icon {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.tg-checkbox__input:focus-visible + .tg-checkbox__box {
+  box-shadow: var(--tg-focus-ring);
+}
+
+.tg-checkbox__input:indeterminate + .tg-checkbox__box {
+  background: var(--tg-color-primary);
+  border-color: var(--tg-color-primary);
+}
+
+.tg-checkbox__icon {
+  width: 0.75rem;
+  height: 0.75rem;
+  color: white;
+  opacity: 0;
+  transform: scale(0.5);
+  transition: all var(--tg-duration-fast) var(--tg-ease-bounce);
+}
+
+.tg-checkbox__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tg-spacing-0-5);
+}
+
+.tg-checkbox__label-text {
+  font-size: var(--tg-font-size-sm);
+  color: var(--tg-color-text-primary);
+  line-height: var(--tg-line-height-snug);
+}
+
+.tg-checkbox__description {
+  font-size: var(--tg-font-size-xs);
+  color: var(--tg-color-text-secondary);
+  line-height: var(--tg-line-height-normal);
+}
+
+/* Error state */
+.tg-checkbox--invalid .tg-checkbox__box {
+  border-color: var(--tg-color-danger);
+}

package/dist/collection/components/tg-checkbox/tg-checkbox.js

@@ -0,0 +1,210 @@
+import { h, Host } from "@stencil/core";
+export class TgCheckbox {
+    constructor() {
+        this.checked = false;
+        this.disabled = false;
+        this.indeterminate = false;
+        this.handleChange = () => {
+            if (this.disabled)
+                return;
+            this.checked = !this.checked;
+            this.tgChange.emit(this.checked);
+        };
+    }
+    render() {
+        return (h(Host, { key: '177af6bbb10f104f97eff0b0bf6287cded07dbba' }, h("label", { key: 'c851c983bce7bb3a26831dcd32ce646371a8e078', class: {
+                'tg-checkbox': true,
+                'tg-checkbox--disabled': this.disabled,
+                'tg-checkbox--invalid': !!this.error,
+            } }, h("input", Object.assign({ key: 'e11145030298a01c20d4d2e6d42b5622f6f11141', type: "checkbox", class: "tg-checkbox__input", checked: this.checked, disabled: this.disabled, indeterminate: this.indeterminate }, (this.name ? { name: this.name } : {}), (this.value ? { value: this.value } : {}), { onChange: this.handleChange })), h("span", { key: '6c67f6e2aa4bdd1f9a76b914ba3ba97c1d1f2e3d', class: "tg-checkbox__box" }, h("svg", { key: '8c146d3de219541244f5c7487c1512dca05a357f', class: "tg-checkbox__icon", viewBox: "0 0 12 12", fill: "none" }, this.indeterminate ? (h("line", { x1: "2", y1: "6", x2: "10", y2: "6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })) : (h("path", { d: "M2 6l3 3 5-6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), (this.label || this.description) && (h("span", { key: 'c27ad8bc80ce1ba645ca8e8fa41d7967b3896606', class: "tg-checkbox__content" }, this.label && h("span", { key: '46e3d0a598faac5495aa267c70ab2e8b77ab2767', class: "tg-checkbox__label-text" }, this.label), this.description && h("span", { key: '060b9bc82bbca637012140d0d5eebaa58594c2b7', class: "tg-checkbox__description" }, this.description))))));
+    }
+    static get is() { return "tg-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-checkbox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgChange",
+                "name": "tgChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/tg-combobox/tg-combobox.css

@@ -0,0 +1,22 @@
+:host { display: block; }
+.tg-combobox { position: relative; font-family: var(--tg-font-family-sans); }
+.tg-combobox__label { display: block; font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-medium); color: var(--tg-color-text-primary); margin-bottom: var(--tg-spacing-1-5); }
+.tg-combobox__input-wrap { display: flex; align-items: center; border: 1px solid var(--tg-color-border-strong); border-radius: var(--tg-radius-lg); background: var(--tg-color-surface-raised); transition: border-color var(--tg-duration-fast) var(--tg-ease-default), box-shadow var(--tg-duration-fast) var(--tg-ease-default); }
+.tg-combobox__input-wrap:focus-within { border-color: var(--tg-color-border-focus); box-shadow: var(--tg-focus-ring); }
+.tg-combobox__input-wrap--invalid { border-color: var(--tg-color-danger); }
+.tg-combobox__input-wrap--disabled { opacity: 0.5; cursor: not-allowed; }
+.tg-combobox__input { flex: 1; border: none; outline: none; background: transparent; color: var(--tg-color-text-primary); font-family: inherit; padding: 0 var(--tg-spacing-3); width: 100%; }
+.tg-combobox__input::placeholder { color: var(--tg-color-text-disabled); }
+.tg-combobox--sm .tg-combobox__input { height: 2rem; font-size: var(--tg-font-size-xs); }
+.tg-combobox--md .tg-combobox__input { height: 2.5rem; font-size: var(--tg-font-size-sm); }
+.tg-combobox--lg .tg-combobox__input { height: 3rem; font-size: var(--tg-font-size-md); }
+.tg-combobox__chevron { display: flex; align-items: center; padding-right: var(--tg-spacing-2); color: var(--tg-color-text-secondary); transition: transform var(--tg-duration-fast); }
+.tg-combobox__chevron--open { transform: rotate(180deg); }
+.tg-combobox__dropdown { position: absolute; top: 100%; left: 0; right: 0; margin-top: var(--tg-spacing-1); background: var(--tg-color-surface-raised); border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-lg); box-shadow: var(--tg-shadow-lg); z-index: 1000; max-height: 14rem; overflow-y: auto; padding: var(--tg-spacing-1) 0; list-style: none; animation: tg-combo-enter var(--tg-duration-fast) var(--tg-ease-out); }
+@keyframes tg-combo-enter { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
+.tg-combobox__option { padding: var(--tg-spacing-2) var(--tg-spacing-3); font-size: var(--tg-font-size-sm); cursor: pointer; color: var(--tg-color-text-primary); transition: background var(--tg-duration-fast); }
+.tg-combobox__option:hover, .tg-combobox__option--focused { background: var(--tg-color-primary-subtle); }
+.tg-combobox__option--selected { color: var(--tg-color-primary); font-weight: var(--tg-font-weight-medium); }
+.tg-combobox__option--disabled { opacity: 0.4; cursor: not-allowed; }
+.tg-combobox__error { margin: var(--tg-spacing-1) 0 0; font-size: var(--tg-font-size-xs); color: var(--tg-color-danger); }
+.tg-combobox__helper { margin: var(--tg-spacing-1) 0 0; font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); }