@teranga-ds/components 0.1.0

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

@@ -0,0 +1,290 @@
+import { h, Host } from "@stencil/core";
+export class TgCombobox {
+    constructor() {
+        this.placeholder = 'Rechercher…';
+        this.options = [];
+        this.disabled = false;
+        this.invalid = false;
+        this.size = 'md';
+        this.query = '';
+        this.open = false;
+        this.focusedIndex = -1;
+        this.handleInput = (e) => { this.query = e.target.value; this.open = true; };
+        this.handleFocus = () => { this.open = true; };
+        this.handleKeyDown = (e) => {
+            const items = this.filtered;
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.focusedIndex = Math.min(this.focusedIndex + 1, items.length - 1);
+            }
+            else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                this.focusedIndex = Math.max(this.focusedIndex - 1, 0);
+            }
+            else if (e.key === 'Enter' && this.focusedIndex >= 0 && items[this.focusedIndex]) {
+                e.preventDefault();
+                this.select(items[this.focusedIndex]);
+            }
+            else if (e.key === 'Escape') {
+                this.open = false;
+            }
+        };
+    }
+    get parsed() {
+        if (typeof this.options === 'string') {
+            try {
+                return JSON.parse(this.options);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.options;
+    }
+    get filtered() {
+        const q = this.query.toLowerCase();
+        return q ? this.parsed.filter(o => o.label.toLowerCase().includes(q)) : this.parsed;
+    }
+    get selectedLabel() {
+        const f = this.parsed.find(o => o.value === this.value);
+        return f ? f.label : '';
+    }
+    handleDocClick() { this.open = false; }
+    select(opt) { this.tgChange.emit(opt.value); this.query = opt.label; this.open = false; }
+    render() {
+        const items = this.filtered;
+        return (h(Host, { key: '565f072e24300dd80eec6206a9ee2922b7504589' }, h("div", { key: 'd43ede25747b229bfe8c1c25ae62ca24cedadf5e', class: `tg-combobox tg-combobox--${this.size}`, onClick: (e) => e.stopPropagation() }, this.label && h("label", { key: '04baf228f536e3f93f8b15a5d8a8ec5055d349b7', class: "tg-combobox__label" }, this.label), h("div", { key: '16969267f3ef67da727c5c3b8463146398f910ca', class: { 'tg-combobox__input-wrap': true, 'tg-combobox__input-wrap--invalid': this.invalid, 'tg-combobox__input-wrap--disabled': this.disabled } }, h("input", { key: 'd43dbe66854e5993ecf3de07a37c2b8dca7bb4ac', class: "tg-combobox__input", type: "text", value: this.open ? this.query : this.selectedLabel, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, role: "combobox", "aria-expanded": String(this.open), "aria-autocomplete": "list" }), h("span", { key: '1848157598a1534516a72c4df74266771e666028', class: { 'tg-combobox__chevron': true, 'tg-combobox__chevron--open': this.open } }, h("svg", { key: '800f1089b123c22cfe2dfdc513fe6632b51b4a5e', viewBox: "0 0 20 20", fill: "currentColor", width: "16", height: "16" }, h("path", { key: '8069e0b3d7f69861b4b9dd0723e6531eaff7e2fd', "fill-rule": "evenodd", d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" })))), this.open && items.length > 0 && (h("ul", { key: 'c2552593271adbc015fc5b4457cf4225183b571b', class: "tg-combobox__dropdown", role: "listbox" }, items.map((opt, i) => (h("li", { class: { 'tg-combobox__option': true, 'tg-combobox__option--focused': i === this.focusedIndex, 'tg-combobox__option--selected': opt.value === this.value, 'tg-combobox__option--disabled': opt.disabled === true }, role: "option", "aria-selected": String(opt.value === this.value), onClick: () => !opt.disabled && this.select(opt) }, opt.label))))), this.errorText && h("p", { key: '6c3488a6db12f9c4c4f8f4a978526eeb728fd247', class: "tg-combobox__error" }, this.errorText), !this.errorText && this.helperText && h("p", { key: 'b1c7475ea8220f626c18b2ebb5d785a54f76b6ca', class: "tg-combobox__helper" }, this.helperText))));
+    }
+    static get is() { return "tg-combobox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-combobox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-combobox.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"
+            },
+            "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": "'Rechercher\u2026'"
+            },
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | ComboboxOption[]",
+                    "resolved": "ComboboxOption[] | string",
+                    "references": {
+                        "ComboboxOption": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-combobox/tg-combobox.tsx",
+                            "id": "src/components/tg-combobox/tg-combobox.tsx::ComboboxOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "options",
+                "defaultValue": "[]"
+            },
+            "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"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "helperText": {
+                "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": "helper-text"
+            },
+            "errorText": {
+                "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-text"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "query": {},
+            "open": {},
+            "focusedIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgChange",
+                "name": "tgChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/tg-command-palette/tg-command-palette.css

@@ -0,0 +1,16 @@
+:host { display: contents; }
+.tg-cp__overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 9999; display: flex; align-items: flex-start; justify-content: center; padding-top: 20vh; backdrop-filter: blur(4px); animation: tg-cp-fade var(--tg-duration-fast); }
+@keyframes tg-cp-fade { from { opacity: 0; } to { opacity: 1; } }
+.tg-cp { width: 100%; max-width: 32rem; background: var(--tg-color-surface-raised); border-radius: var(--tg-radius-xl); box-shadow: var(--tg-shadow-xl); overflow: hidden; font-family: var(--tg-font-family-sans); animation: tg-cp-slide var(--tg-duration-fast) var(--tg-ease-out); }
+@keyframes tg-cp-slide { from { opacity: 0; transform: translateY(-12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
+.tg-cp__input-wrap { display: flex; align-items: center; gap: var(--tg-spacing-2); padding: var(--tg-spacing-3) var(--tg-spacing-4); border-bottom: 1px solid var(--tg-color-border); }
+.tg-cp__search-icon { color: var(--tg-color-text-secondary); flex-shrink: 0; }
+.tg-cp__input { flex: 1; border: none; outline: none; background: transparent; font-size: var(--tg-font-size-md); color: var(--tg-color-text-primary); font-family: inherit; }
+.tg-cp__input::placeholder { color: var(--tg-color-text-disabled); }
+.tg-cp__list { list-style: none; padding: var(--tg-spacing-1) 0; margin: 0; max-height: 20rem; overflow-y: auto; }
+.tg-cp__item { display: flex; align-items: center; gap: var(--tg-spacing-2); padding: var(--tg-spacing-2) var(--tg-spacing-4); cursor: pointer; transition: background var(--tg-duration-fast); }
+.tg-cp__item:hover, .tg-cp__item--focused { background: var(--tg-color-primary-subtle); }
+.tg-cp__item-icon { font-size: 1rem; color: var(--tg-color-text-secondary); flex-shrink: 0; }
+.tg-cp__item-label { flex: 1; font-size: var(--tg-font-size-sm); color: var(--tg-color-text-primary); }
+.tg-cp__shortcut { font-family: var(--tg-font-family-mono); font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); background: var(--tg-color-surface-sunken); padding: 2px var(--tg-spacing-1-5); border-radius: var(--tg-radius-sm); border: 1px solid var(--tg-color-border); }
+.tg-cp__empty { padding: var(--tg-spacing-4); text-align: center; color: var(--tg-color-text-disabled); font-size: var(--tg-font-size-sm); }

package/dist/collection/components/tg-command-palette/tg-command-palette.js

@@ -0,0 +1,152 @@
+import { h, Host } from "@stencil/core";
+export class TgCommandPalette {
+    constructor() {
+        this.commands = [];
+        this.placeholder = 'Tapez une commande\u2026';
+        this.open = false;
+        this.query = '';
+        this.focusedIndex = 0;
+    }
+    get parsed() {
+        if (typeof this.commands === 'string') {
+            try {
+                return JSON.parse(this.commands);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.commands;
+    }
+    get filtered() { const q = this.query.toLowerCase(); return q ? this.parsed.filter(c => c.label.toLowerCase().includes(q)) : this.parsed; }
+    onKeyDown(e) {
+        if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+            e.preventDefault();
+            this.open = !this.open;
+            this.query = '';
+            this.focusedIndex = 0;
+        }
+        if (!this.open)
+            return;
+        if (e.key === 'Escape') {
+            this.open = false;
+        }
+        else if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            this.focusedIndex = Math.min(this.focusedIndex + 1, this.filtered.length - 1);
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            this.focusedIndex = Math.max(this.focusedIndex - 1, 0);
+        }
+        else if (e.key === 'Enter') {
+            const item = this.filtered[this.focusedIndex];
+            if (item) {
+                this.tgSelect.emit(item.id);
+                this.open = false;
+            }
+        }
+    }
+    render() {
+        if (!this.open)
+            return h(Host, null);
+        const items = this.filtered;
+        return (h(Host, null, h("div", { class: "tg-cp__overlay", onClick: () => { this.open = false; } }, h("div", { class: "tg-cp", onClick: (e) => e.stopPropagation() }, h("div", { class: "tg-cp__input-wrap" }, h("svg", { class: "tg-cp__search-icon", viewBox: "0 0 20 20", fill: "currentColor", width: "18", height: "18" }, h("path", { "fill-rule": "evenodd", d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" })), h("input", { class: "tg-cp__input", type: "text", placeholder: this.placeholder, value: this.query, onInput: (e) => { this.query = e.target.value; this.focusedIndex = 0; }, autofocus: true })), h("ul", { class: "tg-cp__list" }, items.map((cmd, i) => (h("li", { class: { 'tg-cp__item': true, 'tg-cp__item--focused': i === this.focusedIndex }, onClick: () => { this.tgSelect.emit(cmd.id); this.open = false; } }, cmd.icon && h("span", { class: "tg-cp__item-icon" }, cmd.icon), h("span", { class: "tg-cp__item-label" }, cmd.label), cmd.shortcut && h("kbd", { class: "tg-cp__shortcut" }, cmd.shortcut)))), items.length === 0 && h("li", { class: "tg-cp__empty" }, "Aucun r\\u00e9sultat"))))));
+    }
+    static get is() { return "tg-command-palette"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-command-palette.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-command-palette.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "commands": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | CommandItem[]",
+                    "resolved": "CommandItem[] | string",
+                    "references": {
+                        "CommandItem": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-command-palette/tg-command-palette.tsx",
+                            "id": "src/components/tg-command-palette/tg-command-palette.tsx::CommandItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "commands",
+                "defaultValue": "[]"
+            },
+            "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": "'Tapez une commande\\u2026'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "query": {},
+            "focusedIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgSelect",
+                "name": "tgSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/tg-confidence-badge/tg-confidence-badge.css

@@ -0,0 +1,12 @@
+:host { display: inline-flex; }
+.tg-conf { display: inline-flex; align-items: center; gap: var(--tg-spacing-2); padding: var(--tg-spacing-1) var(--tg-spacing-2-5); border-radius: var(--tg-radius-full); font-family: var(--tg-font-family-sans); }
+.tg-conf--high { background: var(--tg-color-success-subtle); color: var(--tg-color-success); }
+.tg-conf--medium { background: var(--tg-color-warning-subtle); color: var(--tg-color-warning); }
+.tg-conf--low { background: var(--tg-color-danger-subtle); color: var(--tg-color-danger); }
+.tg-conf__pct { font-size: var(--tg-font-size-xs); font-weight: var(--tg-font-weight-bold); font-family: var(--tg-font-family-mono); }
+.tg-conf__label { font-size: var(--tg-font-size-xs); font-weight: var(--tg-font-weight-medium); }
+.tg-conf__bar { width: 3rem; height: 4px; background: rgba(0,0,0,0.1); border-radius: var(--tg-radius-full); overflow: hidden; }
+.tg-conf__fill { height: 100%; border-radius: var(--tg-radius-full); transition: width var(--tg-duration-normal); }
+.tg-conf--high .tg-conf__fill { background: var(--tg-color-success); }
+.tg-conf--medium .tg-conf__fill { background: var(--tg-color-warning); }
+.tg-conf--low .tg-conf__fill { background: var(--tg-color-danger); }

package/dist/collection/components/tg-confidence-badge/tg-confidence-badge.js

@@ -0,0 +1,93 @@
+import { h, Host } from "@stencil/core";
+export class TgConfidenceBadge {
+    constructor() {
+        this.score = 0;
+        this.showBar = true;
+    }
+    get level() {
+        if (this.score >= 0.8)
+            return 'high';
+        if (this.score >= 0.5)
+            return 'medium';
+        return 'low';
+    }
+    render() {
+        const pct = Math.round(this.score * 100);
+        return (h(Host, { key: 'aecf1b4b43cf40be94ae02979e80ddd296b489e3' }, h("div", { key: '5593278db1c44b8b42bdacf28648a313c045ebc8', class: 'tg-conf tg-conf--' + this.level }, h("span", { key: '01334ff751a99cdb839e0551ef97e121603b3fa6', class: "tg-conf__pct" }, pct, "%"), this.label && h("span", { key: '93b067ed5c3a8a88a62a599cc7a8e71c461f2b0a', class: "tg-conf__label" }, this.label), this.showBar && h("div", { key: '9c3cbf7f8afed63cd3fae1643a0fdf20e78025ea', class: "tg-conf__bar" }, h("div", { key: 'e582e1f3e220ba4e4ad0590b2efe886ab3451bd0', class: "tg-conf__fill", style: { width: pct + '%' } })))));
+    }
+    static get is() { return "tg-confidence-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-confidence-badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-confidence-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "score": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "score",
+                "defaultValue": "0"
+            },
+            "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"
+            },
+            "showBar": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-bar",
+                "defaultValue": "true"
+            }
+        };
+    }
+}

package/dist/collection/components/tg-confirm-dialog/tg-confirm-dialog.css

@@ -0,0 +1,19 @@
+:host { display: contents; }
+.tg-cd__overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); animation: tg-cd-fade 0.15s; }
+@keyframes tg-cd-fade { from { opacity: 0; } to { opacity: 1; } }
+.tg-cd { background: var(--tg-color-surface-raised); border-radius: var(--tg-radius-xl); padding: var(--tg-spacing-6); max-width: 24rem; width: 90%; font-family: var(--tg-font-family-sans); text-align: center; animation: tg-cd-scale 0.15s var(--tg-ease-out); }
+@keyframes tg-cd-scale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
+.tg-cd__icon { font-size: 2.5rem; margin-bottom: var(--tg-spacing-3); }
+.tg-cd--danger .tg-cd__icon { color: var(--tg-color-danger); }
+.tg-cd--warning .tg-cd__icon { color: var(--tg-color-warning); }
+.tg-cd__title { margin: 0 0 var(--tg-spacing-2); font-size: var(--tg-font-size-lg); font-weight: var(--tg-font-weight-semibold); color: var(--tg-color-text-primary); }
+.tg-cd__msg { margin: 0 0 var(--tg-spacing-5); font-size: var(--tg-font-size-sm); color: var(--tg-color-text-secondary); line-height: var(--tg-line-height-relaxed); }
+.tg-cd__actions { display: flex; gap: var(--tg-spacing-2); justify-content: center; }
+.tg-cd__btn { padding: var(--tg-spacing-2) var(--tg-spacing-5); border-radius: var(--tg-radius-lg); font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-medium); cursor: pointer; transition: all var(--tg-duration-fast); border: 1px solid transparent; }
+.tg-cd__btn--cancel { background: none; color: var(--tg-color-text-secondary); border-color: var(--tg-color-border); }
+.tg-cd__btn--cancel:hover { background: var(--tg-color-surface-sunken); }
+.tg-cd__btn--confirm { color: white; }
+.tg-cd__btn--default { background: var(--tg-color-primary); }
+.tg-cd__btn--danger { background: var(--tg-color-danger); }
+.tg-cd__btn--warning { background: var(--tg-color-warning); }
+.tg-cd__btn--confirm:hover { filter: brightness(1.1); }