@zanichelli/albe-web-components 19.3.0-RC5 → 19.3.0-rc1

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

@@ -1,7 +1,7 @@
 :host {
   --z-searchbar-tag-text-color: var(--color-primary03);
   --z-searchbar-tag-bg: var(--color-hover-primary);
-  --z-searchbar-item-height: 44px;
+  --z-searchbar-item-height: 2.75rem;
 
   z-index: 15;
   display: flex;
@@ -11,16 +11,12 @@
 }
 
 :host,
-* {
+*,
+::after,
+::before {
   box-sizing: border-box;
 }
 
-:host::part(list-item-container) {
-  display: block;
-  min-height: unset;
-  padding: 0;
-}
-
 .input-container {
   position: relative;
   display: flex;
@@ -28,199 +24,151 @@
   flex-direction: column;
 }
 
-.results-wrapper {
-  position: absolute;
-  top: calc(100% - 1px);
-  left: 0;
-  width: 100%;
-  padding: calc(var(--space-unit) / 4);
-  border: var(--border-size-small) solid var(--color-surface03);
-  border-top: none;
-  background: var(--color-surface01);
+.input-container z-input {
+  z-index: 1;
 }
 
 .results {
+  --item-icon-size: 1rem;
+  --z-icon-height: var(--item-icon-size);
+  --z-icon-width: var(--item-icon-size);
+  --item-inline-padding: calc(var(--space-unit) * 1.5);
+  --item-col-gap: var(--space-unit);
+
+  position: absolute;
+  top: calc(100% - 1px);
+  left: 0;
   overflow: auto;
+  width: 100%;
   max-height: var(--z-searchbar-results-height, 540px);
-  padding: calc(var(--space-unit) / 2) calc(var(--space-unit) * 1.5);
-}
-
-.results::-webkit-scrollbar {
-  width: 6px;
-  background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);
-}
-
-.results::-webkit-scrollbar-thumb {
-  background-color: var(--color-primary01);
-}
-
-.results::-webkit-scrollbar-thumb:hover {
-  background-color: var(--color-hover-primary);
-}
-
-/* Firefox scrollbar */
-@supports not selector(.results::-webkit-scrollbar-track) {
-  .results {
-    scrollbar-color: var(--color-primary01) transparent;
-  }
+  border: var(--border-size-small) solid var(--color-form-surface03);
+  border-top: none;
+  background: var(--color-form-background);
 }
 
-.results .category-heading {
-  display: block;
-  font-size: var(--font-size-2);
-  font-weight: var(--font-rg);
-  line-height: var(--font-size-3);
-}
+.results z-list-element {
+  --background-color-list-element: var(--color-form-background);
 
-.results .category-heading > * {
+  position: relative;
   display: block;
 }
 
-.results .category-heading > .category {
-  color: var(--color-text05);
-  font-style: italic;
+.results > z-list > z-list-element::part(list-item-container) {
+  padding: 0 var(--item-inline-padding);
 }
 
-.results .category-heading > .subcategory {
-  margin-top: var(--space-unit);
-  color: var(--color-default-text);
-  text-transform: uppercase;
-}
-
-.results z-list-element {
+.results z-list-element > .list-item {
   position: relative;
-  display: block;
-}
-
-z-list-element > .item-search {
-  padding: var(--space-unit) 0;
+  display: flex;
+  align-items: center;
+  padding: calc(var(--space-unit) * 1.25) calc(var(--space-unit) / 4);
+  background-color: transparent;
+  color: var(--color-form-default-text);
+  fill: var(--color-form-default-icon);
+  gap: var(--item-col-gap);
 }
 
-z-list z-list-element::before {
-  position: absolute;
-  z-index: 100;
-  top: 5px;
-  left: -20px;
-  width: 8px;
-  height: 1em;
-  border-bottom: 1px solid var(--color-disabled01-icon);
-  border-left: 1px solid var(--color-disabled01-icon);
-  content: "";
+.results z-list-element > .list-item:hover {
+  background-color: var(--gray100); /* TODO: use correct form-related token when available */
   cursor: pointer;
 }
 
-z-list z-list-element::after {
-  position: absolute;
-  z-index: 100;
-  top: 5px;
-  left: -20px;
-  width: 8px;
-  height: 100%;
-  border-left: 1px solid var(--color-disabled01-icon);
-  content: "";
-  cursor: pointer;
+.results z-list-element > .list-item:focus-visible {
+  z-index: 1;
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
 }
 
-z-list z-list-element:last-child::after {
-  display: none;
+/* list elements separator */
+.results > z-list > z-list-element:not(:last-child) > .list-item,
+.results z-list-group:not(:last-child) > z-list-element:not(.category-heading) {
+  border-bottom: 1px solid var(--color-form-surface03);
 }
 
-z-list > z-list-element::before,
-z-list > z-list-element::after,
-z-list > z-list-group > z-list-element::before,
-z-list > z-list-group > z-list-element::after {
-  display: none;
+.results z-list-group {
+  padding: 0 var(--item-inline-padding);
 }
 
-z-list > div.children-node {
-  padding-left: calc(var(--space-unit) * 3);
+.results z-list-group > z-list-element::part(list-item-container) {
+  padding: 0;
 }
 
-.results z-list-element > .list-element {
-  display: flex;
-  justify-content: space-between;
-  padding: calc(var(--space-unit) * 1.25) 0;
-  cursor: pointer;
+.results .sub-list {
+  padding-left: calc(var(--item-icon-size) + var(--item-col-gap));
 }
 
-.results z-list-element > .list-element:focus-visible {
-  box-shadow: var(--shadow-focus-primary);
-  outline: none;
+.results .sub-list z-list-element::part(list-item-container) {
+  padding: 0;
 }
 
-.results z-list-element > .list-element .item.ellipsis {
-  overflow: hidden;
+.results .sub-list z-list-element > .list-item {
+  position: relative;
 }
 
-.results z-list-element .list-element::after {
+/* tree indicators */
+.results .sub-list > z-list-element:not(:last-child)::before,
+.results .sub-list > z-list-element > .list-item::before {
   position: absolute;
   top: 0;
-  right: 0;
-  display: block;
-  width: 100%;
-  height: 44px;
+  left: calc(0px - var(--item-col-gap) - var(--item-icon-size) / 2 + 1px);
+  border-left: 1px solid var(--color-form-surface03);
   content: "";
-  transform: translateX(-100%);
 }
 
-.results z-list-element .list-element.focused.hovered::after {
-  padding-left: 6px;
+/* "|" tree indicator */
+.results .sub-list > z-list-element:not(:last-child)::before {
+  top: -4px;
+  height: calc(100% + 4px);
 }
 
-.results z-list-element > .list-element:hover,
-.results z-list-element > .list-element:hover::after {
-  background-color: var(--color-background);
-  cursor: pointer;
+/* "—" tree indicator */
+.results .sub-list z-list-element > .list-item::before {
+  width: 14px;
+  height: calc(var(--z-searchbar-item-height) / 2);
+  border-bottom: 1px solid var(--color-form-surface03);
 }
 
-.results z-list-element > .list-element > z-tag {
-  border: 1px solid var(--gray800);
-  font-size: var(--font-size-1);
-  font-weight: var(--font-sb);
-
-  --z-tag-bg: var(--z-searchbar-tag-bg);
-  --z-tag-text-color: var(--z-searchbar-tag-text-color);
+.results .category-heading > .category {
+  font-style: italic;
 }
 
-.results .item {
-  --z-icon-height: 12px;
-  --z-icon-width: 12px;
+.results .category-heading > .subcategory {
+  text-transform: uppercase;
+}
 
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: flex-start;
-  color: var(--color-default-text);
-  column-gap: calc(var(--space-unit) * 1.5);
-  fill: var(--color-default-icon);
-  font-size: var(--font-size-2);
-  line-height: var(--font-size-6);
+.results z-list-element > .list-item .ellipsis {
+  overflow: hidden;
 }
 
-.results .item.ellipsis > .item-label {
+.results .ellipsis > .item-label {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.results .item > .item-label mark {
+.results .item-label mark {
   background: var(--color-primary03);
+  color: var(--color-default-text);
 }
 
-.results .item.item-search {
-  --z-icon-height: 16px;
-  --z-icon-width: 16px;
+.results .list-item > z-tag {
+  --z-tag-bg: var(--z-searchbar-tag-bg);
+  --z-tag-text-color: var(--z-searchbar-tag-text-color);
+
+  margin-left: auto;
+  white-space: nowrap;
 }
 
 .results .item-show-all {
+  width: 100%;
+  color: var(--color-primary01);
+  cursor: pointer;
   text-align: center;
 }
 
 .results .item-no-results {
   display: block;
-  font-size: var(--font-size-2);
   font-style: italic;
-  line-height: var(--font-size-5);
 }
 
 .results .item-no-results > ul {
@@ -228,70 +176,8 @@ z-list > div.children-node {
   margin: var(--space-unit);
 }
 
-/* Tablet breakpoint */
 @media (min-width: 768px) {
-  .results .category-heading {
-    font-size: var(--font-size-3);
-    line-height: var(--font-size-6);
-  }
-
-  .results .item {
-    font-size: var(--font-size-3);
-    line-height: var(--font-size-6);
-  }
-
-  .results .item.item-search {
-    --z-icon-height: 18px;
-    --z-icon-width: 18px;
-  }
-
-  .results .item.ellipsis > .item-label {
-    height: 1.5rem;
-  }
-
-  .results z-list-element > .list-element > z-tag {
-    min-width: max-content;
-  }
-}
-
-/* Desktop breakpoint */
-@media (min-width: 1152px) {
-  .results .item {
-    cursor: pointer;
-  }
-
-  .results .item-no-results {
-    cursor: default;
-    font-size: var(--font-size-3);
-    line-height: var(--font-size-6);
+  .results {
+    --item-icon-size: 1.125rem;
   }
 }
-
-:host([size="small"]) .results :is(.item, .category-heading),
-:host([size="x-small"]) .results :is(.item, .category-heading) {
-  font-size: var(--font-size-2);
-}
-
-:host([size="small"]) .results .item:not(.has-category),
-:host([size="x-small"]) .results .item:not(.has-category) {
-  --z-icon-height: 16px;
-  --z-icon-width: 16px;
-}
-
-:host([size="small"]) z-list-element > .list-element,
-:host([size="small"]) z-list-element > .item-search {
-  padding: calc(var(--space-unit) * 0.75) 0;
-}
-
-:host([size="x-small"]) z-list-element > .list-element,
-:host([size="x-small"]) z-list-element > .item-search {
-  padding: calc(var(--space-unit) / 2) 0;
-}
-
-:host([size="small"]) z-list-element .list-element::after {
-  height: 36px;
-}
-
-:host([size="x-small"]) z-list-element .list-element::after {
-  height: 32px;
-}

package/dist/collection/components/z-skip-to-content/index.js

@@ -45,7 +45,7 @@ export class ZSkipToContent {
         this.visible = false;
     }
     render() {
-        return (h(Host, { key: '453b88d07dba674089b87d0e203154d57967ae20', class: {
+        return (h(Host, { key: 'b0c2efcd257373ca8473d2f8135dc5c5d69e6d8f', class: {
                 [this.variant]: true,
                 "skip-to-content-visible": this.visible,
             } }, this.links.map((link, i) => {

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

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ZStepper {
     render() {
-        return (h(Host, { key: 'ebb63998048529b08157000dd0b6e444732ccb28', role: "navigation" }, h("slot", { key: '14743c8ee6a293c944b32b522ff78e763be263c2' })));
+        return (h(Host, { key: '31e5a5533c2aa92a12e0799f0fe576eb0e22d75e', role: "navigation" }, h("slot", { key: '7851acea6ba207cec933a7565542c5793104ece2' })));
     }
     static get is() { return "z-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-stepper-item/index.js

@@ -8,7 +8,7 @@ export class ZStepperItem {
         return Object.assign(Object.assign(Object.assign(Object.assign({}, href), role), current), tabindex);
     }
     render() {
-        return (h(Host, { key: '7aa1de5d716837aadddf7f403322ff3cd296848e', role: "listitem" }, h("button", Object.assign({ key: 'beb11602a3c794d7a745ab82a58d033b6e0752e5', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: '892e9dc3c317594f13616a6f3581ad2451721cf1', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: '4e91ebaf7ed054394482485c8a67c973a783ed48' }, h("slot", { key: '7faef9a6f126d000f742e4e8a58d6b37cdf48504' })))));
+        return (h(Host, { key: '0cb2bcffcfb910b70307e5a7b04492e7203887f9', role: "listitem" }, h("button", Object.assign({ key: '01af9b8559a9fb830cb4ff5e9b5af414c518e720', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: '94ef13762bc9ce63b8bfdb98c39a720a2037efa7', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: '2bb267586d494bf4dcecdcfe3efd11586a3457b3' }, h("slot", { key: 'f8b3457eeb4addc3188c09e3b6fdd4817064158b' })))));
     }
     static get is() { return "z-stepper-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-toast-notification/index.js

@@ -151,19 +151,19 @@ export class ZToastNotification {
         }
     }
     render() {
-        return (h(Host, { key: 'e0a58f45156d16fb3ec1cac2e4a13e6bdaf719b7', style: { "--percentuale": `${this.percentage}%` }, class: { [this.transition]: !!this.transition, [this.type]: !!this.type }, onAnimationEnd: (e) => {
+        return (h(Host, { key: '6d582aa79426417081842e17e0ccb61fffec81a0', style: { "--percentuale": `${this.percentage}%` }, class: { [this.transition]: !!this.transition, [this.type]: !!this.type }, onAnimationEnd: (e) => {
                 if (this.autoclose && e.animationName.includes("slidein")) {
                     this.startClosingTimeout(this.autoclose);
                 }
                 if (e.animationName.includes("slideout")) {
                     this.hostElement.parentNode.removeChild(this.hostElement);
                 }
-            } }, h("div", { key: 'dc37f25eddcc763014c01766f43fba82ed54eb64', class: "toast-notification-container" }, h("div", { key: '3b832ddf285d2f203a5172ea20c221d7c5fecf8b', class: "toast-notification-content" }, h("div", { key: 'b701ba1ea667e98092b858cd31275f8beb1cf89a', class: "toast-notification-text" }, this.heading && h("span", { key: '643748547bf51bbb5ffeae968e9a6f5fb1f8db1e', class: "title" }, this.heading), h("span", { key: '2c1d2f616dc9c34b847732af066a0750e1ea49a2', class: "message" }, h("slot", { key: 'fea0d0b716ff11a64eeb98d2013da6887eeb5c99', name: "message" }, this.message && h("span", { key: '5867861be21564191c97f7cabace3c33645b4cd2', innerHTML: DOMPurify.sanitize(this.message) })))), h("div", { key: '3405e83126816b47017f59da2bd95a8195c30a25', class: "button-container", hidden: !this.hasSlottedButton }, h("slot", { key: '821f8f8ce998969cf16323c72c151c5dc0a72d62', name: "button", onSlotchange: () => this.checkSlottedButton() }))), this.closebutton && (h("button", { key: 'c3e84a06feaf5632d0733971786dc824b2fa3ab6', class: "close-button", "aria-label": "Chiudi notifica", onClick: () => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true), onKeyDown: (e) => {
+            } }, h("div", { key: '3b509ad43470b3bd5ceec401d28ce887a7f1de10', class: "toast-notification-container" }, h("div", { key: '7caaa8f330f15214c827eb89666ea2fdbbde3920', class: "toast-notification-content" }, h("div", { key: '49ad47ccf665b0bbcdbf94430cc2dab1e05219ab', class: "toast-notification-text" }, this.heading && h("span", { key: 'c2ea1e161d8c6bbefc9cff2ff27eadc713f5c133', class: "title" }, this.heading), h("span", { key: 'f93072a79ae141440445746ad654de84b50d2441', class: "message" }, h("slot", { key: '09d8108c415599d93b67925496fd52416fac4907', name: "message" }, this.message && h("span", { key: '011e00ae54cee5a33059cef9760576781c63f737', innerHTML: DOMPurify.sanitize(this.message) })))), h("div", { key: '67bde6f049f31a6b4e7d84c720b036f974bedba7', class: "button-container", hidden: !this.hasSlottedButton }, h("slot", { key: 'c92a7087e89012ee690c8e41577ccee412be112f', name: "button", onSlotchange: () => this.checkSlottedButton() }))), this.closebutton && (h("button", { key: '41198c2a426c339046948b8969d3002aee7607c3', class: "close-button", "aria-label": "Chiudi notifica", onClick: () => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true), onKeyDown: (e) => {
                 if (e.code == KeyboardCode.SPACE || e.code == KeyboardCode.ENTER) {
                     e.preventDefault();
                     this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true);
                 }
-            } }, h("z-icon", { key: '67397c893a19e479e6f76e5c1428ce301f12416e', name: "multiply-circled" }))))));
+            } }, h("z-icon", { key: '3316d0e9e999039cd99eb96faa37c81219e5617b', name: "multiply-circled" }))))));
     }
     static get is() { return "z-toast-notification"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-toast-notification-list/index.js

@@ -39,7 +39,7 @@ export class ZToastNotificationList {
         }
     }
     render() {
-        return h("slot", { key: '9c4418dc9b3f94c7fb935bc5544338c54a974910', name: "toasts" });
+        return h("slot", { key: '8219e6e96e73aee72df4e2d8d2e0e9155e8f7a2e', name: "toasts" });
     }
     static get is() { return "z-toast-notification-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-toggle-button/index.js

@@ -16,10 +16,10 @@ export class ZToggleButton {
         this.toggleClick.emit(this.opened);
     }
     render() {
-        return (h("button", { key: '246d3cb54f0af334717c38005e7494388420e2fd', tabindex: this.avoidclick ? "-1" : "0", class: {
+        return (h("button", { key: '3448d665412b78c55f77951e408df8abaa158803', tabindex: this.avoidclick ? "-1" : "0", class: {
                 "isopen": this.opened,
                 "avoid-clicks": this.avoidclick,
-            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: 'a971c5521659db9d407f39592907e9ad9e755cf5', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
+            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: '4514f07522fc6ecfced03793a5bc58e7c8f185e8', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
     }
     static get is() { return "z-toggle-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-toggle-switch/index.js

@@ -26,14 +26,14 @@ export class ZToggleSwitch {
         this.emitToggleClick();
     }
     render() {
-        return (h(Host, { key: 'a71496b0436b37aaf6b0af879bae53be6a627efa' }, h("input", { key: '716eec97479d25139fe00b144a58d26941ded2a3', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '8907147d34ed7b1c944936e1c3e73519ef77f00b', htmlFor: this.htmlid, class: {
+        return (h(Host, { key: 'd31f156ba646f113f8f2509afdaee3e79fdb33f7' }, h("input", { key: '48a3963dd555c00867816af0169ed677dc4ccc68', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '3872377775f759727b62288794555cd84e60b12c', htmlFor: this.htmlid, class: {
                 [this.labelPosition]: true,
                 disabled: this.disabled,
-            } }, h("span", { key: 'c3a9dc659fee0c089799a011568b2df707f62c34' }, h("slot", { key: '68be5cec64b7d973bd40d59be54580170bd7ec5e' })), h("span", { key: '206640ff4c480d2923f8c99b80093b8bf08ee68a', class: {
+            } }, h("span", { key: 'b46cb8e359cdb11e696a116661659c9872d49a1e' }, h("slot", { key: '42fc26c0ced09c5fdda062735fe543b8cb57a658' })), h("span", { key: 'b55f0fbd2ff23f01c1ac0b845c6af5571d81c13f', class: {
                 container: true,
                 disabled: this.disabled,
                 checked: this.checked,
-            } }, h("span", { key: '31d158040dfc2cb2e605ee5271cd1b992016c1e2', class: "circle" }, this.checked && (h("z-icon", { key: '2d45f7c22746d2db091e0ee2096b3f580064e8aa', width: 12, height: 12, name: "checkmark" })))))));
+            } }, h("span", { key: '87bc69be905d84458fec5384f756348a94e446fe', class: "circle" }, this.checked && (h("z-icon", { key: '4464b2bf8aa91a7c0c5c9e2bff26e84ff7c34be2', width: 12, height: 12, name: "checkmark" })))))));
     }
     static get is() { return "z-toggle-switch"; }
     static get encapsulation() { return "scoped"; }