@supersoniks/concorde 4.8.0 → 4.9.0

package/dist/js/core/components/ui/table/table-tfoot.js

@@ -0,0 +1,28 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
+const tagName = "sonic-tfoot";
+let TableTfoot = class TableTfoot extends LitElement {
+    render() {
+        return html `<tfoot>
+      <slot></slot>
+    </tfoot>`;
+    }
+};
+TableTfoot.styles = [
+    css `
+      :host {
+        display: contents;
+      }
+    `,
+];
+TableTfoot = __decorate([
+    customElement(tagName)
+], TableTfoot);
+export { TableTfoot };
+//# sourceMappingURL=table-tfoot.js.map

package/dist/js/core/components/ui/table/table-tfoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-tfoot.js","sourceRoot":"","sources":["../../../../../../src/core/components/ui/table/table-tfoot.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,MAAM,OAAO,GAAG,aAAa,CAAC;AAGvB,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IASxC,MAAM;QACJ,OAAO,IAAI,CAAA;;aAEF,CAAC;IACZ,CAAC;;AAZM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;KAIF;CACF,AANY,CAMX;AAPS,UAAU;IADtB,aAAa,CAAC,OAAO,CAAC;GACV,UAAU,CActB"}

package/dist/js/core/components/ui/table/table-th.js

@@ -0,0 +1,80 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { typeColor } from "@supersoniks/concorde/core/components/ui/_css/type";
+const tagName = "sonic-th";
+let TableTh = class TableTh extends LitElement {
+    render() {
+        const styles = {
+            textAlign: this.align,
+            minWidth: this.minWidth,
+            maxWidth: this.maxWidth,
+            width: this.width,
+        };
+        return html `<th
+      part="th"
+      style=${styleMap(styles)}
+      colspan=${ifDefined(this.colSpan)}
+      rowspan=${ifDefined(this.rowSpan)}
+    >
+      <slot></slot>
+    </th> `;
+    }
+};
+TableTh.styles = [
+    typeColor,
+    css `
+      :host {
+        display: contents;
+        background: var(--sc-table-bg);
+        position: sticky;
+        top: 0;
+        z-index: 20;
+      }
+
+      th {
+        all: inherit;
+        display: table-cell;
+        border-bottom: calc(var(--sc-border-width, max(1px, 0.12rem)) * 1.5)
+          solid var(--sc-table-border-color);
+        text-transform: var(--sc-table-th-tt);
+        font-weight: var(--sc-table-th-fw);
+        font-size: var(--sc-table-th-fs);
+        padding: var(--sc-table-th-py) var(--sc-table-th-px);
+      }
+
+      :host([noBorder]) th {
+        border-bottom: none;
+      }
+    `,
+];
+__decorate([
+    property({ type: Number })
+], TableTh.prototype, "colSpan", void 0);
+__decorate([
+    property({ type: Number })
+], TableTh.prototype, "rowSpan", void 0);
+__decorate([
+    property({ type: String })
+], TableTh.prototype, "align", void 0);
+__decorate([
+    property({ type: String })
+], TableTh.prototype, "minWidth", void 0);
+__decorate([
+    property({ type: String })
+], TableTh.prototype, "maxWidth", void 0);
+__decorate([
+    property({ type: String })
+], TableTh.prototype, "width", void 0);
+TableTh = __decorate([
+    customElement(tagName)
+], TableTh);
+export { TableTh };
+//# sourceMappingURL=table-th.js.map

package/dist/js/core/components/ui/table/table-th.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-th.js","sourceRoot":"","sources":["../../../../../../src/core/components/ui/table/table-th.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,oDAAoD,CAAC;AAE/E,MAAM,OAAO,GAAG,UAAU,CAAC;AAGpB,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAoCrC,MAAM;QACJ,MAAM,MAAM,GAAG;YACb,SAAS,EAAE,IAAI,CAAC,KAAK;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC;QACF,OAAO,IAAI,CAAA;;cAED,QAAQ,CAAC,MAAM,CAAC;gBACd,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;gBACvB,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;;;WAG5B,CAAC;IACV,CAAC;;AAlDM,cAAM,GAAG;IACd,SAAS;IACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;KAuBF;CACF,AA1BY,CA0BX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAgB;AACf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAgB;AAlChC,OAAO;IADnB,aAAa,CAAC,OAAO,CAAC;GACV,OAAO,CAoDnB"}

package/dist/js/core/components/ui/table/table-thead.js

@@ -0,0 +1,26 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
+const tagName = "sonic-thead";
+let TableThead = class TableThead extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+TableThead.styles = [
+    css `
+      :host {
+        display: table-header-group;
+      }
+    `,
+];
+TableThead = __decorate([
+    customElement(tagName)
+], TableThead);
+export { TableThead };
+//# sourceMappingURL=table-thead.js.map

package/dist/js/core/components/ui/table/table-thead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-thead.js","sourceRoot":"","sources":["../../../../../../src/core/components/ui/table/table-thead.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,MAAM,OAAO,GAAG,aAAa,CAAC;AAGvB,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IASxC,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAVM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;KAIF;CACF,AANY,CAMX;AAPS,UAAU;IADtB,aAAa,CAAC,OAAO,CAAC;GACV,UAAU,CAYtB"}

package/dist/js/core/components/ui/table/table-tr.js

@@ -0,0 +1,67 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { typeColor } from "@supersoniks/concorde/core/components/ui/_css/type";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+const tagName = "sonic-tr";
+let TableTr = class TableTr extends Subscriber(LitElement) {
+    constructor() {
+        super(...arguments);
+        this._metadata_ = {};
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has("_metadata_")) {
+            this.even = !!this._metadata_.even;
+            this.odd = !!this._metadata_.odd;
+            this.last = !!this._metadata_.lastChild;
+        }
+        super.willUpdate(changedProperties);
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+TableTr.styles = [
+    typeColor,
+    css `
+      :host {
+        display: table-row;
+      }
+
+      :host([odd]) {
+        background: var(--sc-table-accent-bg) !important;
+      }
+      :host([even]) {
+        background: var(--sc-table-bg) !important;
+      }
+
+      :host([last]) {
+        --sc-table-td-border-b: none;
+      }
+      :host(:hover) {
+        background: var(--sc-table-hover-bg) !important;
+      }
+    `,
+];
+__decorate([
+    property({ type: Object })
+], TableTr.prototype, "_metadata_", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TableTr.prototype, "even", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TableTr.prototype, "odd", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TableTr.prototype, "last", void 0);
+TableTr = __decorate([
+    customElement(tagName)
+], TableTr);
+export { TableTr };
+//# sourceMappingURL=table-tr.js.map

package/dist/js/core/components/ui/table/table-tr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-tr.js","sourceRoot":"","sources":["../../../../../../src/core/components/ui/table/table-tr.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,GAAG,EAAiB,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,SAAS,EAAC,MAAM,oDAAoD,CAAC;AAE7E,OAAO,UAAU,MAAM,8CAA8C,CAAC;AAEtE,MAAM,OAAO,GAAG,UAAU,CAAC;AAGpB,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU,CAAC,UAAU,CAAC;IAA5C;;QAuBqB,eAAU,GAAqB,EAAE,CAAC;IAe9D,CAAC;IAXC,UAAU,CAAC,iBAAiC;QAC1C,IAAI,iBAAiB,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;YACxC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YACnC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC;YACjC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;QAC1C,CAAC;QACD,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;IACtC,CAAC;IACD,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AApCM,cAAM,GAAG;IACd,SAAS;IACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;KAkBF;CACF,AArBY,CAqBX;AACwB;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;2CAAmC;AAClB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;qCAAgB;AACf;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;oCAAe;AACd;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;qCAAgB;AA1B9C,OAAO;IADnB,aAAa,CAAC,OAAO,CAAC;GACV,OAAO,CAsCnB"}

package/dist/js/core/components/ui/table/table.js

@@ -0,0 +1,106 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
+import "@supersoniks/concorde/core/components/ui/table/table-tr";
+import "@supersoniks/concorde/core/components/ui/table/table-th";
+import "@supersoniks/concorde/core/components/ui/table/table-td";
+import "@supersoniks/concorde/core/components/ui/table/table-thead";
+import "@supersoniks/concorde/core/components/ui/table/table-tbody";
+import "@supersoniks/concorde/core/components/ui/table/table-tfoot";
+import "@supersoniks/concorde/core/components/ui/table/table-caption";
+import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
+const tagName = "sonic-table";
+let Table = class Table extends LitElement {
+    render() {
+        const containerStyles = {
+            maxHeight: this.maxHeight,
+        };
+        return html `
+      <div
+        class="table-container ${!this.noCustomScroll ? "custom-scroll" : ""}"
+        style=${styleMap(containerStyles)}
+      >
+        <div class="table">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+Table.styles = [
+    customScroll,
+    fontSize,
+    css `
+      :host {
+        --sc-table-fw: var(--sc-font-weight-base, 400);
+        --sc-table-fst: var(--sc-font-style-base, normal);
+        --sc-table-fs: 1rem;
+        --sc-table-border-color: var(--sc-border-color);
+        --sc-table-caption-color: var(
+          --sc-base-500,
+          var(--sc-base-content, #000)
+        );
+        --sc-table-bg: var(--sc-base, #fff);
+        --sc-table-accent-bg: var(--sc-base-50, rgba(0, 0, 0, 0.04));
+        --sc-table-hover-bg: var(--sc-base-100, rgba(0, 0, 0, 0.07));
+        --sc-table-th-fs: 0.85em;
+        --sc-table-th-fw: bold;
+        --sc-table-th-tt: uppercase;
+        --sc-table-th-px: var(--sc-table-td-px);
+        --sc-table-th-py: calc(1.8 * var(--sc-table-td-py));
+        --sc-table-td-px: 0.5em;
+        --sc-table-td-py: 0.5em;
+        --sc-table-bw: var(--sc-border-width, max(1px, 0.12rem));
+        display: block;
+      }
+
+      .table-container {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+      }
+
+      :host([noCustomScroll]) .table-container {
+        overflow: initial;
+      }
+
+      .table {
+        width: 100%;
+        display: table;
+        box-sizing: border-box;
+      }
+
+      :host([bordered]) .table-container {
+        border: var(--sc-table-bw) solid var(--sc-table-border-color);
+        border-radius: var(--sc-rounded);
+        --sc-table-td-border-b: var(--sc-table-bw) solid
+          var(--sc-table-border-color);
+      }
+    `,
+];
+__decorate([
+    property({ type: String, reflect: true })
+], Table.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Table.prototype, "bordered", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Table.prototype, "rounded", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Table.prototype, "noCustomScroll", void 0);
+__decorate([
+    property({ type: String })
+], Table.prototype, "maxHeight", void 0);
+Table = __decorate([
+    customElement(tagName)
+], Table);
+export { Table };
+//# sourceMappingURL=table.js.map

package/dist/js/core/components/ui/table/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../../../src/core/components/ui/table/table.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,sDAAsD,CAAC;AAEpF,OAAO,yDAAyD,CAAC;AACjE,OAAO,yDAAyD,CAAC;AACjE,OAAO,yDAAyD,CAAC;AACjE,OAAO,4DAA4D,CAAC;AACpE,OAAO,4DAA4D,CAAC;AACpE,OAAO,4DAA4D,CAAC;AACpE,OAAO,8DAA8D,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,oDAAoD,CAAC;AAE9E,MAAM,OAAO,GAAG,aAAa,CAAC;AAEvB,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,UAAU;IAiEnC,MAAM;QACJ,MAAM,eAAe,GAAG;YACtB,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B,CAAC;QACF,OAAO,IAAI,CAAA;;iCAEkB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;gBAC5D,QAAQ,CAAC,eAAe,CAAC;;;;;;KAMpC,CAAC;IACJ,CAAC;;AA9EM,YAAM,GAAG;IACd,YAAY;IACZ,QAAQ;IACR,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6CF;CACF,AAjDY,CAiDX;AAEyC;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCAOhC;AACkC;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAoB;AACnB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAmB;AAClB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAA0B;AACzC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAoB;AA/DpC,KAAK;IADjB,aAAa,CAAC,OAAO,CAAC;GACV,KAAK,CAgFjB"}

package/dist/js/core/components/ui/theme/theme-collection/core-variables.js

@@ -0,0 +1,74 @@
+import { css } from "lit";
+export const coreVariables = css `
+  :host {
+    /* POLICES */
+    /*
+    --sc-font-family-base: "Inter var", "Inter", -apple-system, system-ui,
+      BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+      sans-serif; 
+    --sc-font-weight-base: 400; 
+    --sc-font-style-base: normal; 
+
+    --sc-headings-font-family: var(--sc-font-family-base, sans-serif); 
+    --sc-headings-font-style: var(--sc-font-style-base, normal); 
+    --sc-headings-line-height: 1.1; 
+    --sc-headings-font-weight: 700; 
+    */
+
+    /* ROUNDED*/
+    --sc-rounded-sm: calc(var(--sc-rounded, 0px) * 0.5);
+    --sc-rounded: 0.375rem;
+    --sc-rounded-md: calc(var(--sc-rounded, 0px) * 1.8);
+    --sc-rounded-lg: calc(var(--sc-rounded, 0px) * 3);
+    --sc-rounded-xl: calc(var(--sc-rounded, 0px) * 7);
+
+    /* BOUTONS */
+    /*
+    --sc-btn-font-family: var(--sc-font-family-base, sans-serif); *
+    --sc-btn-font-weight: 500;
+    */
+
+    /* Placeholder */
+    /*--sc-placeholder-bg: rgba(17, 24, 39, 0.05);  */
+
+    /* 4 for rounded full*/
+    --sc-btn-rounded-intensity: 1.4;
+    --sc-rounded-size-intensity: calc((1em - 1rem) * 0.4);
+    --sc-btn-rounded: calc(
+      (var(--sc-rounded, 0px) + var(--sc-rounded-size-intensity)) *
+        var(--sc-btn-rounded-intensity)
+    );
+
+    /* OMBRES */
+    --sc-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1),
+      0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --sc-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
+      0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --sc-shadow-lg: 0 10px 15px 0px rgb(0 0 0 / 0.1),
+      0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --sc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
+      0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --sc-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+    /* Forms */
+    --sc-border-width: max(1px, 0.12rem);
+    --sc-border-color: var(--sc-base-100, var(--sc-base-content, #000));
+    /*--sc-form-height: 2.5em; */ /*ok*/
+    --sc-form-border-width: var(--sc-border-width);
+    --sc-input-bg: var(--sc-base-100, rgba(0, 0, 0, 0.07));
+    --sc-input-border-color: var(--sc-input-bg);
+    --sc-input-rounded-intensity: 1.4;
+    --sc-input-rounded: calc(
+      (var(--sc-rounded, 0px) + var(--sc-rounded-size-intensity)) *
+        var(--sc-input-rounded-intensity)
+    );
+    /*formulaires*/
+    --sc-input-color: var(--sc-base-content, #000);
+
+    /* CONTRAST */
+    /* -- ex : Text on images */
+    --sc-contrast-content: #fff;
+    --sc-contrast: #000000;
+  }
+`;
+//# sourceMappingURL=core-variables.js.map

package/dist/js/core/components/ui/theme/theme-collection/core-variables.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-variables.js","sourceRoot":"","sources":["../../../../../../../src/core/components/ui/theme/theme-collection/core-variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuE/B,CAAC"}

package/dist/js/core/components/ui/theme/theme-collection/dark.js

@@ -0,0 +1,39 @@
+import { css } from "lit";
+const darkCss = css `
+  --sc-primary: var(--sc-dark-primary, var(--sc-base-700));
+  --sc-info: var(--sc-dark-info, #3abff8);
+  --sc-danger: var(--sc-dark-danger, #f87272);
+  --sc-warning: var(--sc-dark-warning, #fbbd23);
+  --sc-success: var(--sc-dark-success, #36d399);
+
+  --sc-primary-content: var(--sc-dark-primary-content, #002b3d);
+  --sc-info-content: var(--sc-dark-info-content, #002b3d);
+  --sc-danger-content: var(--sc-dark-danger-content, #382800);
+  --sc-warning-content: var(--sc-dark-warning-content, #382800);
+  --sc-success-content: var(--sc-dark-success-content, #003320);
+
+  --sc-base: var(--sc-dark-base, #1d2634);
+  --sc-base-50: var(--sc-dark-base-50, #1f2937);
+  --sc-base-100: var(--sc-dark-base-100, #252c36);
+  --sc-base-200: var(--sc-dark-base-200, #2c3543);
+  --sc-base-300: var(--sc-dark-base-300, #38414e);
+  --sc-base-400: var(--sc-dark-base-400, #515964);
+  --sc-base-500: var(--sc-dark-base-500, #828891);
+  --sc-base-600: var(--sc-dark-base-600, #b4b8be);
+  --sc-base-700: var(--sc-dark-base-700, #cdd0d5);
+  --sc-base-800: var(--sc-dark-base-800, #d9dce0);
+  --sc-base-900: var(--sc-dark-base-900, #e5e7eb);
+  --sc-base-content: var(--sc-dark-base-content, #e5e7eb);
+`;
+export const dark = css `
+  :host([theme="dark"]) {
+    ${darkCss}
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :host([theme="auto"]) {
+      ${darkCss}
+    }
+  }
+`;
+//# sourceMappingURL=dark.js.map

package/dist/js/core/components/ui/theme/theme-collection/dark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dark.js","sourceRoot":"","sources":["../../../../../../../src/core/components/ui/theme/theme-collection/dark.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,OAAO,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBlB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAA;;MAEjB,OAAO;;;;;QAKL,OAAO;;;CAGd,CAAC"}

package/dist/js/core/components/ui/theme/theme-collection/light.js

@@ -0,0 +1,32 @@
+import { css } from "lit";
+export const light = css `
+  :host([theme="light"]) {
+    /*Boutons*/
+    --sc-primary: var(--sc-base-800);
+    --sc-info: #2563eb;
+    --sc-danger: #f43f5e;
+    --sc-warning: #f97316;
+    --sc-success: #14b8a6;
+
+    --sc-primary-content: var(--sc-base, #fff);
+    --sc-info-content: var(--sc-base, #fff);
+    --sc-danger-content: var(--sc-base, #fff);
+    --sc-warning-content: var(--sc-base, #fff);
+    --sc-success-content: var(--sc-base, #fff);
+
+    /*Bases*/
+    --sc-base: #fff;
+    --sc-base-50: #f8fafc;
+    --sc-base-100: #f1f5f9;
+    --sc-base-200: #e2e8f0;
+    --sc-base-300: #cbd5e1;
+    --sc-base-400: #94a3b8;
+    --sc-base-500: #64748b;
+    --sc-base-600: #475569;
+    --sc-base-700: #334155;
+    --sc-base-800: #1e293b;
+    --sc-base-900: #0f172a;
+    --sc-base-content: var(--sc-base-700);
+  }
+`;
+//# sourceMappingURL=light.js.map

package/dist/js/core/components/ui/theme/theme-collection/light.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"light.js","sourceRoot":"","sources":["../../../../../../../src/core/components/ui/theme/theme-collection/light.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BvB,CAAC"}

package/dist/js/core/components/ui/theme/theme.js

@@ -0,0 +1,150 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var Theme_1;
+import { html, LitElement, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { coreVariables } from "@supersoniks/concorde/core/components/ui/theme/theme-collection/core-variables";
+import { light } from "@supersoniks/concorde/core/components/ui/theme/theme-collection/light";
+import { dark } from "@supersoniks/concorde/core/components/ui/theme/theme-collection/dark";
+import { PublisherManager } from "@supersoniks/concorde/utils";
+const tagName = "sonic-theme";
+let Theme = Theme_1 = class Theme extends LitElement {
+    constructor() {
+        super();
+        this.background = false;
+        this.color = false;
+        this.font = false;
+        Theme_1.instance = this;
+    }
+    /**
+     * retourne le conteneur de tout ce qui pop : popups / modale / tooltip? / dropdown / ...
+     */
+    static getPopContainer() {
+        return Theme_1.instance || document.body;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener("message", (e) => this.receiveMessage(e), false);
+        window.dispatchEvent(new CustomEvent("SonicThemeReady"));
+        this.postCSSVars();
+    }
+    postCSSVars() {
+        const stylesheets = document.styleSheets;
+        const ssLength = stylesheets.length;
+        const fontUrls = [];
+        for (let i = 0; i < ssLength; i++) {
+            const ss = stylesheets[i];
+            if (ss.href &&
+                (ss.href.includes("googleapis") || ss.href.includes("typekit.net")))
+                fontUrls.push(ss.href);
+        }
+        const theme = {
+            variables: this.getCssVariables(),
+            fonts: fontUrls,
+        };
+        PublisherManager.get("sonic-theme")?.set(theme);
+        document.querySelectorAll("iframe").forEach((elt) => elt.contentWindow?.postMessage({
+            type: "SonicTheme",
+            ...theme,
+        }, "*"));
+    }
+    receiveMessage(event) {
+        const data = event.data;
+        if (!data.type || data.type != "GetSonicTheme")
+            return;
+        this.postCSSVars();
+    }
+    getCssVariables() {
+        const names = [];
+        const stylesheets = [
+            ...Theme_1.styles.map((s) => s.styleSheet),
+            ...Array.from(document.styleSheets),
+        ];
+        for (const stylesheet of stylesheets) {
+            try {
+                if (!stylesheet)
+                    continue;
+                const rules = stylesheet.cssRules;
+                for (const rule of rules) {
+                    if (!("style" in rule))
+                        continue;
+                    const style = rule.style;
+                    for (const name of style) {
+                        if (names.includes(name) || name.indexOf("--sc") !== 0)
+                            continue;
+                        names.push(name);
+                    }
+                }
+            }
+            catch (e) {
+                console.warn("Erreur lors de la récupération des variables CSS");
+            }
+        }
+        const style = window.getComputedStyle(this);
+        const result = {};
+        names.forEach((name) => (result[name] = style.getPropertyValue(name)));
+        return result;
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+Theme.styles = [
+    light,
+    dark,
+    coreVariables,
+    css `
+      :host([color]) {
+        color: var(--sc-base-content, #000);
+      }
+
+      :host([font]) {
+        font-family: var(--sc-font-family-base, sans-serif);
+        font-weight: var(--sc-font-weight-base, 400);
+        font-style: var(--sc-font-style-base, normal);
+      }
+      ::slotted(.sonic-pop-content) {
+        max-width: 100vw;
+        background-color: var(--sc-base, #fff);
+        position: fixed;
+        z-index: 99999;
+        display: block;
+        transform: translateY(1rem) scale(0.95);
+        pointer-events: none;
+        transition-duration: 0.15s;
+        transition-timing-function: ease;
+
+        transition-property: scale, opacity;
+        border-radius: min(calc(var(--sc-btn-rounded) * 2), 0.4em);
+      }
+
+      ::slotted(.sonic-pop-content).is-open:not(.is-empty) {
+        transform: translateY(0) scale(1);
+        opacity: 1;
+        pointer-events: auto;
+        transition-property: scale, opacity;
+        transition-timing-function: cubic-bezier(0.25, 0.25, 0.42, 1.225);
+      }
+    `,
+];
+__decorate([
+    property({ type: String, reflect: true })
+], Theme.prototype, "theme", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Theme.prototype, "background", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Theme.prototype, "color", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Theme.prototype, "font", void 0);
+Theme = Theme_1 = __decorate([
+    customElement(tagName)
+], Theme);
+export { Theme };
+//# sourceMappingURL=theme.js.map

package/dist/js/core/components/ui/theme/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../../../../src/core/components/ui/theme/theme.ts"],"names":[],"mappings":"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"}