@teranga-ds/components 0.1.0

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

@@ -0,0 +1,142 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @component tg-alert
+ * @description Contextual feedback message for the user.
+ *
+ * @slot default — Alert message content
+ * @slot title   — Optional bold title above the message
+ * @slot icon    — Custom icon (overrides built-in icon)
+ *
+ * @example
+ * <tg-alert variant="success" title="Succès">Votre demande a été soumise.</tg-alert>
+ * <tg-alert variant="warning" dismissible>Votre session expire bientôt.</tg-alert>
+ */
+export class TgAlert {
+    constructor() {
+        /** Visual intent */
+        this.variant = 'info';
+        /** Show a dismiss (×) button */
+        this.dismissible = false;
+        /** Whether the alert is currently visible */
+        this.visible = true;
+        this.handleDismiss = () => {
+            this.visible = false;
+            this.tgDismiss.emit();
+        };
+    }
+    getIcon() {
+        const icons = {
+            info: `<svg xmlns="http://www.w3.org/2000/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>`,
+            success: `<svg xmlns="http://www.w3.org/2000/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>`,
+            warning: `<svg xmlns="http://www.w3.org/2000/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>`,
+            danger: `<svg xmlns="http://www.w3.org/2000/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>`,
+        };
+        return icons[this.variant];
+    }
+    render() {
+        if (!this.visible)
+            return null;
+        return (h(Host, { role: "alert", "aria-live": "polite" }, h("div", { class: {
+                'tg-alert': true,
+                [`tg-alert--${this.variant}`]: true,
+            } }, h("span", { class: "tg-alert__icon", "aria-hidden": "true", innerHTML: this.getIcon() }, h("slot", { name: "icon" })), h("div", { class: "tg-alert__content" }, this.alertTitle && h("p", { class: "tg-alert__title" }, this.alertTitle), h("div", { class: "tg-alert__message" }, h("slot", null))), this.dismissible && (h("button", { class: "tg-alert__dismiss", onClick: this.handleDismiss, "aria-label": "Fermer", type: "button" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" })))))));
+    }
+    static get is() { return "tg-alert"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-alert.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-alert.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'info' | 'success' | 'warning' | 'danger'",
+                    "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual intent"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'info'"
+            },
+            "alertTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional bold title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alert-title"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a dismiss (\u00D7) button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgDismiss",
+                "name": "tgDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dismiss button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/tg-audio-player/tg-audio-player.css

@@ -0,0 +1,11 @@
+:host { display: block; }
+.tg-ap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tg-spacing-3); padding: var(--tg-spacing-3) var(--tg-spacing-4); background: var(--tg-color-surface-raised); border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-xl); font-family: var(--tg-font-family-sans); }
+.tg-ap__play { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--tg-color-primary); color: white; border: none; cursor: pointer; flex-shrink: 0; transition: filter var(--tg-duration-fast); }
+.tg-ap__play:hover { filter: brightness(1.1); }
+.tg-ap__info { flex: 1; min-width: 6rem; }
+.tg-ap__title { display: block; font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-medium); color: var(--tg-color-text-primary); }
+.tg-ap__artist { display: block; font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); }
+.tg-ap__track { display: flex; align-items: center; gap: var(--tg-spacing-2); width: 100%; }
+.tg-ap__time { font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); font-family: var(--tg-font-family-mono); min-width: 2.5rem; }
+.tg-ap__slider { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: var(--tg-radius-full); background: var(--tg-color-surface-sunken); outline: none; cursor: pointer; }
+.tg-ap__slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--tg-color-primary); }

package/dist/collection/components/tg-audio-player/tg-audio-player.js

@@ -0,0 +1,118 @@
+import { h, Host } from "@stencil/core";
+export class TgAudioPlayer {
+    constructor() {
+        this.src = '';
+        this.playing = false;
+        this.currentTime = 0;
+        this.duration = 0;
+        this.toggle = () => {
+            if (this.audio) {
+                if (this.playing)
+                    this.audio.pause();
+                else
+                    this.audio.play();
+                this.playing = !this.playing;
+            }
+        };
+        this.seek = (e) => {
+            if (this.audio)
+                this.audio.currentTime = Number(e.target.value);
+        };
+    }
+    componentDidLoad() {
+        var _a;
+        this.audio = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('audio');
+        if (this.audio) {
+            this.audio.addEventListener('loadedmetadata', () => { this.duration = this.audio.duration; });
+            this.audio.addEventListener('timeupdate', () => { this.currentTime = this.audio.currentTime; });
+            this.audio.addEventListener('ended', () => { this.playing = false; });
+        }
+    }
+    fmt(s) { const m = Math.floor(s / 60); const sec = Math.floor(s % 60); return m + ':' + String(sec).padStart(2, '0'); }
+    render() {
+        return (h(Host, { key: '85d78ae57dc36123c59fe758b247bd0c497d9a79' }, h("div", { key: '8143720caac0b6acc3160eef5fec7132f743dc63', class: "tg-ap" }, h("audio", { key: '7e0bb491dc6e47c5480db2d875e86cbaa697a6dd', src: this.src, preload: "metadata" }), h("button", { key: '1b2fdd7ec261c96d93b30538bbbccb343cf06d38', class: "tg-ap__play", type: "button", onClick: this.toggle }, this.playing ? h("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: "20", height: "20" }, h("path", { d: "M5.75 3a.75.75 0 00-.75.75v12.5c0 .414.336.75.75.75h1.5a.75.75 0 00.75-.75V3.75A.75.75 0 007.25 3h-1.5zM12.75 3a.75.75 0 00-.75.75v12.5c0 .414.336.75.75.75h1.5a.75.75 0 00.75-.75V3.75a.75.75 0 00-.75-.75h-1.5z" }))
+            : h("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: "20", height: "20" }, h("path", { d: "M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" }))), h("div", { key: '6282aaaf7b2beb808aa629be42afbd2999462ab3', class: "tg-ap__info" }, this.heading && h("span", { key: 'e37a9245b658c732fd871832cc27f9438e8fbe3f', class: "tg-ap__title" }, this.heading), this.artist && h("span", { key: 'e9013791692a7b64789526ad569cd7cf21b5664d', class: "tg-ap__artist" }, this.artist)), h("div", { key: '8f215ec404c2233828782e69fe045b153f3dab43', class: "tg-ap__track" }, h("span", { key: 'fc97a84ac437cd73e07d220a47bbedba73d77292', class: "tg-ap__time" }, this.fmt(this.currentTime)), h("input", { key: 'ea037c81c62a0169ef8f0427dad04407d5fabd68', class: "tg-ap__slider", type: "range", min: 0, max: this.duration || 0, value: this.currentTime, onInput: this.seek }), h("span", { key: '3f1d0e56731d5a064b99e6b3af479c9c39fbd7ef', class: "tg-ap__time" }, this.fmt(this.duration))))));
+    }
+    static get is() { return "tg-audio-player"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-audio-player.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-audio-player.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src",
+                "defaultValue": "''"
+            },
+            "heading": {
+                "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": "heading"
+            },
+            "artist": {
+                "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": "artist"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "playing": {},
+            "currentTime": {},
+            "duration": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,15 @@
+:host { display: block; }
+.tg-autocomplete { position: relative; font-family: var(--tg-font-family-sans); }
+.tg-ac__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-ac__input-wrap { display: flex; align-items: center; border: 1px solid var(--tg-color-border-strong); border-radius: var(--tg-radius-lg); background: var(--tg-color-surface-raised); transition: border-color var(--tg-duration-fast), box-shadow var(--tg-duration-fast); }
+.tg-ac__input-wrap:focus-within { border-color: var(--tg-color-border-focus); box-shadow: var(--tg-focus-ring); }
+.tg-ac__input-wrap--invalid { border-color: var(--tg-color-danger); }
+.tg-ac__input { flex: 1; border: none; outline: none; background: transparent; color: var(--tg-color-text-primary); font-family: inherit; padding: 0 var(--tg-spacing-3); width: 100%; }
+.tg-autocomplete--sm .tg-ac__input { height: 2rem; font-size: var(--tg-font-size-xs); }
+.tg-autocomplete--md .tg-ac__input { height: 2.5rem; font-size: var(--tg-font-size-sm); }
+.tg-autocomplete--lg .tg-ac__input { height: 3rem; font-size: var(--tg-font-size-md); }
+.tg-ac__spinner { width: 1rem; height: 1rem; border: 2px solid var(--tg-color-border); border-top-color: var(--tg-color-primary); border-radius: 50%; animation: tg-spin 0.6s linear infinite; margin-right: var(--tg-spacing-2); flex-shrink: 0; }
+@keyframes tg-spin { to { transform: rotate(360deg); } }
+.tg-ac__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-ac__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-ac__option:hover { background: var(--tg-color-primary-subtle); }

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

@@ -0,0 +1,285 @@
+import { h, Host } from "@stencil/core";
+export class TgAutocomplete {
+    constructor() {
+        this.placeholder = 'Rechercher…';
+        this.disabled = false;
+        this.invalid = false;
+        this.loading = false;
+        this.suggestions = [];
+        this.size = 'md';
+        this.minChars = 2;
+        this.open = false;
+        this.query = '';
+        this.handleInput = (e) => {
+            this.query = e.target.value;
+            if (this.query.length >= this.minChars) {
+                this.tgSearch.emit(this.query);
+                this.open = true;
+            }
+            else {
+                this.open = false;
+            }
+        };
+    }
+    get parsed() {
+        if (typeof this.suggestions === 'string') {
+            try {
+                return JSON.parse(this.suggestions);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.suggestions;
+    }
+    onDocClick() { this.open = false; }
+    select(val) { this.query = val; this.tgChange.emit(val); this.open = false; }
+    render() {
+        return (h(Host, { key: 'c18b396b3e3afc660d6a768ec2701ece7c2af085' }, h("div", { key: '7b727ea48b8d892c347733a8b2bee020124ca429', class: 'tg-autocomplete tg-autocomplete--' + this.size, onClick: (e) => e.stopPropagation() }, this.label && h("label", { key: '742aac28fa41b1866444ca7e15caa766262b3cad', class: "tg-ac__label" }, this.label), h("div", { key: '9bdc0897bf89395e06f55f1d65a75edcec1b03f8', class: { 'tg-ac__input-wrap': true, 'tg-ac__input-wrap--invalid': this.invalid } }, h("input", { key: '52621e050be5f8bbc3989fbb4ab16f2492b05c4a', class: "tg-ac__input", type: "text", value: this.query, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: () => {
+                if (this.query.length >= this.minChars)
+                    this.open = true;
+            } }), this.loading && h("span", { key: '525efb4298d6da8d4e7bde697b8ec4ebdb9dbccc', class: "tg-ac__spinner" })), this.open && this.parsed.length > 0 && (h("ul", { key: 'c9d1b63931bc34c92f7cdec1a7ce2deb9d437ef6', class: "tg-ac__dropdown" }, this.parsed.map(s => h("li", { class: "tg-ac__option", onClick: () => this.select(s) }, s)))))));
+    }
+    static get is() { return "tg-autocomplete"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-autocomplete.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-autocomplete.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'"
+            },
+            "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"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "suggestions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "suggestions",
+                "defaultValue": "[]"
+            },
+            "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'"
+            },
+            "minChars": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-chars",
+                "defaultValue": "2"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "query": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgChange",
+                "name": "tgChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "tgSearch",
+                "name": "tgSearch",
+                "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-avatar/tg-avatar.css

@@ -0,0 +1,72 @@
+/* ============================================================
+   tg-avatar — Teranga Design System
+   ============================================================ */
+
+:host {
+  display: inline-flex;
+}
+
+.tg-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--tg-radius-full);
+  overflow: hidden;
+  flex-shrink: 0;
+  font-family: var(--tg-font-family-sans);
+  font-weight: var(--tg-font-weight-semibold);
+  user-select: none;
+  border: 2px solid var(--tg-color-surface-page);
+}
+
+/* ── Sizes */
+.tg-avatar--xs  { width: 1.5rem;  height: 1.5rem;  font-size: 0.5rem; }
+.tg-avatar--sm  { width: 2rem;    height: 2rem;    font-size: 0.625rem; }
+.tg-avatar--md  { width: 2.5rem;  height: 2.5rem;  font-size: 0.75rem; }
+.tg-avatar--lg  { width: 3rem;    height: 3rem;    font-size: 0.875rem; }
+.tg-avatar--xl  { width: 3.75rem; height: 3.75rem; font-size: 1rem; }
+.tg-avatar--2xl { width: 5rem;    height: 5rem;    font-size: 1.375rem; }
+
+/* ── Square */
+.tg-avatar--square { border-radius: var(--tg-radius-lg); }
+
+/* ── Image */
+.tg-avatar__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* ── Initials */
+.tg-avatar__initials {
+  line-height: 1;
+  letter-spacing: 0.03em;
+}
+
+/* ── Color variants */
+.tg-avatar--primary   { background-color: var(--tg-color-primary);    color: var(--tg-color-primary-on); }
+.tg-avatar--secondary { background-color: var(--tg-color-secondary-hover); color: var(--tg-color-secondary-on); }
+.tg-avatar--success   { background-color: var(--tg-color-success);    color: var(--tg-color-success-on); }
+.tg-avatar--warning   { background-color: var(--tg-color-warning);    color: var(--tg-color-warning-on); }
+.tg-avatar--danger    { background-color: var(--tg-color-danger);     color: var(--tg-color-danger-on); }
+.tg-avatar--info      { background-color: var(--tg-color-info);       color: var(--tg-color-info-on); }
+.tg-avatar--neutral   { background-color: var(--tg-color-neutral-200); color: var(--tg-color-neutral-700); }
+
+/* ── Status dot */
+.tg-avatar__status {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 25%;
+  height: 25%;
+  min-width: 8px;
+  min-height: 8px;
+  border-radius: 50%;
+  border: 2px solid var(--tg-color-surface-page);
+}
+
+.tg-avatar__status--online  { background-color: var(--tg-color-success); }
+.tg-avatar__status--offline { background-color: var(--tg-color-neutral-400); }
+.tg-avatar__status--busy    { background-color: var(--tg-color-danger); }
+.tg-avatar__status--away    { background-color: var(--tg-color-warning); }