@teranga-ds/components 0.1.0

package/dist/collection/components/tg-time-picker/tg-time-picker.css

@@ -0,0 +1,15 @@
+:host { display: block; }
+.tg-time-picker { position: relative; font-family: var(--tg-font-family-sans); }
+.tg-tp__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-tp__input-wrap { display: flex; align-items: center; gap: var(--tg-spacing-2); border: 1px solid var(--tg-color-border-strong); border-radius: var(--tg-radius-lg); background: var(--tg-color-surface-raised); padding: 0 var(--tg-spacing-3); cursor: pointer; transition: border-color var(--tg-duration-fast), box-shadow var(--tg-duration-fast); }
+.tg-tp__input-wrap:focus-within { border-color: var(--tg-color-border-focus); box-shadow: var(--tg-focus-ring); }
+.tg-tp__input-wrap--invalid { border-color: var(--tg-color-danger); }
+.tg-tp__icon { color: var(--tg-color-text-secondary); flex-shrink: 0; }
+.tg-tp__input { flex: 1; border: none; outline: none; background: transparent; color: var(--tg-color-text-primary); font-family: inherit; cursor: pointer; }
+.tg-time-picker--sm .tg-tp__input { height: 2rem; font-size: var(--tg-font-size-xs); }
+.tg-time-picker--md .tg-tp__input { height: 2.5rem; font-size: var(--tg-font-size-sm); }
+.tg-time-picker--lg .tg-tp__input { height: 3rem; font-size: var(--tg-font-size-md); }
+.tg-tp__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; }
+.tg-tp__option { padding: var(--tg-spacing-2) var(--tg-spacing-3); font-size: var(--tg-font-size-sm); cursor: pointer; transition: background var(--tg-duration-fast); }
+.tg-tp__option:hover { background: var(--tg-color-primary-subtle); }
+.tg-tp__option--sel { color: var(--tg-color-primary); font-weight: var(--tg-font-weight-medium); background: var(--tg-color-primary-subtle); }

package/dist/collection/components/tg-time-picker/tg-time-picker.js

@@ -0,0 +1,213 @@
+import { h, Host } from "@stencil/core";
+export class TgTimePicker {
+    constructor() {
+        this.placeholder = 'HH:MM';
+        this.disabled = false;
+        this.invalid = false;
+        this.size = 'md';
+        this.step = 15;
+        this.open = false;
+    }
+    onDocClick() { this.open = false; }
+    get timeSlots() {
+        const s = [];
+        for (let h = 0; h < 24; h++)
+            for (let m = 0; m < 60; m += this.step)
+                s.push(String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0'));
+        return s;
+    }
+    select(t) { this.tgChange.emit(t); this.open = false; }
+    render() {
+        var _a;
+        return (h(Host, { key: '849781e7e50dd73ecbe0864486a4fe5c6d4685df' }, h("div", { key: 'a81ed67e81f51b8e80cd75476813368323be8d70', class: 'tg-time-picker tg-time-picker--' + this.size, onClick: (e) => e.stopPropagation() }, this.label && h("label", { key: '7e622b24469cc6d6a77a46633060ff14d54fe623', class: "tg-tp__label" }, this.label), h("div", { key: '67feb386304c0bfdbf8dc817fc4cfecc616aba71', class: { 'tg-tp__input-wrap': true, 'tg-tp__input-wrap--invalid': this.invalid }, onClick: () => {
+                if (!this.disabled)
+                    this.open = !this.open;
+            } }, h("svg", { key: '7b84f961e363e7ab86a28a314eff985c2f80c272', class: "tg-tp__icon", viewBox: "0 0 20 20", fill: "currentColor", width: "16", height: "16" }, h("path", { key: '4a673cefb5e9a130e78df630fe0df0fbf0868509', "fill-rule": "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z" })), h("input", { key: '8d9c1be087659b8553e59f643a363de13b2bcf29', class: "tg-tp__input", type: "text", readonly: true, value: (_a = this.value) !== null && _a !== void 0 ? _a : '', placeholder: this.placeholder, disabled: this.disabled })), this.open && (h("ul", { key: '1cc12756a2bda771a09c95975cf2cb5395adfc76', class: "tg-tp__dropdown" }, this.timeSlots.map(t => (h("li", { class: { 'tg-tp__option': true, 'tg-tp__option--sel': t === this.value }, onClick: () => this.select(t) }, t))))))));
+    }
+    static get is() { return "tg-time-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-time-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-time-picker.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"
+            },
+            "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"
+            },
+            "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": "'HH:MM'"
+            },
+            "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"
+            },
+            "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'"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "15"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {}
+        };
+    }
+    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": "onDocClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,14 @@
+:host { display: block; }
+.tg-timeline { font-family: var(--tg-font-family-sans); }
+.tg-timeline--vertical .tg-tl__item { display: flex; gap: var(--tg-spacing-3); position: relative; padding-bottom: var(--tg-spacing-6); }
+.tg-tl__dot { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--tg-font-size-xs); flex-shrink: 0; z-index: 1; }
+.tg-tl__dot--default { background: var(--tg-color-primary-subtle); color: var(--tg-color-primary); border: 2px solid var(--tg-color-primary); }
+.tg-tl__dot--success { background: var(--tg-color-success-subtle); color: var(--tg-color-success); border: 2px solid var(--tg-color-success); }
+.tg-tl__dot--warning { background: var(--tg-color-warning-subtle); color: var(--tg-color-warning); border: 2px solid var(--tg-color-warning); }
+.tg-tl__dot--danger { background: var(--tg-color-danger-subtle); color: var(--tg-color-danger); border: 2px solid var(--tg-color-danger); }
+.tg-tl__dot--info { background: var(--tg-color-info-subtle); color: var(--tg-color-info); border: 2px solid var(--tg-color-info); }
+.tg-tl__connector { position: absolute; left: calc(1rem - 1px); top: 2rem; bottom: 0; width: 2px; background: var(--tg-color-border); }
+.tg-tl__content { flex: 1; padding-top: var(--tg-spacing-0-5); }
+.tg-tl__time { display: block; font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); margin-bottom: var(--tg-spacing-0-5); }
+.tg-tl__title { margin: 0; font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-semibold); color: var(--tg-color-text-primary); }
+.tg-tl__desc { margin: var(--tg-spacing-1) 0 0; font-size: var(--tg-font-size-sm); color: var(--tg-color-text-secondary); line-height: var(--tg-line-height-relaxed); }

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

@@ -0,0 +1,83 @@
+import { h, Host } from "@stencil/core";
+export class TgTimeline {
+    constructor() {
+        this.items = [];
+        this.layout = 'vertical';
+    }
+    get parsed() {
+        if (typeof this.items === 'string') {
+            try {
+                return JSON.parse(this.items);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.items;
+    }
+    render() {
+        return (h(Host, { key: 'e0c026647ff30d31e7fd659754c374e348cbef6e' }, h("div", { key: 'd549a2cd40cd2d9fdd5ba3f670fe52d74d9a4854', class: 'tg-timeline tg-timeline--' + this.layout }, this.parsed.map((item, i) => (h("div", { class: "tg-tl__item" }, h("div", { class: 'tg-tl__dot tg-tl__dot--' + (item.variant || 'default') }, item.icon || ''), i < this.parsed.length - 1 && h("div", { class: "tg-tl__connector" }), h("div", { class: "tg-tl__content" }, item.time && h("span", { class: "tg-tl__time" }, item.time), h("h4", { class: "tg-tl__title" }, item.title), item.description && h("p", { class: "tg-tl__desc" }, item.description))))))));
+    }
+    static get is() { return "tg-timeline"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-timeline.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-timeline.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | TimelineItem[]",
+                    "resolved": "TimelineItem[] | string",
+                    "references": {
+                        "TimelineItem": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-timeline/tg-timeline.tsx",
+                            "id": "src/components/tg-timeline/tg-timeline.tsx::TimelineItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "[]"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "layout",
+                "defaultValue": "'vertical'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,112 @@
+/* ============================================================
+   tg-toast — Teranga Design System
+   ============================================================ */
+
+:host {
+  display: block;
+}
+
+.tg-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--tg-spacing-3);
+  padding: var(--tg-spacing-3) var(--tg-spacing-4);
+  font-family: var(--tg-font-family-sans);
+  border-radius: var(--tg-radius-xl);
+  box-shadow: var(--tg-shadow-lg);
+  background: var(--tg-color-surface-raised);
+  border: 1px solid var(--tg-color-border);
+  color: var(--tg-color-text-primary);
+  max-width: 24rem;
+  animation: tg-toast-enter var(--tg-duration-slow) var(--tg-ease-out);
+}
+
+.tg-toast--exiting {
+  animation: tg-toast-exit var(--tg-duration-normal) var(--tg-ease-in) forwards;
+}
+
+@keyframes tg-toast-enter {
+  from { opacity: 0; transform: translateY(1rem) scale(0.95); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes tg-toast-exit {
+  from { opacity: 1; transform: translateX(0); }
+  to   { opacity: 0; transform: translateX(100%); }
+}
+
+/* Variants */
+.tg-toast--success { border-left: 3px solid var(--tg-color-success); }
+.tg-toast--danger  { border-left: 3px solid var(--tg-color-danger); }
+.tg-toast--warning { border-left: 3px solid var(--tg-color-warning); }
+.tg-toast--info    { border-left: 3px solid var(--tg-color-info); }
+
+.tg-toast__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+}
+
+.tg-toast--success .tg-toast__icon { color: var(--tg-color-success); }
+.tg-toast--danger  .tg-toast__icon { color: var(--tg-color-danger); }
+.tg-toast--warning .tg-toast__icon { color: var(--tg-color-warning); }
+.tg-toast--info    .tg-toast__icon { color: var(--tg-color-info); }
+
+.tg-toast__body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--tg-spacing-1);
+  min-width: 0;
+}
+
+.tg-toast__title {
+  font-size: var(--tg-font-size-sm);
+  font-weight: var(--tg-font-weight-semibold);
+  line-height: var(--tg-line-height-tight);
+}
+
+.tg-toast__message {
+  font-size: var(--tg-font-size-xs);
+  color: var(--tg-color-text-secondary);
+  line-height: var(--tg-line-height-normal);
+}
+
+.tg-toast__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--tg-color-text-secondary);
+  border-radius: var(--tg-radius-md);
+  padding: 0;
+  flex-shrink: 0;
+  transition: background var(--tg-duration-fast) var(--tg-ease-default);
+}
+
+.tg-toast__close:hover {
+  background: var(--tg-color-neutral-100);
+  color: var(--tg-color-text-primary);
+}
+
+.tg-toast__close svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.tg-toast__progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  border-radius: 0 0 var(--tg-radius-xl) var(--tg-radius-xl);
+  background: var(--tg-color-primary);
+  transition: width linear;
+}
+
+.tg-toast { position: relative; overflow: hidden; }

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

@@ -0,0 +1,181 @@
+import { h, Host } from "@stencil/core";
+export class TgToast {
+    constructor() {
+        this.variant = 'info';
+        this.duration = 5000;
+        this.dismissible = true;
+        this.visible = true;
+        this.exiting = false;
+        this.dismiss = () => {
+            this.exiting = true;
+            setTimeout(() => {
+                this.visible = false;
+                this.tgDismiss.emit();
+            }, 200);
+        };
+    }
+    connectedCallback() {
+        if (this.duration > 0) {
+            this.timer = setTimeout(() => this.dismiss(), this.duration);
+        }
+    }
+    disconnectedCallback() {
+        clearTimeout(this.timer);
+    }
+    getIcon() {
+        const icons = {
+            success: `<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd"/></svg>`,
+            danger: `<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd"/></svg>`,
+            warning: `<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/></svg>`,
+            info: `<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd"/></svg>`,
+        };
+        return icons[this.variant];
+    }
+    render() {
+        if (!this.visible)
+            return null;
+        return (h(Host, null, h("div", { class: {
+                'tg-toast': true,
+                [`tg-toast--${this.variant}`]: true,
+                'tg-toast--exiting': this.exiting,
+            }, role: "alert", "aria-live": "assertive" }, h("span", { class: "tg-toast__icon", innerHTML: this.getIcon() }), h("div", { class: "tg-toast__body" }, this.toastTitle && h("span", { class: "tg-toast__title" }, this.toastTitle), this.message && h("span", { class: "tg-toast__message" }, this.message), h("slot", null)), this.dismissible && (h("button", { class: "tg-toast__close", onClick: this.dismiss, "aria-label": "Fermer" }, h("svg", { viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }, h("line", { x1: "3", y1: "3", x2: "11", y2: "11" }), h("line", { x1: "11", y1: "3", x2: "3", y2: "11" })))))));
+    }
+    static get is() { return "tg-toast"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-toast.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-toast.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'success' | 'danger' | 'warning' | 'info'",
+                    "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'info'"
+            },
+            "toastTitle": {
+                "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": "toast-title"
+            },
+            "message": {
+                "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": "message"
+            },
+            "duration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "duration",
+                "defaultValue": "5000"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visible": {},
+            "exiting": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgDismiss",
+                "name": "tgDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/tg-token-usage/tg-token-usage.css

@@ -0,0 +1,14 @@
+:host { display: block; }
+.tg-tu { font-family: var(--tg-font-family-sans); }
+.tg-tu__bar { display: flex; height: 6px; border-radius: var(--tg-radius-full); background: var(--tg-color-surface-sunken); overflow: hidden; }
+.tg-tu__segment { height: 100%; transition: width var(--tg-duration-normal); }
+.tg-tu__segment--prompt { background: var(--tg-color-primary); }
+.tg-tu__segment--completion { background: var(--tg-color-info); }
+.tg-tu__info { display: flex; flex-wrap: wrap; gap: var(--tg-spacing-3); margin-top: var(--tg-spacing-1-5); align-items: center; }
+.tg-tu__stat { display: inline-flex; align-items: center; gap: var(--tg-spacing-1); font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); }
+.tg-tu__dot { width: 8px; height: 8px; border-radius: 50%; }
+.tg-tu__dot--prompt { background: var(--tg-color-primary); }
+.tg-tu__dot--completion { background: var(--tg-color-info); }
+.tg-tu__total { font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); font-family: var(--tg-font-family-mono); margin-left: auto; }
+.tg-tu__cost { font-size: var(--tg-font-size-xs); font-weight: var(--tg-font-weight-medium); color: var(--tg-color-text-primary); }
+.tg-tu--compact .tg-tu__info { font-size: var(--tg-font-size-xs); gap: var(--tg-spacing-2); }