@teranga-ds/components 0.1.0

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

@@ -0,0 +1,355 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @component tg-input
+ * @description Text input with label, helper text and error state.
+ *
+ * @slot icon-start — Icon/prefix inside the left of the input
+ * @slot icon-end   — Icon/suffix inside the right of the input
+ *
+ * @example
+ * <tg-input label="Numéro NIN" placeholder="Ex: 1234567890123" required></tg-input>
+ * <tg-input label="Email" type="email" error="Adresse invalide"></tg-input>
+ */
+export class TgInput {
+    constructor() {
+        /** Input type */
+        this.type = 'text';
+        /** Current value */
+        this.value = '';
+        /** Marks the field as required */
+        this.required = false;
+        /** Disables the input */
+        this.disabled = false;
+        /** Makes the input read-only */
+        this.readonly = false;
+        /** Full-width input */
+        this.fullWidth = false;
+        /** Size of the input */
+        this.size = 'md';
+        /** Unique id (auto-generated if not provided) */
+        this.inputId = `tg-input-${Math.random().toString(36).slice(2, 9)}`;
+        /** Shows password visibility toggle (only for type=password) */
+        this.passwordVisible = false;
+        this.handleInput = (e) => {
+            this.value = e.target.value;
+            this.tgChange.emit(this.value);
+        };
+    }
+    render() {
+        var _a;
+        const isInvalid = !!this.error;
+        const inputType = this.type === 'password' && this.passwordVisible ? 'text' : this.type;
+        return (h(Host, { key: '39e10a36aa30f6714c47e2d7071a1b4e8a40cc95' }, h("div", { key: '09c8a9f5ccf97c8e2cf7b04e373cd664a51ae33f', class: {
+                'tg-input-wrapper': true,
+                'tg-input-wrapper--full-width': this.fullWidth,
+                'tg-input-wrapper--disabled': this.disabled,
+                'tg-input-wrapper--invalid': isInvalid,
+                [`tg-input-wrapper--${this.size}`]: true,
+            } }, this.label && (h("label", { key: '593efd7e643d2853bf92990a20daa6fb34e84dfa', class: "tg-input__label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: '6c58fd8c27e6859b44654b4f9bc0fe1e0a601cda', class: "tg-input__required", "aria-hidden": "true" }, " *"))), h("div", { key: '5103029e9374a63a3739a4f737d6dfa4a3af2d19', class: "tg-input__field-wrapper" }, h("slot", { key: 'b5e7b13ee91f87115b1f391eccd95012a18d5fe2', name: "icon-start" }), h("input", { key: '8909c5ec22eed69d23b65663c5fd4bc3e6e376b7', id: this.inputId, class: "tg-input__field", type: inputType, value: this.value, placeholder: (_a = this.placeholder) !== null && _a !== void 0 ? _a : '', disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": isInvalid ? 'true' : undefined, "aria-describedby": isInvalid ? `${this.inputId}-error` : this.helperText ? `${this.inputId}-helper` : undefined, onInput: this.handleInput, onFocus: () => this.tgFocus.emit(), onBlur: () => this.tgBlur.emit() }), this.type === 'password' && (h("button", { key: '7978ffedb461c2894710605aa3a722c0d5daee3d', type: "button", class: "tg-input__toggle-password", onClick: () => (this.passwordVisible = !this.passwordVisible), "aria-label": this.passwordVisible ? 'Masquer le mot de passe' : 'Afficher le mot de passe' }, this.passwordVisible ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor" }, h("path", { "fill-rule": "evenodd", d: "M3.28 2.22a.75.75 0 0 0-1.06 1.06l14.5 14.5a.75.75 0 1 0 1.06-1.06l-1.745-1.745a10.029 10.029 0 0 0 3.3-4.38 1.651 1.651 0 0 0 0-1.185A10.004 10.004 0 0 0 9.999 3a9.956 9.956 0 0 0-4.744 1.194L3.28 2.22ZM7.752 6.69l1.092 1.092a2.5 2.5 0 0 1 3.374 3.373l1.091 1.092a4 4 0 0 0-5.557-5.557Z", "clip-rule": "evenodd" }), h("path", { d: "M10.748 13.93l2.523 2.523a9.987 9.987 0 0 1-3.27.547c-4.258 0-7.894-2.66-9.337-6.41a1.651 1.651 0 0 1 0-1.186A10.007 10.007 0 0 1 2.839 6.02L6.07 9.252a4 4 0 0 0 4.678 4.678Z" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor" }, h("path", { d: "M10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" }), h("path", { "fill-rule": "evenodd", d: "M.664 10.59a1.651 1.651 0 0 1 0-1.186A10.004 10.004 0 0 1 10 3c4.257 0 7.893 2.66 9.336 6.41.147.381.146.804 0 1.186A10.004 10.004 0 0 1 10 17c-4.257 0-7.893-2.66-9.336-6.41ZM14 10a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z", "clip-rule": "evenodd" }))))), h("slot", { key: '6ca491e27e06a60b80a721194f0be211efba72cb', name: "icon-end" })), isInvalid && (h("p", { key: '9c395300d317050bdb30b0c45a3e0ea10148b955', id: `${this.inputId}-error`, class: "tg-input__error", role: "alert" }, h("svg", { key: '4dde577fba2b01b4df4289ab4024a9ec3d0bea4b', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '6e7ab516c75bec64ded397090d9761bf13bca68a', "fill-rule": "evenodd", d: "M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm.75-10a.75.75 0 0 0-1.5 0v4.5a.75.75 0 0 0 1.5 0V5Zm0 7a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z", "clip-rule": "evenodd" })), this.error)), !isInvalid && this.helperText && (h("p", { key: '684ca4c4b93f22aaf25e53b21f68c797e5c22454', id: `${this.inputId}-helper`, class: "tg-input__helper" }, this.helperText)))));
+    }
+    static get is() { return "tg-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date'",
+                    "resolved": "\"date\" | \"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'text'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label displayed above the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text shown below the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message \u2014 replaces helperText and marks the field invalid"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the field as required"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the input read-only"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Full-width input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique id (auto-generated if not provided)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-id",
+                "defaultValue": "`tg-input-${Math.random().toString(36).slice(2, 9)}`"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "passwordVisible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgChange",
+                "name": "tgChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever the value changes"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "tgFocus",
+                "name": "tgFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input is focused"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tgBlur",
+                "name": "tgBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/tg-kanban-board/tg-kanban-board.css

@@ -0,0 +1,14 @@
+:host { display: block; }
+.tg-kb { display: flex; gap: var(--tg-spacing-4); overflow-x: auto; padding-bottom: var(--tg-spacing-2); font-family: var(--tg-font-family-sans); }
+.tg-kb__col { flex: 0 0 18rem; background: var(--tg-color-surface-sunken); border-radius: var(--tg-radius-xl); padding: var(--tg-spacing-3); }
+.tg-kb__col-header { display: flex; align-items: center; gap: var(--tg-spacing-2); margin-bottom: var(--tg-spacing-3); }
+.tg-kb__col-dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--tg-color-primary); flex-shrink: 0; }
+.tg-kb__col-title { margin: 0; font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-semibold); flex: 1; }
+.tg-kb__col-count { font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); background: var(--tg-color-surface-raised); padding: 2px var(--tg-spacing-2); border-radius: var(--tg-radius-full); }
+.tg-kb__cards { display: flex; flex-direction: column; gap: var(--tg-spacing-2); }
+.tg-kb__card { background: var(--tg-color-surface-raised); border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-lg); padding: var(--tg-spacing-3); cursor: pointer; transition: box-shadow var(--tg-duration-fast), transform var(--tg-duration-fast); }
+.tg-kb__card:hover { box-shadow: var(--tg-shadow-md); transform: translateY(-1px); }
+.tg-kb__card-tag { display: inline-block; font-size: var(--tg-font-size-xs); padding: 1px var(--tg-spacing-2); border-radius: var(--tg-radius-full); background: var(--tg-color-primary-subtle); color: var(--tg-color-primary); margin-bottom: var(--tg-spacing-1-5); font-weight: var(--tg-font-weight-medium); }
+.tg-kb__card-title { margin: 0; font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-medium); color: var(--tg-color-text-primary); }
+.tg-kb__card-desc { margin: var(--tg-spacing-1) 0 0; font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); line-height: var(--tg-line-height-relaxed); }
+.tg-kb__card-assignee { margin-top: var(--tg-spacing-2); font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); }

package/dist/collection/components/tg-kanban-board/tg-kanban-board.js

@@ -0,0 +1,80 @@
+import { h, Host } from "@stencil/core";
+export class TgKanbanBoard {
+    constructor() {
+        this.columns = [];
+    }
+    get parsed() {
+        if (typeof this.columns === 'string') {
+            try {
+                return JSON.parse(this.columns);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.columns;
+    }
+    render() {
+        return (h(Host, { key: '3f837f4ad3e240f95aad5ba3ffa631d0cd1f3d5f' }, h("div", { key: 'd2200c09dbd8133a0deba07836c7ac9f02370835', class: "tg-kb" }, this.parsed.map(col => (h("div", { class: "tg-kb__col" }, h("div", { class: "tg-kb__col-header" }, h("span", { class: "tg-kb__col-dot", style: col.color ? { background: col.color } : {} }), h("h3", { class: "tg-kb__col-title" }, col.title), h("span", { class: "tg-kb__col-count" }, col.cards.length)), h("div", { class: "tg-kb__cards" }, col.cards.map(card => (h("div", { class: "tg-kb__card", onClick: () => this.tgCardClick.emit({ columnId: col.id, cardId: card.id }) }, card.tag && h("span", { class: "tg-kb__card-tag" }, card.tag), h("h4", { class: "tg-kb__card-title" }, card.title), card.description && h("p", { class: "tg-kb__card-desc" }, card.description), card.assignee && h("div", { class: "tg-kb__card-assignee" }, card.assignee)))))))))));
+    }
+    static get is() { return "tg-kanban-board"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-kanban-board.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-kanban-board.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columns": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | KanbanColumn[]",
+                    "resolved": "KanbanColumn[] | string",
+                    "references": {
+                        "KanbanColumn": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-kanban-board/tg-kanban-board.tsx",
+                            "id": "src/components/tg-kanban-board/tg-kanban-board.tsx::KanbanColumn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgCardClick",
+                "name": "tgCardClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ columnId: string; cardId: string }",
+                    "resolved": "{ columnId: string; cardId: string; }",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/tg-kpi-card/tg-kpi-card.css

@@ -0,0 +1,17 @@
+:host { display: block; }
+.tg-kpi { font-family: var(--tg-font-family-sans); padding: var(--tg-spacing-5); border-radius: var(--tg-radius-xl); background: var(--tg-color-surface-raised); border: 1px solid var(--tg-color-border); transition: box-shadow var(--tg-duration-normal); }
+.tg-kpi:hover { box-shadow: var(--tg-shadow-md); }
+.tg-kpi__header { display: flex; align-items: center; gap: var(--tg-spacing-2); margin-bottom: var(--tg-spacing-2); }
+.tg-kpi__icon { font-size: 1.25rem; }
+.tg-kpi__title { font-size: var(--tg-font-size-sm); color: var(--tg-color-text-secondary); font-weight: var(--tg-font-weight-medium); }
+.tg-kpi__body { display: flex; align-items: baseline; gap: var(--tg-spacing-1); margin-bottom: var(--tg-spacing-2); }
+.tg-kpi__value { font-size: var(--tg-font-size-3xl); font-weight: var(--tg-font-weight-bold); font-family: var(--tg-font-family-display); color: var(--tg-color-text-primary); }
+.tg-kpi__unit { font-size: var(--tg-font-size-sm); color: var(--tg-color-text-secondary); }
+.tg-kpi__trend { display: inline-flex; align-items: center; gap: var(--tg-spacing-1); padding: var(--tg-spacing-0-5) var(--tg-spacing-2); border-radius: var(--tg-radius-full); font-size: var(--tg-font-size-xs); font-weight: var(--tg-font-weight-medium); }
+.tg-kpi__trend--up { background: var(--tg-color-success-subtle); color: var(--tg-color-success); }
+.tg-kpi__trend--down { background: var(--tg-color-danger-subtle); color: var(--tg-color-danger); }
+.tg-kpi__trend--neutral { background: var(--tg-color-surface-sunken); color: var(--tg-color-text-secondary); }
+.tg-kpi--primary .tg-kpi__value { color: var(--tg-color-primary); }
+.tg-kpi--success .tg-kpi__value { color: var(--tg-color-success); }
+.tg-kpi--warning .tg-kpi__value { color: var(--tg-color-warning); }
+.tg-kpi--danger .tg-kpi__value { color: var(--tg-color-danger); }

package/dist/collection/components/tg-kpi-card/tg-kpi-card.js

@@ -0,0 +1,163 @@
+import { h, Host } from "@stencil/core";
+export class TgKpiCard {
+    constructor() {
+        this.heading = '';
+        this.value = '';
+        this.variant = 'default';
+    }
+    render() {
+        return (h(Host, { key: '59a6b36432315e5fa734c9692f77b9d992c3cdb4' }, h("div", { key: '761450ae5065d82379e7bd020244709b214bdf76', class: 'tg-kpi tg-kpi--' + this.variant }, h("div", { key: 'c9f9d54951bf507128b6acc7ddd3638b57dabec1', class: "tg-kpi__header" }, this.icon && h("span", { key: 'daf8d996d601e5064b58da5a8381a96eb3bc2bdc', class: "tg-kpi__icon" }, this.icon), h("span", { key: 'df039f3a57f0d6e7536579ab0d3e54892e9de19a', class: "tg-kpi__title" }, this.heading)), h("div", { key: 'd75dde0f1857d31bfa66b9f82ea8b3b3c4f2b6c9', class: "tg-kpi__body" }, h("span", { key: 'e68fe293bc795a2ca90f88972da6c2f08b86e30f', class: "tg-kpi__value" }, this.value), this.unit && h("span", { key: '6cafc1dbe979dc0e74cb8d116f048c19edd65bb2', class: "tg-kpi__unit" }, this.unit)), this.trend && (h("div", { key: '1e9b6ce2fb01c19a01df0a6aeae3522782ddb21f', class: 'tg-kpi__trend tg-kpi__trend--' + this.trend }, h("span", { key: '55300f6c15a71fb63f5f5a5a26642a68ddbec5d5', class: "tg-kpi__trend-arrow" }, this.trend === 'up' ? '\u2191' : this.trend === 'down' ? '\u2193' : '\u2192'), this.trendValue && h("span", { key: '921388ed870275169e331d0e664091a99577fc46', class: "tg-kpi__trend-val" }, this.trendValue))))));
+    }
+    static get is() { return "tg-kpi-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-kpi-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-kpi-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": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "unit": {
+                "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": "unit"
+            },
+            "trend": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'up' | 'down' | 'neutral'",
+                    "resolved": "\"down\" | \"neutral\" | \"up\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trend"
+            },
+            "trendValue": {
+                "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": "trend-value"
+            },
+            "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"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'primary' | 'success' | 'warning' | 'danger'",
+                    "resolved": "\"danger\" | \"default\" | \"primary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,11 @@
+:host { display: inline-flex; }
+.tg-lb { display: inline-flex; align-items: center; gap: var(--tg-spacing-1-5); padding: var(--tg-spacing-1) var(--tg-spacing-2-5); border-radius: var(--tg-radius-full); font-family: var(--tg-font-family-sans); font-size: var(--tg-font-size-xs); font-weight: var(--tg-font-weight-bold); text-transform: uppercase; letter-spacing: var(--tg-tracking-wide); }
+.tg-lb--default { background: var(--tg-color-danger-subtle); color: var(--tg-color-danger); }
+.tg-lb--recording { background: var(--tg-color-danger); color: white; }
+.tg-lb--streaming { background: var(--tg-color-primary-subtle); color: var(--tg-color-primary); }
+.tg-lb__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+.tg-lb--active .tg-lb__dot { animation: tg-lb-pulse 1.5s ease-in-out infinite; }
+.tg-lb--default .tg-lb__dot { background: var(--tg-color-danger); }
+.tg-lb--recording .tg-lb__dot { background: white; }
+.tg-lb--streaming .tg-lb__dot { background: var(--tg-color-primary); }
+@keyframes tg-lb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }