@zanichelli/albe-web-components 15.1.1 → 15.1.3

package/dist/collection/components/z-input/styles.css

@@ -0,0 +1,409 @@
+:host {
+  display: inline-block;
+  width: inherit;
+}
+
+input::-ms-clear,
+input::-ms-reveal {
+  display: none;
+}
+
+/* GENERAL */
+:host input::-ms-clear,
+:host input::-ms-reveal {
+  display: none;
+}
+
+input,
+textarea,
+.textarea-wrapper {
+  box-sizing: border-box;
+  border: var(--border-size-small) solid var(--gray700);
+  background: var(--color-input-field01);
+  border-radius: var(--border-radius-small);
+  color: var(--gray900);
+  fill: var(--gray900);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-3);
+  font-weight: var(--font-rg);
+  outline: none;
+}
+
+:host([size="small"]) input,
+:host([size="small"]) textarea,
+:host([size="small"]) .textarea-wrapper,
+:host([size="x-small"]) input,
+:host([size="x-small"]) textarea,
+:host([size="x-small"]) .textarea-wrapper {
+  font-size: var(--font-size-2);
+}
+
+:host.cursor-select input {
+  cursor: pointer;
+}
+
+/* FOCUS */
+:host:not(.active-select) input:focus:focus-visible,
+:host:not([readonly="true"]) .textarea-wrapper:focus-within {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+input:focus:focus-visible,
+textarea:focus:focus-visible {
+  color: var(--color-input-field02);
+}
+
+:host.active-select input {
+  border: var(--border-size-small) solid var(--color-primary01);
+}
+
+:host.cursor-select input:focus:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+:host input[readonly]:focus:focus-visible {
+  box-shadow: none;
+}
+
+/* FILLED */
+.filled {
+  border-color: var(--color-surface05);
+}
+
+/* STATUSES (success, warning, error) */
+.input-success {
+  border-color: var(--color-success01);
+  background: var(--color-success-inverse);
+  fill: var(--color-success01);
+}
+
+.input-error {
+  border-color: var(--color-error01);
+  background: var(--color-error-inverse);
+  fill: var(--color-error01);
+}
+
+.input-warning {
+  border-color: var(--color-warning01);
+  background: var(--color-warning-inverse);
+  fill: var(--color-warning01);
+}
+
+/* HOVER */
+input:not([readonly]):hover,
+.textarea-wrapper:hover {
+  outline: var(--border-size-medium) solid var(--gray700);
+  outline-offset: -2px;
+}
+
+/* READONLY */
+:host:not(.active-select) input[readonly],
+.readonly {
+  border-color: var(--color-disabled01);
+  fill: var(--color-disabled01);
+  pointer-events: none;
+}
+
+/* DISABLED */
+:host([disabled]:not([disabled="false"])) input,
+:host([disabled]:not([disabled="false"])) .textarea-wrapper,
+:host([disabled]:not([disabled="false"])) z-icon {
+  border-color: var(--color-disabled01);
+  box-shadow: none;
+  color: var(--color-disabled03);
+  fill: var(--color-disabled01);
+  pointer-events: none;
+}
+
+:host([disabled]:not([disabled="false"])) input:hover {
+  border-width: var(--border-size-small);
+}
+
+/* PLACEHOLDER */
+input::placeholder,
+textarea::placeholder {
+  color: var(--color-text05);
+}
+
+::-webkit-textarea-placeholder {
+  color: var(--color-text05);
+}
+
+:-ms-textarea-placeholder {
+  color: var(--color-text05);
+}
+
+::placeholder {
+  color: var(--color-text05);
+}
+
+/* LABEL */
+label.input-label {
+  display: block;
+  padding-bottom: var(--space-unit);
+  color: var(--color-default-text);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-1);
+  font-weight: var(--font-sb);
+  text-align: left;
+  text-transform: uppercase;
+}
+
+:host([disabled]:not([disabled="false"])) label.input-label {
+  color: var(--color-disabled03);
+}
+
+.text-wrapper > div {
+  position: relative;
+  z-index: 1;
+  fill: var(--gray900);
+}
+
+.text-wrapper > div > input {
+  width: 100%;
+  height: calc(var(--space-unit) * 5.5);
+  box-sizing: border-box;
+  padding: 0 calc(var(--space-unit) * 1.5);
+  margin: 0;
+}
+
+:host([size="small"]) .text-wrapper > div > input {
+  height: calc(var(--space-unit) * 4.5);
+}
+
+:host([size="x-small"]) .text-wrapper > div > input {
+  height: calc(var(--space-unit) * 4);
+}
+
+.text-wrapper > div > input.has-icon,
+.text-wrapper > div > input.has-clear-icon {
+  padding-right: calc(var(--space-unit) * 5.25);
+}
+
+.text-wrapper > div > input.has-icon.has-clear-icon {
+  padding-right: calc(var(--space-unit) * 8);
+}
+
+.text-wrapper .icons-wrapper {
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  right: calc(var(--space-unit) * 1.5);
+  display: flex;
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.text-wrapper .icons-wrapper > button.icon-button {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  pointer-events: initial;
+}
+
+.text-wrapper .icons-wrapper > button.icon-button + button.icon-button {
+  margin-left: calc(var(--space-unit) * 0.5);
+}
+
+.text-wrapper .icons-wrapper > button.icon-button.hidden {
+  display: none;
+}
+
+.text-wrapper .icons-wrapper > button.icon-button.reset-icon,
+.text-wrapper .icons-wrapper > button.icon-button.toggle-password-icon {
+  cursor: pointer;
+}
+
+.text-wrapper .icons-wrapper > button.icon-button > z-icon {
+  --z-icon-width: 18px;
+  --z-icon-height: 18px;
+
+  display: block;
+}
+
+.text-wrapper .icons-wrapper > button.icon-button > z-icon.small,
+.text-wrapper .icons-wrapper > button.icon-button > z-icon.x-small {
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+}
+
+.text-wrapper .icons-wrapper > button.icon-button:focus {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none !important;
+}
+
+/* stylelint-disable property-no-vendor-prefix */
+.text-wrapper > div > input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px #fff inset;
+  -webkit-text-fill-color: currentcolor;
+}
+
+.textarea-wrapper {
+  padding: calc(var(--space-unit) * 1.5);
+
+  /* Firefox scrollbar */
+  scrollbar-color: var(--color-primary01) transparent;
+}
+
+textarea::-webkit-scrollbar {
+  width: 10px;
+  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
+  border-radius: var(--border-radius);
+}
+
+textarea::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+textarea::-webkit-scrollbar-thumb {
+  width: 10px;
+  background-color: var(--color-primary01);
+  border-radius: var(--border-radius);
+}
+
+textarea::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-hover-primary);
+}
+
+textarea {
+  width: 100%;
+  min-height: 132px;
+  padding: 0;
+  border: none;
+  margin: 0;
+  resize: none;
+}
+
+.radio-wrapper,
+.checkbox-wrapper {
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  color: var(--color-default-text);
+  fill: var(--color-primary01);
+  font-family: var(--font-family-sans);
+}
+
+.radio-wrapper:hover,
+.checkbox-wrapper:hover {
+  color: var(--color-hover-primary);
+  fill: currentcolor;
+}
+
+.radio-wrapper > input,
+.checkbox-wrapper > input {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.radio-wrapper .radio-label,
+.checkbox-wrapper .checkbox-label {
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: 1;
+  text-transform: inherit;
+}
+
+.radio-wrapper input:not(:disabled) + .radio-label,
+.checkbox-wrapper input:not(:disabled) + .checkbox-label {
+  cursor: pointer;
+}
+
+.radio-wrapper .radio-label z-icon,
+.checkbox-wrapper .checkbox-label z-icon {
+  cursor: pointer;
+  fill: inherit;
+}
+
+:host([size="small"]) .radio-wrapper .radio-label z-icon,
+:host([size="small"]) .checkbox-wrapper .checkbox-label z-icon {
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+}
+
+:host([size="small"]) .radio-wrapper .radio-label,
+:host([size="small"]) .checkbox-wrapper .checkbox-label {
+  font-size: var(--font-size-2);
+}
+
+:host([size="x-small"]) .radio-wrapper .radio-label z-icon,
+:host([size="x-small"]) .checkbox-wrapper .checkbox-label z-icon {
+  --z-icon-width: 14px;
+  --z-icon-height: 14px;
+}
+
+:host([size="x-small"]) .radio-wrapper .radio-label,
+:host([size="x-small"]) .checkbox-wrapper .checkbox-label {
+  font-size: var(--font-size-1);
+}
+
+.radio-wrapper .radio-label.after,
+.checkbox-wrapper .checkbox-label.after {
+  flex-direction: row;
+}
+
+.radio-wrapper .radio-label.before,
+.checkbox-wrapper .checkbox-label.before {
+  flex-direction: row-reverse;
+}
+
+.radio-wrapper .radio-label.after > span,
+.checkbox-wrapper .checkbox-label.after > span {
+  margin-left: var(--space-unit);
+}
+
+.radio-wrapper .radio-label.before > span,
+.checkbox-wrapper .checkbox-label.before > span {
+  margin-right: var(--space-unit);
+}
+
+:host([size="small"]) .radio-wrapper .radio-label.after > span,
+:host([size="small"]) .checkbox-wrapper .checkbox-label.after > span,
+:host([size="x-small"]) .radio-wrapper .radio-label.after > span,
+:host([size="x-small"]) .checkbox-wrapper .checkbox-label.after > span {
+  margin-left: calc(var(--space-unit) * 0.5);
+}
+
+:host([size="small"]) .radio-wrapper .radio-label.before > span,
+:host([size="small"]) .checkbox-wrapper .checkbox-label.before > span,
+:host([size="x-small"]) .radio-wrapper .radio-label.before > span,
+:host([size="x-small"]) .checkbox-wrapper .checkbox-label.before > span {
+  margin-right: calc(var(--space-unit) * 0.5);
+}
+
+/* focus */
+.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon {
+  border-radius: 50%;
+}
+
+.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {
+  border-radius: var(--border-radius-small);
+}
+
+.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon,
+.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+/* disabled */
+.radio-wrapper > input:disabled + .radio-label,
+.checkbox-wrapper > input:disabled + .checkbox-label {
+  color: var(--color-disabled03);
+}
+
+.radio-wrapper > input:disabled + .radio-label > z-icon,
+.checkbox-wrapper > input:disabled + .checkbox-label > z-icon {
+  cursor: default;
+  fill: var(--color-disabled01);
+}
+

package/dist/collection/components/z-modal/styles.css

@@ -1,9 +1,3 @@
-*:focus {
-  border-radius: 50%;
-  box-shadow: var(--shadow-focus-primary);
-  outline: none !important;
-}
-
 :host {
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
@@ -69,6 +63,12 @@
   cursor: pointer;
 }
 
+.modal-container > header button:focus-visible {
+  border-radius: 50%;
+  box-shadow: var(--shadow-focus-primary);
+  outline: none !important;
+}
+
 .modal-container > header z-icon {
   --z-icon-width: calc(var(--space-unit) * 2.25);
   --z-icon-height: calc(var(--space-unit) * 2.25);

package/dist/collection/components/z-searchbar/styles.css

@@ -14,11 +14,6 @@
   box-sizing: border-box;
 }
 
-*:focus {
-  box-shadow: var(--shadow-focus-primary);
-  outline: none !important;
-}
-
 .input-container {
   position: relative;
   display: flex;

package/dist/collection/components/z-tag/index.js

@@ -11,10 +11,9 @@ export class ZTag {
         this.expandable = undefined;
     }
     render() {
-        return (h(Host, { key: '0b2f0fda539ab5e9f07e93bd1eeab8eb098e3245', class: {
-                "body-5-sb": true,
-                "expandable": this.expandable && !!this.icon,
-            } }, this.icon && h("z-icon", { key: '1ce99af72a0ee664304ffc0a0fd401e98e043788', name: this.icon }), h("div", { key: 'fb9aee905ab56d5c086ee850eaf7f7cb8fa10dfe' }, h("slot", { key: '8f1d8bb919793b9570fb49a0761be534b6e454ce' }))));
+        return (h(Host, { key: '2b457c2a7462afa36499c0991a32436751b2b6d1', class: {
+                expandable: this.expandable && !!this.icon,
+            } }, this.icon && h("z-icon", { key: '3f6b461a15c9221c658221894f62895bdbd8e108', name: this.icon }), h("div", { key: '0bb11571e1f99587a62e9d345fc731bf795656e5' }, h("slot", { key: '46ccbc8282a3611e7a3188651bbe96df1aacb5b2' }))));
     }
     static get is() { return "z-tag"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-tag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-tag/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEvD;;;;;GAKG;AAOH,MAAM,OAAO,IAAI;;;;;IASf,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,YAAY,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;aAC7C;YAEA,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;YACzC;gBACE,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * Ztag component.\n * @slot - The text of the z-tag.\n * @cssprop --z-tag-text-color - text and icon color using tokens.\n * @cssprop --z-tag-bg - background color of the z-tag.\n */\n@Component({\n  tag: \"z-tag\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZTag {\n  /** [optional] Tag icon */\n  @Prop()\n  icon?: string;\n\n  /** [optional] Hide the text and show it on hover*/\n  @Prop()\n  expandable?: boolean;\n\n  render(): HTMLZTagElement {\n    return (\n      <Host\n        class={{\n          \"body-5-sb\": true,\n          \"expandable\": this.expandable && !!this.icon,\n        }}\n      >\n        {this.icon && <z-icon name={this.icon} />}\n        <div>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-tag/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEvD;;;;;GAKG;AAOH,MAAM,OAAO,IAAI;;;;;IASf,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;aAC3C;YAEA,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;YACzC;gBACE,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * Ztag component.\n * @slot - The text of the z-tag.\n * @cssprop --z-tag-text-color - text and icon color using tokens.\n * @cssprop --z-tag-bg - background color of the z-tag.\n */\n@Component({\n  tag: \"z-tag\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZTag {\n  /** [optional] Tag icon */\n  @Prop()\n  icon?: string;\n\n  /** [optional] Hide the text and show it on hover*/\n  @Prop()\n  expandable?: boolean;\n\n  render(): HTMLZTagElement {\n    return (\n      <Host\n        class={{\n          expandable: this.expandable && !!this.icon,\n        }}\n      >\n        {this.icon && <z-icon name={this.icon} />}\n        <div>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-tag/index.spec.js

@@ -4,17 +4,17 @@ describe("Suite test ZTag", () => {
     it("Test render z-tag empty", async () => {
         const page = await newSpecPage({
             components: [ZTag],
-            html: `<z-tag class="body-5-sb"></z-tag>`,
+            html: `<z-tag></z-tag>`,
         });
-        expect(page.root).toEqualHtml(`<z-tag class="body-5-sb"><div></div></z-tag>`);
+        expect(page.root).toEqualHtml(`<z-tag><div></div></z-tag>`);
     });
     it("Test render z-tag with icon", async () => {
         const page = await newSpecPage({
             components: [ZTag],
-            html: `<z-tag class="body-5-sb" icon="gear"></z-tag>`,
+            html: `<z-tag icon="gear"></z-tag>`,
         });
         expect(page.root).toEqualHtml(`
-      <z-tag class="body-5-sb" icon="gear">
+      <z-tag icon="gear">
         <z-icon name="gear"></z-icon>
         <div></div>
       </z-tag>`);
@@ -22,10 +22,10 @@ describe("Suite test ZTag", () => {
     it("Test render z-tag with text", async () => {
         const page = await newSpecPage({
             components: [ZTag],
-            html: `<z-tag class="body-5-sb">my custom element</z-tag>`,
+            html: `<z-tag>my custom element</z-tag>`,
         });
         expect(page.root).toEqualHtml(`
-      <z-tag class="body-5-sb">
+      <z-tag>
       <div>my custom element</div>
       </z-tag>
     `);
@@ -33,10 +33,10 @@ describe("Suite test ZTag", () => {
     it("Test render z-tag with icon and text", async () => {
         const page = await newSpecPage({
             components: [ZTag],
-            html: `<z-tag class="body-5-sb" icon="gear">my custom element</z-tag>`,
+            html: `<z-tag icon="gear">my custom element</z-tag>`,
         });
         expect(page.root).toEqualHtml(`
-      <z-tag class="body-5-sb" icon="gear" >
+      <z-tag icon="gear" >
         <z-icon name="gear"></z-icon>
         <div>my custom element</div>
       </z-tag>
@@ -45,10 +45,10 @@ describe("Suite test ZTag", () => {
     it("Test render z-tag with icon and text with Token", async () => {
         const page = await newSpecPage({
             components: [ZTag],
-            html: `<z-tag class="body-5-sb" icon="gear" style="--iconTextToken: var(--color-white); --bgToken: var(--avatar-C19);">my custom element</z-tag>`,
+            html: `<z-tag icon="gear" style="--z-tag-text-color: var(--color-white); --z-tag-bg: var(--avatar-C19);">my custom element</z-tag>`,
         });
         expect(page.root).toEqualHtml(`
-      <z-tag class="body-5-sb" icon="gear" style="--iconTextToken: var(--color-white); --bgToken: var(--avatar-C19);">
+      <z-tag icon="gear" style="--z-tag-text-color: var(--color-white); --z-tag-bg: var(--avatar-C19);">
         <z-icon name="gear"></z-icon>
         <div>my custom element</div>
       </z-tag>

package/dist/collection/components/z-tag/index.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-tag/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,IAAI,EAAC,MAAM,SAAS,CAAC;AAE7B,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;QACvC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,mCAAmC;SAC1C,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,8CAA8C,CAAC,CAAC;IAChF,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,+CAA+C;SACtD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;eAInB,CAAC,CAAC;IACf,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,oDAAoD;SAC3D,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,gEAAgE;SACvE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;KAK7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;QAC/D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,2IAA2I;SAClJ,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;KAK7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZTag} from \"./index\";\n\ndescribe(\"Suite test ZTag\", () => {\n  it(\"Test render z-tag empty\", async () => {\n    const page = await newSpecPage({\n      components: [ZTag],\n      html: `<z-tag class=\"body-5-sb\"></z-tag>`,\n    });\n\n    expect(page.root).toEqualHtml(`<z-tag class=\"body-5-sb\"><div></div></z-tag>`);\n  });\n\n  it(\"Test render z-tag with icon\", async () => {\n    const page = await newSpecPage({\n      components: [ZTag],\n      html: `<z-tag class=\"body-5-sb\" icon=\"gear\"></z-tag>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-tag class=\"body-5-sb\" icon=\"gear\">\n        <z-icon name=\"gear\"></z-icon>\n        <div></div>\n      </z-tag>`);\n  });\n\n  it(\"Test render z-tag with text\", async () => {\n    const page = await newSpecPage({\n      components: [ZTag],\n      html: `<z-tag class=\"body-5-sb\">my custom element</z-tag>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-tag class=\"body-5-sb\">\n      <div>my custom element</div>\n      </z-tag>\n    `);\n  });\n\n  it(\"Test render z-tag with icon and text\", async () => {\n    const page = await newSpecPage({\n      components: [ZTag],\n      html: `<z-tag class=\"body-5-sb\" icon=\"gear\">my custom element</z-tag>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-tag class=\"body-5-sb\" icon=\"gear\" >\n        <z-icon name=\"gear\"></z-icon>\n        <div>my custom element</div>\n      </z-tag>\n    `);\n  });\n\n  it(\"Test render z-tag with icon and text with Token\", async () => {\n    const page = await newSpecPage({\n      components: [ZTag],\n      html: `<z-tag class=\"body-5-sb\" icon=\"gear\" style=\"--iconTextToken: var(--color-white); --bgToken: var(--avatar-C19);\">my custom element</z-tag>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-tag class=\"body-5-sb\" icon=\"gear\" style=\"--iconTextToken: var(--color-white); --bgToken: var(--avatar-C19);\">\n        <z-icon name=\"gear\"></z-icon>\n        <div>my custom element</div>\n      </z-tag>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-tag/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,IAAI,EAAC,MAAM,SAAS,CAAC;AAE7B,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;QACvC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,iBAAiB;SACxB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,4BAA4B,CAAC,CAAC;IAC9D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,6BAA6B;SACpC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;eAInB,CAAC,CAAC;IACf,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,kCAAkC;SACzC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,8CAA8C;SACrD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;KAK7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;QAC/D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,6HAA6H;SACpI,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;KAK7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZTag} from \"./index\";\n\ndescribe(\"Suite test ZTag\", () => {\n  it(\"Test render z-tag empty\", async () => {\n    const page = await newSpecPage({\n      components: [ZTag],\n      html: `<z-tag></z-tag>`,\n    });\n\n    expect(page.root).toEqualHtml(`<z-tag><div></div></z-tag>`);\n  });\n\n  it(\"Test render z-tag with icon\", async () => {\n    const page = await newSpecPage({\n      components: [ZTag],\n      html: `<z-tag icon=\"gear\"></z-tag>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-tag icon=\"gear\">\n        <z-icon name=\"gear\"></z-icon>\n        <div></div>\n      </z-tag>`);\n  });\n\n  it(\"Test render z-tag with text\", async () => {\n    const page = await newSpecPage({\n      components: [ZTag],\n      html: `<z-tag>my custom element</z-tag>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-tag>\n      <div>my custom element</div>\n      </z-tag>\n    `);\n  });\n\n  it(\"Test render z-tag with icon and text\", async () => {\n    const page = await newSpecPage({\n      components: [ZTag],\n      html: `<z-tag icon=\"gear\">my custom element</z-tag>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-tag icon=\"gear\" >\n        <z-icon name=\"gear\"></z-icon>\n        <div>my custom element</div>\n      </z-tag>\n    `);\n  });\n\n  it(\"Test render z-tag with icon and text with Token\", async () => {\n    const page = await newSpecPage({\n      components: [ZTag],\n      html: `<z-tag icon=\"gear\" style=\"--z-tag-text-color: var(--color-white); --z-tag-bg: var(--avatar-C19);\">my custom element</z-tag>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-tag icon=\"gear\" style=\"--z-tag-text-color: var(--color-white); --z-tag-bg: var(--avatar-C19);\">\n        <z-icon name=\"gear\"></z-icon>\n        <div>my custom element</div>\n      </z-tag>\n    `);\n  });\n});\n"]}

package/dist/collection/components/z-tag/styles.css

@@ -1,35 +1,32 @@
 :host {
   --z-icon-width: 14px;
   --z-icon-height: 14px;
-  --z-tag-text-color: var(--color-primary03);
-  --z-tag-bg: var(--color-hover-primary);
 
   display: flex;
   width: fit-content;
   max-width: inherit;
   height: fit-content;
   max-height: inherit;
+  align-items: flex-start;
   padding: calc(var(--space-unit) / 2);
-  background-color: var(--z-tag-bg);
+  background-color: var(--z-tag-bg, var(--color-hover-primary));
   border-radius: var(--border-radius);
-  color: var(--z-tag-text-color);
-  fill: var(--z-tag-text-color);
+  color: var(--z-tag-text-color, var(--color-text-inverse));
+  fill: currentcolor;
   font-family: var(--font-family-sans);
+  font-size: var(--font-size-1);
+  font-weight: var(--font-sb);
+  letter-spacing: 0.32px;
   line-height: 14px;
   text-transform: uppercase;
 }
 
-:host > z-icon {
-  margin-right: var(--space-unit);
-}
-
 :host(.expandable) > z-icon {
-  margin-right: 0;
   transition: margin-right 0.3s ease-out;
 }
 
-:host(:not(.expandable)) > z-icon:not(:last-child),
-:host(.expandable:hover) > z-icon:not(:last-child) {
+:host(:not(.expandable)) > z-icon,
+:host(.expandable:hover) > z-icon {
   margin-right: var(--space-unit);
   transition: margin-right 0.3s ease-out 0s;
 }