@sankhyalabs/ezui 7.3.3 → 7.3.4-dev.1

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

@@ -41,6 +41,8 @@ export class EzSearch {
     this.suppressPreLoad = true;
     this.autoFocus = false;
     this.alternativePlaceholder = undefined;
+    this.showMore = undefined;
+    this.suppressInputPersist = false;
     this.hideDescriptionInput = false;
   }
   observeErrorMessage() {
@@ -307,6 +309,10 @@ export class EzSearch {
     this.resetOptions();
   }
   setInputValue(clearError = true) {
+    if (this.suppressInputPersist) {
+      this.clearSearch();
+      return;
+    }
     const textValue = this.getText();
     if ((this._textInput.value || '') !== textValue) {
       this._textInput.value = textValue;
@@ -318,6 +324,7 @@ export class EzSearch {
   clearSearch() {
     this.value = null;
     this._currentValue = null;
+    this._textInput.value = "";
     this.ezChange.emit(null);
   }
   controlListWithOnlyOne(focusOnInput = true) {
@@ -421,11 +428,24 @@ export class EzSearch {
     return (_a = this.label) === null || _a === void 0 ? void 0 : _a.replace(this.i18n("app.requiredInfo"), "").toUpperCase();
   }
   resetOptions() {
+    if (this.showMore) {
+      this.handleResetOptionsWithShowMoreVisible();
+      return;
+    }
     this.hideOptions();
     this._criteria = undefined;
     this._preSelection = undefined;
     this.updateVisibleOptions();
   }
+  handleResetOptionsWithShowMoreVisible() {
+    //Eh preciso adicionar um timeout para garantir que o evento seja escutado pelo botão de mostrar mais.
+    setTimeout(() => {
+      this.hideOptions();
+      this._criteria = undefined;
+      this._preSelection = undefined;
+      this.updateVisibleOptions();
+    }, 100);
+  }
   async handleInitialValue() {
     const valueIsValid = !!this.getValue(this.value);
     if (!valueIsValid) {
@@ -620,12 +640,29 @@ export class EzSearch {
   onChangePreSelection(value) {
     this._preSelection = value;
   }
+  async handleClickShowMore() {
+    var _a, _b;
+    if (!this.optionLoader)
+      return;
+    const argument = (_b = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
+    const searchArgument = { mode: SearchMode.ADVANCED, argument };
+    const selectedOption = await this.optionLoader(searchArgument, this.contextProperties);
+    if (selectedOption && !Array.isArray(selectedOption)) {
+      this.selectOption(selectedOption);
+    }
+  }
+  renderShowMore() {
+    if (!this.showMore || this._showLoading)
+      return;
+    return (h("div", { style: { display: "flex", justifyContent: "center" }, "data-element-id": ElementIDUtils.getInternalIDInfo("showMore") }, h("ez-button", { onClick: async () => await this.handleClickShowMore(), variant: "tertiary", style: { width: "100%", justifyContent: "center" }, label: this.i18n("ez-search.showMore") })));
+  }
   render() {
     var _a;
     ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode, alternativePlaceholder: this.alternativePlaceholder }, h("button", { class: "btn", slot: "leftIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, this.canShowLoadSpinDescription() ? h("div", { class: "message__loading" }) : h("ez-icon", { iconName: "search" })), (((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value) || this.ensureClearButtonVisible)
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode, alternativePlaceholder: this.alternativePlaceholder }, h("button", { class: "btn", slot: "leftIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, this.canShowLoadSpinDescription() ? h("div", { class: "message__loading" }) :
+      h("ez-icon", { iconName: "search" })), (((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value) || this.ensureClearButtonVisible)
       ? h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }))
-      : undefined), h("ez-popover-plus", { ref: elem => this._ezPopOverPlusElement = elem, autoClose: false, overlayType: "none", useAnchorSize: true, anchorElement: [this._textInput, this.el], "data-element-id": this.el.getAttribute("data-element-id"), onEzVisibilityChange: (event) => event.stopPropagation() }, h("search-list", { ref: (ref) => this._searchList = ref, showLoading: this._showLoading, visibleOptions: this._visibleOptions, textEmptyList: this.i18n("ez-search.emptyList"), canShowListOptions: this.canShowListOptions(), value: this.value, showOptionValue: this.showOptionValue, preSelection: this._preSelection, onChangeValue: ({ detail }) => this.selectOption(detail), onChangePreSelection: ({ detail }) => this.onChangePreSelection(detail) }))));
+      : undefined), h("ez-popover-plus", { ref: elem => this._ezPopOverPlusElement = elem, autoClose: false, overlayType: "none", useAnchorSize: true, anchorElement: [this._textInput, this.el], "data-element-id": this.el.getAttribute("data-element-id"), onEzVisibilityChange: (event) => event.stopPropagation() }, h("div", null, h("search-list", { ref: (ref) => this._searchList = ref, showLoading: this._showLoading, visibleOptions: this._visibleOptions, textEmptyList: this.i18n("ez-search.emptyList"), canShowListOptions: this.canShowListOptions(), value: this.value, showOptionValue: this.showOptionValue, preSelection: this._preSelection, onChangeValue: ({ detail }) => this.selectOption(detail), onChangePreSelection: ({ detail }) => this.onChangePreSelection(detail) }), this.renderShowMore()))));
   }
   static get is() { return "ez-search"; }
   static get encapsulation() { return "shadow"; }
@@ -1052,6 +1089,41 @@ export class EzSearch {
         "attribute": "alternative-placeholder",
         "reflect": true
       },
+      "showMore": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Informa se deve exibir a op\u00E7\u00E3o de mostrar mais resultados."
+        },
+        "attribute": "show-more",
+        "reflect": false
+      },
+      "suppressInputPersist": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Informa se o valor da op\u00E7\u00E3o selecionada deve persistir no input de texto."
+        },
+        "attribute": "suppress-input-persist",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "hideDescriptionInput": {
         "type": "boolean",
         "mutable": true,
@@ -1064,7 +1136,7 @@ export class EzSearch {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Se true o campo de de apresenta\u00E7\u00E3o n\u00E3o ser\u00E1 exibido."
+          "text": "Se true o campo de descri\u00E7\u00E3o n\u00E3o ser\u00E1 exibido."
         },
         "attribute": "hide-description-input",
         "reflect": true,

package/dist/collection/components/ez-search-plus/ez-search-plus.js

@@ -52,6 +52,7 @@ export class EzSearchPlus {
     if (newNormalizedValue === undefined) {
       this.codeValue = undefined;
       this.descriptionValue = undefined;
+      this.cleanFieldsRef();
       this.ezChange.emit(undefined);
       return;
     }
@@ -86,7 +87,7 @@ export class EzSearchPlus {
    * Aplica o foco no campo.
    */
   async setFocus(options) {
-    var _a;
+    var _a, _b;
     if (this.disableCodeInput) {
       (_a = this._textInputDescriptionValue) === null || _a === void 0 ? void 0 : _a.setFocus(options);
       return;
@@ -95,7 +96,7 @@ export class EzSearchPlus {
       this._latestFocusedInputElement.setFocus(options);
       return;
     }
-    this._textInputCodeValue.setFocus(options);
+    (_b = this._textInputCodeValue) === null || _b === void 0 ? void 0 : _b.setFocus(options);
   }
   /**
   * Obtém o valor do componente só após a compo de apresentação
@@ -382,6 +383,14 @@ export class EzSearchPlus {
   handleDescriptionInputFocus() {
     this.setLatestFocusedInputElement(this._textInputDescriptionValue);
   }
+  cleanFieldsRef() {
+    if (this._textInputCodeValue) {
+      this._textInputCodeValue.value = null;
+    }
+    if (this._textInputDescriptionValue) {
+      this._textInputDescriptionValue.value = null;
+    }
+  }
   getRightIconElement() {
     var _a, _b;
     if (!this.ensureClearButtonVisible && (!this.value && !((_a = this._textInputCodeValue) === null || _a === void 0 ? void 0 : _a.value) && !((_b = this._textInputDescriptionValue) === null || _b === void 0 ? void 0 : _b.value))) {

package/dist/collection/components/ez-sortable-list/ez-sortable-list.css

@@ -198,7 +198,7 @@
 
 @media (max-height: 630px) {
     .sortable-content{
-        height: 290px;
+        height: 270px;
     }
 }
 

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

@@ -343,7 +343,7 @@
     position: absolute;
     background-color: #f1f1f1;
     min-width: 160px;
-    z-index:  var(--ez-elevation--8);
+    z-index:  var(--elevation--8);
     border-radius: var(--ez-split-button--border-radius);
   }
 

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

@@ -60,7 +60,11 @@ export class EzSplitButton {
         const spaceLeft = rightButtonRect.left;
         const shouldOpenUpward = spaceBelow < dropdownRect.height && spaceAbove > dropdownRect.height;
         const shouldOpenLeftward = spaceRight < dropdownRect.width && spaceLeft > dropdownRect.width;
-        const styles = this.calculateDropdownPosition(rightButtonRect, dropdownRect, shouldOpenUpward, shouldOpenLeftward);
+        const styles = {
+          position: 'fixed',
+          top: shouldOpenUpward ? `${rightButtonRect.top - dropdownRect.height}px` : `${rightButtonRect.bottom}px`,
+          left: shouldOpenLeftward ? `${rightButtonRect.right - dropdownRect.width}px` : `${rightButtonRect.left}px`,
+        };
         Object.assign(dropdownParent.style, styles);
       });
     };
@@ -197,6 +201,9 @@ export class EzSplitButton {
       return;
     }
   }
+  onItemActionExecuted() {
+    this.closeDropdown();
+  }
   clickListener(evt) {
     const isDisabled = !this.enabled ||
       this.isDisabled === true ||
@@ -227,26 +234,18 @@ export class EzSplitButton {
     this.buttonClick.emit();
   }
   handleDropdownItemClick(evt) {
+    var _a;
     this.dropdownItemClick.emit(evt.detail);
     evt.stopPropagation();
-    this.closeDropdown();
+    if (!((_a = evt.detail) === null || _a === void 0 ? void 0 : _a.disableCloseOnSelect)) {
+      this.closeDropdown();
+    }
   }
   handleDropdownSubActionClick(evt) {
     this.dropdownSubActionClick.emit(evt.detail);
     evt.stopPropagation();
     this.closeDropdown();
   }
-  calculateDropdownPosition(buttonRect, dropdownRect, openUpward, openLeftward) {
-    const baseOffset = this.offsetParentRect || { top: 0, left: 0 };
-    return {
-      top: openUpward ? 'auto' : `${buttonRect.bottom - baseOffset.top + window.scrollY}px`,
-      bottom: openUpward ? `${window.innerHeight - buttonRect.top - window.scrollY}px` : 'auto',
-      left: openLeftward
-        ? `${buttonRect.right - dropdownRect.width - baseOffset.left + window.scrollX}px`
-        : `${buttonRect.left - baseOffset.left + window.scrollX}px`,
-      maxHeight: openUpward ? `${buttonRect.top - baseOffset.top}px` : 'none'
-    };
-  }
   setupEventListeners() {
     const controller = new AbortController();
     const { signal } = controller;
@@ -303,7 +302,7 @@ export class EzSplitButton {
     return (h(Host, { class: this.variant ? `ez-split-button--${this.variant}` : '' }, h("div", { class: `ez-split-button ${this.size} ${this.mode}` }, this.renderLeftButton(hasIconButton, hasLabelButton, iconSize), this.renderDivider(), this.renderDropdownSection(iconSize))));
   }
   renderLeftButton(hasIconButton, hasLabelButton, iconSize) {
-    return (h("button", { class: `ez-split-button__left-button ${iconSize} ${this.mode} ${this.isLeftPressed ? 'pressed' : ''}`, title: this.leftTitle || this.label, type: "button", disabled: this.isButtonDisabled, "aria-disabled": this.isButtonAriaDisabled, onClick: () => this.handleButtonClick(), ref: el => (this.leftButton = el) }, hasIconButton && this.renderLeftIcon(iconSize), hasLabelButton && this.renderLabel(), !this.suppressAnimation && this.renderRipples(this.leftRipples)));
+    return (h("ez-tooltip", { message: this.leftTitle || this.label }, h("button", { class: `ez-split-button__left-button ${iconSize} ${this.mode} ${this.isLeftPressed ? 'pressed' : ''}`, type: "button", disabled: this.isButtonDisabled, "aria-disabled": this.isButtonAriaDisabled, onClick: () => this.handleButtonClick(), ref: el => (this.leftButton = el) }, hasIconButton && this.renderLeftIcon(iconSize), hasLabelButton && this.renderLabel(), !this.suppressAnimation && this.renderRipples(this.leftRipples))));
   }
   renderDivider() {
     return h("div", { class: `ez-split-button__divider ${this.mode} ez-split-button__divider--${this.size} ${this.isButtonDisabled ? 'disabled' : ''}`, "aria-disabled": this.isButtonAriaDisabled });
@@ -312,7 +311,7 @@ export class EzSplitButton {
     return (h("div", { class: "dropdown" }, this.renderRightButton(iconSize), this.renderDropdownContent()));
   }
   renderRightButton(iconSize) {
-    return (h("button", { class: `ez-split-button__right-button ${iconSize} ez-split-button__right-button--${iconSize} ${this.isRightPressed ? 'pressed' : ''}`, title: this.rightTitle || this.i18n("ez-split-button.moreOptions"), type: "button", disabled: this.isButtonDisabled, "aria-disabled": this.isButtonAriaDisabled, onClick: () => this.toggleDropdown(), ref: el => (this.rightButton = el) }, this.renderRightIcon(iconSize), !this.suppressAnimation && this.renderRipples(this.rightRipples)));
+    return (h("ez-tooltip", { message: this.rightTitle || this.i18n("ez-split-button.moreOptions") }, h("button", { class: `ez-split-button__right-button ${iconSize} ez-split-button__right-button--${iconSize} ${this.isRightPressed ? 'pressed' : ''}`, type: "button", disabled: this.isButtonDisabled, "aria-disabled": this.isButtonAriaDisabled, onClick: () => this.toggleDropdown(), ref: el => (this.rightButton = el) }, this.renderRightIcon(iconSize), !this.suppressAnimation && this.renderRipples(this.rightRipples))));
   }
   renderDropdownContent() {
     return (h("div", { class: `dropdown-content dropdown-content--${this.size}`, ref: (ref) => (this.dropdownParent = ref) }, this.show && this.renderDropdown()));
@@ -835,6 +834,12 @@ export class EzSplitButton {
         "target": undefined,
         "capture": false,
         "passive": true
+      }, {
+        "name": "ezCloseSplitButtonDropdown",
+        "method": "onItemActionExecuted",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }, {
         "name": "click",
         "method": "clickListener",

package/dist/collection/components/ez-split-panel/ez-split-panel.css

@@ -21,3 +21,32 @@
   margin: 0;
   border: 0;
 }
+
+/* Alça visível do divisor (opt-in via prop showGutter). */
+.ez-split-panel--gutter .ez-split-gutter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ez-split-panel--gutter .ez-split-gutter::before {
+  content: "";
+  border-radius: var(--border--radius-2, 2px);
+  background: var(--color--strokes, #E1E2E5);
+  transition: background 0.15s ease, width 0.15s ease, height 0.15s ease;
+}
+.ez-split-panel--gutter .ez-split-gutter__row::before {
+  width: var(--space--48, 48px);
+  height: var(--space--4, 4px);
+}
+.ez-split-panel--gutter .ez-split-gutter__column::before {
+  width: var(--space--4, 4px);
+  height: var(--space--48, 48px);
+}
+.ez-split-panel--gutter .ez-split-gutter__row:hover::before {
+  width: 72px;
+  background: var(--color--ocean-green-600, #008561);
+}
+.ez-split-panel--gutter .ez-split-gutter__column:hover::before {
+  height: 72px;
+  background: var(--color--ocean-green-600, #008561);
+}

package/dist/collection/components/ez-split-panel/ez-split-panel.js

@@ -8,6 +8,7 @@ export class SplitPanel {
     this.direction = 'column';
     this.anchorToExpand = false;
     this.structural = false;
+    this.showGutter = false;
   }
   rebuildLayout() {
     Array.from(this._element.querySelectorAll(".ez-split-gutter")).reverse().forEach(el => {
@@ -135,6 +136,7 @@ export class SplitPanel {
   }
   getGridTemplate() {
     let template = '';
+    const gutterSize = this.showGutter ? '12px' : '5px';
     const freeSpacePercentage = this.calcFreeSpacePercentage();
     this._items.forEach((col, index) => {
       let size = col.size || '1fr';
@@ -146,10 +148,10 @@ export class SplitPanel {
         return;
       }
       if (index === 0) {
-        template += `${size} 5px`;
+        template += `${size} ${gutterSize}`;
         return;
       }
-      template += ` ${size} 5px`;
+      template += ` ${size} ${gutterSize}`;
     });
     return template;
   }
@@ -198,7 +200,7 @@ export class SplitPanel {
     });
   }
   render() {
-    return h(Host, { class: `${this.structural ? 'structural__panel' : 'content__panel'}`, style: this.getElementStyle() });
+    return h(Host, { class: `${this.structural ? 'structural__panel' : 'content__panel'}${this.showGutter ? ' ez-split-panel--gutter' : ''}`, style: this.getElementStyle() });
   }
   static get is() { return "ez-split-panel"; }
   static get originalStyleUrls() {
@@ -266,6 +268,24 @@ export class SplitPanel {
         "attribute": "structural",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "showGutter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Exibe uma al\u00E7a vis\u00EDvel no divisor entre os itens (indicador de arraste)."
+        },
+        "attribute": "show-gutter",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/ez-split-panel/structure/item/ez-split-item.css

@@ -69,3 +69,12 @@ h3.ez-margin--small {
   width: calc(100% - 2*(var(--space--extra-small)));
   height: calc(100% - 2*(var(--space--extra-small)));
 }
+
+/* Modo contorno: só borda, sem fundo/sombra. Especificidade > .structural__item
+   para vencer o border:0 quando os dois estão ativos. */
+.box_split-item.outline__item {
+  background: none;
+  box-shadow: none;
+  border: 1px solid var(--color--strokes, #E1E2E5);
+  border-radius: var(--border--radius-medium, 12px);
+}

package/dist/collection/components/ez-split-panel/structure/item/ez-split-item.js

@@ -8,6 +8,7 @@ export class SplitItem {
     this._expanded = false;
     this.size = undefined;
     this.structural = false;
+    this.outline = false;
   }
   /**
    * Alterna a visibilidade do painel.
@@ -24,7 +25,7 @@ export class SplitItem {
     CSSVarsUtils.applyVarsGrid(this._element, this._slot.children[0]);
   }
   render() {
-    return (h(Host, { class: `box_split-item ${this._expanded ? 'expanded__item' : ''} ${this.structural ? 'structural__item' : 'content__item'}`, ref: el => (this._element = el) }, h("div", { class: "ez-split-item--header" }, h("slot", { name: "leftButtons" }), h("div", { class: "ez-split-item--header-title" }, this.label && (h("h3", { class: "ez-text ez-text--primary ez-title ez-title--medium ez-margin--small", title: this.label }, this.label))), h("div", { class: "ez-split-item--header-buttons" }, h("slot", { name: "rightButtons" }), this.enableExpand && (h("ez-button", { ref: el => this.expandButtonRef = el, size: "small", mode: "icon", iconName: "expand", class: 'ez-button--tertiary', onClick: () => this.toggleExpandItem(), title: this._expanded ? this.i18n('app.collapse') : this.i18n('app.expand') })))), h("div", { class: "ez-split-item--content grid_height-0", ref: el => (this._slot = el) }, h("slot", null))));
+    return (h(Host, { class: `box_split-item ${this._expanded ? 'expanded__item' : ''} ${this.structural ? 'structural__item' : 'content__item'}${this.outline ? ' outline__item' : ''}`, ref: el => (this._element = el) }, h("div", { class: "ez-split-item--header" }, h("slot", { name: "leftButtons" }), h("div", { class: "ez-split-item--header-title" }, this.label && (h("h3", { class: "ez-text ez-text--primary ez-title ez-title--medium ez-margin--small", title: this.label }, this.label))), h("div", { class: "ez-split-item--header-buttons" }, h("slot", { name: "rightButtons" }), this.enableExpand && (h("ez-button", { ref: el => this.expandButtonRef = el, size: "small", mode: "icon", iconName: "expand", class: 'ez-button--tertiary', onClick: () => this.toggleExpandItem(), title: this._expanded ? this.i18n('app.collapse') : this.i18n('app.expand') })))), h("div", { class: "ez-split-item--content grid_height-0", ref: el => (this._slot = el) }, h("slot", null))));
   }
   static get is() { return "ez-split-item"; }
   static get originalStyleUrls() {
@@ -111,6 +112,24 @@ export class SplitItem {
         "attribute": "structural",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "outline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Exibe o item apenas com contorno (borda), sem preenchimento nem sombra."
+        },
+        "attribute": "outline",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -86,6 +86,34 @@
   border: 1px dashed var(--color--primary, #000000c5);
 }
 
+.is-disabled,
+.tab:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  color: var(--text--disabled, #a0a7b4);
+  pointer-events: none;
+}
+
+.is-disabled ez-icon {
+  --ez-icon--color: var(--text--disabled, #a0a7b4);
+}
+
+.is-reorderable:not(.is-disabled) {
+  cursor: grab;
+}
+
+.is-reorderable:not(.is-disabled):active {
+  cursor: grabbing;
+}
+
+.is-dragging {
+  opacity: 0.4;
+}
+
+.is-drag-over {
+  box-shadow: inset 2px 0 0 0 var(--color--primary, #008561);
+}
+
 .tab-label {
   overflow: hidden;
   white-space: nowrap;
@@ -99,7 +127,7 @@
   display: flex;
   box-sizing: border-box;
   padding: 0px;
-  top: 0px;
+  top: -2px;
   right: 0px;
   width: 16px;
   height: 100%;
@@ -150,4 +178,8 @@
 
 .right-icon {
   padding-left: var(--space--small);
+}
+
+.right-icon--error {
+  --ez-icon--color: var(--color--red-600, #BD0025);
 }