@zanichelli/albe-web-components 7.3.1 → 7.3.3

package/dist/cjs/z-menu-section.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
 
-const stylesCss = ":host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-text01);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host(:is([active],[open])) .label,.label:hover{border-color:var(--color-secondary01)}:is(:host(:is([active],[open])) .label,.label:hover) ::slotted(*){font-weight:var(--font-bd)}.label{display:flex;width:100%;align-items:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border:0;border-bottom:var(--border-size-small) solid var(--color-surface05);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-icon02)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) * 0.5);padding-bottom:calc(var(--space-unit) * 2)}.items>::slotted([slot=\"item\"]){display:inline-flex;padding:calc(var(--space-unit) * 0.5);margin:0;font-size:var(--font-size-2);line-height:1.4;outline:none}.items>::slotted([slot=\"item\"]:last-child){padding-bottom:0}.items>::slotted([slot=\"item\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-secondary01)}.items>::slotted([slot=\"item\"]:hover),.items>::slotted([slot=\"item\"][active]){color:var(--color-secondary01);font-weight:var(--font-bd)}";
+const stylesCss = ":host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-text01);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host(:is([active],[open])) .label,.label:hover{border-color:var(--color-secondary01)}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}.label{display:flex;width:100%;align-items:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);border:0;border-bottom:var(--border-size-small) solid var(--color-surface05);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-icon02)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items>::slotted([slot=\"item\"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-2);line-height:1.4;outline:none}.items>::slotted([slot=\"item\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-secondary01)}.items>::slotted([slot=\"item\"]:hover),.items>::slotted([slot=\"item\"]:focus:focus-visible),.items>::slotted([slot=\"item\"][active]){color:var(--color-secondary01);font-weight:var(--font-bd)}";
 
 const ZMenuSection = class {
   constructor(hostRef) {

package/dist/cjs/z-menu.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
 
-const stylesCss = ":host,::slotted(*),*{box-sizing:border-box}:host{position:relative;display:inline-flex;flex-direction:column}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-text01);font-family:var(--font-family-sans);font-weight:var(--font-rg);letter-spacing:0.36px}.menu-label{padding:0;border:0;margin:0;background:transparent;border-radius:0;color:inherit;outline:none;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-within{z-index:1;padding-right:calc(var(--space-unit) * 0.5);padding-left:calc(var(--space-unit) * 0.5);margin-right:calc(var(--space-unit) * -0.5);margin-left:calc(var(--space-unit) * -0.5);box-shadow:var(--shadow-focus-primary)}.menu-label .menu-label-content{position:relative;display:flex;align-items:center}:host(:is([active],[open])) .menu-label-content,.menu-label .menu-label-content:hover,.menu-label:focus-within .menu-label-content{font-weight:var(--font-bd)}:host(:is([active],[open])) .menu-label-content ::slotted(*),.menu-label .menu-label-content:hover ::slotted(*),.menu-label:focus-within .menu-label-content ::slotted(*){letter-spacing:normal}:host(:is([active],[open],[vertical-context])) .menu-label .menu-label-content::after,.menu-label .menu-label-content:hover::after,.menu-label:focus-within .menu-label-content::after{position:absolute;bottom:0;left:0;width:100%;content:\"\";pointer-events:none}:host([vertical-context]) .menu-label-content::after{height:var(--border-size-small);background-color:var(--color-surface03)}:host(:is([active],[open])) .menu-label .menu-label-content::after,.menu-label .menu-label-content:hover::after,.menu-label:focus-within .menu-label-content::after{height:var(--border-size-large);background-color:var(--color-secondary01)}::slotted([data-text])::after{height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}::slotted([data-text]){display:inline-flex;flex-direction:column}.menu-label .menu-label-content ::slotted(*){display:inline-flex;width:100%;margin:0;appearance:none;font-size:var(--font-size-5);font-weight:inherit;line-height:1.2;outline:none}.menu-label .menu-label-content ::slotted(*),.menu-label .menu-label-content z-icon{padding:var(--space-unit) 0}.menu-label .menu-label-content z-icon{margin-left:calc(var(--space-unit) * 1.5);fill:var(--color-icon02)}.content{background:var(--color-surface01)}:host(:not([open])) .content{display:none}:host([floating]) .content{position:absolute;top:100%;left:0;width:375px;min-width:100%;max-width:100vw;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);box-shadow:var(--shadow-2)}:host(:not([floating])) .content{width:100%}.header{display:flex;align-items:center;padding:var(--space-unit) 0 calc(var(--space-unit) * 2)}.header ::slotted(img[slot=\"header\"]){width:calc(var(--space-unit) * 11.25);height:auto;object-fit:contain}.header ::slotted([slot=\"header\"]:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5}.items{display:flex;flex-direction:column;align-items:flex-start;background:inherit}.items>::slotted([slot=\"item\"]){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25;outline:none}.items>::slotted([slot=\"item\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot=\"item\"]:not(z-menu-section)){padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--color-surface05)}.items>::slotted([slot=\"item\"]:hover),.items>::slotted([slot=\"item\"]:active){border-color:var(--color-secondary01);font-weight:var(--font-bd)}";
+const stylesCss = ":host,::slotted(*),*{box-sizing:border-box}:host{position:relative;display:inline-flex;flex-direction:column;--z-menu-label-color:var(--color-text01)}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-text01);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{padding:0;border:0;margin:0;background:transparent;border-radius:0;color:inherit;outline:none;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-within{z-index:1;padding-right:calc(var(--space-unit) * 0.5);padding-left:calc(var(--space-unit) * 0.5);margin-right:calc(var(--space-unit) * -0.5);margin-left:calc(var(--space-unit) * -0.5);box-shadow:var(--shadow-focus-primary)}.menu-label .menu-label-content{position:relative;display:flex;align-items:center}:host(:is([active],[open])) .menu-label-content,.menu-label:focus-within .menu-label-content{font-weight:var(--font-bd)}:host(:is([active],[open])) .menu-label-content ::slotted(*),.menu-label:focus-within .menu-label-content ::slotted(*){letter-spacing:normal}:host(:is([active],[open],[vertical-context])) .menu-label .menu-label-content::after,.menu-label .menu-label-content:hover::after,.menu-label:focus-within .menu-label-content::after{position:absolute;bottom:0;left:0;width:100%;content:\"\";pointer-events:none}:host([vertical-context]) .menu-label-content::after{height:var(--border-size-small);background-color:var(--color-surface03)}:host(:is([active],[open])) .menu-label .menu-label-content::after,.menu-label .menu-label-content:hover::after,.menu-label:focus-within .menu-label-content::after{height:var(--border-size-large);background-color:var(--color-secondary01)}::slotted([data-text])::after{height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}::slotted([data-text]){display:inline-flex;flex-direction:column}.menu-label .menu-label-content ::slotted(*){display:inline-flex;width:100%;margin:0;appearance:none;color:var(--z-menu-label-color);font-family:var(--font-family-sans);font-size:var(--font-size-5);font-weight:inherit;letter-spacing:0.36px;line-height:1.2;outline:none}.menu-label .menu-label-content ::slotted(*),.menu-label .menu-label-content z-icon{padding:var(--space-unit) 0}.menu-label .menu-label-content z-icon{margin-left:calc(var(--space-unit) * 1.5);fill:currentcolor}.content{background:var(--color-surface01)}:host(:not([open])) .content{display:none}:host([floating]) .content{position:absolute;top:100%;left:0;width:375px;min-width:100%;max-width:100vw;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);box-shadow:var(--shadow-2)}:host(:not([floating])) .content{width:100%}.header{display:flex;align-items:center;padding:var(--space-unit) 0 calc(var(--space-unit) * 2)}.header ::slotted(img[slot=\"header\"]){width:calc(var(--space-unit) * 11.25);height:auto;object-fit:contain}.header ::slotted([slot=\"header\"]:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5}.items{display:flex;flex-direction:column;align-items:flex-start;background:inherit}.items>::slotted([slot=\"item\"]){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25;outline:none}.items>::slotted([slot=\"item\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot=\"item\"]:not(z-menu-section)){padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--color-surface05)}.items>::slotted([slot=\"item\"]:hover),.items>::slotted([slot=\"item\"]:focus:focus-visible),.items>::slotted([slot=\"item\"]:active){border-color:var(--color-secondary01);font-weight:var(--font-bd)}";
 
 const ZMenu = class {
   constructor(hostRef) {

package/dist/cjs/z-popover.cjs.entry.js

@@ -108,7 +108,8 @@ const ZPopover = class {
      */
     this.center = false;
     /**
-     * Whether the popover should be closed when the user clicks outside of it or hit "ESC".
+     * If true, the popover can be closed by clicking outside of it or pressing the escape key.
+     * Otherwise, it will be closed only programmatically (by setting `open` to `false`).
      */
     this.closable = true;
   }

package/dist/cjs/z-tooltip.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-e3299e0a.js');
 const index$1 = require('./index-7a9a8430.js');
 
-const stylesCss = ":host{--z-tooltip-theme--surface:var(--color-surface01);--z-tooltip-theme--text:var(--color-text01);--z-tooltip-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base))}:host([dark]) z-popover{--z-popover-theme--surface:var(--color-surface05)}z-popover{--z-popover-padding:var(--space-unit);--z-popover-theme--surface:var(--z-tooltip-theme--surface);--z-popover-theme--text:var(--z-tooltip-theme--text);--z-popover-shadow-filter:var(--z-tooltip-shadow-filter)}";
+const stylesCss = ":host{--z-tooltip-theme--surface:var(--color-surface01);--z-tooltip-theme--text:var(--color-text01);--z-tooltip-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base))}:host([dark]) z-popover{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse)}z-popover{--z-popover-padding:var(--space-unit);--z-popover-theme--surface:var(--z-tooltip-theme--surface);--z-popover-theme--text:var(--z-tooltip-theme--text);--z-popover-shadow-filter:var(--z-tooltip-shadow-filter)}";
 
 const ZTooltip = class {
   constructor(hostRef) {
@@ -18,12 +18,18 @@ const ZTooltip = class {
      * The open state of the tooltip.
      */
     this.open = false;
+    /**
+     * Reflects `closable` prop of the popover.
+     * "If true, the popover can be closed by clicking outside of it or pressing the escape key.
+     * Otherwise, it will be closed only programmatically (by setting `open` to `false`)."
+     */
+    this.closable = true;
   }
   onPopoverOpenChange() {
     this.open = this.popover.open;
   }
   render() {
-    return (index.h("z-popover", { ref: (el) => (this.popover = el), bindTo: this.bindTo, open: this.open, position: this.position, center: true, showArrow: true }, index.h("slot", null)));
+    return (index.h("z-popover", { ref: (el) => (this.popover = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, index.h("slot", null)));
   }
 };
 ZTooltip.style = stylesCss;

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

@@ -49,7 +49,7 @@ export class ZSearchbar {
     this.currResultsCount = this.resultsCount;
   }
   watchValue() {
-    this.handleInput(this.value);
+    this.searchString = this.value;
   }
   watchSearchString() {
     this.emitSearchTyping(this.searchString);
@@ -57,13 +57,10 @@ export class ZSearchbar {
       this.currResultsCount = this.resultsCount;
     }
   }
-  clickListener(e) {
-    this.handleOutsideClick(e);
-  }
   componentWillLoad() {
     this.resultsItemsList = this.getResultsItemsList();
     this.currResultsCount = this.resultsCount;
-    this.handleInput(this.value);
+    this.searchString = this.value;
   }
   getResultsItemsList() {
     return typeof this.resultsItems === "string" ? JSON.parse(this.resultsItems) : this.resultsItems;
@@ -108,15 +105,7 @@ export class ZSearchbar {
   }
   handleStopTyping(e) {
     e.stopPropagation();
-    this.handleInput(e.detail.value);
-  }
-  handleInput(value) {
-    if ((value === null || value === void 0 ? void 0 : value.length) >= this.autocompleteMinChars) {
-      this.searchString = value;
-    }
-    else if (this.searchString) {
-      this.searchString = "";
-    }
+    this.searchString = e.detail.value;
   }
   handleSubmit() {
     if (this.preventSubmit) {
@@ -222,10 +211,10 @@ export class ZSearchbar {
       this.currResultsCount >= ((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length)) {
       return null;
     }
-    return (h("z-list-element", { role: "option", tabindex: 0, clickable: true, id: `list-item-${this.htmlid}-show-all`, onClickItem: () => (this.currResultsCount = 0) }, h("span", { class: "item-show-all" }, h("z-link", null, "Vedi tutti i risultati"))));
+    return (h("z-list-element", { role: "option", tabindex: 0, clickable: true, id: `list-item-${this.htmlid}-show-all`, onClickItem: () => (this.currResultsCount = 0), color: "color-primary01" }, h("div", { class: "item-show-all" }, "Vedi tutti i risultati")));
   }
   render() {
-    return (h(Host, { onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e) }, h("div", { class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, this.renderInput(), this.renderResults(), this.renderButton())));
+    return (h(Host, { onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
   }
   static get is() { return "z-searchbar"; }
   static get encapsulation() { return "shadow"; }
@@ -602,7 +591,7 @@ export class ZSearchbar {
   static get listeners() {
     return [{
         "name": "click",
-        "method": "clickListener",
+        "method": "handleOutsideClick",
         "target": "document",
         "capture": false,
         "passive": false

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

@@ -1,224 +1,175 @@
 :host {
-  position: relative;
-  z-index: 5;
-  display: block;
-  width: inherit;
-  height: 44px;
+  z-index: 10;
+  display: flex;
+  column-gap: calc(var(--space-unit) * 2);
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }
 
-:host > div {
-  position: absolute;
-  z-index: 10;
-  display: grid;
-  width: 100%;
-  gap: 0 calc(var(--space-unit) * 2);
-  grid-template-columns: auto;
-  grid-template-rows: auto;
+:host,
+* {
+  box-sizing: border-box;
 }
 
-:host > div.has-submit {
-  grid-template-columns: auto min-content;
-}
-
-:host > div.has-results {
-  grid-template-rows: auto auto;
-}
-
-:host > div > z-input {
+.input-container {
+  position: relative;
+  display: flex;
   width: 100%;
-  grid-column: 1;
-  grid-row: 1;
-}
-
-:host > div > z-button {
-  grid-column: 2;
-  grid-row: 1;
+  flex-direction: column;
 }
 
-:host > div > div.results-wrapper {
-  overflow: auto;
+.results-wrapper {
+  position: absolute;
+  top: calc(100% - 1px);
+  left: 0;
+  width: 100%;
   padding: calc(var(--space-unit) / 4);
-  padding-bottom: calc(var(--space-unit) / 4);
   border: var(--border-size-small) solid var(--color-surface03);
   border-top: none;
-  margin-top: -1px;
   background: var(--color-surface01);
-  grid-column: 1;
-  grid-row: 2;
 }
 
-:host > div > div.results-wrapper > div.results {
+.results {
   overflow: auto;
   max-height: var(--z-searchbar-results-height, 540px);
-  padding: var(--space-unit) calc(var(--space-unit) * 1.5);
-  padding-bottom: calc(var(--space-unit) / 2);
+  padding: calc(var(--space-unit) / 2) calc(var(--space-unit) * 1.5);
   scrollbar-color: var(--color-primary01) transparent;
 }
 
-:host > div > div.results-wrapper > div.results::-webkit-scrollbar {
+.results::-webkit-scrollbar {
   width: 10px;
   background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
   border-radius: var(--border-radius);
 }
 
-:host > div > div.results-wrapper > div.results::-webkit-scrollbar-track {
+.results::-webkit-scrollbar-track {
   background-color: transparent;
 }
 
-:host > div > div.results-wrapper > div.results::-webkit-scrollbar-thumb {
+.results::-webkit-scrollbar-thumb {
   width: 10px;
   background-color: var(--color-primary01);
   border-radius: var(--border-radius);
 }
 
-:host > div > div.results-wrapper > div.results .category-heading {
+.results .category-heading {
   display: block;
   font-size: var(--font-size-2);
   font-weight: var(--font-rg);
   line-height: var(--font-size-3);
 }
 
-:host > div > div.results-wrapper > div.results .category-heading > * {
+.results .category-heading > * {
   display: block;
 }
 
-:host > div > div.results-wrapper > div.results span.category-heading > span.category {
+.results .category-heading > .category {
   color: var(--color-text05);
   font-style: italic;
 }
 
-:host > div > div.results-wrapper > div.results span.category-heading > span.subcategory {
-  margin-top: 8px;
+.results .category-heading > .subcategory {
+  margin-top: var(--space-unit);
   color: var(--color-text01);
   text-transform: uppercase;
 }
 
-:host > div > div.results-wrapper > div.results z-list-element {
+.results z-list-element {
   display: block;
 }
 
-:host > div > div.results-wrapper > div.results z-list-element:focus {
-  box-shadow: var(--shadow-focus-primary);
-}
-
-:host > div > div.results-wrapper > div.results .item {
+.results .item {
   --z-icon-height: 12px;
   --z-icon-width: 12px;
 
   display: flex;
   flex-flow: row nowrap;
-  align-content: stretch;
-  align-items: flex-start;
+  align-items: center;
   justify-content: flex-start;
   color: var(--color-text01);
+  column-gap: calc(var(--space-unit) * 1.5);
   fill: var(--color-icon02);
   font-size: var(--font-size-2);
   line-height: var(--font-size-3);
 }
 
-:host > div > div.results-wrapper > div.results .item.ellipsis > span.item-label {
+.results .item.ellipsis > .item-label {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-:host > div > div.results-wrapper > div.results .item > span.item-label > mark,
-:host > div > div.results-wrapper > div.results .item > span.item-label > * > mark {
+.results .item > .item-label mark {
   background: var(--color-primary03);
 }
 
-:host > div > div.results-wrapper > div.results .item.has-category {
+.results .item.has-category {
   padding-left: calc(var(--space-unit) * 3);
 }
 
-:host > div > div.results-wrapper > div.results .item > z-icon.item-icon {
-  padding: 2px 0;
-  margin-right: calc(var(--space-unit) * 1.5);
-}
-
-:host > div > div.results-wrapper > div.results .item.item-search {
+.results .item.item-search {
   --z-icon-height: 16px;
   --z-icon-width: 16px;
 }
 
-:host > div > div.results-wrapper > div.results .item.item-search > z-icon {
-  margin-right: var(--space-unit);
-}
-
-:host > div > div.results-wrapper > div.results .item-show-all {
-  display: block;
+.results .item-show-all {
   text-align: center;
 }
 
-:host > div > div.results-wrapper > div.results .item-no-results {
+.results .item-no-results {
   display: block;
   font-size: var(--font-size-2);
   font-style: italic;
   line-height: var(--font-size-5);
 }
 
-:host > div > div.results-wrapper > div.results .item-no-results > ul {
+.results .item-no-results > ul {
   padding-left: calc(var(--space-unit) * 2);
   margin: var(--space-unit);
 }
 
 /* Tablet breakpoint */
 @media (min-width: 768px) {
-  :host > div > div.results-wrapper > div.results .category-heading {
+  .results .category-heading {
     font-size: var(--font-size-3);
     line-height: var(--font-size-6);
   }
 
-  :host > div > div.results-wrapper > div.results .item {
-    --z-icon-height: 12px;
-    --z-icon-width: 12px;
-
+  .results .item {
     font-size: var(--font-size-3);
     line-height: var(--font-size-6);
   }
 
-  :host > div > div.results-wrapper > div.results .item.item-search {
+  .results .item.item-search {
     --z-icon-height: 18px;
     --z-icon-width: 18px;
   }
 
-  :host > div > div.results-wrapper > div.results .item.item-search > z-icon {
-    margin-top: calc(var(--space-unit) / 4);
-  }
-
-  :host > div > div.results-wrapper > div.results .item.ellipsis > span.item-label {
+  .results .item.ellipsis > .item-label {
     height: 24px;
   }
-
-  :host > div > div.results-wrapper > div.results .item > z-icon.item-icon {
-    padding: 6px 0;
-  }
 }
 
 /* Desktop breakpoint */
 @media (min-width: 1152px) {
-  :host > div > div.results-wrapper > div.results .item {
+  .results .item {
     cursor: pointer;
   }
 
-  :host > div > div.results-wrapper > div.results .item-no-results {
+  .results .item-no-results {
     cursor: default;
     font-size: var(--font-size-3);
     line-height: var(--font-size-6);
   }
 }
 
-:host([size="small"]) > div > div.results-wrapper > div.results .item,
-:host([size="x-small"]) > div > div.results-wrapper > div.results .item,
-:host([size="small"]) > div > div.results-wrapper > div.results .category-heading,
-:host([size="x-small"]) > div > div.results-wrapper > div.results .category-heading {
+: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"]) > div > div.results-wrapper > div.results .item:not(.has-category),
-:host([size="x-small"]) > div > div.results-wrapper > div.results .item:not(.has-category) {
+: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;
 }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import dialogPolyfill from "dialog-polyfill";
 import { KeyboardCode } from "../../../beans";
 const FOCUSABLE_ELEMENTS_SELECTOR = ':is(button, input, select, textarea, [contenteditable=""], [contenteditable="true"], a[href], [tabindex], summary):not([disabled], [disabled=""], [tabindex="-1"], [aria-hidden="true"], [hidden])';
 /**
@@ -28,7 +29,13 @@ export class ZModal {
     }
   }
   componentDidLoad() {
-    this.open();
+    if (typeof HTMLDialogElement !== "function") {
+      dialogPolyfill.registerDialog(this.dialog);
+      this.dialog.setAttribute("open", "true");
+    }
+    else {
+      this.open();
+    }
   }
   /** open modal */
   async open() {

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

@@ -20,6 +20,19 @@
   display: none;
 }
 
+/* polyfill style  */
+:host > dialog + .backdrop {
+  display: none;
+}
+
+:host > dialog:not([open]) {
+  display: none;
+}
+
+:host > dialog[open] {
+  display: block;
+}
+
 .modal-container {
   z-index: 1010;
   display: flex;