@sankhyalabs/ezui 6.1.0 → 6.2.0-dev.1

package/dist/cjs/{search-column-27d1f72f.js → search-column-78dd20d5.js}

@@ -1,8 +1,9 @@
 'use strict';
 
 const core = require('@sankhyalabs/core');
-const ApplicationUtils = require('./ApplicationUtils-c9d1205c.js');
-const index = require('./index-a7b0c73d.js');
+const ApplicationUtils = require('./ApplicationUtils-6a76ac09.js');
+const index = require('./index-425b1f67.js');
+const index$1 = require('./index-a7b0c73d.js');
 
 const buildFieldMetadata = (descriptor, config) => {
   let { name, label, group } = Object.assign({}, config);
@@ -30,6 +31,7 @@ class RecordValidationProcessor {
     this._dataUnit = dataUnit;
     this._validationSource = validationSource;
     this._validator = validator;
+    this._i18n = index.getI18n();
   }
   validate(isSaving = true) {
     return new Promise((accept, reject) => {
@@ -72,12 +74,16 @@ class RecordValidationProcessor {
           invalidFields.push({ name: field, message: errorMessage });
         }
         else {
-          invalidFields.push({ name: field, message: "Essa informação é obrigatória" });
+          invalidFields.push({ name: field, message: this._i18n('utils.requiredField') });
         }
       }
     });
     if (invalidFields.length > 0) {
-      return { isValid: false, invalidFields, infoMessage: "Há pelo menos um campo obrigatório não preenchido." };
+      return {
+        isValid: false,
+        invalidFields,
+        infoMessage: this._i18n('utils.requiredFieldMessage')
+      };
     }
     return undefined;
   }
@@ -470,14 +476,12 @@ class Bind {
   }
 }
 
-const LABEL_SEARCH_FIELD = "Buscar campos (ctrl+F)";
-const LABEL_SEARCH_COLUMN = "Buscar colunas (Ctrl+F)";
 const SHORTCUT_SEARCH_FIELD = "ctrl+f";
 const SEARCH_FIELD_FULL_WIDTH = 240;
 const SEARCH_FIELD_MARGIN_BOTTOM = "0px";
 const SEARCH_FIELD_WIDTH = String(SEARCH_FIELD_FULL_WIDTH - 30) + "px";
 const buildFieldSearch = (action, optionLoader, onSelectField) => {
-  return index.h("ez-search", { class: 'ez-padding--small ez-margin--none', style: {
+  return index$1.h("ez-search", { class: 'ez-padding--small ez-margin--none', style: {
       "--ez-text-input__margin-bottom": SEARCH_FIELD_MARGIN_BOTTOM,
       "--ez-search--width": SEARCH_FIELD_WIDTH
     }, canShowError: false, showSelectedValue: false, showOptionValue: false, suppressEmptyOption: true, label: action.label, value: null, optionLoader: optionLoader, onEzChange: (evt) => onSelectField(evt.detail), ignoreLimitCharsToSearch: true });
@@ -495,8 +499,6 @@ const focusOnFieldSerch = async (field) => {
 };
 
 exports.DataBinder = DataBinder;
-exports.LABEL_SEARCH_COLUMN = LABEL_SEARCH_COLUMN;
-exports.LABEL_SEARCH_FIELD = LABEL_SEARCH_FIELD;
 exports.RecordValidationProcessor = RecordValidationProcessor;
 exports.SEARCH_FIELD_FULL_WIDTH = SEARCH_FIELD_FULL_WIDTH;
 exports.SHORTCUT_SEARCH_FIELD = SHORTCUT_SEARCH_FIELD;

package/dist/collection/collection-manifest.json

@@ -32,6 +32,7 @@
     "./components/ez-sortable-list/ez-sortable-list.js",
     "./components/ez-double-list/ez-double-list.js",
     "./components/ez-dropdown/ez-dropdown.js",
+    "./components/ez-empty-card/ez-empty-card.js",
     "./components/ez-file-item/ez-file-item.js",
     "./components/ez-filter-input/ez-filter-input.js",
     "./components/ez-form/ez-form.js",
@@ -48,6 +49,14 @@
     "./components/ez-popover-plus/ez-popover-plus.js",
     "./components/ez-popover-plus/subcomponent/ez-popover-core.js",
     "./components/ez-popup/ez-popup.js",
+    "./components/ez-rich-text/ez-rich-text.js",
+    "./components/ez-rich-text/ez-link-builder/ez-link-builder.js",
+    "./components/ez-rich-text/ez-rich-toolbar/ez-rich-toolbar.js",
+    "./components/ez-rich-text/ez-rich-toolbar/ez-rich-toolbar-arrows/ez-rich-toolbar-arrows.js",
+    "./components/ez-rich-text/ez-rich-toolbar/ez-rich-toolbar-configs/ez-rich-toolbar-configs.js",
+    "./components/ez-rich-text/ez-rich-toolbar/ez-rich-toolbar-item/ez-rich-toolbar-item.js",
+    "./components/ez-rich-text/ez-rich-toolbar/ez-rich-toolbar-letters/ez-rich-toolbar-letters.js",
+    "./components/ez-rich-text/ez-simple-image-uploader/ez-simple-image-uploader.js",
     "./components/ez-scroller/ez-scroller.js",
     "./components/ez-search/subcomponent/search-list/search-list.js",
     "./components/ez-search-plus/ez-search-plus.js",
@@ -58,11 +67,15 @@
     "./components/ez-split-button/ez-split-button.js",
     "./components/ez-split-panel/ez-split-panel.js",
     "./components/ez-split-panel/structure/item/ez-split-item.js",
+    "./components/ez-tag/ez-tag.js",
     "./components/ez-text-area/ez-text-area.js",
+    "./components/ez-tile/ez-tile.js",
+    "./components/ez-tile-medium/ez-tile-medium.js",
     "./components/ez-time-input/ez-time-input.js",
     "./components/ez-toast/ez-toast.js",
     "./components/ez-tooltip/ez-tooltip.js",
     "./components/ez-tree/ez-tree.js",
+    "./components/ez-underface/ez-underface.js",
     "./components/ez-view-stack/ez-view-stack.js"
   ],
   "compiler": {
@@ -77,6 +90,11 @@
         "ez-application"
       ]
     },
+    {
+      "components": [
+        "ez-avatar"
+      ]
+    },
     {
       "components": [
         "ez-button"
@@ -87,6 +105,11 @@
         "ez-calendar"
       ]
     },
+    {
+      "components": [
+        "ez-empty-card"
+      ]
+    },
     {
       "components": [
         "ez-check"
@@ -172,6 +195,11 @@
         "ez-tabselector"
       ]
     },
+    {
+      "components": [
+        "ez-tag"
+      ]
+    },
     {
       "components": [
         "ez-text-area"
@@ -182,6 +210,16 @@
         "ez-text-input"
       ]
     },
+    {
+      "components": [
+        "ez-tile"
+      ]
+    },
+    {
+      "components": [
+        "ez-tile-medium"
+      ]
+    },
     {
       "components": [
         "ez-time-input"
@@ -192,6 +230,11 @@
         "ez-toast"
       ]
     },
+    {
+      "components": [
+        "ez-underface"
+      ]
+    },
     {
       "components": [
         "ez-upload"
@@ -207,5 +250,6 @@
         "ez-search-result-list"
       ]
     }
-  ]
+  ],
+  "global": "./global/app-init.js"
 }

package/dist/collection/components/ez-alert-list/ez-alert-list.js

@@ -1,5 +1,6 @@
 import { ElementIDUtils, FloatingManager } from '@sankhyalabs/core';
 import { Host, h } from '@stencil/core';
+import initI18n from '../../utils/i18n';
 export class EzAlertList {
   constructor() {
     this._container = undefined;
@@ -122,14 +123,15 @@ export class EzAlertList {
       this._container.focus();
     }
   }
-  componentWillLoad() {
+  async componentWillLoad() {
     this.dataElementId = ElementIDUtils.addIDInfo(this._element, 'EzAlertList');
+    this.i18n = await initI18n();
   }
   render() {
     return (h(Host, Object.assign({}, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: this.dataElementId }), this.opened ?
-      (h("div", { ref: elem => (this._overlayRef = elem) }, h("div", { class: `alert-list__container ${this.expanded ? 'expanded' : ''}`, ref: elem => (this._container = elem) }, h("div", { class: "alert-list__content" }, h("div", { class: "alert-list__header" }, h("div", { class: "alert-list__title" }, `Avisos (${this.alerts.length})`), h("div", { class: "alert-list__header__buttons" }, this.enableExpand && (h("ez-button", { mode: "icon", size: "small", iconName: "expand", onClick: () => this.toggleExpandContainer(), "data-element-id": ElementIDUtils.getInternalIDInfo('expandButton'), title: this.expanded ? 'Resumir' : 'Expandir' })), h("ez-button", { mode: "icon", size: "small", iconName: "close", "data-element-id": ElementIDUtils.getInternalIDInfo('closeButton'), onClick: () => {
+      (h("div", { ref: elem => (this._overlayRef = elem) }, h("div", { class: `alert-list__container ${this.expanded ? 'expanded' : ''}`, ref: elem => (this._container = elem) }, h("div", { class: "alert-list__content" }, h("div", { class: "alert-list__header" }, h("div", { class: "alert-list__title" }, `${this.i18n('app.alerts')} (${this.alerts.length})`), h("div", { class: "alert-list__header__buttons" }, this.enableExpand && (h("ez-button", { mode: "icon", size: "small", iconName: "expand", onClick: () => this.toggleExpandContainer(), "data-element-id": ElementIDUtils.getInternalIDInfo('expandButton'), title: this.expanded ? this.i18n('app.collapse') : this.i18n('app.expand') })), h("ez-button", { mode: "icon", size: "small", iconName: "close", "data-element-id": ElementIDUtils.getInternalIDInfo('closeButton'), onClick: () => {
           this.opened = false;
-        }, title: 'Fechar' }))), h("div", { class: "alert-list__expandable-content" }, h("ez-list", { itemSlotBuilder: this.itemRightSlotBuilder, hoverFeedback: true, itemLeftSlotBuilder: item => {
+        }, title: this.i18n('app.close') }))), h("div", { class: "alert-list__expandable-content" }, h("ez-list", { itemSlotBuilder: this.itemRightSlotBuilder, hoverFeedback: true, itemLeftSlotBuilder: item => {
           return (h("a", { onClick: this.getLinkActionClick(item), style: {
               fontFamily: "var(--font-pattern, 'Roboto')",
               fontSize: 'var(--text--medium, 14px)',

package/dist/collection/components/ez-avatar/ez-avatar.js

@@ -1,10 +1,13 @@
 import { h } from '@stencil/core';
+import initI18n from '../../utils/i18n';
 export class EzAvatar {
   constructor() {
     this.DECIMAL_PARSE_BASE = 10;
     this.FONT_SIZE_BASE_CALC = 0.375;
+    this.DEFAULT_ICON_NAME = "account-outline";
     this.name = undefined;
     this.imageSrc = undefined;
+    this.iconName = undefined;
     this.size = '100';
     this.shape = 'circle';
     this.isInteractive = false;
@@ -22,17 +25,21 @@ export class EzAvatar {
     return `avatar avatar--${this.size} avatar--${this.shape} ${this.imageSrc ? 'avatar--has-image' : ''}`;
   }
   renderAvatarContent() {
+    var _a;
     if (this.imageSrc) {
       return h("img", { src: this.imageSrc, alt: this.name || 'Avatar', class: "avatar-image" });
     }
     if (this.name) {
       return h("span", { class: "avatar-initial", "aria-hidden": "true" }, this.getInitial());
     }
-    return h("ez-icon", { class: "avatar-icon", iconName: "account-outline", fontSize: this.calcFontSize() });
+    return h("ez-icon", { class: "avatar-icon", iconName: (_a = this.iconName) !== null && _a !== void 0 ? _a : this.DEFAULT_ICON_NAME, fontSize: this.calcFontSize() });
+  }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
   }
   render() {
     if (this.isInteractive) {
-      return (h("button", { "aria-label": "Perfil", class: this.getClass() }, this.renderAvatarContent()));
+      return (h("button", { "aria-label": this.i18n("app.profile"), class: this.getClass() }, this.renderAvatarContent()));
     }
     return (h("figure", { class: this.getClass() }, this.renderAvatarContent()));
   }
@@ -84,6 +91,23 @@ export class EzAvatar {
         "attribute": "image-src",
         "reflect": true
       },
+      "iconName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Nome do \u00EDcone que deve ser exibido no avatar."
+        },
+        "attribute": "icon-name",
+        "reflect": true
+      },
       "size": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/ez-calendar/ez-calendar.js

@@ -1,11 +1,9 @@
 import { FloatingManager } from "@sankhyalabs/core";
 import { forceUpdate, h } from "@stencil/core";
+import initI18n from "../../utils/i18n";
 export class EzCalendar {
   constructor() {
     this._firstRender = true;
-    this._todayLabel = "Hoje";
-    this._weekDayLabels = ["D", "S", "T", "Q", "Q", "S", "S"];
-    this._monthLabels = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
     this._hoursLabel = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];
     this._minutosLabel = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"];
     this.value = new Date();
@@ -82,7 +80,7 @@ export class EzCalendar {
     return this._hostElem.dataset.isFixed === "true";
   }
   getMonthLabel() {
-    return this._monthLabels[this._currentPosition.getMonth()] + " " + this._currentPosition.getFullYear();
+    return this.i18n(`ez-calendar.month.${this._currentPosition.getMonth()}`) + " " + this._currentPosition.getFullYear();
   }
   isSelectedDate(d) {
     if (this.value) {
@@ -142,6 +140,9 @@ export class EzCalendar {
       }
     }
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidRender() {
     if (this.floating && this._firstRender) {
       this._calendarHeight = this._box.clientHeight;
@@ -179,7 +180,7 @@ export class EzCalendar {
     const firstDate = new Date();
     firstDate.setTime(this._currentPosition.getTime());
     firstDate.setDate(1 - firstDate.getDay());
-    return (h("section", { ref: elem => this._container = elem }, h("div", { ref: elem => this._box = elem, class: "calendar__container" }, h("div", { class: "calendar" }, h("div", { class: "calendar__header" }, h("button", { class: "calendar__btn-previous", onClick: () => this.changeMonth(-1) }), h("label", { class: "calendar__lbl-month" }, this.getMonthLabel()), h("button", { class: "calendar__btn-next", onClick: () => this.changeMonth(1) })), h("div", { class: "calendar__body" }, h("div", { class: "calendar__line" }, this._weekDayLabels.map(day => h("div", { "data-day": day, class: "calendar__cell calendar__cell--unselectable" }, day))), [0, 7, 14, 21, 28, 35].map(offset => h("div", { class: "calendar__line" }, [0, 1, 2, 3, 4, 5, 6].map(index => {
+    return (h("section", { ref: elem => this._container = elem }, h("div", { ref: elem => this._box = elem, class: "calendar__container" }, h("div", { class: "calendar" }, h("div", { class: "calendar__header" }, h("button", { class: "calendar__btn-previous", onClick: () => this.changeMonth(-1) }), h("label", { class: "calendar__lbl-month" }, this.getMonthLabel()), h("button", { class: "calendar__btn-next", onClick: () => this.changeMonth(1) })), h("div", { class: "calendar__body" }, h("div", { class: "calendar__line" }, [...Array(7).keys()].map(day => h("div", { "data-day": this.i18n(`ez-calendar.weekDay.${day}`), class: "calendar__cell calendar__cell--unselectable" }, this.i18n(`ez-calendar.weekDay.${day}`)))), [0, 7, 14, 21, 28, 35].map(offset => h("div", { class: "calendar__line" }, [0, 1, 2, 3, 4, 5, 6].map(index => {
       const date = new Date();
       date.setTime(firstDate.getTime());
       date.setDate(date.getDate() + offset + index);
@@ -192,7 +193,7 @@ export class EzCalendar {
         classNames += " calendar__cell--selected";
       }
       return h("div", { "data-day-month": dataDayMonth, class: classNames, onClick: () => this.selectDate(date) }, date.getDate());
-    })))), h("div", { class: "calendar__footer" }, h("button", { class: "calendar__btn-today", onClick: () => this.selectDate(new Date()) }, this._todayLabel))), (this.time || this.showSeconds) &&
+    })))), h("div", { class: "calendar__footer" }, h("button", { class: "calendar__btn-today", onClick: () => this.selectDate(new Date()) }, this.i18n('ez-calendar.today')))), (this.time || this.showSeconds) &&
       h("div", { class: "calendar-time" }, h("div", { class: "calendar-time__header" }, h("div", null, "H"), h("div", { class: "separatorTime" }, ":"), h("div", null, "M"), this.showSeconds &&
         h("div", { class: "separatorTime" }, ":"), this.showSeconds &&
         h("div", null, "S")), h("div", { class: "calendar__body ", style: { display: 'flex', paddingLeft: '12px', paddingRight: '12px' } }, h("div", { class: "calendar__column", ref: elem => this._hoursScroll = elem, onScroll: () => this.updateScroll(this._hoursScroll) }, this._hoursLabel.map((offset, index) => {

package/dist/collection/components/ez-check/ez-check.css

@@ -351,7 +351,7 @@ input.switch-mode:checked:disabled::after {
   font-family: var(--ez-check--label--font-family);
   cursor: default;
   width: inherit;
-  display: flex;
+  display: block;
   align-content: center;
   gap: var(--space--small);
 }

package/dist/collection/components/ez-chip/ez-chip.css

@@ -1,21 +1,21 @@
 :host {
   /* dimensions */
   /*@doc Define a altura do chip.*/
-  --ez-label-chip--height: 30px;
+  --ez-label-chip--height: 32px;
 
   /* Label */
   /*@doc Define o tamanho do label.*/
-  --ez-label-chip__label--font-size: var(--text--medium, 14px);
+  --ez-label-chip__label--font-size: var(--font-size--default, 14px);
   /*@doc Define a família da fonte do label.*/
   --ez-label-chip__label--font-family: var(--font-pattern, Arial);
   /*@doc Define o peso da fonte do label.*/
-  --ez-label-chip__label--font-weight: var(--text-weight--medium, 400);
+  --ez-label-chip__label--font-weight: var(--font-weight--regular, 400);
   /*@doc Define o espaçamento do label.*/
-  --ez-label-chip__label--space--medium: var(--space--medium, 12px);
+  --ez-label-chip__horizontal-padding: var(--space--8, 8px);
   /*@doc Define a cor do texto.*/
-  --ez-label-chip__label--title--primary: var(--title--primary, #2B3A54);
+  --ez-label-chip__label--text--primary: var(--color--gray-70, #FFFFFF);
   /*@doc Define a cor do ícone.*/
-  --ez-label-chip__label--text--primary: var(--text--primary, #626e82);
+  --ez-label-chip__label--icon--primary: var(--color--gray-70, #FFFFFF);
 
   /* Label Container */
   /*@doc Define o raio da borda do container do chip.*/
@@ -23,53 +23,46 @@
   /*@doc Define o estilo da borda do container.*/
   --ez-label-chip__label__container--border: 1px solid;
   /*@doc Define a cor da borda do container.*/
-  --ez-label-chip__label__container--border-color-strokes: var(--color--strokes, #DCE0E8);
+  --ez-label-chip__label__container--border-color-strokes: transparent;
   /*@doc Define a cor do texto, do ícone do label e do botão de remoção (quando o chip está ativo).*/
   --ez-label-chip__label__container--color-primary: var(--color--primary, #008561);
   /*@doc Define a cor da borda e do fundo quando o chip está desativado.*/
-  --ez-label-chip__label__container-color--disable-secondary: var(--color--disable-secondary, #F2F5F8);
-  /*@doc Define a cor de fundo do container quando ativo.*/
-  --ez-label-chip__label__container--background-color: var(--color--primary-300);
+  --ez-label-chip__label__container-color--disable-secondary: var(--color--gray-80, #F9F9F9);
+  /*@doc Define a cor de fundo do container.*/
+  --ez-label-chip__label__container--background-color: var(--color--ocean-green-600, #008561);
   /*@doc Define a cor da borda do container quando ativo.*/
   --ez-label-chip__label__container--border-color: #0085610F;
-  /*@doc Define a cor da borda do container quando o cursor está sobre ele.*/
-  --ez-label-chip__label__container--default--border-color--active: var(--color--primary, #007a5a);
-  /*@doc Define a cor do fundo do container quando o cursor está sobre ele.*/
-  --ez-label-chip__label__container--default--background-color--hover: var(--color--primary-300, #f2faf8);
+    /*@doc Define a cor da borda do container quando ativo.*/
+  --ez-label-chip__label__container--border-color-active: transparent;
+  /*@doc Define a cor do fundo do container quando o cursor está ativo.*/
+  --ez-label-chip__label__container--default--background-color--active: var(--color--ocean-green-700, #00684C);
   /*@doc Define a cor do texto quando o cursor está sobre ele.*/
-  --ez-label-chip__label__container--default--color--hover: var(--color--primary, #f2faf8);
+  --ez-label-chip__label__container--default--color--active: var(--color--gray-70, #FFFFFF);
   /*@doc Define a cor do texto e do ícone quando o chip está desabilitado.*/
-  --ez-label-chip__label__container--text--disabled: var(--text--disable, #AFB6C0);
+  --ez-label-chip__label__container--text--disabled: var(--color--gray-300, #A4A5A7);
   /*@doc Define a cor da borda quando o componente está ativo.*/
-  --ez-label-chip__label__container--default--border-color--active: var(--color--primary);
+  --ez-label-chip__label__container--default--border-color--active: transparent;
   /*@doc Define a margem superior.*/
-  --ez-label-chip__label__container--default--margin-top: var(--space-extra-small, 3px);
+  --ez-label-chip__label__container--default--margin-top: var(--space-extra-small, 0px);
 }
 
-.lbl {
+.label__text {
   /*private*/
-  display: flex;
-  white-space: nowrap;
-  align-items: center;
   cursor: pointer;
+  white-space: nowrap;
   user-select: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 100%;
 
   /*public*/
-  color: var(--ez-label-chip__label--title--primary);
-  height: var(--ez-label-chip--height);
   font-family: var(--ez-label-chip__label--font-family);
   font-size: var(--ez-label-chip__label--font-size);
   font-weight: var(--ez-label-chip__label--font-weight);
 }
 
-.lbl--active {
-  /*public*/
-  color: var(--ez-label-chip__label__container--default--color--hover);
-}
-
-.lbl--disabled {
-  /*public*/
-  color: var(--ez-label-chip__label__container--text--disabled);
+.label__text--disabled {
+  cursor: not-allowed;
 }
 
 .label__container {
@@ -79,47 +72,40 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  background-color: #FFFFFF;
+  gap: var(--space--4);
   /*public*/
-  color: var(--ez-label-chip__label--text--primary);
-  fill: var(--ez-label-chip__label--text--primary);
-  --ez-icon--color: var(--ez-label-chip__label--text--primary);
+  height: var(--ez-label-chip--height);
   border: var(--ez-label-chip__label__container--border);
   border-radius: var(--ez-label-chip__label__container--border-radius);
-  border-color: var(--ez-label-chip__label__container--border-color-strokes);
-  padding-right: var(--ez-label-chip__label--space--medium);
-  padding-left: var(--ez-label-chip__label--space--medium);
+  padding: 0 var(--ez-label-chip__horizontal-padding);
   outline-color: var(--ez-label-chip__label__container--default--border-color--active);
   margin-top: var(--ez-label-chip__label__container--default--margin-top);
 }
 
-.label__content {
-  /*private*/
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  --ez-icon--color: var(--ez-label-chip__label--text--primary);
+.label__container[data-size="default"] {
+  height: var(--ez-label-chip--height, 32px);
 }
 
-.label__container--disabled {
-  cursor: default;
-  border-color: var(--ez-label-chip__label__container-color--disable-secondary);
-  background-color: var(--ez-label-chip__label__container-color--disable-secondary);
-  fill: var(--ez-label-chip__label__container--text--disabled);
-  color: var(--ez-label-chip__label__container--text--disabled);
-  --ez-icon--color: var(--ez-label-chip__label__container--text--disabled);
+.label__container[data-size="medium"] {
+  height: 42px;
+}
+
+.label__container[data-size="large"] {
+  height: 50px;
 }
 
-.label__container--active {
-  border-color: var(--ez-label-chip__label__container--default--background-color--hover);
-  background-color: var(--ez-label-chip__label__container--default--background-color--hover);
-  color: var(--ez-label-chip__label__container--default--color--hover);
-  fill: var(--ez-label-chip__label__container--default--color--hover);
-  --ez-icon--color: var(--ez-label-chip__label__container--default--color--hover);
+.label__container--row-reverse {
+  flex-direction: row-reverse;
+}
+
+.label__container--disabled {
+  cursor: not-allowed;
 }
 
 .label__container:hover {
-  border-color: var(--ez-label-chip__label__container--default--border-color--active);
+  -webkit-transition: 150ms -webkit-filter linear;
+  transition: 150ms filter linear, 150ms -webkit-filter linear;
+  filter: brightness(90%);
 }
 
 .label__container:focus {
@@ -127,41 +113,74 @@
   box-shadow: 0 0 0 2px var(--ez-label-chip__label__container--default--border-color--active);
 }
 
-.label__container--disabled:hover {
-  cursor: default;
-  border: var(--ez-label-chip__label__container--border);
-  border-color: var(--ez-label-chip__label__container-color--disable-secondary);
-  background-color: var(--ez-label-chip__label__container-color--disable-secondary);
-  fill: var(--ez-label-chip__label__container--text--disabled);
-  color: var(--ez-label-chip__label__container--text--disabled);
-  --ez-icon--color: var(--ez-label-chip__label__container--text--disabled);
+.label__container:active {
+  -webkit-transition: 150ms -webkit-filter linear;
+  transition: 150ms filter linear, 150ms -webkit-filter linear;
+  filter: brightness(85%);
 }
 
-.label__content__icon {
-  display: flex;
-  cursor: pointer;
+/*PRIMARY*/
+
+.label__container[data-color-type="primary"] ez-icon {
+  --ez-icon--color: var(--ez-label-chip__label--icon--primary);
+}
+
+:host .label__container[data-color-type="primary"] ::slotted(ez-icon) {
+  --ez-icon--color: var(--ez-label-chip__label--icon--primary);
+}
+
+.label__container[data-color-type="primary"][data-color-state="default"] {
+  border-color: var(--ez-label-chip__label__container--border-color-strokes);
+  background-color: var(--ez-label-chip__label__container--background-color);
   color: var(--ez-label-chip__label--text--primary);
-  fill: var(--ez-label-chip__label--text--primary);
-  --ez-icon--color: var(--ez-label-chip__label--text--primary);
 }
 
-.label__container--row-reverse{
- flex-direction: row-reverse;
+.label__container[data-color-type="primary"][data-color-state="active"] {
+  border-color: var(--ez-label-chip__label__container--border-color-active);
+  background-color: var(--ez-label-chip__label__container--default--background-color--active);
+  color: var(--ez-label-chip__label__container--default--color--active);
+}
+
+.label__container[data-color-type="primary"]:focus {
+  border-color: var(--ez-label-chip__label__container--default--border-color--active);
+}
+
+/*SECONDARY*/
+
+.label__container[data-color-type="secondary"] ez-icon {
+  --ez-icon--color: var(--color--gray-300, #A4A5A7);
+}
+
+:host .label__container[data-color-type="secondary"] ::slotted(ez-icon) {
+  --ez-icon--color: var(--color--gray-300, #A4A5A7);
 }
 
-.label__container .btn-close {
-  padding: 0px 0px 0px 8px;
+.label__container[data-color-type="secondary"][data-color-state="default"] {
+  border-color: var(--color--gray-200, #D2D2D3);
+  background-color: var(--color--gray-70);
+  color: var(--color--ocean-green-1000, #00281D);
 }
 
-.label__container--row-reverse .btn-close{
-  padding: 0px 8px 0px 0px;
- }
+.label__container[data-color-type="secondary"][data-color-state="active"] {
+  border-color: var(--color--gray-200, #D2D2D3);
+  background-color: var(--color--primary-300, #f2faf8);
+  color: var(--color--primary, #f2faf8);
+}
+
+.label__container[data-color-type="secondary"]:focus {
+  color: var(--color--primary, #007a5a);
+}
 
+/*DISABLED*/
 
-.cursor-disable{
-  cursor: default;
+.label__container[data-color-state="disabled"] {
+  border-color: var(--ez-label-chip__label__container-color--disable-secondary);
+  background-color: var(--ez-label-chip__label__container-color--disable-secondary);
+  color: var(--ez-label-chip__label__container--text--disabled);
+  cursor: not-allowed;
+  filter: none;
 }
 
-ez-icon {
-  --ez-icon--color: inherit;
+.label__container[data-color-state="disabled"] ez-icon {
+  --ez-icon--color: var(--ez-label-chip__label__container--text--disabled);
 }