@supersoniks/concorde 4.7.4 → 4.9.0

package/dist/js/core/components/ui/_css/scroll.js

@@ -0,0 +1,25 @@
+import { css } from "lit";
+export const customScroll = css `
+  .custom-scroll {
+    overflow: auto !important;
+    overflow-y: overlay !important;
+  }
+
+  @media (hover: hover) {
+    .custom-scroll::-webkit-scrollbar {
+      width: 0.5rem;
+      height: 0.5rem;
+      border: solid 0.15rem transparent;
+      border-radius: var(--sc-rounded);
+      background: transparent;
+    }
+
+    .custom-scroll::-webkit-scrollbar-thumb {
+      box-shadow: inset 0 0 2rem 2rem
+        var(--sc-scrollbar-bg, var(--sc-base-400, var(--sc-base-content, #000)));
+      border-radius: var(--sc-rounded);
+      border: solid 0.15rem transparent;
+    }
+  }
+`;
+//# sourceMappingURL=scroll.js.map

package/dist/js/core/components/ui/_css/scroll.js.map

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

package/dist/js/core/components/ui/_css/shadow.js

@@ -0,0 +1,22 @@
+import { css } from "lit";
+export const shadowable = css `
+  /*OMBRE*/
+  :host([shadow]) .shadowable,
+  :host([shadow="md"]) .shadowable,
+  :host([shadow="true"]) .shadowable {
+    box-shadow: var(--sc-shadow);
+  }
+
+  :host([shadow="sm"]) .shadowable {
+    box-shadow: var(--sc-shadow-sm);
+  }
+
+  :host([shadow="lg"]) .shadowable {
+    box-shadow: var(--sc-shadow-lg);
+  }
+
+  :host([shadow="none"]) .shadowable {
+    box-shadow: none;
+  }
+`;
+//# sourceMappingURL=shadow.js.map

package/dist/js/core/components/ui/_css/shadow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../../../../src/core/components/ui/_css/shadow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;CAmB5B,CAAC"}

package/dist/js/core/components/ui/_css/size.js

@@ -0,0 +1,36 @@
+import { css } from "lit";
+export const fontSize = css `
+  /*SIZES*/
+  :host {
+    --sc-_fs: 1rem;
+    --sc-_lh: 1.15;
+    font-size: var(--sc-_fs);
+    line-height: var(--sc-_lh);
+  }
+
+  :host([size="2xs"]) {
+    --sc-_fs: 0.625rem;
+  }
+  :host([size="xs"]) {
+    --sc-_fs: 0.75rem;
+  }
+  :host([size="sm"]) {
+    --sc-_fs: 0.875rem;
+  }
+  :host([size="md"]) {
+    --sc-_fs: 1rem;
+  }
+  :host([size="lg"]) {
+    --sc-_fs: 1.125rem;
+  }
+  :host([size="xl"]) {
+    --sc-_fs: 1.25rem;
+  }
+  :host([size="2xl"]) {
+    --sc-_fs: 1.5rem;
+  }
+  :host([size="inherit"]) {
+    --sc-_fs: 1em;
+  }
+`;
+//# sourceMappingURL=size.js.map

package/dist/js/core/components/ui/_css/size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.js","sourceRoot":"","sources":["../../../../../../src/core/components/ui/_css/size.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiC1B,CAAC"}

package/dist/js/core/components/ui/_css/type.js

@@ -0,0 +1,92 @@
+import { css } from "lit";
+export const typeColor = css `
+  :host {
+    --sc-_color: inherit;
+    color: var(--sc-_color);
+  }
+
+  :host([type="primary"]) {
+    --sc-_color: var(--sc-primary, var(--sc-base-content, #000));
+  }
+  :host([type="warning"]) {
+    --sc-_color: var(--sc-warning, var(--sc-base-content, #000));
+  }
+  :host([type="danger"]) {
+    --sc-_color: var(--sc-danger, var(--sc-base-content, #000));
+  }
+  :host([type="info"]) {
+    --sc-_color: var(--sc-info, var(--sc-base-content, #000));
+  }
+  :host([type="success"]) {
+    --sc-_color: var(--sc-success, var(--sc-base-content, #000));
+  }
+
+  .inherit-color {
+    color: var(--sc-_color);
+  }
+`;
+export const typesBg = css `
+  :host {
+    --sc-_color: inherit;
+    --sc-_bg: inherit;
+    color: var(--sc-_color);
+    background: var(--sc-_bg);
+  }
+
+  /*TYPES*/
+  :host([type="primary"]) {
+    --sc-_bg: var(--sc-primary, var(--sc-base-content, #000));
+    --sc-_color: var(--sc-primary-content, var(--sc-base, #fff));
+  }
+  :host([type="warning"]) {
+    --sc-_bg: var(--sc-warning, var(--sc-base-content, #000));
+    --sc-_color: var(--sc-warning-content, var(--sc-base, #fff));
+  }
+  :host([type="danger"]) {
+    --sc-_bg: var(--sc-danger, var(--sc-base-content, #000));
+    --sc-_color: var(--sc-danger-content, var(--sc-base, #fff));
+  }
+  :host([type="info"]) {
+    --sc-_bg: var(--sc-info, var(--sc-base-content, #000));
+    --sc-_color: var(--sc-info-content, var(--sc-base, #fff));
+  }
+  :host([type="success"]) {
+    --sc-_bg: var(--sc-success, var(--sc-base-content, #000));
+    --sc-_color: var(--sc-success-content, var(--sc-base, #fff));
+  }
+
+  /* dans un contexte de couleur - divider color*/
+  :host([type="primary"]),
+  :host([type="warning"]),
+  :host([type="danger"]),
+  :host([type="info"]),
+  :host([type="success"]) {
+    --sc-border-color: currentColor;
+    --sc-divider-opacity: 0.2;
+  }
+
+  :host([type="base"]) {
+    --sc-_bg: var(--sc-base, #fff);
+    --sc-_color: var(--sc-base-content, #000);
+  }
+  :host([type="default"]),
+  :host([type="light"]) {
+    --sc-_bg: var(--sc-base-100, rgba(0, 0, 0, 0.07));
+    --sc-_color: var(--sc-base-content, #000);
+  }
+
+  :host([type="neutral"]) {
+    --sc-_bg: var(--sc-base-content, #000);
+    --sc-_color: var(--sc-base, #fff);
+  }
+
+  :host([type="invert"]) {
+    --sc-_bg: var(--sc-base-900, var(--sc-base-content, #000));
+    --sc-_color: var(--sc-base, #fff);
+  }
+
+  .inherit-bg {
+    color: inherit;
+  }
+`;
+//# sourceMappingURL=type.js.map

package/dist/js/core/components/ui/_css/type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.js","sourceRoot":"","sources":["../../../../../../src/core/components/ui/_css/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;CAyB3B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+DzB,CAAC"}

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

@@ -0,0 +1,213 @@
+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, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { fontSize, } from "@supersoniks/concorde/core/components/ui/_css/size";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+const icon = {
+    warning: "warning-circled-outline",
+    success: "check-circled-outline",
+    error: "warning-circled-outline",
+    info: "info-empty",
+    default: "info-empty",
+};
+const tagName = "sonic-alert";
+/**
+ * Affiche un message en ligne.
+ * Soit par ses simples attributs "label" et "text", soit par son slot pour des messages plus complexes.
+ */
+let Alert = class Alert extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Titre du message d'erreur
+         */
+        this.label = "";
+        this.noIcon = false;
+        /**
+         * Peut être renseigné dans le slot pour créer des messages plus complexes
+         */
+        this.text = "";
+        this.id = new Date().getTime().toString();
+        this.dismissible = false;
+        this.background = false;
+        this.status = "default";
+        this.dismissForever = false;
+    }
+    connectedCallback() {
+        if (this.dismissForever) {
+            const dismissed = localStorage.getItem("sonic-alert-dismissed") || "{}";
+            const dismissedObj = JSON.parse(dismissed);
+            if (dismissedObj[this.id]) {
+                this.remove();
+            }
+        }
+        super.connectedCallback();
+    }
+    render() {
+        return html `
+      <slot name="icon" class="${this.noIcon ? "hidden" : ""}"
+        >${!this.noIcon
+            ? html `<div>
+              ${this.status &&
+                html `<sonic-icon name=${icon[this.status]}></sonic-icon>`}
+            </div>`
+            : nothing}</slot
+      >
+      <div class="content">
+        ${this.label
+            ? html `<span class="label">${unsafeHTML(this.label)}</span>`
+            : nothing}
+        <div>${this.text}<slot></slot></div>
+      </div>
+      ${this.dismissible
+            ? html `<sonic-button
+            @click=${this.close}
+            class="close-btn"
+            variant="unstyled"
+            shape="circle"
+            icon
+          >
+            <sonic-icon name="cancel"></sonic-icon>
+          </sonic-button>`
+            : nothing}
+    `;
+    }
+    close() {
+        this.remove();
+        // if dismiss forever, save in localstorage
+        if (this.dismissForever) {
+            const dismissed = localStorage.getItem("sonic-alert-dismissed") || "{}";
+            const dismissedObj = JSON.parse(dismissed);
+            dismissedObj[this.id] = true;
+            localStorage.setItem("sonic-alert-dismissed", JSON.stringify(dismissedObj));
+        }
+    }
+};
+Alert.styles = [
+    fontSize,
+    css `
+      :host {
+        --sc_color: var(--sc-base-content, #000);
+        --sc_rounded: var(--sc-rounded);
+        --sc_fw: var(--sc-font-weight-base, 400);
+        --sc_fst: var(--sc-font-style-base, normal);
+        --sc_label-fw: bold;
+
+        font-weight: var(--sc_fw);
+        font-style: var(--sc_fst);
+        color: var(--sc_color);
+        position: relative;
+        display: flex;
+        gap: 0.4em;
+        border-radius: var(--sc_rounded);
+      }
+
+      .label {
+        font-weight: var(--sc_label-fw);
+        margin-bottom: 0.15em;
+        display: block;
+      }
+
+      :host([status="warning"]) {
+        --sc_color: var(--sc-warning, var(--sc-base-content, #000));
+      }
+      :host([status="error"]) {
+        --sc_color: var(--sc-danger, var(--sc-base-content, #000));
+      }
+      :host([status="info"]) {
+        --sc_color: var(--sc-info, var(--sc-base-content, #000));
+      }
+      :host([status="success"]) {
+        --sc_color: var(--sc-success, var(--sc-base-content, #000));
+      }
+
+      /*background*/
+      :host([dismissible]),
+      :host([background]) {
+        background: var(--sc-base, #fff);
+        padding: 0.8em 1.15em;
+      }
+      :host([dismissible]):before,
+      :host([background]):before {
+        background-color: currentColor;
+        content: "";
+        display: block;
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        opacity: 0.08;
+        border-radius: var(--sc_rounded);
+        pointer-events: none;
+      }
+
+      .content {
+        z-index: 2;
+        position: relative;
+        flex: 1;
+      }
+
+      slot {
+        display: block;
+      }
+
+      .hidden {
+        display: none !important;
+      }
+
+      /*Rounded*/
+      :host([size="2xs"]),
+      :host([size="xs"]),
+      :host([size="sm"]) {
+        --sc_rounded: var(--sc-rounded-sm);
+      }
+
+      /*Dismissible*/
+      :host([dismissible]) {
+        padding-right: 3rem;
+      }
+      :host([dismissible]) .close-btn {
+        position: absolute;
+        top: 0.4rem;
+        right: 0.3rem;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], Alert.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Alert.prototype, "noIcon", void 0);
+__decorate([
+    property({ type: String })
+], Alert.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], Alert.prototype, "id", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Alert.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Alert.prototype, "dismissible", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Alert.prototype, "background", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Alert.prototype, "status", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Alert.prototype, "dismissForever", void 0);
+Alert = __decorate([
+    customElement(tagName)
+], Alert);
+export { Alert };
+//# sourceMappingURL=alert.js.map

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

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

package/dist/js/core/components/ui/alert-messages/alert-messages.js

@@ -0,0 +1,68 @@
+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 { LitElement, html, nothing, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import { map } from "lit/directives/map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+const tagName = "sonic-alert-messages";
+//Superbe mix de multples versions d'api.
+let AlertMessages = class AlertMessages extends Subscriber(LitElement, {}) {
+    constructor() {
+        super(...arguments);
+        this.size = "md";
+        this.background = false;
+        this.noIcon = false;
+        this.messages = [];
+    }
+    render() {
+        if (!this.messages?.length)
+            return nothing;
+        return html `<div class="container">
+      ${map(this.messages, (message) => {
+            if (message.type == "public") {
+                return html `<sonic-alert
+            status=${message.status || "default"}
+            text=${ifDefined(message.content)}
+            size=${this.size}
+            ?noIcon=${this.noIcon}
+            ?background=${this.background}
+          ></sonic-alert>`;
+            }
+            else
+                return nothing;
+        })}
+    </div>`;
+    }
+};
+AlertMessages.styles = [
+    css `
+      .container {
+        display: grid;
+        gap: 0.5em;
+        grid-template-columns: minmax(0, 1fr);
+        width: 100%;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], AlertMessages.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], AlertMessages.prototype, "background", void 0);
+__decorate([
+    property({ type: Boolean })
+], AlertMessages.prototype, "noIcon", void 0);
+__decorate([
+    property({ type: Array })
+], AlertMessages.prototype, "messages", void 0);
+AlertMessages = __decorate([
+    customElement(tagName)
+], AlertMessages);
+export { AlertMessages };
+//# sourceMappingURL=alert-messages.js.map

package/dist/js/core/components/ui/alert-messages/alert-messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-messages.js","sourceRoot":"","sources":["../../../../../../src/core/components/ui/alert-messages/alert-messages.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,UAAU,MAAM,8CAA8C,CAAC;AAEtE,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAG5C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,MAAM,OAAO,GAAG,sBAAsB,CAAC;AAEvC,yCAAyC;AAElC,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU,CAAC,UAAU,EAAE,EAAe,CAAC;IAAnE;;QACuB,SAAI,GAAS,IAAI,CAAC;QACjB,eAAU,GAAG,KAAK,CAAC;QACnB,WAAM,GAAG,KAAK,CAAC;QAE5C,aAAQ,GAAmB,EAAE,CAAC;IA8BhC,CAAC;IAjBC,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM;YAAE,OAAO,OAAO,CAAC;QAE3C,OAAO,IAAI,CAAA;QACP,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;YAC/B,IAAI,OAAO,CAAC,IAAI,IAAI,QAAQ,EAAE,CAAC;gBAC7B,OAAO,IAAI,CAAA;qBACA,OAAO,CAAC,MAAM,IAAI,SAAS;mBAC7B,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC;mBAC1B,IAAI,CAAC,IAAI;sBACN,IAAI,CAAC,MAAM;0BACP,IAAI,CAAC,UAAU;0BACf,CAAC;YACnB,CAAC;;gBAAM,OAAO,OAAO,CAAC;QACxB,CAAC,CAAC;WACG,CAAC;IACV,CAAC;;AA3BM,oBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;KAOF;CACF,AATY,CASX;AAf0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAmB;AACjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAoB;AACnB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAgB;AAE5C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;+CACI;AALnB,aAAa;IADzB,aAAa,CAAC,OAAO,CAAC;GACV,aAAa,CAmCzB"}

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

@@ -0,0 +1,199 @@
+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 { fontSize, } from "@supersoniks/concorde/core/components/ui/_css/size";
+const tagName = "sonic-badge";
+/**
+ * Un badge simple avec deux slots, un nommé prefix et un nomé suffix de manière à pouvoir mettre (par exemple) une icone avant ou après le contenu.
+ * * Le badge est comparable au bouton car il possèdent tous les deux les propriétés *type* (primary...), *variant*(outline, ghost), size(xs...)...
+ * * Le badge n'est pas interactif contrairement au bouton
+ */
+let Badge = class Badge extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Le type change surtout la couleur composant
+         */
+        this.type = "default";
+        /**
+         * Le composant par defaut sans se paramètre à forte afordance
+         * * ghost : composant super léger visuellement
+         * * outline : composant légé avec une bordure
+         */
+        this.variant = "default";
+        this.ellipsis = false;
+    }
+    render() {
+        return html `
+      <slot name="prefix"></slot>
+      <slot></slot>
+      <slot name="suffix"></slot>
+    `;
+    }
+};
+Badge.styles = [
+    fontSize,
+    css `
+      :host {
+        --sc-badge-gap: 0.3em;
+        --sc-badge-py: 0.35em;
+        --sc-badge-px: 0.67em;
+
+        --sc-badge-color: var(--sc-base-content, #000);
+        --sc-badge-bg: var(--sc-base-100, rgba(0, 0, 0, 0.07));
+
+        /*--sc-badge-border-width: var(--sc-form-border-width, 0.1rem);*/
+        --sc-badge-border-width: 1px;
+        --sc-badge-border-color: transparent;
+        --sc-badge-border: var(--sc-badge-border-width) solid
+          var(--sc-badge-border-color);
+
+        --sc-badge-rounded: 0.85em;
+        --sc-badge-fw: var(--sc-font-weight-base, 400);
+
+        display: inline-flex;
+        align-items: center;
+        box-sizing: border-box;
+        line-height: var(--sc-_lh);
+        border-radius: var(--sc-badge-rounded);
+
+        background: var(--sc-badge-bg);
+        color: var(--sc-badge-color);
+        font-family: var(--sc-badge-ff, var(--sc-font-family-base, sans-serif));
+        font-weight: var(--sc-badge-fw);
+        line-height: 1;
+
+        padding-top: var(--sc-badge-py);
+        padding-bottom: var(--sc-badge-py);
+        padding-left: var(--sc-badge-px);
+        padding-right: var(--sc-badge-px);
+        /**Round pour lissage px */
+        min-height: round(calc(var(--sc-badge-px) * 2), 1px);
+        min-width: round(calc(var(--sc-badge-px) * 2), 1px);
+        border: var(--sc-badge-border);
+        -webkit-print-color-adjust: exact;
+      }
+
+      /*TYPES*/
+      :host([type="primary"]) {
+        --sc-badge-color: var(--sc-primary-content, var(--sc-base, #fff));
+        --sc-badge-bg: var(--sc-primary, var(--sc-base-content, #000));
+      } 
+      :host([type="warning"]) {
+        --sc-badge-color: var(--sc-warning-content, var(--sc-base, #fff));
+        --sc-badge-bg: var(--sc-warning, var(--sc-base-content, #000));
+      }
+      :host([type="danger"]) {
+        --sc-badge-color: var(--sc-danger-content, var(--sc-base, #fff));
+        --sc-badge-bg: var(--sc-danger, var(--sc-base-content, #000));
+      }
+      :host([type="info"]) {
+        --sc-badge-color: var(--sc-info-content, var(--sc-base, #fff));
+        --sc-badge-bg: var(--sc-info, var(--sc-base-content, #000));
+      }
+      :host([type="success"]) {
+        --sc-badge-color: var(--sc-success-content, var(--sc-base, #fff));
+        --sc-badge-bg: var(--sc-success, var(--sc-base-content, #000));
+      }
+      :host([type="neutral"]) {
+        --sc-badge-color: var(--sc-base, #fff);
+        --sc-badge-bg: var(--sc-base-content, #000);
+      }
+
+      :host([contrast]),
+      :host([type="contrast"]) {
+        --sc-badge-color: var(--sc-contrast-content, #fff);
+        --sc-badge-bg: var(--sc-contrast, #000);
+      }
+
+      /*SIZE*/
+      :host {
+        gap: var(--sc-badge-gap);
+      }
+
+      :host([size="2xs"]),
+      :host([size="xs"]),
+      :host([size="sm"]) {
+        --sc-badge-gap: 0.35em;
+      }
+
+      :host([size="lg"]),
+      :host([size="xl"]) {
+        --sc-_lh: 1.2;
+        --sc-badge-gap: 0.5em;
+      }
+
+      /*OUTLINE*/
+      :host([variant="outline"][type]) {
+        border-width: var(--sc-badge-border-width) !important;
+        border-color: var(--sc-badge-bg);
+        color: var(--sc-badge-bg);
+        background: transparent;
+      }
+
+      :host([variant="outline"][type="default"]) {
+        border-color: var(--sc-base-content, #000);
+        color: var(--sc-base-content, #000);
+        background: transparent;
+      }
+
+      /*GHOST*/
+      :host([variant="ghost"][type]) {
+        color: var(--sc-badge-bg);
+        background: transparent;
+        padding: 0;
+      }
+
+      @media (forced-colors: active) {
+        :host([variant="ghost"][type]) {
+          padding: var(--sc-badge-py) var(--sc-badge-px);
+        }
+      }
+
+      :host([variant="ghost"][type="default"]) {
+        color: var(--sc-badge-color);
+        background: transparent;
+      }
+
+      :host([ellipsis]) {
+        flex-wrap: nowrap;
+        white-space: nowrap;
+        max-width: 100%;
+      }
+
+      :host([ellipsis]) slot {
+        overflow: hidden;
+        display: block;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 100%;
+      }
+
+      slot[name="suffix"],
+      slot[name="prefix"] {
+        flex-shrink: 0;
+      }
+    `,
+];
+__decorate([
+    property({ type: String, reflect: true })
+], Badge.prototype, "type", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Badge.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Badge.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Badge.prototype, "ellipsis", void 0);
+Badge = __decorate([
+    customElement(tagName)
+], Badge);
+export { Badge };
+//# sourceMappingURL=badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../../../src/core/components/ui/badge/badge.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,EACL,QAAQ,GAET,MAAM,oDAAoD,CAAC;AAE5D,MAAM,OAAO,GAAG,aAAa,CAAC;AAC9B;;;;GAIG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,UAAU;IAA9B;;QAkJL;;WAEG;QAEH,SAAI,GAQY,SAAS,CAAC;QAC1B;;;;WAIG;QACwC,YAAO,GAGpC,SAAS,CAAC;QAMoB,aAAQ,GAAG,KAAK,CAAC;IAS/D,CAAC;IAPC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AApLM,YAAM,GAAG;IACd,QAAQ;IACR,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4IF;CACF,AA/IY,CA+IX;AAMF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCAShB;AAMiB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAGlB;AAKmB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCAAa;AACX;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAkB;AA7KlD,KAAK;IADjB,aAAa,CAAC,OAAO,CAAC;GACV,KAAK,CAsLjB"}