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

package/dist/cjs/z-visually-hidden.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-2H1EJ2Tl.js');
+var index = require('./index-D_S5lGcb.js');
 
 const stylesCss = () => `:host{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:0 -1px -1px 0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}`;
 

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

@@ -0,0 +1,40 @@
+/* Webkit Scrollbar */
+.z-scrollbar::-webkit-scrollbar {
+  width: 6px;
+  background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);
+}
+
+.z-scrollbar::-webkit-scrollbar-thumb {
+  background-color: var(--color-primary01);
+}
+
+.z-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-hover-primary);
+}
+
+:host([theme="dark"]) .z-scrollbar,
+.z-scrollbar--dark {
+  --z-scrollbar-track-gradient: linear-gradient(
+    to right,
+    transparent 0 1px,
+    var(--gray600) 1px 5px,
+    transparent 5px 6px
+  );
+  --z-scrollbar-track-color: var(--gray600);
+  --z-scrollbar-thumb-color: var(--color-primary03);
+  --z-scrollbar-thumb-hover-color: var(--color-hover-primary);
+  --z-scrollbar-corner-color: transparent;
+}
+
+/* Firefox scrollbar */
+@supports not selector(.z-scrollbar::-webkit-scrollbar-track) {
+  .z-scrollbar {
+    scrollbar-color: var(--color-primary01) transparent;
+  }
+
+  :host([theme="dark"]) .z-scrollbar,
+  .z-scrollbar--dark {
+    scrollbar-color: var(--z-scrollbar-thumb-color, var(--color-primary03))
+      var(--z-scrollbar-track-color, var(--gray600));
+  }
+}

package/dist/collection/components/table/cells/{z-td/styles.css → z-table-cells.css}

@@ -68,4 +68,3 @@
     pointer-events: all;
   }
 }
-

package/dist/collection/components/table/cells/z-td/index.js

@@ -42,18 +42,18 @@ export class ZTd {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: '65102becbf97d8f480c9e9c140965963e1b829a3', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: 'a91b370f73c8684038a75db6483ec88dd8b3f4d6', class: "cell--content" }, h("slot", { key: '2a9451f11c23f2dae4047b360d8af92606ce3e76' }), this.showMenu && (h("div", { key: '0a4f91d75fce51604253ada3775f06ec9c230ce0', class: "cell--menu-container prevent-expand" }, h("z-button", { key: 'fe6623726d645f2796ff88246bd887b2e5ec9396', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '1ce2729d0209e5218515c52f4425c3f02b05c1bd', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'b060d20d5e15380360f8bab9d502f85eb70a7995', name: "contextual-menu" })))))));
+        return (h(Host, { key: '3de2b08ae7ba78632945b3c7a18c39cbc91dd03f', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: '0c281b227221cbd01d76ee8e5909d2ea77071f9a', class: "cell--content" }, h("slot", { key: 'fb6a90291b513310d4f48ea3a26c5dfe197d6434' }), this.showMenu && (h("div", { key: 'dd2c301848ea64effee47f2c5e690eab30259d19', class: "cell--menu-container prevent-expand" }, h("z-button", { key: 'b010e8ef6fcd68289f1e5599216c416dcf866788', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '055d4c47c314f74939b4de3ec60ad43d20beaad2', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '2d097873fe805093434e9b932c0e36082f5a15a5', name: "contextual-menu" })))))));
     }
     static get is() { return "z-td"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["../z-table-cells.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["../z-table-cells.css"]
         };
     }
     static get properties() {

package/dist/collection/components/table/cells/z-th/index.js

@@ -70,18 +70,18 @@ export class ZTh {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: '326c1c5968ebd22021f5bc88d3c98cd558c31783', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: '935a692b283f76362fe5e3cc7cc2f8e38424f407', class: "cell--content" }, h("slot", { key: 'cce03a04640d1ee72e2e202f7526203136f4bb50' }), this.showSorting && (h("button", { key: 'c161a473f0b4e6d6b1a478ad0530c6d0938fc1a1', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: '4b9b3aab3b0ce9f14c2a181860c834098077dee3', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: 'cd3b0e8a851c8a414229f4976b8a227d99981ce0', class: "cell--menu-container" }, h("z-button", { key: '3d37441174ff3ea540c0aec582bc91c7c644c818', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { key: '59de83e276e82705588041660e7612080b6636e8', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'c92e8e0a5c617251dc6741ff4d9cbe943f224111', name: "contextual-menu" })))))));
+        return (h(Host, { key: 'deec9e49e024f48b68fe8f54ebb141dcc2b19ec1', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: '65fefbfef58a64f3287a2f1b5defd301392bba2b', class: "cell--content" }, h("slot", { key: 'a88011856bacb3b2e0875ed46b8b1468660e5b31' }), this.showSorting && (h("button", { key: '46f462137de04bb88eda2e14767660fc4629f087', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: 'bcfe38f7ff932f2074dad3ab11b5df5867292654', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '90ccc4ecc6f49f8d41a45c9979fabebfd8bcad01', class: "cell--menu-container" }, h("z-button", { key: '58b57db3a7129b6a811eca6f014a7b2c02050a41', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { key: '927004bdbc077e358c00b765d58b64a70f95c83d', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '3b5dbcb8631fa4383366ff718c7e9a080b7ca3be', name: "contextual-menu" })))))));
     }
     static get is() { return "z-th"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["../z-table-cells.css", "styles.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["../z-table-cells.css", "styles.css"]
         };
     }
     static get properties() {

package/dist/collection/components/table/cells/z-th/styles.css

@@ -1,75 +1,3 @@
-:host {
-  position: relative;
-  display: flex;
-  max-width: 100%;
-  align-items: center;
-  padding: calc(var(--z-table--cells-padding, calc(var(--space-unit) * 2)));
-  background-color: var(--color-surface01);
-  gap: calc(var(--space-unit) * 2) var(--space-unit);
-}
-
-:host,
-* {
-  box-sizing: border-box;
-}
-
-:host([sticky]) {
-  position: sticky;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  box-shadow: 8px 0 16px -8px var(--shadow-color-base);
-}
-
-:host([menu-open]) {
-  z-index: 2;
-}
-
-.cell--content {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-}
-
-:host([show-menu]) .cell--content {
-  column-gap: var(--space-unit);
-}
-
-.cell--menu-container {
-  margin-left: auto;
-}
-
-:host(:not([show-menu])) .cell--menu-container {
-  opacity: 0;
-  pointer-events: none;
-}
-
-:host(:is([show-menu], [menu-open])) .cell--menu-container,
-:host([show-menu]) .cell--menu-container:focus-within {
-  z-index: 1;
-  opacity: 1;
-  pointer-events: all;
-}
-
-:host .cell-popover {
-  z-index: 100;
-}
-
-@media (min-width: 768px) and (hover: hover) {
-  :host([show-menu="hover"]) .cell--menu-container {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  :host([show-menu="hover"]:hover) .cell--menu-container {
-    z-index: 1;
-    opacity: 1;
-    pointer-events: all;
-  }
-}
-
-
 :host {
   z-index: 1;
   padding: 0;

package/dist/collection/components/z-app-header/index.js

@@ -198,7 +198,7 @@ export class ZAppHeader {
         if (this.searchPageUrl && (this.isMobile || this.isTablet)) {
             return (h("z-button", { class: "search-page-button", variant: ButtonVariant.SECONDARY, href: this.searchPageUrl, icon: "search", size: ControlSize.X_SMALL }));
         }
-        return (h("z-searchbar", { value: this.searchString, placeholder: this.searchPlaceholder, showSearchButton: true, searchButtonIconOnly: this.isMobile || this.isTablet, size: ControlSize.X_SMALL, variant: ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
+        return (h("z-searchbar", { value: this.searchString, placeholder: this.searchPlaceholder, showSearchButton: true, searchButtonIconOnly: this.isMobile || this.isTablet, searchButtonLabel: this.isMobile || this.isTablet ? undefined : this.searchButtonLabel, size: ControlSize.X_SMALL, variant: ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
     }
     renderProductLogos() {
         return (h(Fragment, null, this.enableZLogo && (h("span", { class: "z-logo" }, h("img", { alt: "Logo Zanichelli" }))), this.hostElement.querySelector("[slot='product-logo']") && (h("span", { class: "product-logo" }, h("slot", { name: "product-logo" })))));
@@ -280,7 +280,7 @@ export class ZAppHeader {
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (h(Host, { key: 'dc030db81c271ed36850fb287d29ace79851d4a1', "menu-length": this.menuLength }, h("div", { key: '49d34b66c216a92c80eb9216fa52e48add4cee0a', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '29639ab6d0620491c69651139ddf8311e2177122', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: 'bc685fb828a89777bec6dcc5bc754534f83361cd', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, h("slot", { key: 'cb2b1468f4b34d11dbf444f2cde0c7cce86cbd1e', name: "top-subtitle" }))), h("div", { key: '80036c45fcbd3d490b85f653efb35010b1639b6f', class: "heading-title" }, h("slot", { key: 'bc4a0397893534c0dac99e081ef0ba5d6db2ecd3', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("slot", { key: 'a72c2c657ae430e0cc6b134e843fec1c983e7777', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: 'b620b02b62b99b13e6b4c0c1be0997d3af448aeb', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '6c1887c703734a0e1ab4b77b821dad2e9bc0c3df', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '2daaf3501852cab84cf2b3a85a770553dc70a101', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        return (h(Host, { key: 'dba00e6ba8614f38c6382a42420430ee44d61757', "menu-length": this.menuLength }, h("div", { key: '14462adce8a9cb03fe571a4eea4c1356d77d49d5', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '18f406f950a9f2946d5c1c74e5c3a52c9f139069', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '1e74736f45625644289425d0e5cc6c825c6ac2b9', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, h("slot", { key: '747325238cde4fb40d8448c58e4b6483ca049f28', name: "top-subtitle" }))), h("div", { key: '8d5159eabc8cddbb3fdc2227be62b5b1f318b1d4', class: "heading-title" }, h("slot", { key: '64c48e48e13c50d367fb52ed509d25cacbbc85da', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("slot", { key: '990a282a81bd96d2524d3fbfff1dabce807824d9', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '0048e85cccd48f1a9e587dc40bfc54ebf6c603bc', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '41423d5aa2004b61c6d9ef0342013598e4e59d55', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '4e12bbc0d9a8b54ecec94b1b12ad456ebcdb5bec', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     static get is() { return "z-app-header"; }
     static get encapsulation() { return "shadow"; }
@@ -376,6 +376,25 @@ export class ZAppHeader {
                 "attribute": "search-placeholder",
                 "defaultValue": "\"Cerca\""
             },
+            "searchButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the search button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-button-label"
+            },
             "searchString": {
                 "type": "string",
                 "mutable": true,

package/dist/collection/components/z-app-header/index.stories.js

@@ -17,6 +17,8 @@ const StoryMeta = {
         "--app-header-content-max-width": "100%",
         "enableSearch": false,
         "searchPageUrl": "",
+        "searchPlaceholder": "Digita qui quello che vuoi",
+        "searchButtonLabel": "Cliccami",
         "enableZLogo": false,
         "enableOffcanvas": false,
     },
@@ -98,7 +100,7 @@ const menuTemplate = () => {
 export const Title = {
     parameters: {
         controls: {
-            exclude: ["enableOffcanvas"],
+            exclude: ["enableOffcanvas", "searchPlaceholder", "searchButtonLabel"],
         },
     },
     render: (args) => html `<z-app-header
@@ -113,7 +115,7 @@ export const Title = {
 export const ProductLogo = {
     parameters: {
         controls: {
-            exclude: ["enableOffcanvas"],
+            exclude: ["enableOffcanvas", "searchPlaceholder", "searchButtonLabel"],
         },
     },
     render: (args) => html `<z-app-header
@@ -132,7 +134,7 @@ export const ProductLogo = {
 export const TopTitle = {
     parameters: {
         controls: {
-            exclude: ["enableOffcanvas", "enableZLogo"],
+            exclude: ["enableOffcanvas", "enableZLogo", "searchPlaceholder", "searchButtonLabel"],
         },
     },
     render: (args) => html `<z-app-header
@@ -147,7 +149,7 @@ export const TopTitle = {
 export const TopTitleWithProductLogo = {
     parameters: {
         controls: {
-            exclude: ["enableOffcanvas", "enableZLogo"],
+            exclude: ["enableOffcanvas", "enableZLogo", "searchPlaceholder", "searchButtonLabel"],
         },
     },
     render: (args) => html `<z-app-header
@@ -167,7 +169,7 @@ export const TopTitleWithProductLogo = {
 export const CustomMenuButton = {
     parameters: {
         controls: {
-            exclude: ["enableOffcanvas"],
+            exclude: ["enableOffcanvas", "searchPlaceholder", "searchButtonLabel"],
         },
     },
     render: (args) => html `<z-app-header
@@ -183,7 +185,7 @@ export const CustomMenuButton = {
 export const MenuWithTopTitle = {
     parameters: {
         controls: {
-            exclude: ["enableZLogo"],
+            exclude: ["enableZLogo", "searchPlaceholder", "searchButtonLabel"],
         },
     },
     render: (args) => html `<z-app-header
@@ -200,7 +202,7 @@ export const MenuWithTopTitle = {
 export const MenuWithTopTitleAndProductLogo = {
     parameters: {
         controls: {
-            exclude: ["enableZLogo"],
+            exclude: ["enableZLogo", "searchPlaceholder", "searchButtonLabel"],
         },
     },
     render: (args) => html `<z-app-header
@@ -222,7 +224,14 @@ export const MenuWithTopTitleAndProductLogo = {
 export const LongTitle = {
     parameters: {
         controls: {
-            exclude: ["enableOffcanvas", "enableZLogo", "enableSearch", "searchPageUrl"],
+            exclude: [
+                "enableOffcanvas",
+                "enableZLogo",
+                "enableSearch",
+                "searchPageUrl",
+                "searchPlaceholder",
+                "searchButtonLabel",
+            ],
         },
     },
     render: (args) => html `<z-app-header style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}">
@@ -235,6 +244,11 @@ export const OffcanvasMenu = {
     args: {
         enableOffcanvas: true,
     },
+    parameters: {
+        controls: {
+            exclude: ["searchPlaceholder", "searchButtonLabel"],
+        },
+    },
     render: (args) => html `<z-app-header
       .enableOffcanvas=${args.enableOffcanvas}
       .enableSearch=${args.enableSearch}
@@ -261,7 +275,7 @@ export const Stuck = {
             },
         },
         controls: {
-            exclude: ["enableOffcanvas"],
+            exclude: ["enableOffcanvas", "searchPlaceholder", "searchButtonLabel"],
         },
     },
     render: (args) => html `<z-app-header
@@ -292,6 +306,8 @@ export const SearchPageButton = {
     render: (args) => html `<z-app-header
       enable-search
       .enableZLogo=${args.enableZLogo}
+      .searchPlaceholder=${args.searchPlaceholder}
+      .searchButtonLabel=${args.searchButtonLabel}
       search-page-url="https://www.zanichelli.it"
       style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}"
     >

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

@@ -130,7 +130,7 @@ export class ZBreadcrumb {
                 "homepage-text": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,
             }, href: this.homepageNode.path, onClick: (e) => this.handlePreventFollowUrl(e, this.homepageNode), innerHTML: this.homepageVariant === BreadcrumbHomepageVariant.ICON
                 ? `<z-icon name="home" />`
-                : this.homepageNode.text || "Home" }), this.pathsList.length > 0 && (h("z-icon", { class: "separator", name: "chevron-right" }))));
+                : this.homepageNode.text || "Home" }), this.pathsList.length > 0 && (h("z-icon", { class: "separator", name: "chevron-right", "aria-hidden": "true" }))));
     }
     togglePopover() {
         if (!this.collapsedElementsRef.open) {
@@ -175,7 +175,7 @@ export class ZBreadcrumb {
                 setTimeout(() => {
                     this.anchorElements[0].focus();
                 }, 100);
-            }, innerHTML: "&mldr;" }), this.pathsList.length > 0 && (h("z-icon", { class: "separator", name: "chevron-right" }))));
+            }, innerHTML: "&mldr;" }), this.pathsList.length > 0 && (h("z-icon", { class: "separator", name: "chevron-right", "aria-hidden": "true" }))));
     }
     renderMobileItems() {
         // show only the second to last element
@@ -201,14 +201,14 @@ export class ZBreadcrumb {
                     if (item.hasTooltip) {
                         this.popoverEllipsisOpen = false;
                     }
-                }, innerHTML: item.text }), index !== this.pathsList.length - 1 && (h("z-icon", { class: "separator", name: "chevron-right" }))))),
+                }, innerHTML: item.text }), index !== this.pathsList.length - 1 && (h("z-icon", { class: "separator", name: "chevron-right", "aria-hidden": "true" }))))),
         ];
     }
     render() {
-        return (h(Host, { key: 'b0e69674c7e600f237dd64db7aee54aa1a29529e', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: 'ab4672d78b961bf88e3cbe29a7a880c872b7370c', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+        return (h(Host, { key: '78ee363186910bdb6563e459cac4958a4a5a1862', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: 'ea14aa3cc66e2b925b859c48f234ac4c19504191', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
                 semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
                 underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
-            } }, h("ol", { key: 'bf1d0a0686b68240bcfd866012d3f4236b450bf1' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
+            } }, h("ol", { key: '5b15b47dbcadf31f3a933156a29e4c08f39df662' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
     }
     static get is() { return "z-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -41,10 +41,13 @@ export class ZButton {
         return this.icon && h("z-icon", { name: this.icon });
     }
     render() {
+        var _a, _b;
+        const normalizedAriaLabel = ((_a = this.ariaLabel) === null || _a === void 0 ? void 0 : _a.trim()) || undefined;
+        const normalizedRole = this.htmlrole || ((_b = this.role) === null || _b === void 0 ? void 0 : _b.trim()) || undefined;
         if (this.href) {
-            return (h("a", Object.assign({}, this.attributes, { "aria-label": this.ariaLabel || undefined, href: this.href, target: this.target }), this.renderIcon(), h("slot", null)));
+            return (h("a", Object.assign({}, this.attributes, { "aria-label": normalizedAriaLabel, href: this.href, target: this.target }), this.renderIcon(), h("slot", null)));
         }
-        return (h("button", Object.assign({}, this.attributes, { "aria-label": this.ariaLabel || undefined, name: this.name, type: this.type, disabled: this.disabled, role: this.htmlrole || this.role || undefined }), this.renderIcon(), h("slot", null)));
+        return (h("button", Object.assign({}, this.attributes, { "aria-label": normalizedAriaLabel, name: this.name, type: this.type, disabled: this.disabled, role: normalizedRole }), this.renderIcon(), h("slot", null)));
     }
     static get is() { return "z-button"; }
     static get encapsulation() { return "scoped"; }

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

@@ -294,18 +294,18 @@ export class ZCombobox {
         return (h("z-list-element", { class: "check-all-wrapper", role: "presentation", htmlTabindex: -1, dividerType: ListDividerType.ELEMENT, dividerColor: "gray800", size: this.getControlToListSize(), disabled: !!isDisabled }, h("span", { class: "option-wrap", role: "presentation", onClick: () => this.checkOption(optionId) }, h("z-icon", { name: allChecked ? "checkbox-checked" : "checkbox", class: this.focusedItemId === optionId ? "focused" : "" }), h("span", { id: optionId, role: isDisabled ? "presentation" : "option", "aria-selected": allChecked ? "true" : "false" }, allChecked ? this.uncheckalltext : this.checkalltext))));
     }
     render() {
-        return (h("div", { key: 'f65a92eded2c6cd7d4bb42ddc5f667806a4f5582', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
+        return (h("div", { key: '23cd031ec2894308960df94374713e9395521a56', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
     }
     static get is() { return "z-combobox"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["../css-components/z-label/styles.css", "styles.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["../css-components/z-label/styles.css", "styles.css"]
         };
     }
     static get properties() {

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

@@ -1,15 +1,3 @@
-.z-label {
-  display: block;
-  padding-bottom: var(--space-unit);
-  color: var(--color-default-text);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-1);
-  font-weight: var(--font-sb);
-  text-align: left;
-  text-transform: uppercase;
-}
-
-
 :host {
   display: block;
   min-width: 290px;

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

@@ -266,18 +266,18 @@ export class ZInput {
             default:
                 input = this.renderInputText(this.type);
         }
-        return h(Host, { key: 'e3f830979b2d6306b19c5a0357ca48b42d142a74' }, input);
+        return h(Host, { key: '0b363c20732600ca303b84a78e36bdc710c411e2' }, input);
     }
     static get is() { return "z-input"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles-general.css", "styles-text.css", "styles-textarea.css", "styles-checkbox-radio.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles-general.css", "styles-text.css", "styles-textarea.css", "styles-checkbox-radio.css"]
         };
     }
     static get properties() {

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

@@ -0,0 +1,130 @@
+.radio-wrapper,
+.checkbox-wrapper {
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  color: var(--color-default-text);
+  fill: var(--color-primary01);
+  font-family: var(--font-family-sans);
+}
+
+.radio-wrapper:hover,
+.checkbox-wrapper:hover {
+  color: var(--color-hover-primary);
+  fill: var(--color-hover-primary-icon);
+}
+
+.radio-wrapper > input,
+.checkbox-wrapper > input {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.radio-wrapper .radio-label,
+.checkbox-wrapper .checkbox-label {
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: 1;
+  text-transform: inherit;
+}
+
+.radio-wrapper input:not(:disabled) + .radio-label,
+.checkbox-wrapper input:not(:disabled) + .checkbox-label {
+  cursor: pointer;
+}
+
+.radio-wrapper .radio-label z-icon,
+.checkbox-wrapper .checkbox-label z-icon {
+  cursor: pointer;
+  fill: inherit;
+}
+
+:host([size="small"]) .radio-wrapper .radio-label z-icon,
+:host([size="small"]) .checkbox-wrapper .checkbox-label z-icon {
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+}
+
+:host([size="small"]) .radio-wrapper .radio-label,
+:host([size="small"]) .checkbox-wrapper .checkbox-label {
+  font-size: var(--font-size-2);
+}
+
+:host([size="x-small"]) .radio-wrapper .radio-label z-icon,
+:host([size="x-small"]) .checkbox-wrapper .checkbox-label z-icon {
+  --z-icon-width: 14px;
+  --z-icon-height: 14px;
+}
+
+:host([size="x-small"]) .radio-wrapper .radio-label,
+:host([size="x-small"]) .checkbox-wrapper .checkbox-label {
+  font-size: var(--font-size-1);
+}
+
+.radio-wrapper .radio-label.after,
+.checkbox-wrapper .checkbox-label.after {
+  flex-direction: row;
+}
+
+.radio-wrapper .radio-label.before,
+.checkbox-wrapper .checkbox-label.before {
+  flex-direction: row-reverse;
+}
+
+.radio-wrapper .radio-label.after > span,
+.checkbox-wrapper .checkbox-label.after > span {
+  margin-left: var(--space-unit);
+}
+
+.radio-wrapper .radio-label.before > span,
+.checkbox-wrapper .checkbox-label.before > span {
+  margin-right: var(--space-unit);
+}
+
+:host([size="small"]) .radio-wrapper .radio-label.after > span,
+:host([size="small"]) .checkbox-wrapper .checkbox-label.after > span,
+:host([size="x-small"]) .radio-wrapper .radio-label.after > span,
+:host([size="x-small"]) .checkbox-wrapper .checkbox-label.after > span {
+  margin-left: calc(var(--space-unit) * 0.5);
+}
+
+:host([size="small"]) .radio-wrapper .radio-label.before > span,
+:host([size="small"]) .checkbox-wrapper .checkbox-label.before > span,
+:host([size="x-small"]) .radio-wrapper .radio-label.before > span,
+:host([size="x-small"]) .checkbox-wrapper .checkbox-label.before > span {
+  margin-right: calc(var(--space-unit) * 0.5);
+}
+
+/* focus */
+.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon {
+  border-radius: 50%;
+}
+
+.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {
+  border-radius: var(--border-radius-small);
+}
+
+.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon,
+.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+/* disabled */
+.radio-wrapper > input:disabled + .radio-label,
+.checkbox-wrapper > input:disabled + .checkbox-label {
+  color: var(--color-disabled03);
+}
+
+.radio-wrapper > input:disabled + .radio-label > z-icon,
+.checkbox-wrapper > input:disabled + .checkbox-label > z-icon {
+  cursor: default;
+  fill: var(--color-disabled01);
+}