@sankhyalabs/ezui 5.22.0-dev.1 → 5.22.0-dev.100

package/dist/cjs/searchFormatters-b7e1ed1e.js

@@ -0,0 +1,23 @@
+'use strict';
+
+const START_HIGH_LIGHT_TAG = "<span class='card-item__highlight'>";
+const END_HIGH_LIGHT_TAG = "</span>";
+function replaceHighlight(value) {
+  const startHighlight = new RegExp(START_HIGH_LIGHT_TAG, 'g');
+  const endHighlight = new RegExp(END_HIGH_LIGHT_TAG, 'g');
+  const newValue = String(value !== null && value !== void 0 ? value : "").replace(startHighlight, '').replace(endHighlight, '');
+  return replaceQuotes(newValue);
+}
+function replaceQuotes(text) {
+  if (text == undefined) {
+    return;
+  }
+  return String(text)
+    .replace(/&amp;/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"');
+}
+
+exports.replaceHighlight = replaceHighlight;
+exports.replaceQuotes = replaceQuotes;

package/dist/collection/collection-manifest.json

@@ -3,11 +3,11 @@
     "./components/ez-list/ez-list.js",
     "./components/ez-alert-list/ez-alert-list.js",
     "./components/ez-modal/ez-modal.js",
+    "./components/ez-text-input/ez-text-input.js",
     "./components/ez-combo-box/ez-combo-box.js",
-    "./components/ez-card-item/ez-card-item.js",
     "./components/ez-search/ez-search.js",
     "./components/ez-breadcrumb/ez-breadcrumb.js",
-    "./components/ez-text-input/ez-text-input.js",
+    "./components/ez-card-item/ez-card-item.js",
     "./components/ez-popover/ez-popover.js",
     "./components/ez-radio-button/ez-radio-button.js",
     "./components/ez-tabselector/ez-tabselector.js",
@@ -24,9 +24,11 @@
     "./components/ez-check/ez-check.js",
     "./components/ez-chip/ez-chip.js",
     "./components/ez-collapsible-box/ez-collapsible-box.js",
+    "./components/ez-combo-box/ez-combo-box-list/ez-combo-box-list.js",
     "./components/ez-date-input/ez-date-input.js",
     "./components/ez-date-time-input/ez-date-time-input.js",
     "./components/ez-dialog/ez-dialog.js",
+    "./components/ez-double-list/ez-double-list.js",
     "./components/ez-dropdown/ez-dropdown.js",
     "./components/ez-file-item/ez-file-item.js",
     "./components/ez-filter-input/ez-filter-input.js",
@@ -41,8 +43,11 @@
     "./components/ez-multi-selection-list/ez-multi-selection-list.js",
     "./components/ez-multi-selection-list/subcomponents/multi-selection-box-message.js",
     "./components/ez-number-input/ez-number-input.js",
+    "./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-scroller/ez-scroller.js",
+    "./components/ez-search/subcomponent/search-list/search-list.js",
     "./components/ez-sidebar-button/ez-sidebar-button.js",
     "./components/ez-sidebar-navigator/ez-sidebar-navigator.js",
     "./components/ez-skeleton/ez-skeleton.js",
@@ -52,6 +57,7 @@
     "./components/ez-text-area/ez-text-area.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-view-stack/ez-view-stack.js"
   ],

package/dist/collection/components/ez-actions-button/ez-actions-button.js

@@ -84,8 +84,9 @@ export class EzActionsButton {
     var _a;
     const docWidth = document.body.clientWidth;
     const boundingList = (_a = this._actionsList) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    if ((boundingList === null || boundingList === void 0 ? void 0 : boundingList.right) > docWidth) {
-      return (docWidth - boundingList.width) + "px";
+    const rightOffset = docWidth - this._button.getBoundingClientRect().right;
+    if ((boundingList === null || boundingList === void 0 ? void 0 : boundingList.right) >= docWidth || (boundingList === null || boundingList === void 0 ? void 0 : boundingList.right) === (docWidth - rightOffset)) {
+      return (docWidth - boundingList.width - rightOffset) + "px";
     }
     return;
   }

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

@@ -48,7 +48,6 @@ ez-icon {
     /*private*/
     display: flex;
     justify-content: center;
-    align-items: center;
 }
 
 .badge__content--fill-xs {
@@ -118,6 +117,18 @@ ez-icon {
     padding: var(--ez-badge--padding-xs);
 }
 
+.badge__content--icon-align-center {
+    align-items: center;
+}
+
+.badge__content--icon-align-start {
+    align-items: flex-start;
+}
+
+.badge__content--icon-align-end {
+    align-items: flex-end;
+}
+
 .badge__content--fill {
     /*public*/
     position: absolute;

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

@@ -29,6 +29,7 @@ export class EzBadge {
     this.iconLeft = undefined;
     this.iconRight = undefined;
     this.position = { horizontal: "right", vertical: "top" };
+    this.alignItems = "center";
   }
   getIconSize() {
     switch (this.size) {
@@ -43,6 +44,16 @@ export class EzBadge {
         return null;
     }
   }
+  getAlignItemsClass() {
+    switch (this.alignItems) {
+      case "flex-end":
+        return "end";
+      case "flex-start":
+        return "start";
+      default:
+        return "center";
+    }
+  }
   componentDidLoad() {
     if (this._element) {
       ElementIDUtils.addIDInfo(this._element);
@@ -66,7 +77,8 @@ export class EzBadge {
   }
   createContainerClassName() {
     let sizeSufix = this._sizes[this.size].sufix;
-    let containerClassNames = ["badge__content"];
+    let alignItemsClass = "badge__content--icon-align-" + this.getAlignItemsClass();
+    let containerClassNames = ["badge__content", alignItemsClass];
     if (this.hasSlot) {
       containerClassNames.push("badge__content--fill-" + sizeSufix);
       if (this.position.vertical == "bottom" && this.position.horizontal == "right") {
@@ -199,6 +211,24 @@ export class EzBadge {
           "text": "Define a posi\u00E7\u00E3o do \u00EDcone em rela\u00E7\u00E3o ao elemento filho."
         },
         "defaultValue": "{ horizontal: \"right\", vertical: \"top\" }"
+      },
+      "alignItems": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "\"center\" | \"flex-end\" | \"flex-start\"",
+          "resolved": "\"center\" | \"flex-end\" | \"flex-start\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a posi\u00E7\u00E3o do \u00EDcone em rela\u00E7\u00E3o ao elemento."
+        },
+        "attribute": "align-items",
+        "reflect": true,
+        "defaultValue": "\"center\""
       }
     };
   }

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

@@ -23,36 +23,36 @@
 
   /* general */
   /*@doc Define a cor do label.*/
-  --ez-button--color: var(--title--primary, #FFF);
+  --ez-button--color: var(--title--primary, #2B3A54);
   /*@doc Define o tamanho do label.*/
   --ez-button--font-size: var(--text--medium, 14px);
   /*@doc Define a família da fonte do label.*/
   --ez-button--font-family: var(--font-pattern, Arial);
   /*@doc Define o peso da fonte do label.*/
-  --ez-button--font-weight: var(--text-weight--large);
+  --ez-button--font-weight: var(--text-weight--large, 500);
   /*@doc Define a cor de fundo do botão.*/
-  --ez-button--background-color: var(--background--medium, #c0c0c0);
+  --ez-button--background-color: var(--background--light, #ffffff);
   /*@doc Define o raio da borda do botão.*/
-  --ez-button--border-radius: var(--border--radius-large, 12px);
+  --ez-button--border-radius: var(--border--radius-large, 24px);
   /*@doc Define o estilo da borda do botão.*/
-  --ez-button--border: none;
+  --ez-button--border: 1px solid var(--color--strokes);
   /*@doc Define o alinhamento horizontal do conteúdo do botão.*/
   --ez-button--justify-content: center;
 
   /*@doc Define a cor do texto e do ícone quando o cursor está sobre o botão.*/
-  --ez-button--hover-color: var(--color--primary-600);
+  --ez-button--hover-color: var(--color--primary-600, #007a5a);
   /*@doc Define a cor de fundo quando o cursor está sobre o botão.*/
-  --ez-button--hover--background-color: var(--background--medium, var(--ez-button--background-color));
+  --ez-button--hover--background-color: var(--background--light, #ffffff);
 
   /*@doc Define a cor do texto quando o botão está desabilitado.*/
-  --ez-button--disabled-color: var(--text--disable);
+  --ez-button--disabled-color: var(--text--primary);
   /*@doc Define a cor de fundo quando o botão está desabilitado.*/
-  --ez-button--disabled--background-color: var(--color--disable-secondary);
+  --ez-button--disabled--background-color: var(--background--medium);
 
   /*@doc Define o estido da borda quando o botão está selecionado.*/
-  --ez-button--focus--border: var(--border--xlarge, 4px solid) var(--color--primary-300);
+  --ez-button--focus--border: var(--border--medium, 2px solid) var(--color--primary-300);
   /*@doc Define a sombra do botão quando selecionado.*/
-  --ez-button--focus--box-shadow: none;
+  --ez-button--focus--box-shadow: var(--color--primary-300) 0px 0px 0px 2px;
 
   /*@doc Define a cor do texto e do ícone ao ativar o botão.*/
   --ez-button--active-color: var(--color--primary-700);
@@ -64,7 +64,7 @@
   /*@doc Define a cor do texto do botão no hover do modo link.*/
   --ez-button--link--hover-color: var(--color--primary-700, '#1C1D22');
 
-  --ez-button--link-disabled-color: var(--color--disable-primary, '#e5eaf0');
+  --ez-button--link-disabled-color: var(--text--secondary, #a2abb9);
 
   /*@doc Define o tamanho small na fonte do texto do botão no modo link.*/
   --ez-button--link--small--font-size: var(--text--small, 12px);
@@ -107,7 +107,7 @@ button {
 
 button:focus {
   outline: var(--ez-button--focus--border);
-  box-shadow: var(--ez-button--focus--box-shadow);
+  box-shadow: none;
 }
 
 button:hover {
@@ -131,11 +131,15 @@ button:disabled {
   background-color: var(--ez-button--disabled--background-color);
   color: var(--ez-button--disabled-color);
   fill: var(--ez-button--disabled-color);
-  border: none;
   --ez-icon--color: var(--ez-button--disabled-color);
   cursor: no-drop;
 }
 
+.x-small{
+  height: 28px;
+  --ez-button--font-size: var(--text--small, 12px);
+}
+
 .small{
   height: 32px;
   --ez-button--font-size: var(--text--small, 12px);
@@ -159,6 +163,12 @@ button:disabled {
   height: 42px;
 }
 
+.btn-icon--x-small {
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
+}
+
 .btn-icon--small {
   width: 32px;
   min-width: 32px;

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

@@ -35,10 +35,16 @@ export class EzButton {
       ElementIDUtils.addIDInfo(this._button, 'button', dataInfo);
     }
   }
+  getButtonSize(sizeParam = "medium") {
+    const sizeList = ["x-small", "small", "medium", "large"];
+    const sizeLowerCase = this.size && this.size.toLowerCase();
+    return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
+  }
   getIconSize(sizeParam = "medium") {
     const sizeList = ["small", "medium", "large"];
     const sizeLowerCase = this.size && this.size.toLowerCase();
-    return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
+    const sizeMapped = sizeLowerCase === "x-small" ? "small" : sizeLowerCase;
+    return sizeList.includes(sizeMapped) ? sizeMapped : sizeParam;
   }
   handleSlotChange(ev) {
     const slot = ev.target;
@@ -60,16 +66,16 @@ export class EzButton {
   }
   render() {
     if (this.mode == "icon") {
-      return (h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() })));
+      return (h("button", { class: "btn-icon " + ((this.getButtonSize()) ? `btn-icon--${this.getButtonSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() })));
     }
     else if (this.mode == "label-icon") {
-      return (h("div", { class: "label-icon" }, h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() })), h("label", { title: this.label }, this.label)));
+      return (h("div", { class: "label-icon" }, h("button", { class: "btn-icon " + ((this.getButtonSize()) ? `btn-icon--${this.getButtonSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() })), h("label", { title: this.label }, this.label)));
     }
     else if (this.mode == "link") {
       return (h("a", { class: `${this.getIconSize()} ${!this.enabled ? "disabled" : ""}`, ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
     }
     else {
-      return (h("button", { class: this.getIconSize(""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+      return (h("button", { class: this.getButtonSize(""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
     }
   }
   static get is() { return "ez-button"; }
@@ -177,8 +183,8 @@ export class EzButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"small\" | \"medium\" | \"large\" | undefined",
-          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "original": "\"x-small\" | \"small\" | \"medium\" | \"large\" | undefined",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-small\"",
           "references": {}
         },
         "required": false,

package/dist/collection/components/ez-card-item/ez-card-item.css

@@ -1,7 +1,10 @@
-:host {
+:host {  
   /*@doc Define o tamanho da fonte do componente.*/
   --ez-card-item--font-size: var(--text--medium, 14px);
 
+  /*@doc Define o tamanho da fonte do componente no modo compacto.*/
+  --ez-card-item--font-size-compacted: var(--text--extra-small, 10px);
+
   /*@doc Define a família da fonte do componente.*/
   --ez-card-item--font-family: var(--font-pattern, Arial);
 
@@ -12,7 +15,7 @@
   --ez-card-item--font-weight-large: var(--text-weight--large, 600);
 
   /*@doc Define a cor da fonte do componente.*/
-  --ez-card-item--color: var(--title--primary, #2B3A54);
+  --ez-card-item--color: var(--text--primary, #626e82);
 
   /*@doc Define a cor da fonte da key do componente.*/
   --ez-card-item__key--color: var(--text--primary, #626e82);
@@ -29,6 +32,9 @@
   /*@doc Define a cor do highlight / marcação nos textos do componente.*/
   --ez-card-item__highlight--color: var(--color--primary-300, #E2F4EF);
 
+   /*@doc Define o peso da fonte do componente.*/
+   --ez-card-item--detail-label--font-weight: var(--text-weight--large, 400);
+
   width: 100%;
   display: flex;
   cursor: pointer;
@@ -39,7 +45,6 @@
   flex-direction: column;
   width: 100%;
   cursor: pointer;
-  padding: 12px;
   z-index: 0;
   position: relative;
   container-type: inline-size;
@@ -47,6 +52,21 @@
   white-space: pre-line;
 }
 
+.card-item__detail{
+  display: inline-block;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  opacity: var(--opacity--soft);
+}
+
+
+
+.card-item__expanded {
+  padding: var(--space--medium);
+}
+
 .card-item:hover {
   background: #F0F3F7;
   border-radius: 12px;
@@ -81,22 +101,26 @@
 }
 
 .card-item__details-container__left {
+  display: flex;
+  flex-direction: column;
   white-space: pre-line;
   cursor: pointer;
   width: 50%;
 }
 
 .card-item__details-container__right {
+  display: flex;
+  flex-direction: column;
   white-space: pre-line;
   width: 50%;
   cursor: pointer;
 }
 
-.card-item__detail:not(:last-child) {
+.card-item__detail{
   cursor: pointer;
-  white-space: pre-line;
+}
 
-  /*public*/
+.card-item__detail-default:not(:last-child) {
   padding-bottom: var(--ez-card-item__detail--padding-bottom);
 }
 
@@ -106,8 +130,7 @@
   /*public*/
   font-size: var(--ez-card-item--font-size);
   font-family: var(--ez-card-item--font-family);
-  font-weight: var(--ez-card-item--font-weight);
-  color: var(--ez-card-item__detail-label--color);
+  font-weight: var(--ez-card-item--detail-label--font-weight);
 }
 
 .card-item__detail-value {
@@ -118,7 +141,6 @@
   font-size: var(--ez-card-item--font-size);
   font-family: var(--ez-card-item--font-family);
   font-weight: var(--ez-card-item--font-weight);
-  color: var(--ez-card-item--color);
 }
 
 .card-item__highlight {
@@ -138,7 +160,7 @@
   align-items: center;
 }
 
-.card-item__details-container{
+.card-item__details-container_default{
   display: flex;
 }
 
@@ -146,6 +168,32 @@
   margin-left: auto;
 }
 
+/* Modo compacto */
+.card-item__compacted {
+  padding: var(--space--2xs) var(--space--small);
+}
+
+.card-item__detail-label-compacted {
+  font-size: var(--ez-card-item--font-size-compacted);
+}
+
+.card-item__detail-value-compacted {
+  font-size: var(--ez-card-item--font-size-compacted);
+}
+
+.card-item__title-compacted {
+  font-size: var(--ez-card-item--font-size-compacted);
+}
+
+.card-item__details-container__left-compacted{
+  width: 100%;
+}
+
+.card-item__details-container__right-compacted {
+  width: 100%;
+}
+
+
 @container box (max-width: 550px) {
   .card-item__details {
     flex-direction: column;

package/dist/collection/components/ez-card-item/ez-card-item.js

@@ -4,6 +4,7 @@ export class EzCardItem {
   constructor() {
     this.item = undefined;
     this.enableKey = true;
+    this.compacted = false;
   }
   componentWillRender() {
     this.createDetailList();
@@ -26,14 +27,22 @@ export class EzCardItem {
       }
     }
   }
+  buildDetailContentTitle(detail) {
+    var _a, _b;
+    if ((detail === null || detail === void 0 ? void 0 : detail.label) == undefined && (detail === null || detail === void 0 ? void 0 : detail.value) == undefined)
+      return;
+    const cleanLabel = (_a = StringUtils.replaceAccentuatedCharsHtmlEntities(detail === null || detail === void 0 ? void 0 : detail.label)) === null || _a === void 0 ? void 0 : _a.replace(/<[^>]*>/g, '');
+    const cleanValue = (_b = StringUtils.replaceAccentuatedCharsHtmlEntities(detail === null || detail === void 0 ? void 0 : detail.value)) === null || _b === void 0 ? void 0 : _b.replace(/<[^>]*>/g, '');
+    return `${cleanLabel}: ${cleanValue}`;
+  }
   buildDetailContent(detail) {
-    return h("div", { class: "card-item__detail" }, h("label", { class: "card-item__detail-label" }, detail.label), ": ", h("label", { class: "card-item__detail-value", innerHTML: detail.value }));
+    return h("div", { class: `card-item__detail ${this.compacted ? "" : "card-item__detail-default"}`, title: this.buildDetailContentTitle(detail) }, h("label", { class: `card-item__detail-label ${this.compacted ? "card-item__detail-label-compacted" : ""}` }, `${detail.label}: `), " ", h("label", { class: `card-item__detail-value ${this.compacted ? "card-item__detail-value-compacted" : ""}`, innerHTML: detail.value }));
   }
   render() {
     return (h(Host, null, this.item &&
-      h("div", { class: "card-item", onClick: () => { this.ezClick.emit(this.item); } }, h("div", { class: "ez-row card-item__content" }, h("div", { class: "ez-col ez-col--sd-11 card-item__details" }, h("label", { class: "card-item__title" }, this.enableKey && (h("span", { class: "card-item__key", innerHTML: this.item.key })), h("span", { innerHTML: this.item.title })), h("div", { class: "card-item__details-container" }, h("div", { class: "card-item__details-container__left" }, this._details.detailsLeft.map(detail => {
+      h("div", { class: `card-item ${this.compacted ? "card-item__compacted" : "card-item__expanded"} `, onClick: () => { this.ezClick.emit(this.item); } }, h("div", { class: "ez-row card-item__content" }, h("div", { class: "ez-col ez-col--sd-11 card-item__details" }, h("label", { class: `card-item__title ${this.compacted ? "card-item__title-compacted" : ""}` }, this.enableKey && (h("span", { class: "card-item__key", innerHTML: this.item.key })), h("span", { innerHTML: this.item.title })), h("div", { class: `${this.compacted ? "card-item__details-container_compacted" : "card-item__details-container_default"}` }, h("div", { class: `card-item__details-container__left ${this.compacted ? "card-item__details-container__left-compacted" : ""}` }, this._details.detailsLeft.map(detail => {
         return this.buildDetailContent(detail);
-      })), h("div", { class: "card-item__details-container__right" }, this._details.detailsRight.map(detail => {
+      })), h("div", { class: `card-item__details-container__right ${this.compacted ? "card-item__details-container__right-compacted" : ""}` }, this._details.detailsRight.map(detail => {
         return this.buildDetailContent(detail);
       })))), h("div", { class: "ez-col ez-col--sd-1 card-item__details-slot" }, h("slot", { name: "rightSlot" }))))));
   }
@@ -87,6 +96,24 @@ export class EzCardItem {
         "attribute": "enable-key",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "compacted": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determina se o componente ser\u00E1 apresentado no modo compacto."
+        },
+        "attribute": "compacted",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -28,6 +28,8 @@ export class EzChart {
       subTitle: this.chartSubTitle,
       legendEnabled: this.legendEnabled,
       onClickSerie: this.ezSerieClick,
+      width: this.width,
+      height: this.height,
     });
   }
   componentWillLoad() {

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

@@ -129,11 +129,6 @@ input.regular-mode {
   cursor: pointer;
   border-radius: 50%;
   position: relative;
-
-
-  /*public*/
-  width: var(--ez-check--width);
-  height: var(--ez-check--height);
 }
 
 input.compact{
@@ -363,5 +358,5 @@ input.switch-mode:checked:disabled::after {
 }
 
 .label--padding {
-  padding-left: var(--space--small);
+  padding-left: var(--space--extra-small);
 }

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

@@ -42,6 +42,8 @@
   --ez-label-chip__label__container--text--disabled: var(--text--disable, #AFB6C0);
   /*@doc Define a cor da borda quando o componente está ativo.*/
   --ez-label-chip__label__container--default--border-color--active: var(--color--primary);
+  /*@doc Define a margem superior.*/
+  --ez-label-chip__label__container--default--margin-top: var(--space-extra-small, 3px);
 }
 
 .lbl {
@@ -88,6 +90,7 @@
   padding-right: var(--ez-label-chip__label--space--medium);
   padding-left: var(--ez-label-chip__label--space--medium);
   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 {
@@ -120,7 +123,8 @@
 }
 
 .label__container:focus {
-  outline: var(--border--medium) var(--ez-label-chip__label__container--default--border-color--active);
+  outline: none;
+  box-shadow: 0 0 0 2px var(--ez-label-chip__label__container--default--border-color--active);
 }
 
 .label__container--disabled:hover {

package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css

@@ -73,7 +73,7 @@ ez-icon {
 .collapsible-box__title {
   /*private*/
   position: relative;
-  width: auto;
+  width: 100%;
   display: flex;
   box-sizing: border-box;
   align-items: center;
@@ -98,7 +98,7 @@ ez-icon {
 
 .collapsible-box__label {
   /*private*/
-  display: flex;
+  display: block;
   white-space: nowrap;
   overflow: hidden;
   cursor: pointer;