@sankhyalabs/ezui 1.1.8 → 1.1.9

package/dist/cjs/ez-time-input.cjs.entry.js

@@ -7,174 +7,174 @@ const RequestMetadata = require('./RequestMetadata-2cd01e8a.js');
 
 const ezTimeInputCss = ":host{--eztime--height:42px;--eztime--width:100%;--eztime__icon--width:48px;--eztime--border-radius:var(--border--radius-medium, 12px);--eztime--font-size:var(--text--medium, 14px);--eztime--font-family:var(--font-pattern, Arial);--eztime--font-weight:var(--text-weight--large, 500);--eztime--space--medium:var(--space--medium, 6px);--eztime__input--background-color:var(--background--medium, #e0e0e0);--eztime__input--border:var(--border--medium, 2px solid);--eztime__input--border-color:var(--eztime__input--background-color);--eztime__input--focus--border-color:var(--color--primary, #008561);--eztime__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--eztime__input--disabled--color:var(--text--disable, #AFB6C0);--eztime__input--error--border-color:#CC2936;--eztime__label--color:var(--title--primary, #919191);--eztime__message_box--font-size:var(--text--small, 12px);--eztime__message_box--info--color:var(--color--success, #22085d);--eztime__message_box--error--color:var(--color--error, #FF0000);display:flex;flex-wrap:wrap;position:relative;width:var(--eztime--width)}.invisible{visibility:hidden}input{width:100%;box-sizing:border-box;padding:var(--space--medium, 6px);font-weight:var(--text-weight--large, 600);height:var(--eztime--height);border-radius:var(--eztime--border-radius);font-family:var(--eztime--font-family);font-size:var(--eztime--font-size);border:var(--eztime__input--border);border-color:var(--eztime__input--border-color);background-color:var(--eztime__input--background-color)}input:disabled{background-color:var(--eztime__input--disabled--background-color);color:var(--eztime__input--disabled--color)}input:focus{outline:none;border-color:var(--eztime__input--focus--border-color)}input.icon--left{padding-left:var(--eztime__icon--width)}input.icon--right{padding-right:var(--eztime__icon--width)}input::placeholder{color:var(--eztime__placeholder--color);font-weight:var(--eztime__placeholder--font-weight)}input:disabled::placeholder{color:var(--eztime__placeholder--disabled--color)}input.hasError{color:inherit;border-color:var(--eztime__input--error--border-color)}input.text--right{text-align:right}.message-box{min-height:16px;min-width:100%;margin-top:2px;line-height:12px;font-family:var(--eztime--font-family);font-size:var(--eztime__message_box--font-size);color:var(--eztime__message_box--info--color)}.hasError{color:var(--eztime__message_box--error--color)}.input__label{font-size:var(--eztime--font-size);font-weight:var(--eztime--font-weight);position:absolute;color:var(it__label--color);top:var(--eztime--space--medium);font-family:var(--eztime--font-family);-webkit-transition:font-size .3s, top .3s;transition:font-size .3s, top .3s;z-index:var(--visible);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;left:var(--eztime__icon--width);width:calc(100% - 10px - var(--eztime__icon--width))}.input__label--floated{font-family:var(--eztime--font-family);font-size:var(--text--extra-small);top:var(--space--small);color:var(--text--primary)}.input__label--left{left:var(--eztime__icon--width);width:calc(100% - 10px - var(--eztime__icon--width))}.input__label--right{padding-right:var(--eztime__icon--width);width:calc(100% - 10px - var(--eztime__icon--width))}.input--with--label{padding-bottom:0}";
 
-const EzTimeInput = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Deixa o campo disponível ou não para digitação.
-     */
-    this.enabled = true;
-    /**
-    * Define se o componente irá ou não considerar os segundos
-    */
-    this.showSeconds = false;
-  }
-  showError() {
-    const hasError = typeof this.errormessage === 'string' && this.errormessage !== '';
-    if (hasError) {
-      this._inputElem.classList.add('hasError');
-      this._messageBoxElem.classList.add('hasError');
-    }
-    else {
-      this._inputElem.classList.remove('hasError');
-      this._messageBoxElem.classList.remove('hasError');
-    }
-  }
-  prepareMask() {
-    if (this.showSeconds) {
-      if (this._maskFormatter == undefined) {
-        this._maskFormatter = new RequestMetadata.MaskFormatter("##:##:##");
-      }
-      else {
-        this._maskFormatter.mask = "##:##:##";
-      }
-    }
-    else {
-      if (this._maskFormatter == undefined) {
-        this._maskFormatter = new RequestMetadata.MaskFormatter("##:##");
-      }
-      else {
-        this._maskFormatter.mask = "##:##";
-      }
-    }
-  }
-  adjustFloatingLabel() {
-    if (this.label) {
-      if (!this._inputElem.classList.contains("input--with--label")) {
-        this._inputElem.classList.add("input--with--label");
-      }
-      if (this.viewValue && this.viewValue.toString().length > 0) {
-        if (!this._labelElem.classList.contains("input__label--floated")) {
-          this._labelElem.classList.add("input__label--floated");
-        }
-      }
-      else {
-        if (this._labelElem.classList.contains("input__label--floated")) {
-          this._labelElem.classList.remove("input__label--floated");
-        }
-      }
-    }
-  }
-  onValueChanged() {
-    if (this.value === NaN) {
-      this.value = undefined;
-      this.handleFocusout();
-    }
-  }
-  //---------------------------------------------
-  // Public methods
-  //---------------------------------------------
-  /**
-   * Faz o foco no componente de input
-   */
-  async setFocus() {
-    this._inputElem.focus();
-  }
-  /**
-   * Remove o foco no componente de input
-   */
-  async setBlur() {
-    this._inputElem.blur();
-  }
-  //---------------------------------------------
-  // Test Methods
-  //---------------------------------------------
-  setInputElemnt(input) {
-    this._iconElement = input;
-  }
-  //---------------------------------------------
-  // Event handlers
-  //---------------------------------------------
-  handleFocusout() {
-    this.errormessage = "";
-    this.prepareValue(this.viewValue);
-    if (!RequestMetadata.TimeFormatter.validateTime(this.viewValue, this.showSeconds)) {
-      this.clearField();
-      this.errormessage = "Favor inserir um horário válido.";
-    }
-    this.adjustFloatingLabel();
-  }
-  prepareValue(value) {
-    try {
-      this.viewValue = RequestMetadata.TimeFormatter.prepareValue(value, this.showSeconds);
-    }
-    catch (e) {
-      this.clearField();
-      this.errormessage = e.message;
-    }
-  }
-  clearField() {
-    this.viewValue = this.value = undefined;
-  }
-  handleChange() {
-    this.viewValue = this._inputElem.value;
-    this.value = RequestMetadata.NumberUtils.stringToNumber(this.viewValue.replace(/\D/g, ""));
-  }
-  adjustIconStyle() {
-    if (this._iconElement) {
-      this._iconElement.style.position = "absolute";
-      this._iconElement.style.display = "flex";
-      this._iconElement.style.alignItems = "center";
-      this._iconElement.style.justifyContent = "center";
-      this._iconElement.style.overflow = "hidden";
-      this._iconElement.style.top = "0px";
-      this._iconElement.style.width = "var(--eztime__icon--width)";
-      this._iconElement.style.height = "var(--eztime--height)";
-      this._iconElement.style.left = "0px";
-      this._iconElement.style.borderRadius = "var(--eztime--border-radius) 0 0 var(--eztime--border-radius)";
-      this._inputElem.classList.add('icon--left');
-      if (this._labelElem) {
-        this._labelElem.classList.add("input__label--left");
-      }
-    }
-    this.showError();
-  }
-  doFocus() {
-    if (this.label && this._labelElem) {
-      if (!this._labelElem.classList.contains("input__label--floated")) {
-        this._labelElem.classList.add("input__label--floated");
-      }
-    }
-  }
-  //---------------------------------------------
-  // Lifecycle web component
-  //---------------------------------------------
-  componentDidLoad() {
-    this.onValueChanged();
-    this.adjustIconStyle();
-    this.adjustFloatingLabel();
-    this.showError();
-  }
-  componentWillLoad() {
-    this.prepareMask();
-    if (this.value) {
-      this.prepareValue(this.value.toString());
-    }
-    else if (this.viewValue) {
-      this.prepareValue(this.viewValue);
-    }
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("ez-icon", { ref: (el) => this._iconElement = el, href: "/themes/default/images/icons/actions-sprite.svg#timer-outline" }), this.label ?
-      index.h("label", { onClick: () => this._inputElem.focus(), class: this.value ? "input__label input__label--floated" : "input__label", ref: (el) => this._labelElem = el, title: this.label }, this.label)
-      : null, index.h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.viewValue, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), index.h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el }, this.errormessage)));
-  }
-  static get watchers() { return {
-    "errormessage": ["showError"],
-    "showSeconds": ["prepareMask"],
-    "value": ["onValueChanged"]
-  }; }
-};
+const EzTimeInput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Deixa o campo disponível ou não para digitação.
+     */
+    this.enabled = true;
+    /**
+    * Define se o componente irá ou não considerar os segundos
+    */
+    this.showSeconds = false;
+  }
+  showError() {
+    const hasError = typeof this.errormessage === 'string' && this.errormessage !== '';
+    if (hasError) {
+      this._inputElem.classList.add('hasError');
+      this._messageBoxElem.classList.add('hasError');
+    }
+    else {
+      this._inputElem.classList.remove('hasError');
+      this._messageBoxElem.classList.remove('hasError');
+    }
+  }
+  prepareMask() {
+    if (this.showSeconds) {
+      if (this._maskFormatter == undefined) {
+        this._maskFormatter = new RequestMetadata.MaskFormatter("##:##:##");
+      }
+      else {
+        this._maskFormatter.mask = "##:##:##";
+      }
+    }
+    else {
+      if (this._maskFormatter == undefined) {
+        this._maskFormatter = new RequestMetadata.MaskFormatter("##:##");
+      }
+      else {
+        this._maskFormatter.mask = "##:##";
+      }
+    }
+  }
+  adjustFloatingLabel() {
+    if (this.label) {
+      if (!this._inputElem.classList.contains("input--with--label")) {
+        this._inputElem.classList.add("input--with--label");
+      }
+      if (this.viewValue && this.viewValue.toString().length > 0) {
+        if (!this._labelElem.classList.contains("input__label--floated")) {
+          this._labelElem.classList.add("input__label--floated");
+        }
+      }
+      else {
+        if (this._labelElem.classList.contains("input__label--floated")) {
+          this._labelElem.classList.remove("input__label--floated");
+        }
+      }
+    }
+  }
+  onValueChanged() {
+    if (this.value === NaN) {
+      this.value = undefined;
+      this.handleFocusout();
+    }
+  }
+  //---------------------------------------------
+  // Public methods
+  //---------------------------------------------
+  /**
+   * Faz o foco no componente de input
+   */
+  async setFocus() {
+    this._inputElem.focus();
+  }
+  /**
+   * Remove o foco no componente de input
+   */
+  async setBlur() {
+    this._inputElem.blur();
+  }
+  //---------------------------------------------
+  // Test Methods
+  //---------------------------------------------
+  setInputElemnt(input) {
+    this._iconElement = input;
+  }
+  //---------------------------------------------
+  // Event handlers
+  //---------------------------------------------
+  handleFocusout() {
+    this.errormessage = "";
+    this.prepareValue(this.viewValue);
+    if (!RequestMetadata.TimeFormatter.validateTime(this.viewValue, this.showSeconds)) {
+      this.clearField();
+      this.errormessage = "Favor inserir um horário válido.";
+    }
+    this.adjustFloatingLabel();
+  }
+  prepareValue(value) {
+    try {
+      this.viewValue = RequestMetadata.TimeFormatter.prepareValue(value, this.showSeconds);
+    }
+    catch (e) {
+      this.clearField();
+      this.errormessage = e.message;
+    }
+  }
+  clearField() {
+    this.viewValue = this.value = undefined;
+  }
+  handleChange() {
+    this.viewValue = this._inputElem.value;
+    this.value = RequestMetadata.NumberUtils.stringToNumber(this.viewValue.replace(/\D/g, ""));
+  }
+  adjustIconStyle() {
+    if (this._iconElement) {
+      this._iconElement.style.position = "absolute";
+      this._iconElement.style.display = "flex";
+      this._iconElement.style.alignItems = "center";
+      this._iconElement.style.justifyContent = "center";
+      this._iconElement.style.overflow = "hidden";
+      this._iconElement.style.top = "0px";
+      this._iconElement.style.width = "var(--eztime__icon--width)";
+      this._iconElement.style.height = "var(--eztime--height)";
+      this._iconElement.style.left = "0px";
+      this._iconElement.style.borderRadius = "var(--eztime--border-radius) 0 0 var(--eztime--border-radius)";
+      this._inputElem.classList.add('icon--left');
+      if (this._labelElem) {
+        this._labelElem.classList.add("input__label--left");
+      }
+    }
+    this.showError();
+  }
+  doFocus() {
+    if (this.label && this._labelElem) {
+      if (!this._labelElem.classList.contains("input__label--floated")) {
+        this._labelElem.classList.add("input__label--floated");
+      }
+    }
+  }
+  //---------------------------------------------
+  // Lifecycle web component
+  //---------------------------------------------
+  componentDidLoad() {
+    this.onValueChanged();
+    this.adjustIconStyle();
+    this.adjustFloatingLabel();
+    this.showError();
+  }
+  componentWillLoad() {
+    this.prepareMask();
+    if (this.value) {
+      this.prepareValue(this.value.toString());
+    }
+    else if (this.viewValue) {
+      this.prepareValue(this.viewValue);
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("ez-icon", { ref: (el) => this._iconElement = el, href: "/themes/default/images/icons/actions-sprite.svg#timer-outline" }), this.label ?
+      index.h("label", { onClick: () => this._inputElem.focus(), class: this.value ? "input__label input__label--floated" : "input__label", ref: (el) => this._labelElem = el, title: this.label }, this.label)
+      : null, index.h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.viewValue, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), index.h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el }, this.errormessage)));
+  }
+  static get watchers() { return {
+    "errormessage": ["showError"],
+    "showSeconds": ["prepareMask"],
+    "value": ["onValueChanged"]
+  }; }
+};
 EzTimeInput.style = ezTimeInputCss;
 
 exports.ez_time_input = EzTimeInput;

package/dist/cjs/form-metadata.cjs.entry.js

@@ -3,72 +3,72 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9403fe8f.js');
-const DataUnit = require('./DataUnit-28b290cb.js');
+const DataUnit = require('./DataUnit-9a4a35ca.js');
 
-const FormMetadata = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  buildField(element) {
-    const label = element.textContent;
-    let name = element.getAttribute("name") || label;
-    let userInterface = element.getAttribute("ui") || "SHORTTEXT";
-    const defaultValue = element.getAttribute("defaultValue");
-    const required = element.getAttribute("required") === "true";
-    const readOnly = element.getAttribute("readonly") === "true";
-    return { name, userInterface, label, defaultValue, required, readOnly };
-  }
-  buildFieldSet(element) {
-    const label = element.getAttribute("label");
-    const fields = Array.from(element.getElementsByTagName('FIELD')).map(f => this.buildField(f));
-    return { label, fields };
-  }
-  fromElements(elements, label, name, dataUnit, many, autoLoad) {
-    const form = {
-      name: name || label,
-      label,
-      autoLoad
-    };
-    if (dataUnit) {
-      form.dataUnit = new DataUnit.DataUnit(dataUnit, many ? 'N' : '1');
-    }
-    Array.from(elements).forEach(child => {
-      const tagName = child.tagName.toUpperCase();
-      switch (tagName) {
-        case 'FIELD':
-          if (!form.items) {
-            form.items = [];
-          }
-          form.items.push(this.buildField(child));
-          break;
-        case 'FIELD-SET':
-          if (!form.items) {
-            form.items = [];
-          }
-          form.items.push(this.buildFieldSet(child));
-          break;
-        case 'SUB-FORM':
-          if (!form.subForms) {
-            form.subForms = [];
-          }
-          const label = child.getAttribute("label") || "Subform " + (form.subForms.length + 1);
-          const name = child.getAttribute("name") || label;
-          form.subForms.push(this.fromElements(child.children, label, name, child.getAttribute("dataunit"), child.hasAttribute("many"), child.getAttribute("autoload") === "true"));
-          break;
-      }
-    });
-    return form;
-  }
-  componentWillLoad() {
-    if (!this.dataunit) {
-      this.dataunit = "dataunit_" + (this.name || this.label || new Date().getTime());
-    }
-    this.metadata = this.fromElements(this._host.children, this.label, this.name, this.dataunit, this.many, this.autoload);
-  }
-  render() {
-    return index.h(index.Host, null);
-  }
-  get _host() { return index.getElement(this); }
+const FormMetadata = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  buildField(element) {
+    const label = element.textContent;
+    let name = element.getAttribute("name") || label;
+    let userInterface = element.getAttribute("ui") || "SHORTTEXT";
+    const defaultValue = element.getAttribute("defaultValue");
+    const required = element.getAttribute("required") === "true";
+    const readOnly = element.getAttribute("readonly") === "true";
+    return { name, userInterface, label, defaultValue, required, readOnly };
+  }
+  buildFieldSet(element) {
+    const label = element.getAttribute("label");
+    const fields = Array.from(element.getElementsByTagName('FIELD')).map(f => this.buildField(f));
+    return { label, fields };
+  }
+  fromElements(elements, label, name, dataUnit, many, autoLoad) {
+    const form = {
+      name: name || label,
+      label,
+      autoLoad
+    };
+    if (dataUnit) {
+      form.dataUnit = new DataUnit.DataUnit(dataUnit, many ? 'N' : '1');
+    }
+    Array.from(elements).forEach(child => {
+      const tagName = child.tagName.toUpperCase();
+      switch (tagName) {
+        case 'FIELD':
+          if (!form.items) {
+            form.items = [];
+          }
+          form.items.push(this.buildField(child));
+          break;
+        case 'FIELD-SET':
+          if (!form.items) {
+            form.items = [];
+          }
+          form.items.push(this.buildFieldSet(child));
+          break;
+        case 'SUB-FORM':
+          if (!form.subForms) {
+            form.subForms = [];
+          }
+          const label = child.getAttribute("label") || "Subform " + (form.subForms.length + 1);
+          const name = child.getAttribute("name") || label;
+          form.subForms.push(this.fromElements(child.children, label, name, child.getAttribute("dataunit"), child.hasAttribute("many"), child.getAttribute("autoload") === "true"));
+          break;
+      }
+    });
+    return form;
+  }
+  componentWillLoad() {
+    if (!this.dataunit) {
+      this.dataunit = "dataunit_" + (this.name || this.label || new Date().getTime());
+    }
+    this.metadata = this.fromElements(this._host.children, this.label, this.name, this.dataunit, this.many, this.autoload);
+  }
+  render() {
+    return index.h(index.Host, null);
+  }
+  get _host() { return index.getElement(this); }
 };
 
 exports.form_metadata = FormMetadata;

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

@@ -1,82 +1,82 @@
-:host {
-  /* dimensions */
-  --ac--height: 36px;
-  --ac--width: 100%;
-  --ac__icon--width: 48px;
-  /* general */
-  --ac--border-radius: var(--border--radius-large, 24px);
-  --ac--font-size: var(--text--medium, 14px);
-  --ac--font-family: var(--font-pattern, Arial);
-  --ac--font-weight: var(--text-weight--large, 500);
-  --ac--space--medium: var(--space--medium, 6px);
-  --ac__border: 1px solid;
-  --ac__border-color-strokes: var(--color--strokes, #DCE0E8);
-  /* label */
-  --ac__label--title--primary: var(--title--primary, #919191);
-  --ac__label--color-primary: var(--color--primary, #008561);
-  --ac__label-color--disable-secondary: var(--color--disable-secondary, #F2F5F8);
-  --ac__label--background-color: #0085610F;
-  --ac__label__default--background-color--hover: var(--color--primary-200, #f2faf8);
-  --ac__label__default--border-color--hover: var(--color--primary-600, #007a5a);
-  --ac__label--text--disabled: var(--text--disable, #AFB6C0);
-  --ac__label--text--primary: var(--text--primary, #626e82);
-  /* message box */
-  --ac__message_box--font-size: var(--text--small, 12px);
-  --ac__message_box--info--color: var(--color--success, #22085d);
-  --ac__message_box--error--color: var(--color--error, #FF0000);
-  /***************
-     host style  
-  ***************/
-  /*public*/
-  width: 100%;
-}
-
-.padding-right--small {
-  padding-right: var(--ac--space--medium);
-}
-
-.padding-left--small {
-  padding-left: var(--ac--space--medium);
-}
-
-.label__container {
-  /*private*/
-  width: fit-content;
-  display: flex;
-  flex-wrap: wrap;
-  position: relative;
-  align-items: center;
-  align-self: center;
-  color: var(--ac__label--title--primary);
-  fill: var(--ac__label--title--primary);
-  border: var(--ac__border);
-  border-radius: var(--ac--border-radius);
-  border-color: var( --ac__border-color-strokes);
-  padding-right: var(--space--large, 12px);
-  padding-left: var(--space--large, 12px);
-  cursor: pointer;
-}
-
-.label__container:hover {
-  border-color:  var(--ac__label__default--border-color--hover);
-  background-color: var(--ac__label__default--background-color--hover);
-}
-
-.label__container--active:hover {
-  border-color: var(--ac__label__active--background-color--hover);
-  background-color: var(--ac__label__active--background-color--hover);
-}
-
-label {
-  /*private*/
-  display: flex;
-  align-items: center;
-  width: calc(100% - var(--ac__icon--width));
-  width: fit-content;
-  font-weight: var(--text-weight--large, 600);
-  cursor: pointer;
-  /*public*/
-  height: var(--ac--height);
-  font-family: var(--ac--font-family);
-  font-size: var(--ac--font-size);
-}
+:host {
+  /* dimensions */
+  --ac--height: 36px;
+  --ac--width: 100%;
+  --ac__icon--width: 48px;
+  /* general */
+  --ac--border-radius: var(--border--radius-large, 24px);
+  --ac--font-size: var(--text--medium, 14px);
+  --ac--font-family: var(--font-pattern, Arial);
+  --ac--font-weight: var(--text-weight--large, 500);
+  --ac--space--medium: var(--space--medium, 6px);
+  --ac__border: 1px solid;
+  --ac__border-color-strokes: var(--color--strokes, #DCE0E8);
+  /* label */
+  --ac__label--title--primary: var(--title--primary, #919191);
+  --ac__label--color-primary: var(--color--primary, #008561);
+  --ac__label-color--disable-secondary: var(--color--disable-secondary, #F2F5F8);
+  --ac__label--background-color: #0085610F;
+  --ac__label__default--background-color--hover: var(--color--primary-200, #f2faf8);
+  --ac__label__default--border-color--hover: var(--color--primary-600, #007a5a);
+  --ac__label--text--disabled: var(--text--disable, #AFB6C0);
+  --ac__label--text--primary: var(--text--primary, #626e82);
+  /* message box */
+  --ac__message_box--font-size: var(--text--small, 12px);
+  --ac__message_box--info--color: var(--color--success, #22085d);
+  --ac__message_box--error--color: var(--color--error, #FF0000);
+  /***************
+     host style  
+  ***************/
+  /*public*/
+  width: 100%;
+}
+
+.padding-right--small {
+  padding-right: var(--ac--space--medium);
+}
+
+.padding-left--small {
+  padding-left: var(--ac--space--medium);
+}
+
+.label__container {
+  /*private*/
+  width: fit-content;
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  align-items: center;
+  align-self: center;
+  color: var(--ac__label--title--primary);
+  fill: var(--ac__label--title--primary);
+  border: var(--ac__border);
+  border-radius: var(--ac--border-radius);
+  border-color: var( --ac__border-color-strokes);
+  padding-right: var(--space--large, 12px);
+  padding-left: var(--space--large, 12px);
+  cursor: pointer;
+}
+
+.label__container:hover {
+  border-color:  var(--ac__label__default--border-color--hover);
+  background-color: var(--ac__label__default--background-color--hover);
+}
+
+.label__container--active:hover {
+  border-color: var(--ac__label__active--background-color--hover);
+  background-color: var(--ac__label__active--background-color--hover);
+}
+
+label {
+  /*private*/
+  display: flex;
+  align-items: center;
+  width: calc(100% - var(--ac__icon--width));
+  width: fit-content;
+  font-weight: var(--text-weight--large, 600);
+  cursor: pointer;
+  /*public*/
+  height: var(--ac--height);
+  font-family: var(--ac--font-family);
+  font-size: var(--ac--font-size);
+}