@teranga-ds/components 0.1.0

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

@@ -0,0 +1,87 @@
+import { h, Host } from "@stencil/core";
+export class TgLiveBadge {
+    constructor() {
+        this.label = 'EN DIRECT';
+        this.active = true;
+        this.variant = 'default';
+    }
+    render() {
+        return (h(Host, { key: 'b067884844e5f89173d4d073e41f5d2d1502b399' }, h("span", { key: 'b93f121f7496d2d7dabecec78346877500308922', class: { 'tg-lb': true, 'tg-lb--active': this.active, ['tg-lb--' + this.variant]: true } }, h("span", { key: 'ebfbafc6b00754d56991f537216862478b3dc4b1', class: "tg-lb__dot" }), h("span", { key: '4bf6bb7e6c0296a90fb214c46715d6977e9790a3', class: "tg-lb__label" }, this.label))));
+    }
+    static get is() { return "tg-live-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-live-badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-live-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'EN DIRECT'"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active",
+                "defaultValue": "true"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'recording' | 'streaming'",
+                    "resolved": "\"default\" | \"recording\" | \"streaming\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}

package/dist/collection/components/tg-login-form/tg-login-form.css

@@ -0,0 +1,16 @@
+:host { display: block; }
+.tg-lf { max-width: 24rem; margin: 0 auto; padding: var(--tg-spacing-8); background: var(--tg-color-surface-raised); border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-2xl); font-family: var(--tg-font-family-sans); }
+.tg-lf__logo { text-align: center; font-size: 2rem; margin-bottom: var(--tg-spacing-4); }
+.tg-lf__title { margin: 0 0 var(--tg-spacing-1); font-size: var(--tg-font-size-xl); font-weight: var(--tg-font-weight-bold); color: var(--tg-color-text-primary); text-align: center; font-family: var(--tg-font-family-display); }
+.tg-lf__subtitle { margin: 0 0 var(--tg-spacing-5); font-size: var(--tg-font-size-sm); color: var(--tg-color-text-secondary); text-align: center; }
+.tg-lf__error { padding: var(--tg-spacing-2) var(--tg-spacing-3); background: var(--tg-color-danger-subtle); color: var(--tg-color-danger); border-radius: var(--tg-radius-lg); font-size: var(--tg-font-size-sm); margin-bottom: var(--tg-spacing-4); }
+.tg-lf__form { display: flex; flex-direction: column; gap: var(--tg-spacing-4); }
+.tg-lf__field { display: flex; flex-direction: column; gap: var(--tg-spacing-1-5); }
+.tg-lf__label { font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-medium); color: var(--tg-color-text-primary); }
+.tg-lf__input { padding: var(--tg-spacing-2-5) var(--tg-spacing-3); border: 1px solid var(--tg-color-border-strong); border-radius: var(--tg-radius-lg); font-family: inherit; font-size: var(--tg-font-size-sm); color: var(--tg-color-text-primary); background: var(--tg-color-surface-raised); outline: none; transition: border-color var(--tg-duration-fast), box-shadow var(--tg-duration-fast); }
+.tg-lf__input:focus { border-color: var(--tg-color-border-focus); box-shadow: var(--tg-focus-ring); }
+.tg-lf__btn { padding: var(--tg-spacing-2-5); background: var(--tg-color-primary); color: var(--tg-color-primary-on); border: none; border-radius: var(--tg-radius-lg); font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-semibold); cursor: pointer; transition: filter var(--tg-duration-fast); display: flex; align-items: center; justify-content: center; }
+.tg-lf__btn:hover:not(:disabled) { filter: brightness(1.1); }
+.tg-lf__btn:disabled { opacity: 0.7; cursor: wait; }
+.tg-lf__spinner { width: 1.25rem; height: 1.25rem; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: tg-lf-spin 0.6s linear infinite; }
+@keyframes tg-lf-spin { to { transform: rotate(360deg); } }

package/dist/collection/components/tg-login-form/tg-login-form.js

@@ -0,0 +1,150 @@
+import { h, Host } from "@stencil/core";
+export class TgLoginForm {
+    constructor() {
+        this.heading = 'Connexion';
+        this.loading = false;
+        this.email = '';
+        this.password = '';
+        this.handleSubmit = (e) => { e.preventDefault(); this.tgLogin.emit({ email: this.email, password: this.password }); };
+    }
+    render() {
+        return (h(Host, { key: 'b4683389c890e1d32044f434268f53e1e019af4f' }, h("div", { key: '7306773a637114600431addb51e2ba89ff6eb08c', class: "tg-lf" }, this.logo && h("div", { key: '04c8b07072f23256a18f298391bc52740f06f490', class: "tg-lf__logo" }, this.logo), h("h2", { key: '47ecfb023fa7c5e962d58f75cea46ff0f0fdebf3', class: "tg-lf__title" }, this.heading), this.subtitle && h("p", { key: 'effc0c05996109765eb6d85aa6213e51932b9b70', class: "tg-lf__subtitle" }, this.subtitle), this.error && h("div", { key: '38e4bfdbb4a58e24b78b1022db4643bf2e975873', class: "tg-lf__error" }, this.error), h("form", { key: '4b79ce663b680a20d6aef1315f4bd9fd6e796a3a', class: "tg-lf__form", onSubmit: this.handleSubmit }, h("div", { key: 'c281a3a248b954276fede1583034f8d97261575b', class: "tg-lf__field" }, h("label", { key: '6c0b4cc43142ef2fe26f591f6a5e65a95245d84a', class: "tg-lf__label" }, "Email"), h("input", { key: '3183a8d211e8c385b97711f86ee7c532b2249d6b', class: "tg-lf__input", type: "email", value: this.email, placeholder: "nom@exemple.com", autocomplete: "email", onInput: (e) => { this.email = e.target.value; }, required: true })), h("div", { key: '4e28fd9a15c5d1b356087475f62e7d1816613391', class: "tg-lf__field" }, h("label", { key: '3e33adbd530d2794b152af3a4f393b7ef33aa9fc', class: "tg-lf__label" }, "Mot de passe"), h("input", { key: '4c1292a6eb18c6d374cf7d60f317f0b943d94c69', class: "tg-lf__input", type: "password", value: this.password, placeholder: "\\u2022\\u2022\\u2022\\u2022\\u2022\\u2022\\u2022\\u2022", autocomplete: "current-password", onInput: (e) => { this.password = e.target.value; }, required: true })), h("button", { key: 'c4409e3003528e874746cec210b7407639280fbd', class: "tg-lf__btn", type: "submit", disabled: this.loading }, this.loading ? h("span", { class: "tg-lf__spinner" }) : 'Se connecter')), h("slot", { key: '21d6a4bb469c1c3ea4a360e97de1ca42c4798e02' }))));
+    }
+    static get is() { return "tg-login-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-login-form.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-login-form.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": "'Connexion'"
+            },
+            "subtitle": {
+                "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": "subtitle"
+            },
+            "logo": {
+                "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": "logo"
+            },
+            "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"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "email": {},
+            "password": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgLogin",
+                "name": "tgLogin",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ email: string; password: string }",
+                    "resolved": "{ email: string; password: string; }",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/tg-mega-menu/tg-mega-menu.css

@@ -0,0 +1,19 @@
+:host { display: inline-block; position: relative; }
+.tg-mega { font-family: var(--tg-font-family-sans); }
+.tg-mega__trigger { display: inline-flex; align-items: center; gap: var(--tg-spacing-1); background: none; border: none; cursor: pointer; font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-medium); color: var(--tg-color-text-primary); padding: var(--tg-spacing-2) var(--tg-spacing-3); border-radius: var(--tg-radius-lg); transition: background var(--tg-duration-fast); }
+.tg-mega__trigger:hover { background: var(--tg-color-primary-subtle); }
+.tg-mega__chev { transition: transform var(--tg-duration-fast); }
+.tg-mega__chev--open { transform: rotate(180deg); }
+.tg-mega__panel { position: absolute; top: 100%; left: 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-xl); box-shadow: var(--tg-shadow-xl); z-index: 1000; min-width: 36rem; animation: tg-mega-enter var(--tg-duration-fast) var(--tg-ease-out); }
+@keyframes tg-mega-enter { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
+.tg-mega__tabs { display: flex; border-bottom: 1px solid var(--tg-color-border); padding: var(--tg-spacing-1) var(--tg-spacing-2) 0; }
+.tg-mega__tab { background: none; border: none; border-bottom: 2px solid transparent; padding: var(--tg-spacing-2) var(--tg-spacing-3); font-size: var(--tg-font-size-sm); cursor: pointer; color: var(--tg-color-text-secondary); transition: all var(--tg-duration-fast); }
+.tg-mega__tab:hover { color: var(--tg-color-primary); }
+.tg-mega__tab--active { color: var(--tg-color-primary); border-bottom-color: var(--tg-color-primary); font-weight: var(--tg-font-weight-medium); }
+.tg-mega__sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--tg-spacing-4); padding: var(--tg-spacing-4); }
+.tg-mega__sec-title { margin: 0 0 var(--tg-spacing-2); font-size: var(--tg-font-size-xs); font-weight: var(--tg-font-weight-semibold); text-transform: uppercase; letter-spacing: var(--tg-tracking-wide); color: var(--tg-color-text-secondary); }
+.tg-mega__item { display: flex; gap: var(--tg-spacing-2); padding: var(--tg-spacing-2); border-radius: var(--tg-radius-md); text-decoration: none; color: var(--tg-color-text-primary); transition: background var(--tg-duration-fast); }
+.tg-mega__item:hover { background: var(--tg-color-primary-subtle); }
+.tg-mega__item-icon { font-size: 1.25rem; flex-shrink: 0; }
+.tg-mega__item-label { display: block; font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-medium); }
+.tg-mega__item-desc { display: block; font-size: var(--tg-font-size-xs); color: var(--tg-color-text-secondary); margin-top: 2px; }

package/dist/collection/components/tg-mega-menu/tg-mega-menu.js

@@ -0,0 +1,82 @@
+import { h, Host } from "@stencil/core";
+export class TgMegaMenu {
+    constructor() {
+        this.tabs = [];
+        this.open = false;
+        this.activeTab = 0;
+    }
+    get parsed() {
+        if (typeof this.tabs === 'string') {
+            try {
+                return JSON.parse(this.tabs);
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return this.tabs;
+    }
+    onDocClick() { this.open = false; }
+    render() {
+        const tabs = this.parsed;
+        const active = tabs[this.activeTab];
+        return (h(Host, { key: '2fe88e550f40cd033df85d4f6a31866d9e3f7ebd' }, h("div", { key: '7245fd5e21bd7ae398c00472f1aba4c03eea4a33', class: "tg-mega", onClick: (e) => e.stopPropagation() }, h("button", { key: 'c54f6d55c5a337eca50144f11a5ac30ebad51ed0', class: "tg-mega__trigger", type: "button", onClick: () => { this.open = !this.open; } }, h("slot", { key: '7bdc928608dffadc862af62075249ac6afe1c85d', name: "trigger" }, "Menu"), h("svg", { key: 'a3d6184a5be6532d22ca7ef34c4508258578f8ff', class: { 'tg-mega__chev': true, 'tg-mega__chev--open': this.open }, viewBox: "0 0 20 20", fill: "currentColor", width: "14", height: "14" }, h("path", { key: '59cf945ebea3c9d7eb73e00c36caa1ec8ab4a38f', "fill-rule": "evenodd", d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" }))), this.open && (h("div", { key: '484d4184425b2d7f24e7672307822b2778e7fa1d', class: "tg-mega__panel" }, tabs.length > 1 && h("div", { key: 'f9ea6f620a83c1fb6cbaa9d419361b80e502dcc1', class: "tg-mega__tabs" }, tabs.map((t, i) => h("button", { class: { 'tg-mega__tab': true, 'tg-mega__tab--active': i === this.activeTab }, type: "button", onClick: () => { this.activeTab = i; } }, t.label))), active && h("div", { key: '8108298cb4d800605bdbeb7c8d22cbf21c0c1518', class: "tg-mega__sections" }, active.sections.map(sec => (h("div", { class: "tg-mega__section" }, h("h4", { class: "tg-mega__sec-title" }, sec.title), sec.items.map(item => (h("a", { class: "tg-mega__item", href: item.href || '#' }, item.icon && h("span", { class: "tg-mega__item-icon" }, item.icon), h("div", null, h("span", { class: "tg-mega__item-label" }, item.label), item.description && h("span", { class: "tg-mega__item-desc" }, item.description))))))))))))));
+    }
+    static get is() { return "tg-mega-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-mega-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-mega-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tabs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | MegaMenuTab[]",
+                    "resolved": "MegaMenuTab[] | string",
+                    "references": {
+                        "MegaMenuTab": {
+                            "location": "local",
+                            "path": "/Users/mahykane/work/Teranga-Design-Systems/packages/components/src/components/tg-mega-menu/tg-mega-menu.tsx",
+                            "id": "src/components/tg-mega-menu/tg-mega-menu.tsx::MegaMenuTab"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tabs",
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "activeTab": {}
+        };
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onDocClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,132 @@
+:host {
+  display: contents;
+}
+
+/* Backdrop */
+.tg-modal__backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--tg-spacing-lg);
+  animation: tg-modal-backdrop-in var(--tg-duration-normal, 200ms) var(--tg-ease-default, ease) forwards;
+}
+
+.tg-modal__backdrop--exiting {
+  animation: tg-modal-backdrop-out var(--tg-duration-normal, 200ms) var(--tg-ease-default, ease) forwards;
+}
+
+@keyframes tg-modal-backdrop-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes tg-modal-backdrop-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+/* Panel */
+.tg-modal__panel {
+  background: var(--tg-color-surface, #fff);
+  border-radius: var(--tg-radius-xl, 16px);
+  box-shadow: var(--tg-shadow-xl, 0 20px 60px rgba(0,0,0,0.15));
+  width: 100%;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: tg-modal-panel-in var(--tg-duration-normal, 200ms) var(--tg-ease-out, ease-out) forwards;
+}
+
+.tg-modal__backdrop--exiting .tg-modal__panel {
+  animation: tg-modal-panel-out var(--tg-duration-fast, 150ms) var(--tg-ease-in, ease-in) forwards;
+}
+
+.tg-modal__panel--sm { max-width: 400px; }
+.tg-modal__panel--md { max-width: 560px; }
+.tg-modal__panel--lg { max-width: 720px; }
+.tg-modal__panel--xl { max-width: 960px; }
+.tg-modal__panel--full { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
+
+@keyframes tg-modal-panel-in {
+  from { opacity: 0; transform: scale(0.95) translateY(8px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+@keyframes tg-modal-panel-out {
+  from { opacity: 1; transform: scale(1) translateY(0); }
+  to { opacity: 0; transform: scale(0.95) translateY(8px); }
+}
+
+/* Header */
+.tg-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--tg-spacing-lg, 24px) var(--tg-spacing-lg, 24px) var(--tg-spacing-sm, 12px);
+  gap: var(--tg-spacing-sm, 12px);
+}
+
+.tg-modal__title {
+  font-family: var(--tg-font-family, sans-serif);
+  font-size: var(--tg-font-size-lg, 1.125rem);
+  font-weight: var(--tg-font-weight-semibold, 600);
+  color: var(--tg-color-text, #111827);
+  margin: 0;
+  line-height: 1.3;
+}
+
+.tg-modal__close {
+  appearance: none;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: var(--tg-spacing-xs, 8px);
+  border-radius: var(--tg-radius-md, 8px);
+  color: var(--tg-color-text-secondary, #6b7280);
+  transition: background var(--tg-duration-fast, 150ms), color var(--tg-duration-fast, 150ms);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.tg-modal__close:hover {
+  background: var(--tg-color-neutral-100, #f3f4f6);
+  color: var(--tg-color-text, #111827);
+}
+
+.tg-modal__close:focus-visible {
+  outline: none;
+  box-shadow: var(--tg-focus-ring);
+}
+
+.tg-modal__close svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* Body */
+.tg-modal__body {
+  padding: var(--tg-spacing-sm, 12px) var(--tg-spacing-lg, 24px);
+  overflow-y: auto;
+  flex: 1;
+  font-family: var(--tg-font-family, sans-serif);
+  font-size: var(--tg-font-size-md, 0.875rem);
+  color: var(--tg-color-text-secondary, #6b7280);
+  line-height: 1.6;
+}
+
+/* Footer */
+.tg-modal__footer {
+  padding: var(--tg-spacing-sm, 12px) var(--tg-spacing-lg, 24px) var(--tg-spacing-lg, 24px);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--tg-spacing-sm, 12px);
+}

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

@@ -0,0 +1,180 @@
+import { h, Host } from "@stencil/core";
+export class TgModal {
+    constructor() {
+        this.open = false;
+        this.size = 'md';
+        this.closeOnBackdrop = true;
+        this.closeOnEscape = true;
+        this.exiting = false;
+        this.close = () => {
+            this.exiting = true;
+            setTimeout(() => {
+                this.exiting = false;
+                this.open = false;
+                this.tgClose.emit();
+            }, 200);
+        };
+        this.handleBackdropClick = (e) => {
+            if (this.closeOnBackdrop && e.target.classList.contains('tg-modal__backdrop')) {
+                this.close();
+            }
+        };
+    }
+    handleKeydown(e) {
+        if (this.open && this.closeOnEscape && e.key === 'Escape') {
+            this.close();
+        }
+    }
+    render() {
+        if (!this.open)
+            return null;
+        return (h(Host, null, h("div", { class: { 'tg-modal__backdrop': true, 'tg-modal__backdrop--exiting': this.exiting }, onClick: this.handleBackdropClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-title" }, h("div", { class: { 'tg-modal__panel': true, [`tg-modal__panel--${this.size}`]: true } }, h("div", { class: "tg-modal__header" }, this.modalTitle && h("h2", { class: "tg-modal__title", id: "modal-title" }, this.modalTitle), h("button", { class: "tg-modal__close", onClick: this.close, "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" })))), h("div", { class: "tg-modal__body" }, h("slot", null)), h("div", { class: "tg-modal__footer" }, h("slot", { name: "footer" }))))));
+    }
+    static get is() { return "tg-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tg-modal.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tg-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "modalTitle": {
+                "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": "modal-title"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg' | 'xl' | 'full'",
+                    "resolved": "\"full\" | \"lg\" | \"md\" | \"sm\" | \"xl\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "closeOnBackdrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-backdrop",
+                "defaultValue": "true"
+            },
+            "closeOnEscape": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-escape",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "exiting": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tgClose",
+                "name": "tgClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}