@zanichelli/albe-web-components 16.3.0-rc1 → 16.3.1

package/dist/collection/components/z-app-header/styles.css

@@ -1,32 +1,25 @@
 :host {
-  --app-header-content-max-width: 100%;
+  --app-header-content-max-width: ;
 
   /* Variable to set stuck header and drawer's top offset.
   Useful when something is absolutely positioned above the header. */
-  --app-header-top-offset: 48px;
-  --app-header-drawer-trigger-size: calc(var(--space-unit) * 4);
+  --app-header-top-offset: ;
 
   /* Variable to customize header background color. */
-  --app-header-bg: var(--color-surface01);
-
-  /* Variable to customize stuck header background color. */
-  --app-header-stucked-bg: var(--color-surface01);
+  --app-header-bg: ;
 
   /* Variable to customize text and icon color. */
-  --app-header-text-color: var(--color-default-text);
+  --app-header-text-color: ;
 
-  /* Variable to customize the title's line-height.
-  NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value
-  and use the same level as the one of the font size. */
-  --app-header-title-lineheight: 1.25;
+  /* Variable to customize stuck header background color. */
+  --app-header-stucked-bg: ;
 
   /* Variable to customize stuck header's text and icon color. */
-  --app-header-stucked-text-color: var(--color-default-text);
+  --app-header-stucked-text-color: ;
 
   position: relative;
   display: block;
-  box-shadow: 0 2px 4px 0 var(--shadow-color-base);
-  color: var(--app-header-text-color);
+  box-shadow: var(--shadow-2);
 }
 
 :host,
@@ -35,10 +28,14 @@
 }
 
 .heading-panel {
+  /* Title's line height. */
+  --title-line-height: 1.333;
+  --title-font-size: var(--font-size-6);
+
   position: relative;
   display: flex;
   width: 100%;
-  max-width: var(--app-header-content-max-width);
+  max-width: var(--app-header-content-max-width, 100%);
   flex-direction: column;
   flex-grow: 0;
   flex-shrink: 0;
@@ -63,6 +60,10 @@
   justify-content: flex-start;
 }
 
+.heading-panel.has-menubar {
+  padding-bottom: 0;
+}
+
 .heading-panel .heading-container {
   flex-direction: column-reverse;
 }
@@ -71,7 +72,7 @@
   flex-direction: column;
 }
 
-:host(:not([enable-search="false"])[search-page-url]) .heading-panel .heading-container {
+:host([enable-search][search-page-url]) .heading-panel .heading-container {
   flex-direction: row;
 }
 
@@ -79,23 +80,26 @@
   display: flex;
   width: 100%;
   flex-direction: row;
-  align-items: start;
+  align-items: flex-start;
 }
 
-img.z-logo {
-  content: url('data:image/svg+xml,<svg width="61" height="32" viewBox="0 0 61 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z" fill="%23E2011A"/><path d="M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z" fill="white"/><path d="M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z" fill="%23E2011A"/><path d="M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z" fill="white"/><path d="M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z" fill="white"/></svg>');
+.z-logo {
+  display: flex;
+  height: calc(var(--title-font-size) * var(--title-line-height));
+  align-items: center;
 }
 
-.heading-title > img.z-logo {
-  height: calc(var(--space-unit) * 3);
-  margin: 4px var(--space-unit) 0 0;
+.z-logo img {
+  height: 24px;
+  margin: 0 var(--space-unit) 0 0;
+  content: url('data:image/svg+xml,<svg width="61" height="32" viewBox="0 0 61 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z" fill="%23E2011A"/><path d="M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z" fill="white"/><path d="M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z" fill="%23E2011A"/><path d="M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z" fill="white"/><path d="M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z" fill="white"/></svg>');
 }
 
-:host([stuck]) .heading-stuck .heading-title > img.z-logo {
-  margin-top: 0;
+.product-logo {
+  display: none;
 }
 
-::slotted([slot="product-logo"]) {
+.product-logo ::slotted([slot="product-logo"]) {
   width: 32px;
   height: 32px;
   margin-right: var(--space-unit);
@@ -103,30 +107,32 @@ img.z-logo {
 }
 
 ::slotted([slot="title"]),
-.heading-stuck .heading-title > *,
-::slotted([slot="stucked-title"]) {
+::slotted([slot="stucked-title"]),
+.stucked-title {
   margin: 0;
-  font-family: "IBM Plex Serif", serif;
+  color: var(--app-header-text-color, var(--gray950));
+  font-family: var(--font-family-serif);
+  font-weight: var(--font-sb);
 }
 
 ::slotted([slot="title"]) {
   display: -webkit-box;
   overflow: hidden;
   flex-grow: 1;
-  padding-right: calc(var(--space-unit) * 2);
   -webkit-box-orient: vertical;
-  font-size: var(--font-size-6);
+  font-size: var(--title-font-size);
   -webkit-line-clamp: 2;
+  line-clamp: 2;
+  line-height: var(--title-line-height);
   text-overflow: ellipsis;
-  white-space: initial;
 }
 
-:host(:not([menu-length="0"])) .p-left {
-  padding-left: calc(var(--app-header-drawer-trigger-size) + var(--space-unit));
+:host([enable-search]) ::slotted([slot="title"]) + * {
+  margin-left: calc(var(--space-unit) * 2);
 }
 
-:host(:is([enable-offcanvas="true"]):not([menu-length="0"])) {
-  padding-left: calc(var(--app-header-drawer-trigger-size) + var(--space-unit));
+:host([enable-offcanvas]:not([menu-length="0"])) .top-subtitle {
+  padding-left: calc(var(--space-unit) * 4 + var(--space-unit));
 }
 
 ::slotted([slot="top-subtitle"]) {
@@ -135,18 +141,17 @@ img.z-logo {
   max-width: 80%;
   margin: 0;
   -webkit-box-orient: vertical;
+  color: var(--color-default-text);
   font-family: var(--font-family-sans);
-  font-size: 14px;
+  font-size: var(--font-size-2);
   font-style: italic;
-  font-weight: 400;
+  font-weight: var(--font-rg);
   -webkit-line-clamp: 2;
-  line-height: 18.2px;
-  white-space: initial;
+  line-clamp: 2;
 }
 
 .menu-container {
   display: flex;
-  width: 100%;
   flex: 1 auto;
   column-gap: calc(var(--space-unit) * 4);
 }
@@ -155,7 +160,7 @@ img.z-logo {
   outline: none;
 }
 
-:host([menu-length="0"]:not([enable-search])) .menu-container,
+:host([menu-length="0"]) .menu-container,
 .menu-container:empty {
   display: none;
 }
@@ -167,7 +172,7 @@ img.z-logo {
 
 .menu-container ::slotted([slot="menu"]:not(:last-child))::after {
   position: absolute;
-  top: 50%;
+  top: calc(1.5em / 2); /* half the line-height of the label */
   right: calc(var(--space-unit) * -2);
   width: var(--border-size-small);
   height: 1em;
@@ -187,49 +192,52 @@ z-searchbar {
 .heading-stuck {
   position: fixed;
   z-index: 20;
-  top: var(--app-header-top-offset);
+  top: var(--app-header-top-offset, 48px);
   left: 0;
   width: 100%;
   max-width: 100%;
   animation: slide-stuck-heading-in 250ms ease-out;
-  background: var(--app-header-stucked-bg);
+  background: var(--app-header-stucked-bg, var(--color-surface01));
   box-shadow: var(--shadow-2);
-  color: var(--app-header-stucked-text-color);
+  color: var(--app-header-stucked-text-color, var(--color-default-text));
 }
 
 .heading-stuck-content {
   display: flex;
-  max-width: var(--app-header-content-max-width);
+  max-width: var(--app-header-content-max-width, 100%);
   align-items: center;
   padding: var(--space-unit) var(--grid-margin);
   margin: 0 auto;
 }
 
 .heading-stuck .heading-title {
+  --title-font-size: var(--font-size-5);
+  --title-line-height: 1.4;
+
   overflow: hidden;
+  align-items: center;
 }
 
-.heading-stuck .heading-title > *,
-::slotted([slot="stucked-title"]) {
-  font-size: var(--font-size-9);
-  font-weight: var(--font-bd);
-  line-height: 1.25;
+.heading-stuck .heading-title:not(:last-child) {
+  margin-right: calc(var(--space-unit) * 2);
 }
 
-.heading-stuck .heading-title [name="stucked-title"] {
-  display: block;
+.heading-stuck .stucked-title {
   overflow: hidden;
-  margin-right: calc(var(--space-unit) * 2);
-  font-size: var(--font-size-5);
+  font-size: var(--title-font-size);
+  line-height: var(--title-line-height);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.heading-stuck-content z-button {
+.heading-stuck-content z-button.search-page-button {
   margin-left: auto;
 }
 
 .drawer-trigger {
+  display: flex;
+  height: calc(var(--title-font-size) * var(--title-line-height));
+  align-items: center;
   padding: 0;
   border: 0;
   margin-right: var(--space-unit);
@@ -241,18 +249,13 @@ z-searchbar {
   outline: none;
 }
 
-.drawer-trigger:focus:focus-visible {
-  box-shadow: var(--shadow-focus-primary);
-}
-
-.drawer-trigger:focus-visible {
+.drawer-trigger:focus:focus-visible z-icon {
   box-shadow: var(--shadow-focus-primary);
-  outline: none !important;
 }
 
 .drawer-trigger z-icon {
-  --z-icon-width: var(--app-header-drawer-trigger-size);
-  --z-icon-height: var(--app-header-drawer-trigger-size);
+  --z-icon-width: calc(var(--space-unit) * 4);
+  --z-icon-height: calc(var(--space-unit) * 4);
 
   fill: currentcolor;
 }
@@ -270,7 +273,6 @@ z-offcanvas[open] .drawer-content {
   width: 100%;
   flex: 1 auto;
   flex-direction: column;
-  row-gap: calc(var(--space-unit) * 2.5);
 }
 
 z-offcanvas[open] .drawer-content ::slotted(z-menu) {
@@ -278,8 +280,8 @@ z-offcanvas[open] .drawer-content ::slotted(z-menu) {
 }
 
 .drawer-close {
-  --z-icon-width: var(--app-header-drawer-trigger-size);
-  --z-icon-height: var(--app-header-drawer-trigger-size);
+  --z-icon-width: calc(var(--space-unit) * 4);
+  --z-icon-height: calc(var(--space-unit) * 4);
 
   padding: 0;
   border: 0;
@@ -287,10 +289,8 @@ z-offcanvas[open] .drawer-content ::slotted(z-menu) {
   appearance: none;
   background: transparent;
   border-radius: 0;
-  color: inherit;
   cursor: pointer;
   fill: currentcolor;
-  font-size: inherit;
   outline: none;
 }
 
@@ -300,67 +300,50 @@ z-offcanvas[open] .drawer-content ::slotted(z-menu) {
 
 /* Tablet breakpoint */
 @media (min-width: 768px) {
-  :host([enable-search]:not([search-page-url])) .heading-container .heading-title {
-    flex-wrap: nowrap;
-  }
-
-  z-searchbar {
-    width: 30%;
-    padding-top: 0;
-  }
-
-  ::slotted([slot="title"]) {
-    font-size: var(--font-size-9);
-  }
+  .heading-panel {
+    --title-font-size: var(--font-size-9);
 
-  .heading-title {
-    align-items: center;
+    padding: calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25);
   }
 
-  .heading-container .heading-title {
-    align-items: flex-start;
+  :host([enable-search][search-page-url]) .heading-panel .heading-container {
+    flex-direction: column;
   }
 
-  div.heading-container .heading-title button,
-  div.heading-container .heading-title z-searchbar,
-  div.heading-container .heading-title img,
-  div.heading-container .heading-title ::slotted([slot="product-logo"]),
-  div.heading-container .heading-title .search-page-button {
-    margin-top: var(--space-unit);
+  .heading-panel .heading-container {
+    flex-direction: column;
+    margin-right: auto;
   }
 
-  .heading-title > img.z-logo {
+  .z-logo img {
     height: 32px;
   }
 
-  .heading-panel {
+  .product-logo {
+    display: flex;
+    height: calc(var(--title-font-size) * var(--title-line-height));
     align-items: center;
-    padding: calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25);
-  }
-
-  .heading-panel.has-menu {
-    padding-bottom: 0;
   }
 
-  :host(:not([enable-search="false"])[search-page-url]) .heading-panel .heading-container {
-    flex-direction: column;
+  :host([enable-search]:not([search-page-url])) .heading-container .heading-title {
+    flex-wrap: nowrap;
   }
 
-  .heading-panel .heading-container {
-    flex-direction: column;
-    margin-right: auto;
+  z-searchbar {
+    width: 30%;
+    height: calc(var(--title-font-size) * var(--title-line-height));
+    padding-top: 0;
   }
 
   .menu-container {
     flex: initial;
-    align-items: center;
   }
 
-  :host([menu-length="0"]) .menu-container:not(:empty) {
-    height: calc(var(--space-unit) * 4.5 * var(--app-header-title-lineheight));
+  .menu-container > [role="menubar"] {
+    display: contents;
   }
 
-  :host(:not([enable-offcanvas="false"])) .menu-container {
+  :host(:not([enable-offcanvas])) .menu-container {
     margin-top: calc((var(--space-unit) * 1.75));
   }
 
@@ -368,31 +351,22 @@ z-offcanvas[open] .drawer-content ::slotted(z-menu) {
     display: none;
   }
 
-  .heading-stuck .heading-title > *,
-  .heading-stuck .heading-title [name="stucked-title"] {
-    font-size: var(--font-size-8);
+  .heading-stuck .heading-title {
+    --title-font-size: var(--font-size-8);
+    --title-line-height: 1.5;
   }
 
   .heading-stuck-content {
     padding: 6px var(--grid-margin);
   }
 
-  ::slotted([slot="product-logo"]) {
-    margin-right: calc(var(--space-unit) * 1.5);
-  }
-
-  /* stylelint-disable-next-line selector-not-notation */
-  :host(:not([enable-offcanvas]):not([menu-length="0"])) {
+  :host(:not([enable-offcanvas], [menu-length="0"])) {
     padding-left: 0;
   }
 }
 
 /* Desktop breakpoint */
 @media (min-width: 1152px) {
-  ::slotted([slot="product-logo"]) {
-    margin-right: var(--space-unit);
-  }
-
   z-searchbar {
     min-width: calc(var(--space-unit) * 45);
     flex: initial;

package/dist/collection/components/z-aria-alert/index.js

@@ -5,7 +5,7 @@ export class ZAriaAlert {
         this.mode = ZAriaAlertMode.POLITE;
     }
     render() {
-        return (h(Host, { key: 'cbbdc8303bc43c4dd52edce414ad84a63404c372', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: '0f150df4db55b849ad3c8179cfc4d6554677611b' })));
+        return (h(Host, { key: 'fe408ff28d71e45649f8881b395da6b0c1fd3e96', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: '2999a9a7cd442b5d9c4a74e0c68418497335045e' })));
     }
     static get is() { return "z-aria-alert"; }
     static get properties() {

package/dist/collection/components/z-aria-alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-aria-alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAM3C,MAAM,OAAO,UAAU;;oBAGE,cAAc,CAAC,MAAM;;IAE5C,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,kEACQ,IAAI,CAAC,IAAI,iBACR,MAAM,mBACJ,WAAW;YAEzB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {ZAriaAlertMode} from \"../../beans\";\n\n@Component({\n  tag: \"z-aria-alert\",\n  shadow: false,\n})\nexport class ZAriaAlert {\n  /** Aria live mode */\n  @Prop()\n  mode: ZAriaAlertMode = ZAriaAlertMode.POLITE;\n\n  render(): HTMLZAriaAlertElement {\n    return (\n      <Host\n        aria-live={this.mode}\n        aria-atomic=\"true\"\n        aria-relevant=\"additions\"\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-aria-alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAM3C,MAAM,OAAO,UAAU;;oBAGE,cAAc,CAAC,MAAM;;IAE5C,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,kEACQ,IAAI,CAAC,IAAI,iBACR,MAAM,mBACJ,WAAW;YAEzB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {ZAriaAlertMode} from \"../../beans\";\n\n@Component({\n  tag: \"z-aria-alert\",\n  shadow: false,\n})\nexport class ZAriaAlert {\n  /** Aria live mode */\n  @Prop()\n  mode: ZAriaAlertMode = ZAriaAlertMode.POLITE;\n\n  render(): HTMLZAriaAlertElement {\n    return (\n      <Host\n        aria-live={this.mode}\n        aria-atomic=\"true\"\n        aria-relevant=\"additions\"\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-aria-alert/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-aria-alert/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAC3C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,4BAA4B,CAAC;AACpC,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC;SACvC;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,cAAc,CAAC,MAAM;KAC5B;CACyB,CAAC;AAC7B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;;;;;;;;;;;;;;;kBAiBU,IAAI,CAAC,IAAI;;;;aAId;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;oBAsBY,IAAI,CAAC,IAAI;;;;;aAKhB;CACZ,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZAriaAlert} from \".\";\nimport {ZAriaAlertMode} from \"../../beans\";\nimport \"../z-button/index\";\nimport \"../z-visually-hidden/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZAriaAlert\",\n  component: \"z-aria-alert\",\n  argTypes: {\n    mode: {\n      control: {\n        type: \"select\",\n      },\n      options: Object.values(ZAriaAlertMode),\n    },\n  },\n  args: {\n    mode: ZAriaAlertMode.POLITE,\n  },\n} satisfies Meta<ZAriaAlert>;\nexport default StoryMeta;\n\nexport const Default = {\n  render: (args) =>\n    html`<script>\n        function myFunction() {\n          const myTimeout = setTimeout(myDelayedFunction, 3000);\n        }\n        function myDelayedFunction() {\n          var myalert = document.getElementById(\"idAlert\");\n          myalert.innerHTML = \"Ecco un numero a caso: \" + Math.random();\n        }\n      </script>\n      <div>\n        <h2 class=\"heading-2\">ZAriaAlert deafult</h2>\n        <span>\n          Open your ScreenReader, Click on the button and wait 3 seconds, the screenreader will read a message\n        </span>\n        <z-button onclick=\"myFunction()\">Click to say something</z-button>\n        <z-aria-alert\n          id=\"idAlert\"\n          mode=\"${args.mode}\"\n        >\n          Testo NON nascosto\n        </z-aria-alert>\n      </div>`,\n};\n\nexport const VisuallyHidden = {\n  render: (args) =>\n    html`<script>\n        function myFunction2() {\n          const myTimeout = setTimeout(myDelayedFunction2, 3000);\n        }\n        function myDelayedFunction2() {\n          var myalert = document.getElementById(\"idAlert2\");\n          myalert.innerHTML = \"Ecco un numero a caso: \" + Math.random();\n        }\n      </script>\n      <div>\n        <h2 class=\"heading-2\">ZAriaAlert with VisuallyHidden</h2>\n        <span>\n          You can also wrap your <code>z-aria-alert</code> with a <code>z-visually-hidden</code> tag in order to\n          visually hide the text.\n        </span>\n        <span>\n          Open your ScreenReader, Click on the button and wait 3 seconds, the screenreader will read a message\n        </span>\n        <z-button onclick=\"myFunction2()\">Click to say something but visually hidden</z-button>\n        <z-visually-hidden>\n          <z-aria-alert\n            id=\"idAlert2\"\n            mode=\"${args.mode}\"\n          >\n            Testo qua\n          </z-aria-alert>\n        </z-visually-hidden>\n      </div>`,\n};\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/z-aria-alert/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAC3C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,4BAA4B,CAAC;AACpC,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC;SACvC;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,cAAc,CAAC,MAAM;KAC5B;CACyB,CAAC;AAC7B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;;;;;;;;;;;;;;;kBAiBU,IAAI,CAAC,IAAI;;;;aAId;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;oBAsBY,IAAI,CAAC,IAAI;;;;;aAKhB;CACZ,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZAriaAlert} from \".\";\nimport {ZAriaAlertMode} from \"../../beans\";\nimport \"../z-button/index\";\nimport \"../z-visually-hidden/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZAriaAlert\",\n  component: \"z-aria-alert\",\n  argTypes: {\n    mode: {\n      control: {\n        type: \"select\",\n      },\n      options: Object.values(ZAriaAlertMode),\n    },\n  },\n  args: {\n    mode: ZAriaAlertMode.POLITE,\n  },\n} satisfies Meta<ZAriaAlert>;\nexport default StoryMeta;\n\nexport const Default = {\n  render: (args) =>\n    html`<script>\n        function myFunction() {\n          const myTimeout = setTimeout(myDelayedFunction, 3000);\n        }\n        function myDelayedFunction() {\n          var myalert = document.getElementById(\"idAlert\");\n          myalert.innerHTML = \"Ecco un numero a caso: \" + Math.random();\n        }\n      </script>\n      <div>\n        <h2 class=\"heading-2\">ZAriaAlert deafult</h2>\n        <span>\n          Open your ScreenReader, Click on the button and wait 3 seconds, the screenreader will read a message\n        </span>\n        <z-button onclick=\"myFunction()\">Click to say something</z-button>\n        <z-aria-alert\n          id=\"idAlert\"\n          mode=\"${args.mode}\"\n        >\n          Testo NON nascosto\n        </z-aria-alert>\n      </div>`,\n};\n\nexport const VisuallyHidden = {\n  render: (args) =>\n    html`<script>\n        function myFunction2() {\n          const myTimeout = setTimeout(myDelayedFunction2, 3000);\n        }\n        function myDelayedFunction2() {\n          var myalert = document.getElementById(\"idAlert2\");\n          myalert.innerHTML = \"Ecco un numero a caso: \" + Math.random();\n        }\n      </script>\n      <div>\n        <h2 class=\"heading-2\">ZAriaAlert with VisuallyHidden</h2>\n        <span>\n          You can also wrap your <code>z-aria-alert</code> with a <code>z-visually-hidden</code> tag in order to\n          visually hide the text.\n        </span>\n        <span>\n          Open your ScreenReader, Click on the button and wait 3 seconds, the screenreader will read a message\n        </span>\n        <z-button onclick=\"myFunction2()\">Click to say something but visually hidden</z-button>\n        <z-visually-hidden>\n          <z-aria-alert\n            id=\"idAlert2\"\n            mode=\"${args.mode}\"\n          >\n            Testo qua\n          </z-aria-alert>\n        </z-visually-hidden>\n      </div>`,\n};\n"]}

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

@@ -24,10 +24,10 @@ export class ZAvatar {
         }
     }
     render() {
-        return (h(Host, { key: '9860841c2e673870936affe453e0a284fa62db8f', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
+        return (h(Host, { key: '17a097738ce186c791794f5f8192cd46845df2a6', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
                 color: `var(--${this.textColor})`,
                 backgroundColor: `var(--${this.backgroundColor})`,
-            } }, this.text && !this.image && h("span", { key: '8f1c4a6aa7d0d24210492548d56d3510f11f4f10' }, this.text.substring(0, 2)), this.image && (h("img", { key: '887bbd228dc7f076d4c3122f712ea7da39ab0055', src: this.image, onError: () => (this.image = "") }))));
+            } }, this.text && !this.image && h("span", { key: '178497c915f987e2f2daff1e17282062dfac9110' }, this.text.substring(0, 2)), this.image && (h("img", { key: '57221f7fca8e9dae9afeea77de4db247d3ad3174', src: this.image, onError: () => (this.image = "") }))));
     }
     static get is() { return "z-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,UAAU,EAAC,MAAM,aAAa,CAAC;AAOvC,MAAM,OAAO,OAAO;IAqBlB;;oBAlBoB,UAAU,CAAC,MAAM;;yBAQhB,aAAa;+BAIP,SAAS;;QAOlC,IAAI,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,MAAK,CAAC,IAAI,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,MAAK,CAAC,EAAE,CAAC;YACxD,OAAO,CAAC,IAAI,CAAC,gEAAgE,CAAC,CAAC;QACjF,CAAC;KACF;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,EAAE,CAAC;YACnC,OAAO,GAAG,CAAC;QACb,CAAC;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,MAAM,EAAE,CAAC;YAC3C,OAAO,GAAG,CAAC;QACb,CAAC;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,EAAE,CAAC;YAC1C,OAAO,GAAG,CAAC;QACb,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,EAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,QAAQ,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,IAAI,EAAC,EACnE,KAAK,EAAE;gBACL,KAAK,EAAE,SAAS,IAAI,CAAC,SAAS,GAAG;gBACjC,eAAe,EAAE,SAAS,IAAI,CAAC,eAAe,GAAG;aAClD;YAEA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,+DAAO,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAQ;YACpE,IAAI,CAAC,KAAK,IAAI,CACb,4DACE,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,GAChC,CACH,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {AvatarSize} from \"../../beans\";\n\n@Component({\n  tag: \"z-avatar\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAvatar {\n  /** [optional] Avatar size */\n  @Prop()\n  size?: AvatarSize = AvatarSize.MEDIUM;\n\n  /** [optional] Avatar text */\n  @Prop()\n  text?: string;\n\n  /** [optional] Avatar text color */\n  @Prop()\n  textColor?: string = \"color-white\";\n\n  /** [optional] Avatar background color */\n  @Prop()\n  backgroundColor?: string = \"gray700\";\n\n  /** [optional] Avatar image */\n  @Prop({mutable: true})\n  image?: string;\n\n  constructor() {\n    if (this.text?.length === 0 && this.image?.length === 0) {\n      console.warn(\"z-avatar must contain at least one prop between text and image\");\n    }\n  }\n\n  private getTextSize(): string {\n    if (this.size === AvatarSize.SMALL) {\n      return \"5\";\n    } else if (this.size === AvatarSize.MEDIUM) {\n      return \"4\";\n    } else if (this.size === AvatarSize.LARGE) {\n      return \"2\";\n    }\n  }\n\n  render(): HTMLZAvatarElement {\n    return (\n      <Host\n        class={{[this.size]: true, [`body-${this.getTextSize()}-sb`]: true}}\n        style={{\n          color: `var(--${this.textColor})`,\n          backgroundColor: `var(--${this.backgroundColor})`,\n        }}\n      >\n        {this.text && !this.image && <span>{this.text.substring(0, 2)}</span>}\n        {this.image && (\n          <img\n            src={this.image}\n            onError={() => (this.image = \"\")}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,UAAU,EAAC,MAAM,aAAa,CAAC;AAOvC,MAAM,OAAO,OAAO;IAqBlB;;oBAlBoB,UAAU,CAAC,MAAM;;yBAQhB,aAAa;+BAIP,SAAS;;QAOlC,IAAI,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,MAAK,CAAC,IAAI,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,MAAK,CAAC,EAAE,CAAC;YACxD,OAAO,CAAC,IAAI,CAAC,gEAAgE,CAAC,CAAC;QACjF,CAAC;KACF;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,EAAE,CAAC;YACnC,OAAO,GAAG,CAAC;QACb,CAAC;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,MAAM,EAAE,CAAC;YAC3C,OAAO,GAAG,CAAC;QACb,CAAC;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,EAAE,CAAC;YAC1C,OAAO,GAAG,CAAC;QACb,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,EAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,QAAQ,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,IAAI,EAAC,EACnE,KAAK,EAAE;gBACL,KAAK,EAAE,SAAS,IAAI,CAAC,SAAS,GAAG;gBACjC,eAAe,EAAE,SAAS,IAAI,CAAC,eAAe,GAAG;aAClD;YAEA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,+DAAO,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAQ;YACpE,IAAI,CAAC,KAAK,IAAI,CACb,4DACE,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,GAChC,CACH,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {AvatarSize} from \"../../beans\";\n\n@Component({\n  tag: \"z-avatar\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAvatar {\n  /** [optional] Avatar size */\n  @Prop()\n  size?: AvatarSize = AvatarSize.MEDIUM;\n\n  /** [optional] Avatar text */\n  @Prop()\n  text?: string;\n\n  /** [optional] Avatar text color */\n  @Prop()\n  textColor?: string = \"color-white\";\n\n  /** [optional] Avatar background color */\n  @Prop()\n  backgroundColor?: string = \"gray700\";\n\n  /** [optional] Avatar image */\n  @Prop({mutable: true})\n  image?: string;\n\n  constructor() {\n    if (this.text?.length === 0 && this.image?.length === 0) {\n      console.warn(\"z-avatar must contain at least one prop between text and image\");\n    }\n  }\n\n  private getTextSize(): string {\n    if (this.size === AvatarSize.SMALL) {\n      return \"5\";\n    } else if (this.size === AvatarSize.MEDIUM) {\n      return \"4\";\n    } else if (this.size === AvatarSize.LARGE) {\n      return \"2\";\n    }\n  }\n\n  render(): HTMLZAvatarElement {\n    return (\n      <Host\n        class={{[this.size]: true, [`body-${this.getTextSize()}-sb`]: true}}\n        style={{\n          color: `var(--${this.textColor})`,\n          backgroundColor: `var(--${this.backgroundColor})`,\n        }}\n      >\n        {this.text && !this.image && <span>{this.text.substring(0, 2)}</span>}\n        {this.image && (\n          <img\n            src={this.image}\n            onError={() => (this.image = \"\")}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-avatar/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-avatar/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,UAAU,EAAC,MAAM,aAAa,CAAC;AACvC,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAC3D,OAAO,SAAS,CAAC;AAEjB,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;AAE7E;;;GAGG;AACH,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC;YAClC,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE,WAAW;YACpB,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;QACD,eAAe,EAAE;YACf,OAAO,EAAE,WAAW;YACpB,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU,CAAC,MAAM;QACvB,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,aAAa;QACxB,eAAe,EAAE,SAAS;QAC1B,KAAK,EAAE,qEAAqE;KAC7E;CACsB,CAAC;AAE1B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,IAAI,CAAC,IAAI;cACT,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,SAAS;0BACR,IAAI,CAAC,eAAe;eAC/B,IAAI,CAAC,KAAK;iBACR;CACY,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZAvatar} from \".\";\nimport {AvatarSize} from \"../../beans\";\nimport {getColorTokens} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\nconst colorTokens = getColorTokens().map((token) => token.replace(\"--\", \"\"));\n\n/**\n * Pass at least one prop between `text` and `image`.\n * If prop `image` contains a broken URL, the component will show `text` prop, if given.\n */\nconst StoryMeta = {\n  title: \"ZAvatar\",\n  component: \"z-avatar\",\n  argTypes: {\n    size: {\n      options: Object.values(AvatarSize),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n    textColor: {\n      options: colorTokens,\n      control: {\n        type: \"select\",\n      },\n    },\n    backgroundColor: {\n      options: colorTokens,\n      control: {\n        type: \"select\",\n      },\n    },\n  },\n  args: {\n    size: AvatarSize.MEDIUM,\n    text: \"Avatar\",\n    textColor: \"color-white\",\n    backgroundColor: \"gray700\",\n    image: \"https://www.cinematographe.it/wp-content/uploads/2019/04/Avatar.jpg\",\n  },\n} satisfies Meta<ZAvatar>;\n\nexport default StoryMeta;\n\nexport const Default = {\n  render: (args) =>\n    html`<z-avatar\n      size=\"${args.size}\"\n      text=\"${args.text}\"\n      text-color=\"${args.textColor}\"\n      background-color=\"${args.backgroundColor}\"\n      image=\"${args.image}\"\n    ></z-avatar>`,\n} satisfies StoryObj<ZAvatar>;\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/z-avatar/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,UAAU,EAAC,MAAM,aAAa,CAAC;AACvC,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAC3D,OAAO,SAAS,CAAC;AAEjB,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;AAE7E;;;GAGG;AACH,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC;YAClC,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE,WAAW;YACpB,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;QACD,eAAe,EAAE;YACf,OAAO,EAAE,WAAW;YACpB,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU,CAAC,MAAM;QACvB,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,aAAa;QACxB,eAAe,EAAE,SAAS;QAC1B,KAAK,EAAE,qEAAqE;KAC7E;CACsB,CAAC;AAE1B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,IAAI,CAAC,IAAI;cACT,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,SAAS;0BACR,IAAI,CAAC,eAAe;eAC/B,IAAI,CAAC,KAAK;iBACR;CACY,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZAvatar} from \".\";\nimport {AvatarSize} from \"../../beans\";\nimport {getColorTokens} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\nconst colorTokens = getColorTokens().map((token) => token.replace(\"--\", \"\"));\n\n/**\n * Pass at least one prop between `text` and `image`.\n * If prop `image` contains a broken URL, the component will show `text` prop, if given.\n */\nconst StoryMeta = {\n  title: \"ZAvatar\",\n  component: \"z-avatar\",\n  argTypes: {\n    size: {\n      options: Object.values(AvatarSize),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n    textColor: {\n      options: colorTokens,\n      control: {\n        type: \"select\",\n      },\n    },\n    backgroundColor: {\n      options: colorTokens,\n      control: {\n        type: \"select\",\n      },\n    },\n  },\n  args: {\n    size: AvatarSize.MEDIUM,\n    text: \"Avatar\",\n    textColor: \"color-white\",\n    backgroundColor: \"gray700\",\n    image: \"https://www.cinematographe.it/wp-content/uploads/2019/04/Avatar.jpg\",\n  },\n} satisfies Meta<ZAvatar>;\n\nexport default StoryMeta;\n\nexport const Default = {\n  render: (args) =>\n    html`<z-avatar\n      size=\"${args.size}\"\n      text=\"${args.text}\"\n      text-color=\"${args.textColor}\"\n      background-color=\"${args.backgroundColor}\"\n      image=\"${args.image}\"\n    ></z-avatar>`,\n} satisfies StoryObj<ZAvatar>;\n"]}

package/dist/collection/components/z-book-card/index.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { BookCardVariant } from "../../beans";
-import { mobileBreakpoint } from "../../constants/breakpoints";
+import { Breakpoints } from "../../constants/breakpoints";
 import { randomId } from "../../utils/utils";
 /**
  * @slot resources - books resources (extended variant only)
@@ -36,7 +36,7 @@ export class ZBookCard {
     }
     componentWillLoad() {
         this.id = `id-${randomId()}`;
-        const mobileMediaQuery = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`);
+        const mobileMediaQuery = window.matchMedia(`(max-width: ${Breakpoints.MOBILE}px)`);
         this.isMobile = mobileMediaQuery.matches;
         mobileMediaQuery.onchange = (mql) => (this.isMobile = mql.matches);
     }
@@ -124,7 +124,7 @@ export class ZBookCard {
         return (h("div", { class: "action-container" }, h("slot", { name: "footer-cta" })));
     }
     render() {
-        return (h("article", { key: '43075703b3065bf7fc495fe52b3e7ef77759bbec', class: {
+        return (h("article", { key: 'e114133d50e62f5d94d15c3529efa7700a3cd4c3', class: {
                 [this.variant]: true,
                 borderless: !!this.borderless,
             } }, this.renderCard()));

package/dist/collection/components/z-book-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-book-card/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Prop, State, h} from \"@stencil/core\";\nimport {BookCardVariant} from \"../../beans\";\nimport {mobileBreakpoint} from \"../../constants/breakpoints\";\nimport {randomId} from \"../../utils/utils\";\n\n/**\n * @slot resources - books resources (extended variant only)\n * @slot header-cta - header CTA (e.g. bookmark icon - extended and search variant only)\n * @slot tags - card tags (extended and search variant only)\n * @slot footer-cta - footer cta button (search and compact variant only)\n * @cssprop --z-book-card-ribbon-background-color - ribbon backgrund color\n * @cssprop --z-book-card-ribbon-shadow-color - ribbon shadow color\n * @cssprop --z-book-card-compact-width - compact card custom width\n * @cssprop --z-book-card-compact-height - compact card custom height\n */\n@Component({\n  tag: \"z-book-card\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZBookCard {\n  @Element() hostElement: HTMLZBookCardElement;\n\n  /**\n   * Card variant: expanded, compact, search\n   */\n  @Prop()\n  variant: BookCardVariant;\n\n  /**\n   * Cover URL\n   */\n  @Prop()\n  cover: string;\n\n  /**\n   * Card main title\n   */\n  @Prop()\n  operaTitle: string;\n\n  /**\n   * [optional] Card subtitle\n   */\n  @Prop()\n  volumeTitle?: string;\n\n  /**\n   * [optional] Authors\n   */\n  @Prop()\n  authors?: string;\n\n  /**\n   * [optional] Main ISBN\n   */\n  @Prop()\n  isbn?: string;\n\n  /**\n   * [optional] ISBN label\n   */\n  @Prop()\n  isbnLabel = \"\";\n\n  /**\n   * [optional] Ribbon label - expanded and search variant only\n   */\n  @Prop()\n  ribbon?: string;\n\n  /**\n   * [optional] Ribbon icon - expanded and search variant only\n   */\n  @Prop()\n  ribbonIcon?: string;\n\n  /**\n   * [optional] Ribbon interactive - expanded and search variant only\n   */\n  @Prop()\n  ribbonInteractive?: boolean;\n\n  /**\n   * [optional] Borderless card - compact variant only\n   */\n  @Prop()\n  borderless?: boolean;\n\n  /**\n   * [optional] Fallback cover URL\n   */\n  @Prop()\n  fallbackCover?: string;\n\n  /**\n   * [optional] [accessibility] Card title HTML tag\n   */\n  @Prop()\n  operaTitleTag?: string;\n\n  @State()\n  isMobile = false;\n\n  @State()\n  hasResources = false;\n\n  @State()\n  showResources = false;\n\n  /** click on interactive ribbon */\n  @Event()\n  ribbonClick: EventEmitter;\n\n  private emitRibbonClick(): void {\n    this.ribbonClick.emit();\n  }\n\n  private id: string;\n\n  componentWillLoad(): void {\n    this.id = `id-${randomId()}`;\n\n    const mobileMediaQuery = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`);\n    this.isMobile = mobileMediaQuery.matches;\n    mobileMediaQuery.onchange = (mql) => (this.isMobile = mql.matches);\n  }\n\n  componentDidLoad(): void {\n    this.handleResources();\n  }\n\n  private handleResources(): void {\n    if (this.variant !== BookCardVariant.EXPANDED || !this.isMobile) {\n      return;\n    }\n    this.hasResources = this.hostElement.querySelectorAll(\"[slot=resources]\")?.length > 0;\n  }\n\n  private toggleResources(): void {\n    this.showResources = !this.showResources;\n  }\n\n  private renderCard(): HTMLDivElement {\n    switch (this.variant) {\n      case BookCardVariant.EXPANDED:\n        return this.isMobile ? this.renderMobileExpandedCard() : this.renderExpandedCard();\n      case BookCardVariant.COMPACT:\n        return this.renderCompactCard();\n      case BookCardVariant.SEARCH:\n        return this.renderSearchCard();\n    }\n  }\n\n  private renderExpandedCard(): HTMLDivElement {\n    return (\n      <div class=\"wrapper\">\n        {this.renderCover()}\n        <div class=\"content\">\n          <div class=\"top\">\n            <div class=\"info\">\n              <div class=\"left\">\n                {this.renderAuthors()}\n                {this.renderOperaTitle()}\n                {this.renderVolumeTitle()}\n                {this.renderIsbn()}\n              </div>\n              <div class=\"right\">{this.renderHeaderCtaSlot()}</div>\n            </div>\n            {this.renderTagsSlot()}\n          </div>\n          <div class=\"bottom\">{this.renderResourcesSlot()}</div>\n        </div>\n      </div>\n    );\n  }\n\n  private renderMobileExpandedCard(): HTMLDivElement {\n    return (\n      <div class=\"wrapper\">\n        <div class=\"header\">\n          {this.renderOperaTitle()}\n          {this.renderHeaderCtaSlot()}\n        </div>\n        {this.renderCover()}\n        <div class=\"content\">\n          {this.renderTagsSlot()}\n          {this.renderAuthors()}\n          {this.renderVolumeTitle()}\n          {this.renderIsbn()}\n        </div>\n        {this.hasResources && (\n          <div\n            class={{\n              footer: true,\n              open: this.showResources,\n              close: !this.showResources,\n            }}\n          >\n            {!this.showResources && this.renderShowResources()}\n            {this.renderResourcesSlot()}\n            {this.showResources && this.renderShowResources()}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  private renderSearchCard(): HTMLDivElement {\n    return (\n      <div class=\"wrapper-container\">\n        <div class=\"wrapper\">\n          <div class=\"header\">\n            {this.renderOperaTitle()}\n            {this.renderHeaderCtaSlot()}\n          </div>\n          {this.renderCover()}\n          <div class=\"content\">\n            {this.renderTagsSlot()}\n            {this.renderAuthors()}\n            {this.renderVolumeTitle()}\n            {this.renderIsbn()}\n          </div>\n        </div>\n        {this.renderFooterCtaSlot()}\n      </div>\n    );\n  }\n\n  private renderCompactCard(): HTMLDivElement {\n    return (\n      <div class=\"wrapper\">\n        {this.renderCover()}\n        <div class=\"content\">\n          {this.renderAuthors()}\n          {this.renderOperaTitle()}\n          {this.renderVolumeTitle()}\n          {this.renderIsbn()}\n        </div>\n        {this.renderFooterCtaSlot()}\n      </div>\n    );\n  }\n\n  private renderCover(): HTMLDivElement {\n    return (\n      <div class=\"cover\">\n        {this.ribbon && this.variant !== BookCardVariant.COMPACT && this.renderRibbon()}\n        <div class=\"img-wrapper\">\n          <img\n            src={this.cover}\n            onError={() => {\n              if (this.fallbackCover) {\n                this.cover = this.fallbackCover;\n              }\n            }}\n            aria-hidden=\"true\"\n          />\n        </div>\n      </div>\n    );\n  }\n\n  private renderRibbon(): HTMLElement {\n    const content = [\n      this.ribbonIcon && (\n        <z-icon\n          name={this.ribbonIcon}\n          width={16}\n          height={16}\n          fill={\"color-inverse-icon\"}\n        />\n      ),\n      <span>{this.ribbon}</span>,\n    ];\n\n    return this.ribbonInteractive ? (\n      <button\n        class=\"ribbon interactive\"\n        onClick={() => this.emitRibbonClick()}\n      >\n        {content}\n      </button>\n    ) : (\n      <div class=\"ribbon\">{content}</div>\n    );\n  }\n\n  private renderOperaTitle(): HTMLDivElement {\n    const title = this.operaTitleTag\n      ? `<${this.operaTitleTag}>${this.operaTitle}</${this.operaTitleTag}>`\n      : this.operaTitle;\n\n    return (\n      <div\n        class=\"title\"\n        innerHTML={title}\n      />\n    );\n  }\n\n  private renderVolumeTitle(): null | HTMLDivElement {\n    return this.volumeTitle ? <div class=\"subtitle\">{this.volumeTitle}</div> : null;\n  }\n\n  private renderAuthors(): null | HTMLDivElement {\n    return this.authors ? (\n      <div\n        class=\"authors\"\n        aria-description=\"Autori\"\n      >\n        {this.authors}\n      </div>\n    ) : null;\n  }\n\n  private renderIsbn(): null | HTMLDivElement {\n    return this.isbn ? (\n      <div class=\"isbn\">\n        <span\n          class=\"code\"\n          aria-description={`ISBN ${this.isbnLabel}`}\n        >\n          {this.isbn}\n        </span>\n        {this.isbnLabel ? <span class=\"label\"> {this.isbnLabel}</span> : null}\n      </div>\n    ) : null;\n  }\n\n  private renderShowResources(): HTMLButtonElement {\n    return (\n      <button\n        class=\"show-resources\"\n        aria-label={`Risorse del libro ${this.operaTitle}`}\n        aria-expanded={this.showResources.toString()}\n        aria-controls={`resources-${this.id}`}\n        onClick={() => this.toggleResources()}\n      >\n        {this.showResources ? \"Chiudi\" : \"Vedi tutto\"}\n        <z-icon name={this.showResources ? \"chevron-up\" : \"chevron-down\"} />\n      </button>\n    );\n  }\n\n  private renderTagsSlot(): HTMLDivElement {\n    return (\n      <div class=\"tags\">\n        <slot name=\"tags\" />\n      </div>\n    );\n  }\n\n  private renderHeaderCtaSlot(): HTMLSlotElement {\n    return <slot name=\"header-cta\" />;\n  }\n\n  private renderResourcesSlot(): HTMLDivElement {\n    return (\n      <div\n        id={`resources-${this.id}`}\n        class=\"resources\"\n      >\n        <slot\n          name=\"resources\"\n          onSlotchange={() => this.handleResources()}\n        />\n      </div>\n    );\n  }\n\n  private renderFooterCtaSlot(): HTMLDivElement {\n    return (\n      <div class=\"action-container\">\n        <slot name=\"footer-cta\" />\n      </div>\n    );\n  }\n\n  render(): HTMLZBookCardElement {\n    return (\n      <article\n        class={{\n          [this.variant]: true,\n          borderless: !!this.borderless,\n        }}\n      >\n        {this.renderCard()}\n      </article>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-book-card/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Prop, State, h} from \"@stencil/core\";\nimport {BookCardVariant} from \"../../beans\";\nimport {Breakpoints} from \"../../constants/breakpoints\";\nimport {randomId} from \"../../utils/utils\";\n\n/**\n * @slot resources - books resources (extended variant only)\n * @slot header-cta - header CTA (e.g. bookmark icon - extended and search variant only)\n * @slot tags - card tags (extended and search variant only)\n * @slot footer-cta - footer cta button (search and compact variant only)\n * @cssprop --z-book-card-ribbon-background-color - ribbon backgrund color\n * @cssprop --z-book-card-ribbon-shadow-color - ribbon shadow color\n * @cssprop --z-book-card-compact-width - compact card custom width\n * @cssprop --z-book-card-compact-height - compact card custom height\n */\n@Component({\n  tag: \"z-book-card\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZBookCard {\n  @Element() hostElement: HTMLZBookCardElement;\n\n  /**\n   * Card variant: expanded, compact, search\n   */\n  @Prop()\n  variant: BookCardVariant;\n\n  /**\n   * Cover URL\n   */\n  @Prop()\n  cover: string;\n\n  /**\n   * Card main title\n   */\n  @Prop()\n  operaTitle: string;\n\n  /**\n   * [optional] Card subtitle\n   */\n  @Prop()\n  volumeTitle?: string;\n\n  /**\n   * [optional] Authors\n   */\n  @Prop()\n  authors?: string;\n\n  /**\n   * [optional] Main ISBN\n   */\n  @Prop()\n  isbn?: string;\n\n  /**\n   * [optional] ISBN label\n   */\n  @Prop()\n  isbnLabel = \"\";\n\n  /**\n   * [optional] Ribbon label - expanded and search variant only\n   */\n  @Prop()\n  ribbon?: string;\n\n  /**\n   * [optional] Ribbon icon - expanded and search variant only\n   */\n  @Prop()\n  ribbonIcon?: string;\n\n  /**\n   * [optional] Ribbon interactive - expanded and search variant only\n   */\n  @Prop()\n  ribbonInteractive?: boolean;\n\n  /**\n   * [optional] Borderless card - compact variant only\n   */\n  @Prop()\n  borderless?: boolean;\n\n  /**\n   * [optional] Fallback cover URL\n   */\n  @Prop()\n  fallbackCover?: string;\n\n  /**\n   * [optional] [accessibility] Card title HTML tag\n   */\n  @Prop()\n  operaTitleTag?: string;\n\n  @State()\n  isMobile = false;\n\n  @State()\n  hasResources = false;\n\n  @State()\n  showResources = false;\n\n  /** click on interactive ribbon */\n  @Event()\n  ribbonClick: EventEmitter;\n\n  private emitRibbonClick(): void {\n    this.ribbonClick.emit();\n  }\n\n  private id: string;\n\n  componentWillLoad(): void {\n    this.id = `id-${randomId()}`;\n\n    const mobileMediaQuery = window.matchMedia(`(max-width: ${Breakpoints.MOBILE}px)`);\n    this.isMobile = mobileMediaQuery.matches;\n    mobileMediaQuery.onchange = (mql) => (this.isMobile = mql.matches);\n  }\n\n  componentDidLoad(): void {\n    this.handleResources();\n  }\n\n  private handleResources(): void {\n    if (this.variant !== BookCardVariant.EXPANDED || !this.isMobile) {\n      return;\n    }\n    this.hasResources = this.hostElement.querySelectorAll(\"[slot=resources]\")?.length > 0;\n  }\n\n  private toggleResources(): void {\n    this.showResources = !this.showResources;\n  }\n\n  private renderCard(): HTMLDivElement {\n    switch (this.variant) {\n      case BookCardVariant.EXPANDED:\n        return this.isMobile ? this.renderMobileExpandedCard() : this.renderExpandedCard();\n      case BookCardVariant.COMPACT:\n        return this.renderCompactCard();\n      case BookCardVariant.SEARCH:\n        return this.renderSearchCard();\n    }\n  }\n\n  private renderExpandedCard(): HTMLDivElement {\n    return (\n      <div class=\"wrapper\">\n        {this.renderCover()}\n        <div class=\"content\">\n          <div class=\"top\">\n            <div class=\"info\">\n              <div class=\"left\">\n                {this.renderAuthors()}\n                {this.renderOperaTitle()}\n                {this.renderVolumeTitle()}\n                {this.renderIsbn()}\n              </div>\n              <div class=\"right\">{this.renderHeaderCtaSlot()}</div>\n            </div>\n            {this.renderTagsSlot()}\n          </div>\n          <div class=\"bottom\">{this.renderResourcesSlot()}</div>\n        </div>\n      </div>\n    );\n  }\n\n  private renderMobileExpandedCard(): HTMLDivElement {\n    return (\n      <div class=\"wrapper\">\n        <div class=\"header\">\n          {this.renderOperaTitle()}\n          {this.renderHeaderCtaSlot()}\n        </div>\n        {this.renderCover()}\n        <div class=\"content\">\n          {this.renderTagsSlot()}\n          {this.renderAuthors()}\n          {this.renderVolumeTitle()}\n          {this.renderIsbn()}\n        </div>\n        {this.hasResources && (\n          <div\n            class={{\n              footer: true,\n              open: this.showResources,\n              close: !this.showResources,\n            }}\n          >\n            {!this.showResources && this.renderShowResources()}\n            {this.renderResourcesSlot()}\n            {this.showResources && this.renderShowResources()}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  private renderSearchCard(): HTMLDivElement {\n    return (\n      <div class=\"wrapper-container\">\n        <div class=\"wrapper\">\n          <div class=\"header\">\n            {this.renderOperaTitle()}\n            {this.renderHeaderCtaSlot()}\n          </div>\n          {this.renderCover()}\n          <div class=\"content\">\n            {this.renderTagsSlot()}\n            {this.renderAuthors()}\n            {this.renderVolumeTitle()}\n            {this.renderIsbn()}\n          </div>\n        </div>\n        {this.renderFooterCtaSlot()}\n      </div>\n    );\n  }\n\n  private renderCompactCard(): HTMLDivElement {\n    return (\n      <div class=\"wrapper\">\n        {this.renderCover()}\n        <div class=\"content\">\n          {this.renderAuthors()}\n          {this.renderOperaTitle()}\n          {this.renderVolumeTitle()}\n          {this.renderIsbn()}\n        </div>\n        {this.renderFooterCtaSlot()}\n      </div>\n    );\n  }\n\n  private renderCover(): HTMLDivElement {\n    return (\n      <div class=\"cover\">\n        {this.ribbon && this.variant !== BookCardVariant.COMPACT && this.renderRibbon()}\n        <div class=\"img-wrapper\">\n          <img\n            src={this.cover}\n            onError={() => {\n              if (this.fallbackCover) {\n                this.cover = this.fallbackCover;\n              }\n            }}\n            aria-hidden=\"true\"\n          />\n        </div>\n      </div>\n    );\n  }\n\n  private renderRibbon(): HTMLElement {\n    const content = [\n      this.ribbonIcon && (\n        <z-icon\n          name={this.ribbonIcon}\n          width={16}\n          height={16}\n          fill={\"color-inverse-icon\"}\n        />\n      ),\n      <span>{this.ribbon}</span>,\n    ];\n\n    return this.ribbonInteractive ? (\n      <button\n        class=\"ribbon interactive\"\n        onClick={() => this.emitRibbonClick()}\n      >\n        {content}\n      </button>\n    ) : (\n      <div class=\"ribbon\">{content}</div>\n    );\n  }\n\n  private renderOperaTitle(): HTMLDivElement {\n    const title = this.operaTitleTag\n      ? `<${this.operaTitleTag}>${this.operaTitle}</${this.operaTitleTag}>`\n      : this.operaTitle;\n\n    return (\n      <div\n        class=\"title\"\n        innerHTML={title}\n      />\n    );\n  }\n\n  private renderVolumeTitle(): null | HTMLDivElement {\n    return this.volumeTitle ? <div class=\"subtitle\">{this.volumeTitle}</div> : null;\n  }\n\n  private renderAuthors(): null | HTMLDivElement {\n    return this.authors ? (\n      <div\n        class=\"authors\"\n        aria-description=\"Autori\"\n      >\n        {this.authors}\n      </div>\n    ) : null;\n  }\n\n  private renderIsbn(): null | HTMLDivElement {\n    return this.isbn ? (\n      <div class=\"isbn\">\n        <span\n          class=\"code\"\n          aria-description={`ISBN ${this.isbnLabel}`}\n        >\n          {this.isbn}\n        </span>\n        {this.isbnLabel ? <span class=\"label\"> {this.isbnLabel}</span> : null}\n      </div>\n    ) : null;\n  }\n\n  private renderShowResources(): HTMLButtonElement {\n    return (\n      <button\n        class=\"show-resources\"\n        aria-label={`Risorse del libro ${this.operaTitle}`}\n        aria-expanded={this.showResources.toString()}\n        aria-controls={`resources-${this.id}`}\n        onClick={() => this.toggleResources()}\n      >\n        {this.showResources ? \"Chiudi\" : \"Vedi tutto\"}\n        <z-icon name={this.showResources ? \"chevron-up\" : \"chevron-down\"} />\n      </button>\n    );\n  }\n\n  private renderTagsSlot(): HTMLDivElement {\n    return (\n      <div class=\"tags\">\n        <slot name=\"tags\" />\n      </div>\n    );\n  }\n\n  private renderHeaderCtaSlot(): HTMLSlotElement {\n    return <slot name=\"header-cta\" />;\n  }\n\n  private renderResourcesSlot(): HTMLDivElement {\n    return (\n      <div\n        id={`resources-${this.id}`}\n        class=\"resources\"\n      >\n        <slot\n          name=\"resources\"\n          onSlotchange={() => this.handleResources()}\n        />\n      </div>\n    );\n  }\n\n  private renderFooterCtaSlot(): HTMLDivElement {\n    return (\n      <div class=\"action-container\">\n        <slot name=\"footer-cta\" />\n      </div>\n    );\n  }\n\n  render(): HTMLZBookCardElement {\n    return (\n      <article\n        class={{\n          [this.variant]: true,\n          borderless: !!this.borderless,\n        }}\n      >\n        {this.renderCard()}\n      </article>\n    );\n  }\n}\n"]}