@teranga-ds/components 0.1.0

package/dist/collection/collection-manifest.json

@@ -0,0 +1,91 @@
+{
+  "entries": [
+    "components/tg-activity-feed/tg-activity-feed.js",
+    "components/tg-activity-stream/tg-activity-stream.js",
+    "components/tg-bottom-nav/tg-bottom-nav.js",
+    "components/tg-breadcrumb/tg-breadcrumb.js",
+    "components/tg-calendar-view/tg-calendar-view.js",
+    "components/tg-chat/tg-chat.js",
+    "components/tg-combobox/tg-combobox.js",
+    "components/tg-command-palette/tg-command-palette.js",
+    "components/tg-context-menu/tg-context-menu.js",
+    "components/tg-data-table/tg-data-table.js",
+    "components/tg-image-gallery/tg-image-gallery.js",
+    "components/tg-kanban-board/tg-kanban-board.js",
+    "components/tg-mega-menu/tg-mega-menu.js",
+    "components/tg-model-selector/tg-model-selector.js",
+    "components/tg-multi-select/tg-multi-select.js",
+    "components/tg-navbar/tg-navbar.js",
+    "components/tg-quick-switcher/tg-quick-switcher.js",
+    "components/tg-select/tg-select.js",
+    "components/tg-sidebar/tg-sidebar.js",
+    "components/tg-stepper/tg-stepper.js",
+    "components/tg-table/tg-table.js",
+    "components/tg-tabs/tg-tabs.js",
+    "components/tg-timeline/tg-timeline.js",
+    "components/tg-tree-view/tg-tree-view.js",
+    "components/tg-ai-feedback/tg-ai-feedback.js",
+    "components/tg-ai-insight-card/tg-ai-insight-card.js",
+    "components/tg-alert/tg-alert.js",
+    "components/tg-audio-player/tg-audio-player.js",
+    "components/tg-autocomplete/tg-autocomplete.js",
+    "components/tg-avatar/tg-avatar.js",
+    "components/tg-badge/tg-badge.js",
+    "components/tg-bottom-sheet/tg-bottom-sheet.js",
+    "components/tg-button/tg-button.js",
+    "components/tg-card/tg-card.js",
+    "components/tg-chat-message/tg-chat-message.js",
+    "components/tg-checkbox/tg-checkbox.js",
+    "components/tg-confidence-badge/tg-confidence-badge.js",
+    "components/tg-confirm-dialog/tg-confirm-dialog.js",
+    "components/tg-date-picker/tg-date-picker.js",
+    "components/tg-empty-state/tg-empty-state.js",
+    "components/tg-expandable-row/tg-expandable-row.js",
+    "components/tg-fab/tg-fab.js",
+    "components/tg-file-upload/tg-file-upload.js",
+    "components/tg-global-loader/tg-global-loader.js",
+    "components/tg-heatmap/tg-heatmap.js",
+    "components/tg-input/tg-input.js",
+    "components/tg-kpi-card/tg-kpi-card.js",
+    "components/tg-live-badge/tg-live-badge.js",
+    "components/tg-login-form/tg-login-form.js",
+    "components/tg-modal/tg-modal.js",
+    "components/tg-otp-input/tg-otp-input.js",
+    "components/tg-pagination/tg-pagination.js",
+    "components/tg-presence-indicator/tg-presence-indicator.js",
+    "components/tg-progress/tg-progress.js",
+    "components/tg-prompt-input/tg-prompt-input.js",
+    "components/tg-pull-to-refresh/tg-pull-to-refresh.js",
+    "components/tg-radio/tg-radio.js",
+    "components/tg-retry-ui/tg-retry-ui.js",
+    "components/tg-rich-editor/tg-rich-editor.js",
+    "components/tg-role-badge/tg-role-badge.js",
+    "components/tg-session-expired/tg-session-expired.js",
+    "components/tg-skeleton/tg-skeleton.js",
+    "components/tg-slider/tg-slider.js",
+    "components/tg-source-citation/tg-source-citation.js",
+    "components/tg-spinner/tg-spinner.js",
+    "components/tg-stat-widget/tg-stat-widget.js",
+    "components/tg-status-badge/tg-status-badge.js",
+    "components/tg-stepper-input/tg-stepper-input.js",
+    "components/tg-streaming-response/tg-streaming-response.js",
+    "components/tg-switch/tg-switch.js",
+    "components/tg-tag/tg-tag.js",
+    "components/tg-textarea/tg-textarea.js",
+    "components/tg-time-picker/tg-time-picker.js",
+    "components/tg-toast/tg-toast.js",
+    "components/tg-token-usage/tg-token-usage.js",
+    "components/tg-tooltip/tg-tooltip.js",
+    "components/tg-undo-snackbar/tg-undo-snackbar.js",
+    "components/tg-video-player/tg-video-player.js",
+    "components/tg-wizard-nav/tg-wizard-nav.js"
+  ],
+  "mixins": [],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.43.3",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/tg-activity-feed/tg-activity-feed.css

@@ -0,0 +1,10 @@
+:host { display: block; }
+.tg-af { font-family: var(--tg-font-family-sans); }
+.tg-af__item { display: flex; gap: var(--tg-spacing-3); padding: var(--tg-spacing-3) 0; border-bottom: 1px solid var(--tg-color-border); }
+.tg-af__item:last-child { border-bottom: none; }
+.tg-af__avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--tg-color-primary-subtle); color: var(--tg-color-primary); display: flex; align-items: center; justify-content: center; font-size: var(--tg-font-size-xs); font-weight: var(--tg-font-weight-semibold); flex-shrink: 0; }
+.tg-af__body { flex: 1; }
+.tg-af__text { margin: 0; font-size: var(--tg-font-size-sm); color: var(--tg-color-text-primary); line-height: var(--tg-line-height-relaxed); }
+.tg-af__target { color: var(--tg-color-primary); font-weight: var(--tg-font-weight-medium); }
+.tg-af__time { font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); }
+.tg-af__empty { text-align: center; padding: var(--tg-spacing-6); color: var(--tg-color-text-disabled); font-size: var(--tg-font-size-sm); }

package/dist/collection/components/tg-activity-feed/tg-activity-feed.js

@@ -0,0 +1,81 @@
+import { h, Host } from "@stencil/core";
+export class TgActivityFeed {
+    constructor() {
+        this.items = [];
+    }
+    get parsed() {
+        const d = typeof this.items === 'string' ? (() => {
+            try {
+                return JSON.parse(this.items);
+            }
+            catch (_a) {
+                return [];
+            }
+        })() : this.items;
+        return this.maxItems ? d.slice(0, this.maxItems) : d;
+    }
+    render() {
+        return (h(Host, { key: '3a8314e8702a2c8ecf11419d0efb2f10d3d8442b' }, h("div", { key: '99a5bbc264703c68cb92167f7920261c6c9646c7', class: "tg-af" }, this.parsed.map(item => (h("div", { class: "tg-af__item" }, h("div", { class: "tg-af__avatar" }, item.avatar || item.user.charAt(0).toUpperCase()), h("div", { class: "tg-af__body" }, h("p", { class: "tg-af__text" }, h("strong", null, item.user), " ", item.action, " ", item.target && h("span", { class: "tg-af__target" }, item.target)), h("span", { class: "tg-af__time" }, item.time))))), this.parsed.length === 0 && h("p", { key: '7f0bfc6058c3c2143a03cc0ced46ad2e521750e4', class: "tg-af__empty" }, "Aucune activit\\u00e9 r\\u00e9cente"))));
+    }
+    static get is() { return "tg-activity-feed"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-activity-feed.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-activity-feed.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | ActivityItem[]",
+                    "resolved": "ActivityItem[] | string",
+                    "references": {
+                        "ActivityItem": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-activity-feed/tg-activity-feed.tsx",
+                            "id": "src/components/tg-activity-feed/tg-activity-feed.tsx::ActivityItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "[]"
+            },
+            "maxItems": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-items"
+            }
+        };
+    }
+}

package/dist/collection/components/tg-activity-stream/tg-activity-stream.css

@@ -0,0 +1,11 @@
+:host { display: block; }
+.tg-as { font-family: var(--tg-font-family-sans); }
+.tg-as__live { margin-bottom: var(--tg-spacing-3); }
+.tg-as__event { display: flex; gap: var(--tg-spacing-2); padding: var(--tg-spacing-2) 0; border-bottom: 1px solid var(--tg-color-border); animation: tg-as-in 0.3s var(--tg-ease-out); }
+@keyframes tg-as-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
+.tg-as__event:last-child { border-bottom: none; }
+.tg-as__icon { color: var(--tg-color-primary); font-size: var(--tg-font-size-xs); padding-top: 2px; }
+.tg-as__body { flex: 1; }
+.tg-as__text { margin: 0; font-size: var(--tg-font-size-sm); color: var(--tg-color-text-primary); }
+.tg-as__text em { color: var(--tg-color-primary); font-style: normal; font-weight: var(--tg-font-weight-medium); }
+.tg-as__time { font-size: var(--tg-font-size-xs); color: var(--tg-color-text-disabled); }

package/dist/collection/components/tg-activity-stream/tg-activity-stream.js

@@ -0,0 +1,83 @@
+import { h, Host } from "@stencil/core";
+export class TgActivityStream {
+    constructor() {
+        this.events = [];
+        this.live = false;
+    }
+    get parsed() {
+        if (typeof this.events === 'string') {
+            try {
+                return JSON.parse(this.events);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.events;
+    }
+    render() {
+        return (h(Host, { key: 'a727f56d4f8992ae279dd43afccafc372c1d7b22' }, h("div", { key: 'd49625e314e7c87b392ff62ce4dce7520670d942', class: "tg-as" }, this.live && h("div", { key: '05d8d89e562ca5e693245a9ebf8a51cbfdd28a85', class: "tg-as__live" }, h("tg-live-badge", { key: '18eaee77742e36df200799cd77f4b9506ac9f45b' })), this.parsed.map(ev => (h("div", { class: "tg-as__event" }, h("span", { class: "tg-as__icon" }, ev.icon || '\u25cf'), h("div", { class: "tg-as__body" }, h("p", { class: "tg-as__text" }, h("strong", null, ev.user), " ", ev.action, " ", ev.target && h("em", null, ev.target)), h("span", { class: "tg-as__time" }, ev.time))))))));
+    }
+    static get is() { return "tg-activity-stream"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-activity-stream.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-activity-stream.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "events": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | StreamEvent[]",
+                    "resolved": "StreamEvent[] | string",
+                    "references": {
+                        "StreamEvent": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-activity-stream/tg-activity-stream.tsx",
+                            "id": "src/components/tg-activity-stream/tg-activity-stream.tsx::StreamEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "events",
+                "defaultValue": "[]"
+            },
+            "live": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "live",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/tg-ai-feedback/tg-ai-feedback.css

@@ -0,0 +1,12 @@
+:host { display: block; }
+.tg-aif { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tg-spacing-2); font-family: var(--tg-font-family-sans); padding: var(--tg-spacing-3); border-top: 1px solid var(--tg-color-border); }
+.tg-aif__q { font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); }
+.tg-aif__btns { display: flex; gap: var(--tg-spacing-1); }
+.tg-aif__btn { background: none; border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-md); padding: var(--tg-spacing-1) var(--tg-spacing-2); cursor: pointer; font-size: 1rem; transition: all var(--tg-duration-fast); }
+.tg-aif__btn:hover { background: var(--tg-color-surface-sunken); }
+.tg-aif__btn--active { background: var(--tg-color-primary-subtle); border-color: var(--tg-color-primary); }
+.tg-aif__thanks { font-size: var(--tg-font-size-xs); color: var(--tg-color-success); }
+.tg-aif__comment { width: 100%; margin-top: var(--tg-spacing-2); }
+.tg-aif__textarea { width: 100%; padding: var(--tg-spacing-2); border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-lg); font-family: inherit; font-size: var(--tg-font-size-sm); outline: none; resize: vertical; }
+.tg-aif__textarea:focus { border-color: var(--tg-color-primary); }
+.tg-aif__submit { margin-top: var(--tg-spacing-2); background: var(--tg-color-primary); color: white; border: none; padding: var(--tg-spacing-1-5) var(--tg-spacing-4); border-radius: var(--tg-radius-lg); font-size: var(--tg-font-size-xs); cursor: pointer; }

package/dist/collection/components/tg-ai-feedback/tg-ai-feedback.js

@@ -0,0 +1,80 @@
+import { h, Host } from "@stencil/core";
+export class TgAiFeedback {
+    constructor() {
+        this.question = 'Cette r\u00e9ponse vous a-t-elle aid\u00e9 ?';
+        this.feedback = null;
+        this.showComment = false;
+        this.comment = '';
+        this.submitComment = () => { this.tgFeedback.emit({ rating: 'down', comment: this.comment }); this.showComment = false; };
+    }
+    rate(val) {
+        this.feedback = val;
+        this.showComment = val === 'down';
+        if (val === 'up')
+            this.tgFeedback.emit({ rating: val });
+    }
+    render() {
+        return (h(Host, { key: '53ccb877af4caea893898edb65a99ab274a71e3b' }, h("div", { key: '3a19798680a252e5171d839a42bf4b95234fd13f', class: "tg-aif" }, h("span", { key: '1bdbb3ca86c122a5d73cc6d63ca8dd7d96a69581', class: "tg-aif__q" }, this.question), h("div", { key: 'b70aa2d2803bfd378b3252a1f3c72eb8ea212dde', class: "tg-aif__btns" }, h("button", { key: 'b51ac6d6511440903d172023870e65f14d3ac04d', class: { 'tg-aif__btn': true, 'tg-aif__btn--active': this.feedback === 'up' }, type: "button", onClick: () => this.rate('up'), "aria-label": "Helpful" }, "\\ud83d\\udc4d"), h("button", { key: 'f2636cb646bfd621f88add44b5d52ed06a933aba', class: { 'tg-aif__btn': true, 'tg-aif__btn--active': this.feedback === 'down' }, type: "button", onClick: () => this.rate('down'), "aria-label": "Not helpful" }, "\\ud83d\\udc4e")), this.feedback === 'up' && h("span", { key: 'e4f9f6ad4aec85fc9499c29e8923cd54e1e527f9', class: "tg-aif__thanks" }, "Merci pour votre retour !"), this.showComment && (h("div", { key: '0ce66825390d27923937892929d52522dc104b0b', class: "tg-aif__comment" }, h("textarea", { key: '58ef1e8f5ab3a0ec5755e6482c606271eb3bba25', class: "tg-aif__textarea", placeholder: "Comment pouvons-nous am\\u00e9liorer ?", value: this.comment, onInput: (e) => { this.comment = e.target.value; }, rows: 3 }), h("button", { key: 'e19aefc579e98613acb569336718ccccca231240', class: "tg-aif__submit", type: "button", onClick: this.submitComment }, "Envoyer"))))));
+    }
+    static get is() { return "tg-ai-feedback"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-ai-feedback.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-ai-feedback.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "question": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "question",
+                "defaultValue": "'Cette r\\u00e9ponse vous a-t-elle aid\\u00e9 ?'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "feedback": {},
+            "showComment": {},
+            "comment": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgFeedback",
+                "name": "tgFeedback",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ rating: string; comment?: string }",
+                    "resolved": "{ rating: string; comment?: string; }",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/tg-ai-insight-card/tg-ai-insight-card.css

@@ -0,0 +1,10 @@
+:host { display: block; }
+.tg-aic { font-family: var(--tg-font-family-sans); padding: var(--tg-spacing-4); border-radius: var(--tg-radius-xl); border: 1px solid var(--tg-color-border); }
+.tg-aic--default { background: var(--tg-color-surface-raised); border-left: 3px solid var(--tg-color-primary); }
+.tg-aic--recommendation { background: var(--tg-color-success-subtle); border-left: 3px solid var(--tg-color-success); }
+.tg-aic--alert { background: var(--tg-color-warning-subtle); border-left: 3px solid var(--tg-color-warning); }
+.tg-aic__header { display: flex; align-items: center; gap: var(--tg-spacing-2); margin-bottom: var(--tg-spacing-2); }
+.tg-aic__icon { font-size: 1.25rem; }
+.tg-aic__title { font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-semibold); color: var(--tg-color-text-primary); flex: 1; }
+.tg-aic__insight { margin: 0 0 var(--tg-spacing-2); font-size: var(--tg-font-size-sm); color: var(--tg-color-text-primary); line-height: var(--tg-line-height-relaxed); }
+.tg-aic__source { display: block; font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); }

package/dist/collection/components/tg-ai-insight-card/tg-ai-insight-card.js

@@ -0,0 +1,144 @@
+import { h, Host } from "@stencil/core";
+export class TgAiInsightCard {
+    constructor() {
+        this.heading = '';
+        this.insight = '';
+        this.variant = 'default';
+    }
+    render() {
+        return (h(Host, { key: '7880992e4d9389e168b6ceb7e4148ed414bcc72c' }, h("div", { key: 'b5096f8ab30c96d85067f6dc3eb22b53e5f47390', class: 'tg-aic tg-aic--' + this.variant }, h("div", { key: '2b568c1c77b061b7c7958c81dc7552655e8c3173', class: "tg-aic__header" }, h("span", { key: 'a3c2d6d8c0d8653f515756845493e43167619a35', class: "tg-aic__icon" }, this.icon || '\u2728'), h("span", { key: '81dfb925cf9a0725e045fea3885afc1e4a8d5626', class: "tg-aic__title" }, this.heading), this.confidence !== undefined && h("tg-confidence-badge", { key: 'f6afa24aea1adcc770335bccde6c6d5ad3eb7599', score: this.confidence })), h("p", { key: 'de3723d622deb0a5514c83ce7c77d5fb42c8513f', class: "tg-aic__insight" }, this.insight), this.source && h("span", { key: 'af3aafc454175e685e166f8b77568877efa0ee14', class: "tg-aic__source" }, "Source: ", this.source), h("slot", { key: 'ba7fb196001a69de5d72408d3334d0c36534798e' }))));
+    }
+    static get is() { return "tg-ai-insight-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-ai-insight-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-ai-insight-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "''"
+            },
+            "insight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "insight",
+                "defaultValue": "''"
+            },
+            "confidence": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "confidence"
+            },
+            "source": {
+                "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": "source"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'recommendation' | 'alert'",
+                    "resolved": "\"alert\" | \"default\" | \"recommendation\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "icon": {
+                "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": "icon"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,122 @@
+/* ============================================================
+   tg-alert — Teranga Design System
+   ============================================================ */
+
+:host {
+  display: block;
+}
+
+.tg-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--tg-spacing-3);
+  padding: var(--tg-spacing-4);
+  border-radius: var(--tg-radius-lg);
+  border: 1px solid;
+  font-family: var(--tg-font-family-sans);
+  font-size: var(--tg-font-size-sm);
+  line-height: var(--tg-line-height-relaxed);
+}
+
+/* ── Icon */
+.tg-alert__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.tg-alert__icon svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+/* ── Content */
+.tg-alert__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.tg-alert__title {
+  margin: 0 0 var(--tg-spacing-1) 0;
+  font-weight: var(--tg-font-weight-semibold);
+  font-size: var(--tg-font-size-sm);
+}
+
+.tg-alert__message {
+  margin: 0;
+  color: inherit;
+  opacity: 0.9;
+}
+
+/* ── Dismiss button */
+.tg-alert__dismiss {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: var(--tg-radius-md);
+  cursor: pointer;
+  opacity: 0.7;
+  color: inherit;
+  transition: opacity var(--tg-duration-normal) var(--tg-ease-default),
+              background-color var(--tg-duration-normal) var(--tg-ease-default);
+  margin-top: -2px;
+}
+
+.tg-alert__dismiss:hover { opacity: 1; background-color: rgba(0,0,0,0.08); }
+.tg-alert__dismiss:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+
+.tg-alert__dismiss svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* ── Variants */
+.tg-alert--info {
+  background-color: var(--tg-color-info-subtle);
+  border-color: #bcdefa;
+  color: #0550ae;
+}
+
+.tg-alert--success {
+  background-color: var(--tg-color-success-subtle);
+  border-color: #82cfaa;
+  color: #116329;
+}
+
+.tg-alert--warning {
+  background-color: var(--tg-color-warning-subtle);
+  border-color: #eac54f;
+  color: #7d4e00;
+}
+
+.tg-alert--danger {
+  background-color: var(--tg-color-danger-subtle);
+  border-color: var(--tg-color-red-100);
+  color: var(--tg-color-red-800);
+}
+
+/* ── Enter animation */
+.tg-alert {
+  animation: tg-alert-enter var(--tg-duration-normal, 200ms) var(--tg-ease-out, ease-out);
+}
+
+@keyframes tg-alert-enter {
+  from { opacity: 0; transform: translateY(-8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ── Dismiss exit */
+:host(.tg-alert--exiting) .tg-alert {
+  animation: tg-alert-exit var(--tg-duration-fast, 150ms) var(--tg-ease-in, ease-in) forwards;
+}
+
+@keyframes tg-alert-exit {
+  to { opacity: 0; transform: translateY(-8px); height: 0; padding: 0; margin: 0; overflow: hidden; }
+}