@zanichelli/albe-web-components 11.1.0 → 12.0.0

package/dist/collection/components/buttons/z-toggle-button/styles.css

@@ -1,16 +1,18 @@
 button {
+  display: flex;
   height: 36px;
+  align-items: center;
   padding-right: calc(var(--space-unit) * 2);
   padding-left: 0;
   border: var(--border-size-medium) solid;
   border-color: transparent;
-  background-color: var(--bg-white);
+  background-color: var(--color-surface01);
   border-radius: var(--border-radius);
   box-shadow: 0 0 4px 0 rgb(0 0 0 / 20%);
-  color: var(--myz-blue);
+  color: var(--color-primary01);
   cursor: pointer;
-  fill: var(--myz-blue);
-  font-family: var(--dashboard-font);
+  fill: var(--color-primary01);
+  font-family: var(--font-family-sans);
   font-size: 14px;
   font-weight: var(--font-sb);
   outline: none;
@@ -22,26 +24,24 @@ button::-moz-focus-inner {
 }
 
 button:hover {
-  color: var(--myz-blue-dark);
-  fill: var(--myz-blue-dark);
+  color: var(--color-hover-primary);
+  fill: var(--color-hover-primary);
 }
 
 button:focus {
   box-shadow: var(--shadow-focus-primary);
-  color: var(--myz-blue);
-  fill: var(--myz-blue);
 }
 
 button:active {
-  border-color: var(--myz-blue-light);
-  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 40%);
-  color: var(--myz-blue-light);
-  fill: var(--myz-blue-light);
+  border-color: var(--color-pressed-primary);
+  box-shadow: var(--shadow-2);
+  color: var(--color-pressed-primary);
+  fill: var(--color-pressed-primary);
 }
 
 button:disabled {
-  color: var(--text-grey-700);
-  fill: var(--text-grey-700);
+  color: var(--color-disabled02);
+  fill: var(--color-disabled02);
 }
 
 z-icon {

package/dist/collection/components/file-upload/z-file-upload/index.js

@@ -210,7 +210,7 @@ export class ZFileUpload {
         "mutable": false,
         "complexType": {
           "original": "ButtonVariant",
-          "resolved": "ButtonVariant.DARK_BG | ButtonVariant.PRIMARY | ButtonVariant.SECONDARY | ButtonVariant.TERTIARY",
+          "resolved": "ButtonVariant.PRIMARY | ButtonVariant.SECONDARY | ButtonVariant.TERTIARY",
           "references": {
             "ButtonVariant": {
               "location": "import",

package/dist/collection/components/indicators/z-stepper/styles.css

@@ -7,7 +7,7 @@
   flex-direction: row;
   padding: 0;
   margin: 0;
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
   list-style: none;
 }

package/dist/collection/components/indicators/z-stepper-item/styles.css

@@ -1,7 +1,7 @@
 :host {
   position: relative;
   width: calc(var(--space-unit) * 5);
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }
 
@@ -12,13 +12,13 @@
 :host(:not(:last-child))::after {
   position: absolute;
   z-index: 1;
-  top: calc(var(--space-unit) * 4);
+  top: calc(var(--space-unit) * 4 - var(--border-size-medium) / 2);
   right: calc(var(--space-unit) * 2);
   left: calc(var(--space-unit) * 3);
   display: block;
   width: auto;
-  border-bottom: solid 2px var(--bg-grey-700);
-  margin: 0 calc(-1 * calc(var(--space-unit) * 2)) 0 calc(var(--space-unit) * 2);
+  border-bottom: var(--border-size-medium) solid var(--color-disabled02);
+  margin: 0 calc(var(--space-unit) * -2) 0 calc(var(--space-unit) * 2);
   content: "";
 }
 
@@ -60,11 +60,11 @@
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
-  border: 2px solid var(--myz-blue);
+  border: var(--border-size-medium) solid var(--color-primary01);
   margin: calc(var(--space-unit) * 2);
-  background: var(--bg-white);
+  background: var(--color-surface01);
   border-radius: 50%;
-  color: var(--myz-blue);
+  color: var(--color-primary01);
   content: counter(stepper);
   font-size: 14px;
   font-weight: var(--font-sb);
@@ -72,9 +72,9 @@
 }
 
 :host([pressed]:not([disabled])) .indicator {
-  border-color: var(--myz-blue-dark);
-  background: var(--myz-blue-dark);
-  color: var(--text-white);
+  border-color: var(--color-active-primary);
+  background: var(--color-active-primary);
+  color: var(--color-text-inverse);
 }
 
 :host(:not([disabled]):focus-within) .indicator {
@@ -82,19 +82,19 @@
 }
 
 :host([disabled]) .indicator {
-  border-color: currentcolor;
-  background: var(--bg-grey-200);
-  color: var(--text-grey-700);
+  border-color: var(--color-disabled02);
+  background: var(--color-disabled01);
+  color: var(--color-disabled03);
 }
 
 /* Tablet breakpoint */
-@media only screen and (min-width: 768px) {
+@media (min-width: 768px) {
   :host {
     width: calc(var(--space-unit) * 10);
   }
 
   :host(:not(:last-child))::after {
-    top: calc(var(--space-unit) * 5);
+    top: calc(var(--space-unit) * 5 - var(--border-size-medium) / 2);
     left: calc(var(--space-unit) * 8);
   }
 

package/dist/collection/components/inputs/z-combobox/styles.css

@@ -14,9 +14,9 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 calc(var(--space-unit) * 1.5);
-  border: var(--border-size-small) solid var(--bg-grey-700);
+  border: var(--border-size-small) solid var(--color-surface04);
   margin: 0;
-  background-color: var(--bg-white);
+  background-color: var(--color-input-field01);
   border-radius: var(--border-radius-small);
   cursor: pointer;
 }
@@ -36,7 +36,7 @@
 }
 
 :host > div > .header:hover {
-  outline: var(--border-size-medium) solid var(--gray700);
+  outline: var(--border-size-medium) solid var(--color-surface04);
   outline-offset: -2px;
 }
 
@@ -52,7 +52,7 @@
 :host > div > .header > p.body-3 {
   padding: var(--space-unit) 0;
   margin: 0;
-  color: var(--text-grey-800);
+  color: var(--color-text01);
 }
 
 :host > div > .header > p.body-3 > span {
@@ -60,7 +60,7 @@
 }
 
 :host > div > .header > z-icon {
-  fill: var(--text-grey-800);
+  fill: var(--color-icon02);
   transform: rotate(360deg);
   transition: all 200ms linear;
 }
@@ -72,7 +72,7 @@
 }
 
 :host > div.open > .header {
-  border: var(--border-size-small) solid var(--blue500);
+  border: var(--border-size-small) solid var(--color-primary01);
   border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
 }
 
@@ -86,7 +86,7 @@
 }
 
 :host > div.disabled .header > p.body-3 {
-  color: var(--text-grey-700);
+  color: var(--color-disabled02);
 }
 
 :host > div.disabled .header > z-icon:last-child {
@@ -94,7 +94,7 @@
 }
 
 :host > div.open > .header > z-icon {
-  fill: var(--text-grey-800);
+  fill: var(--color-icon02);
   transform: rotate(180deg);
   transition: all 200ms linear;
 }
@@ -105,7 +105,7 @@
   padding: var(--space-unit) calc(var(--space-unit) * 2);
   border: var(--border-size-small) solid var(--gray200);
   border-top: 0;
-  background-color: var(--bg-white);
+  background-color: var(--color-input-field01);
   border-radius: 0;
 }
 
@@ -113,8 +113,7 @@
   overflow: auto;
   max-height: 235px;
   padding: 0;
-  scrollbar-color: var(--myz-blue) var(--gray200);
-  scrollbar-width: thin;
+  scrollbar-color: var(--color-primary01) transparent;
 }
 
 :host > div.open > div.open-combo-data > z-input {
@@ -130,14 +129,13 @@
 
 ::-webkit-scrollbar {
   width: 10px;
-  background: linear-gradient(90deg, var(--bg-white) 2px, var(--bg-grey-200) 4px, var(--bg-white) 8px);
+  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
   border-radius: var(--border-radius);
 }
 
 ::-webkit-scrollbar-thumb {
   width: 10px;
-  background-color: var(--myz-blue);
-  border-radius: var(--border-radius);
+  background-color: var(--color-primary01);
 }
 
 :host > div.open > z-input {
@@ -145,7 +143,7 @@
   z-index: 1;
   width: 238px;
   margin: 0 calc(var(--space-unit) * 2);
-  color: var(--myz-blue);
+  color: var(--color-primary01);
 }
 
 :host > div.open > div.open-combo-data > div.search {
@@ -159,8 +157,7 @@
   overflow: auto;
   max-height: 180px;
   padding: var(--space-unit) calc(var(--space-unit) * 2);
-  scrollbar-color: var(--myz-blue) var(--bg-grey-200);
-  scrollbar-width: thin;
+  scrollbar-color: var(--color-primary01) transparent;
 }
 
 :host > div.open > div.open-combo-data > div.search > div {
@@ -171,9 +168,9 @@
 :host > div.open > div.open-combo-data > div.search > div > a {
   display: inline-block;
   height: 44px;
-  color: var(--myz-blue);
+  color: var(--color-primary01);
   cursor: pointer;
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-size: 14px;
   font-weight: var(--font-sb);
   line-height: 44px;

package/dist/collection/components/inputs/z-searchbar/index.js

@@ -492,7 +492,7 @@ export class ZSearchbar {
         "mutable": false,
         "complexType": {
           "original": "ButtonVariant",
-          "resolved": "ButtonVariant.DARK_BG | ButtonVariant.PRIMARY | ButtonVariant.SECONDARY | ButtonVariant.TERTIARY",
+          "resolved": "ButtonVariant.PRIMARY | ButtonVariant.SECONDARY | ButtonVariant.TERTIARY",
           "references": {
             "ButtonVariant": {
               "location": "import",

package/dist/collection/components/list/z-list-element/styles.css

@@ -4,7 +4,7 @@
 
 :host > .container,
 :host > .container-contextual-menu {
-  --background-color-list-element: var(--bg-white);
+  --background-color-list-element: var(--color-surface01);
   --background-hover-color-list-element: var(--color-surface02);
   --background-active-color-list-element: var(--color-surface02);
 

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

@@ -213,6 +213,10 @@ z-searchbar {
   column-gap: calc(var(--space-unit) * 2);
 }
 
+.heading-stuck .heading-title {
+  overflow: hidden;
+}
+
 .heading-stuck .heading-title > *,
 .heading-stuck .heading-title ::slotted([slot="stucked-title"]) {
   display: block;

package/dist/collection/components/notification/z-info-box/styles.css

@@ -1,5 +1,5 @@
 :host {
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }
 
@@ -7,17 +7,17 @@
   display: flex;
   width: inherit;
   padding: calc(var(--space-unit) * 2);
-  background: var(--accent-lighter);
+  background: var(--color-primary03);
   border-radius: var(--border-radius);
 }
 
 :host > div > slot {
-  color: var(--text-grey-800);
+  color: var(--color-text01);
   font-size: 14px;
 }
 
 :host > div > z-icon {
   margin-left: calc(var(--space-unit) * 2);
   cursor: pointer;
-  fill: var(--myz-blue);
+  fill: var(--color-primary01);
 }

package/dist/collection/components/panel/z-panel-elem/styles.css

@@ -1,6 +1,6 @@
 :host {
   width: inherit;
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family sans);
   font-weight: var(--font-rg);
 }
 

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

@@ -6,9 +6,9 @@ export class ZAvatar {
     /** [optional] Avatar size */
     this.size = AvatarSize.MEDIUM;
     /** [optional] Avatar text color */
-    this.textColor = "text-white";
+    this.textColor = "color-white";
     /** [optional] Avatar background color */
-    this.backgroundColor = "bg-grey-700";
+    this.backgroundColor = "gray700";
     if (((_a = this.text) === null || _a === void 0 ? void 0 : _a.length) === 0 && ((_b = this.image) === null || _b === void 0 ? void 0 : _b.length) === 0) {
       console.warn("z-avatar must contain at least one prop between text and image");
     }
@@ -100,7 +100,7 @@ export class ZAvatar {
         },
         "attribute": "text-color",
         "reflect": false,
-        "defaultValue": "\"text-white\""
+        "defaultValue": "\"color-white\""
       },
       "backgroundColor": {
         "type": "string",
@@ -118,7 +118,7 @@ export class ZAvatar {
         },
         "attribute": "background-color",
         "reflect": false,
-        "defaultValue": "\"bg-grey-700\""
+        "defaultValue": "\"gray700\""
       },
       "image": {
         "type": "string",

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

@@ -3,7 +3,7 @@
   overflow: hidden;
   align-items: center;
   justify-content: center;
-  background-color: var(--bg-grey-700);
+  background-color: var(--gray700);
   border-radius: 50%;
   font-family: var(--font-family-sans);
   text-transform: uppercase;

package/dist/collection/components/z-book-card/styles.css

@@ -54,7 +54,7 @@
   border-radius: 0 var(--border-radius) var(--border-radius) 0;
   box-shadow: var(--shadow-2);
   color: var(--color-text04);
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-size: var(--font-size-2);
   font-weight: var(--font-sb);
   line-height: initial;

package/dist/collection/components/z-ghost-loading/styles.css

@@ -3,8 +3,8 @@
   overflow: hidden;
   width: 100%;
   height: 100%;
-  background: var(--bg-neutral-100);
-  border-radius: 4px;
+  background: var(--color-surface02);
+  border-radius: var(--border-radius);
   transform: translate3d(0, 0, 0);
 }
 
@@ -15,12 +15,12 @@
   animation: progress 1.6s ease-in-out infinite;
   background-image: linear-gradient(
     90deg,
-    var(--bg-neutral-100) 0%,
-    var(--bg-neutral-150) 95%,
-    var(--bg-neutral-100) 100%
+    var(--color-surface02) 0%,
+    var(--color-surface03) 95%,
+    var(--color-surface02) 100%
   );
-  box-shadow: #e8ebee20 0 0 1px;
-  content: " ";
+  content: "";
+  filter: blur(6px);
 }
 
 @keyframes progress {

package/dist/collection/components/z-skip-to-content/styles.css

@@ -34,14 +34,14 @@
 }
 
 :host.dark {
-  background-color: var(--bg-grey-800);
-  color: var(--color-white);
+  background-color: var(--color-surface05);
+  color: var(--color-surface01);
 }
 
 :host.light {
-  border: 2px solid var(--text-grey-800);
-  background-color: var(--bg-white);
-  color: var(--text-grey-800);
+  border: var(--border-size-medium) solid var(--color-surface05);
+  background-color: var(--color-surface01);
+  color: var(--color-text01);
 }
 
 /* Tablet breakpoint */
@@ -55,7 +55,7 @@
 @media (min-width: 1152px) {
   :host > .link-container {
     padding: 0 calc(var(--space-unit) * 3);
-    border-right: 1px solid var(--bg-grey-800);
+    border-right: var(--border-size-small) solid var(--color-surface05);
   }
 
   :host > .link-container > a.z-link.link-invisible {
@@ -76,6 +76,6 @@
   }
 
   :host.dark > .link-container {
-    border-right: 1px solid var(--bg-white);
+    border-right: var(--border-size-small) solid var(--color-surface01);
   }
 }

package/dist/collection/deprecated/z-link/styles.css

@@ -17,7 +17,7 @@
 a {
   display: inline-flex;
   align-items: center;
-  padding: calc(var(--space-unit) * 0.5) 0;
+  padding: calc(var(--space-unit) / 2) 0;
   border-top: var(--border-size-medium) solid transparent;
   border-bottom: var(--border-size-medium) solid transparent;
   color: var(--color-link-primary);
@@ -136,14 +136,14 @@ a.white,
 a.white:active,
 a.white:hover,
 a.white.active {
-  color: var(--bg-white);
-  fill: var(--bg-white);
+  color: var(--color-white);
+  fill: var(--color-white);
   text-decoration: none;
 }
 
 a.white:visited {
-  color: var(--bg-white);
-  fill: var(--bg-white);
+  color: var(--color-white);
+  fill: var(--color-white);
 }
 
 a.white:hover,

package/dist/collection/deprecated/z-table-deprecated/z-table-body/styles.css

@@ -1,6 +1,6 @@
 :host {
   display: table-row-group;
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }
 

package/dist/collection/deprecated/z-table-deprecated/z-table-cell/styles.css

@@ -1,8 +1,8 @@
 :host {
   display: table-cell;
-  border-bottom: var(--border-size-small) solid var(--bg-grey-200);
+  border-bottom: var(--border-size-small) solid var(--color-surface03);
   background-color: var(--color-white);
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }
 

package/dist/collection/deprecated/z-table-deprecated/z-table-deprecated/styles.css

@@ -2,7 +2,7 @@ z-table-deprecated {
   display: block;
   width: 100%;
   background-color: var(--color-white);
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
   overflow-x: auto;
 }
@@ -15,7 +15,7 @@ z-table-deprecated > div.table {
 
 z-table-deprecated > div.table-bordered > z-table-body > z-table-row > z-table-cell:not(:last-child),
 z-table-deprecated > div.table-bordered > z-table-head > z-table-header-row > z-table-header:not(:last-child) {
-  border-right: var(--border-size-small) solid var(--bg-grey-200);
+  border-right: var(--border-size-small) solid var(--color-surface03);
 }
 
 /** Remove border right to first cell if row is expandable */
@@ -64,11 +64,11 @@ z-table-empty-box {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  border-bottom: var(--border-size-small) solid var(--bg-grey-200);
+  border-bottom: var(--border-size-small) solid var(--color-surface03);
 }
 
 z-table-empty-box.bordered {
-  border-left: var(--border-size-small) solid var(--bg-grey-200);
+  border-left: var(--border-size-small) solid var(--color-surface03);
 }
 
 .error-message {
@@ -84,7 +84,7 @@ z-table-empty-box.bordered {
 .error-content {
   display: flex;
   padding: calc(var(--space-unit) * 3);
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
 }
 
 .error-content > img {

package/dist/collection/deprecated/z-table-deprecated/z-table-empty-box/styles.css

@@ -1,7 +1,7 @@
 :host {
   display: block;
   padding: calc(var(--space-unit)) calc(var(--space-unit) * 3) calc(var(--space-unit) * 3) calc(var(--space-unit) * 3);
-  background-color: var(--bg-white);
+  background-color: var(--color-surface01);
 }
 
 ::slotted(*) {

package/dist/collection/deprecated/z-table-deprecated/z-table-footer/styles.css

@@ -1,5 +1,5 @@
 :host {
   display: table-footer-group;
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }

package/dist/collection/deprecated/z-table-deprecated/z-table-head/styles.css

@@ -1,5 +1,5 @@
 :host {
   display: table-header-group;
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }

package/dist/collection/deprecated/z-table-deprecated/z-table-header/styles.css

@@ -3,7 +3,7 @@
   display: table-cell;
   border-bottom: var(--border-size-medium) solid var(--gray200);
   background-color: var(--gray50);
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-sb);
   text-align: start;
 }

package/dist/collection/deprecated/z-table-deprecated/z-table-row/styles.css

@@ -32,7 +32,7 @@ z-table-row[expanded-type="padding"] > z-table-cell:nth-child(2) {
 }
 
 z-table-row[expanded-type]:hover > z-table-cell:first-child {
-  fill: var(--myz-blue-dark);
+  fill: var(--color-hover-primary);
 }
 
 z-table-row[expanded] > z-table-cell {

package/dist/collection/deprecated/z-table-deprecated/z-table-sticky-footer/styles.css

@@ -2,10 +2,10 @@
   position: sticky;
   left: 0;
   display: block;
-  padding: var(--basex2);
-  border-width: var(--border-size-small) 0 var(--border-base);
+  padding: calc(var(--space-unit) * 2);
+  border-width: var(--border-size-small) 0 var(--border-size-medium);
   border-style: solid;
-  border-color: var(--gray200);
-  background-color: var(--bg-white);
+  border-color: var(--color-surface03);
+  background-color: var(--color-surface01);
   font-weight: var(--font-rg);
 }

package/dist/collection/snowflakes/myz/card/z-myz-card/styles.css

@@ -18,7 +18,7 @@ div {
 div.real,
 div.trial,
 div.temp {
-  border-color: var(--accent);
+  border-color: var(--blue100);
 }
 
 /* HIDDEN status */

package/dist/collection/snowflakes/myz/card/z-myz-card-footer/styles.css

@@ -18,7 +18,7 @@ footer {
 footer.real,
 footer.trial,
 footer.temp {
-  border-top: var(--border-size-medium) solid var(--accent);
+  border-top: var(--border-size-medium) solid var(--blue100);
 }
 
 footer .bold {
@@ -40,8 +40,7 @@ footer > p {
 }
 
 footer.isopen > p {
-  /* TODO: non esiste l'equivalente nei token nuovi: implementare */
-  background-color: var(--bg-neutral-200);
+  background-color: var(--gray200);
   font-size: 14px;
   font-weight: var(--font-sb);
   transition: all 200ms linear;
@@ -50,7 +49,7 @@ footer.isopen > p {
 footer.isopen.real > p,
 footer.isopen.trial > p,
 footer.isopen.temp > p {
-  background-color: var(--accent);
+  background-color: var(--blue100);
 }
 
 footer .visible {
@@ -178,5 +177,5 @@ div.wrapper.isopen ::slotted([slot="content"]) {
   bottom: 0;
   height: 128px;
   padding: calc(var(--space-unit) * 2);
-  border-color: var(--accent);
+  border-color: var(--blue100);
 }