@zanichelli/albe-web-components 19.2.9 → 19.2.11

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [19.2.11](https://github.com/ZanichelliEditore/design-system/compare/v19.2.10...v19.2.11) (2026-05-04)
+
+
+### Bug Fixes
+
+* correct CSS property order for stylelint ([502d9b8](https://github.com/ZanichelliEditore/design-system/commit/502d9b88b143f980e7dfa818cba5a3b7d53c3bc9))
+* correct CSS property ordering in input clear button styles ([34c3570](https://github.com/ZanichelliEditore/design-system/commit/34c3570a1810fa25cedf9b37fea9e1171378f5b9))
+* **DS-989:** fix focus in z-input when clear icon was pressed ([0406f3d](https://github.com/ZanichelliEditore/design-system/commit/0406f3d52c5c48ab6544957ffc36137dc0e06d3e))
+* increase clear button target size to meet WCAG 2.5.8 ([1571a5f](https://github.com/ZanichelliEditore/design-system/commit/1571a5fd072ed0d37405a089731fd0fd395aedcc))
+* reorder CSS properties to pass stylelint ([ca996ef](https://github.com/ZanichelliEditore/design-system/commit/ca996ef8121c1abe2cb878ba09c7fc12cfcc6480))
+* **z-combobox:** move aria-label to header for selected filter count (WCAG 2.4.6) ([7fdcd7c](https://github.com/ZanichelliEditore/design-system/commit/7fdcd7c392a2b9466cf3c411a26134e8eab87758))
+* **z-input:** correct CSS property order for stylelint ([f9f179a](https://github.com/ZanichelliEditore/design-system/commit/f9f179a16f7f5ac40bdd1a85fd877d288f7f1155))
+* **z-input:** correct CSS property order for stylelint ([f076c04](https://github.com/ZanichelliEditore/design-system/commit/f076c04f87edec8f42ad5d19437c34c40ac22f9c))
+* **z-input:** ensure checkbox label meets WCAG 2.5.8 target size ([456e701](https://github.com/ZanichelliEditore/design-system/commit/456e701073635cfd78217c36f4eed3ca152a70c6))
+* **z-input:** increase radio/checkbox label target size for WCAG 2.5.8 ([003049d](https://github.com/ZanichelliEditore/design-system/commit/003049ddc1b511cd4248cdb53af787f803408e7b))
+* **z-result-card:** adjust clamp values per review feedback ([923e9cf](https://github.com/ZanichelliEditore/design-system/commit/923e9cfcd289b852bd02deef6ca4231d3e6c08a9))
+* **z-result-card:** allow text wrapping at high zoom levels ([02db148](https://github.com/ZanichelliEditore/design-system/commit/02db148e2a7f10fb1fe2ad1477eece4354dd4604))
+
+## [19.2.10](https://github.com/ZanichelliEditore/design-system/compare/v19.2.9...v19.2.10) (2026-04-29)
+
 ## [19.2.9](https://github.com/ZanichelliEditore/design-system/compare/v19.2.8...v19.2.9) (2026-04-29)
 
 ## [19.2.8](https://github.com/ZanichelliEditore/design-system/compare/v19.2.7...v19.2.8) (2026-04-29)

package/dist/cjs/{iconset-oiCBBbd2.js → iconset-Cz-UsfoU.js}

@@ -61,7 +61,7 @@ const STROKE_ICONS = {
     "back-top": "M461 356L301 528 254 483 500 221 746 483 699 528 539 356 539 980 461 980ZM220 20L780 20 780 92 220 92Z",
     "barrage-questions": "M167 59Q167 41 177 30.5 187 20 206 20L426 20Q444 20 454.5 30.5 465 41 465 59L465 275Q465 293 454.5 303.5 444 314 426 314L206 314Q187 314 177 303.5 167 293 167 275L167 59ZM403 254L403 80 229 80 229 254ZM534 59Q534 41 544.5 30.5 555 20 573 20L794 20Q812 20 822.5 30.5 833 41 833 59L833 275Q833 293 822.5 303.5 812 314 794 314L573 314Q555 314 544.5 303.5 534 293 534 275L534 59ZM768 88L663 187 615 139 582 170 663 251 798 121ZM534 392Q534 374 544 363.5 554 353 573 353L793 353Q811 353 821.5 363.5 832 374 832 392L832 608Q832 626 821.5 636.5 811 647 793 647L573 647Q554 647 544 636.5 534 626 534 608L534 392ZM770 587L770 413 596 413 596 587ZM166 392Q166 374 176.5 363.5 187 353 205 353L426 353Q444 353 454.5 363.5 465 374 465 392L465 608Q465 626 454.5 636.5 444 647 426 647L205 647Q187 647 176.5 636.5 166 626 166 608L166 392ZM400 421L295 520 247 472 214 503 295 584 430 454ZM167 725Q167 707 177 696.5 187 686 206 686L426 686Q444 686 454.5 696.5 465 707 465 725L465 941Q465 959 454.5 969.5 444 980 426 980L206 980Q187 980 177 969.5 167 959 167 941L167 725ZM403 920L403 746 229 746 229 920ZM534 725Q534 707 544.5 696.5 555 686 573 686L794 686Q812 686 822.5 696.5 833 707 833 725L833 941Q833 959 822.5 969.5 812 980 794 980L573 980Q555 980 544.5 969.5 534 959 534 941L534 725ZM768 754L663 853 615 805 582 836 663 917 798 787Z",
     "bg-color": "M420 652Q401 671 376 671 352 671 331 652L116 435Q97 416 97 390 97 365 116 346L273 190 202 119 245 76 316 147 443 20Q462 1 488 1 513 1 532 20L748 235Q767 253 767 280 767 306 748 324L420 652ZM486 67L361 192 433 263 389 307 318 235 194 359 575 407 701 281ZM789 686Q749 686 726 662 703 638 703 604 703 584 712 566 721 548 740 518 774 463 789 429 805 464 837 516 857 547 865.5 565.5 874 584 874 604 874 638 851 662 828 686 789 686ZM103 980Q50 980 50 927L50 822Q50 770 103 770L897 770Q950 770 950 823L950 927Q950 980 897 980L103 980ZM876 940Q897 940 903.5 933 910 926 910 910L910 839Q910 823 903.5 816.5 897 810 876 810L124 810Q103 810 96.5 816.5 90 823 90 839L90 910Q90 926 96.5 933 103 940 124 940L876 940Z",
-    "bg-color-trasparent": "M420 652Q401 671 376 671 352 671 331 652L116 435Q97 416 97 390 97 365 116 346L273 190 202 119 245 76 316 147 443 20Q462 1 488 1 513 1 532 20L748 235Q767 253 767 280 767 306 748 324L420 652ZM486 67L361 192 433 263 389 307 318 235 194 359 575 407 701 281ZM789 686Q749 686 726 662 703 638 703 604 703 584 712 566 721 548 740 518 774 463 789 429 805 464 837 516 857 547 865.5 565.5 874 584 874 604 874 638 851 662 828 686 789 686Z",
+    "bg-color-transparent": "M420 652Q401 671 376 671 352 671 331 652L116 435Q97 416 97 390 97 365 116 346L273 190 202 119 245 76 316 147 443 20Q462 1 488 1 513 1 532 20L748 235Q767 253 767 280 767 306 748 324L420 652ZM486 67L361 192 433 263 389 307 318 235 194 359 575 407 701 281ZM789 686Q749 686 726 662 703 638 703 604 703 584 712 566 721 548 740 518 774 463 789 429 805 464 837 516 857 547 865.5 565.5 874 584 874 604 874 638 851 662 828 686 789 686Z",
     "biology": "M583 550Q619 611 619 678 619 764 559 855L469 997 415 964 456 902 148 702 109 763 55 730 146 588Q191 518 252.5 482 314 446 387 446 406 446 427 449 385 381 385 306 385 221 441 136L533-5 586 29 545 90 853 289 892 228 945 262 854 403Q756 552 614 552 603 552 583 550ZM491 848L507 823Q527 792 541 757L246 567Q223 589 200 623L184 647ZM557 690Q558 683 558 671 558 627 539 591 520 555 482 531 435 502 388 502 345 502 303 524L557 690ZM445 302Q442 352 462 394.5 482 437 524 464 566 493 614 493 657 493 701 468L445 302ZM755 426Q779 402 801 369L817 344 510 144 493 169Q472 200 460 234L755 426Z",
     "black-diamond": "M194 500L500 92 806 504 500 910Z",
     "blockquote": "M852 349L583 347 583 102 930 104 930 351 792 888 715 888ZM359 349L90 347 90 102 437 105 437 353 299 888 222 888Z",
@@ -475,7 +475,7 @@ const FILLED_ICONS = {
     "back-top-filled": "M461 356L301 528 254 483 500 221 746 483 699 528 539 356 539 980 461 980ZM220 20L780 20 780 92 220 92Z",
     "barrage-questions-filled": "M167 59Q167 41 177 30.5 187 20 206 20L426 20Q444 20 454.5 30.5 465 41 465 59L465 275Q465 293 454.5 303.5 444 314 426 314L206 314Q187 314 177 303.5 167 293 167 275L167 59ZM403 254L403 80 229 80 229 254ZM534 59Q534 41 544.5 30.5 555 20 573 20L794 20Q812 20 822.5 30.5 833 41 833 59L833 275Q833 293 822.5 303.5 812 314 794 314L573 314Q555 314 544.5 303.5 534 293 534 275L534 59ZM768 88L663 187 615 139 582 170 663 251 798 121ZM534 392Q534 374 544 363.5 554 353 573 353L793 353Q811 353 821.5 363.5 832 374 832 392L832 608Q832 626 821.5 636.5 811 647 793 647L573 647Q554 647 544 636.5 534 626 534 608L534 392ZM770 587L770 413 596 413 596 587ZM166 392Q166 374 176.5 363.5 187 353 205 353L426 353Q444 353 454.5 363.5 465 374 465 392L465 608Q465 626 454.5 636.5 444 647 426 647L205 647Q187 647 176.5 636.5 166 626 166 608L166 392ZM400 421L295 520 247 472 214 503 295 584 430 454ZM167 725Q167 707 177 696.5 187 686 206 686L426 686Q444 686 454.5 696.5 465 707 465 725L465 941Q465 959 454.5 969.5 444 980 426 980L206 980Q187 980 177 969.5 167 959 167 941L167 725ZM403 920L403 746 229 746 229 920ZM534 725Q534 707 544.5 696.5 555 686 573 686L794 686Q812 686 822.5 696.5 833 707 833 725L833 941Q833 959 822.5 969.5 812 980 794 980L573 980Q555 980 544.5 969.5 534 959 534 941L534 725ZM768 754L663 853 615 805 582 836 663 917 798 787Z",
     "bg-color-filled": "M420 652Q401 671 376 671 352 671 331 652L116 435Q97 416 97 390 97 365 116 346L273 190 202 119 245 76 316 147 443 20Q462 1 488 1 513 1 532 20L748 235Q767 253 767 280 767 306 748 324L420 652ZM486 67L361 192 433 263 389 307 318 235 194 359 575 407 701 281ZM789 686Q749 686 726 662 703 638 703 604 703 584 712 566 721 548 740 518 774 463 789 429 805 464 837 516 857 547 865.5 565.5 874 584 874 604 874 638 851 662 828 686 789 686ZM103 980Q50 980 50 927L50 822Q50 770 103 770L897 770Q950 770 950 823L950 927Q950 980 897 980L103 980ZM876 940Q897 940 903.5 933 910 926 910 910L910 839Q910 823 903.5 816.5 897 810 876 810L124 810Q103 810 96.5 816.5 90 823 90 839L90 910Q90 926 96.5 933 103 940 124 940L876 940Z",
-    "bg-color-trasparent-filled": "M420 652Q401 671 376 671 352 671 331 652L116 435Q97 416 97 390 97 365 116 346L273 190 202 119 245 76 316 147 443 20Q462 1 488 1 513 1 532 20L748 235Q767 253 767 280 767 306 748 324L420 652ZM486 67L361 192 433 263 389 307 318 235 194 359 575 407 701 281ZM789 686Q749 686 726 662 703 638 703 604 703 584 712 566 721 548 740 518 774 463 789 429 805 464 837 516 857 547 865.5 565.5 874 584 874 604 874 638 851 662 828 686 789 686Z",
+    "bg-color-transparent-filled": "M420 652Q401 671 376 671 352 671 331 652L116 435Q97 416 97 390 97 365 116 346L273 190 202 119 245 76 316 147 443 20Q462 1 488 1 513 1 532 20L748 235Q767 253 767 280 767 306 748 324L420 652ZM486 67L361 192 433 263 389 307 318 235 194 359 575 407 701 281ZM789 686Q749 686 726 662 703 638 703 604 703 584 712 566 721 548 740 518 774 463 789 429 805 464 837 516 857 547 865.5 565.5 874 584 874 604 874 638 851 662 828 686 789 686Z",
     "biology-filled": "M583 550Q619 611 619 678 619 764 559 855L469 997 415 964 456 902 149 702 109 763 55 730 146 588Q191 518 252.5 482 314 446 387 446 406 446 427 449 385 381 385 306 385 221 441 136L533-5 586 29 545 90 853 290 892 228 945 262 854 403Q756 552 614 552 603 552 583 550ZM491 848L507 823Q530 786 541 757L245 566Q221 590 200 623L184 647ZM557 690Q558 683 558 669 558 626 539 590.5 520 555 482 531 437 502 388 502 344 502 303 525L557 690ZM446 303Q442 352 462 394.5 482 437 524 464 566 493 613 493 656 493 700 468L446 303ZM756 426Q785 394 801 369L817 344 510 144 493 169Q469 210 460 234L756 426Z",
     "black-diamond-filled": "M194 500L500 92 806 504 500 910Z",
     "blockquote-filled": "M852 349L583 347 583 102 930 104 930 351 792 888 715 888ZM359 349L90 347 90 102 437 105 437 353 299 888 222 888Z",
@@ -1013,14 +1013,14 @@ const ICONS = Object.assign(Object.assign(Object.assign(Object.assign(Object.ass
 });
 /** List of icons that have a color indicator. */
 const COLOR_INDICATOR_ICONS = [
-    "bg-color",
-    "font-color",
-    "picker-color",
-    "stroke-color",
     "bg-color-filled",
+    "bg-color",
     "font-color-filled",
+    "font-color",
     "picker-color-filled",
+    "picker-color",
     "stroke-color-filled",
+    "stroke-color",
 ];
 
 exports.COLOR_INDICATOR_ICONS = COLOR_INDICATOR_ICONS;

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 var utils = require('./utils-BY7xrW7W.js');
 var index = require('./index-wGaSHN1_.js');
-var iconset = require('./iconset-oiCBBbd2.js');
+var iconset = require('./iconset-Cz-UsfoU.js');
 require('./breakpoints-B7vFm-3T.js');
 
 const UTILS = {

package/dist/cjs/z-app-header_12.cjs.entry.js

@@ -4,7 +4,7 @@ var index$1 = require('./index-D_S5lGcb.js');
 var index = require('./index-wGaSHN1_.js');
 var breakpoints = require('./breakpoints-B7vFm-3T.js');
 var utils = require('./utils-BY7xrW7W.js');
-var iconset = require('./iconset-oiCBBbd2.js');
+var iconset = require('./iconset-Cz-UsfoU.js');
 
 const stylesCss$c = () => `:host{position:relative;display:block;box-shadow:var(--shadow-2)}:host,*{box-sizing:border-box}.heading-panel{--title-line-height:1.333;--title-font-size:var(--font-size-6);position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width, 100%);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:calc(var(--space-unit) * 2);margin:0 auto;background:var(--app-header-bg, var(--color-surface01))}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-panel.has-menubar{padding-bottom:0}.heading-panel .heading-container{flex-direction:column-reverse}:host([enable-search]) .heading-panel .heading-container{flex-direction:column}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:row}.heading-title{display:flex;width:100%;flex-direction:row;align-items:flex-start}.heading-title:not(:last-child){margin-right:var(--space-unit)}.z-logo,.search-page-button{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.z-logo img{height:24px;margin:0 var(--space-unit) 0 0;content:url('data:image/svg+xml,<svg width="61" height="32" viewBox="0 0 61 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z" fill="%23E2011A"/><path d="M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z" fill="white"/><path d="M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z" fill="%23E2011A"/><path d="M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z" fill="white"/><path d="M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z" fill="white"/></svg>')}.product-logo{display:none}.product-logo ::slotted([slot="product-logo"]){width:32px;height:32px;margin-right:var(--space-unit)}.product-logo ::slotted([slot="product-logo"]) img{width:100%;height:100%;object-fit:cover}::slotted([slot="title"]),::slotted([slot="stucked-title"]),.stucked-title{margin:0;color:var(--app-header-text-color, var(--color-default-text));font-family:var(--font-family-serif);font-weight:var(--font-sb)}::slotted([slot="title"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font-size:var(--title-font-size);-webkit-line-clamp:2;line-clamp:2;line-height:var(--title-line-height);text-overflow:ellipsis}::slotted(a:is([slot="title"],[slot="stucked-title"])){text-decoration:none}:host([enable-search]) ::slotted([slot="title"])+*{margin-left:calc(var(--space-unit) * 2)}:host([enable-offcanvas]:not([menu-length="0"])) .top-subtitle{padding-left:calc(var(--space-unit) * 4 + var(--space-unit))}::slotted([slot="top-subtitle"]){display:-webkit-box;overflow:hidden;max-width:80%;margin:0;-webkit-box-orient:vertical;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-style:italic;font-weight:var(--font-rg);-webkit-line-clamp:2;line-clamp:2}.search-page-button{margin-left:auto}.menu-container{display:flex;flex:1 auto;column-gap:calc(var(--space-unit) * 4)}.menu-container:focus:focus-visible{outline:none}:host([menu-length="0"]) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted([slot="menu"]:not(:last-child))::after{position:absolute;top:calc(1.5em / 2);right:calc(var(--space-unit) * -2);width:var(--border-size-small);height:1em;background-color:var(--color-default-icon);content:"";font-size:var(--font-size-3);transform:translateY(-50%)}z-searchbar{z-index:0;display:flex;width:100%;align-items:center}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset, 48px);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg, var(--color-surface01));box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color, var(--color-default-text))}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width, 100%);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title{--title-font-size:var(--font-size-5);--title-line-height:1.4;overflow:hidden;align-items:center}.heading-stuck .stucked-title{overflow:hidden;font-size:var(--title-font-size);line-height:var(--title-line-height);text-overflow:ellipsis;white-space:nowrap}.drawer-trigger,::slotted([slot="menu-button"]){display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center;padding:0;border:0;margin-right:var(--space-unit);appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer;outline:none}.drawer-trigger:focus:focus-visible z-icon{box-shadow:var(--shadow-focus-primary)}.drawer-trigger z-icon{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.drawer-content{display:none}z-offcanvas{--z-offcanvas--top-space:var(--app-header-top-offset)}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;cursor:pointer;outline:none}.drawer-close z-icon{fill:var(--color-default-icon)}.drawer-close:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}@media (max-width: 767px){:host([enable-search]) .heading-panel .heading-container{row-gap:calc(var(--space-unit) * 1.5)}}@media (min-width: 768px){.heading-panel{--title-font-size:var(--font-size-9);padding:calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25)}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:column}.heading-panel .heading-container{flex-direction:column;margin-right:auto}.z-logo img{height:32px}.product-logo{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.has-top-subtitle .z-logo{display:none}.top-subtitle.has-product-logo{padding-left:calc(32px + var(--space-unit))}z-searchbar{width:30%;height:calc(var(--title-font-size) * var(--title-line-height));margin-left:auto}.menu-container{flex:initial}.menu-container>[role="menubar"]{display:contents}:host(:not([enable-offcanvas])) .menu-container{margin-top:calc((var(--space-unit) * 1.75))}:host(:not([enable-offcanvas])) .heading-container .drawer-trigger{display:none}.heading-stuck .heading-title{--title-font-size:var(--font-size-8);--title-line-height:1.5}.heading-stuck-content{padding:6px var(--grid-margin)}:host(:not([enable-offcanvas],[menu-length="0"])){padding-left:0}}@media (min-width: 1152px){z-searchbar{min-width:calc(var(--space-unit) * 45)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}`;
 
@@ -365,6 +365,8 @@ ZDivider.style = stylesCss$a();
 
 const stylesCss$9 = () => `:host{display:inline;margin-right:var(--z-icon-right-margin, 0);margin-left:var(--z-icon-left-margin, 0);line-height:0;vertical-align:middle}.icon-wrapper{position:relative;z-index:0;display:inline-block}svg:not([width]){width:var(--z-icon-width, 1.125rem)}svg:not([height]){height:var(--z-icon-height, 1.125rem)}.icon-wrapper svg.color-indicator{position:absolute;z-index:-1;bottom:0;left:0}`;
 
+// https://regex101.com/r/ZnoZQ5/3
+const ICON_NAME_SUFFIX_REGEX = /^(.+?)(-transparent)?(-filled|-button)?$/;
 const ZIcon = class {
     constructor(hostRef) {
         index$1.registerInstance(this, hostRef);
@@ -379,22 +381,49 @@ const ZIcon = class {
         }
         return index$1.h("polygon", { points: iconValue });
     }
+    get hasColorIndicator() {
+        return iconset.COLOR_INDICATOR_ICONS.includes(this.name);
+    }
+    get needsTransparentIndicator() {
+        var _a;
+        return ["transparent", "#ffffff00"].includes((_a = this.indicatorColor) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+    }
+    /**
+     * For icons with a color indicator, if `indicatorColor` is set to transparent, use a specific icon version without the color indicator.
+     * Using the icon without the color indicator prevents visual ambiguity between a transparent indicator and one filled with the background color.
+     * @returns The name of the corresponding icon without the indicator, or the original icon name if no transparent version is needed or available.
+     */
+    getTransparentIndicatorIconIfNeeded() {
+        var _a;
+        const transparentIconName = (_a = this.name) === null || _a === void 0 ? void 0 : _a.replace(ICON_NAME_SUFFIX_REGEX, "$1-transparent$3");
+        if (!this.hasColorIndicator || !this.needsTransparentIndicator || !iconset.ICONS[transparentIconName]) {
+            return this.name;
+        }
+        return transparentIconName;
+    }
+    /**
+     * Render the icon with the color indicator.
+     * The indicator is rendered as a separate SVG element behind the main icon, filled with the `indicatorColor`.
+     */
+    renderColorIndicator() {
+        return (index$1.h("svg", { class: "color-indicator", fill: this.indicatorColor || "#FFFFFF00", viewBox: "0 0 1000 1000", width: this.width, height: this.height }, this.selectPathOrPolygon(iconset.ICONS["picker-color"])));
+    }
     renderBaseIcon() {
-        return (index$1.h("svg", { id: this.iconid || undefined, fill: this.fill ? `var(--${this.fill})` : undefined, viewBox: "0 0 1000 1000", width: this.width, height: this.height }, this.selectPathOrPolygon(iconset.ICONS[this.name])));
+        return (index$1.h("svg", { id: this.iconid || undefined, fill: this.fill ? `var(--${this.fill})` : undefined, viewBox: "0 0 1000 1000", width: this.width, height: this.height }, this.selectPathOrPolygon(iconset.ICONS[this.getTransparentIndicatorIconIfNeeded()])));
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '65da13cefdf22f1935d9e1dbc171522955b24f1b', "aria-hidden": "true" }, iconset.COLOR_INDICATOR_ICONS.includes(this.name) ? (index$1.h("div", { class: "icon-wrapper" }, index$1.h("svg", { class: "color-indicator", fill: this.indicatorColor || "#FFFFFF00", viewBox: "0 0 1000 1000", width: this.width, height: this.height }, this.selectPathOrPolygon(iconset.ICONS["picker-color"])), this.renderBaseIcon())) : (this.renderBaseIcon())));
+        return (index$1.h(index$1.Host, { key: '4a8e4edb8055077b821539897d38849acbccc5e1', "aria-hidden": "true" }, this.hasColorIndicator && !this.needsTransparentIndicator ? (index$1.h("div", { class: "icon-wrapper" }, this.renderColorIndicator(), this.renderBaseIcon())) : (this.renderBaseIcon())));
     }
 };
 ZIcon.style = stylesCss$9();
 
 const stylesGeneralCss = () => `.sc-z-input-h{display:inline-block;width:inherit}.sc-z-input-h *.sc-z-input{box-sizing:border-box}input.sc-z-input::-ms-clear,input.sc-z-input::-ms-reveal{display:none}input[type="search"].sc-z-input::-webkit-search-decoration,input[type="search"].sc-z-input::-webkit-search-cancel-button,input[type="search"].sc-z-input::-webkit-search-results-button,input[type="search"].sc-z-input::-webkit-search-results-decoration{display:none}input.sc-z-input,textarea.sc-z-input{background:var(--color-form-background);fill:var(--color-form-default-icon);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}input.sc-z-input,.textarea-wrapper.sc-z-input{border:var(--border-size-small) solid var(--color-form-surface04);border-radius:var(--border-radius-small);color:var(--color-form-default-text)}[size="small"].sc-z-input-h input.sc-z-input,[size="small"].sc-z-input-h textarea.sc-z-input,[size="x-small"].sc-z-input-h input.sc-z-input,[size="x-small"].sc-z-input-h textarea.sc-z-input{font-size:var(--font-size-2)}.cursor-select.sc-z-input-h input.sc-z-input{cursor:pointer}input.sc-z-input:not([readonly]):hover,.textarea-wrapper.sc-z-input:not(.readonly):hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}.sc-z-input-h:not(.active-select) input.sc-z-input:focus:focus-visible,.sc-z-input-h:not([readonly="true"]) .textarea-wrapper.sc-z-input:focus-within{border-color:var(--color-form-active-primary);box-shadow:var(--shadow-focus-primary);color:var(--color-form-active-primary)}.sc-z-input-h input.sc-z-input:focus:focus-visible:hover,.textarea-wrapper.sc-z-input:not(.readonly):focus-within:hover{outline-color:var(--color-form-active-primary)}.sc-z-input-h input.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input{fill:var(--color-form-active-primary)}.active-select.sc-z-input-h input.sc-z-input{border:var(--border-size-small) solid var(--color-form-active-primary)}.cursor-select.sc-z-input-h input.sc-z-input:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-input-h input[readonly].sc-z-input:focus:focus-visible{border-color:var(--color-form-surface03);box-shadow:none}.input-success.sc-z-input{border-color:var(--color-form-success01);background:var(--color-form-inverse-success)}.input-success.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-success.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-success01)}.input-error.sc-z-input{border-color:var(--color-form-hover-error);background:var(--color-form-inverse-error)}.input-error.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-error.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-hover-error)}.input-warning.sc-z-input{border-color:var(--color-form-hover-warning);background:var(--color-form-inverse-warning)}.input-warning.sc-z-input:focus:focus-visible+.icons-wrapper.sc-z-input,.input-warning.sc-z-input+.icons-wrapper.sc-z-input{fill:var(--color-form-hover-warning)}.sc-z-input:is(.input-success,.input-error.sc-z-input,.input-warning).sc-z-input:focus:focus-visible{color:var(--color-form-default-text)}.sc-z-input-h:not(.active-select) input[readonly].sc-z-input,.textarea-wrapper.readonly.sc-z-input{border-color:var(--color-form-surface03);fill:var(--color-form-disabled01-icon);pointer-events:none}[disabled].sc-z-input-h:not([disabled="false"]) input.sc-z-input,[disabled].sc-z-input-h:not([disabled="false"]) .textarea-wrapper.sc-z-input,[disabled].sc-z-input-h:not([disabled="false"]) z-icon.sc-z-input{border-color:var(--color-form-disabled03);box-shadow:none;color:var(--color-form-disabled-text);fill:var(--color-form-disabled01-icon);pointer-events:none}[disabled].sc-z-input-h:not([disabled="false"]) input.sc-z-input:hover{border-width:var(--border-size-small)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-form-placeholder-text)}.sc-z-input::-webkit-textarea-placeholder{color:var(--color-form-placeholder-text)}.sc-z-input:-ms-textarea-placeholder{color:var(--color-form-placeholder-text)}.sc-z-input::placeholder{color:var(--color-form-placeholder-text)}[disabled].sc-z-input-h:not([disabled="false"]) label.z-label.sc-z-input{color:var(--color-disabled03)}`;
 
-const stylesTextCss = () => `.text-wrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1;fill:var(--color-form-default-icon)}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{width:100%;height:calc(var(--space-unit) * 5.5);box-sizing:border-box;padding:0 calc(var(--space-unit) * 1.5);margin:0}[size="small"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4.5)}[size="x-small"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.sc-z-input,.text-wrapper.sc-z-input>div.sc-z-input>input.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 5.25)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 8)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input{position:absolute;z-index:2;top:50%;right:calc(var(--space-unit) * 1.5);display:flex;pointer-events:none;transform:translateY(-50%)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.sc-z-input{display:flex;padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:initial}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.sc-z-input+.input-icon.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.hidden.sc-z-input{display:none}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.reset-icon.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.toggle-password-icon.sc-z-input{cursor:pointer}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.small.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.x-small.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.sc-z-input:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:currentcolor}`;
+const stylesTextCss = () => `.text-wrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1;fill:var(--color-form-default-icon)}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{width:100%;height:calc(var(--space-unit) * 5.5);box-sizing:border-box;padding:0 calc(var(--space-unit) * 1.5);margin:0}[size="small"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4.5)}[size="x-small"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.sc-z-input,.text-wrapper.sc-z-input>div.sc-z-input>input.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 5.25)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 8)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input{position:absolute;z-index:2;top:50%;right:calc(var(--space-unit) * 1.5);display:flex;pointer-events:none;transform:translateY(-50%)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.sc-z-input{display:flex;padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:initial}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.sc-z-input+.input-icon.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.hidden.sc-z-input{display:none}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.reset-icon.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.toggle-password-icon.sc-z-input{display:flex;min-width:24px;min-height:24px;align-items:center;justify-content:center;cursor:pointer}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.small.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>.input-icon.x-small.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.input-icon.sc-z-input:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:currentcolor}`;
 
 const stylesTextareaCss = () => `.textarea-wrapper.sc-z-input{width:100%;height:100%;padding:calc(var(--space-unit) * 1.5)}.textarea-wrapper.sc-z-input:not(.input-error,.input-success.sc-z-input,.input-warning).sc-z-input{background-color:var(--color-form-background)}textarea.sc-z-input{width:100%;min-height:132px;padding:0;border:none;margin:0;color:currentcolor;resize:none}`;
 
-const stylesCheckboxRadioCss = () => `.radio-wrapper.sc-z-input,.checkbox-wrapper.sc-z-input{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.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary-icon)}.radio-wrapper.sc-z-input>input.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input .radio-label.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{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.sc-z-input input.sc-z-input:not(:disabled)+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.checkbox-label.sc-z-input{cursor:pointer}.radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{cursor:pointer;fill:inherit}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-2)}[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:14px;--z-icon-height:14px}[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-1)}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input{flex-direction:row}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input{flex-direction:row-reverse}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:calc(var(--space-unit) * 0.5)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input{border-radius:50%}.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{border-radius:var(--border-radius-small)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input{color:var(--color-disabled03)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input>z-icon.sc-z-input{cursor:default;fill:var(--color-disabled01)}`;
+const stylesCheckboxRadioCss = () => `.radio-wrapper.sc-z-input,.checkbox-wrapper.sc-z-input{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.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary-icon)}.radio-wrapper.sc-z-input>input.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input .radio-label.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{display:inline-flex;min-height:24px;align-items:center;padding:3px 0;margin:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;text-transform:inherit}.radio-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.checkbox-label.sc-z-input{cursor:pointer}.radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{cursor:pointer;fill:inherit}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-2)}[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:14px;--z-icon-height:14px}[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-1)}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input{flex-direction:row}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input{flex-direction:row-reverse}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:calc(var(--space-unit) * 0.5)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input{border-radius:50%}.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{border-radius:var(--border-radius-small)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input{color:var(--color-disabled03)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input>z-icon.sc-z-input{cursor:default;fill:var(--color-disabled01)}`;
 
 const ZInput = class {
     constructor(hostRef) {
@@ -611,6 +640,7 @@ const ZInput = class {
         return (index$1.h("button", { type: "button", class: { "reset-icon": true, "input-icon": true, hidden }, "aria-label": "cancella il contenuto dell'input", onClick: () => {
                 this.inputRef.value = "";
                 this.emitInputChange("");
+                this.inputRef.focus();
             } }, index$1.h("z-icon", { name: "multiply", class: this.size })));
     }
     renderShowHidePassword() {
@@ -667,7 +697,7 @@ const ZInput = class {
             default:
                 input = this.renderInputText(this.type);
         }
-        return index$1.h(index$1.Host, { key: 'dfc768f25706d7b3abd219948f378ca9b733eafa' }, input);
+        return index$1.h(index$1.Host, { key: 'bc35a655bec5191649c1089a66b41911359da847' }, input);
     }
     get hostElement() { return index$1.getElement(this); }
 };

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

@@ -214,16 +214,22 @@ const ZCombobox = class {
     toggleComboBox() {
         this.isopen = !this.isopen;
     }
+    getHeaderAriaLabel() {
+        if (!this.label || this.selectedCounter <= 0) {
+            return undefined;
+        }
+        const suffix = this.selectedCounter === 1 ? "elemento selezionato" : "elementi selezionati";
+        return `${this.label}: ${this.selectedCounter} ${suffix}`;
+    }
     getComboboxA11yAttributes(isZInput) {
         const role = "combobox";
-        const ariaLabel = this.htmlAriaLabel;
         const ariaExpanded = this.isopen ? "true" : "false";
         const ariaActivedescendant = this.isopen ? this.focusedItemId : "";
         const ariaControls = `${this.inputid}_list`;
         if (isZInput) {
             return {
                 "role": role,
-                "aria-label": ariaLabel,
+                "aria-label": this.htmlAriaLabel,
                 "html-aria-expanded": ariaExpanded,
                 "html-aria-activedescendant": ariaActivedescendant,
                 "html-aria-controls": ariaControls,
@@ -231,7 +237,6 @@ const ZCombobox = class {
         }
         return {
             "role": role,
-            "aria-label": ariaLabel,
             "aria-expanded": ariaExpanded,
             "aria-activedescendant": ariaActivedescendant,
             "aria-controls": ariaControls,
@@ -239,9 +244,7 @@ const ZCombobox = class {
     }
     renderHeader() {
         const comboboxA11yAttributes = !this.hassearch ? this.getComboboxA11yAttributes(false) : {};
-        return (index.h("div", Object.assign({ class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (e) => this.handleHeaderKeyDown(e), role: "button", tabindex: 0, "aria-controls": "open-combo-data", "aria-expanded": this.isopen ? "true" : "false" }, comboboxA11yAttributes), index.h("span", { class: "body-3", "aria-label": this.label
-                ? `${this.label}${this.selectedCounter > 0 ? ` - ${this.selectedCounter} selezionati` : ``}`
-                : undefined }, this.label, index.h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), index.h("z-icon", { name: "caret-down", class: this.size })));
+        return (index.h("div", Object.assign({ class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (e) => this.handleHeaderKeyDown(e), role: "button", tabindex: 0, "aria-controls": "open-combo-data", "aria-expanded": this.isopen ? "true" : "false", "aria-label": this.getHeaderAriaLabel() }, comboboxA11yAttributes), index.h("span", { class: "body-3" }, this.label, index.h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), index.h("z-icon", { name: "caret-down", class: this.size })));
     }
     renderContent() {
         return (index.h("div", { id: "open-combo-data", class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), index.h("div", { role: "listbox", "aria-label": this.label, "aria-multiselectable": "true", id: `${this.inputid}_list`, "aria-owns": `${this.hascheckall ? `${this.getCheckAllOptionId()} ` : ``}${this.itemsList.map((item) => this.getOptionId(item)).join(" ")}` }, this.renderItems())));
@@ -304,7 +307,7 @@ const ZCombobox = class {
         return (index.h("z-list-element", { class: "check-all-wrapper", role: "presentation", htmlTabindex: -1, dividerType: index$1.ListDividerType.ELEMENT, dividerColor: "gray800", size: this.getControlToListSize(), disabled: !!isDisabled }, index.h("span", { class: "option-wrap", role: "presentation", onClick: () => this.checkOption(optionId) }, index.h("z-icon", { name: allChecked ? "checkbox-checked" : "checkbox", class: this.focusedItemId === optionId ? "focused" : "" }), index.h("span", { id: optionId, role: isDisabled ? "presentation" : "option", "aria-selected": allChecked ? "true" : "false" }, allChecked ? this.uncheckalltext : this.checkalltext))));
     }
     render() {
-        return (index.h("div", { key: 'c5938c6fd47c302b44fb4be8be7355dafe60c37a', "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 (index.h("div", { key: '85e406623f826020f0d8236c33c2f79785f23d10', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/z-result-card.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-D_S5lGcb.js');
 
-const stylesCss = () => `:host,*{box-sizing:border-box}:host{display:flex;overflow:hidden;min-width:0;height:11.125rem;padding:var(--space-unit);border:var(--border-size-medium) solid var(--color-surface02);background-color:var(--color-surface01);border-radius:var(--border-size-large);cursor:pointer;font-family:var(--font-family-sans);gap:calc(var(--space-unit) * 2)}z-book-cover{--z-book-cover-stack-shift-x:6px;--z-book-cover-stack-shift-y:8px;--z-book-cover-height:158px;--z-book-cover-border-radius:0}.info-container{display:flex;overflow:hidden;min-width:0;flex:1;flex-direction:column}.authors-label{overflow:hidden;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);text-overflow:ellipsis;white-space:nowrap}.card-title{display:-webkit-box;overflow:hidden;margin:0;-webkit-box-orient:vertical;font-size:var(--font-size-3);font-weight:var(--font-bd);-webkit-line-clamp:2;line-clamp:2;line-height:1.5;word-break:break-word}.card-subtitle{overflow:hidden;color:var(--color-default-text);text-overflow:ellipsis;white-space:nowrap}.tags-container{display:flex;max-width:100%;flex-wrap:wrap;margin-top:calc(var(--space-unit) * 2);gap:var(--space-unit)}.volumes-label{display:flex;flex-grow:1;align-items:end;color:var(--color-default-text);font-size:var(--font-size-1)}:host(.info-card){height:5rem;gap:calc(var(--space-unit) * 1.5)}:host(.info-card) .info-icon-container{display:flex;align-items:center;align-self:flex-start;justify-content:center;padding:var(--space-unit);margin-bottom:calc(var(--space-unit) * 3);background-color:var(--gray50);border-radius:var(--border-size-large)}:host(.info-card) .info-icon{--z-icon-width:1.125rem;--z-icon-height:1.125rem;fill:var(--color-default-icon)}:host(.info-card) .card-title{display:-webkit-box;overflow:hidden;min-width:0;max-width:100%;max-height:2.4em;margin-top:0;margin-bottom:calc(var(--space-unit) / 2);-webkit-box-orient:vertical;font-size:var(--font-size-3);font-weight:var(--font-bd);-webkit-line-clamp:1;line-clamp:1;line-height:1.2;word-break:break-word}:host(.info-card) .card-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.2;white-space:normal;word-break:break-word}@media (max-width: 767px){.card-title{display:block;overflow:hidden;line-height:normal;text-overflow:ellipsis;white-space:nowrap}}`;
+const stylesCss = () => `:host,*{box-sizing:border-box}:host{display:flex;overflow:hidden;min-width:0;min-height:11.125rem;padding:var(--space-unit);border:var(--border-size-medium) solid var(--color-surface02);background-color:var(--color-surface01);border-radius:var(--border-size-large);cursor:pointer;font-family:var(--font-family-sans);gap:calc(var(--space-unit) * 2)}z-book-cover{--z-book-cover-stack-shift-x:6px;--z-book-cover-stack-shift-y:8px;--z-book-cover-height:158px;--z-book-cover-border-radius:0}.info-container{display:flex;overflow:hidden;min-width:0;flex:1;flex-direction:column}.authors-label{overflow:hidden;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);text-overflow:ellipsis;white-space:nowrap}.card-title{display:-webkit-box;overflow:hidden;margin:0;-webkit-box-orient:vertical;font-size:var(--font-size-3);font-weight:var(--font-bd);-webkit-line-clamp:2;line-clamp:2;line-height:1.5;word-break:break-word}.card-subtitle{overflow:hidden;color:var(--color-default-text);line-height:1.4;text-overflow:ellipsis;white-space:nowrap}.tags-container{display:flex;max-width:100%;flex-wrap:wrap;margin-top:calc(var(--space-unit) * 2);gap:var(--space-unit)}.volumes-label{display:flex;flex-grow:1;align-items:end;color:var(--color-default-text);font-size:var(--font-size-1)}:host(.info-card){height:5rem;gap:calc(var(--space-unit) * 1.5)}:host(.info-card) .info-icon-container{display:flex;align-items:center;align-self:flex-start;justify-content:center;padding:var(--space-unit);margin-bottom:calc(var(--space-unit) * 3);background-color:var(--gray50);border-radius:var(--border-size-large)}:host(.info-card) .info-icon{--z-icon-width:1.125rem;--z-icon-height:1.125rem;fill:var(--color-default-icon)}:host(.info-card) .card-title{display:-webkit-box;overflow:hidden;min-width:0;max-width:100%;max-height:2.4em;margin-top:0;margin-bottom:calc(var(--space-unit) / 2);-webkit-box-orient:vertical;font-size:var(--font-size-3);font-weight:var(--font-bd);-webkit-line-clamp:1;line-clamp:1;line-height:1.2;word-break:break-word}:host(.info-card) .card-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.2;white-space:normal;word-break:break-word}@media (max-width: 767px){.card-title{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.4;word-break:break-word}}`;
 
 const ZResultCard = class {
     constructor(hostRef) {

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

@@ -204,16 +204,22 @@ export class ZCombobox {
     toggleComboBox() {
         this.isopen = !this.isopen;
     }
+    getHeaderAriaLabel() {
+        if (!this.label || this.selectedCounter <= 0) {
+            return undefined;
+        }
+        const suffix = this.selectedCounter === 1 ? "elemento selezionato" : "elementi selezionati";
+        return `${this.label}: ${this.selectedCounter} ${suffix}`;
+    }
     getComboboxA11yAttributes(isZInput) {
         const role = "combobox";
-        const ariaLabel = this.htmlAriaLabel;
         const ariaExpanded = this.isopen ? "true" : "false";
         const ariaActivedescendant = this.isopen ? this.focusedItemId : "";
         const ariaControls = `${this.inputid}_list`;
         if (isZInput) {
             return {
                 "role": role,
-                "aria-label": ariaLabel,
+                "aria-label": this.htmlAriaLabel,
                 "html-aria-expanded": ariaExpanded,
                 "html-aria-activedescendant": ariaActivedescendant,
                 "html-aria-controls": ariaControls,
@@ -221,7 +227,6 @@ export class ZCombobox {
         }
         return {
             "role": role,
-            "aria-label": ariaLabel,
             "aria-expanded": ariaExpanded,
             "aria-activedescendant": ariaActivedescendant,
             "aria-controls": ariaControls,
@@ -229,9 +234,7 @@ export class ZCombobox {
     }
     renderHeader() {
         const comboboxA11yAttributes = !this.hassearch ? this.getComboboxA11yAttributes(false) : {};
-        return (h("div", Object.assign({ class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (e) => this.handleHeaderKeyDown(e), role: "button", tabindex: 0, "aria-controls": "open-combo-data", "aria-expanded": this.isopen ? "true" : "false" }, comboboxA11yAttributes), h("span", { class: "body-3", "aria-label": this.label
-                ? `${this.label}${this.selectedCounter > 0 ? ` - ${this.selectedCounter} selezionati` : ``}`
-                : undefined }, this.label, h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), h("z-icon", { name: "caret-down", class: this.size })));
+        return (h("div", Object.assign({ class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (e) => this.handleHeaderKeyDown(e), role: "button", tabindex: 0, "aria-controls": "open-combo-data", "aria-expanded": this.isopen ? "true" : "false", "aria-label": this.getHeaderAriaLabel() }, comboboxA11yAttributes), h("span", { class: "body-3" }, this.label, h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), h("z-icon", { name: "caret-down", class: this.size })));
     }
     renderContent() {
         return (h("div", { id: "open-combo-data", class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), h("div", { role: "listbox", "aria-label": this.label, "aria-multiselectable": "true", id: `${this.inputid}_list`, "aria-owns": `${this.hascheckall ? `${this.getCheckAllOptionId()} ` : ``}${this.itemsList.map((item) => this.getOptionId(item)).join(" ")}` }, this.renderItems())));
@@ -294,7 +297,7 @@ 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: 'c5938c6fd47c302b44fb4be8be7355dafe60c37a', "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: '85e406623f826020f0d8236c33c2f79785f23d10', "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"; }

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

@@ -1,5 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { COLOR_INDICATOR_ICONS, ICONS } from "../../constants/iconset";
+// https://regex101.com/r/ZnoZQ5/3
+const ICON_NAME_SUFFIX_REGEX = /^(.+?)(-transparent)?(-filled|-button)?$/;
 /**
  * Component to render an SVG icon from the internal icon set, selected by `name`.
  * This component automatically recognizes icons that have an indicator (e.g. `bg-color`, `font-color`, etc.), that can be filled with a custom color via the `indicatorColor` prop.
@@ -15,11 +17,38 @@ export class ZIcon {
         }
         return h("polygon", { points: iconValue });
     }
+    get hasColorIndicator() {
+        return COLOR_INDICATOR_ICONS.includes(this.name);
+    }
+    get needsTransparentIndicator() {
+        var _a;
+        return ["transparent", "#ffffff00"].includes((_a = this.indicatorColor) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+    }
+    /**
+     * For icons with a color indicator, if `indicatorColor` is set to transparent, use a specific icon version without the color indicator.
+     * Using the icon without the color indicator prevents visual ambiguity between a transparent indicator and one filled with the background color.
+     * @returns The name of the corresponding icon without the indicator, or the original icon name if no transparent version is needed or available.
+     */
+    getTransparentIndicatorIconIfNeeded() {
+        var _a;
+        const transparentIconName = (_a = this.name) === null || _a === void 0 ? void 0 : _a.replace(ICON_NAME_SUFFIX_REGEX, "$1-transparent$3");
+        if (!this.hasColorIndicator || !this.needsTransparentIndicator || !ICONS[transparentIconName]) {
+            return this.name;
+        }
+        return transparentIconName;
+    }
+    /**
+     * Render the icon with the color indicator.
+     * The indicator is rendered as a separate SVG element behind the main icon, filled with the `indicatorColor`.
+     */
+    renderColorIndicator() {
+        return (h("svg", { class: "color-indicator", fill: this.indicatorColor || "#FFFFFF00", viewBox: "0 0 1000 1000", width: this.width, height: this.height }, this.selectPathOrPolygon(ICONS["picker-color"])));
+    }
     renderBaseIcon() {
-        return (h("svg", { id: this.iconid || undefined, fill: this.fill ? `var(--${this.fill})` : undefined, viewBox: "0 0 1000 1000", width: this.width, height: this.height }, this.selectPathOrPolygon(ICONS[this.name])));
+        return (h("svg", { id: this.iconid || undefined, fill: this.fill ? `var(--${this.fill})` : undefined, viewBox: "0 0 1000 1000", width: this.width, height: this.height }, this.selectPathOrPolygon(ICONS[this.getTransparentIndicatorIconIfNeeded()])));
     }
     render() {
-        return (h(Host, { key: '65da13cefdf22f1935d9e1dbc171522955b24f1b', "aria-hidden": "true" }, COLOR_INDICATOR_ICONS.includes(this.name) ? (h("div", { class: "icon-wrapper" }, h("svg", { class: "color-indicator", fill: this.indicatorColor || "#FFFFFF00", viewBox: "0 0 1000 1000", width: this.width, height: this.height }, this.selectPathOrPolygon(ICONS["picker-color"])), this.renderBaseIcon())) : (this.renderBaseIcon())));
+        return (h(Host, { key: '4a8e4edb8055077b821539897d38849acbccc5e1', "aria-hidden": "true" }, this.hasColorIndicator && !this.needsTransparentIndicator ? (h("div", { class: "icon-wrapper" }, this.renderColorIndicator(), this.renderBaseIcon())) : (this.renderBaseIcon())));
     }
     static get is() { return "z-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -210,6 +210,7 @@ export class ZInput {
         return (h("button", { type: "button", class: { "reset-icon": true, "input-icon": true, hidden }, "aria-label": "cancella il contenuto dell'input", onClick: () => {
                 this.inputRef.value = "";
                 this.emitInputChange("");
+                this.inputRef.focus();
             } }, h("z-icon", { name: "multiply", class: this.size })));
     }
     renderShowHidePassword() {
@@ -266,7 +267,7 @@ export class ZInput {
             default:
                 input = this.renderInputText(this.type);
         }
-        return h(Host, { key: 'dfc768f25706d7b3abd219948f378ca9b733eafa' }, input);
+        return h(Host, { key: 'bc35a655bec5191649c1089a66b41911359da847' }, input);
     }
     static get is() { return "z-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -26,7 +26,9 @@
 .radio-wrapper .radio-label,
 .checkbox-wrapper .checkbox-label {
   display: inline-flex;
+  min-height: 24px;
   align-items: center;
+  padding: 3px 0;
   margin: 0;
   color: inherit;
   font-family: inherit;

package/dist/collection/components/z-input/styles-text.css

@@ -59,6 +59,11 @@
 
 .text-wrapper .icons-wrapper > button.reset-icon,
 .text-wrapper .icons-wrapper > button.toggle-password-icon {
+  display: flex;
+  min-width: 24px;
+  min-height: 24px;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
 }
 

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

@@ -7,7 +7,7 @@
   display: flex;
   overflow: hidden;
   min-width: 0;
-  height: 11.125rem;
+  min-height: 11.125rem;
   padding: var(--space-unit);
   border: var(--border-size-medium) solid var(--color-surface02);
   background-color: var(--color-surface01);
@@ -57,6 +57,7 @@ z-book-cover {
 .card-subtitle {
   overflow: hidden;
   color: var(--color-default-text);
+  line-height: 1.4;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -131,10 +132,12 @@ z-book-cover {
 
 @media (max-width: 767px) {
   .card-title {
-    display: block;
+    display: -webkit-box;
     overflow: hidden;
-    line-height: normal;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    line-height: 1.4;
+    word-break: break-word;
   }
 }